/* Brain Recovery Centers homepage prototype. One stylesheet for the page (the brain has its own,
   assets/brain/brain.css, loaded first; the block "Brain on the page" near the end sets that viewer
   onto this page's edges and type scale without editing it).
   Built to PLAN.md: one container, one left edge, seven type sizes, three section paddings,
   two box styles, three surfaces, a rounded sheet at every change of surface. */

/* ---------------------------------------------------------------- 0. fallback faces (round 1)
   Metric-matched stand-ins for the two web fonts while they load: the widths measured in the headless shell
   (Source Serif 4 is 95.4 percent of Georgia, Source Sans 3 93.6 percent of Arial), so a headline keeps its line
   count when the web font arrives (the phone pill and address jumped 42px at about 330ms when the H1 lost a line). */
@font-face{ font-family:"Source Serif Fallback"; src:local("Georgia"); size-adjust:95.4%; ascent-override:107%; descent-override:34%; line-gap-override:0%; }
@font-face{ font-family:"Source Sans Fallback"; src:local("Arial"); size-adjust:93.6%; ascent-override:109%; descent-override:43%; line-gap-override:0%; }

/* ---------------------------------------------------------------- 1. tokens */
:root{
  /* surfaces */
  --paper:#FCFBF7;
  --mist:#EEF2EB;
  --dark:#1A3A2F;
  --dark-glow:#2C5847;
  --dark-neutral:#151B19;

  /* ink */
  --ink:#1E2B25;
  --ink-70:rgba(30,43,37,.74);
  --on-dark:#FCFBF7;
  --on-dark-70:rgba(252,251,247,.78);

  /* brand */
  --spruce:#2C5847;
  --spruce-deep:#22453A;
  --sage:#8FA898;
  --amber-ink:#8F5F1F;

  /* lines */
  --rule:#1E2B25;
  --rule-on-dark:#FCFBF7;
  --line:#E4E7DE;
  --track:rgba(30,43,37,.16);

  /* data */
  --chart-accent:#2B8A66;
  --chart-muted:#8FA898;
  --chart-track:#EEF2EB;

  /* effects */
  --glow:0 -2px 16px 2px rgba(44,88,71,.38);
  --glow-dark:0 -2px 16px 2px rgba(252,251,247,.30);
  --scrim:rgba(12,15,14,.30);
  --tile-shade:linear-gradient(to top,rgba(12,15,14,.72) 0%,rgba(12,15,14,.56) 40%,rgba(12,15,14,.3) 62%,rgba(12,15,14,0) 84%);   /* stage 4: titles measure 4.5:1 or better on the palest plates */

  /* shape */
  --radius:12px;
  --pill:999px;

  /* type families */
  --serif:"Source Serif 4","Source Serif Fallback",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Source Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* type scale: seven sizes at 1280 and up, whole pixels, one line height each */
  --fs-display:60px; --lh-display:66px;
  --fs-h2:42px;      --lh-h2:50px;
  --fs-lead:32px;    --lh-lead:40px;
  --fs-row:24px;     --lh-row:32px;
  --fs-body:18px;    --lh-body:27px;
  --fs-small:14px;   --lh-small:20px;
  --fs-legal:12px;   --lh-legal:17px;

  /* spacing: the only distances on the page */
  --s8:8px; --s16:16px; --s20:20px; --s32:32px; --s48:48px; --s64:64px; --s96:96px;

  /* layout. --vw is the root's client width (site.js writes it in px; 100vw is the no-script value) */
  --vw:100vw;
  --vh:100svh;
  --container:1280px;
  --gutter:24px;
  --gap:20px;
  --L:max(var(--gutter), calc((var(--vw) - 1232px) / 2));
  --content:calc(var(--vw) - 2 * var(--L));
  --col:calc((var(--content) - 220px) / 12);
  --B:calc(var(--L) + 5 * var(--col) + 100px);   /* text start B: grid column 6 */
  --C:calc(var(--L) + 7 * var(--col) + 140px);   /* text start C: grid column 8 */
  --header:72px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-hover:250ms; --t-arrow:200ms; --t-open:300ms; --t-close:200ms; --t-reveal:400ms; --t-drawer:400ms;
}
@media (max-width:1279px){
  :root{ --fs-display:42px; --lh-display:50px; --fs-h2:32px; --lh-h2:40px; --fs-lead:24px; --lh-lead:32px; }
}
@media (max-width:899px){ :root{ --header:64px; } }
@media (max-width:560px){
  :root{
    --gutter:16px;
    --fs-display:38px; --lh-display:42px;
    --fs-h2:30px;      --lh-h2:36px;
    --fs-lead:22px;    --lh-lead:29px;
    --fs-row:17px;     --lh-row:26px;
    --fs-body:17px;    --lh-body:26px;
  }
}

/* ---------------------------------------------------------------- 2. base */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:100%; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header) + 16px); }
html.is-locked{ overflow:hidden; }
body{
  margin:0; min-width:320px;
  background:var(--paper); color:var(--ink);
  font:400 var(--fs-body)/var(--lh-body) var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,picture,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--spruce); outline-offset:3px; }
.on-dark :focus-visible{ outline-color:var(--paper); }
[hidden]{ display:none !important; }   /* the one important: the hidden attribute must win */

.skip-link{
  position:fixed; z-index:100; left:var(--L); top:12px;
  display:inline-flex; align-items:center; min-height:44px; padding:0 20px;
  border-radius:var(--pill); background:var(--ink); color:var(--paper);
  font-weight:600; text-decoration:none;
  transform:translateY(-200%);
}
.skip-link:focus{ transform:none; }
.nw{ white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------------------------------------------------------------- 3. container and grid */
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); }
.split-text{ grid-column:1 / span 5; }
.split-list,.split-media{ grid-column:6 / span 7; }
@media (min-width:900px){
  .is-sticky{ position:sticky; top:96px; align-self:start; }
}
@media (max-width:899px){
  .split-text,.split-list,.split-media{ grid-column:1 / -1; }
}

/* ---------------------------------------------------------------- 4. type */
.h-display{ font:400 var(--fs-display)/var(--lh-display) var(--serif); letter-spacing:-.012em; text-wrap:balance; }
.h2{ font:400 var(--fs-h2)/var(--lh-h2) var(--serif); letter-spacing:-.01em; text-wrap:balance; }
.lead{ font:400 var(--fs-lead)/var(--lh-lead) var(--serif); }
.t-row{ font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.t-body{ font-size:var(--fs-body); line-height:var(--lh-body); }
.t-small{ font-size:var(--fs-small); line-height:var(--lh-small); }
.t-legal{ font-size:var(--fs-legal); line-height:var(--lh-legal); }
.measure{ max-width:660px; }
.source{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.on-dark .source{ color:var(--on-dark-70); }
.source a{ text-decoration-color:color-mix(in srgb,currentColor 45%,transparent); text-underline-offset:3px; }

/* ---------------------------------------------------------------- 5. icons (sprite in the page) */
.icon{ width:24px; height:24px; flex:none; }
.icon path,.icon circle,.icon line,.icon polyline{ vector-effect:non-scaling-stroke; }
.arrow-circle{ width:36px; height:36px; flex:none; transition:transform var(--t-arrow) var(--ease); }
.link-arrow .arrow-circle,.link-plus .arrow-circle{ width:24px; height:24px; }

/* ---------------------------------------------------------------- 6. pills */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 32px;
  border:2px solid transparent; border-radius:var(--pill);
  font:600 var(--fs-body)/1 var(--sans); text-decoration:none; white-space:nowrap;
  cursor:pointer;
  transition:box-shadow var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.btn--primary{ background:var(--spruce); color:var(--paper); }
.btn--primary:hover{ box-shadow:var(--glow); }
.btn--primary:active{ background:var(--spruce-deep); }
/* on a dark surface the primary is a paper fill with ink text: the same pill, the fill follows the surface (pilot note 1) */
.on-dark .btn--primary{ background:var(--paper); color:var(--ink); }
.on-dark .btn--primary:hover{ box-shadow:var(--glow-dark); background:#F2F0E9; }
.on-dark .btn--primary:active{ background:#E8E6DE; }
.btn--outline{ border-color:var(--spruce); color:var(--spruce); background:transparent; }
.btn--outline:hover{ background:var(--spruce); color:var(--paper); }
.btn--sm{ min-height:44px; padding:0 20px; }
@media (max-width:560px){
  .btn:not(.btn--sm){ width:100%; }
}

/* ---------------------------------------------------------------- 7. text links */
.link-arrow,.link-plus{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  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);
}
.link-plus{ flex-direction:row; }
.link-arrow:hover,.link-plus:hover{ text-decoration-color:currentColor; }
.link-arrow:hover .arrow-circle,.link-arrow:focus-visible .arrow-circle{ transform:rotate(-45deg); }
.on-dark .link-arrow,.on-dark .link-plus{ color:var(--on-dark); }

/* the plus drawn from two 2px bars (every disclosure on the page) */
.plus{ position:relative; width:24px; height:24px; flex:none; }
.plus::before,.plus::after{
  content:""; position:absolute; left:3px; right:3px; top:11px; height:2px; border-radius:1px; background:currentColor;
  transition:transform var(--t-open) var(--ease);
}
.plus::after{ transform:rotate(90deg); }
[aria-expanded="true"] > .plus::after,details[open] > summary .plus::after{ transform:rotate(0deg); }

/* ---------------------------------------------------------------- 8. section shell and header rows */
.sheet{ position:relative; z-index:1; margin-top:-20px; border-radius:12px 12px 0 0; }
.section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:32px; margin-bottom:48px; }
.section-head .h2{ max-width:710px; }
.section-head > a{ flex:none; }
@media (max-width:899px){
  .section-head{ flex-direction:column; gap:32px; }
}

/* ---------------------------------------------------------------- 9. header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--header); background:var(--paper); border-bottom:1px solid var(--line);
  transition:transform 250ms var(--ease);
}
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header > .wrap{ height:100%; display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; min-height:44px; flex:none; border-radius:4px; }
.brand img{ width:175px; height:40px; }
.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap:14px; }
.main-nav li{ flex:none; }   /* an item never wraps onto two lines */
.nav-link{
  display:inline-flex; align-items:center; min-height:44px;
  font:600 var(--fs-body)/var(--lh-body) var(--sans); color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px;
  text-decoration-color:transparent;
  transition:text-decoration-color var(--t-hover) var(--ease);
}
.nav-link:hover,.nav-link[aria-expanded="true"]{ text-decoration-color:currentColor; }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.call-short{ display:none; }
.menu-toggle{
  position:relative; width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center;
}
.menu-toggle .bars{ position:relative; width:22px; height:14px; }
.menu-toggle .bars::before,.menu-toggle .bars::after,.menu-toggle .bars span{
  content:""; position:absolute; left:0; right:0; height:1.5px; background:var(--ink); border-radius:1px;
  transition:transform var(--t-open) var(--ease), opacity var(--t-open) var(--ease);
}
.menu-toggle .bars::before{ top:0; }
.menu-toggle .bars span{ top:6.25px; }
.menu-toggle .bars::after{ bottom:0; }
.menu-toggle[aria-expanded="true"] .bars::before{ transform:translateY(6.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after{ transform:translateY(-6.25px) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .bars span{ opacity:0; }
.menu-toggle:hover{ background:var(--mist); }
/* round 3 (pilot note 49): seven items (Treatment, Spravato, How it works, Cost and coverage, Locations, Learn, About)
   and both buttons at full size need 1,266px (17px items, 14px apart); from 1280 up they sit in one row, and under 1280
   the items go into the menu while the buttons keep their size */
@media (min-width:1280px){
  .main-nav{ display:block; }
  .menu-toggle{ display:none; }
}
@media (max-width:899px){
  .header-actions .btn--primary{ display:none; }
  .call-long{ display:none; }
  .call-short{ display:inline; }
}
@media (max-width:560px){
  .brand img{ width:140px; height:32px; }
  .site-header > .wrap{ gap:12px; }
}

/* ---------------------------------------------------------------- 10. mega panels (1280 and up) */
.mega{
  position:absolute; top:100%; left:0; right:0; z-index:2;
  padding:48px 0; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity 250ms var(--ease), transform 250ms var(--ease), visibility 0s linear 250ms;
}
.mega.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity 250ms var(--ease), transform 250ms var(--ease); }
/* without script the triggers open the panels as native popovers */
.mega[popover]{ position:fixed; inset:var(--header) 0 auto 0; margin:0; width:auto; height:auto; border:0; border-bottom:1px solid var(--line); opacity:1; visibility:visible; transform:none; overflow:visible; }
.mega[popover]::backdrop{ background:rgba(30,43,37,.32); }
.mega-col--a{ grid-column:1 / span 4; }
.mega-col--b{ grid-column:5 / span 4; }
.mega-col--wide{ grid-column:1 / span 6; }
.mega-col--narrow{ grid-column:7 / span 2; }
.mega-col--card{ grid-column:9 / span 4; }
.mega-label{ margin-bottom:16px; font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600; color:var(--ink-70); }
.mega-links li + li{ margin-top:0; }
.mega-link{
  display:inline-flex; align-items:center; gap:16px; min-height:44px; padding:8px 0;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,currentColor 0%,transparent);
  transition:text-decoration-color var(--t-hover) var(--ease);
}
.mega-link:hover{ text-decoration-color:currentColor; }
.tag-new{ color:var(--amber-ink); font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600; text-decoration:none; }
.mega-article{ display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:16px; align-items:center; padding:8px 0; text-decoration:none; }
.mega-article img{ width:96px; height:60px; border-radius:var(--radius); object-fit:cover; }
.mega-article-title{ display:block; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:transparent; transition:text-decoration-color var(--t-hover) var(--ease); }
.mega-article:hover .mega-article-title{ text-decoration-color:currentColor; }
.mega-article-time{ display:block; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.mega-articles li + li{ margin-top:8px; }
.mega-scrim{
  position:fixed; inset:var(--header) 0 0 0; z-index:49; background:rgba(30,43,37,.32);
  opacity:0; visibility:hidden; transition:opacity 250ms var(--ease), visibility 0s linear 250ms;
}
.mega-scrim.is-open{ opacity:1; visibility:visible; transition:opacity 250ms var(--ease); }

/* Box A, the photo card (condition tiles, mega cards, the drawer card) */
.photo-card{
  position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  color:var(--paper); text-decoration:none; background:#6E655A;
}
.photo-card > picture,.photo-card > img,.photo-card > picture > img{ position:absolute; inset:0; width:100%; height:100%; }
.photo-card img{ object-fit:cover; }
.photo-card::after{ content:""; position:absolute; inset:0; background:var(--tile-shade); pointer-events:none; }
.photo-card-title{
  position:absolute; z-index:1; left:20px; right:76px; bottom:20px;
  font:400 var(--fs-row)/var(--lh-row) var(--serif);
}
.photo-card > .arrow-circle{ position:absolute; z-index:1; right:20px; bottom:20px; }
.photo-card:hover > .arrow-circle,.photo-card:focus-visible > .arrow-circle{ transform:rotate(-45deg); }
.mega-card{ aspect-ratio:16 / 10; }

/* ---------------------------------------------------------------- 11. drawers */
.drawer{ color:var(--ink); }
.drawer--menu{
  position:fixed; inset:var(--header) 0 0 0; z-index:48;
  background:var(--paper); overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t-drawer) var(--ease), transform var(--t-drawer) var(--ease), visibility 0s linear var(--t-drawer);
}
.drawer--menu.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity var(--t-drawer) var(--ease), transform var(--t-drawer) var(--ease); }
.drawer--menu[popover]{ margin:0; width:auto; height:auto; border:0; padding:0; opacity:1; visibility:visible; transform:none; }
.drawer--menu[popover]:not(:popover-open){ display:none; }
.drawer-body{ flex:1 0 auto; width:100%; padding-top:16px; padding-bottom:32px; }
.drawer-rows > li{ position:relative; }
.drawer-rows > li::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rule); }
.drawer-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  min-height:56px; padding:8px 0;
  font:400 var(--fs-lead)/var(--lh-lead) var(--serif); text-align:left; text-decoration:none; color:var(--ink);
}
.drawer-row:hover .arrow-circle{ transform:rotate(-45deg); }
.drawer-row .arrow-circle{ width:24px; height:24px; }
.acc > summary{ list-style:none; cursor:pointer; }
.acc > summary::-webkit-details-marker{ display:none; }
.acc-panel{ padding:0 0 20px; }
.acc-group + .acc-group{ margin-top:20px; }
.acc-group .mega-label{ margin-bottom:8px; }
.acc-group a{ display:flex; align-items:center; gap:16px; min-height:44px; text-decoration:none; }
.acc-group a:hover{ text-decoration:underline; text-underline-offset:4px; }
.drawer-card{ margin-top:32px; aspect-ratio:16 / 10; max-width:560px; }
.drawer-foot{ position:sticky; bottom:0; padding:16px 0 calc(16px + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); }
.drawer-foot .btn{ width:100%; }

.drawer--side{
  position:fixed; top:0; right:0; bottom:0; z-index:61;
  width:min(480px,100%); background:var(--paper); overflow-y:auto; overscroll-behavior:contain;
  padding:32px 32px 48px;
  transform:translateX(100%); visibility:hidden;
  transition:transform var(--t-drawer) var(--ease), visibility 0s linear var(--t-drawer);
}
.drawer--side.is-open{ transform:none; visibility:visible; transition:transform var(--t-drawer) var(--ease); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:32px; }
.drawer-head h2{ font:400 var(--fs-lead)/var(--lh-lead) var(--serif); }
.drawer-close{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 2px var(--ink); transition:background-color var(--t-hover) var(--ease); }
.drawer-close:hover{ background:var(--mist); }
.drawer-close .x{ position:relative; width:16px; height:16px; }
.drawer-close .x::before,.drawer-close .x::after{ content:""; position:absolute; left:-1px; right:-1px; top:7.25px; height:1.5px; background:currentColor; transform:rotate(45deg); }
.drawer-close .x::after{ transform:rotate(-45deg); }
.drawer-scrim{
  position:fixed; inset:0; z-index:60; background:rgba(30,43,37,.6);
  opacity:0; visibility:hidden; transition:opacity var(--t-drawer) var(--ease), visibility 0s linear var(--t-drawer);
}
.drawer-scrim.is-open{ opacity:1; visibility:visible; transition:opacity var(--t-drawer) var(--ease); }
.side-rows > li{ position:relative; }
.side-rows > li::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rule); transition:opacity var(--t-arrow) var(--ease); }
.side-rows > li:hover::after{ opacity:.25; }
.side-row{ display:grid; grid-template-columns:minmax(0,1fr) 36px; align-items:center; gap:20px; padding:20px 0; text-decoration:none; }
.side-row:hover .arrow-circle,.side-row:focus-visible .arrow-circle{ transform:rotate(-45deg); }
.side-row-note{ display:block; margin-top:4px; font:400 var(--fs-small)/var(--lh-small) var(--sans); color:var(--ink-70); }
@media (max-width:560px){ .drawer--side{ padding:20px 16px 32px; } }

/* ---------------------------------------------------------------- 12. phone action bar */
.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:6px 16px calc(6px + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform 250ms var(--ease);
}
.action-bar.is-shown{ transform:none; }
.action-bar{ display:flex; gap:8px; transition:transform 250ms var(--ease), background-color 250ms var(--ease), border-color 250ms var(--ease); }
.action-bar .btn--primary{ flex:1 1 auto; width:auto; }
.action-bar .action-call{ flex:none; width:auto; padding:0 20px; }
/* over the dark tour band the bar is dark too, and its primary takes the paper fill (pilot note 1) */
.action-bar.is-dark{ background:rgba(20,44,36,.96); border-top-color:rgba(252,251,247,.14); }
.action-bar.is-dark .btn--primary{ background:var(--paper); color:var(--ink); }
.action-bar.is-dark .action-call{ border-color:rgba(252,251,247,.7); color:var(--paper); }
.action-bar.is-dark .btn:focus-visible{ outline-color:var(--paper); }
@media (min-width:900px){ .action-bar{ display:none; } }

/* ---------------------------------------------------------------- 13. hero
   Round 2 (pilot notes 14 and 15): the hero is ONE photograph, the lobby, full bleed from the very top of the
   window (under the header, so no strip opens when the header hides), with one neutral dark scrim: the left
   reads as the real room at night-level exposure and the right falls into the dark where the brain's spruce
   glow lives. The first screen says less: the headline, the signed indication sentence (three lines), the paper
   pill, one text link and the fact row. On desktop the hero is pinned for one window while the paper sheet
   rises over it; the content (copy, brain, facts) dissolves only in a narrow band just above the sheet's edge.
   The brain stage keeps the hint and the pause control on its bottom row and one 11px line of note and credit
   on its top edge: the rising sheet takes the brain before it takes the credit (addendum 3.5). */
.hero{
  position:relative; isolation:isolate; overflow:hidden; overflow:clip;
  color:var(--on-dark); background:#151B19;
}
.hero-photo{ position:absolute; z-index:0; inset:0; overflow:hidden; }
.hero-photo picture{ position:absolute; inset:0; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:30% 0; }
.hero-scrim{
  position:absolute; z-index:1; inset:0; pointer-events:none;
  background:
    radial-gradient(40% 58% at 77% 45%, rgba(44,88,71,.72) 0%, rgba(38,78,63,.46) 42%, rgba(30,62,50,0) 74%),
    linear-gradient(90deg, rgba(10,14,12,.72) 0%, rgba(10,14,12,.62) 45%, rgba(21,27,25,.94) 72%, rgba(20,26,24,.975) 78%, rgba(19,25,23,.99) 84%, #131917 92%),   /* round 3 (note 43): the right side goes dark (from 78 percent: at 1920 the photo's door lettering lands at 82 to 88 percent), so its mirrored lettering is not legible */
    linear-gradient(to bottom, rgba(10,14,12,0) 52%, rgba(10,14,12,.42) 100%);
}
.hero-content{ position:relative; z-index:2; }
.hero-copy .h-display{ max-width:710px; }
.hero-sub{ max-width:660px; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; column-gap:32px; row-gap:12px; }
.hero-address{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--on-dark); }
.hero-address > span{ display:block; }
.hero .facts{ color:var(--on-dark); }
.hero-safety{ display:none; }
.fact-link{ color:inherit; }

/* the fact row: a 2px rule across the container (round 2: it stops at the container's right edge on desktop, pilot note 16) */
.facts{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); position:relative; padding-top:16px; }
.facts::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--rule); }
.facts--hero::before{ background:var(--rule-on-dark); }
.facts > li{ grid-column:span 3; }
.facts--ruled > li{ grid-column:span 4; }
.fact{ font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.fact a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); transition:text-decoration-color var(--t-hover) var(--ease); }
.fact a:hover{ text-decoration-color:currentColor; }
.fact-src{ margin-top:0; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.facts--hero .fact-src{ color:var(--on-dark-70); }

/* the hero brain's scroll track (pilot note 5): the engine reads progress from .hero-slot (data-brain-track): 0 at
   the top of the page, 1 once it has scrolled by its height less the pinned hero's. The slot is one window plus
   that range; the paper sheet is pulled up by the same range, so the page and the curtain are exactly as before:
   the turn and the opening are done by about 315px of scroll at 1440x900, while the brain is still whole above
   the rising sheet. On phones and tablets the hero is not pinned and the slot is the hero itself. */
.hero-slot{ position:relative; }
@media (min-width:900px){
  :root{ --cb:176px; --hero-range:calc(var(--header) + 16px + .36 * (var(--vh) - var(--header) - 16px - var(--cb))); }
  .hero-slot{ height:calc(var(--vh) + var(--hero-range)); }
}
@media (min-width:900px) and (max-height:879px){ :root{ --cb:40px; } }

/* the brain stage in the hero: the ground is the photograph, so the stage draws no box */
.hero .brain-stage{ background:none; border-radius:0; overflow:visible; padding:0; }
.hero .brain-stage::after{ display:none; }
.hero .brain-stage > .brain-pause{ width:44px; min-height:44px; padding:0; gap:0; font-size:0; }
.hero .brain-stage > .hero-print{ max-width:none; height:15px; font:400 11px/15px var(--sans); letter-spacing:0; color:var(--on-dark-70); white-space:nowrap; }   /* one line, its height reserved (no rewrap when the font arrives) */
.hero .hero-print a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

@media (min-width:900px){
  .hero-pin{ min-height:calc(var(--vh) * 2); }
  .hero{ position:sticky; top:0; height:var(--vh); --copy-bottom:176px; }
  .hero-content{ position:absolute; inset:0; }
  /* the content dissolves into the ground in a 48px band just above the rising sheet (site.js writes --cut, where
     the sheet's edge is), so the sheet never cuts a line of type or the brain on a hard edge, and nothing fades early */
  html.js .hero-content{
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--cut, 300vh) - var(--fb, 0px)),transparent var(--cut, 300vh));
    mask-image:linear-gradient(to bottom,#000 calc(var(--cut, 300vh) - var(--fb, 0px)),transparent var(--cut, 300vh));
  }
  .hero-copy{ position:absolute; z-index:2; left:var(--L); bottom:var(--copy-bottom); width:calc(7 * var(--col) + 120px); }
  .hero-sub{ margin-top:20px; font-size:var(--fs-body); line-height:var(--lh-body); max-width:620px; }
  .hero-actions{ margin-top:28px; }
  .hero-address{ display:none; }
  .hero .brain-stage{
    position:absolute; z-index:1; left:var(--C); width:calc(5 * var(--col) + 80px); top:calc(var(--header) + 16px); bottom:var(--copy-bottom); height:auto;
    grid-template:"void void void" 1fr "hint print pause" auto / auto minmax(0,1fr) auto; gap:8px 16px;
  }
  /* round 3 (pilot notes 23, 32): the one short line sits in the stage's bottom row, between the hint and the pause control */
  .hero .hero-print{ grid-area:print; align-self:center; justify-self:end; text-align:right; }
  .hero .brain-stage > .brain-hint{ grid-area:hint; align-self:center; }
  .hero .brain-stage > .brain-pause{ grid-area:pause; align-self:center; }
  .hero-facts{ position:absolute; z-index:2; left:0; right:0; bottom:52px; }
  .hero-edge{ display:none; }
  .why.sheet{ margin-top:calc(-20px - var(--hero-range, 0px)); padding-top:calc(48px + 20px); }
}
/* compact desktop: under 880 tall the sub and the facts open the paper sheet; the address takes the sub's place */
@media (min-width:900px) and (max-height:879px){
  .hero{ --copy-bottom:40px; }
  .hero-sub,.hero-facts{ display:none; }
  .hero-actions{ margin-top:20px; }
  .hero-address{ display:block; margin-top:12px; }
  .hero-address > span{ display:inline; }
}

/* phones and tablets: never pinned. The lobby photograph fills the first screen behind everything (the sign under
   the header, the room darkening downward); the first screen is, in order, the room, the brain, the whole
   headline, the paper pill and the address, sized from the small viewport height (100svh). The run-on (the
   signed sentence, the one text link, Safety information) follows on the dark ground under it. */
@media (max-width:899px){
  .hero{
    --copy-h:282px;                   /* 12 + H1 3 lines + 20 + pill + 16 + address 2 lines + 8 */
    --ph:calc(var(--vw) / .6);        /* the photograph's height: the sign under the header, the armchairs, the floor */
    --room:clamp(72px, min(calc(var(--ph) * .36 - var(--header)), calc(var(--vh) * .2)), 220px);   /* the sign's share above the brain */
    --bh:clamp(180px, calc(var(--vh) - var(--header) - var(--copy-h) - var(--room) - 20px), min(80vw, 420px));
    padding-top:var(--header); display:flex; flex-direction:column;
  }
  .hero-photo{ bottom:auto; height:var(--ph); }
  .hero-photo img{ object-position:50% 0; }
  .hero-scrim{
    bottom:auto; height:calc(var(--ph) + 2px);
    background:
      radial-gradient(64% 26% at 50% calc(var(--header) + var(--room) + var(--bh) * .46), rgba(44,88,71,.62) 0%, rgba(36,74,60,.34) 48%, rgba(30,62,50,0) 80%),
      linear-gradient(to bottom, rgba(10,14,12,.26) 0, rgba(10,14,12,.32) 36%, rgba(10,14,12,.70) 52%, rgba(14,19,17,.84) 76%, #151B19 100%);
  }
  .hero-content{ display:contents; }
  .hero .brain-stage{
    order:1; position:relative; z-index:2; flex:none;
    width:100%; height:var(--bh); margin-top:var(--room);
    padding:0 var(--L);
    grid-template:"void pause" 1fr "print print" auto / minmax(0,1fr) auto;
  }
  .hero .brain-stage > .brain-hint{ display:none; }
  .hero .brain-stage > .brain-pause{ grid-area:pause; align-self:start; }
  .hero .hero-print{ grid-area:print; }
  .hero-copy{ order:2; position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; padding-inline:var(--L); }
  .hero-actions{ display:contents; }
  .hero-copy .h-display{ order:1; margin-top:12px; }
  .hero-copy .btn--primary{ order:2; margin-top:20px; }
  .hero-address{ order:3; margin-top:16px; font-size:16px; line-height:24px; }
  .hero-sub{ order:4; margin-top:28px; }
  .hero-book{ order:5; margin-top:16px; }
  .hero-safety{ display:inline-flex; order:6; margin-top:4px; margin-bottom:24px; }
  .hero-facts{ display:none; }
  .hero-edge{ order:4; position:sticky; z-index:3; bottom:0; flex:none; height:20px; background:var(--paper); border-radius:12px 12px 0 0; }
}
@media (min-width:561px) and (max-width:899px){
  .hero{ --copy-h:262px; }
  .hero-copy .h-display{ max-width:620px; }
}
@media (max-width:560px){
  .hero-copy .btn--primary{ width:100%; }
}
@media (max-width:374px){
  .hero{ --copy-h:328px; }            /* the H1 runs to four lines */
  .hero-address .addr-first{ font-size:15px; }
}
@media (max-width:899px) and (max-height:699px){
  /* short phones: the sign gets less room and the brain may be smaller, so the address stays on the first screen */
  .hero{ --copy-h:312px; --room:72px; --bh:clamp(136px, calc(var(--vh) - var(--header) - var(--copy-h) - var(--room) - 20px), min(80vw, 420px)); }
}

/* a picture still on its way shows as a quiet tone of the room, never as alt text in an empty box (pilot note 10) */
.row-thumb,.tile img,.visit-photo img,.mq-card img,.band-img,.article img,.mega-card img,.drawer-card img{ background:#D5DCD3; color:transparent; }

/* ---------------------------------------------------------------- 14. why here */
.why{ background:var(--paper); padding:48px 0; }
.why-preface{ display:none; }
@media (min-width:900px) and (max-height:879px){
  .why-preface{ display:block; margin-bottom:48px; }
  .why-sub{ max-width:calc(7 * var(--col) + 120px); margin-bottom:32px; }
}
.why .statement{ margin-top:32px; font:400 var(--fs-h2)/var(--lh-h2) var(--serif); letter-spacing:-.01em; text-wrap:balance; }
.why .split-text .btn{ margin-top:32px; }
.why .split-text .link-plus{ display:flex; width:max-content; margin-top:16px; }

/* ruled thumbnail rows: the 2px rule runs from the list's start to the viewport's right edge */
.rows > li{ position:relative; }
.rows > li::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rule); transition:opacity var(--t-arrow) var(--ease); }
.rows > li:hover::after,.rows > li:focus-within::after{ opacity:.25; }
.row-link{
  display:grid; grid-template-columns:208px minmax(0,1fr) 36px; align-items:center; column-gap:20px;
  padding:20px 0; text-decoration:none; color:var(--ink);
}
.row-link:hover .arrow-circle,.row-link:focus-visible .arrow-circle{ transform:rotate(-45deg); }
.row-thumb{ width:208px; height:130px; border-radius:var(--radius); object-fit:cover; }
.row-thumb--seal{ display:grid; place-items:center; width:208px; height:130px; border-radius:var(--radius); background:var(--mist); }
/* pilot note 22: the real LegitScript seal, exactly as issued (73x79, never scaled by CSS) */
.seal-img{ display:block; width:73px; height:79px; max-width:none; flex:none; }
.row-text{ font:400 var(--fs-row)/var(--lh-row) var(--serif); }
@media (max-width:899px){
  .why.sheet{ margin-top:0; border-radius:0; }
  .why .split{ row-gap:32px; }
}
@media (max-width:560px){
  .why{ padding:32px 0; }
  .why .split-text .link-plus{ display:none; }
  .row-link{ grid-template-columns:96px minmax(0,1fr); column-gap:16px; align-items:start; min-height:88px; padding:20px 0; }
  .row-link > .arrow-circle{ display:none; }
  .row-thumb{ width:96px; height:60px; }
  .row-thumb--seal{ width:96px; height:auto; padding:8px 0; }
}

/* ---------------------------------------------------------------- 15. the brain tour band */
.tour-band{
  position:relative; z-index:1; overflow:clip;
  background:#1A3A2F radial-gradient(120% 90% at 30% 20%,#2C5847,#1A3A2F); color:var(--on-dark);
}
/* the static stand-in (used only if the engineers' section is ever pulled; markup in _tools/tour-standin.html) */
.tour-standin{ padding:96px 0; }
.tour-standin .split-text > * + *{ margin-top:32px; }
.tour-parts > li + li{ margin-top:20px; }
.tour-parts h3{ font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.tour-standin-figure img{ width:min(600px,100%); margin-inline:auto; }

/* ---------------------------------------------------------------- 16. conditions */
.conditions{ background:var(--mist); padding:calc(96px + 20px) 0 96px; }
.tile-scroller{ position:relative; }
.tiles{
  display:flex; gap:20px;
  padding-inline:var(--L); scroll-padding-inline:var(--L);
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.tiles::-webkit-scrollbar{ display:none; }
.tiles.is-dragging{ scroll-snap-type:none; cursor:grabbing; }
.tiles.is-dragging a{ pointer-events:none; }
.tiles > li{ flex:0 0 auto; width:clamp(240px, calc((var(--vw) - var(--L) - 80px) / 4.3), 300px); scroll-snap-align:start; }
.tile{ aspect-ratio:1; }
.tile-new{ position:absolute; z-index:1; left:20px; top:20px; font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600; }
.tile:has(.tile-new)::before{ content:""; position:absolute; z-index:1; inset:0 0 auto 0; height:30%; background:linear-gradient(to bottom,rgba(12,15,14,.34),rgba(12,15,14,0)); pointer-events:none; }
.tile-text{ position:absolute; z-index:1; left:20px; right:20px; bottom:68px; }
.tile-text .tile-title{ display:block; font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.tile-note{ position:absolute; z-index:1; left:20px; right:76px; bottom:28px; font-size:var(--fs-small); line-height:var(--lh-small); }
.tile-all-cell{ display:none; }
.tile-controls{ display:flex; align-items:center; gap:20px; margin-top:20px; }
.progress{ position:relative; flex:1; height:2px; background:var(--track); border-radius:1px; }
.progress-thumb{ position:absolute; left:0; top:0; height:2px; width:30%; background:var(--ink); border-radius:1px; transform:translateX(0); }
.tile-btn{
  width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 2px var(--ink); color:var(--ink);
  transition:background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease);
}
.tile-btn:hover{ background:var(--ink); color:var(--mist); }
.tile-btn[aria-disabled="true"]{ opacity:.4; cursor:default; }
.tile-btn[aria-disabled="true"]:hover{ background:none; color:var(--ink); }
.tile-btn .icon{ width:20px; height:20px; }
html:not(.js) .tile-controls{ display:none; }
@media (max-width:560px){
  .conditions{ padding:48px 0; }
  .conditions .section-head > a{ display:none; }
  .conditions .section-head{ margin-bottom:32px; }
  .tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; overflow:visible; scroll-snap-type:none; }
  .tiles > li{ width:auto; }
  .tile{ --tile-shade:linear-gradient(to top,rgba(12,15,14,.78) 0%,rgba(12,15,14,.6) 45%,rgba(12,15,14,.36) 70%,rgba(12,15,14,0) 96%); }
  .tile-text{ left:16px; right:16px; bottom:16px; }
  .tile-note{ left:16px; right:16px; bottom:16px; }
  .tile:has(.tile-note) .tile-text{ bottom:60px; }
  .tile-new{ left:16px; top:16px; }
  .tile > .arrow-circle{ display:none; }
  .tiles > .tile-all-cell{ display:block; }
  .tile--all{ display:block; aspect-ratio:1; border-radius:var(--radius); background:var(--paper); color:var(--ink); text-decoration:none; position:relative; }
  .tile--all .tile-text{ color:var(--ink); }
  .tile--all .arrow-circle{ position:absolute; left:16px; top:16px; }
  .tile--all:hover .arrow-circle{ transform:rotate(-45deg); }
  .tile-controls{ display:none; }
}

/* ---------------------------------------------------------------- 17. reveal (lists only, script adds the hidden state) */
.rv{ opacity:0; transform:translateY(24px); }
.rv.rv-in{ opacity:1; transform:none; transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay:var(--rv-delay,0ms); }

/* ---------------------------------------------------------------- 18. Brain on the page
   Sets the engineers' viewer onto this page's left edge, header and type scale. Only custom
   properties and type are touched; their layout and behaviour are theirs. */
.brain-stage .brain-note{ font-size:var(--fs-small); line-height:var(--lh-small); }
.brain-stage .brain-credit{ font-size:var(--fs-legal); line-height:var(--lh-legal); }
.brain-stage .brain-hint{ font-size:var(--fs-small); line-height:var(--lh-small); letter-spacing:0; text-transform:none; }
.brain-stage .brain-explore,.brain-stage .brain-pause{ min-height:44px; padding:0 20px; font-size:var(--fs-small); line-height:var(--lh-small); }

body .brain-tour{
  --brain-gutter:var(--gutter);
  --brain-edge:var(--L);
  --brain-tour-top:var(--header);
  font-size:var(--fs-body); line-height:var(--lh-body);
}
body .brain-tour-head{ padding-top:96px; }
body .brain-tour-eyebrow{ font:600 var(--fs-small)/var(--lh-small) var(--sans); letter-spacing:0; text-transform:none; color:var(--on-dark-70); }   /* sage measures 3.2:1 on spruce at 14px; paper at 78 percent measures above 5 (Rule 7) */
body .brain-tour-title{ font:400 var(--fs-h2)/var(--lh-h2) var(--serif); letter-spacing:-.01em; }
body .brain-tour-skip{ font-size:var(--fs-small); line-height:var(--lh-small); }
body .brain-stop h3{ font:400 var(--fs-row)/var(--lh-row) var(--serif); }
body .brain-stop h3::before{ font-size:var(--fs-legal); line-height:var(--lh-legal); letter-spacing:0; }
body .brain-stop p{ font-size:var(--fs-body); line-height:var(--lh-body); }
body .brain-tour .brain-note{ font-size:var(--fs-small); line-height:var(--lh-small); }
body .brain-tour .brain-credit{ font-size:var(--fs-legal); line-height:var(--lh-legal); }
body .brain-source{ font-size:var(--fs-small); line-height:var(--lh-small); }
body .brain-tour-foot{ padding-bottom:calc(96px + 20px); }   /* without data-hold only */
body .brain-tour-foot .brain-explore{ min-height:44px; font-size:var(--fs-small); }
body .brain-rail button{ font-size:var(--fs-small); line-height:var(--lh-small); }
body .brain-tour.is-touring .brain-stop h3{ font:400 var(--fs-h2)/var(--lh-h2) var(--serif); letter-spacing:-.01em; }
body .brain-tour.is-touring .brain-stop h3::before{ font-size:var(--fs-small); line-height:var(--lh-small); }
body .brain-tour.is-touring .brain-stop p{ font-size:var(--fs-body); line-height:var(--lh-body); }
body .brain-tour.is-touring .brain-note{ font-size:var(--fs-small); line-height:var(--lh-small); }
body .brain-tour.is-touring .brain-credit{ font-size:var(--fs-legal); line-height:var(--lh-legal); }
body .brain-tour.is-touring .brain-rail button{ font-size:var(--fs-small); line-height:var(--lh-small); }
@media (min-width:900px){
  body .brain-tour.is-touring .brain-tour-body{ --brain-col:calc(var(--L) + 8 * var(--col) + 160px); }   /* the third start (column 9): clear of the brain at its closest push-in */
}

/* 18b. The homepage pace and the way out (round 2: one clock, pilot note 17; round 3: pilot notes 30 and 31).
   tour.js lays out one timeline from these lengths (fractions of the pinned screen's height): each stop is held
   .32 times its --brain-rest and each move takes .22 times the stop's --brain-move (index.html: 1, 1.1, 1.15, 1.2,
   1.4 for the dive, 1 for the slide; holds 1, 1, 1, 1.05, 1.2, 1.05, 1.4), so every stop's hold is at least 55
   percent of its scroll length (counted either as hold plus the move out, or from the middle of the move in to the
   middle of the move out) and a reader who stops scrolling lands on a hold. The pinned run is 4,852px at 1440x900
   (round 2: 4,329, so 12 percent longer). After the last stop the brain closes (.36, the dive in reverse) and rests
   (.06) with the rail on its last stop; then the mist sheet rises over the held, whole brain (data-hold, Rule 8). */
.tour-band .brain-tour{ --brain-hold-f:.32; --brain-move-f:.22; --brain-close-f:.36; --brain-rest-f:.06; }
@media (min-width:900px){
  /* the stage runs to the top of the window, so the deep stops' shell never ends on the straight line the header
     used to leave; the brain's frame, centre and the text keep the places they had under a 72px header */
  body .tour-band .brain-tour{ --brain-tour-top:0px; }
  body .tour-band .brain-tour.is-touring .brain-tour-body{ --brain-pin:calc(var(--header) + (var(--brain-vh) - var(--header)) * .3); }
  body .tour-band .brain-tour.is-touring .brain-stage{
    --brain-frame:min(calc((var(--brain-vh) - var(--header)) * .82), 48vw);
    --brain-cy:calc(var(--header) + (100% - var(--header)) * .44);
  }
}
/* round 1: the foot is only the curtain's leading edge (the mist sheet's rounded top); the source line and
   Explore the brain sit at the head of the tour, on the dark band, so the mist sheet opens on the
   conditions header row and nothing else (seam 3) */
body .tour-band .brain-tour[data-hold] .brain-tour-foot{
  z-index:3; background:var(--mist); color:var(--ink);
  border-radius:12px 12px 0 0; padding:0; min-height:20px;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body .tour-band .brain-tour-head{ row-gap:8px; }
body .tour-band .brain-tour-links{ display:flex; align-items:center; gap:8px 32px; margin:0; }
body .tour-band .brain-tour-explore{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--on-dark); }
body .tour-band .brain-tour-head .brain-source{ flex:0 0 100%; margin:0; color:var(--on-dark-70); }
body .tour-band .brain-tour-head .brain-source a{ color:var(--on-dark); text-decoration-color:color-mix(in srgb,currentColor 40%,transparent); transition:text-decoration-color var(--t-hover) var(--ease); }
body .tour-band .brain-tour-head .brain-source a:hover{ text-decoration-color:currentColor; }
@media (max-width:560px){
  body .tour-band .brain-tour-links{ flex:0 0 100%; justify-content:space-between; }
}
.tour-band:has(.brain-tour[data-hold]) + .conditions{ margin-top:0; border-radius:0; padding-top:96px; }
/* short desktop windows (stage 5): the texts sit higher than the engine's 30 percent of the stage, so the
   longest one (Hippocampus, 7 to 8 lines) ends clear of the rail */
@media (min-width:900px) and (max-height:759px){
  body .tour-band .brain-tour.is-touring .brain-tour-body{ --brain-pin:calc(var(--header) + (var(--brain-vh) - var(--header)) * .2); }
}
@media (min-width:900px) and (max-height:649px){
  body .tour-band .brain-tour.is-touring .brain-tour-body{ --brain-pin:calc(var(--header) + (var(--brain-vh) - var(--header)) * .12); }
}
/* phones and tablets (round 2, pilot note 21): the pinned screen is, top to bottom, the brain (half the screen under
   the header, at least 45 percent of what the header and the action bar leave), one small-print block, the part's
   name with "n of 7" and its sentences, and the action bar. Shorter holds: the phone page stays shorter than the
   desktop page (Rule 4). Under 700px tall the header steps away while the tour is pinned (site.js), so the brain
   keeps its share there too. */
@media (max-width:899px){
  .tour-band .brain-tour{ --brain-hold-f:.23; --brain-move-f:.15; --brain-close-f:.26; --brain-rest-f:.04; }   /* round 3: holds >= 55 percent here too; run 3,441px at 390x844 (round 2: 3,154) */
  body .tour-band .brain-tour.is-touring .brain-tour-body{ --brain-stage-h:calc(var(--brain-tour-h) * .54); }
  /* the top edge is always feathered (note 21); at the dive stops the sides and the foot feather too (note 29) */
  body .tour-band .brain-tour.is-touring .brain-stage > .brain-canvas{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24px,#000 calc(100% - var(--brain-d,0) * 20%),rgb(0 0 0 / calc(1 - var(--brain-d,0))) 100%),linear-gradient(to right,rgb(0 0 0 / calc(1 - var(--brain-d,0))) 0,#000 calc(var(--brain-d,0) * 12%),#000 calc(100% - var(--brain-d,0) * 12%),rgb(0 0 0 / calc(1 - var(--brain-d,0))) 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,transparent 0,#000 24px,#000 calc(100% - var(--brain-d,0) * 20%),rgb(0 0 0 / calc(1 - var(--brain-d,0))) 100%),linear-gradient(to right,rgb(0 0 0 / calc(1 - var(--brain-d,0))) 0,#000 calc(var(--brain-d,0) * 12%),#000 calc(100% - var(--brain-d,0) * 12%),rgb(0 0 0 / calc(1 - var(--brain-d,0))) 100%);
    mask-composite:intersect;
  }
  body .tour-band .brain-tour.is-touring .brain-tour-stills > img,
  body .tour-band .brain-tour.is-touring .brain-stage > .brain-poster{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24px);
    mask-image:linear-gradient(to bottom,transparent 0,#000 24px);
  }
  body .brain-tour.is-touring .brain-note,body .brain-tour.is-touring .brain-credit{ font-size:11px; line-height:15px; }
  body .brain-tour.is-touring .brain-stop h3::before{ font-size:var(--fs-small); line-height:var(--lh-small); }
}
/* round 3 (pilot note 42): on phones the header steps away while the tour is pinned, at every height (site.js) */
@media (max-width:899px){
  body .tour-band .brain-tour{ --brain-tour-top:0px; }
}
@media (max-width:374px){
  body .brain-tour.is-touring .brain-stop h3{ font-size:26px; line-height:32px; }
  body .brain-tour.is-touring .brain-stop p{ font-size:16px; line-height:24px; }
}
@media (max-width:560px){
  .tour-band:has(.brain-tour[data-hold]) + .conditions{ padding-top:48px; }
}

/* ================================================================ stage 3: the second half, the footer, the dialog */

/* inline links inside running text: the underline darkens on hover (Rule 14) */
main p a,.site-footer p a,.dialog p a,.refs-list a{
  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);
}
main p a:hover,.site-footer p a:hover,.dialog p a:hover,.refs-list a:hover{ text-decoration-color:currentColor; }
sup{ font-size:var(--fs-legal); line-height:0; vertical-align:super; }
sup a{ display:inline-block; padding:0 2px; color:var(--spruce); }
main sup a,.site-footer sup a,.dialog sup a{ text-decoration:none; }
main sup a:hover{ text-decoration:underline; }
.status{ max-width:660px; }
.label{ font:600 var(--fs-small)/var(--lh-small) var(--sans); color:var(--amber-ink); }
.panel{ background:var(--mist); border-radius:var(--radius); padding:32px 20px; }
.split-text > .link-arrow{ display:flex; width:max-content; max-width:100%; }

/* every small disclosure (Show the numbers, the pre-typed question, references, footer groups) */
.disc-sum{ list-style:none; display:inline-flex; align-items:center; gap:16px; min-height:44px; font-weight:600; cursor:pointer; }
.ch-data > summary,.ai-prompt > summary,.refs-acc > summary,.f-acc > summary{ list-style:none; cursor:pointer; }
.ch-data > summary::-webkit-details-marker,.ai-prompt > summary::-webkit-details-marker,.refs-acc > summary::-webkit-details-marker,.f-acc > summary::-webkit-details-marker,.faq-item > summary::-webkit-details-marker{ display:none; }
.ch-data > summary,.ai-prompt > summary{ display:inline-flex; align-items:center; gap:16px; min-height:44px; font-weight:600; }

/* ---------------------------------------------------------------- 20. your visit (mist; plain space from the tiles) */
.visit{ background:linear-gradient(to bottom, var(--mist) calc(100% - 120px), #F5F6F1 100%); padding:48px 0 96px; }
.visit-lead{ margin-top:32px; max-width:660px; }
.steps{ margin-top:32px; }
.steps > li{ position:relative; padding:20px 0; }
.steps > li:last-child{ padding-bottom:0; }
.steps > li::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule); }
.step-time{ font:400 var(--fs-row)/var(--lh-row) var(--serif); font-variant-numeric:tabular-nums; }
.step-text{ margin-top:8px; max-width:660px; }
.visit .split-text > .link-arrow{ margin-top:32px; }
.visit-photo img{ width:100%; height:auto; aspect-ratio:5 / 4; object-fit:cover; border-radius:var(--radius); }
.visit-photo figcaption,.map figcaption{ margin-top:8px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }

/* ---------------------------------------------------------------- 21. cost and coverage (paper sheet over mist) */
.cost{ background:linear-gradient(to bottom, #F5F6F1 0, var(--paper) 120px); padding:48px 0; }
.cost-p{ margin-top:16px; max-width:660px; }
.cost .h2 + .cost-p{ margin-top:32px; }
.cost .split-text > .btn{ margin-top:32px; }
.plan-rows{ position:relative; margin-top:20px; }
.plan-rows::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule); }
.plan-rows > li{ position:relative; padding:32px 0; }
.plan-rows > li::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rule); }
.plan-type{ font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.plan-names{ margin-top:8px; }

/* ---------------------------------------------------------------- 22. research and the label chart (paper) */
.research{ background:var(--paper); padding:96px 0 48px; }
.research .lead{ max-width:780px; text-wrap:balance; }
.research-body{ margin-top:32px; max-width:660px; }
.ch-chip{ display:block; font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600; color:var(--ink-70); }
.ch-title{ margin-top:8px; font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.ch-kind{ margin-top:8px; max-width:660px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.ch-legend{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 32px; font-size:var(--fs-small); line-height:var(--lh-small); }
.ch-legend li{ display:flex; align-items:center; gap:8px; }
.ch-key{ width:12px; height:12px; flex:none; background:var(--chart-accent); }
.ch-key--muted{ background:var(--chart-muted); }
.ch-rows{ margin-top:20px; }
.ch-row,.ch-axis{ display:grid; grid-template-columns:160px minmax(0,1fr) 150px; align-items:center; column-gap:16px; }
.ch-row{ min-height:44px; }
.ch-row + .ch-row{ margin-top:8px; }
.ch-label{ font-size:var(--fs-small); line-height:var(--lh-small); }
.ch-strip{ display:block; width:100%; height:18px; overflow:visible; }
.ch-track{ fill:var(--chart-track); }
.ch-fill{ fill:var(--chart-accent); }
.ch-muted .ch-fill{ fill:var(--chart-muted); }
.ch-value{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ch-axis{ margin-top:8px; align-items:start; }
.ch-axis-ticks{ grid-column:2; position:relative; height:28px; border-top:2px solid var(--line); }
.ch-axis-ticks span{ position:absolute; top:6px; transform:translateX(-50%); font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); font-variant-numeric:tabular-nums; }
.ch-axis-unit{ grid-column:3; padding-top:6px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.ch-note{ margin-top:16px; }
.ch-gloss{ margin-top:16px; max-width:660px; }
.ch-gloss--in{ display:none; }
.ch-data{ margin-top:16px; }
.ch-data-body{ padding-bottom:8px; }
.rtable-wrap{ margin-top:16px; overflow-x:auto; overscroll-behavior-x:contain; }
.rtable{ width:100%; min-width:560px; border-collapse:collapse; font-size:var(--fs-small); line-height:var(--lh-small); font-variant-numeric:tabular-nums; }
.rtable caption{ text-align:left; font-weight:600; padding-bottom:8px; }
.rtable th,.rtable td{ text-align:left; vertical-align:top; padding:8px 16px 8px 0; border-bottom:2px solid var(--line); }
.rtable thead th{ font-weight:600; color:var(--ink-70); }
.rtable tbody th{ font-weight:400; }
.ch-src{ margin-top:16px; max-width:660px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:48px; }
.chip-num{ font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.chip-text{ margin-top:8px; font-size:var(--fs-small); line-height:var(--lh-small); }
/* the bars are whole in the markup; where supported they grow once while the rows cross the screen (addendum 1.5) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .ch-rows{ view-timeline:--ch block; }
    .ch-fill{ transform-box:fill-box; transform-origin:left center; animation:ch-grow linear both; animation-timeline:--ch; animation-range:entry 100% cover 40%; }
  }
}
@keyframes ch-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
html.is-hooked .ch-fill{ animation:none; }
@media print{ .ch-fill{ animation:none; } }

/* ---------------------------------------------------------------- 23. the photograph band (round 2: an inset photograph in the
   container with the page's 12px radius, like Mindbloom's video card, on the paper ground; pilot note 16) */
.band-photo{ background:var(--paper); padding:48px 0; }
.band-card{ position:relative; overflow:hidden; border-radius:var(--radius); min-height:640px; display:grid; align-items:center; padding:48px 0; background:#6E655A; }
.band-card > picture{ position:absolute; inset:0; }
.band-img{ width:100%; height:100%; object-fit:cover; object-position:62% 55%; }
.band-grid{ position:relative; z-index:1; width:100%; padding-inline:48px; }
.band-panel{ grid-column:1 / span 6; background:var(--paper); padding:48px; }   /* six columns: the H2 sets as two whole sentences, the door stays clear */
.band-quote{ margin-top:32px; }
.band-panel .source{ margin-top:8px; }
.band-panel .link-arrow{ margin-top:32px; }

/* ---------------------------------------------------------------- 24. the clinic: a moving row of the real rooms */
.clinic{ background:var(--paper); padding:64px 0 32px; }
.marquee{ position:relative; overflow:hidden; }
.marquee:focus-visible{ outline-offset:-2px; }
.marquee-track{ display:flex; align-items:flex-start; width:max-content; margin-left:var(--L); animation:mq-run 86.4s linear infinite; will-change:transform; }
.mq-copy{ display:contents; }
.mq-card{ flex:none; width:400px; margin:0 32px 0 0; }
.mq-card img{ width:100%; height:auto; object-fit:cover; border-radius:var(--radius); }
.mq-card--tall img{ aspect-ratio:4 / 5; }
.mq-card--wide img{ aspect-ratio:16 / 10; }
.mq-card figcaption{ margin-top:8px; }
.mq-room{ display:block; }
.mq-where{ display:block; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track,.marquee.is-paused .marquee-track,.marquee.is-off .marquee-track{ animation-play-state:paused; }
html.is-hooked .marquee-track{ animation-play-state:paused; }
@keyframes mq-run{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-foot{ margin-top:20px; }
.marquee-toggle{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font:600 var(--fs-small)/var(--lh-small) var(--sans); color:var(--ink);
  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);
}
.marquee-toggle:hover{ text-decoration-color:currentColor; }
.marquee-toggle::before{
  content:""; width:24px; height:24px; flex:none; border-radius:50%;
  background:
    linear-gradient(currentColor,currentColor) 8.5px 7px / 1.5px 10px no-repeat,
    linear-gradient(currentColor,currentColor) 14px 7px / 1.5px 10px no-repeat;
  box-shadow:inset 0 0 0 1.5px currentColor;
}
.marquee-toggle[aria-pressed="true"]::before{
  background:conic-gradient(from 60deg at 38% 50%, currentColor 0 60deg, transparent 60deg) 9px 7px / 8px 10px no-repeat;
}
/* still row: under reduced motion and below 900, it scrolls by hand from L, one set only */
@media (prefers-reduced-motion:reduce){
  .marquee{ overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--L); scrollbar-width:none; }
  .marquee-track{ animation:none; margin-left:0; padding-inline:var(--L) calc(var(--L) - 32px); }
  .mq-copy{ display:none; }
  .mq-card{ scroll-snap-align:start; }
  .marquee-foot{ display:none; }
}

/* ---------------------------------------------------------------- 25. local: the front door and the map */
.local{ background:var(--paper); padding:48px 0; }
.local-p{ margin-top:32px; max-width:660px; }
.local .label{ margin-top:32px; }
.local-story{ margin-top:8px; max-width:660px; }
.local .split-text > .btn,.local .split-text > .link-arrow{ margin-top:32px; }
.map-box{ position:relative; aspect-ratio:16 / 10; background:var(--mist); border-radius:var(--radius); overflow:hidden; }
.map-svg{ position:absolute; inset:0; width:100%; height:100%; }
.map-river{ fill:none; stroke:var(--chart-muted); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.map-road{ fill:none; stroke:var(--ink-70); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.map-labels{ position:absolute; inset:0; }
.map-town,.map-clinic,.map-county{
  position:absolute; white-space:nowrap;
  font:400 var(--fs-small)/var(--lh-small) var(--sans); color:var(--ink);
  text-shadow:0 0 2px var(--mist),0 0 4px var(--mist),0 0 6px var(--mist);
}
.map-town{ display:flex; align-items:center; gap:8px; min-height:28px; text-decoration:none; }
.map-town::before{ content:""; width:7px; height:7px; flex:none; border-radius:50%; background:var(--ink); }
.map-town span{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:transparent; transition:text-decoration-color var(--t-hover) var(--ease); }
.map-town:hover span{ text-decoration-color:currentColor; }
.map-town--r{ transform:translate(-3.5px,-50%); }
.map-town--l{ transform:translate(calc(-100% + 3.5px),-50%); flex-direction:row-reverse; }
.map-town--t{ transform:translate(-50%,calc(-100% + 3.5px)); flex-direction:column-reverse; gap:0; min-height:0; }
.map-town--b{ transform:translate(-50%,-3.5px); flex-direction:column; gap:0; min-height:0; }
.map-clinic{ display:flex; align-items:center; gap:8px; transform:translate(-10px,-50%); font-weight:600; }
.map-clinic::before{ content:""; width:20px; height:20px; flex:none; border-radius:50%; background:var(--spruce); border:3px solid var(--paper); }
.map-county{ color:var(--ink-70); }
.map-towns{ display:none; }

/* ---------------------------------------------------------------- 26. FAQ with the AI ask (paper) */
.faq{ background:var(--paper); padding:96px 0; }
.ai-ask{ margin-top:32px; }
.ai-ask-title{ display:flex; align-items:center; gap:8px; font-weight:600; }
.sparkle{ width:16px; height:16px; flex:none; color:var(--ink-70); }
.ai-ask-sub{ margin-top:8px; max-width:406px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.ai-chips{ display:grid; grid-template-columns:repeat(3,60px); gap:16px 40px; }   /* circles start on the edge; names centre under them in 90px */
.ai-ask .ai-chips{ margin-top:20px; }
.ai-chip{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink); text-decoration:none; border-radius:var(--radius); }
.ai-mark{ display:grid; place-items:center; width:60px; height:60px; border-radius:50%; background:var(--mist); transition:background-color var(--t-hover) var(--ease); }
.ai-chip:hover .ai-mark,.ai-chip:focus-visible .ai-mark{ background:var(--line); }
.ai-mark .mark{ width:28px; height:28px; }
.mark--placeholder{ color:var(--ink); }
.g-mark{
  position:relative; display:block; width:28px; height:28px; overflow:hidden;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 20 20'%3E%3Cpath d='M29.3987 18.1814H19.9849V22.0445H25.3598C25.1286 23.294 24.4294 24.3596 23.3676 25.0712C22.4746 25.6716 21.3266 26.0211 19.9849 26.0211C17.3864 26.0211 15.1823 24.2666 14.3947 21.9004C14.1952 21.2989 14.0853 20.6599 14.0853 19.9983C14.0853 19.3367 14.1952 18.6966 14.3947 18.0962C15.1823 15.7311 17.3864 13.9755 19.9849 13.9755C21.4524 13.9755 22.767 14.4816 23.8039 15.4713L26.6653 12.6057C24.936 10.9908 22.6786 10 19.9849 10C16.0832 10 12.705 12.2414 11.0618 15.5076C10.383 16.8592 10 18.3834 10 19.9994C10 21.6155 10.383 23.1396 11.0618 24.4913C12.705 27.7597 16.0832 30 19.9849 30C22.6797 30 24.9485 29.1137 26.6018 27.5861C28.4887 25.8452 29.5732 23.2702 29.5732 20.2275C29.5732 19.5182 29.5131 18.835 29.3987 18.1825V18.1814Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 20 20'%3E%3Cpath d='M29.3987 18.1814H19.9849V22.0445H25.3598C25.1286 23.294 24.4294 24.3596 23.3676 25.0712C22.4746 25.6716 21.3266 26.0211 19.9849 26.0211C17.3864 26.0211 15.1823 24.2666 14.3947 21.9004C14.1952 21.2989 14.0853 20.6599 14.0853 19.9983C14.0853 19.3367 14.1952 18.6966 14.3947 18.0962C15.1823 15.7311 17.3864 13.9755 19.9849 13.9755C21.4524 13.9755 22.767 14.4816 23.8039 15.4713L26.6653 12.6057C24.936 10.9908 22.6786 10 19.9849 10C16.0832 10 12.705 12.2414 11.0618 15.5076C10.383 16.8592 10 18.3834 10 19.9994C10 21.6155 10.383 23.1396 11.0618 24.4913C12.705 27.7597 16.0832 30 19.9849 30C22.6797 30 24.9485 29.1137 26.6018 27.5861C28.4887 25.8452 29.5732 23.2702 29.5732 20.2275C29.5732 19.5182 29.5131 18.835 29.3987 18.1825V18.1814Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.g-mark::before{
  content:""; position:absolute; inset:-3px; filter:blur(1.4px);
  background:conic-gradient(from 45deg at 48.7% 49.2%, rgb(255,70,65) 0deg, rgb(255,70,65) 4.15deg, rgb(49,134,255) 39.15deg, rgb(49,134,255) 72deg, rgb(0,165,183) 96.75deg, rgb(14,188,95) 120.9deg, rgb(14,188,95) 154.7deg, rgb(108,196,0) 179.1deg, rgb(255,204,0) 203.6deg, rgb(255,211,20) 226.9deg, rgb(255,204,0) 251.7deg, rgb(255,106,43) 273.1deg, rgb(253,70,65) 289.3deg, rgb(255,70,65) 360deg);
}
.ai-name{ width:90px; margin-inline:-15px; font-size:var(--fs-small); line-height:var(--lh-small); text-align:center; }
.ai-prompt{ margin-top:16px; max-width:406px; }
.ai-prompt > summary{ font-size:var(--fs-small); line-height:var(--lh-small); }
.ai-prompt > p{ padding-top:8px; font-size:var(--fs-small); line-height:var(--lh-small); }
@media (min-width:900px){ .faq-list{ margin-top:-32px; } }
.faq-item{ position:relative; }
.faq-item::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rule); transition:opacity var(--t-arrow) var(--ease); }
.faq-item:hover::after{ opacity:.25; }
.faq-item > summary{ list-style:none; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:32px 0; cursor:pointer; }
.faq-q{
  font:400 var(--fs-lead)/var(--lh-lead) var(--serif);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:transparent;
  transition:text-decoration-color var(--t-hover) var(--ease);
}
.faq-item > summary:hover .faq-q{ text-decoration-color:currentColor; }
.faq-item .plus{ margin-top:8px; }
.faq-a{ max-width:660px; padding-bottom:32px; }
.faq-letter{ margin-top:32px; }

/* ---------------------------------------------------------------- 27. closing (paper with a still mist glow) */
.closing{ position:relative; overflow:hidden; background:var(--paper); padding:96px 0 64px; }
.glow{
  position:absolute; left:38%; top:44%; width:1200px; height:640px; transform:translate(-50%,-50%); pointer-events:none;   /* round 2: behind the headline from L, so the 192px above it is not bare paper */
  background:radial-gradient(closest-side, rgba(143,168,152,.24) 0%, rgba(205,218,208,.5) 34%, rgba(238,242,235,.7) 64%, rgba(252,251,247,0) 100%);
}
.closing-inner{ position:relative; z-index:1; width:100%; }
.closing .h-display{ max-width:900px; }
.closing-inner > .btn{ margin-top:32px; }
.closing-inner > .link-arrow{ display:flex; width:max-content; margin-top:16px; }
.closing-promise{ margin-top:32px; max-width:660px; }
.closing .status{ margin-top:8px; }

/* ---------------------------------------------------------------- 28. articles (paper) */
.articles{ background:var(--paper); padding:64px 0; }
.article-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.article{ display:block; color:var(--ink); text-decoration:none; }
.article img{ width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; border-radius:var(--radius); }
.article-meta{ margin-top:20px; display:flex; flex-wrap:wrap; column-gap:16px; font-size:var(--fs-small); line-height:var(--lh-small); }
.article-tag{ color:var(--amber-ink); font-weight:600; }
.article-time{ color:var(--ink-70); }
.article-title{
  display:block; margin-top:8px; 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);
}
.article:hover .article-title,.article:focus-visible .article-title{ text-decoration-color:currentColor; }

/* ---------------------------------------------------------------- 29. references (utility, paper) */
.refs{ background:var(--paper); padding:64px 0; }
.refs-label{ display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600; }
.refs-list{ margin-top:16px; columns:3; column-gap:20px; list-style:decimal inside; font-size:var(--fs-legal); line-height:var(--lh-legal); color:var(--ink-70); }
.refs-list li{ break-inside:avoid; margin-bottom:8px; }
.refs-list li:target{ color:var(--ink); }
@media (min-width:561px){
  .refs-label{ cursor:default; justify-content:flex-start; }
  .refs-label .plus,.f-acc > summary .plus{ display:none; }
  .f-acc > summary{ cursor:default; }
}

/* ---------------------------------------------------------------- 30. footer (paper) */
.site-footer{ background:var(--paper); padding:64px 0; font-size:var(--fs-small); line-height:var(--lh-small); }
.f-crisis{ position:relative; padding-bottom:32px; font-size:var(--fs-body); line-height:var(--lh-body); max-width:none; }
.f-crisis::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rule); }
.f-crisis a{ font-weight:600; }
.f-grid{ margin-top:32px; row-gap:48px; }
.f-clinic{ grid-column:1 / span 3; }
.f-col--treat{ grid-column:4 / span 2; }
.f-col--how{ grid-column:6 / span 2; }
.f-col--ans{ grid-column:8 / span 2; }
.f-ai{ grid-column:10 / span 3; }
.f-logo{ width:175px; height:40px; margin-bottom:20px; }
.f-clinic > p + p{ margin-top:8px; }
.reviewer{ color:var(--ink-70); }
.seal-block{ margin-top:20px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.seal-link{ display:block; border-radius:4px; text-decoration:none; }
.seal-caption{ max-width:240px; }
.f-title{ display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:600; }
.f-title--ai{ justify-content:flex-start; gap:8px; }
.f-links{ margin-top:16px; }
.f-links li + li{ margin-top:4px; }
.f-links a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:transparent; transition:text-decoration-color var(--t-hover) var(--ease); }
.f-links a:hover{ text-decoration-color:currentColor; }
.f-ai-sub{ margin-top:8px; color:var(--ink-70); }
.f-ai .ai-chips{ margin-top:16px; }
.f-near{ margin-top:48px; }
.f-near-groups{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); }
.f-near-group{ grid-column:span 4; margin-top:16px; }
.fnear-h{ font-weight:600; color:var(--ink-70); }
.f-links--near{ columns:2; column-gap:var(--gap); }
.f-links--near li{ break-inside:avoid; }
.f-legal{ position:relative; margin-top:48px; padding-top:32px; }
.f-legal::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule); }
.legal{ max-width:606px; font-size:var(--fs-legal); line-height:var(--lh-legal); color:var(--ink-70); }
.legal + .legal{ margin-top:8px; }

/* ---------------------------------------------------------------- 31. the safety information dialog */
.dialog{
  width:min(806px, calc(100vw - 32px)); max-width:none; max-height:min(86vh, 900px);
  margin:auto; padding:0; border:0; border-radius:var(--radius);
  background:var(--paper); color:var(--ink); overflow:hidden;
}
.dialog[open]{ display:flex; flex-direction:column; animation:dlg-fade 250ms var(--ease), dlg-rise 400ms var(--ease); }
.dialog::backdrop{ background:rgba(30,43,37,.6); }
.dialog[open]::backdrop{ animation:dlg-fade 250ms var(--ease); }
@keyframes dlg-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes dlg-rise{ from{ transform:translateY(16px); } to{ transform:none; } }
.dialog-head{ flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:48px 48px 0; }
.dialog-close{ flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 2px var(--ink); transition:background-color var(--t-hover) var(--ease); }
.dialog-close:hover{ background:var(--mist); }
.dialog-close .x{ position:relative; width:16px; height:16px; }
.dialog-close .x::before,.dialog-close .x::after{ content:""; position:absolute; left:-1px; right:-1px; top:7.25px; height:1.5px; background:currentColor; transform:rotate(45deg); }
.dialog-close .x::after{ transform:rotate(-45deg); }
.dialog-src{ flex:none; padding:8px 48px 0; }
.isi-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin-top:32px; padding:0 48px 32px; }
.isi-body:focus-visible{ outline-offset:-2px; }
.isi-body h3{ margin-top:32px; font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.isi-body h3:first-child{ margin-top:0; }
.isi-body > p,.isi-body > ul{ margin-top:16px; max-width:660px; }
.isi-body h3 + p{ margin-top:8px; }
.isi-body strong{ font-weight:600; }
.isi-list{ list-style:disc; padding-left:20px; }
.isi-list > li + li{ margin-top:8px; }
.isi-list--sub{ margin-top:8px; list-style:circle; }
.isi-list li > p{ margin-top:8px; }
.crisis{ position:relative; margin-top:20px; padding:20px 0; font-weight:600; }
.crisis::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule); }
.isi-body > .crisis{ margin-top:20px; }
.dialog-foot{ flex:none; display:flex; flex-wrap:wrap; align-items:center; column-gap:32px; row-gap:8px; padding:20px 48px; border-top:2px solid var(--rule); background:var(--paper); }
.dialog-foot .btn{ margin-left:auto; }
@media (max-width:560px){
  .dialog{ width:100%; height:calc(100dvh - 16px); max-height:none; margin:16px 0 0; border-radius:12px 12px 0 0; }
  .dialog-head{ padding:32px 16px 0; }
  .dialog-src{ padding:8px 16px 0; }
  .isi-body{ margin-top:20px; padding:0 16px 32px; }
  .dialog-foot{ padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .dialog-foot .btn{ margin-left:0; width:100%; }
}

/* ---------------------------------------------------------------- 32. stage-3 sections below 900 (one column, nothing sticky) */
@media (max-width:899px){
  .visit .split-text{ display:contents; }
  .visit .split-text > *,.visit .visit-photo{ grid-column:1 / -1; }
  #visit-title{ order:1; }
  .visit-photo{ order:2; margin-top:32px; }
  .visit-lead{ order:3; }
  .steps{ order:4; }
  .visit .split-text > .link-arrow{ order:5; justify-self:start; }
  .cost .split-list,.research .ch,.local .map{ margin-top:48px; }
  .band-photo{ padding:32px 0; }
  .band-card{ display:block; min-height:0; padding:0; overflow:visible; border-radius:0; background:none; }
  .band-card > picture{ position:relative; inset:auto; display:block; aspect-ratio:16 / 10; overflow:hidden; border-radius:var(--radius); }
  .band-img{ height:100%; }
  .band-grid{ padding-inline:0; }
  .band-panel{ grid-column:1 / -1; background:none; border-radius:0; padding:32px 0 0; }
  .marquee{ overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--L); scrollbar-width:none; overscroll-behavior-x:contain; }
  .marquee::-webkit-scrollbar{ display:none; }
  .marquee-track{ animation:none; margin-left:0; padding-inline:var(--L) calc(var(--L) - 20px); }
  .mq-copy{ display:none; }
  .mq-card{ width:280px; margin-right:20px; scroll-snap-align:start; }
  .marquee-foot{ display:none; }
  .faq .split-list{ margin-top:32px; }
  .closing{ min-height:0; }
  .article-row{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); }
  .article-row::-webkit-scrollbar{ display:none; }
  .article-row > li{ flex:0 0 min(397px, calc(100vw - 74px)); scroll-snap-align:start; }
  .refs-list{ columns:2; }
  .f-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .f-clinic{ grid-column:1 / span 6; grid-row:1; }
  .f-ai{ grid-column:7 / span 6; grid-row:1; }
  .f-col--treat{ grid-column:1 / span 4; grid-row:2; }
  .f-col--how{ grid-column:5 / span 4; grid-row:2; }
  .f-col--ans{ grid-column:9 / span 4; grid-row:2; }
  .f-near-group{ grid-column:span 6; }
}
@media (min-width:900px) and (max-width:1279px){
  .f-clinic{ grid-column:1 / span 6; grid-row:1; }
  .f-ai{ grid-column:7 / span 6; grid-row:1; }
  .f-col--treat{ grid-column:1 / span 4; grid-row:2; }
  .f-col--how{ grid-column:5 / span 4; grid-row:2; }
  .f-col--ans{ grid-column:9 / span 4; grid-row:2; }
  .f-near-group{ grid-column:span 6; }
  .chips .chip-text{ max-width:none; }
}

/* ---------------------------------------------------------------- 33. stage-3 sections on phones (560 and under) */
@media (max-width:560px){
  .visit{ padding:32px 0 calc(32px + 20px); }
  .visit-lead,.visit-photo figcaption{ display:none; }
  .visit-photo{ margin-top:32px; }
  .cost{ padding:calc(32px + 20px) 0 32px; }
  .cost-fight{ display:none; }
  .cost .split-list{ margin-top:32px; }
  .plan-rows > li{ padding:20px var(--L) 20px 0; }
  .research{ padding:32px 0 calc(32px + 20px); }
  .research-body,.chips,.ch > .ch-gloss{ display:none; }
  .research .ch{ margin-top:32px; }
  .ch-gloss--in{ display:block; margin-top:8px; }
  .ch-row{ grid-template-columns:minmax(0,1fr) 140px; row-gap:8px; column-gap:16px; }
  .ch-row + .ch-row{ margin-top:20px; }
  .ch-label{ grid-column:1 / -1; }
  .ch-axis{ grid-template-columns:minmax(0,1fr) 140px; }
  .ch-axis-ticks{ grid-column:1; }
  .ch-axis-unit{ grid-column:2; }
  .ch-value{ font-size:var(--fs-body); }
  .clinic{ padding:calc(48px + 20px) 0 48px; }
  .clinic .section-head{ margin-bottom:32px; }
  .local{ padding:32px 0; }
  .local-serve{ display:none; }
  .local .map{ margin-top:32px; }
  .map-town{ pointer-events:none; }
  .map-town span{ display:none; }
  .map-clinic,.map-county{ font-size:var(--fs-legal); line-height:var(--lh-legal); }
  .map-clinic-addr{ display:none; }
  .map-towns{ display:block; margin-top:8px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
  .faq{ padding:48px 0; }
  .ai-ask{ display:none; }
  .faq .split-list{ margin-top:0; }
  .faq-item > summary{ padding:16px 0; }
  .faq-item .plus{ margin-top:2px; }
  .faq-a{ padding-bottom:16px; }
  .closing{ padding:48px 0; }
  .glow{ width:36rem; height:24rem; left:60%; top:50%; }
  .articles{ padding:48px 0; }
  .articles .section-head{ margin-bottom:32px; }
  .refs{ padding:32px 0; }
  .refs-acc{ position:relative; border-top:2px solid var(--rule); border-bottom:2px solid var(--rule); }
  .refs-label{ min-height:48px; font-size:var(--fs-body); line-height:var(--lh-body); }
  .refs-list{ columns:1; margin-top:0; padding-bottom:16px; }
  .site-footer{ padding:48px 0; }
  .site-footer > .wrap{ display:flex; flex-direction:column; }
  .f-grid{ display:contents; }
  .f-crisis{ order:1; }
  .f-clinic{ order:2; margin-top:32px; }
  .f-col{ order:3; }
  .f-near{ order:4; margin-top:0; }
  .f-ai{ order:5; margin-top:32px; }
  .f-legal{ order:6; margin-top:32px; }
  .f-clinic{ margin-bottom:32px; }
  .f-acc{ position:relative; border-top:2px solid var(--rule); }
  .f-near{ border-bottom:2px solid var(--rule); }
  .f-acc > summary{ min-height:48px; font-size:var(--fs-body); line-height:var(--lh-body); }
  .f-links{ margin-top:0; padding-bottom:16px; }
  .f-links li + li{ margin-top:0; }
  .f-links a{ display:flex; align-items:center; min-height:44px; }
  .f-near-groups{ display:block; }
  .f-near-group{ margin-top:0; }
  .f-near-group + .f-near-group{ margin-top:8px; }
  .f-links--near{ columns:2; }
  .ai-chips{ grid-template-columns:repeat(3,50px); column-gap:50px; }
  .ai-mark{ width:50px; height:50px; }
  .ai-name{ margin-inline:-20px; }
  .f-legal::before{ display:none; }
  .f-legal{ padding-top:0; }
}

/* ---------------------------------------------------------------- 34. stage 4 polish: one voice for every control */
/* disclosures: the label's underline darkens on hover, like every text link (Rule 14) */
.ch-data > summary,.ai-prompt > summary{
  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);
}
.ch-data > summary:hover,.ai-prompt > summary:hover{ text-decoration-color:currentColor; }
@media (max-width:560px){
  .refs-acc > summary,.f-acc > summary{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:transparent; transition:text-decoration-color var(--t-hover) var(--ease); }
  .refs-acc > summary:hover,.f-acc > summary:hover{ text-decoration-color:currentColor; }
}


/* the seal and its caption share one row (the caption names what the seal does, beside it) */
.seal-block{ flex-direction:row; align-items:center; gap:16px; }
.seal-caption{ max-width:200px; }
@media (max-width:560px){
  .row-link{ padding:16px 0; }
}

/* phones hide the circled arrows on rows and tiles, so there the text answers the hand instead */
@media (max-width:560px){
  .row-text,.tile-title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:transparent; transition:text-decoration-color var(--t-hover) var(--ease); }
  .row-link:hover .row-text,.photo-card:hover .tile-title{ text-decoration-color:currentColor; }
}
/* under 375 wide the closing headline steps down to the H2 size so it keeps to four lines (Rule 9) */
@media (max-width:374px){
  .closing .h-display{ font-size:var(--fs-h2); line-height:var(--lh-h2); }
}

/* ---------------------------------------------------------------- 35. fix round 1: reach, reading size, seams */
/* seam 14: the footer opens on the crisis line and plain space, no rule across the container */
.f-crisis::after{ display:none; }
/* the AI chips read once per page at full size: in the FAQ on wide screens (its explainer now inside the
   disclosure), in the footer on phones (the FAQ block is off there). On wide screens the footer's AI column is one
   short line of the six names as plain links, no marks and no explainer */
.ai-prompt .ai-ask-sub{ margin-top:8px; max-width:406px; }
@media (min-width:561px){
  .f-ai-sub,.f-ai .ai-mark{ display:none; }
  .f-ai .ai-chips{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:8px; }
  .f-ai .ai-chip{ display:inline-flex; min-height:44px; align-items:center; }
  .f-ai .ai-name{ width:auto; margin:0; text-align:left; font-size:var(--fs-small); line-height:var(--lh-small);
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); }
  .f-ai .ai-chip:hover .ai-name{ text-decoration-color:currentColor; }
}
/* the conditions drawer can be closed from the bottom too, within reach of a thumb */
.drawer-close-bottom{ margin-top:32px; width:100%; }
/* the drawer accordions' focus ring stays inside its row (it touched the group label under it) */
.drawer .acc > summary:focus-visible{ outline-offset:-2px; }
/* the safety dialog's read-more links: in the scrolling text on phones, in the foot on wide screens */
.isi-more{ display:none; }
@media (max-width:560px){
  .dialog{ height:calc(100dvh - 8px); margin-top:8px; }
  .dialog-head{ padding:20px 16px 0; align-items:center; }
  .dialog-head .h2{ font-size:var(--fs-lead); line-height:var(--lh-lead); }
  .dialog-src{ padding:4px 16px 0; }
  .isi-body{ margin-top:12px; }
  .isi-more{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:20px; }
  .dialog-foot .link-arrow{ display:none; }
  .dialog-foot{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
}
/* phones: reading text at 16px or more; 14px only for captions and labels, 12px for the legal block */
@media (max-width:560px){
  .site-footer{ font-size:16px; line-height:24px; }
  .site-footer .legal{ font-size:var(--fs-legal); line-height:var(--lh-legal); }
  .site-footer .seal-caption{ font-size:var(--fs-small); line-height:var(--lh-small); }
  .ch-legend{ font-size:16px; line-height:24px; }
  .rtable{ font-size:16px; line-height:24px; }
  .refs-list{ font-size:var(--fs-small); line-height:var(--lh-small); }
  .faq-item{ margin-right:0; padding-right:0; }          /* the rules end at the gutter on both sides */
  .rows > li{ margin-right:0; padding-right:0; }
  /* tiles: under 375 the title steps to the body size, so a three-line title never reaches the New tag */
}
@media (max-width:374px){
  .tile-text .tile-title{ font-size:var(--fs-body); line-height:22px; }
}
/* phones: every inline link in running or small text is a 44px target (the padding grows its box, not the line) */
@media (max-width:899px){
  main p a:not(.link-arrow):not(.link-plus):not(.btn),.site-footer p a,.refs-list a,.dialog p a:not(.link-arrow),.dialog li a,
  .brain-source a,.ch-src a{ padding-block:12px; }
  .brain-stage .brain-credit a,.hero-credit a{ padding-block:16px; }
  .credits-body a{ padding-block:12px; }
  sup a{ display:inline; padding:15px 8px; }
  .f-clinic a[href^="tel"]{ display:inline-flex; align-items:center; min-height:44px; padding-block:0; }
}

/* ---------------------------------------------------------------- 19. reduced motion and test hooks */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:0ms !important; animation-duration:0ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
}
html.is-hooked .site-header,html.is-hooked .rv,html.is-hooked .mega,html.is-hooked .mega-scrim,html.is-hooked .drawer,html.is-hooked .drawer-scrim,html.is-hooked .action-bar{ transition:none; }
html.is-hooked .rv{ opacity:1; transform:none; }

/* ---------------------------------------------------------------- 36. fix round 2 */
/* the tour's standing note keeps its first sentence on phones (the alt text carries the rest), so the small print is three short lines */
@media (max-width:899px){ .note-more{ display:none; } }

/* One surface that changes colour slowly (pilot note 16). Two sheets only: the paper sheet over the pinned hero and
   the mist sheet over the tour's held brain. The paper darkens into the tour band over 180px at the head of the tour
   (no rounded top, no overlap); the mist of the conditions and the visit hands back to paper over 240px across the
   seam to cost and coverage; the photograph band is an inset card; every rule ends at the container's edge. */
body .tour-band .brain-tour:not(.is-touring) .brain-tour-head{ position:relative; z-index:1; padding-top:calc(var(--tour-fade) + 48px); }

/* FAQ (flow rule 11): the heading column carries the H2 and one link; the AI ask is one row of six under the questions */
.faq .faq-letter{ display:flex; width:max-content; margin-top:32px; }
.faq .ai-ask--row{ margin-top:48px; display:grid; grid-template-columns:minmax(0,1fr); row-gap:16px; }
.faq .ai-ask--row .ai-chips{ margin-top:0; grid-template-columns:repeat(6,60px); column-gap:40px; }
.faq .ai-ask--row .ai-prompt{ margin-top:0; max-width:620px; }
@media (max-width:560px){ .faq .ai-ask--row{ display:none; } }   /* phones ask from the footer (round 1) */
/* the tour's way out while it is pinned (mob1): Skip the tour in the stage's top corner, once the first-run hint has gone */
.brain-tour .brain-skip{ display:none; }
.brain-tour.is-touring .brain-stage > .brain-skip{
  display:inline-flex; align-items:center; position:absolute; z-index:3; left:var(--L); top:calc(var(--header) + 16px); min-height:44px;
  color:var(--on-dark-70); font:600 var(--fs-small)/var(--lh-small) var(--sans); text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s;
}
.brain-tour.is-touring .brain-stage.has-scrolled > .brain-skip{ opacity:1; visibility:visible; transition:opacity .4s ease; }
.brain-tour.is-touring .brain-stage > .brain-skip:hover{ color:var(--on-dark); text-decoration-color:currentColor; }
.brain-tour.is-touring .brain-stage > .brain-skip:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; border-radius:4px; }
@media (max-width:899px){ .brain-tour.is-touring .brain-stage > .brain-skip{ top:0; left:var(--L); } }
/* round 2 minors */
.progress,.progress-thumb{ border-radius:999px; }
/* the menu drawer closes from its foot too, within a thumb's reach (mob1) */
.drawer-foot-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
.drawer-foot-row .btn--outline{ width:auto; padding:0 24px; }
/* the drawer's first row: the focus ring is the site's rounded ring, inset into the row */
.drawer .acc > summary:focus-visible,.drawer .drawer-rows a:focus-visible{ outline:2px solid var(--spruce); outline-offset:4px; border-radius:var(--radius); }   /* round 3: outside the row's text, in the gutter, so no letter sits on the ring */
.drawer .acc > summary:focus:not(:focus-visible){ outline:none; }
/* phones: the footnote numbers and the small-print Credits links are 44px targets without moving a line (mob1) */
@media (max-width:899px){
  sup a{ display:inline-block; box-sizing:border-box; min-width:44px; min-height:44px; margin:-15px -19px; padding:15px 0; line-height:14px; text-align:center; }
  .brain-stage .brain-credit a,.hero-print a{ display:inline-block; box-sizing:border-box; min-height:44px; margin:-15px -6px; padding:15px 6px; }
  /* reading text at 16px: the crisis line on its tile sits on a solid scrim; the references */
  .tile-note{ font-size:16px; line-height:22px; padding:8px 10px; margin:0 -10px; border-radius:var(--radius); background:rgba(12,15,14,.62); }
  .tile:has(.tile-note) .tile-text{ bottom:76px; }
  .refs-list{ font-size:16px; line-height:24px; }
}
/* the Locations panel's clinic column carries the address and the phone under its links, so it is not three links and a void */
.mega-address{ margin-top:16px; max-width:300px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink-70); }
.mega-address .mega-link{ min-height:44px; padding:0; color:var(--ink); font-size:var(--fs-body); }
.mega-address + .mega-address{ margin-top:4px; }
/* under an open panel the page steps back further (the H1 below the panel reads as background) */
.mega-scrim{ background:rgba(30,43,37,.46); }
/* Rule 4: the phone page no longer than the desktop page (flow critic): a little less air around the footer on phones */
@media (max-width:560px){ .site-footer{ padding:40px 0 32px; } .f-grid{ margin-top:24px; } }
/* the FAQ keeps under 1.3 windows on wide screens now the AI row sits under the questions (Rule 4) */
@media (min-width:900px){ .faq{ padding:64px 0; } .faq-item > summary{ padding:26px 0; } .faq .ai-ask--row{ margin-top:40px; } }
.fact a{ display:inline-block; padding-block:6px; margin-block:-6px; }

/* ---------------------------------------------------------------- 37. fix round 3: the way into the tour (pilot note 41)
   (a) The paper hands over to the band in a perceptual blend (oklch: through mist and sage, no grey) over --tour-fade,
   drawn above the stage's empty top so the brain comes up while the fade is still on screen. On wide screens the fade
   lies over the stage's top (the brain sits 148px below it): last why row to the brain's top is 48 + 148 = 196px. On
   phones the stage starts under the fade (the brain sits near the stage's top there): 32 + 88 + about 56px.
   (b) The tour head is on the stage's first screen: eyebrow and title top left, Skip and Explore top right with the
   source line under them, pinned with the stage; tour.js fades it in as the brain arrives and out over the first move. */
.tour-band{ --tour-fade:112px; }
.tour-band::before{
  content:""; position:absolute; z-index:5; left:0; right:0; top:0; height:var(--tour-fade); pointer-events:none;
  background:linear-gradient(to bottom, #FCFBF7 0, #DCE4DC 18%, #A9BEB1 36%, #6E9483 52%, #3F6D5A 64%, #2C5847 74%, rgba(44,88,71,0) 100%);
  background:linear-gradient(in oklch to bottom, #FCFBF7 0, #2C5847 74%, rgb(44 88 71 / 0) 100%);
}
@media (max-width:899px){ .tour-band{ --tour-fade:88px; } body .tour-band .brain-tour.is-touring{ padding-top:var(--tour-fade); } }
body .tour-band .brain-tour.is-touring > .brain-tour-head{
  position:sticky; top:0; z-index:4; display:block; box-sizing:border-box;
  height:var(--brain-vh); margin:0 0 calc(var(--brain-vh) * -1); padding:0; background:none; pointer-events:none;
}
body .tour-band .brain-tour.is-touring > .brain-tour-head > *{ position:absolute; margin:0; pointer-events:auto; }
body .tour-band .brain-tour.is-touring > .brain-tour-head .brain-tour-eyebrow{ left:var(--L); top:calc(var(--tour-fade) + 4px); }
body .tour-band .brain-tour.is-touring > .brain-tour-head .brain-tour-title{ left:var(--L); top:calc(var(--tour-fade) + 30px); }
body .tour-band .brain-tour.is-touring > .brain-tour-head .brain-tour-links{ right:var(--L); top:calc(var(--tour-fade) + 2px); flex-direction:row-reverse; gap:32px; }
body .tour-band .brain-tour.is-touring > .brain-tour-head .brain-source{ right:var(--L); top:calc(var(--tour-fade) + 56px); max-width:380px; text-align:right; }
/* the brain sits a little higher and to the right in the pinned stage (38 percent of the room under the header, was 44;
   38 percent across, was 35), so the head's title has its own corner and the brain's top is 196px from the last why row */
@media (min-width:900px){
  body .tour-band .brain-tour.is-touring .brain-stage{ --brain-cx:38%; --brain-cy:calc(var(--header) + (100% - var(--header)) * .38); }
  /* the in-stage Skip takes over in the head's place (top right) once the head has gone */
  body .tour-band .brain-tour.is-touring .brain-stage > .brain-skip{ left:auto; right:var(--L); top:calc(var(--tour-fade) + 2px); min-height:20px; }
}
.brain-tour.is-touring .brain-stage:not(.head-gone) > .brain-skip{ opacity:0; visibility:hidden; }
@media (max-width:899px){
  /* phones: the title over the stage's top left (the scroll hint steps aside for it), the source line and the two
     links at the foot of the screen above the action bar, clear of the part's name and sentences */
  body .tour-band .brain-tour.is-touring > .brain-tour-head{ top:0; }
  body .tour-band .brain-tour.is-touring > .brain-tour-head .brain-tour-eyebrow{ display:none; }
  body .tour-band .brain-tour.is-touring > .brain-tour-head .brain-tour-title{ top:6px; font-size:30px; line-height:38px; }
  body .tour-band .brain-tour.is-touring > .brain-tour-head .brain-tour-links{ left:var(--L); right:var(--L); top:auto; bottom:calc(72px + env(safe-area-inset-bottom)); flex-direction:row; justify-content:space-between; }
  body .tour-band .brain-tour.is-touring > .brain-tour-head .brain-source{ left:var(--L); right:var(--L); top:auto; bottom:calc(72px + 44px + env(safe-area-inset-bottom)); max-width:none; text-align:left; }
  body .tour-band .brain-tour.is-touring .brain-stage > .brain-hint{ visibility:hidden; }
  /* the in-stage Skip: the stage's bottom right, on the small print's line (mob-r2: not the top-left corner) */
  body .tour-band .brain-tour.is-touring .brain-stage > .brain-skip{ top:auto; bottom:0; left:auto; right:var(--L); }
}

/* ---------------------------------------------------------------- 38. fix round 3: the phone tour stack (pilot notes 21, 32)
   One 11px line under the brain ("Illustrative anatomy. Not a patient scan. Credits"; CC BY-SA 4.0 3(a)(2): the
   attribution is given by the link to brain.html#credits, which carries it in full), the in-stage Skip at the right end of
   that line, and the brain's frame takes the room the two credit lines used to need. Wide screens keep the full line. */
.brain-stage .note-credits{ display:none; }
@media (max-width:899px){
  body .tour-band .brain-tour.is-touring .brain-stage{
    --brain-frame:min(calc(100vw - 8px), calc(var(--brain-stage-h) - 30px));
    --brain-cy:calc((var(--brain-stage-h) - 30px) / 2 + 4px);
    grid-template:"hint pause" auto "void void" 1fr "note skip" auto / minmax(0,1fr) auto;
  }
  body .tour-band .brain-tour.is-touring .brain-credit{ display:none; }
  body .tour-band .brain-tour.is-touring .brain-note{ white-space:nowrap; }
  body .tour-band .brain-tour.is-touring .brain-note .note-credits{ display:inline-block; box-sizing:border-box; min-height:44px; margin:-15px -6px; padding:15px 6px; color:inherit; font-weight:400; text-decoration:underline; text-underline-offset:2px; }
  body .tour-band .brain-tour.is-touring .brain-stage > .brain-skip{
    position:static; grid-area:skip; align-self:center; min-height:44px; margin:-14px var(--L) -14px 0; font-size:12px; line-height:16px;
  }
}
@media (max-width:899px) and (max-height:699px){
  body .tour-band .brain-tour.is-touring .brain-tour-body{ --brain-stage-h:calc(var(--brain-tour-h) * .5); }
}
@media (max-width:374px){
  /* under 375px the line and Skip do not fit side by side: Skip moves to the stage's top left, free once the head has gone */
  body .tour-band .brain-tour.is-touring .brain-stage > .brain-skip{ grid-area:hint; align-self:start; margin:0 0 0 var(--L); }
}

/* ---------------------------------------------------------------- 39. fix round 3: the closing is the second dark moment (pilot note 36)
   The closing band bookends the hero: the spruce field of the tour with the same soft glow behind the headline,
   paper type and the paper pill (one button system, surface-aware), fading in from the paper and back out to it over
   240px at each end in a perceptual blend (oklch, with a plain fallback). The padding is equal, 272px, so the type
   always sits on the full spruce. */
.closing.on-dark{
  color:var(--on-dark); padding:272px 0;
  background:linear-gradient(to bottom, #FCFBF7 0, #D4DED6 40px, #95AFA2 90px, #557D6C 140px, #2B5040 190px, #1A3A2F 240px, #1A3A2F calc(100% - 240px), #2B5040 calc(100% - 190px), #557D6C calc(100% - 140px), #95AFA2 calc(100% - 90px), #D4DED6 calc(100% - 40px), #FCFBF7 100%);
  background:linear-gradient(in oklch to bottom, #FCFBF7 0, #1A3A2F 240px, #1A3A2F calc(100% - 240px), #FCFBF7 100%);
}
.closing.on-dark .glow{
  left:34%; top:50%; width:1200px; height:min(560px, calc(100% - 520px));
  background:radial-gradient(closest-side, rgba(52,104,84,.92) 0%, rgba(44,88,71,.6) 45%, rgba(30,64,51,0) 100%);
}
.closing.on-dark .closing-promise{ color:var(--on-dark); }
.closing.on-dark .status{ color:var(--on-dark-70); }
@media (max-width:560px){
  .closing.on-dark{ padding:184px 0;
    background:linear-gradient(to bottom, #FCFBF7 0, #C9D6CD 32px, #7F9E90 64px, #3E6656 104px, #1A3A2F 160px, #1A3A2F calc(100% - 160px), #3E6656 calc(100% - 104px), #7F9E90 calc(100% - 64px), #C9D6CD calc(100% - 32px), #FCFBF7 100%);
    background:linear-gradient(in oklch to bottom, #FCFBF7 0, #1A3A2F 160px, #1A3A2F calc(100% - 160px), #FCFBF7 100%); }
  .closing.on-dark .glow{ width:640px; height:calc(100% - 340px); left:40%; }
}
/* the hero photograph settles once on load (note 36): the page's one orchestrated moment, never under reduced motion */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-photo img{ animation:hero-settle 700ms cubic-bezier(.2,.7,.2,1) both; transform-origin:30% 40%; }
  html.is-hooked .hero-photo img{ animation:none; }
}
@keyframes hero-settle{ from{ transform:scale(1.03); } to{ transform:none; } }

/* ---------------------------------------------------------------- 40. fix round 3: small repairs (pilot note 45)
   Section padding is one symmetric step of the scale (48, 64 or 96) everywhere; the why sheet's top keeps 48 plus the
   20px corner it draws over the hero (the sheet), the closing is 272 (section 39). */
@media (min-width:900px){
  .visit{ padding:64px 0; }
  .research{ padding:64px 0; }
  .clinic{ padding:64px 0; }
}
@media (max-width:899px){
  .visit,.research{ padding:32px 0; }
  .clinic{ padding:48px 0; }
}
@media (max-width:560px){ .site-footer{ padding:32px 0; } }
/* the conditions drawer's crisis line reads at 16px on phones, like the tile's */
@media (max-width:899px){ .side-row-note{ font-size:16px; line-height:22px; } }
/* under 375px wide the first two tiles (treatment-resistant depression, depression with suicidal thoughts) span the
   row at 2:1, so the crisis tile's title and its 988 line both fit with padding (mob-r2: the title was clipped at 320) */
@media (max-width:374px){
  .tiles > li:nth-child(-n+2){ grid-column:1 / -1; }
  .tiles > li:nth-child(-n+2) .tile{ aspect-ratio:2 / 1; }
}
@media (max-width:899px){ .cost{ padding:32px 0; } }

/* the header's seven items (pilot note 49) at 17px, one step under the body size, so they fit with both buttons */
.main-nav .nav-link{ font-size:17px; }

/* ---------------------------------------------------------------- 41. fix round 3: the header clear over the hero (pilot notes 34, 47)
   At the top of the homepage the photograph runs to the top of the window under a clear header: the white edition of the
   logo (the posters' wordmark-white, not a recolour), paper nav and Call, the paper-fill pill. From 40px of scroll, and
   whenever a menu, the drawer or the dialog is open, it is the paper bar, with one 200ms colour change. */
.brand{ position:relative; }
.brand .brand-white{ position:absolute; left:0; top:50%; margin-top:-20px; opacity:0; pointer-events:none; }
.brand img{ transition:opacity 200ms var(--ease); }
.site-header{ transition:transform 250ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease); }
.site-header .nav-link,.site-header .btn,.menu-toggle .bars::before,.menu-toggle .bars::after,.menu-toggle .bars span{ transition:color 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease), text-decoration-color var(--t-hover) var(--ease), transform var(--t-open) var(--ease), opacity var(--t-open) var(--ease); }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])){ background:transparent; border-bottom-color:transparent; }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .brand-ink{ opacity:0; }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .brand-white{ opacity:1; }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .nav-link{ color:var(--paper); }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .btn--outline{ border-color:rgba(252,251,247,.86); color:var(--paper); }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .btn--outline:hover{ background:var(--paper); color:var(--ink); }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .btn--primary{ background:var(--paper); color:var(--ink); }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .btn--primary:hover{ box-shadow:var(--glow-dark); background:#F2F0E9; }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .menu-toggle .bars::before,
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .menu-toggle .bars::after,
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .menu-toggle .bars span{ background:var(--paper); }
html:not(.is-locked) .site-header.is-clear:not(:has([aria-expanded="true"])) .menu-toggle:hover{ background:rgba(252,251,247,.14); }
html:not(.is-locked) .site-header.is-clear :focus-visible{ outline-color:var(--paper); }
@media (max-width:560px){ .brand .brand-white{ margin-top:-16px; } }
/* the top of the photograph under the clear header is held dark enough for paper type (measured, see STATUS) */
.hero-scrim::before{ content:""; position:absolute; inset:0 0 auto 0; height:calc(var(--header) + 72px); background:linear-gradient(to bottom, rgba(10,14,12,.5), rgba(10,14,12,0)); pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .site-header,.brand img{ transition:none; } }
/* note 49: the cost section's text link under its pill, the FAQ insurance answer's link to the Spravato page */
.cost .split-text > .cost-link{ display:flex; width:max-content; margin-top:16px; }
.faq-a > .faq-more{ display:flex; width:max-content; margin-top:16px; }
/* note 48: the hero's sentences (the ketamine bridge and the signed indication) keep to three lines on wide screens: the
   paragraph runs under the stage's empty lower left, below the brain; the fact row gives the full coverage sentence the
   widest cell (1 : 1.4 : 1 : .85) so no cell runs past three lines, and sits 20px lower to keep its air above it */
@media (min-width:1280px){
  .hero-copy{ width:calc(8 * var(--col) + 140px); }
  .hero-sub{ max-width:none; }
  .facts--hero{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,.85fr); }
  .facts--hero > li{ grid-column:auto; }
  .hero-facts{ bottom:32px; }
}

/* ---------------------------------------------------------------- 42. fix round 4: the homepage without the brain (pilot notes 62, 56, 59)
   The moving brain has its own page (brain.html, /brain). The homepage hero is the lobby alone: the copy column on the
   left over a neutral scrim, the room (the sign, the armchairs, the window light) carrying the right half, the far right
   still dark over the door's mirrored lettering (note 43). The curtain is unchanged in kind: the paper sheet rises over
   the pinned hero, now from the first pixel of scroll (there is no brain turn to wait for, so the slot is one window). */
@media (min-width:900px){
  :root{ --hero-range:0px; }
  .hero-slot{ height:var(--vh); }
}
.hero-scrim{
  background:
    linear-gradient(90deg, rgba(10,14,12,.80) 0%, rgba(10,14,12,.72) 28%, rgba(10,14,12,.50) 46%, rgba(10,14,12,.24) 60%, rgba(10,14,12,.24) 68%, rgba(12,16,14,.62) 75%, rgba(14,19,17,.93) 80%, #131917 87%),
    linear-gradient(to bottom, rgba(10,14,12,0) 40%, rgba(10,14,12,.58) 100%);
}
.hero-photo img{ object-position:40% 30%; }
@media (min-width:900px){
  .hero{ --copy-bottom:136px; }
  .hero-copy{ width:min(calc(7 * var(--col) + 120px), 720px); }
  .hero-sub{ max-width:640px; }
  .hero-address{ display:block; margin-top:20px; color:var(--on-dark-70); }
  .hero-address > span{ display:inline; }
  .hero-facts{ bottom:48px; }
}
@media (min-width:1280px){ .hero-copy{ width:720px; } .hero-sub{ max-width:660px; } }
/* the slim fact row (note 56): three headings on one quiet line, no small text, no periods */
.facts--slim{ padding-top:14px; }
.facts--slim > li{ grid-column:span 4; }
@media (min-width:1280px){ .facts--hero.facts--slim{ grid-template-columns:repeat(12,minmax(0,1fr)); } .facts--hero.facts--slim > li{ grid-column:span 4; } }
.facts--slim .fact{ font:400 20px/28px var(--serif); }
.facts--slim .fact a{ padding-block:8px; margin-block:-8px; }

/* phones: the room fills the top of the first screen (the sign under the header, the armchairs), the copy sits low over
   the darkened floor: H1, pill and address end on the first screen, the run-on (the sentences, Book, Safety) follows */
@media (max-width:899px){
  .hero{ --copy-h:300px; }
  .hero-copy{ margin-top:max(calc(var(--ph) * .62 - var(--header)), calc(var(--vh) - var(--header) - var(--copy-h))); }
  .hero-scrim{
    background:
      linear-gradient(to bottom, rgba(10,14,12,.30) 0, rgba(10,14,12,.24) 30%, rgba(10,14,12,.56) 58%, rgba(14,19,17,.86) 80%, #151B19 100%);
  }
}
@media (max-width:374px){ .hero{ --copy-h:340px; } }
@media (max-width:899px) and (max-height:699px){ .hero{ --copy-h:312px; } }

/* the dark wash (note 59), one recipe for the closing and the brain band: paper to spruce through mist and sage over
   --wash, every stop at an HSL saturation of .16 or more (the sage is .13), so the ramp never passes through grey */
:root{ --wash:240px; }
@media (max-width:560px){ :root{ --wash:160px; } }
.closing.on-dark,.brain-band{
  background:linear-gradient(to bottom, #FCFBF7 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 brain band (note 62): at most 70 percent of the window, not pinned, a wash and not a sheet. The heading, one NINDS
   sentence, its source and the way to the brain page sit on the full spruce at the left text start; the still of the
   brain floats in its glow on the right, across the wash's darker half. */
.brain-band{ position:relative; z-index:0; color:var(--on-dark); overflow:clip; height:min(70svh, 640px); min-height:560px; }
.brain-band-grid{ position:relative; height:100%; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:center; }
.brain-band-text{ grid-column:1 / span 5; grid-row:1; position:relative; z-index:1; }
.brain-band-text .h2{ color:var(--on-dark); }
.brain-band-quote{ margin-top:20px; max-width:440px; font:400 var(--fs-row)/var(--lh-row) var(--serif); }
.brain-band-src{ margin-top:16px; max-width:440px; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--on-dark-70); }
.brain-band-src a{ color:var(--on-dark); text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent); }
.brain-band-src a:hover{ text-decoration-color:currentColor; }
.brain-band-text .btn{ margin-top:32px; }
.brain-band-figure{ grid-column:7 / span 6; grid-row:1; position:relative; justify-self:center; width:min(480px, 100%); margin:0; }
.brain-band-figure::before{ content:""; position:absolute; z-index:-1; left:50%; top:50%; width:150%; height:120%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(52,104,84,.9) 0%, rgba(44,88,71,.55) 46%, rgba(30,64,51,0) 100%); }
.brain-band-pic{ display:block; }
.brain-band-pic img{ width:100%; height:auto; aspect-ratio:1; filter:drop-shadow(0 28px 36px rgba(6,14,11,.42)); }
.brain-band-print{ margin-top:-8px; text-align:center; font:400 11px/15px var(--sans); color:var(--on-dark-70); }
.brain-band-print a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:899px){
  :root{ --band-wash:120px; }
  .brain-band{ --wash:120px; height:auto; min-height:0; padding:56px 0 96px; }
  .brain-band-grid{ display:flex; flex-direction:column; align-items:flex-start; height:auto; }
  .brain-band-figure{ order:-1; align-self:center; width:min(216px, 58vw); }
  .brain-band-figure::before{ width:190%; height:150%; }
  .brain-band-print{ margin-top:-4px; }
  .brain-band-text{ margin-top:16px; }
  .brain-band-quote{ margin-top:12px; font-size:var(--fs-body); line-height:var(--lh-body); }
  .brain-band-src{ margin-top:12px; }
  .brain-band-text .btn{ margin-top:20px; }
  .brain-band-print a{ display:inline-block; min-height:44px; margin:-15px -6px; padding:15px 6px; box-sizing:border-box; }
}
@media (max-width:560px){ .brain-band-text .btn{ width:100%; } }
/* the conditions start as a plain mist wash below the band (no sheet: the hero's is the page's only one now) */
.brain-band + .conditions{ margin-top:0; border-radius:0; }
/* the band hands over to the conditions' mist, not to paper, so no edge opens under it */
.brain-band{
  background:linear-gradient(to bottom, #FCFBF7 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), #D6E2D6 calc(100% - var(--wash) * .1667), #EEF2EB 100%);
}
.brain-band-figure{ grid-column:6 / span 6; width:min(440px, 100%); }
.brain-band-figure::before{ width:130%; height:76%; background:radial-gradient(closest-side, rgba(52,104,84,.7) 0%, rgba(44,88,71,.36) 50%, rgba(30,64,51,0) 100%); }
.brain-band-pic img{ filter:drop-shadow(0 18px 24px rgba(6,14,11,.38)); }
.brain-band-print{ position:absolute; left:0; right:0; bottom:20px; margin:0; }
@media (max-width:899px){ .brain-band-print{ position:static; margin-top:-4px; } }
@media (max-width:899px){
  .brain-band{ padding:48px 0 88px; }
  .brain-band-figure{ width:min(188px, 50vw); }
  .brain-band-figure::before{ width:200%; height:130%; }
  .brain-band-text{ margin-top:12px; }
  .brain-band-text .h2{ font-size:28px; line-height:34px; }
}
.brain-band-print{ white-space:nowrap; }
@media (max-width:899px){ .brain-band-print{ margin-inline:-80px; } }

/* ---------------------------------------------------------------- 43. fix round 4: the brain page (pilot note 63)
   brain.html opens on the tour: the brain turning on the spruce field under the clear header, the page's H1 heading the
   first stop in the text column (with its NINDS sentences and the source line), Skip to the explorer top right. The
   ten stops run under the visitor's scroll; after the close the explorer rises over the held brain as a sheet, at twice
   the speed of the page (tour.js --brain-lift), and the visitor takes over. Every tour rule above (.tour-band) applies;
   these are the page's differences: no paper fade in (the band is the page's top), the head is only the skip link,
   the first caption sits high as a hero, and the curtain is the explorer's own green. */
main:has(> .bar-after){ position:relative; }
.bar-after{ position:absolute; top:40px; left:0; width:1px; height:1px; pointer-events:none; }
.tour-band--page{ overflow:visible; overflow-x:clip; --tour-fade:0px; }
.tour-band--page::before{ display:none; }
.brain-page-title{ margin:0 0 20px; color:var(--on-dark); font:400 var(--fs-display)/var(--lh-display) var(--serif); letter-spacing:-.015em; text-wrap:balance; }
body .tour-band--page .brain-tour.is-touring .brain-stop--first > p:not(.brain-source){ max-width:36ch; }
body .tour-band--page .brain-stop--first .brain-source{ margin-top:16px; max-width:40ch; color:var(--on-dark-70); font-size:var(--fs-small); line-height:var(--lh-small); }
body .tour-band--page .brain-stop--first .brain-source a{ color:var(--on-dark); }
@media (min-width:900px){
  body .tour-band--page .brain-tour.is-touring .brain-stops > li:first-child{ top:calc(var(--header) + 88px); }
  body .tour-band--page .brain-tour.is-touring > .brain-tour-head .brain-tour-links{ top:calc(var(--header) + 24px); }
  body .tour-band--page .brain-tour.is-touring .brain-stage > .brain-skip{ top:calc(var(--header) + 24px); }
}
@media (min-width:900px) and (max-height:759px){
  body .tour-band--page .brain-tour.is-touring .brain-stops > li:first-child{ top:calc(var(--header) + 40px); }
  .brain-page-title{ font-size:var(--fs-h2); line-height:var(--lh-h2); }
}
/* the curtain: the explorer's green with a rounded top and a soft shadow up over the held brain */
.explore-root{ --brain-stage-bg:none; position:relative; z-index:2; background:linear-gradient(to bottom, #21483A 0, #1C3E32 55%, #1A3A2F 100%); }
.explore-root .brain-lab{ background:none; }
body .tour-band--page .brain-tour[data-hold] .brain-tour-foot{ background:#21483A; border-radius:24px 24px 0 0; min-height:24px; box-shadow:0 -1px 0 rgba(252,251,247,.10), 0 -24px 48px rgba(6,14,11,.40); }
@media (min-width:900px){
  .explore-root .brain-lab{ --brain-lab-h:max(560px, calc(var(--vh) - 24px)); padding-top:calc(var(--header) - 8px); }
}
/* phones: the tour starts under the header (which steps away once the visitor scrolls), the H1 heads the first caption
   under the brain, the captions sit at the foot of the screen just above the action bar (pilot note 60: no more than
   40px of empty field there), and the in-stage Skip is always on the small-print line */
@media (max-width:899px){
  body .tour-band--page .brain-tour.is-touring{ padding-top:var(--header); }
  body .tour-band--page .brain-tour.is-touring > .brain-tour-head{ display:none; }
  body .tour-band--page .brain-tour.is-touring .brain-stops > li{ top:auto; bottom:calc(64px + 24px + env(safe-area-inset-bottom)); }
  body .tour-band--page .brain-tour.is-touring .brain-stage > .brain-skip{ opacity:1; visibility:visible; }
  .brain-page-title{ margin-bottom:12px; font-size:32px; line-height:38px; }
  body .tour-band--page .brain-stop--first .brain-source{ margin-top:12px; }
}
@media (max-width:899px) and (max-height:639px){
  body .tour-band--page .brain-tour.is-touring .brain-tour-body{ --brain-stage-h:calc(var(--brain-tour-h) * .44); }
  .brain-page-title{ font-size:28px; line-height:34px; }
}
body .tour-band--page .brain-tour .brain-stop--first p.brain-source{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--on-dark-70); max-width:40ch; }

/* ---------------------------------------------------------------- 44. fix round 4: the middle third is one surface (pilot note 57)
   No boxes between the label chart and the map: the three facts under the chart are one ruled line divided by hairlines;
   the photograph band's quote sits straight on the photograph, in paper type, over a dark scrim on the left; the map is
   drawn on the page with only a faint wash behind it. Reading text here is 17 or 18px on desktop. */
.chips{ gap:0; margin-top:48px; border-top:2px solid var(--rule); }
.chips > li{ padding:20px 24px 0 0; }
.chips > li + li{ padding-left:24px; border-left:1px solid var(--line); }
.chips .chip-text{ font-size:var(--fs-body); line-height:var(--lh-body); }
@media (min-width:900px){
  .band-card::before{
    content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(12,16,14,.84) 0%, rgba(12,16,14,.76) 34%, rgba(12,16,14,.42) 52%, rgba(12,16,14,0) 68%);
  }
  .band-grid{ z-index:2; }
  .band-panel{ background:none; padding:0 0 0 8px; color:var(--on-dark); }
  .band-panel .h2{ color:var(--on-dark); }
  .band-panel .band-quote{ font:400 var(--fs-row)/var(--lh-row) var(--serif); max-width:30ch; }
  .band-panel .source{ color:var(--on-dark-70); font-size:var(--fs-body); line-height:var(--lh-body); }
  .band-panel .source sup a{ color:var(--on-dark); }
  .band-panel .link-arrow{ color:var(--on-dark); }
  .band-panel :focus-visible{ outline-color:var(--paper); }
  .map-box{ background:radial-gradient(closest-side, rgba(238,242,235,.9) 55%, rgba(238,242,235,0) 100%); border-radius:0; overflow:visible; }
  .ch-kind,.ch-src,.map-towns{ font-size:var(--fs-body); line-height:var(--lh-body); }
  .ch-legend{ font-size:16px; line-height:24px; }
}
/* phones: sentence-length secondary text at 16px (mux3); single-word labels and tags keep 14 */
@media (max-width:899px){
  .ch-kind,.ch-src,.map-towns,.chips .chip-text{ font-size:16px; line-height:24px; }
  .site-footer .legal{ font-size:14px; line-height:20px; }
}
@media (min-width:900px){
  .band-panel .band-quote{ font:400 var(--fs-body)/var(--lh-body) var(--sans); max-width:520px; }
  /* the map's lines fade out toward the edges of their area instead of ending on the line where the box used to be */
  .map-box > svg{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
    mask-composite:intersect;
  }
}
/* note 59 and the pacing critic (seams 11 to 13): the closing keeps its 240px washes (through the sage, section 42) but
   its type starts and ends closer to them, so the FAQ's last line to the headline is about 280px and the status line to
   the articles' H2 about 230px (was 336 and 390) */
@media (min-width:900px){
  .closing.on-dark{ padding:216px 0 200px; }
  .closing.on-dark .glow{ height:min(560px, calc(100% - 400px)); }
  .closing.on-dark + .articles{ padding-top:32px; }
}
@media (max-width:560px){
  .closing.on-dark{ padding:152px 0 144px; }
  .closing.on-dark + .articles{ padding-top:32px; }
}
/* note 64: the visit photograph is the nurse at the recliner, square (the tiles' ratio, so no fourth ratio on the page) */
.visit-photo img{ aspect-ratio:1; object-position:50% 20%; }

/* ---------------------------------------------------------------- 45. fix round 4: small repairs (pilot note 61, critics)
   The round close controls (the drawers' X, the dialog's X, the menu button while it reads Close menu) show focus as one
   ring of their own, 3px spruce inside the circle, not the site outline around their 2px border (a double ring). */
.drawer-close:focus-visible,.dialog-close:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--spruce); background:var(--mist); }
.menu-toggle[aria-expanded="true"]:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--spruce); border-radius:50%; }
/* the clinic section ends on its next step (pacing critic, seam 9 to 10): the link to the clinic page at the left text
   start under the photographs, Pause motion at the right end of the same row */
.clinic .marquee-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px 32px; flex-wrap:wrap; }
.clinic .marquee-foot > .link-arrow{ display:inline-flex; }
/* the label chart's bars are whole as soon as their rows are fully on screen (mux3: never a short bar beside its value) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){ .ch-fill{ animation-range:entry 0% entry 100%; } }
}
/* the drawer's featured articles read as three rows, not one paragraph (mux3) */
.drawer .acc-group li + li{ margin-top:12px; }
/* the foot row now carries the clinic link: it stays wherever the marquee is a swipe row (phones, reduced motion); only
   the Pause control leaves there (there is no motion to pause) */
.clinic .marquee-foot{ display:flex; }
@media (max-width:899px){ .clinic .marquee-foot > .marquee-toggle{ display:none; } .clinic .marquee-foot{ margin-top:16px; } }
@media (prefers-reduced-motion:reduce){ .clinic .marquee-foot > .marquee-toggle{ display:none; } }
/* phones: the copy block always ends on the first screen (320x640: the address's second line was under the sheet's edge) */
@media (max-width:899px){ .hero-copy{ margin-top:max(120px, calc(var(--vh) - var(--header) - var(--copy-h))); } }
@media (max-width:374px){ .hero{ --copy-h:372px; } }   /* four-line H1 under 375px, plus the sheet's 20px edge */


/* ================================================================ port additions to the design system's style sheet (the fix round, Oct 7 2026)
   core.CSS writes site.css byte for byte (the prototype's assets/site.css), then this file, to site/assets/style.css. Each
   rule here fixes an accessibility defect the port's audit found in the prototype's own rules, and says which; nothing
   here changes how a page looks at rest. */

/* the footnote numbers at desktop widths: sup sets line-height 0 and site.css 6 made its link an inline-block, so the
   link's box was 0px tall and its focus ring drew as a flat bar over the digit. As an inline box the ring wraps the digit
   and the line is laid out as before (phones keep site.css's 44px target) */
@media (min-width:900px){
  sup a{ display:inline; }
}

/* the clinic marquee's pause control: the label alone says what a press does (site.js drops aria-pressed, which site.css
   drew the play icon from), so the paused state draws the same play icon from the class site.js sets */
.marquee-toggle.is-paused::before{
  background:conic-gradient(from 60deg at 38% 50%, currentColor 0 60deg, transparent 60deg) 9px 7px / 8px 10px no-repeat;
}

/* the clear header with a menu open (the last fix round, Oct 7 2026; the pilot's ruling 79): once a trigger is expanded
   the header and its panel are the paper bar (every is-clear rule of site.css 41 stops at :has([aria-expanded="true"])),
   but site.css 41's paper focus ring did not, so the trigger's ring and every mega link's ring were paper on paper (1:1;
   on /brain over the whole tour and explorer, where the header stays clear). With a menu open the ring is the spruce one
   the paper bar draws everywhere else */
html:not(.is-locked) .site-header.is-clear:has([aria-expanded="true"]) :focus-visible{ outline-color:var(--spruce); }

/* the condition tile row's arrows at the end of the row (the readiness round, Oct 7 2026): site.css fades a disabled
   arrow with opacity .4 on the whole button, ring and all, so a keyboard user who tabbed the row to its end met a
   spruce ring drawn at 40 percent, about 1.9:1 on the mist band, under the 3:1 a focus indicator needs. With keyboard
   focus the fade moves onto the arrow and its circle (ink at 40 percent, the colour opacity .4 drew) and the ring
   keeps its full contrast; at rest and under the pointer the button is drawn as before */
.tile-btn[aria-disabled="true"]:focus-visible{
  opacity:1;
  color:color-mix(in srgb,var(--ink) 40%,transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 40%,transparent);
}