/* concussion channel */
.btn.ghost{background:#fff;color:var(--spruce);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--sage)}
.cc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.chip-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px;text-decoration:none;transition:border-color .12s,transform .12s}
.chip-card:hover{border-color:var(--sage);transform:translateY(-2px)}
.cc-h{font-family:var(--serif);font-size:20px;color:var(--spruce);font-weight:600}
.cc-l{font-size:15.5px;color:var(--ink);margin-top:6px}
.cc-t{font-size:12.5px;color:var(--ink50);margin-top:10px;letter-spacing:.02em}
.trust3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.trust3 div{padding:26px 24px;border-left:1px solid var(--line)}
.trust3 div:first-child{border-left:0}
.trust3 .tn{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--amber)}
.trust3 .tl{font-size:13.5px;color:var(--ink70);margin-top:6px;line-height:1.45}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:15px;color:var(--ink70);line-height:1.55}
.alt{background:var(--mist)}
.pts{max-width:70ch;margin-top:18px;list-style:none}
.pts li{position:relative;padding:12px 0 12px 26px;border-top:1px solid var(--line);font-size:16px;color:var(--ink70)}
.pts li:before{content:"";position:absolute;left:2px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--sage)}
.cite{color:var(--ink50);font-size:13px}
.disc{font-size:12.5px;color:var(--ink50);line-height:1.55;max-width:80ch;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.checklist{display:grid;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:760px}
.check{display:flex;gap:16px;padding:20px 22px;border-top:1px solid var(--line);align-items:flex-start}
.check:first-child{border-top:0}
.cnum{flex:none;width:30px;height:30px;border-radius:50%;background:var(--mist);color:var(--spruce);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.check .ch{font-weight:600;font-size:16.5px;color:var(--ink)}
.check .cd{font-size:14.5px;color:var(--ink50);margin-top:3px}
@media(max-width:900px){.cc-grid,.cards{grid-template-columns:1fr}.trust3{grid-template-columns:1fr}.trust3 div{border-left:0;border-top:1px solid var(--line)}.trust3 div:first-child{border-top:0}}

/* blog */
.art-meta{font-size:13.5px;color:var(--ink50);margin-top:18px}
.art-rev{color:var(--ink50)}
.art-body{font-size:17.5px;line-height:1.72;color:var(--ink)}
.art-body h2{font-family:var(--serif);font-size:24px;margin:34px 0 12px}
.art-body h3{font-size:19px;margin:26px 0 8px}
.art-body p{margin:0 0 18px;max-width:68ch}
.art-body ul,.art-body ol{margin:0 0 18px 22px}
.art-body li{margin-bottom:9px;color:var(--ink70)}
.art-body a{color:var(--spruce)}
.art-body .cite,.art-body em{color:var(--ink50);font-size:14.5px}
.art-body blockquote{border-left:3px solid var(--sage);margin:22px 0;padding:6px 0 6px 20px;font-family:var(--serif);font-size:20px;color:var(--ink)}
.postgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.post{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;text-decoration:none;transition:border-color .12s,transform .12s}
.post:hover{border-color:var(--sage);transform:translateY(-2px)}
.post-k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.post-h{font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.3}
.post-d{font-size:14.5px;color:var(--ink50);margin-top:8px;line-height:1.5}
@media(max-width:900px){.postgrid{grid-template-columns:1fr}}

/* research page */
.r-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;font-size:14.5px;color:var(--ink50)}
.r-meta b{color:var(--ink);font-weight:600}
.r-sec h2{font-family:var(--serif);font-size:28px;line-height:1.2;margin:0 0 12px}
.r-note{font-size:15px;color:var(--ink50);max-width:72ch;margin:0 0 24px}
.r-find{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0}
.r-find li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-size:16px;color:var(--ink70);line-height:1.55}
.r-find strong{display:block;font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:600;margin-bottom:6px;line-height:1.3}
.r-q{margin:0 0 34px}
.rtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rtable{width:100%;border-collapse:collapse;font-size:15.5px;min-width:440px;background:#fff;border:1px solid var(--line)}
.rtable caption{text-align:left;font-family:var(--serif);font-size:19px;color:var(--ink);padding:0 0 10px;line-height:1.35}
.rtable caption .rq{color:var(--amber);font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.06em;margin-right:6px}
.rtable caption .rkind{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink50);margin-top:4px}
.rtable th,.rtable td{padding:10px 14px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.rtable thead th{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink50);font-weight:700;border-top:0;background:var(--mist)}
.rtable tbody th{font-weight:400;color:var(--ink)}
.rtable td{white-space:nowrap;font-variant-numeric:tabular-nums}
.rtable td.rn{text-align:right;color:var(--ink70)}
.rtable thead th.rn{text-align:right}
.rpct{display:inline-block;width:3.2em;font-weight:700;color:var(--ink)}
.rbar{display:inline-block;vertical-align:middle;width:140px;height:8px;background:var(--mist);border-radius:4px;overflow:hidden}
.rbar i{display:block;height:100%;background:var(--sage);border-radius:4px}
.rtable tr.rlead .rbar i{background:var(--spruce)}
.r-qnote{font-size:14.5px;color:var(--ink70);margin-top:10px;max-width:72ch}
.r-verb{columns:2;column-gap:32px;margin:0 0 0 20px}
.r-verb li{margin-bottom:8px;color:var(--ink70);break-inside:avoid}
.r-dl{display:grid;grid-template-columns:210px 1fr;gap:10px 22px;margin:0}
.r-dl dt{font-weight:700;color:var(--ink)}
.r-dl dd{margin:0;color:var(--ink70)}
.r-cite{background:#fff;border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:0 12px 12px 0;padding:18px 22px;font-size:15.5px;color:var(--ink70);overflow-wrap:anywhere}
.rtable.rx{min-width:820px}
.rtable.rx thead th{white-space:normal;vertical-align:bottom;font-size:11.5px;letter-spacing:.04em}
.rtable.rx tbody th{min-width:13em}
.rtable.rx td.rn{color:var(--ink)}
.rtable tr.rall th,.rtable tr.rall td{font-weight:700;background:var(--mist)}
@media(max-width:900px){.r-find{grid-template-columns:1fr}.r-dl{grid-template-columns:1fr;gap:4px}.r-dl dd{margin-bottom:10px}.r-verb{columns:1}.rbar{width:70px}}

/* Legacy bridge: how the page bodies build_site.py still writes look inside the new system, until each page is ported to the
   new components. Load after site.css. core.page(..., legacy=True) wraps the body in div.lg-body and renames the class
   tokens that collide with site.css (hero, hero-grid, hero-sub, hero-ctas, lead, panel, cap, chips, chip, steps, step, n,
   band, band-sub, faq, crisis) to lg-<name>; btn becomes "btn btn--primary", btn-ghost and ghost become "btn btn--outline".
   Every selector starts with .lg-body, every value is a site.css token or a step of its scale (8 16 20 32 48 64 96), so
   nothing here can reach a ported page. No uppercase, no 1px card outlines, no shadows, radius 12. */

/* type: bare headings and paragraphs take the seven sizes, serif 400 at every heading size */
.lg-body h1{ font:400 var(--fs-display)/var(--lh-display) var(--serif); letter-spacing:-.012em; text-wrap:balance; max-width:710px; }
.lg-body h2{ font:400 var(--fs-h2)/var(--lh-h2) var(--serif); letter-spacing:-.01em; text-wrap:balance; max-width:710px; }
.lg-body h3{ font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.lg-body p{ color:var(--ink); }
.lg-body strong{ font-weight:600; }
.lg-body p a,.lg-body li a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent); transition:text-decoration-color var(--t-hover) var(--ease); }
.lg-body p a:hover,.lg-body li a:hover{ text-decoration-color:currentColor; }

/* section shells: the three paddings (64, 48 for .tight), 48 and 32 on phones; mist stays the one tint */
.lg-body section{ padding:64px 0; }
.lg-body section.tight{ padding:48px 0; }
.lg-body .mist{ background:var(--mist); }
.lg-body .light{ background:var(--paper); }          /* the dawn gradient is gone (flow rule 7) */
.lg-body .eyebrow{ margin-bottom:16px; font:600 var(--fs-small)/var(--lh-small) var(--sans); letter-spacing:0; text-transform:none; color:var(--amber-ink); }

/* the old hero: paper, H1 on L, the intro at body size, one pill row */
.lg-body .lg-hero{ padding:calc(var(--header) + 64px) 0 64px; }
.lg-body .lg-hero-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:center; }
.lg-body .lg-hero-grid > :first-child{ grid-column:1 / span 7; }
.lg-body .lg-hero-grid > :last-child:not(:first-child){ grid-column:8 / span 5; }
.lg-body .lg-lead{ margin-top:20px; max-width:660px; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.lg-body .lg-hero-sub{ margin-top:16px; max-width:660px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.lg-body .lg-hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-top:32px; }
.lg-body .lg-hero-ctas .btn--outline + .btn--outline,.lg-body .lg-hero-ctas .btn--primary + .btn--primary{ margin-left:0; }
.lg-body .lg-panel{ padding:0; background:none; border-radius:0; }
.lg-body .lg-panel img{ width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; border-radius:var(--radius); }
.lg-body .lg-cap{ margin-top:8px; font:400 var(--fs-small)/var(--lh-small) var(--sans); font-style:normal; text-align:left; color:var(--ink-70); }
.lg-body .imgblock img{ width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; border-radius:var(--radius); }

/* two-part layouts become the 5 + 7 split */
.lg-body .grid2{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); row-gap:32px; align-items:start; }
.lg-body .grid2 > :first-child{ grid-column:1 / span 5; }
.lg-body .grid2 > :nth-child(2){ grid-column:6 / span 7; }

/* cards are Box B, the quiet panel: one step from the ground, no border, no shadow */
.lg-body .cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:48px; }
.lg-body .card{ padding:32px 20px; background:var(--mist); border:0; border-radius:var(--radius); }
.lg-body .mist .card{ background:var(--paper); }
.lg-body .card .eyebrow{ margin-bottom:8px; }
.lg-body .card h3{ margin-bottom:8px; }
.lg-body .card p{ font-size:var(--fs-body); line-height:var(--lh-body); }
.lg-body .card .go{ display:inline-flex; align-items:center; min-height:44px; margin-top:16px; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); transition:text-decoration-color var(--t-hover) var(--ease); }
.lg-body .card .go:hover{ text-decoration-color:currentColor; }

/* lists */
.lg-body .bullets{ margin-top:20px; padding-left:20px; list-style:disc; }
.lg-body .bullets li{ position:static; padding:0; margin:0; color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); }
.lg-body .bullets li + li{ margin-top:8px; }
.lg-body .bullets li::before{ content:none; }
.lg-body .lg-steps{ display:block; margin-top:32px; }
.lg-body .lg-step{ position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:20px; padding:20px 0; border:0; }
.lg-body .lg-step::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule); }
.lg-body .lg-n{ font:400 var(--fs-row)/var(--lh-row) var(--serif); color:var(--ink); font-variant-numeric:tabular-nums; }
.lg-body .lg-step p{ margin-top:8px; }
.lg-body .lg-chips{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:20px; }
.lg-body .lg-chip{ padding:0; border:0; border-radius:0; background:none; font:400 var(--fs-body)/var(--lh-body) var(--sans); color:var(--ink-70); }
.lg-body .checklist{ display:block; max-width:none; background:none; border:0; border-radius:0; overflow:visible; }
.lg-body .check{ position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:20px; padding:20px 0; border:0; }
.lg-body .check::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule); }
.lg-body .cnum{ width:auto; height:auto; border-radius:0; background:none; display:block; font:400 var(--fs-row)/var(--lh-row) var(--serif); color:var(--ink); font-variant-numeric:tabular-nums; }
.lg-body .check .ch{ font:400 var(--fs-row)/var(--lh-row) var(--serif); color:var(--ink); }
.lg-body .check .cd{ margin-top:8px; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }

/* statements, facts and small print */
.lg-body .pull{ font:400 var(--fs-lead)/var(--lh-lead) var(--serif); max-width:780px; color:var(--ink); }
.lg-body .trust{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--gap); padding-top:16px; border:0; }
.lg-body .trust::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule); }
.lg-body .trust div{ padding:0; border:0; font:400 20px/28px var(--serif); color:var(--ink); }
.lg-body .dawn{ padding:64px 0; }
.lg-body .dawn-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; border:0; border-radius:0; overflow:visible; }
.lg-body .dawn-cell{ padding:32px 20px; border-radius:var(--radius); background:var(--mist); }
.lg-body .dawn-cell.b{ background:var(--mist); }
.lg-body .dawn-cell .lbl{ margin-bottom:8px; font:600 var(--fs-small)/var(--lh-small) var(--sans); letter-spacing:0; text-transform:none; color:var(--ink-70); }
.lg-body .dawn-cell.b .lbl{ color:var(--amber-ink); }
.lg-body .dawn-cell p{ font:400 var(--fs-row)/var(--lh-row) var(--serif); color:var(--ink); }
.lg-body .foot-note,.lg-body .cite{ margin-top:16px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.lg-body .disc{ position:relative; max-width:606px; margin-top:32px; padding-top:16px; border:0; font-size:var(--fs-legal); line-height:var(--lh-legal); color:var(--ink-70); }
.lg-body .disc::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule); }

/* forms: a quiet panel, sentence-case labels, 52px fields */
.lg-body .form{ max-width:560px; padding:32px 20px; background:var(--mist); border:0; border-radius:var(--radius); }
.lg-body .mist .form{ background:var(--paper); }
.lg-body .form label{ display:block; margin:20px 0 8px; font:600 var(--fs-small)/var(--lh-small) var(--sans); letter-spacing:0; text-transform:none; color:var(--ink); }
.lg-body .form label:first-child{ margin-top:0; }
.lg-body .form input,.lg-body .form select,.lg-body .form textarea{ width:100%; min-height:52px; padding:0 16px; border:2px solid var(--line); border-radius:var(--radius); background:var(--paper); font:400 var(--fs-body)/var(--lh-body) var(--sans); color:var(--ink); }
.lg-body .form textarea{ min-height:96px; padding:16px; }
.lg-body .form input:focus-visible,.lg-body .form select:focus-visible,.lg-body .form textarea:focus-visible{ outline:2px solid var(--spruce); outline-offset:3px; border-color:var(--spruce); }
.lg-body .form .btn{ width:100%; margin-top:20px; }
.lg-body .form .ok{ padding:32px 0; font:400 var(--fs-row)/var(--lh-row) var(--serif); color:var(--ink); text-align:left; }
.lg-body .consent{ display:flex; gap:16px; align-items:flex-start; margin-top:20px; font-size:16px; line-height:24px; color:var(--ink-70); }
.lg-body .consent input{ width:20px; height:20px; min-height:0; margin-top:2px; flex:none; accent-color:var(--spruce); }
.lg-body .radioset{ display:grid; gap:8px; margin-top:8px; }
.lg-body .radioset label{ display:flex; gap:16px; align-items:center; min-height:44px; margin:0; font:400 var(--fs-body)/var(--lh-body) var(--sans); color:var(--ink); }
.lg-body .radioset input{ width:20px; height:20px; min-height:0; accent-color:var(--spruce); }
.lg-body .scale-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px 0; border:0; border-bottom:2px solid var(--line); }
.lg-body .scale-row select{ width:96px; }

/* the screener */
.lg-body .quiz-shell{ max-width:660px; margin:0; }
.lg-body .qcard{ min-height:380px; padding:32px 20px; background:var(--mist); border:0; border-radius:var(--radius); }
.lg-body .qq{ margin-bottom:8px; font:400 var(--fs-lead)/var(--lh-lead) var(--serif); }
.lg-body .qhelp{ margin-bottom:20px; font-size:16px; line-height:24px; color:var(--ink-70); }
.lg-body .qopts{ display:grid; gap:8px; }
.lg-body .qopt{ display:flex; align-items:center; width:100%; min-height:56px; padding:8px 20px; border:2px solid var(--line); border-radius:var(--radius); background:var(--paper); font:600 var(--fs-body)/var(--lh-body) var(--sans); color:var(--ink); text-align:left; transition:border-color var(--t-hover) var(--ease); }
.lg-body .qopt:hover{ border-color:var(--spruce); }
.lg-body .qdots{ display:flex; gap:8px; margin:20px 0 32px; }
.lg-body .qdots i{ width:8px; height:8px; border-radius:50%; background:var(--track); }
.lg-body .qdots i.on{ background:var(--spruce); }
.lg-body .qback{ min-height:44px; margin-top:16px; font:600 var(--fs-small)/var(--lh-small) var(--sans); color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.lg-body .q988{ margin-bottom:20px; padding:20px; border-radius:var(--radius); background:var(--paper); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }

/* print boxes and the article library */
.lg-body .printbox{ margin-top:32px; padding:32px 20px; border:0; border-radius:var(--radius); background:var(--mist); }
.lg-body .printbox ul{ margin-left:20px; list-style:disc; }
.lg-body .printbox li{ margin-bottom:8px; color:var(--ink); font-size:var(--fs-body); }
.lg-body .art-meta{ margin-top:20px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.lg-body .art-rev{ color:var(--ink-70); }
.lg-body .art-body{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.lg-body .art-body h2{ margin:48px 0 16px; font:400 var(--fs-lead)/var(--lh-lead) var(--serif); }
.lg-body .art-body h3{ margin:32px 0 8px; font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.lg-body .art-body p{ margin:0 0 20px; max-width:660px; }
.lg-body .art-body ul,.lg-body .art-body ol{ margin:0 0 20px 20px; list-style:disc; }
.lg-body .art-body ol{ list-style:decimal; }
.lg-body .art-body li{ margin-bottom:8px; color:var(--ink); }
.lg-body .art-body blockquote{ margin:32px 0; padding:0 0 0 20px; border-left:2px solid var(--spruce); font:400 var(--fs-row)/var(--lh-row) var(--serif); color:var(--ink); }
.lg-body .art-body .cite,.lg-body .art-body em{ font-style:normal; font-size:var(--fs-small); color:var(--ink-70); }
.lg-body .postgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 20px; }
.lg-body .post{ display:block; padding:0; border:0; border-radius:0; background:none; text-decoration:none; color:var(--ink); transition:none; }
.lg-body .post:hover{ transform:none; }
.lg-body .post-k{ margin-bottom:8px; font:600 var(--fs-small)/var(--lh-small) var(--sans); letter-spacing:0; text-transform:none; color:var(--amber-ink); }
.lg-body .post-h{ font:400 var(--fs-row)/var(--lh-row) var(--serif); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:transparent; transition:text-decoration-color var(--t-hover) var(--ease); }
.lg-body .post:hover .post-h,.lg-body .post:focus-visible .post-h{ text-decoration-color:currentColor; }
.lg-body .post-d{ margin-top:8px; font-size:16px; line-height:24px; color:var(--ink-70); }

@media (max-width:1279px){
  .lg-body .postgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:899px){
  .lg-body .lg-hero{ padding:calc(var(--header) + 48px) 0 48px; }
  .lg-body .lg-hero-grid > :first-child,.lg-body .lg-hero-grid > :last-child:not(:first-child),
  .lg-body .grid2 > :first-child,.lg-body .grid2 > :nth-child(2){ grid-column:1 / -1; }
  .lg-body .lg-hero-grid{ row-gap:32px; }
  .lg-body .cards,.lg-body .dawn-grid{ grid-template-columns:minmax(0,1fr); }
  .lg-body .trust{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:16px; }
  .lg-body .postgrid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .lg-body section{ padding:48px 0; }
  .lg-body section.tight,.lg-body .dawn{ padding:32px 0; }
  .lg-body .lg-step{ grid-template-columns:minmax(0,1fr); row-gap:8px; }
  .lg-body .card .go{ min-height:44px; }
  .lg-body .lg-hero-ctas .btn{ width:100%; }
}


/* ================================================================ port additions to the legacy bridge (Phase 1, Oct 6 2026)
   core.LEGACY_CSS writes, in this order: the old page families' own styles (concussion, blog, the survey page, with the
   legacy renames applied), the prototype's legacy.css byte for byte, then this file. Everything here is scoped under
   .lg-body or to print, uses only site.css tokens and the spacing scale, and exists because a live page body needed it in
   the new chrome (tests/PHASE1-REPORT.md, "Legacy bodies", says which page and why). */

/* the three old token names the old bodies still carry (inline styles, the concussion, blog and survey styles, quiz.js),
   mapped onto site.css tokens: --ink50 measured 3.5:1 on paper and now reads at --ink-70 (5.6:1) */
.lg-body{ --ink70:var(--ink-70); --ink50:var(--ink-70); --amber:var(--amber-ink); }

/* a body that opens with a plain section instead of the old hero (/quiz, /doctor-letter, /privacy, /policies, /404): its
   first section clears the fixed header the way the old hero does in legacy.css */
.lg-body > section:first-of-type:not(.lg-hero){ padding-top:calc(var(--header) + 48px); }
@media (max-width:560px){
  .lg-body > section:first-of-type:not(.lg-hero){ padding-top:calc(var(--header) + 32px); }
}

/* the design system's own components inside an old body keep their own type: the closing band (cta_band) heads at the
   display size, not the bare-heading H2 of legacy.css; the FAQ list (faq_block) sits under its old heading, so it does
   not take the split layout's pull-up */
.lg-body .h-display{ font:400 var(--fs-display)/var(--lh-display) var(--serif); letter-spacing:-.012em; text-wrap:balance; }
.lg-body .closing .h-display{ max-width:900px; }
@media (max-width:374px){
  .lg-body .closing .h-display{ font-size:var(--fs-h2); line-height:var(--lh-h2); }
}
.lg-body .faq-list{ margin-top:8px; }
/* a closing band after a mist section starts its wash from mist (the ramp of site.css section 42, its first stop mist) */
.lg-body .mist + .closing.on-dark{
  background:linear-gradient(to bottom, #EEF2EB 0, #DDE8DE calc(var(--wash) * .1667), #B3CBBB calc(var(--wash) * .3333), #86A897 calc(var(--wash) * .5), #5C8572 calc(var(--wash) * .6667), #36614F calc(var(--wash) * .8333), #1A3A2F var(--wash),
    #1A3A2F calc(100% - var(--wash)), #36614F calc(100% - var(--wash) * .8333), #5C8572 calc(100% - var(--wash) * .6667), #86A897 calc(100% - var(--wash) * .5), #B3CBBB calc(100% - var(--wash) * .3333), #DDE8DE calc(100% - var(--wash) * .1667), #FCFBF7 100%);
}

/* the old status callouts (/cost, /schedule, /spravato): an amber rule on an amber tint, written inline. Amber is a label
   colour only (DESIGN-SYSTEM.md 1.2), so they read as the quiet panel, Box B */
.lg-body [style*="border-left:3px solid #b08d3f"]{ padding:20px !important; border-left:0 !important; border-radius:var(--radius); background:var(--mist) !important; }
.lg-body .mist [style*="border-left:3px solid #b08d3f"]{ background:var(--paper) !important; }
/* one inside a card (/cost, the commercial card's $10 cap) steps off the card's own ground, not the section's: paper on a
   mist card, mist on a paper card (a card on a mist section); mist on the mist card read as an unexplained 20px indent
   (the last fix round, Oct 7 2026) */
.lg-body .card [style*="border-left:3px solid #b08d3f"]{ background:var(--paper) !important; }
.lg-body :is(.mist,.alt) .card [style*="border-left:3px solid #b08d3f"]{ background:var(--mist) !important; }

/* the old CTA band written straight into a body (the concussion channel and its five paths, the checklist): no box, its
   headline, its line 20px under it, then the pills 32px under that, 16px apart */
.lg-body .lg-band:not(.av-band){ display:block; padding:0; border-radius:0; background:none; text-align:left; }
.lg-body .lg-band:not(.av-band) > h2{ margin:0; }
.lg-body .lg-band:not(.av-band) > p{ max-width:660px; margin:20px 0 0; }
.lg-body .lg-band:not(.av-band) > .btn{ margin:32px 16px 0 0; }
.lg-body .lg-band > .btn + .btn{ margin-left:0 !important; }
.lg-body .lg-band:not(.av-band) > .foot-note{ margin-top:16px; }
@media (max-width:560px){
  .lg-body .lg-band:not(.av-band) > .btn{ margin-right:0; }
  .lg-body .lg-band:not(.av-band) > .btn + .btn{ margin-top:16px; }
}

/* the concussion channel's three numbers (trust3): the ruled facts line (C21), no box, no outlines, the number in ink */
.lg-body .trust3{ background:none; border:0; border-top:2px solid var(--rule); border-radius:0; overflow:visible; }
.lg-body .trust3 > div{ padding:20px 24px 0 0; border-left:0; }
.lg-body .trust3 > div + div{ padding-left:24px; border-left:1px solid var(--line); }
.lg-body .trust3 > div > div{ padding:0; border:0; }
.lg-body .trust3 .tn{ font:400 var(--fs-row)/var(--lh-row) var(--serif); color:var(--ink); }
.lg-body .trust3 .tl{ margin-top:8px; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
@media (max-width:900px){
  .lg-body .trust3 > div,.lg-body .trust3 > div + div{ padding:16px 0 0; border-left:0; border-top:0; }
  .lg-body .trust3 > div + div{ margin-top:16px; border-top:1px solid var(--line); }
}

/* the concussion channel's five paths (chip-card): Box B, the quiet panel, the title at the row size underlining on hover */
.lg-body .cc-grid{ gap:20px; margin-top:48px; }
.lg-body .chip-card{ padding:32px 20px; background:var(--mist); border:0; border-radius:var(--radius); color:var(--ink); transition:none; }
.lg-body .mist .chip-card,.lg-body .alt .chip-card{ background:var(--paper); }
.lg-body .chip-card:hover{ transform:none; }
.lg-body .cc-h{ font:400 var(--fs-row)/var(--lh-row) var(--serif); color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:transparent; transition:text-decoration-color var(--t-hover) var(--ease); }
.lg-body .chip-card:hover .cc-h,.lg-body .chip-card:focus-visible .cc-h{ text-decoration-color:currentColor; }
.lg-body .cc-l{ margin-top:8px; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.lg-body .cc-t{ margin-top:8px; font-size:var(--fs-small); line-height:var(--lh-small); letter-spacing:0; color:var(--ink-70); }
/* cards on the concussion channel's mist sections (.alt) are paper, as legacy.css does for .mist */
.lg-body .alt .card{ background:var(--paper); }
/* its point list (pts): the plain disc list of legacy.css .bullets */
.lg-body .pts{ max-width:660px; margin-top:20px; padding-left:20px; list-style:disc; }
.lg-body .pts li{ position:static; padding:0; border:0; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.lg-body .pts li + li{ margin-top:8px; }
.lg-body .pts li::before{ content:none; }

/* an old H1 with its own inline size (/privacy, /policies, /check-in, /doctor-letter: clamp(28px, 3.6vw, 40px)) keeps the
   size but not the display line height, which was drawn for 60px and 38px: 66px of leading under a 40px line read as two
   loose lines beside every other page's headline. It takes the display scale's own ratio, 66/60 and 42/38, instead (the
   screener's heading, next, sets the display size itself; the fix round, Oct 7 2026) */
.lg-body h1[style*="font-size"]{ line-height:1.1; }

/* the screener opens on the page's left edge like every other page (flow rule 1): its centred eyebrow, heading and back
   button, and the heading's own clamp size, give way to the system's */
.lg-body .quiz-shell > [style*="text-align:center"]{ text-align:left !important; }
.lg-body .quiz-shell > h1{ margin-bottom:32px; font-size:var(--fs-display) !important; line-height:var(--lh-display); }

/* the check-in's scale rows: the label and its small help line */
.lg-body .scale-row .sl{ font-size:16px; line-height:24px; }
.lg-body .scale-row .sl small{ display:block; margin-top:4px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }

/* print (the doctor letter, /after-your-visit): the page without the chrome, as the old style sheet printed it */
@media print{
  .site-header,.mega-scrim,.site-footer,.drawer,.drawer-scrim,.action-bar,.skip-link,.no-print{ display:none !important; }
  body{ background:#fff; }
  .lg-body section,.lg-body > section:first-of-type:not(.lg-hero),.lg-body .lg-hero{ padding:10px 0; }
}

/* a body narrowed with an inline max-width (the articles, the referral pages, the doctor letter, /privacy, /policies,
   /founding-program, /check-in, the survey page) keeps its reading measure but starts at the page's left edge, the
   logo's and the old hero's (flow rule 1: one container, one left edge), instead of floating in the middle of the
   window. The right margin is the same gutter: where the window is wider than the measure the block is over-constrained
   and the measure wins (the right margin gives way, as auto did), and on a phone the column stops 16px short of the
   right edge instead of running to it (pilot note 72; the fix round, Oct 7 2026) */
.lg-body .wrap[style*="max-width"]{ margin-left:var(--L); margin-right:var(--L); padding-inline:0; }

/* the doctor letter's print box: its two headings keep their distance from the block above */
.lg-body .printbox h3{ margin:32px 0 8px; }
.lg-body .printbox h3:first-child{ margin-top:0; }

/* /after-your-visit, When to call and the photograph card: Box B, no 1px outline (DESIGN-SYSTEM.md 2, rule 6) */
.lg-body .av-call,.lg-body .av-ready .imgcard{ border:0; border-radius:var(--radius); background:var(--mist); }
.lg-body .av-call{ padding:32px 20px; }
.lg-body .mist .av-call,.lg-body .mist .av-ready .imgcard{ background:var(--paper); }

/* two pills written side by side in an old body: on phones each is full width (site.css 6), so the inline 8px left
   margin that separated them pushed the second one past the edge; they stack 16px apart instead (a flex row such as
   .lg-hero-ctas keeps its own gap) */
@media (max-width:560px){
  .lg-body .btn[style*="margin-left"]{ margin-left:0 !important; }
  .lg-body div:not(.lg-hero-ctas) > .btn + .btn{ margin-top:16px; }
}

/* the survey page's tables keep their own CSS (SURVEY_CSS; DESIGN-SYSTEM.md 7.2: ported with their page), but site.css's
   label-chart table shares the class name .rtable, so its 600 caption (a weight the serif is not loaded in) and its 2px
   row rules land on them too: both are taken back here. Where a table is wider than the column (a phone, or the group
   breakdowns under 852px), it scrolls inside its own box, .rtable-wrap, and the caption, which sits inside the table,
   wraps at the box's width and holds still while the rows scroll under it, so the question is never cut off (pilot
   note 72; the fix round, Oct 7 2026) */
.lg-body .r-q .rtable caption{ font-weight:400; }
.lg-body .r-q .rtable th,.lg-body .r-q .rtable td{ border-bottom:0; }
.lg-body .r-q .rtable-wrap{ container-type:inline-size; }
.lg-body .r-q .rtable caption{ position:sticky; left:0; max-width:100cqi; }
/* its citation link is one unbroken address: it breaks where it must instead of running into the right gutter at 360 */
.lg-body .r-sec .r-note a{ overflow-wrap:anywhere; }

/* the forms (/veterans, /founding-program, /workers-comp-ptsd, /check-in and the screener's callback form): no boxed panel
   (pilot notes 66 and 77; the last fix round, Oct 7 2026). legacy.css draws the form as Box B, a paper card on the mist
   and a mist card on paper; here it sits straight on its section's ground as the Spravato page's form does (spravato.css
   .sp-form): hairline fields (1px --line, the token for field borders, DESIGN-SYSTEM.md 1.2) one step from the ground,
   paper on mist (the lead forms, the screener's card) and mist on paper (/check-in), 52px tall at the body size (17px on
   phones, never under 16), the spruce pill at its own width (full width on phones, site.css 6), and a consent row 44px
   tall at 16/24 (lead_form() writes its label with an inline all:unset and 14px, hence the !important). The check-in's
   boxed scale list loses its box too: its rows are the ruled rows legacy.css already draws. */
.lg-body .form,.lg-body .mist .form{ padding:0; background:none; border-radius:0; }
.lg-body .qcard .form{ padding:0 !important; }
.lg-body .form :is(input:not([type=checkbox],[type=radio]),select,textarea){ border-width:1px; background:var(--mist); }
.lg-body :is(.mist,.alt,.qcard) .form :is(input:not([type=checkbox],[type=radio]),select,textarea){ background:var(--paper); }
.lg-body .form .btn{ margin-top:32px; }
@media (min-width:561px){
  .lg-body .form .btn{ width:auto; }
}
.lg-body .form .consent{ align-items:center; min-height:44px; }
.lg-body .form .consent input{ margin:0; }
.lg-body .form .consent label{ display:block !important; margin:0 !important; padding:10px 0 !important; font:400 16px/24px var(--sans) !important; color:var(--ink-70) !important; cursor:pointer !important; }
.lg-body .form [style*="border:1.5px solid var(--line)"]{ padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; }

/* the articles (the last fix round, Oct 7 2026)
   - legacy.css sets every em in an article as a small grey citation (".art-body .cite, .art-body em"), so real emphasis
     mid-sentence ("why", "risk factor") shrank to 14px grey and read as a glitch. An em is emphasis again: italic, the
     sentence's own size and colour (the journal names the articles set in em read as citation style italics); a
     .cite keeps the small grey source style
   - the column: paragraphs keep the 660 measure, and lists, quotations and headings now end on the same right edge
     (they ran to the 760 column, a ragged edge between blocks)
   - the byline sat 112px above the first paragraph (the old hero's 64px foot plus the next section's 48px head); the
     hero gives up its foot, so the body starts 48px under the byline (32px on phones), the section rhythm */
.lg-body .art-body em{ font-style:italic; font-size:inherit; color:inherit; }
.lg-body .art-body ul,.lg-body .art-body ol{ max-width:640px; }
.lg-body .art-body blockquote,.lg-body .art-body h2,.lg-body .art-body h3{ max-width:660px; }
.lg-body article > .lg-hero{ padding-bottom:0; }

/* the survey page's answer tables on phones (the last fix round, Oct 7 2026): the 440px table scrolled inside a 358px box
   at 390 with its Count column wholly out of view and nothing to say the box scrolls. Under 561px the answer tables fit
   the column (no minimum width, a 48px share bar, 8px cell sides), so Answer, Share and Count all show; the group
   breakdowns stay scrollers (a cut column at the edge says there is more) */
@media (max-width:560px){
  .lg-body .r-q .rtable:not(.rx){ min-width:0; }
  .lg-body .r-q .rtable:not(.rx) :is(th,td){ padding-left:8px; padding-right:8px; }
  .lg-body .r-q .rtable:not(.rx) .rbar{ width:48px; }
}

/* the survey page's group breakdowns on narrow windows (the readiness round, Oct 7 2026): the 820px table scrolls in its
   box (under 852px). At 390 the box showed Group and Respondents only, and the column it cut showed as clipped letters
   at the right edge ("HEA", "SPR" over the first table, a lone "II" over the second) that read as a broken header, with
   nothing else to say the table goes on. Two changes:
   - on phones the group column is 8.5em (it held 13em), so a whole percentage column shows beside it at rest (from 360
     to 430 wide) and the reader sees at once what the table holds; the labels wrap to more lines instead
   - where the browser can tie an animation to a cell's place in its scroller (as site.css draws its charts), a cell's
     text shows only while no more than its padding (10px on phones) is outside the box: it comes in over the last 10px
     of the cell's way in at the right edge and goes over the first 10px of its way out at the left, so outside the
     group column no width and no scroll position shows clipped letters ("HEA", "II") or a clipped number ("1%" for
     51%, "59" without its sign); a cut column is a blank strip of the table, which says the table goes on. The group
     column is left out: its labels are the rows' names, read from the left, and a clipped first letter leaves them
     readable where a blank column would not (on a tablet the column is 230px wide), so it scrolls as before. A cell wholly in view is drawn as before; no background, caption
     or column in full view changes. Elsewhere the box scrolls as before
   The launch fixes (Oct 7 2026) found the first of those two changes held for one table only: the 820px minimum (SURVEY_CSS)
   shares its spare width among the columns by the length of their headings, so the insurance table's first percentage
   column ("Insurance is a deciding or big factor") was 126px wide and ran 5px past the box at 390 (drawn at half ink by
   the fade) and wholly out of it at 375 and 360, where the first table's ran past too. On phones the group breakdowns
   now take no minimum width: every column is as narrow as its longest word, the headings wrap to more lines, and the
   group column holds its 8.5em as a minimum, so the first percentage column of both tables ends inside the box, whole
   and at full ink, from 360 to 560 wide (it ends at 307 and 314 of 328 at 360). Under 360 the group column gives up its
   minimum too (its labels wrap at their longest word), so the column still fits at 320 (286 of 288) */
@media (max-width:560px){
  .lg-body .r-q .rtable.rx{ min-width:0; }
  .lg-body .r-q .rtable.rx tbody th{ min-width:8.5em; width:8.5em; }
  .lg-body .r-q .rtable.rx :is(th,td){ padding-left:10px; padding-right:10px; }
}
@media (max-width:359px){
  .lg-body .r-q .rtable.rx tbody th{ min-width:0; }
}
@keyframes rx-in{ from{ color:transparent; } }
@keyframes rx-out{ to{ color:transparent; } }
@media (max-width:852px){
  @supports (animation-timeline: view()){
    .lg-body .r-q .rtable.rx :is(th,td):not(:first-child){
      animation:rx-in linear both,rx-out linear forwards;
      animation-timeline:view(inline),view(inline);
      animation-range:entry calc(100% - 10px) entry 100%,exit 0% exit 10px;
    }
  }
}