/* ───────────────────────────────────────────────────────────── legal.css — public legal pages (/terms, /privacy, /cookies). GO-LEGAL-PAGES-001. TOKENS-ONLY: reuses the marketing surface's fonts, colors, and spacing (payoff-tokens.css / site.css). This is NOT a new design system — it only adds the long-form reading affordances the LAYOUT & DESIGN CONFORMANCE ruling requires: a constrained reading measure, an anchored jump list, section spacing, sticky-nav-aware anchor offset, and a 390px-clean layout with no horizontal scroll. The marketing header/footer chrome is the shared Cine2Nav + MktFooter, injected by js/site/legal.js. ───────────────────────────────────────────────────────────── */ .legal { /* The shared marketing nav is `position: fixed` (cine.css `.cine2-nav`), so NOTHING in normal flow reserves space for it. On the landing page the dark hero deliberately runs underneath; a legal document has no such hero, so the document's own top padding is the ONLY thing keeping the first line out from under the bar. The old `clamp(40px, 7vw, 84px)` collapsed to its 40px floor on phones (7vw = 27px at 390, 22px at 320) — 33px SHORT of the 73px bar, so the "LEGAL" eyebrow rendered underneath it and lost the hit-test at its own centre. Nav height is now an explicit term of the padding, so the clearance can never again be an accident of a viewport unit: every breakpoint clears the bar, then adds breathing room on top. */ --legal-nav-h: 73px; /* .cine2-nav: 72px inner (cine.css) + 0.5px border */ background: var(--payoff-bg); color: var(--payoff-text); padding: calc(var(--legal-nav-h) + clamp(24px, 4vw, 40px)) 0 clamp(56px, 8vw, 96px); } /* ── The nav, over a LIGHT document (contrast, not decoration) ────────── `.cine2-nav` is painted for the landing page's DARK cinematic hero: the links are `rgba(244,239,231,0.78)` and the wordmark `#F4EFE7`, and the ink treatment is gated behind `.is-stuck`, which only arrives after a SCROLL. A legal page is `--payoff-bg` (#FAF7F2) from its first pixel, so at page top that shipped as near-white-on-white — measured 1.06:1 for the links and 1.07:1 for the wordmark, i.e. an invisible header until the reader scrolled. `.legal-page` is set on in the three static documents, so this does not depend on any JS mount point. We adopt the SAME treatment `.is-stuck` uses (not a new one), which also means scrolling produces no visual jump. */ .legal-page .cine2-nav { background: rgba(250, 247, 242, 0.86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--payoff-border-2); } .legal-page .cine2-nav .po-nav__link { color: var(--payoff-text-2); } .legal-page .cine2-nav .po-nav__link:hover { color: var(--payoff-text); } .legal-page .cine2-nav .po-wordmark, .legal-page .cine2-nav .po-wordmark__dang, .legal-page .cine2-nav .po-wordmark__payoff { color: var(--payoff-text); } .legal-page .cine2-nav .po-wordmark__bang { color: var(--payoff-sage); } /* ── The passive account pill on phones (QA DEF-1) ────────────────────── Scoped to `.legal-page` and to THIS pill: the landing page's live account control is a different element with different labels and is not touched. MEASURED, not guessed (Chromium, /terms /privacy /cookies, 320px): "My Account" pill 113.86px · wordmark right edge 131.97px · pill left edge 116.44px → 15.53px of overlap, and elementFromPoint at the wordmark's right edge returned the PILL, not the wordmark. The nav's right cluster (pill + 12px gap + the compact "Start" CTA) is `flex-shrink: 0`, so every pixel the pill grows is taken from the wordmark, whose box shrinks (`.po-logo { min-width: 0; flex-shrink: 1 }`) while its TEXT does not — so the wordmark overruns its own box and the pill lands on top of it. The pill therefore has a width BUDGET on a phone, and the fix is to fit it, not to move anything. Budget at 320px (12+12 gutters, "Start" 65.70, two 12px gaps, wordmark 119.97): the pill's right edge is pinned at 230.30, so it may occupy at most 98.33px before its box reaches the wordmark's, and at most 86.33px for the wordmark to keep its FULL box plus the flex gap (i.e. to stop being shrunk at all). Two changes, both static, land it at a MEASURED 81.95px — inside the stricter of the two budgets: 1. the label drops its "My " prefix (legal.js renders it as its own span for exactly this purpose) — the ONLY thing this rule hides; 2. the horizontal padding tightens 16px → 12px, the same compact treatment the ≤360px rule in cine.css already applies to the nav gutters. MEASURED result at 320px, identical on all three documents: pill 81.95 · wordmark right edge 131.97 · pill left edge 148.34 → 16.37px of CLEARANCE (the wordmark is no longer shrunk, with 4.39px of slack left in its box), and elementFromPoint returns the wordmark on all 119 of the wordmark's own pixels — not merely at its right edge. That is 2.32px tighter than the identity-aware "Sign in" control this replaced, measured in the SAME run on the landing page at 79.64px / 18.69px of clearance — comparable, not better; the claim is zero overlap with real room, not a record. At 390px the clearance is 66.37px. Desktop is unaffected and keeps the full "My Account" (113.88px — 0.02px wider than before, from the added span, which changes nothing). The breakpoint is 600px because that is where THIS nav already becomes its phone self (cine.css swaps the full CTA for the compact "Start" at `max-width: 600px`) — the pill now changes with the rest of the bar instead of at a second, invented threshold. */ @media (max-width: 600px) { .legal-page .cine2-nav .legal-acct .legal-acct__wide { display: none; } .legal-page .cine2-nav .legal-acct { padding-left: 12px; padding-right: 12px; } } /* Constrained reading measure — targeting 65–75 characters (brief: LAYOUT & DESIGN CONFORMANCE). This is deliberately expressed in px, NOT `ch`: `ch` is the advance of "0", which in this system stack is 10.71px at the container's 17px while the body copy's AVERAGE glyph advance is 7.54px at its 16px. The old `68ch` therefore resolved to 728px and rendered ~97 characters per line — the `ch` unit over-counted by ~1.42x. 524px is MEASURED, not guessed. ── THE MEASUREMENT, CORRECTED (QA DEF-2, 2026-07-28) ──────────────────── The numbers this comment used to carry were wrong in both directions, and the sentence "the whole distribution sits inside the 65–75 band" was never true of any distribution — it cannot be, because the LAST line of every paragraph is a ragged remainder of whatever is left over. The layout below is CORRECT and is unchanged; only this claim about it is being fixed. Re-driven in Chromium at 1280px (container resolves to 524px, body copy 16px), counting characters off REAL line boxes — one Range per character, grouped by line-box top, fragments of the same line box merged, across every leaf

and

in `.legal__doc`: /terms /privacy /cookies prose line boxes 181 136 43 mean, all lines 58.23 55.68 52.26 mean, full lines 68.41 68.12 69.37 (>= 50 chars) longest line 77 77 74 lines over 75 3 2 0 (76, 76, 77 · 77, 77) lines over 80 0 0 0 So: the cap holds to within 2 characters — the longest line anywhere in the three documents is 77, and 5 line boxes out of 360 exceed 75 (1.4%). The old "72–75 longest-line" understated the tail, the old "65.5–67.6 mean" was in fact the FULL-line mean (68.1–69.4 as measured here) rather than the mean of all lines, and the old line counts were /cookies' 43 alone — the smallest of the three documents — reported as if they covered all three. Phones are narrower than this cap and are unaffected by it. */ .legal__doc { max-width: 524px; margin: 0 auto; } .legal__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--payoff-text-3); margin: 0 0 14px; } .legal__title { font-family: var(--payoff-font-display); font-weight: 600; font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.01em; color: var(--payoff-text); margin: 0 0 12px; } .legal__meta { font-size: 14.5px; color: var(--payoff-text-2); margin: 0 0 2px; line-height: 1.5; } .legal__updated { font-size: 13.5px; color: var(--payoff-text-3); margin: 0 0 30px; } /* Jump list. */ .legal__toc { border: 0.5px solid var(--payoff-border); border-radius: 14px; background: var(--payoff-card); padding: 20px 22px; margin: 0 0 40px; } .legal__toc-title { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--payoff-text-3); margin: 0 0 12px; } .legal__toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; } .legal__toc li { margin: 0 0 9px; break-inside: avoid; } .legal__toc a { font-size: 14px; color: var(--payoff-text-2); text-decoration: none; line-height: 1.4; overflow-wrap: break-word; } .legal__toc a:hover { color: var(--payoff-sage); text-decoration: underline; } /* Body content. */ .legal__intro { font-size: 17px; line-height: 1.62; color: var(--payoff-text-2); margin: 0 0 4px; overflow-wrap: break-word; } .legal__doc h2 { font-family: var(--payoff-font-display); font-weight: 600; font-size: clamp(19px, 2.6vw, 23px); line-height: 1.28; color: var(--payoff-text); margin: 42px 0 12px; scroll-margin-top: calc(var(--legal-nav-h) + 18px); /* clears the fixed nav */ } .legal__doc h3 { font-family: var(--payoff-font-sans); font-weight: 600; font-size: 16.5px; color: var(--payoff-text); margin: 26px 0 8px; scroll-margin-top: calc(var(--legal-nav-h) + 18px); } .legal__doc p { font-size: 16px; line-height: 1.66; color: var(--payoff-text); margin: 0 0 16px; overflow-wrap: break-word; } .legal__doc ul { margin: 0 0 16px; padding-left: 22px; } .legal__doc li { font-size: 16px; line-height: 1.6; color: var(--payoff-text); margin: 0 0 8px; overflow-wrap: break-word; } .legal__doc strong { font-weight: 650; color: var(--payoff-text); } .legal__doc a { color: var(--payoff-sage); overflow-wrap: break-word; } /* Body links (the published contact addresses are now real `mailto:` links) are underlined, not colour-only: site.css sets `text-decoration: none` globally, and sage-on-linen alone is a colour-only affordance. Scoped to `p` so the jump list above keeps its own underline-on-hover treatment. */ .legal__doc p a { text-decoration: underline; text-underline-offset: 2px; } .legal__contact { font-size: 15.5px; line-height: 1.7; color: var(--payoff-text); overflow-wrap: break-word; } /* Small screens: single-column jump list, no horizontal overflow. */ @media (max-width: 460px) { .legal__toc ol { columns: 1; } }