/* ═══ site.css faces, tokens and base, copied (a test holds it equal) ═══ */
@layer site.tokens, site.base, site.components, site.states;
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@layer site.tokens {
:root {
  --word-paper:rgba(255,255,255,.95);
  --color-background:#FAFAF9; --color-foreground:#2C2825; --color-surface:#F3F0EC; --color-muted:#736E68;
  --color-accent:#3D3834; --color-primary:#F9F7F4; --color-border:#E8E4DE;
  --warm-50:#FDFCFB; --warm-100:#FAFAF9; --warm-200:#F3F0EC; --warm-300:#E8E4DE; --warm-400:#D6D0C8; --warm-500:#B4ADA4;
  --warm-600:#7A756F; --warm-700:#56524D; --warm-800:#3D3834; --warm-900:#2C2825; --warm-950:#1C1A17;
  --surface-canvas:var(--color-background); --surface-raised:var(--color-surface); --surface-inset:var(--color-primary); --surface-ink:var(--warm-950);
  --text-primary:var(--color-foreground); --text-secondary:var(--warm-700); --text-muted:var(--color-muted); --text-on-ink:var(--color-background);
  --border-hairline:var(--color-border); --border-strong:var(--warm-400);
  --cta-bg:var(--color-foreground); --cta-bg-hover:var(--warm-950); --cta-text:var(--color-background);
  --cta-bg-secondary:transparent; --cta-text-secondary:var(--color-foreground);
  --focus-ring:var(--color-foreground); --focus-ring-on-ink:var(--color-background);
  --text-on-ink-2:rgba(250,250,249,.74); --text-on-ink-3:rgba(250,250,249,.56);
  --border-on-ink:rgba(250,250,249,.12); --fill-on-ink:rgba(250,250,249,.06);
  --plasma-mist-aqua:#D6F6F2; --plasma-mist-rose:#F5E4EE; --plasma-mist-golden:#F7F4E8; --plasma-mist-lavender:#E8E4F5; --plasma-mist-peach:#F9E7DD;
  --plasma-glow-aqua:#7BDEDB; --plasma-glow-rose:#FAA9D1; --plasma-glow-golden:#FBDEA1; --plasma-glow-lavender:#C2B8FA; --plasma-glow-peach:#FCC6AC;
  --plasma-bloom-iris:#988CFF; --plasma-bloom-petal:#FF6FB5; --plasma-bloom-lagoon:#24C6CF; --plasma-bloom-nectar:#FFC85A; --plasma-bloom-peach:#FF9A76;
  --font-display:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-heading:var(--font-display); --font-body:var(--font-display);
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --weight-stage:200;
  --weight-display:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --text-display:  clamp(2.6rem, 1.15rem + 4.6cqi, 5.5rem);
  --text-h1:       clamp(2rem, 1.05rem + 3cqi, 3.9rem);
  --text-h2:       clamp(1.65rem, 1rem + 2cqi, 3rem);
  --text-h3:       clamp(1.6rem, 1.05rem + 1.7cqi, 2.6rem);
  --text-h4:       clamp(1.25rem, 1rem + .8cqi, 1.6rem);
  --text-statement:clamp(1.35rem, 1rem + 1.1cqi, 2rem);
  --text-lead:     clamp(1.0625rem, .95rem + .45cqi, 1.3125rem);
  --text-body:     1.0625rem;
  --text-small:    .9375rem;
  --text-eyebrow:  .75rem;
  --text-button:   .8125rem;
  --text-label:    .75rem;
  --text-note:     .8125rem;
  --leading-display:1.02; --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.6; --leading-relaxed:1.75;
  --tracking-display:-0.02em; --tracking-tight:-0.01em; --tracking-normal:0;
  --tracking-eyebrow:.18em; --tracking-button:.12em; --tracking-label:.14em; --tracking-mono:.02em;
  --metric-baseline:.908;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
  --shadow-sheet:0 -1px 0 var(--border-hairline), 0 -28px 70px rgba(44,40,37,.09);
  --shadow-panel:0 30px 90px rgba(28,26,23,.22), 0 6px 20px rgba(28,26,23,.12);
  --dur-fast:320ms; --dur-base:550ms; --dur-slow:720ms;
  --dur-camera:1440ms;
  --dur-stagger:60ms;
  --dur-stagger-copy:90ms;
  --ease-brand:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-emphasis:cubic-bezier(.34,1.56,.64,1);
  --container-max:1296px;
  --container-prose:680px;
  --gutter:clamp(16px, 5cqi, 72px);
  --gutter-l:max(var(--gutter), env(safe-area-inset-left, 0px));
  --gutter-r:max(var(--gutter), env(safe-area-inset-right, 0px));
  --edge:max(var(--gutter-l), calc((100cqi - var(--container-max)) / 2));
  --header-h:64px;
  --section-y:clamp(56px, 9cqi, 120px);
  --section-y-end:clamp(72px, 10cqi, 140px);
  --moment-y:clamp(64px, 9cqi, 128px);
  --layer-plate:0; --layer-word:1; --layer-rig:2; --layer-bank:4; --layer-copy:6; --layer-veil:8;
  --layer-sheet:10; --layer-header:60; --layer-overlay:100;
  --stage-vh:100svh;
  --stage-min:640px;
  --stage-plate-overscan:9%;
  --stage-parallax-plate:-6%; --stage-parallax-word:26%; --stage-parallax-rig:7%;
  --stage-push:1.09; --stage-cover-scale:1.06; --stage-cover-drop:5%; --stage-cover-veil:.5;
  --cast-push-far:1.038; --cast-push-near:1.055; --cast-word-drift:6cqh;
  --actor-shadow-h:9%;
  --actor-shadow-ink:rgba(44,40,37,.34); --actor-shadow-mid:rgba(44,40,37,.16); --actor-shadow-core:rgba(44,40,37,.3);
  --actor-dissolve:86%;
}
}
@layer site.base {
  .as-written{text-transform:none}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface-canvas); color:var(--text-primary); -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 40px)}
body{margin:0; background:var(--surface-canvas); color:var(--text-primary); font-family:var(--font-body); font-size:var(--text-body); font-weight:var(--weight-regular); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip}
main{display:block; container:layout / inline-size}
img,svg,video{display:block; max-width:100%}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4,.scrolly__title{text-wrap:balance}
p,li{text-wrap:pretty}
blockquote,q{hanging-punctuation:first allow-end}
p,li{hanging-punctuation:first}
.hang{text-indent:-.42em}
ol[class],ul[class]{padding:0; list-style:none}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:var(--radius-sm)}
.on-ink :focus-visible,.ink-panel :focus-visible{outline-color:var(--focus-ring-on-ink)}
.sr-only{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.nowrap{white-space:nowrap}
}
/* ═══ system copy ends ═══ */
/* /brand-brain on site.css. Text frozen until the 2026-11-13 search read: presentation only. */
/* until the brand face loads, Arial sized to its widths (measured on this page's text) and given its ascent
   and descent, so the swap moves nothing; only for the latin file's range, so a glyph the brand face lacks
   (the → in the calls to action) still comes from the system font, as on every other page */
@font-face{font-family:'Plus Jakarta Sans Fallback';src:local('Arial'),local('ArialMT');font-weight:100 399;size-adjust:102%;ascent-override:101.8%;descent-override:21.8%;line-gap-override:0%;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans Fallback';src:local('Arial'),local('ArialMT');font-weight:400 1000;size-adjust:104.6%;ascent-override:99.2%;descent-override:21.2%;line-gap-override:0%;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--font-display:'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif}
.brain-page{--bb-ink-line:var(--border-on-ink)}
.brain-page .brain-nowrap{white-space:nowrap}
.brain-page .visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.brain-page [hidden]{display:none}
.brain-page .group{position:relative}
.brain-page .group > span[id]:empty{position:absolute; top:0; left:0; width:0; height:0}
.brain-page .button{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); min-height:52px; padding:0 26px; border:0; border-radius:var(--radius-full);
  font-family:var(--font-mono); font-weight:var(--weight-medium); font-size:var(--text-button); line-height:1; letter-spacing:var(--tracking-button); text-transform:uppercase;
  text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:var(--cta-bg-secondary); color:var(--cta-text-secondary); box-shadow:inset 0 0 0 1px rgba(44,40,37,.55);
  transition:background-color var(--dur-fast) var(--ease-brand), box-shadow var(--dur-fast) var(--ease-brand), transform var(--dur-fast) var(--ease-brand)}
.brain-page .button:hover{background:rgba(250,250,249,.55); box-shadow:inset 0 0 0 1px var(--text-primary)}
.brain-page .button.primary{background:var(--cta-bg); color:var(--cta-text); box-shadow:none}
/* one call per hero: the second is a quiet mono text link (site.css .text-link, restated so it is right at first
   paint); its arrow is drawn, not written */
.brain-page .text-link{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-family:var(--font-mono); font-weight:var(--weight-medium); font-size:var(--text-button); letter-spacing:var(--tracking-button);
  text-transform:uppercase; text-decoration:none; color:var(--text-primary); background:linear-gradient(currentColor, currentColor) 0 calc(50% + .9em) / 100% 1px no-repeat}
.brain-page .text-link::after{content:"→" / ""; font-family:var(--font-body); font-size:15px; letter-spacing:0; transition:transform var(--dur-fast) var(--ease-brand)}
.brain-page .text-link:hover::after{transform:translateX(3px)}
.brain-page .button.primary:hover{background:var(--cta-bg-hover)}
.brain-page .button.primary::after{content:"→" / ""; font-family:var(--font-body); font-size:15px; letter-spacing:0; transition:transform var(--dur-fast) var(--ease-brand)}
.brain-page .button.primary:hover::after{transform:translateX(3px)}
.brain-page .button:active{transform:scale(.98)}
.brain-page .actions{display:flex; flex-wrap:wrap; gap:var(--space-3)}
html[data-js] .public-header:not([data-transparent]):not(.is-scrolled):not(:has(details[open])){background:transparent}
.bb-hold{position:relative}
.public-header:not([data-transparent]) ~ main .bb-hold{margin-top:calc(-1 * var(--header-h))}
.brain-page .bb-hero{position:relative; overflow:hidden; isolation:isolate; margin-bottom:calc(-1 * var(--radius-xl)); background:var(--surface-canvas); color:var(--text-primary)}
/* restated: this unlayered rule would beat site.css's sticky */
:root[data-motion="on"] .brain-page .bb-hero{position:sticky; top:var(--stage-stick, 0px)}
.bb-hero > .stage__plate{position:absolute; inset:calc(-1 * var(--stage-plate-overscan)) 0; z-index:var(--layer-plate); pointer-events:none}
.bb-hero > .stage__plate img{width:100%; height:100%; max-width:none; object-fit:cover}
.bb-hero > .stage__veil{position:absolute; inset:0; background:var(--surface-canvas); opacity:0; pointer-events:none}
.brain-page .bb-hero{display:block; height:auto; min-height:0; padding:calc(var(--header-h) + clamp(22px, 7cqi, 48px)) var(--gutter-r) calc(var(--radius-xl) + clamp(36px, 9cqi, 64px)) var(--gutter-l)}
/* first-frame light: a 48x30 inline copy of the plate */
.bb-hero > .stage__plate{background:url(data:image/webp;base64,UklGRnAAAABXRUJQVlA4IGQAAADQAwCdASowAB4APpVGnUslo6KhpWmYsBKJQBOmZViSAmOyVib89vIA/vKQ330KEuE1Yr1mb4nbmUbA3gQSb51tg8tGFRRklzap1yGSYu7pHFPJbxgh4ga8M2E+W86HgUtTgAAA) 30% 50% / cover no-repeat}
.bb-hero > .stage__plate img{object-position:30% 50%}
.bb-hero > .stage__plate{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 18%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.42) 60%, #000 84%); mask-image:linear-gradient(to bottom, #000 0, #000 18%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.42) 60%, #000 84%)}
.brain-hero-copy{position:relative; z-index:var(--layer-copy); container-type:inline-size}
.brain-hero-copy h1{font-family:var(--font-display); font-weight:var(--weight-display); font-size:min(4.25rem, 10.4cqi); line-height:1.03; letter-spacing:var(--tracking-display); text-wrap:balance; color:var(--text-primary)}
.brain-hero-copy h1 .eyebrow{display:block; margin-bottom:clamp(14px, 4cqi, 22px); font-family:var(--font-mono); font-weight:var(--weight-medium); font-size:var(--text-eyebrow); line-height:1.4; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--text-primary)}
.brain-hero-copy .lead{margin-top:clamp(14px, 4cqi, 22px); max-width:34rem; font-size:var(--text-lead); line-height:1.5; color:var(--text-secondary); text-wrap:pretty}
.brain-hero-copy .answer{margin-top:clamp(14px, 4cqi, 22px); max-width:37rem; font-size:1rem; line-height:1.6; color:var(--text-primary); text-wrap:pretty}
.brain-hero-copy .actions{margin-top:clamp(18px, 5cqi, 30px)}
@container layout (max-width:430px){
  .brain-hero-copy .actions{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
  .brain-hero-copy .button{width:100%}
  .brain-hero-copy .text-link{justify-self:start}
}
@container layout (max-width:430px){ @media (max-height:700px){
  .brain-page .bb-hero{padding-top:calc(var(--header-h) + 10px)}
  .brain-hero-copy h1 .eyebrow{margin-bottom:10px}
  .brain-hero-copy .lead,.brain-hero-copy .answer{margin-top:10px}
  .brain-hero-copy .answer{line-height:1.5}
  .brain-hero-copy .actions{margin-top:14px}
} }
.bb-hero-set{position:relative; z-index:var(--layer-rig); margin-top:clamp(52px, 14cqi, 84px); --F:var(--hero-f, calc(100cqi - var(--gutter-l) - var(--gutter-r))); --ws:calc(var(--F) / 2.3)}
.bb-word{display:block; position:relative; z-index:0; margin:calc(var(--ws) * -.163) 0 0; text-align:right; font-family:var(--font-display); font-weight:var(--weight-stage); font-size:var(--ws); line-height:1; letter-spacing:var(--tracking-display); color:var(--text-primary); white-space:nowrap; pointer-events:none; user-select:none; -webkit-user-select:none}
.bb-word::before{content:"Brain"; margin-right:-.06em}
.bb-frame{position:relative; z-index:1; width:var(--F); margin:calc(var(--ws) * -.317) 0 0 auto}
.brain-hero-art{display:block; overflow:hidden; border-radius:var(--radius-xl); background:var(--surface-raised); aspect-ratio:3 / 2;
  box-shadow:0 0 0 1px rgba(44,40,37,.06)}
.brain-hero-art img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%}
.brain-hero-art{position:relative; z-index:1}
/* decorative images fade in once loaded (after load) */
.bb-light img:not(.is-loaded),.bb-hero > .stage__plate img:not(.is-loaded){opacity:0}
.bb-light img,.bb-hero > .stage__plate img{transition:opacity var(--dur-camera, 1440ms) var(--ease-brand)}
@media (prefers-reduced-motion:reduce){ .bb-light img,.bb-hero > .stage__plate img{transition:none} }
.bb-hero > .stage__veil{z-index:var(--layer-veil)}
.bb-hero > .stage__bank{position:absolute; inset:0; z-index:var(--layer-bank); pointer-events:none; display:none}
@container layout (max-width:430px){ .bb-hero-set{margin-top:22px; --ws:calc(var(--F) / 2.75)} }
@container layout (max-width:380px){ .bb-hero-set{margin-top:54px} }
@container layout (min-width:600px) and (max-width:899px){
  .bb-hero-set{max-width:640px; --F:640px}
}
@container layout (min-width:900px){ @media (min-aspect-ratio:1/1), (min-width:1025px){
  .brain-page .bb-hero{
    --hero-f:clamp(300px, calc(46cqi - 150px), 440px);
    display:grid; grid-template-columns:minmax(0,1fr) calc(var(--hero-f) * 1.2); grid-template-rows:auto auto; align-content:center; column-gap:clamp(40px, 5.5cqi, 104px);
    min-height:max(var(--stage-min), var(--stage-vh)); padding:calc(var(--header-h) + 28px) var(--edge) calc(var(--radius-xl) + 32px)}
  .bb-hero > .stage__plate{-webkit-mask-image:none; mask-image:none}
  .bb-hero > .stage__plate img{object-position:50% 50%}
  .bb-hero > .stage__plate{background-position:50% 50%}
  .bb-hero > .stage__bank{display:block; background:linear-gradient(90deg, rgba(250,250,249,.78) 0%, rgba(250,250,249,.55) 30%, rgba(250,250,249,0) 58%)}
  .brain-hero-copy{max-width:640px; grid-column:1; grid-row:1; align-self:end}
  .bb-hero-set{grid-column:2; grid-row:1 / span 2; align-self:center}
  .bb-hero > .byline{grid-column:1; grid-row:2; align-self:start; margin-top:28px}
  .brain-hero-copy h1{font-size:min(4.25rem, 10.4cqi, calc(var(--stage-vh) * .074))}
  .brain-hero-copy .answer{font-size:var(--text-body)}
  .bb-hero-set{margin:0; width:calc(var(--F) * 1.2); justify-self:end; --ws:calc(var(--F) / 1.9)}
}}
@container layout (min-width:1200px){ @media (min-aspect-ratio:1/1){
  .brain-page .bb-hero{--hero-f:calc(clamp(440px, calc(var(--stage-vh) - var(--header-h) - 250px), 640px) * .8)}
  .brain-hero-art{aspect-ratio:4 / 5}
} }
/* overlap on the hero's margin: site.css's -100vh hold margin would collapse it */
.bb-sheet{position:relative; z-index:var(--layer-sheet); overflow-x:clip; margin-top:0; padding:clamp(48px, 8cqi, 104px) var(--edge) var(--section-y-end);
  background:var(--surface-canvas); border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.bb-sheet > .group:first-child{margin-top:0}
/* byline: one quiet 12px line, secondary ink so it reads 4.5:1 or better on the hero's light; the float keeps
   "By Adaptius" and "Drafted" apart in the text */
.brain-page .byline{position:relative; z-index:var(--layer-copy); margin-top:clamp(20px, 5cqi, 28px); font-family:var(--font-body); font-size:.75rem; font-weight:var(--weight-regular); line-height:1.5; letter-spacing:0; color:var(--text-secondary); text-wrap:pretty}
.brain-page .byline strong{float:left; font-weight:var(--weight-regular); color:inherit}
.brain-page .byline br{display:none}
.brain-page .byline strong::after{content:" · " / ""; white-space:pre}
@container layout (max-width:430px){ .brain-page .byline{max-width:min(100%, 21.5em)} }
/* the sections' common rules and the first of them (What it holds), the first thing a scroll reveals */
.brain-page .group{margin-top:var(--section-y)}
.brain-page .group > h2{font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--text-h1); line-height:var(--leading-tight); letter-spacing:var(--tracking-display); text-wrap:balance; color:var(--text-primary); max-width:20ch}
.brain-page .group p:not(.display-word):not(.close__line){color:var(--text-secondary); font-size:var(--text-body); line-height:var(--leading-normal); text-wrap:pretty}
.brain-page .group strong{font-weight:var(--weight-semibold); color:var(--text-primary)}
.brain-page .group a{color:var(--text-primary); text-decoration-thickness:1px; text-underline-offset:3px}
.brain-page .group ul:not([class]){list-style:none; margin:0; padding:0}
.bb-light{position:absolute; z-index:-1; pointer-events:none; -webkit-mask-image:radial-gradient(closest-side, #000 40%, transparent 100%); mask-image:radial-gradient(closest-side, #000 40%, transparent 100%)}
.bb-light--compare{display:none}
.bb-light img{width:100%; height:100%; max-width:none; object-fit:cover}
#what-it-holds{isolation:isolate}
#what-it-holds > p:not([class]){margin-top:var(--space-5); max-width:38rem; font-size:var(--text-lead)}
.brain-holds-rail{counter-reset:bb-part; display:flex; gap:12px; margin:clamp(32px, 6cqi, 56px) calc(-1 * var(--edge)) 0; padding:6px var(--edge) 18px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--edge); overscroll-behavior-x:contain; scrollbar-width:none}
.brain-holds-rail::-webkit-scrollbar{display:none}
.brain-holds-rail > li{counter-increment:bb-part; flex:0 0 88%; scroll-snap-align:start; display:flex; flex-direction:column; min-width:0; margin:0;
  padding:clamp(20px, 4.5cqi, 40px); background:var(--warm-50); border-radius:var(--radius-lg); box-shadow:inset 0 0 0 1px var(--border-hairline)}
.brain-holds-rail > li::before{content:counter(bb-part, decimal-leading-zero) / ""; display:block; margin-bottom:clamp(14px, 2.4cqi, 22px); font-weight:var(--weight-stage); font-size:clamp(3.25rem, 2.3rem + 3.2cqi, 5.5rem); line-height:.8; letter-spacing:var(--tracking-display); color:var(--text-primary)}
.brain-holds-rail h3{font-weight:var(--weight-display); font-size:clamp(1.6rem, 1.15rem + 1.4cqi, 2.35rem); line-height:1.1; letter-spacing:var(--tracking-display); color:var(--text-primary)}
.brain-holds-rail p{margin-top:var(--space-3)}
.brain-holds-rail h3 + p{margin-top:var(--space-4); color:var(--text-primary)}
.brain-holds-rail .brain-part-example{margin-top:auto; padding:16px 18px 17px; border-radius:var(--radius-lg); background:var(--surface-raised); font-size:var(--text-small); line-height:1.55}
.brain-holds-rail > li > p:nth-of-type(2){margin-bottom:var(--space-5)}
.brain-part-label{display:block; margin-bottom:4px; font-family:var(--font-body); font-weight:var(--weight-semibold); font-size:var(--text-small); letter-spacing:0; text-transform:none; color:var(--text-primary)}
@container layout (max-width:430px){ .brain-holds-rail p{font-size:1rem} }
.brain-holds-rail:focus-visible{outline:2px solid var(--focus-ring); outline-offset:-2px}
.bb-light--parts{left:-6%; right:-6%; top:22%; bottom:-6%}
.bb-light--parts img{object-position:50% 50%}
.brain-holds-closing{margin-top:clamp(36px, 6cqi, 64px); max-width:62rem}
.brain-page .brain-holds-closing strong{display:block; margin-bottom:var(--space-3); font-weight:var(--weight-display); font-size:var(--text-statement); line-height:1.25; letter-spacing:var(--tracking-tight)}
@container layout (min-width:600px){
  .brain-holds-rail{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(14px, 1.8cqi, 24px); margin-inline:0; padding:0; overflow:visible}
  .brain-holds-rail > li:nth-child(4n+1),.brain-holds-rail > li:nth-child(4n){grid-column:span 7}
  .brain-holds-rail > li:nth-child(4n+2),.brain-holds-rail > li:nth-child(4n+3){grid-column:span 5}
}
@container layout (min-width:900px){
  #what-it-holds{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(40px, 5cqi, 96px); align-items:end}
  #what-it-holds > h2{grid-column:1}
  #what-it-holds > p:not([class]){grid-column:2; margin:0}
  #what-it-holds > .brain-holds-rail,#what-it-holds > .brain-holds-closing{grid-column:1 / -1}
  .brain-holds-closing{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(40px, 5cqi, 96px); align-items:baseline; max-width:none}
  .brain-page .brain-holds-closing strong{margin:0}
}
/* the guards hold from the first layout, so they live here; the rules they guard arrive with brand-brain-rest.css */
/* not drawn until the inline hold decision runs (released at 2.5s regardless) */
:root[data-js] .bb-build:not([data-decided]){visibility:hidden; animation:bb-release 0s 2.5s forwards}
@keyframes bb-release{to{visibility:visible}}
/* until brand-brain-close.css lands: copy in place, room held, set waiting */
:root[data-js]:not([data-close-ready]) #next-step .stage__set{display:none}
:root[data-js]:not([data-close-ready]) #next-step .close{min-height:min(78svh, 760px)}
:root[data-js]:not([data-close-ready]) #next-step .close__copy{padding:calc(var(--header-h) + 24px) var(--edge) 0}
/* with script the answers start closed (linked one opened by the head script; released if the toggles never come) */
:root[data-js] #questions-answered:not([data-ready]) .qa p{display:none}