/* Legal pages (/privacy, /terms) and the /404 shell. Consumes tokens.css. Same shell padding as the
   FAQ page. The reading column is 34em full-width on a phone and re-caps to the site's --measure (640px)
   centred from 768px up, so a long document reads as a deliberate centred block rather than a narrow
   column stranded on the left of a wide page. /privacy and /terms carry the ratified Privacy Policy and
   Terms of Use: a title, a "Last updated" line that is the app's consent version, section headings,
   prose, and one table on /privacy. The /404 body keeps the short shell. See SPEC-legal-pages.md. */
.legal{background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;padding:84px var(--margin) 40px}
.legal__title{margin:0;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;font-size:35px;color:var(--ink)}
/* The "Last updated" line, directly under the title. 15px is the footer's live size; ink2 is the
   prose-link grey. Sits above .legal__body so the body's first-paragraph lede rule is unaffected. */
.legal__updated{margin:8px 0 0;font-family:var(--sans);font-size:15px;color:var(--ink2)}
.legal__body{max-width:34em;margin-top:24px}
.legal__body p{margin:0 0 16px;font-size:var(--fs-body);line-height:1.5;text-wrap:pretty}
.legal__body p:first-child{font-size:var(--fs-lede);color:var(--ink)}
.legal__body p:last-child{margin-bottom:0}
/* Section headings. The site's heading face (--cond, Barlow Semi Condensed 700), not uppercased: at
   ~20 sections per page uppercase would shout. NEW VALUES: font-size 22, the 36/12 margins, line-height
   1.15. The first heading loses its top margin so it sits under the "Last updated" line, not below it. */
.legal__body h2{margin:36px 0 12px;font-family:var(--cond);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.legal__body h2:first-child{margin-top:0}
/* The one table (/privacy "Who we share it with"). Stacked at EVERY width, not only on a phone: the
   reading column is capped at 34em, so a two-column table of sentence-length cells buys little and
   risks overflow. Each row reads as the vendor name (carried by its own <strong>) over what it
   receives; the header row stays in the markup for meaning but is visually hidden. NEW VALUES: the
   14px row padding and the 4px name-to-description gap. */
.legal__table{width:100%;border-collapse:collapse;margin:4px 0 20px}
.legal__table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.legal__table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
.legal__table tr:last-child{border-bottom:0}
.legal__table td{display:block;padding:0;font-size:var(--fs-body);line-height:1.5;text-wrap:pretty}
.legal__table td:first-child{margin-bottom:4px}
/* The inline prose-link treatment (.legal__body a) now lives in base.css, shared with the FAQ answers
   (.faq-a a) as one rule rather than a per-page copy. Same declaration, moved home. See base.css. */
/* Tablet and up: the reading column becomes a centred block at the site's --measure (640px) rather than
   a column stranded on the left of a wide page. The title and the "Last updated" line centre with it so
   their left edges stay on the column. The phone keeps the full-width 34em column. Existing token, no
   new width value. */
@media(min-width:768px){
.legal__title,.legal__updated,.legal__body{max-width:var(--measure);margin-inline:auto}
}
@media(min-width:1088px){
.legal{padding:calc(var(--nav) + 48px) var(--margin) 64px}
.legal__title{font-size:56px}
.legal__body{margin-top:28px}
.legal__body p{font-size:var(--fs-body-d);line-height:1.55}
.legal__body p:first-child{font-size:var(--fs-lede-d)}
.legal__body h2{font-size:26px;margin:52px 0 16px}
.legal__table td{font-size:var(--fs-body-d);line-height:1.55}
}

/* App-sheet mode (?app=1). The in-app Safari sheet carries its own close/share/reload chrome, so the
   site nav (the hamburger on phones, the fixed bar on desktop) and the footer are redundant. The .app
   class is set on <html> before first paint by an inline <head> script (build.mjs APP_MODE_INIT), so
   nothing here ever flashes. Only /privacy, /terms and /faqs emit that script; / and /404 never gain
   .app, so this rule is inert there even though /404 also loads legal.css. See SPEC-app-sheet-view.md. */
.app .bar,.app .burger,.app .panel,.app .site-footer{display:none}
/* Nav gone: the title no longer needs the 84px band that cleared the hamburger. It takes the page inset
   (--margin) as its own top space, symmetric with the left/right inset. Existing token, no new value. */
.app .legal{padding-top:var(--margin)}