/* Shared site stylesheet
   Extracted verbatim from inline <style>. Order is load-bearing:
   this file's rules are overridden by, and override, neighbours by document
   order alone. Do not reorder the <link> tags that reference it. */

/* ===== polish layer i1 · responsive foundation ===== */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden;}
img,svg,canvas{max-width:100%}
.wrap,.nav-in,.hero-in,.foot-in,.statement-in,.ribbon-in{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
@media(min-width:721px){.wrap,.nav-in,.hero-in,.foot-in,.statement-in,.ribbon-in{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
.nav-links a{min-height:36px;display:inline-flex;align-items:center}
/* mobile nav (all pages) */
.ham{display:none;background:none;border:1.5px solid var(--paper);border-radius:2px;padding:9px 12px;min-height:40px;cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--paper);align-items:center}
@media(max-width:960px){
.ham{display:inline-flex}
.nav-in{position:relative}
.nav-links{position:fixed;top:52px;left:0;right:0;background:var(--ink);border-bottom:1px solid #2e2d2a;flex-direction:column;align-items:stretch;padding:14px max(20px,env(safe-area-inset-left)) 22px;gap:2px;display:none;max-height:calc(100svh - 52px);overflow-y:auto}
.nav-links.open{display:flex}
.nav-links a{display:block;padding:13px 0;min-height:48px;border-bottom:1px solid #2e2d2a;font-size:13px}
.nav-links a:last-child{border-bottom:none}
.nav-links .nav-cta{margin-top:12px;text-align:center;padding:14px 18px;border-radius:2px}
}
@media(max-width:720px){
section{padding:56px 0}
header .hero-in{padding-top:112px;padding-bottom:52px}

.lede{font-size:16.5px}
.pull{font-size:19px;padding-left:16px;margin-top:28px}
.hero-ctas{gap:10px}
.hero-ctas .btn{text-align:center}
.grid2,.grid3,.grid4,.commissions,.begin-doors,.pgrid,.roles{gap:14px}
.card,.pcol,.comm,.bdoor,.role{padding:22px 20px}
.rrow{padding:18px 20px}
.seat .sn,.seat .sb{padding:20px}
}
/* the record band stacks and keeps its numerals at full size — see the
   ribbon block in pages/index.css, which owns its layout at every width */

/* ===== polish layer i2 · motion & microinteraction ===== */
:root{--ease:cubic-bezier(.22,.61,.36,1)}
/* scroll progress */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:60;transition:width .12s linear}
nav ~ #prog,#prog{top:0}
/* nav condenses on scroll */
nav{transition:padding .28s var(--ease),background .28s var(--ease)}
nav.cond .nav-in{padding-top:9px;padding-bottom:9px}
/* staggered reveals */
.rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{transition-delay:var(--d,0ms)}
/* card lift */
.card,.pcol,.role,.rrow,.seat,.era{transition:background .3s var(--ease),border-color .3s var(--ease)}
/* rule 3 · nothing lifts and nothing casts. Hover is a border-colour change. */
.card:hover,.pcol:hover,.role:hover{border-color:var(--ink)}
.rrow:hover{background:var(--paper-2)}
.seat:hover .sn{background:var(--ink)}
.seat:hover .sn h3{color:var(--paper)}
.seat:hover .sn .sk{color:#9b9992}
.seat .sn,.seat .sn h3,.seat .sn .sk{transition:background .28s var(--ease),color .28s var(--ease)}
/* buttons · rule 3 governs these too, with one addition: nothing reflows.
   Every hover below changes colour only. No letter-spacing, no transform, no
   padding, no border-width — the button occupies the identical box hovered and
   not, so pointing at one never shifts the one beside it.

   Two gestures, one idea (a button becomes more solid, never less):
     filled  → keeps its fill and seats a hairline ring just inside the edge
     outline → gains a fill

   The ring is two stacked inset shadows. The first paints the fill colour from
   the padding edge inward to the seat; the second paints the ring colour 1px
   further in and renders behind the first, so only that 1px shows. At rest the
   ring layer is set to the fill colour, which makes the ring present but
   invisible — hover then animates a colour, never a geometry. Inset shadows
   follow border-radius, so the ring is a pill inside the pill CTAs. */
.btn,nav .nav-cta{transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}

/* filled on the light plane: ink fill, paper ring */
.btn.primary{box-shadow:inset 0 0 0 3.5px var(--ink),inset 0 0 0 4.5px var(--ink)}
.btn.primary:hover{box-shadow:inset 0 0 0 3.5px var(--ink),inset 0 0 0 4.5px var(--paper)}
.btn.primary:active{box-shadow:inset 0 0 0 2.5px var(--ink),inset 0 0 0 3.5px var(--paper)}

/* filled on the dark plane: paper fill, ink ring. Covers the nav CTA and the
   paper-on-ink buttons inside .dark sections, whose fill is set inline and so
   cannot be reached by a background rule — the ring reaches them anyway. */
nav .nav-cta,.dark .btn:not(.ghost):not(.primary){box-shadow:inset 0 0 0 3.5px var(--paper),inset 0 0 0 4.5px var(--paper)}
nav .nav-cta:hover,.dark .btn:not(.ghost):not(.primary):hover{box-shadow:inset 0 0 0 3.5px var(--paper),inset 0 0 0 4.5px var(--ink)}
nav .nav-cta:active,.dark .btn:not(.ghost):not(.primary):active{box-shadow:inset 0 0 0 2.5px var(--paper),inset 0 0 0 3.5px var(--ink)}

/* outline: the fill arrives — the warm step the rest of the site already uses
   for .rrow and .stage hovers — and the ring comes with it, so both buttons in
   a CTA pair answer the pointer with the same gesture instead of swapping
   identities. Ink hairline against the arriving fill reads as the double rule
   the page uses everywhere else, not as a border doubling up on itself. */
.btn.ghost,.btn:not(.primary):not(.ghost){box-shadow:inset 0 0 0 3.5px transparent,inset 0 0 0 4.5px transparent}
.btn.ghost:hover,.btn:not(.primary):not(.ghost):hover{background-color:var(--paper-2);box-shadow:inset 0 0 0 3.5px var(--paper-2),inset 0 0 0 4.5px var(--ink)}
.btn.ghost:active,.btn:not(.primary):not(.ghost):active{background-color:var(--line);box-shadow:inset 0 0 0 2.5px var(--line),inset 0 0 0 3.5px var(--ink)}
/* the same pair inverted for outline buttons sitting on an ink section */
.dark .btn.ghost:hover{background-color:#26251f;box-shadow:inset 0 0 0 3.5px #26251f,inset 0 0 0 4.5px var(--paper)}
.dark .btn.ghost:active{background-color:#2e2d2a;box-shadow:inset 0 0 0 2.5px #2e2d2a,inset 0 0 0 3.5px var(--paper)}
/* text links get an animated underline.
   .role p joined the list for the privacy notice, the only page whose .role
   bodies carry links; solvers.html has none, so the addition changes no pixel
   there. */
.lede a:not(.btn),.hero-note a,article p a,.role p a{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .32s var(--ease);text-decoration:none;font-weight:600}
.lede a:not(.btn):hover,.hero-note a:hover,article p a:hover,.role p a:hover{background-size:100% 1.5px}
/* nav link underline */
.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
@media(max-width:960px){.nav-links a::after{display:none}}
/* evlos stage hover */
.stage{transition:background .28s var(--ease)}
.stage:hover{background:var(--paper-2)}
@media(prefers-reduced-motion:reduce){
.rv{transition:none!important;transition-delay:0ms!important}
#prog{transition:none}
/* the hover states themselves stay — only the tween goes. A reduced-motion
   reader still needs to see which control is under the pointer. */
.btn,nav .nav-cta{transition:none}
}

/* ===== polish layer i3 · typographic craft ===== */
h1,h2,h3,.rn,.rs,.ov,.hero-word{font-feature-settings:"kern" 1,"liga" 1,"calt" 1;font-kerning:normal}
body{font-feature-settings:"kern" 1,"liga" 1}
.lede,article p,.card p,.role p,.seat .sb p{hanging-punctuation:first last;text-wrap:pretty}
h1,h2{text-wrap:balance;hyphens:none}
/* optical alignment of mono eyebrows */
.ch-eyebrow,.eyebrow,.kicker{font-variant-numeric:tabular-nums}
.rn,.rs,.ov,.stat-n{font-variant-numeric:tabular-nums lining-nums}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.dark :focus-visible,nav :focus-visible{outline-color:var(--paper)}
/* section rhythm: consistent vertical scale */
section{padding-block:clamp(56px,7.4vw,92px)}
h2{margin-bottom:clamp(16px,1.6vw,22px)}
.lede+.lede{margin-top:clamp(12px,1.2vw,16px)}
/* rules hairline crispness on retina */
@media(min-resolution:2dppx){
section,nav,footer,.rrow,.seat,.stage,.card{border-width:.5px}
}
/* dark-section link legibility */
.dark a:not(.btn){color:var(--paper)}
/* print refinement */
@media print{#prog,.ham{display:none!important}a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}}
/* scrollbar (webkit) */
@supports selector(::-webkit-scrollbar){
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:#8a877e;border-radius:0;border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-mute)}
}

/* ===== lockup (V14 master artwork) ===== */
/* The lockup is the vendor's drawn wordmark, painted through a mask rather than
   embedded as an image. mask-image + background-color:currentColor is the design
   system's own doctrine: one cached file serves the ink nav and the paper footer,
   because the artwork takes the colour of whatever plane it sits on. A background-image
   would paint literal black ink and disappear on the dark bar. */
.lockup{display:inline-block;height:19px;aspect-ratio:1571.12/299.31;background-color:currentColor;
-webkit-mask:url(/assets/brand/futurify-wordmark.svg) no-repeat center/contain;
mask:url(/assets/brand/futurify-wordmark.svg) no-repeat center/contain}
nav .logo-link{gap:0;color:var(--paper)}
footer .lockup{height:17px}
@media(max-width:720px){.lockup{height:17px}}
/* nav CTA: solid, high contrast, unmissable */
nav .nav-cta{background:var(--paper);color:var(--ink)!important;border-color:var(--paper);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:10px 16px;white-space:nowrap}
nav .nav-cta::after{display:none}
/* hover lives with the rest of the button system above. It used to empty the
   pill out to transparent, which made the nav's only action read as switched
   off at the exact moment the pointer reached it. */
@media(max-width:1060px) and (min-width:961px){nav .nav-links{gap:14px}nav .nav-links a:not(.nav-cta){font-size:11px}}

/* ===== finesse layer r2 ===== */
/* 1 · optical margins: pull display type left to align stems, not boxes */
h1,h2{margin-left:-0.035em}
.pull{margin-left:0}

.lede{letter-spacing:-0.004em}
.ch-eyebrow,.eyebrow,.kicker,.k,.sk,.rl,.pk{letter-spacing:.15em}

article p{max-width:66ch}
.card p,.role p,.seat .sb p{max-width:52ch}
/* 4 · edge treatment: sections meet with hairlines, not gaps */
section+section{border-top:1px solid var(--line)}
.film+section,.ribbon+section{border-top:none}
/* 5 · numerals as a design element */
.rn,.rs,.ov{font-feature-settings:"tnum" 1,"lnum" 1}
.rn sub,.rs sub{font-size:.5em;letter-spacing:0;vertical-align:baseline;margin-left:1px;opacity:.75}
/* 6 · quiet depth: cards read as paper, not boxes */
/* 7 · the ribbon: give numbers room to breathe */
.ribbon-in{padding-block:clamp(22px,2.8vw,34px)}
.rv-stat{gap:6px}
/* 8 · dark sections get a hairline top edge in paper, not line */
.dark{border-top-color:#2e2d2a}
/* 9 · signature interaction: section markers draw in on reveal */
.ch-eyebrow .ffsym{transform:translateX(-4px);opacity:0;transition:transform .5s var(--ease) .1s,opacity .5s var(--ease) .1s}
.rv.on .ffsym,.ch-eyebrow.on .ffsym{transform:none;opacity:1}
.ch-eyebrow:not(.rv) .ffsym{transform:none;opacity:1}
/* 10 · focus and hover never both fire on touch */
@media(hover:none){
.card:hover,.pcol:hover,.role:hover{border-color:var(--line)}
.seat:hover .sn{background:var(--paper-2)}
.seat:hover .sn h3{color:var(--ink)}
}
/* 11 · text balance for short headings only (avoid ragged long ledes) */
h1,h2,h3,.film-copy h2{text-wrap:balance}
/* 12 · smooth the film seam into the section below */
.film{border-bottom:none}

/* ===== premium layer r3 ===== */
/* 1 · page enters composed, not blank-then-pop */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .5s var(--ease) both}
/* 2 · nav: glass over content, solid at top (depth without decoration) */

/* 3 · selection in dark sections stays legible */
.dark ::selection,nav ::selection,.film ::selection{background:var(--paper);color:var(--ink)}
/* 4 · the hairline that signals craft: 1px rules become gradients at section joins */
section{position:relative}
section::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--line);pointer-events:none}
.dark::before,.film::before{background:#2e2d2a}
section:first-of-type::before{display:none}
/* 5 · buttons: hover is a colour change, defined once in the button system near
   the top of this file. The "weight shift" that used to live here tweened
   letter-spacing from .09em to .005em, which is a 22px width collapse on the
   hero CTA — the button shrank under the cursor and shoved "Book a 30-minute
   call" sideways on every pass. will-change:transform went with it: it held a
   compositor layer open on every button for a transform none of them run. */
/* 6 · the record band takes its reading once, when it comes into view: the
   numbers rise, then each measure is stroked left to right across the rule.
   One gesture, three tiles, 90ms apart. */
.ribbon .rn{opacity:0;transform:translateY(8px);animation:none}
.ribbon.seen .rn{animation:statIn .6s var(--ease) forwards}
.ribbon.seen .rv-stat:nth-child(2) .rn{animation-delay:.07s}
.ribbon.seen .rv-stat:nth-child(3) .rn{animation-delay:.14s}
@keyframes statIn{to{opacity:1;transform:none}}
.ribbon .rmeasure{clip-path:inset(0 100% 0 0)}
.ribbon.seen .rmeasure{animation:measureIn .8s var(--ease) .12s forwards}
.ribbon.seen .rv-stat:nth-child(2) .rmeasure{animation-delay:.21s}
.ribbon.seen .rv-stat:nth-child(3) .rmeasure{animation-delay:.3s}
/* -2px right so the landing tick is never clipped by subpixel rounding */
@keyframes measureIn{to{clip-path:inset(0 -2px 0 0)}}
/* 7 · anchor offset so headings never hide under the fixed nav */
:target,section[id]{scroll-margin-top:76px}
/* 8 · images and video never jump */
img,video{background:var(--paper-2)}
.film video{background:var(--ink)}
/* 9 · disable all of the above for reduced motion */
@media(prefers-reduced-motion:reduce){
body{animation:none}
.ribbon .rn{opacity:1;transform:none;animation:none!important}
.ribbon .rmeasure{clip-path:none;animation:none!important}
.ch-eyebrow .ffsym{opacity:1;transform:none;transition:none}
}
/* 10 · print: the film and progress bar vanish, type goes serif-crisp */
@media print{.film,#prog{display:none!important}}

/* ================= BRAND BOOK V1 · applied ================= */
:root{
/* The brand's two tones, verbatim from design-system/tokens/colors.css. The block
   header above says "BRAND BOOK V1 · applied", but the values here were #ffffff and
   #000000 — the two the book names as banned. The warm pair was already authored
   correctly in five page sheets and overridden by this line on every one of them. */
--paper:#faf9f6;--paper-2:#f2f0ea;--ink:#111110;--ink-soft:#3d3c38;--line:#dcd9d0;
}

/* Display · Space Mono sentence case, tracking -60 */
h1,.film-copy h2{font-family:var(--disp);font-weight:700;letter-spacing:-0.055em;line-height:1.02}
h2{font-family:var(--disp);}
h3{font-family:var(--head);}
/* Subhead · Space Mono, tracking -30 */
.hero-sub,.lede:first-of-type{letter-spacing:-0.005em}
.pull,.hero-lines{font-family:var(--disp);font-weight:700;letter-spacing:-0.03em}
/* Overline · Space Mono uppercase, tracking 70 */
.ch-eyebrow,.eyebrow,.kicker,.card .k,.seat .sk,.rl,.pcol .pk,.comm .ck,.bdoor .bk,.role .rk,.stage .nm,.desc,.provenance,.film-copy p{font-family:var(--mono);text-transform:uppercase;letter-spacing:.07em;font-weight:400}
/* numerals: display weight, tabular */
.rn,.rs,.ov,.stat-n,.era .when{font-family:var(--disp);font-weight:700;letter-spacing:-0.05em;font-variant-numeric:tabular-nums lining-nums}
/* buttons: mono uppercase per book */
.btn,.nav-cta{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:12.5px}
.btn{padding:15px 24px}
/* body copy */
/* 350 had no matching face: Manrope is served here as static instances
   (300;400;500;600;700), so the browser silently picked one of its neighbours. */
.lede,.card p,article p,.seat .sb p,.role p,.faq details p,.hero-sub{font-family:var(--body);font-weight:400;letter-spacing:.012em}
.lede strong,article p strong,.card p strong{font-weight:600}
/* rules and borders go crisp in pure monochrome */
.dark{background:var(--ink)}
nav{background:var(--ink)}
nav.cond{background:var(--ink)}
mark{box-shadow:inset 0 -0.42em 0 0 #e7e3d8}
::selection{background:var(--ink);color:var(--paper)}

h1,h2,h3,.pull,.hero-lines,.film-copy h2,.rn,.rs,.ov,.stage .ltr{font-family:var(--disp);text-transform:none}

/* label voice keeps the brand book overline spec */
.ch-eyebrow,.eyebrow,.kicker,.desc,.k,.sk,.rl,.pk,.rrow .st,.stage .nm,.stage .gate,.nav-links a,.btn,.film-copy p,.ef .cap{font-family:var(--mono);}

/* body copy */
.lede,.hero-sub,.card p,.role p,.seat .sb p,article p,.way li,.pcol p,.comm p,.bdoor p,.faq details p,.ethos-two p,.provenance,footer .legal,.hero-note,.byline{font-family:var(--body);letter-spacing:.005em;text-transform:none}

.provenance,footer .legal,.hero-note,.byline{font-family:var(--mono);}

.faq summary{font-family:var(--disp);font-weight:600;letter-spacing:-0.015em}
@media(max-width:720px){h1{}h2{}}

/* ============================================================
   TYPE SYSTEM · restored original (final)
   Display : Space Grotesk 600     Body : Manrope     Label : IBM Plex Mono
   From Studio Carreras Brand Book V1 we take the mark, the symbol,
   the palette and the motion doctrine. Typography stays as built.
   ============================================================ */
:root{
--disp:'Space Mono',ui-monospace,monospace;
--body:'Manrope',system-ui,-apple-system,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
}
body{font-family:var(--body);letter-spacing:0;font-weight:400;font-size:clamp(16px,.55vw + 14.6px,17.5px)}
h1,h2,h3,.pull,.hero-lines,.film-copy h2,.rn,.rs,.ov,.stage .ltr,.faq summary{font-family:var(--disp);text-transform:none}
h1{letter-spacing:-0.025em;font-size:clamp(32px,5.6vw,64px);max-width:19ch;margin-left:-0.03em}
h2{font-weight:600;letter-spacing:-0.02em;line-height:1.12;font-size:clamp(26px,3.8vw,42px);max-width:26ch;margin-left:-0.025em}
h3{font-weight:600;letter-spacing:-0.012em;font-size:clamp(16.5px,1.9vw,18.5px)}
.pull{font-weight:500;letter-spacing:-0.015em;font-size:clamp(20px,2.4vw,26px);line-height:1.3;max-width:36ch}
.film-copy h2{font-weight:600;letter-spacing:-0.022em;max-width:20ch}
.hero-lines{font-weight:600;letter-spacing:-0.015em}
/* label voice: IBM Plex Mono, brand book overline tracking retained */
.ch-eyebrow,.eyebrow,.kicker,.desc,.k,.sk,.rl,.pk,.rrow .st,.stage .nm,.stage .gate,.nav-links a,.btn,.film-copy p,.ef .cap,.provenance,footer .legal,.hero-note,.byline{font-family:var(--mono)}
.ch-eyebrow,.eyebrow,.kicker,.desc,.k,.sk,.rl,.pk,.rrow .st,.stage .nm,.stage .gate,.nav-links a,.btn,.film-copy p,.ef .cap{letter-spacing:.13em;text-transform:uppercase}
.provenance,footer .legal,.hero-note,.byline{letter-spacing:.02em;text-transform:none}
.btn{font-weight:600;font-size:13px;letter-spacing:.09em}
.nav-links a{font-size:12px;letter-spacing:.1em}
/* body copy */
.lede,.hero-sub,.card p,.role p,.seat .sb p,article p,.way li,.pcol p,.comm p,.bdoor p,.ethos-two p{font-family:var(--body);letter-spacing:0;text-transform:none}
.lede{font-size:clamp(16.5px,1.85vw,19px);line-height:1.65;max-width:64ch}
.hero-sub{font-size:clamp(17px,2vw,19.5px);line-height:1.62}
.rn,.rs,.ov{font-weight:700;letter-spacing:-0.025em;font-variant-numeric:tabular-nums lining-nums}
@media(max-width:720px){h1{font-size:clamp(30px,8.2vw,44px);max-width:20ch}h2{font-size:clamp(23px,6.2vw,32px)}}

/* ===== brand book lockup (official geometry) ===== */
.logo-link{display:inline-flex;align-items:center;font-size:16px;line-height:1;text-decoration:none;gap:.433em}
.ffmark{height:1.2em;width:1.2em;flex:none;fill:currentColor;transform:translateY(-0.045em)}
.wordmark{font-family:'Space Mono',monospace;font-weight:700;font-size:1em;letter-spacing:0;text-transform:uppercase;line-height:1;color:currentColor}
nav .logo-link{color:var(--paper);font-size:15px}
footer .logo-link{color:var(--ink);font-size:14px}
@media(max-width:720px){nav .logo-link{font-size:13.5px}}
/* section marker glyph inherits the official geometry */
.ffsym{fill:currentColor;stroke:none}

/* ===== reviewer-test layer A ===== */
/* 1 · SQUINT TEST: one dominant element per viewport. Raise H1 weight, calm competing type */
h1{font-weight:600;line-height:1.02}
.statement h1{max-width:16ch}
.hero-sub,.lede{font-weight:400}
/* opacity:.82 over --ink-mute rendered as 3.45:1 against paper. The token is already
   the muted step and clears AA at 4.92:1 on its own; fading it again undid that. */
.hero-note{opacity:1}
/* 2 · FIVE-SECOND TEST: the descriptor must read before anything else */
.statement .desc{font-weight:700;color:var(--ink)}
.statement .desc .ffsym{height:1em}
/* 3 · THUMB TEST: primary actions sit in reach on mobile, never edge-locked */
@media(max-width:720px){
.hero-ctas{flex-direction:column;align-items:stretch}
.hero-ctas .btn{width:100%;padding:16px 22px;font-size:16px}
.statement-in{padding-bottom:44px}
}
/* 4 · CONTRAST: every muted tone lifted to pass WCAG AA on paper and ink */
:root{--ink-mute:#6f6d66}
.dark .lede,.film-copy p{color:#c9c7bf}
.rl,.ol,.sk,.k,.pk{color:#6f6d66}
.dark .rl,.ribbon .rl{color:#9b9992}
.nav-links a{color:#c9c7bf}
/* 5 · CONSISTENCY: one spacing scale, one radius, one border colour */
:root{--r:2px;--s1:8px;--s2:14px;--s3:22px;--s4:34px;--s5:56px}
.card,.pcol,.comm,.bdoor,.role,.seats,.rec-table,.evlos,.ways,.phases{border-radius:var(--r)}
.btn,.chip,.nav-cta{border-radius:var(--r)}
/* small-caps kickers get identical rhythm everywhere */
.ch-eyebrow,.eyebrow{margin-bottom:var(--s2)}
h2+.lede{margin-top:0}

/* ===== reviewer-test layer B ===== */
/* 6 · ABOVE FOLD: the hero compresses so CTA + proof line are visible on a laptop */
@media(min-width:961px) and (max-height:900px){
/* the hero keeps the full first screen it claims in index.components.css;
   only its internal padding gives, so the CTA and the proof line stay above
   the fold on a laptop */
.hero .statement-in{padding-block:clamp(40px,5.4svh,72px)}
.statement-in{padding-top:44px;padding-bottom:40px}
}
/* Shorter laptop windows again: the copy alone is most of the screen by now, so
   the hero's internal padding gives a second time rather than letting the proof
   line slide under the fold. Below roughly 660px of viewport the text is taller
   than the space whatever the padding does, and the note wraps past the fold —
   that is the floor of this approach, not a value worth tuning further. */
@media(min-width:961px) and (max-height:780px){
.hero .statement-in{padding-block:clamp(18px,3svh,40px)}
}
/* 7 · SCANNABILITY: chapter numbers anchor the F-pattern scan */
.ch-eyebrow{align-items:center}
.ch-eyebrow::after{content:"";flex:1;height:1px;background:var(--line);margin-left:4px;max-width:140px}
.dark .ch-eyebrow::after{background:#2e2d2a}
/* 8 · TRUST DENSITY: the guarantee and proof strip get weight near decision points */
.ribbon{border-bottom:1px solid #2e2d2a}
.gate p strong,.promise strong{font-weight:700}
/* 9 · PACING: alternate light and dark with air, never two dark blocks adjacent */
.dark+.dark{border-top:1px solid #2e2d2a}
/* 10 · CTA PROMINENCE: primary buttons read as the page's only true affordance */
.btn.ghost{background:transparent}
.hero-ctas .btn+.btn{margin-left:0}
/* mid-page CTA band reads as a pause, not a banner */
/* 11 · FAQ affordance: rows feel clickable */
.faq summary{padding-inline:2px}
/* 12 · footer closes the page rather than trailing off */
footer{background:var(--paper-2)}
.foot-in{align-items:flex-start}
footer .legal{line-height:1.7}

/* ===== reviewer-test layer C ===== */
/* 13 · optical centring of the mark inside circular/again-square contexts */
.ch-eyebrow .ffsym{height:.78em;width:.78em;flex:none}
.film-copy p .ffsym{height:.85em;width:.85em}
/* 14 · widow control on short display lines */
h1,h2,h3,.pull{text-wrap:balance}
.hero-lines{text-wrap:balance}
/* 15 · consistent focus ring across light and dark.
   Longhands, deliberately. `outline` is a shorthand, so writing it here reset
   outline-color to currentColor and silently defeated the dark-plane override at rule 8
   above — which left a white ring on white paper around every primary CTA. */
a:focus-visible,button:focus-visible,summary:focus-visible{outline-width:2px;outline-style:solid;outline-offset:3px}
/* 16 · no orphaned hover states on keyboard nav */
.card:focus-within{border-color:var(--ink)}
/* 17 · selection colour never inverts illegibly inside the film */
.film ::selection{background:var(--paper);color:var(--ink)}
/* 18 · reduce motion honours everything added in A/B/C */
/* 19 · dark mode preference: keep the brand deliberate, never auto-invert */
@media(prefers-color-scheme:dark){:root{color-scheme:light}}
/* 20 · print: the FAQ opens fully */
@media print{.faq details{open:true}.faq details p{display:block!important}}

/* Skip link.
   Was an inline style plus onfocus/onblur handlers, which meant it could only
   appear when scripting was available and would have forced 'unsafe-inline'
   into any Content-Security-Policy. Same declarations, now a class. */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100}
.skip-link:focus{left:12px}
/* The skip target must not draw a focus ring of its own when jumped to. */
main:focus{outline:none}

/* ============================================================
   BRAND TYPE · Brand Book V1, applied
   Space Mono is the brand voice: display, subhead, eyebrow, stat figures.
   Manrope carries body AND the UI/docs headings — the role Space Grotesk used
   to hold, because a monospace at 18.5px shouts in dense UI.
   IBM Plex Mono stays the instrument voice: tables, data labels, utility chrome.

   The family ships 400 and 700 ONLY. There is no 500 and no 600, so hierarchy
   comes from size, measure and tracking, never from weight — and bold is spent
   on figures alone, which makes a number the loudest thing on a page.

   This block is last in the file on purpose: it has to beat ~30 rules in the
   page sheets that ask var(--disp) for a weight Space Mono cannot render.
   The two *.late.css sheets load after this one and are patched at source.
   ============================================================ */
:root{--head:'Manrope',system-ui,-apple-system,sans-serif}

/* Marketing display — tracking pulls in three times harder than before
   (-0.06em against Space Grotesk's -0.02em). The even advance of a monospace
   is what lets it take that much negative tracking without letterforms
   colliding; on a proportional face this would be unreadable. */
h1,h2,.film-copy h2,.hero-lines,.headword{font-family:var(--disp);font-weight:400;letter-spacing:-0.06em}
/* Subhead */
.pull{font-family:var(--disp);font-weight:400;letter-spacing:-0.03em}
/* Stat figures — the one place bold is spent. Tabular so columns do not shift. */
.rn,.rs,.ov,.stat-n,.facts .fv,.practice .pn,.phase .po .ov,.stage .ltr{font-family:var(--disp);font-weight:700;font-variant-numeric:tabular-nums lining-nums}
/* UI and docs headings — Manrope, where weight is available and legitimate. */
h3,.card h3,.role h3,.door h3,.era h3,.practice h3,.phase .pn h3,.seat .sn h3,
.way .verdict,.crow.hd>div,.vrow .vt,.defbox .hw,.faq summary,article h2{font-family:var(--head);font-weight:600}
/* article h2 is a docs heading, not a marketing one; it takes Manrope's tracking. */
article h2,.defbox .hw{letter-spacing:-0.02em}
/* Eyebrow — book tracking is 70, i.e. +0.07em. The site had drifted to +0.13em. */
.ch-eyebrow,.eyebrow,.kicker,.desc,.k,.sk,.rl,.pk,.rrow .st,.stage .nm,.stage .gate{font-family:var(--disp);letter-spacing:.07em}
/* Body — 17px on 1.62, tracked +0.03em (book: Body text, tracking 30). */
body{font-size:17px;line-height:1.62;letter-spacing:.03em}
.lede,.hero-sub,.card p,.role p,.seat .sb p,article p,.way li,.pcol p,.ethos-two p{letter-spacing:.03em}

/* rule 2 · full pill on the marketing CTA and nothing else. .chip and .card keep 2px;
   the utility controls on start.html keep 0. Specificity beats the page sheets' plain
   .btn and .nav-cta, including the two *.late.css that load after this file. */
.btn.primary,nav .nav-cta{border-radius:9999px}

/* justified body text.
   hyphenate-limit-chars is what keeps this readable. Left to itself the browser
   will split anything two characters long, and at the 52ch measure .card p and
   .seat .sb p run at, that produced out-comes, be-ing, veri-fied and
   in-telligence on /join alone. 8 4 4 means: only hyphenate words of 8+
   characters, and never leave fewer than 4 on either side. Fewer, cleaner
   breaks also means fewer lines that can only be justified by stretching the
   word gaps, which is the river problem this was reported for.
   text-wrap:pretty is restated here so the whole justified set carries it
   explicitly. In practice this changes exactly one selector: every page sheet
   already declares a bare `p{text-wrap:pretty}` (index.css:12, join.css:12,
   section.css:12, article.css:11, start.css:16, business-engineering.css:7),
   so the twelve paragraph selectors below were already covered by element type.
   `.rrow .fn small` is a <small>, matched no bare-p rule, and was computing
   `wrap`. It is not decorative on justified text -- CSS Text 4 has the UA
   minimise inter-word spacing variance under `pretty`, which is the same defect
   hyphenate-limit-chars attacks from the other side. Stated on the group rather
   than left to six page sheets so it cannot drift page by page. */
.lede,.hero-sub,.card p,.pcol p,.role p,.seat .sb p,.rrow .fn small,article p,.comm p,.bdoor p,.phase .pb p,.provenance,.osnote{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4;text-wrap:pretty}
/* .hero-lines is a display-face block inside the justified .hero-sub, so it
   inherited the justification and its hard-broken opening line got stretched to
   the full measure. It belongs with .pull, not with body copy. */
h1,h2,h3,h4,.pull,.hero-lines,.desc,.eyebrow,.ch-eyebrow,.kicker,.rn,.rs,.rl,.st,.k,.sk,.pk,.film-copy p,.legal,.footgrid a,.nav-links a,.btn,.chip,.hero-note,.byline,.gate{text-align:left;hyphens:none}
@media(max-width:620px){.lede,.hero-sub,.card p,.pcol p,article p{text-align:left;hyphens:none}}