/* =====================================================================================================
   Legal pages (SPEC 5.8) — greekgpt_privacy_policy.html, mago_account_delete.html.
   Every rule scoped under .page-legal. Paper reading mode: the site's dark board around a Bone sheet.
   1. Desk ......... layout grid (rail | document), the light pool the sheet lies in, the header over paper
   2. Rail ......... DOC / KIND / PRODUCT path and the reading meter (wide screens, sticky)
   3. Tabs ......... the two legal documents as folder tabs on the sheet's top edge
   4. Sheet ........ paper, ink tokens, the entrance modes (full "print" once per session) + document switch
   5. Type ......... letterhead, title, body measure, hanging numerals
   6. Title block .. engineering-drawing style document facts at the foot of the sheet
   7. Fig. 1 ....... GreekGPT data flow (vertical by default, horizontal ≥ 38rem, margin column on wide sheets)
   8. Statement .... MAGO's monumental reverse-type card
   9. Next link
  10. Modes ........ forced colors, print
   Composition: one column below a 62rem desk (rail hidden; the tabs carry the context) · rail | sheet
   above it · MAGO centres its sheet once both side columns fit · GreekGPT widens its sheet on big
   desks so Fig. 1 moves into a margin column beside the text (extra width → a column, never longer lines).
   ===================================================================================================== */


/* ---------------------------------------------------------------------------------------- 1. Desk */

/* paper tones beside the foundation's --paper / --ink / --graphite / --rule / --ink-link */
.page-legal {
    --paper-hi: #F3EFE6;   /* the lit top-left of the sheet (and the current tab) */
    --paper-lo: #E2DBCC;   /* the far corner */
}

.page-legal .legal {
    position: relative;
    isolation: isolate;
    padding-top: calc(var(--header-offset) + clamp(1.25rem, .75rem + 3vmin, 4rem));
    padding-bottom: calc(var(--section) * .7);
}

/* The board brightens where the sheet lies: a soft photon pool with a little violet above it */
.page-legal .legal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 38% at 52% 30%, rgba(124, 214, 255, .1), transparent 72%),
        radial-gradient(30% 24% at 64% 12%, rgba(154, 107, 255, .08), transparent 70%);
}

/* Scrolled, the header passes over Bone paper and reverse-type ink: a solid bus bar with no blur, so neither
   the sheet's light nor its text ever shows through (the open mobile menu keeps the foundation's bar) */
.page-legal .site-header.is-scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html:not(.menu-open) .page-legal .site-header.is-scrolled::before {
    background: var(--ground);
}

.page-legal .legal-grid {
    --doc-max: 52rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    align-items: start;
}

.page-legal .doc {
    min-width: 0;
}

/* rail | sheet, the next link under the sheet */
@container (min-width: 62rem) {
    .page-legal .legal-grid {
        grid-template-columns: 11.5rem minmax(0, var(--doc-max));
        column-gap: clamp(1.75rem, 3.5cqi, 4.5rem);
    }

    .page-legal .legal-next {
        grid-column: 2;
    }
}

/* MAGO: the sheet sits dead centre once both side columns can hold the rail. (Below that it keeps GreekGPT's
   column exactly, so switching documents swaps them in place.) */
@container (min-width: 84rem) {
    .page-legal .legal-grid--statement {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--doc-max)) minmax(0, 1fr);
    }

    .page-legal .legal-grid--statement .doc-rail {
        justify-self: end;
        width: min(11.5rem, 100%);
    }

    .page-legal .legal-grid--statement .legal-next {
        grid-column: 3;
        grid-row: 1;
    }
}

/* GreekGPT: big desks get a wide sheet with Fig. 1 in its margin column */
@container (min-width: 86rem) {
    .page-legal .legal-grid--figure {
        --doc-max: 82rem;
    }
}

@container (min-width: 114rem) {
    .page-legal .legal-grid--figure {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--doc-max)) minmax(0, 1fr);
    }

    .page-legal .legal-grid--figure .doc-rail {
        justify-self: end;
        width: min(11.5rem, 100%);
    }

    .page-legal .legal-grid--figure .legal-next {
        grid-column: 3;
        grid-row: 1;
    }
}


/* ---------------------------------------------------------------------------------------- 2. Rail */

.page-legal .doc-rail {
    display: none;
}

@container (min-width: 62rem) {
    .page-legal .doc-rail {
        position: sticky;
        top: calc(var(--header-offset) + 1.5rem);
        display: block;
        /* line the path up with the tab row */
        padding-top: .2rem;
    }
}

/* DOC / PRIVACY POLICY / GREEKGPT — one segment per line, joined by a hairline trace */
.page-legal .doc-path {
    position: relative;
    display: grid;
    gap: .7rem;
    max-width: none;
    padding-left: 1.1rem;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
}

.page-legal .doc-path::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    bottom: .45em;
    width: 1px;
    background: linear-gradient(var(--line-strong), rgba(var(--accent-rgb), .7));
}

.page-legal .doc-path > span {
    position: relative;
    display: block;
}

/* node dots on the trace */
.page-legal .doc-path > span::before {
    content: "";
    position: absolute;
    left: calc(-1.1rem - 2px);
    top: .42em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ground);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* the slash hangs: a wrapped label ("ACCOUNT / DELETION") lines up under its first word */
.page-legal .doc-path > .doc-path-seg {
    display: flex;
    color: var(--text-2);
}

.page-legal .doc-path-sep {
    flex: none;
    margin-right: .4em;
    color: var(--accent-text);
}

.page-legal .doc-path .doc-path-name {
    color: var(--plasma);
}

.page-legal .doc-path .doc-path-name::before {
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18), var(--glow-accent);
}

/* Reading meter (GreekGPT; shown by js/page-legal.js only when the text takes a real scroll to reach):
   the rail's trace continues down to a terminal node, lights as you read, and the readout rides the node */
.page-legal .doc-meter {
    --read: 0;
    position: relative;
    height: clamp(4.5rem, 26svh, 13rem);
    margin-top: 1.4rem;
}

/* the path's trace carries on across the gap into the track, so DOC → terminal is one continuous run */
.page-legal .doc-meter::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 1px;
    height: 1.75rem;
    background: linear-gradient(rgba(var(--accent-rgb), .7), var(--line));
}

/* the terminal: the trace ends on a pad like the path's nodes (::before, so the moving node lands on top) */
.page-legal .doc-meter::before {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ground);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.page-legal .doc-meter-track {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.page-legal .doc-meter-track::before {
    content: "";
    position: absolute;
    inset: 0;
    transform-origin: top;
    scale: 1 var(--read);
    background: linear-gradient(rgba(var(--accent-rgb), .25), var(--accent));
    box-shadow: 0 0 8px rgba(var(--accent-rgb), .55);
}

.page-legal .doc-meter-track::after {
    content: "";
    position: absolute;
    left: -3px;
    top: calc(var(--read) * 100% - 3.5px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--plasma);
    box-shadow: 0 0 10px 2px rgba(var(--accent-rgb), .7);
}

.page-legal .doc-meter-readout {
    position: absolute;
    left: 1.1rem;
    top: calc(var(--read) * 100%);
    display: flex;
    align-items: baseline;
    gap: .7rem;
    translate: 0 -50%;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
}

.page-legal .doc-meter-value {
    letter-spacing: .08em;
    color: var(--plasma);
}


/* ---------------------------------------------------------------------------------------- 3. Tabs */

.page-legal .doc-tabs ul {
    display: flex;
    gap: .375rem;
    /* tabs never reach the sheet's rounded top-right corner */
    padding-right: calc(var(--r-md) + .25rem);
}

.page-legal .doc-tabs li {
    display: flex;
    flex: 0 1 16rem;
    min-width: 0;
}

.page-legal .doc-tab {
    position: relative;
    display: grid;
    flex: 1;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    column-gap: .75rem;
    row-gap: .2rem;
    min-width: 0;
    min-height: 3.6rem;
    padding: .65rem 1.1rem .6rem;
    color: var(--text-2);
    background: rgba(14, 20, 48, .6);
    border-radius: var(--r-md) var(--r-md) 0 0;
    box-shadow: inset 0 1px 0 var(--line-strong), inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
    transition: background-color var(--dur-2), color var(--dur-1), box-shadow var(--dur-2);
}

.page-legal .doc-tab-index {
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
}

.page-legal .doc-tab-name {
    overflow-wrap: anywhere;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.page-legal .doc-tab-kind {
    grid-column: 2;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: .6875rem;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.page-legal .doc-tab:not([aria-current]):hover {
    color: var(--text);
    background: rgba(14, 20, 48, .9);
    box-shadow: inset 0 1px 0 var(--accent), inset 1px 0 0 var(--line-strong), inset -1px 0 0 var(--line-strong);
}

.page-legal .doc-tab:focus-visible {
    outline-offset: -2px;
    box-shadow: var(--focus-halo);
}

/* The current document's tab is cut from the same paper as the sheet */
.page-legal .doc-tab[aria-current="page"] {
    z-index: 1;
    color: var(--ink);
    background: var(--paper-hi);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    --focus: var(--ink-focus);
}

.page-legal .doc-tab[aria-current="page"] .doc-tab-name { color: var(--ink); }
.page-legal .doc-tab[aria-current="page"] .doc-tab-kind { color: var(--graphite); }
.page-legal .doc-tab[aria-current="page"] .doc-tab-index { color: var(--ink-link); }

/* concave fillets where the tab meets the sheet's top edge (none on the sheet's square corner) */
.page-legal .doc-tab[aria-current="page"]::before,
.page-legal .doc-tab[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: var(--r-md);
    height: var(--r-md);
}

.page-legal .doc-tab[aria-current="page"]::after {
    left: 100%;
    background: radial-gradient(circle at 100% 0, transparent calc(var(--r-md) - .5px), var(--paper-hi) var(--r-md));
}

.page-legal li:not(:first-child) > .doc-tab[aria-current="page"]::before {
    right: 100%;
    background: radial-gradient(circle at 0 0, transparent calc(var(--r-md) - .5px), var(--paper-hi) var(--r-md));
}

/* narrow: the index goes, the labels get the room */
@container (max-width: 25rem) {
    .page-legal .doc-tab {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: .8rem;
    }

    .page-legal .doc-tab-index { display: none; }
    .page-legal .doc-tab-kind { grid-column: 1; letter-spacing: .08em; }
}


/* ---------------------------------------------------------------------------------------- 4. Sheet */

.page-legal .sheet {
    /* ink tokens: everything on the paper (links, buttons, focus) re-themes from these */
    --text: var(--ink);
    --text-2: #34363C;
    --text-3: var(--graphite);
    --plasma: var(--ink);
    --accent: var(--ink-link);
    --accent-2: var(--graphite);
    --accent-rgb: 52, 67, 224;
    --accent-text: var(--ink-link);
    --on-accent: var(--paper);
    --focus: var(--ink-focus);
    --focus-halo: 0 0 0 6px rgba(236, 231, 220, .9);
    --line: rgba(14, 15, 18, .12);
    --line-strong: rgba(14, 15, 18, .3);
    --glow-accent: 0 0 0 transparent;
    --glow-soft: 0 0 0 transparent;
    --sheet-pad: clamp(1.25rem, 6.5cqi, 4.75rem);
    position: relative;
    z-index: 0;
    container-type: inline-size;
    overflow: clip;
    color: var(--ink);
    color-scheme: light;
    background-color: var(--paper);
    /* paper fibre (a tiny SVG noise tile) over the light falling across the sheet */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),
        linear-gradient(164deg, var(--paper-hi) 0%, var(--paper) 42%, var(--paper-lo) 100%);
    border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        0 0 0 1px rgba(142, 155, 255, .1),
        0 2px 3px rgba(0, 0, 0, .4),
        0 34px 80px -28px rgba(0, 0, 0, .9),
        0 0 160px -40px rgba(124, 214, 255, .22);
}

.page-legal .sheet-ink {
    padding: calc(var(--sheet-pad) * .72) var(--sheet-pad) var(--sheet-pad);
}

/* a binding margin wide enough for the hanging numerals */
@container (min-width: 44rem) {
    .page-legal .sheet-ink:has(.sheet-steps) {
        padding-left: max(var(--sheet-pad), 4.75rem);
    }
}

.page-legal .sheet ::selection {
    background: rgba(52, 67, 224, .2);
    color: var(--ink);
}

.page-legal .statement ::selection {
    background: rgba(124, 214, 255, .35);
    color: #fff;
}

/* Entrance. The inline script in <head> picks one mode per load, on activation (never in print):
   .legal-entry-full .... first legal page of the session: the paper arrives, then a scan head of light passes
                          down it and the ink appears behind it
   .legal-entry-brief ... any later load (reload, back, a return visit): tabs and paper rise, ink already on
   .legal-entry-none .... arrived from the other legal document: no entrance, the documents crossfade (below)
   Fill "backwards" only, so nothing stays clipped once it has run. */
@media screen and (prefers-reduced-motion: no-preference) {
    .legal-entry-full:not(.motion-off) .page-legal .doc-tabs {
        animation: legal-rise var(--dur-3) var(--ease-out) backwards;
    }

    .legal-entry-full:not(.motion-off) .page-legal .sheet {
        animation: legal-rise 760ms var(--ease-out) 80ms backwards;
    }

    .legal-entry-full:not(.motion-off) .page-legal .sheet-ink {
        animation: legal-ink 1250ms var(--ease-io) 320ms backwards;
    }

    /* the scan head: a photon line with a soft glow, trailing a band of light that brightens the fresh print.
       It overhangs the sheet's bottom edge by the glow's depth (clipped by the sheet) so the line can finish there. */
    .legal-entry-full:not(.motion-off) .page-legal .sheet::after {
        content: "";
        position: absolute;
        inset: 0 0 -.5rem;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) calc(100% - 9rem),
            rgba(255, 255, 255, .55) calc(100% - .5rem - 3px),
            rgba(124, 214, 255, .95) calc(100% - .5rem - 1px),
            rgba(124, 214, 255, .95) calc(100% - .5rem + .5px),
            rgba(124, 214, 255, .22) calc(100% - .5rem + 2.5px),
            rgba(124, 214, 255, 0) 100%);
        opacity: 0;
        animation: legal-head 1250ms var(--ease-io) 320ms;
    }

    .legal-entry-brief:not(.motion-off) .page-legal .doc-tabs {
        animation: legal-rise 420ms var(--ease-out) backwards;
    }

    .legal-entry-brief:not(.motion-off) .page-legal .sheet {
        animation: legal-rise 520ms var(--ease-out) 40ms backwards;
    }
}

/* Switching GreekGPT ⇄ MAGO: the root crossfades in place (equal curves, so the two always sum to full
   cover) while the header stays pinned, instead of the site's scan collapse. Class set in pagereveal. */
html.legal-swap::view-transition {
    background: #03040A;
}

html.legal-swap::view-transition-old(root) {
    animation: legal-fade-out 220ms var(--ease-io) both;
}

html.legal-swap::view-transition-new(root) {
    animation: legal-fade-in 220ms var(--ease-io) both;
}

@keyframes legal-fade-out {
    to { opacity: 0; }
}

@keyframes legal-fade-in {
    from { opacity: 0; }
}

@keyframes legal-rise {
    from { opacity: 0; translate: 0 1.25rem; }
}

@keyframes legal-ink {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes legal-head {
    from { translate: 0 -100%; opacity: 1; }
    88% { opacity: 1; }
    to { translate: 0 0; opacity: 0; }
}


/* ---------------------------------------------------------------------------------------- 5. Type */

.page-legal .sheet-letterhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding-bottom: clamp(.8rem, 2.2cqi, 1.1rem);
    /* letterhead double rule */
    border-bottom: 1px solid var(--ink);
    box-shadow: 0 3px 0 -2px var(--rule);
}

.page-legal .sheet-issuer {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    max-width: none;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink);
}

.page-legal .sheet-emblem {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-legal .sheet-print {
    margin-block: -.35rem;
}

.page-legal .sheet-title {
    max-width: 20ch;
    margin-top: clamp(1.4rem, min(6cqi, 4.5svh), 3.75rem);
    font-size: min(clamp(2rem, 1.15rem + 3.2vmin, 4.5rem), 9.5cqi);
    font-weight: 300;
    font-stretch: 100%;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--ink);
}

@container (max-width: 29.99rem) {
    .page-legal .sheet-title { font-stretch: 86%; }
}

/* MAGO: the statement card carries the monumental type, so the document title steps down to a single line */
.page-legal .legal-grid--statement .sheet-title {
    max-width: none;
    font-size: min(clamp(1.75rem, 1rem + 2.4vmin, 2.75rem), 9cqi);
}

@container (min-width: 48rem) {
    .page-legal .sheet-title { font-stretch: 112%; }
}

.page-legal .sheet-body {
    margin-top: clamp(1.5rem, min(5cqi, 3.75svh), 3rem);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
}

.page-legal .sheet-body > :is(p, ol) {
    max-width: 64ch;
}

.page-legal .sheet-body > * + * {
    margin-top: 1.1em;
}

/* Hanging numerals: mono 01–03 in ink blue (the same numbers label the wires in Fig. 1).
   Inline on narrow sheets, hung into the margin once the sheet has one. */
.page-legal .sheet-steps {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.page-legal .sheet-steps > li {
    position: relative;
    padding-left: 2.5rem;
    counter-increment: step;
}

.page-legal .sheet-steps > li + li {
    margin-top: .75em;
}

.page-legal .sheet-steps > li::before {
    content: counter(step, decimal-leading-zero);
    content: counter(step, decimal-leading-zero) / "";
    position: absolute;
    left: 0;
    top: .34em;
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-link);
}

/* the leader: a short rule from the numeral toward the text */
.page-legal .sheet-steps > li::after {
    content: "";
    position: absolute;
    left: 1.55rem;
    top: .95em;
    width: .6rem;
    height: 1px;
    background: var(--rule);
}

@container (min-width: 44rem) {
    .page-legal .sheet-steps > li {
        padding-left: 0;
    }

    .page-legal .sheet-steps > li::before {
        left: auto;
        right: calc(100% + 1.35rem);
    }

    .page-legal .sheet-steps > li::after {
        left: auto;
        right: calc(100% + .45rem);
    }
}

/* Folded and small phones (sheet ≤ 22rem): every column of width goes to the text. Slimmer margins, body at
   1rem, a firmer title, the Print button as an icon beside the issuer, and each numeral set above its step
   on a hairline (rather than indenting the text). */
@container (max-width: 22rem) {
    .page-legal .sheet-ink {
        padding: 1.1rem 1rem 1.25rem;
    }

    .page-legal .sheet-letterhead {
        flex-wrap: nowrap;
        gap: .5rem;
    }

    .page-legal .sheet-issuer {
        gap: .5rem;
        min-width: 0;
        font-size: .65rem;
        letter-spacing: .16em;
    }

    .page-legal .sheet-emblem {
        flex: none;
        width: 1.5rem;
        height: 1.5rem;
    }

    .page-legal .sheet-print {
        flex: none;
        width: 2.75rem;
        min-height: 2.75rem;
        margin-block: -.5rem;
        padding: 0;
    }

    .page-legal .sheet-print svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .page-legal .sheet-print-word {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .page-legal .sheet-title {
        font-size: 11cqi;
        font-weight: 400;
        letter-spacing: -.01em;
    }

    .page-legal .sheet-body {
        font-size: 1rem;
        line-height: 1.65;
    }

    .page-legal .sheet-steps > li {
        padding: 1.6rem 0 0;
    }

    .page-legal .sheet-steps > li::before {
        top: 0;
    }

    .page-legal .sheet-steps > li::after {
        left: 1.9rem;
        right: 0;
        top: .57rem;
        width: auto;
    }
}


/* ---------------------------------------------------------------------------------------- 6. Title block */

.page-legal .sheet-foot {
    margin-top: clamp(2rem, 6.5cqi, 4.25rem);
}

.page-legal .title-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 2px solid var(--ink);
    border-left: 1px solid var(--rule);
}

@container (min-width: 22rem) {
    .page-legal .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 50rem) {
    .page-legal .title-block { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.page-legal .title-cell {
    display: grid;
    align-content: start;
    gap: .35rem;
    min-width: 0;
    padding: .7rem .9rem .8rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.page-legal .title-cell dt {
    font-family: var(--font-mono);
    font-size: .6875rem;
    line-height: 1.3;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--graphite);
}

.page-legal .title-cell dd {
    overflow-wrap: anywhere;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
}

/* touch: a 44px target without moving the line (the underline stays on the text) */
@media (pointer: coarse) {
    .page-legal .title-cell dd > a {
        display: inline-block;
        padding-block: .72rem;
        margin-block: -.72rem;
        background-position: 0 calc(100% - .66rem);
    }
}


/* ---------------------------------------------------------------------------------------- 7. Fig. 1 */

.page-legal .flow-figure {
    --node: 2.75rem;
    min-width: 0;
    margin-block: 1.9em;
    padding: clamp(1rem, 4.5cqi, 1.75rem);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    /* drafting grid */
    background:
        linear-gradient(rgba(85, 87, 94, .075) 1px, transparent 1px) -1px -1px / 1.25rem 1.25rem,
        linear-gradient(90deg, rgba(85, 87, 94, .075) 1px, transparent 1px) -1px -1px / 1.25rem 1.25rem,
        rgba(255, 255, 255, .2);
}

.page-legal .sheet-body > .flow-figure + * {
    margin-top: 0;
}

/* the frame (label + diagram) is the container the diagram's orientation reads */
.page-legal .flow-frame {
    container-type: inline-size;
    min-width: 0;
}

/* mid-width sheets: diagram left, its conclusion beside it (rather than an empty right half) */
@container (min-width: 36rem) and (max-width: 49.99rem) {
    .page-legal .flow-figure {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        column-gap: clamp(1.25rem, 4cqi, 2.25rem);
    }

    .page-legal .flow-caption {
        align-self: center;
        margin-top: 0;
        padding: .25rem 0 .25rem clamp(1rem, 3cqi, 1.5rem);
        border-top: 0;
        border-left: 1px dashed var(--rule);
        font-size: 1.125rem;
        line-height: 1.4;
        text-wrap: balance;
    }
}

.page-legal .flow-label {
    margin-bottom: 1.1rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--graphite);
}

.page-legal .flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    font-size: 1rem;
    line-height: 1.4;
}

.page-legal .flow-node {
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    column-gap: .9rem;
    align-items: center;
}

.page-legal .flow-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: var(--node);
    height: var(--node);
    color: var(--ink);
    background: var(--paper-hi);
    border: 1.5px solid var(--ink);
    border-radius: var(--r-sm);
    transition: border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-3);
}

.page-legal .flow svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-legal .flow-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.page-legal .flow-name {
    align-self: end;
    font-size: .9688rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}

.page-legal .flow-node:not(:has(.flow-note)) .flow-name {
    grid-row: 1 / span 2;
    align-self: center;
}

.page-legal .flow-note {
    grid-column: 2;
    align-self: start;
    margin-top: .1rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--graphite);
}

.page-legal .flow-stamp {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    white-space: nowrap;
    color: var(--ink);
    font-weight: 600;
}

.page-legal .flow-stamp svg {
    width: .95em;
    height: .95em;
    color: var(--ink-link);
}

/* wires (vertical by default): a line from node to node with an arrowhead, its step number and words beside it */
.page-legal .flow-wire {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.4rem;
    padding: .35rem 0 .35rem calc(var(--node) + .9rem);
}

.page-legal .flow-wire-line {
    position: absolute;
    left: calc(var(--node) / 2 - .75px);
    top: .3rem;
    bottom: .3rem;
    border-left: 1.5px solid var(--ink-link);
    transform-origin: top;
}

.page-legal .flow-wire-line::after {
    content: "";
    position: absolute;
    left: -4.75px;
    bottom: 1px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--ink-link);
    border-bottom: 1.5px solid var(--ink-link);
    rotate: 45deg;
}

.page-legal .flow-wire-label {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .6em;
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--graphite);
}

.page-legal .flow-wire-num {
    color: var(--ink-link);
}

.page-legal .flow-caption {
    max-width: none;
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--rule);
    font-size: .9688rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
}

/* horizontal: voice → server → OpenAI → device, the wires level with the icons */
@container (min-width: 38rem) {
    .page-legal .flow {
        grid-template-columns:
            minmax(0, 1fr) minmax(3.75rem, .7fr)
            minmax(0, 1fr) minmax(3.75rem, .7fr)
            minmax(0, 1fr) minmax(3.75rem, .7fr)
            minmax(0, 1fr);
        align-items: start;
    }

    .page-legal .flow-node {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .7rem;
        align-items: start;
        justify-items: center;
        text-align: center;
    }

    .page-legal .flow-icon,
    .page-legal .flow-node:not(:has(.flow-note)) .flow-name {
        grid-row: auto;
    }

    .page-legal .flow-name,
    .page-legal .flow-node:not(:has(.flow-note)) .flow-name {
        align-self: start;
    }

    /* one line per note, the "not stored" stamp on its own line below (the dot separator drops out);
       a note may overhang its column a little into the empty band under the neighbouring wire */
    .page-legal .flow-note {
        grid-column: 1;
        margin-top: -.35rem;
        white-space: nowrap;
    }

    .page-legal .flow-note-sep {
        display: none;
    }

    .page-legal .flow-stamp {
        display: flex;
        justify-content: center;
    }

    .page-legal .flow-wire {
        display: block;
        height: var(--node);
        min-height: 0;
        padding: 0;
    }

    /* the wire reaches into the node columns, close to both icons */
    .page-legal .flow-wire-line {
        left: -.85rem;
        right: -.8rem;
        top: calc(50% - .75px);
        bottom: auto;
        border-left: 0;
        border-top: 1.5px solid var(--ink-link);
        transform-origin: left;
    }

    .page-legal .flow-wire-line::after {
        left: auto;
        right: 1px;
        bottom: auto;
        top: -4.75px;
        rotate: -45deg;
    }

    /* number above the wire, words below it on one line (free to overhang the wire's column into the
       clear space beside the neighbouring icons, so they never wrap down into the node-name row) */
    .page-legal .flow-wire-label {
        position: absolute;
        inset: 0 -1rem;
        display: grid;
        grid-template-rows: 1fr 1fr;
        row-gap: 1rem;
        justify-items: center;
        text-align: center;
        white-space: nowrap;
        letter-spacing: .08em;
    }

    .page-legal .flow-wire-num { align-self: end; }
    .page-legal .flow-wire-text { align-self: start; }
}

/* The current passes once, when js/page-legal.js sees most of the figure on screen (.is-flowing): each wire
   draws, each node lights as the current arrives. Reduced motion / Motion Off: the finished diagram. */
.page-legal .flow-wire-line,
.page-legal .flow-wire-line::after {
    transition: scale 520ms var(--ease-out), opacity var(--dur-2);
}

.page-legal .flow > :nth-child(1) { --at: 0ms; }
.page-legal .flow > :nth-child(2) { --at: 150ms; }
.page-legal .flow > :nth-child(3) { --at: 620ms; }
.page-legal .flow > :nth-child(4) { --at: 770ms; }
.page-legal .flow > :nth-child(5) { --at: 1240ms; }
.page-legal .flow > :nth-child(6) { --at: 1390ms; }
.page-legal .flow > :nth-child(7) { --at: 1860ms; }

.page-legal .flow-wire-line { transition-delay: var(--at); }
.page-legal .flow-wire-line::after { transition-delay: calc(var(--at) + 380ms); }

@media screen and (prefers-reduced-motion: no-preference) {
    .js:not(.motion-off) .page-legal .flow:not(.is-flowing) .flow-wire-line {
        scale: 1 0;
    }

    .js:not(.motion-off) .page-legal .flow:not(.is-flowing) .flow-wire-line::after {
        opacity: 0;
    }

    @container (min-width: 38rem) {
        .js:not(.motion-off) .page-legal .flow:not(.is-flowing) .flow-wire-line {
            scale: 0 1;
        }
    }

    .js:not(.motion-off) .page-legal .flow.is-flowing .flow-icon {
        animation: legal-node 900ms var(--ease-out) var(--at) backwards;
    }
}

@keyframes legal-node {
    0% { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 0 rgba(52, 67, 224, 0); }
    30% { border-color: var(--ink-link); color: var(--ink-link); box-shadow: 0 0 0 5px rgba(52, 67, 224, .14); }
    100% { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 9px rgba(52, 67, 224, 0); }
}

/* Wide sheets: Fig. 1 leaves the text and takes a margin column beside it, sticky while you read.
   (The trailing 1fr row absorbs the figure's height so the paragraphs keep their own spacing.) */
@container (min-width: 70rem) {
    .page-legal .sheet-body:has(> .flow-figure) {
        display: grid;
        grid-template-columns: minmax(0, 64ch) minmax(17rem, 1fr);
        grid-template-rows: repeat(4, auto) 1fr;
        column-gap: clamp(2.5rem, 5cqi, 5rem);
        align-items: start;
    }

    .page-legal .sheet-body:has(> .flow-figure) > * {
        grid-column: 1;
    }

    .page-legal .sheet-body > .flow-figure {
        position: sticky;
        top: calc(var(--header-offset) + 1.5rem);
        grid-column: 2;
        grid-row: 1 / span 5;
        margin: 0;
    }

    .page-legal .sheet-body > .flow-figure + * {
        margin-top: 1.1em;
    }
}


/* ---------------------------------------------------------------------------------------- 8. Statement (MAGO) */

.page-legal .statement {
    /* reverse type: light-on-ink tokens for everything inside the card */
    --text: var(--paper);
    --plasma: #FBF8F2;
    --accent: var(--photon);
    --accent-rgb: 124, 214, 255;
    --accent-text: var(--photon);
    --on-accent: var(--substrate);
    --focus: var(--photon);
    --focus-halo: 0 0 0 6px rgba(14, 15, 18, .9);
    --line-strong: rgba(236, 231, 220, .3);
    --st-pad: clamp(1.25rem, 5.5cqi, 3.25rem);
    position: relative;
    container-type: inline-size;
    margin-bottom: clamp(1.75rem, min(5cqi, 3.75svh), 3rem);
    padding: calc(var(--st-pad) * 1.1) var(--st-pad) var(--st-pad);
    overflow: clip;
    color: var(--paper);
    color-scheme: dark;
    background:
        radial-gradient(90% 120% at 0% 0%, rgba(52, 67, 224, .34), transparent 62%),
        radial-gradient(60% 80% at 100% 100%, rgba(124, 214, 255, .1), transparent 70%),
        linear-gradient(160deg, #16181F, var(--ink) 70%);
    border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 22px 44px -26px rgba(14, 15, 18, .75);
}

/* a comb of pins along the top edge: the card is a chip, its statement etched in light */
.page-legal .statement::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--st-pad);
    right: var(--st-pad);
    height: .55rem;
    background: repeating-linear-gradient(90deg, rgba(236, 231, 220, .2) 0 2px, transparent 2px 14px);
    -webkit-mask: linear-gradient(90deg, #000 70%, transparent);
    mask: linear-gradient(90deg, #000 70%, transparent);
}

.page-legal .statement-kicker {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(236, 231, 220, .74);
}

.page-legal .statement-node {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--photon);
    box-shadow: 0 0 0 3px rgba(124, 214, 255, .16), 0 0 12px rgba(124, 214, 255, .8);
}

.page-legal .statement-text {
    max-width: none;
    margin-top: clamp(1rem, 3.5cqi, 1.75rem);
    font-family: var(--font-display);
    font-size: min(clamp(2.25rem, 1.1rem + 5vmin, 6.5rem), 12cqi);
    font-weight: 200;
    font-stretch: 100%;
    line-height: 1;
    letter-spacing: -.025em;
    text-wrap: balance;
    hyphens: manual;
    color: var(--plasma);
}

@container (max-width: 23.99rem) {
    .page-legal .statement-text { font-size: 13.5cqi; font-stretch: 80%; font-weight: 300; }
    .page-legal .statement-kicker { letter-spacing: .14em; }
}

@container (min-width: 30rem) {
    .page-legal .statement-text { font-stretch: 112%; }
}

/* wide cards: the size follows the card's width as well, so the statement never breaks into more than three
   full lines (the vmin term keeps it modest on short landscape screens, where it sets in two) */
@container (min-width: 38rem) {
    .page-legal .statement-text {
        font-size: min(clamp(2.25rem, .9rem + 4.6vmin, 6rem), 8.5cqi);
        font-stretch: 122%;
    }
}

.page-legal .statement-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem 1.25rem;
    margin-top: clamp(1.5rem, 5cqi, 2.75rem);
}

/* a trace runs out of the statement into the button */
.page-legal .statement-trace {
    position: relative;
    flex: 1 1 6rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 214, 255, 0), rgba(124, 214, 255, .55));
}

.page-legal .statement-trace::after {
    content: "";
    position: absolute;
    right: -3px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--photon);
    box-shadow: 0 0 10px rgba(124, 214, 255, .9);
}

.page-legal .statement-btn {
    --btn-bg: var(--photon);
    --btn-fg: var(--substrate);
    --btn-ring: transparent;
    --btn-current: #fff;
    font-weight: 600;
}

.page-legal .statement-btn:hover {
    --btn-bg: color-mix(in srgb, var(--photon) 84%, #fff);
}

.page-legal .statement-btn-arrow {
    transition: translate var(--dur-2) var(--ease-out);
}

.page-legal .statement-btn:hover .statement-btn-arrow,
.page-legal .statement-btn:focus-visible .statement-btn-arrow {
    translate: .2em 0;
}

/* when the card powers up, a packet runs the trace into the button */
@media screen and (prefers-reduced-motion: no-preference) {
    .js:not(.motion-off) .page-legal .statement.is-in .statement-trace::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 2.5rem;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, transparent, var(--plasma));
        opacity: 0;
        animation: legal-packet 1.4s var(--ease-io) 900ms;
    }
}

@keyframes legal-packet {
    0% { left: 0; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: calc(100% - 2.5rem); opacity: 0; }
}


/* ---------------------------------------------------------------------------------------- 9. Next link */

.page-legal .legal-next {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    margin-top: clamp(2.5rem, 2rem + 4vmin, 5.5rem);
}

/* Centred layouts (see section 1): the next document waits in the right column, mirroring the rail.
   The two blocks differ only in the desk width at which each page centres its sheet. */
@container (min-width: 84rem) {
    .page-legal .legal-grid--statement .legal-next {
        position: sticky;
        top: calc(var(--header-offset) + 1.5rem);
        justify-content: flex-start;
        margin-top: .2rem;
        padding-left: 1.1rem;
        border-left: 1px solid var(--line-strong);
    }

    .page-legal .legal-grid--statement .legal-next .next-link-name { font-size: var(--t-h3); }
}

@container (min-width: 114rem) {
    .page-legal .legal-grid--figure .legal-next {
        position: sticky;
        top: calc(var(--header-offset) + 1.5rem);
        justify-content: flex-start;
        margin-top: .2rem;
        padding-left: 1.1rem;
        border-left: 1px solid var(--line-strong);
    }

    .page-legal .legal-grid--figure .legal-next .next-link-name { font-size: var(--t-h3); }
}

/* The arrow's column is reserved at its hover length, so the arrow grows inside it and the name never rewraps:
   anchored at the arrowhead when the link sits flush right, at the name when it waits in the right column */
.page-legal .legal-next .next-link {
    grid-template-columns: minmax(0, auto) clamp(3.5rem, 9vw, 7.5rem);
    max-width: 100%;
}

.page-legal .legal-next .next-link-arrow {
    justify-self: end;
}

@container (min-width: 84rem) {
    .page-legal .legal-grid--statement .legal-next .next-link-arrow { justify-self: start; }
}

@container (min-width: 114rem) {
    .page-legal .legal-grid--figure .legal-next .next-link-arrow { justify-self: start; }
}

.page-legal .legal-next .next-link-name {
    min-width: 0;
    font-size: min(var(--t-h2), 9vw);
    overflow-wrap: anywhere;
    text-wrap: balance;
}


/* ---------------------------------------------------------------------------------------- 10. Modes */

@media (forced-colors: active) {
    /* the paper fibre is an image: drop it so text sits on plain Canvas */
    .page-legal .sheet {
        background: Canvas;
    }

    .page-legal .sheet,
    .page-legal .statement,
    .page-legal .flow-figure {
        border: 1px solid CanvasText;
    }

    .page-legal .doc-tab[aria-current="page"] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    .page-legal .flow-wire-line,
    .page-legal .flow-wire-line::after {
        border-color: CanvasText;
    }

    .page-legal .sheet::after,
    .page-legal .statement::before,
    .page-legal .statement-trace,
    .page-legal .doc-meter {
        display: none;
    }
}

/* Print: the sheet alone, black on white — letterhead, title, text, Fig. 1, the title block.
   (styles.css §15 already drops the chrome and effects; links print their full address.) */
@media print {
    .page-legal .legal {
        padding: 0;
    }

    .page-legal .legal::before,
    .page-legal .doc-rail,
    .page-legal .doc-tabs,
    .page-legal .footer-main,
    .page-legal .statement::before,
    .page-legal .statement-node,
    .page-legal .statement-trace {
        display: none !important;
    }

    .page-legal .legal-grid {
        display: block;
    }

    .page-legal .sheet {
        overflow: visible;
        border-radius: 0;
    }

    /* the letterhead carries the brand; the footer keeps only its © line, without a second rule */
    .page-legal .site-footer {
        border-top: 0;
    }

    .page-legal .sheet-ink,
    .page-legal .sheet-ink:has(.sheet-steps) {
        padding: 0;
    }

    .page-legal .sheet-letterhead {
        border-bottom-color: #000;
        box-shadow: none;
    }

    .page-legal .sheet-title {
        margin-top: 14pt;
        font-size: 26pt;
        font-stretch: 100%;
    }

    .page-legal .legal-grid--statement .sheet-title {
        font-size: 22pt;
    }

    .page-legal .sheet-body {
        margin-top: 14pt;
        font-size: 11pt;
        line-height: 1.55;
    }

    .page-legal .sheet-steps > li {
        padding-left: 2.2em;
    }

    .page-legal .sheet-steps > li::before {
        left: 0;
        right: auto;
        color: #000;
    }

    .page-legal .sheet-steps > li::after {
        display: none;
    }

    .page-legal .flow-figure,
    .page-legal .statement,
    .page-legal .title-block {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* paper is wide enough for the horizontal diagram with its caption underneath */
    .page-legal .flow-figure {
        display: block;
        margin-block: 14pt;
        padding: 12pt 14pt;
    }

    .page-legal .flow-caption {
        margin-top: 10pt;
        padding: 8pt 0 0;
        border-left: 0;
        border-top: 1px dashed #000;
        font-size: 11pt;
    }

    .page-legal .sheet-foot {
        margin-top: 18pt;
    }

    .page-legal .title-cell {
        padding: 5pt 8pt 6pt;
    }

    .page-legal .flow-figure {
        border-color: #000;
    }

    .page-legal .flow-icon {
        border-color: #000;
    }

    /* pseudo-elements escape the global print reset: the wires print complete, with no transition */
    .page-legal .flow-wire-line,
    .page-legal .flow-wire-line::after {
        border-color: #000 !important;
        opacity: 1;
        scale: none;
        transition: none;
    }

    .page-legal .statement {
        padding: 12pt 14pt;
        border: 2pt solid #000;
        border-radius: 0;
    }

    .page-legal .statement-text {
        font-size: 24pt;
        font-weight: 300;
    }

    .page-legal .title-block,
    .page-legal .title-cell {
        border-color: #000;
    }

    /* full addresses (styles.css prints the relative href); pseudo-elements escape the global
       black-ink reset, so the link node's glow is dropped here too */
    .page-legal main a[href$=".html"]::after {
        content: " (https://imperialdynamics.com/" attr(href) ")";
    }

    .page-legal main a::after {
        color: #000;
        box-shadow: none;
    }
}