/* FieldMatrix landing page: base layer (E0).
   Tokens, reset, type scale, layout grid, shared components, nav, chapter bar,
   scene frame and reduced-motion rules. Section files start every selector with #<id>.
   Motion rule: only transform and opacity animate. No filter, backdrop-filter, box-shadow, clip-path. */

/* ---------- 0a. Webfonts, self-hosted (site/fonts/, see fonts/README.txt) ----------
   The latin subsets Google Fonts serves for exactly the weights the page uses, declared the way Google's own
   CSS declares them (one rule per weight, same unicode-range), so every weight resolves as it did before.
   Each family is one variable file shared by its weights. index.html preloads Space Grotesk and Instrument Sans
   (the hero's H1, subline and buttons), so they usually land before the hero's reveal; JetBrains Mono (small
   labels) loads when first used. font-display:swap: until a face lands, the matched fallback faces below show. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/space-grotesk-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:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/space-grotesk-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:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-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:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/instrument-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:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../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}

/* ---------- 0b. Metric-matched fallback faces ----------
   Until the webfonts arrive, text is set in a local Arial / Consolas scaled and re-spaced to the webfont's
   own metrics, so the swap does not move or re-wrap the text (the hero H1 lines stay within ~1% of width).
   Measured in Chrome against these faces (qa/E0/r3/fontmetrics.cjs; re-checked self-hosted, qa/polish-E0/fout.cjs):
     Space Grotesk    ascent .984  descent .292  line gap 0    widths vs Arial Bold (600) x0.998, vs Arial (500) x1.078
     Instrument Sans  ascent .970  descent .250  line gap 0    widths vs Arial (400) x1.010, vs Arial Bold (600) x0.973
   The overrides are divided by size-adjust, because size-adjust scales them too. Each face spans a weight
   range, so no bold is ever synthesized. Where Arial is not installed (most Android) the local() source
   fails and the next family in the stack is used, as before.
     JetBrains Mono   ascent 1.02  descent .300  line gap 0    advance .600em = Consolas (.5498em) x1.0913
   Only fonts the page falls back to anyway are used (Arial, Arial Bold, Consolas on Windows): an extra local font
   file (Courier New) cost the first layout ~20ms more (qa/E0/r3/loadtrace.cjs). Where Consolas is missing (macOS,
   Android) the mono stack falls to Menlo / the system mono, whose advance is already ~.6em. */
@font-face{font-family:"SG Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 1000;
  size-adjust:99.8%;ascent-override:98.6%;descent-override:29.3%;line-gap-override:0%}
@font-face{font-family:"SG Fallback";src:local("Arial"),local("ArialMT");font-weight:1 549;
  size-adjust:107.8%;ascent-override:91.3%;descent-override:27.1%;line-gap-override:0%}
@font-face{font-family:"IS Fallback";src:local("Arial"),local("ArialMT");font-weight:1 549;
  size-adjust:101%;ascent-override:96%;descent-override:24.8%;line-gap-override:0%}
@font-face{font-family:"IS Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 1000;
  size-adjust:97.3%;ascent-override:99.7%;descent-override:25.7%;line-gap-override:0%}
@font-face{font-family:"JB Fallback";src:local("Consolas");font-weight:1 1000;
  size-adjust:109.13%;ascent-override:93.5%;descent-override:27.5%;line-gap-override:0%}

/* ---------- 1. Tokens (SPEC 2.1-2.3) ---------- */
:root{
  /* night (default surface) */
  --night:#0A0D0B;
  --night-2:#111612;
  --night-3:#171D18;
  --hair:#1F2620;
  --hair-2:#2C352D;
  --ink:#ECEADE;
  --ink-2:#B3B9A9;
  --ink-3:#8C9386;
  /* semantic, one meaning each */
  --lime:#D8FF7A;
  --amber:#E0AD45;
  --clay:#E08A6D;
  --water:#7DB0DD;
  --green:#7FC48A;
  --brand:#2F5D34;
  /* dawn + morning */
  --dawn:#1B1A12;
  --paper:#F4F3ED; --paper-2:#FDFDFB; --hair-p:#E3E2D8;
  --ink-p:#20241E; --ink-p2:#5C6156; --ink-p3:#62675C;
  --lime-soft:rgba(216,255,122,.16);
  --scrim:linear-gradient(180deg,rgba(10,13,11,.0),rgba(10,13,11,.85));

  /* type families (the app's own three) */
  --f-display:"Space Grotesk","SG Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-sans:"Instrument Sans","IS Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono","JB Fallback",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* spacing (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  /* radius */
  --r-bar:2px; --r-btn:12px; --r-card:16px; --r-frame:18px;
  /* layout */
  --wrap:1320px;
  --gutter:clamp(16px,5vw,72px);
  --gap:24px;
  --nav-h:64px;
  --bar-h:28px;
  --top-safe:calc(var(--nav-h) + var(--bar-h));      /* room a sticky scene leaves for nav + chapter bar */
  --sec-pad:clamp(96px,14vh,160px);
  --stage-h:min(72svh,640px);
  /* easing for CSS transitions (GSAP eases are named in JS) */
  --ease-out:cubic-bezier(.16,1,.3,1);                /* ~expo.out */
  --ease-inout:cubic-bezier(.65,0,.35,1);             /* ~power3.inOut */
  /* z scale (mirrors FM.z). Sections stay below 100. */
  --z-base:0; --z-stage:1; --z-overlay:10; --z-caption:20; --z-nav:100; --z-chapterbar:101; --z-skip:110;

  /* surface-aware aliases: night by default, remapped under [data-bg=paper] */
  --bg:var(--night); --bg-2:var(--night-2); --bg-3:var(--night-3);
  --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3);
  --line:var(--hair); --line-2:var(--hair-2);
  --focus:var(--lime);
  color-scheme:dark;
}
@media (max-width:759px){ :root{ --gap:16px; --bar-h:2px; } }
/* Shorter page on narrow screens (SPEC 0 shape): the unpinned sections' padding. The desktop value left ~290px of
   empty night between two sections on a 768x1024 tablet and ~150px (18% of the screen) on a 390x844 phone;
   these keep about 200px and 120px (qa/polish-E0/seams.cjs). */
@media (max-width:1099px){ :root{ --sec-pad:clamp(80px,10vh,120px); } }
@media (max-width:519px){ :root{ --sec-pad:clamp(56px,7vh,96px); } }
@supports not (height:1svh){ :root{ --stage-h:min(72vh,640px); } }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;background:var(--night)}
body{margin:0;overflow-x:clip;min-height:100vh;background:var(--night);color:var(--ink);
  font:400 1.125rem/1.55 var(--f-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.1;letter-spacing:-.02em}
b,strong{font-weight:600}
img,picture,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
summary{cursor:pointer}
[hidden]{display:none !important}
::selection{background:var(--lime);color:var(--night)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
[tabindex="-1"]:focus{outline:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- 3. Type (SPEC 2.2) ---------- */
.display-xl{font-family:var(--f-display);font-weight:600;font-size:clamp(2.6rem,9vw,8.5rem);line-height:.92;letter-spacing:-.05em}
.display-xl .l2{color:var(--fg-2)}   /* hero H1: line 1 ink, line 2 ink-2 */
.display-l{font-family:var(--f-display);font-weight:600;font-size:clamp(2.4rem,6vw,5.5rem);line-height:.95;letter-spacing:-.045em}
.h2{font-family:var(--f-display);font-weight:600;font-size:clamp(2rem,4vw,3.75rem);line-height:1;letter-spacing:-.04em}
.display-m{font-family:var(--f-display);font-weight:500;font-size:clamp(1.75rem,3.4vw,3.25rem);line-height:1.12;letter-spacing:-.03em}
.h3{font-family:var(--f-display);font-weight:600;font-size:1.5rem;line-height:1.2;letter-spacing:-.02em}
.readout{font-family:var(--f-mono);font-weight:500;font-size:clamp(3rem,8vw,7rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.readout-s{font-family:var(--f-mono);font-weight:500;font-size:clamp(1.75rem,3.5vw,2.75rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* max-width 30.6em = 46ch of Instrument Sans ("0" is .666em). Not in ch: ch follows whichever font is showing,
   so a ch cap shrinks ~16% while the fallback shows and the lines re-wrap when the webfont arrives. */
.sub{font-family:var(--f-sans);font-weight:400;font-size:clamp(1.125rem,1.4vw,1.3rem);line-height:1.5;max-width:30.6em;color:var(--fg-2)}
.body{font-family:var(--f-sans);font-weight:400;font-size:1.125rem;line-height:1.55}
.caption{font-family:var(--f-sans);font-weight:400;font-size:1.25rem;line-height:1.35}
.label,.slate,.eyebrow{font-family:var(--f-mono);font-weight:500;font-size:.875rem;line-height:1.35;letter-spacing:.14em;text-transform:uppercase}
.slate,.eyebrow{color:var(--fg-2)}
/* demo / estimate notes: the honesty labels, so 13px (14px on desktop), never the old 12px */
.footnote{font-family:var(--f-mono);font-weight:500;font-size:.8125rem;line-height:1.5;letter-spacing:.06em;color:var(--fg-3)}
@media (min-width:1100px){ .footnote{font-size:.875rem} }
.num{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
[data-fact]{font-variant-numeric:tabular-nums}
.h2,.display-l,.display-m,.h3{text-wrap:balance}
.sub,.body{text-wrap:pretty}
.ink{color:var(--fg)} .ink-2{color:var(--fg-2)} .ink-3{color:var(--fg-3)}
.c-lime{color:var(--lime)} .c-amber{color:var(--amber)} .c-clay{color:var(--clay)} .c-water{color:var(--water)} .c-green{color:var(--green)}

/* per-line headline mask (FM.splitLines / FM.revealLines). Never per letter or per word. */
.line{display:block;overflow:hidden;overflow:visible clip;padding-bottom:.14em;margin-bottom:-.14em}
.line>span{display:block}
html.js-pending [data-reveal]{visibility:hidden}

/* ---------- 4. Layout (SPEC 2.3) ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
main{display:block;position:relative}
.sec{position:relative;background:var(--bg);color:var(--fg)}
.sec:not(.scene){padding-block:var(--sec-pad)}
.sec.cv{content-visibility:auto;contain-intrinsic-size:auto 900px}
html.cv-measure .sec.cv{content-visibility:visible}   /* core renders them once after load so their real size is remembered */

/* surfaces: fixed per section, joined by gradient seams. Nothing animates a page-wide color. */
[data-bg=night]{--bg:var(--night)}
[data-bg=dawn]{--bg:var(--dawn)}
[data-bg=paper]{
  --bg:var(--paper); --bg-2:var(--paper-2); --bg-3:#ECEBE3;
  --fg:var(--ink-p); --fg-2:var(--ink-p2); --fg-3:var(--ink-p3);
  --line:var(--hair-p); --line-2:#CFCEC2;
  --focus:var(--brand);
  color-scheme:light;
}
[data-bg=paper] ::selection{background:var(--brand);color:#fff}
.seam{display:block;height:var(--seam-h,40vh);background:linear-gradient(180deg,var(--seam-from,var(--night)),var(--seam-to,var(--dawn)))}
.seam--night-dawn{--seam-from:var(--night);--seam-to:var(--dawn)}
.seam--dawn-paper{--seam-from:var(--dawn);--seam-to:var(--paper)}

/* ---------- 5. Shared components ---------- */
/* buttons: lime on night, brand on paper, ghost hairline. 12px radius, no shadows. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;
  border-radius:var(--r-btn);border:1px solid transparent;background:transparent;
  font:600 1rem/1 var(--f-sans);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-lime{background:var(--lime);color:var(--night)}
.btn-lime:hover{background:#E6FF9E}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:#27502C}
.btn-ghost{border-color:var(--line-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg-3)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.9375rem}
.btn .i,.btn svg{width:18px;height:18px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* cards and the single badge */
.card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-card)}
.badge{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-btn);
  background:var(--bg-2);font:600 1rem/1.3 var(--f-sans);color:var(--fg)}
.badge::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--lime)}
.icon{width:24px;height:24px;flex:none}

/* the lime scan line: 2px core + falloff, one element, transform only.
   .scan moves along X (vertical line, falloff trails on the left). Place the core with translateX(x).
   .scan--y moves along Y (horizontal line, falloff trails above). Place the core with translateY(y).
   .is-rev puts the falloff on the other side. --scan-fall sets the falloff length (default 60px). */
.scan{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--lime);pointer-events:none;z-index:var(--z-overlay)}
.scan::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:var(--scan-fall,60px);
  background:linear-gradient(90deg,rgba(216,255,122,0),rgba(216,255,122,.24))}
.scan.is-rev::before{right:auto;left:100%;background:linear-gradient(270deg,rgba(216,255,122,0),rgba(216,255,122,.24))}
.scan--y{width:100%;height:2px}
.scan--y::before{top:auto;left:0;right:0;bottom:100%;width:auto;height:var(--scan-fall,60px);
  background:linear-gradient(180deg,rgba(216,255,122,0),rgba(216,255,122,.24))}
.scan--y.is-rev::before{bottom:auto;top:100%;background:linear-gradient(0deg,rgba(216,255,122,0),rgba(216,255,122,.24))}

/* canvases made by FM.canvas() fill their host */
.fm-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* lower-third captions made by FM.captions(): ticks + crossfading line (opacity + 12px y, .35s) */
.caps{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;text-align:center}
.caps-ticks{display:flex;gap:6px}
.caps-ticks i{display:block;width:18px;height:2px;border-radius:2px;background:var(--hair-2);transition:background-color .35s}
.caps-ticks i.is-past{background:var(--ink-3)}
.caps-ticks i.is-cur{background:var(--lime)}
.caps-text{display:grid;justify-items:center}
.caps-text .cap{grid-area:1/1;max-width:min(36ch,calc(100vw - 32px));color:var(--fg);opacity:0;transform:translateY(12px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.caps-text .cap.is-on{opacity:1;transform:none}

.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:fixed;left:16px;top:12px;z-index:var(--z-skip);padding:12px 18px;border-radius:var(--r-btn);
  background:var(--lime);color:var(--night);font:600 1rem/1 var(--f-sans);text-decoration:none;
  transform:translateY(-200%);transition:transform .2s var(--ease-out)}
.skip:focus{transform:none}

/* ---------- 6. Sticky scenes (FM.scene) ----------
   No GSAP pin. The section gets its height from FM.scene; .scene-sticky is CSS sticky.
   Never put overflow hidden/auto/scroll on a section or an ancestor of .scene-sticky. */
.sec.scene{padding:0}
.scene-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;isolation:isolate}
.scene.is-active [data-wc]{will-change:transform,opacity}
.scene.is-static{height:auto !important}
.scene.is-static .scene-sticky{position:relative;height:auto;min-height:100vh;min-height:100svh}

/* optional scene layout helpers: copy column cols 1-5, stage cols 6-12, lower-third caption */
.scene-grid{position:relative;height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
  align-items:center;padding-top:var(--top-safe)}
.scene-copy{grid-column:1 / span 5;position:relative;z-index:var(--z-overlay)}
.scene-stage{grid-column:6 / span 7;position:relative;height:var(--stage-h);z-index:var(--z-stage)}
.scene-grid.has-caption{padding-bottom:calc(7svh + 56px)}   /* keeps the stage clear of the lower-third caption */
.scene-caption{position:absolute;left:0;right:0;bottom:7svh;display:flex;justify-content:center;padding-inline:16px;z-index:var(--z-caption);pointer-events:none}
.scene.is-static .scene-grid{padding-block:calc(var(--top-safe) + 24px) 64px}
@media (max-width:759px){
  .scene-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 50svh;align-content:start;align-items:start;row-gap:16px;
    padding-top:calc(var(--nav-h) + var(--bar-h) + 16px)}
  .scene-copy,.scene-stage{grid-column:1 / -1}
  .scene-stage{height:50vh;height:50svh}
  .scene-copy .h2{font-size:clamp(1.9rem,8vw,2.4rem)}
  .scene-caption{bottom:4svh}
}

/* default look of the crawlable static copy (visible if JS or a section script fails) */
.sec-static{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.sec-static .sub{margin-top:-4px}
.static-list{display:grid;gap:20px;width:100%}
.static-list>li{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line-2)}
.static-list a{display:flex;flex-direction:column;gap:6px;text-decoration:none}
.static-faq{width:100%;border-top:1px solid var(--line-2)}
.static-faq details{border-bottom:1px solid var(--line-2);padding:16px 0}
.static-faq summary{font:600 1.125rem/1.4 var(--f-sans)}
.static-faq details p{margin-top:10px;color:var(--fg-2)}
/* a section whose stylesheet failed twice is never built (core.js): keep its inline icons small */
.sec.css-failed svg{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle}
.static-form{display:grid;gap:14px;width:100%;max-width:520px}
.static-form label{display:block;font:600 1.125rem/1.3 var(--f-sans);margin-bottom:6px}
.static-form input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:var(--bg-2)}
.sec-static table{border-top:1px solid var(--line-2)}
.sec-static th,.sec-static td{padding:10px 18px 10px 0;text-align:left;border-bottom:1px solid var(--line)}
.sec-static th{font:500 .875rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.sec-static td{font:500 1rem/1.3 var(--f-mono);font-variant-numeric:tabular-nums}

/* footer shell (E2 styles the inside) */
.foot{background:var(--bg);color:var(--fg);padding-block:48px 64px;border-top:1px solid var(--line)}
.foot ol{margin-top:16px;display:grid;gap:6px;list-style:decimal;padding-left:1.4em}

/* ---------- 7. Nav (64px) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:var(--nav-h);color:var(--ink);
  border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s,color .3s}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--nav-h) + 32px);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,13,11,.6),rgba(10,13,11,0));transition:opacity .3s}
/* fully opaque once past the hero (no backdrop blur on this page, so nothing may ghost through) */
.nav.is-solid{background:var(--night);border-bottom-color:var(--hair)}
.nav.is-solid::before{opacity:0}
/* JavaScript off: nothing ever sets .is-solid, so the nav is solid from the start (headings must not scroll
   behind the logo and links). The pre-paint script adds .js, so pages with JavaScript are unchanged. */
html:not(.js) .nav{background:var(--night);border-bottom-color:var(--hair)}
html:not(.js) .nav::before{opacity:0}
.nav-in{height:100%;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 1.1875rem/1 var(--f-display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand .mark{width:28px;height:28px;border-radius:8px;box-sizing:content-box;outline:1px solid rgba(127,196,138,.28);outline-offset:0}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:10px 14px;border-radius:8px;font:400 1rem/1 var(--f-sans);color:var(--ink-2);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{flex:none}
/* over the hero the hero's own lime button is the one primary: the nav CTA is a ghost until the nav turns solid */
.nav:not(.is-solid) .nav-cta{background:transparent;border-color:var(--hair-2);color:var(--ink)}
.nav:not(.is-solid) .nav-cta:hover{background:transparent;border-color:var(--ink-3)}
html[data-surface=paper] .nav{background:var(--paper);border-bottom-color:var(--hair-p);color:var(--ink-p);--focus:var(--brand)}
html[data-surface=paper] .nav::before{opacity:0}
html[data-surface=paper] .nav-links a{color:var(--ink-p2)}
html[data-surface=paper] .nav-links a:hover{color:var(--ink-p)}
html[data-surface=paper] .nav .btn-lime{background:var(--brand);color:#fff}
html[data-surface=paper] .brand .mark{outline-color:transparent}
@media (max-width:859px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
}

/* ---------- 8. Chapter bar (28px, under the nav, #what to the end of #tour) ---------- */
.chapterbar{position:fixed;left:0;right:0;top:var(--nav-h);z-index:var(--z-chapterbar);height:var(--bar-h);
  background:var(--night);border-bottom:1px solid var(--hair);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility 0s linear .3s}
.chapterbar.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility 0s}
.cb-in{height:100%;display:flex;align-items:center;gap:32px}
.cb-segs{flex:1 1 auto;max-width:820px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;height:100%}
.cb-seg{display:flex;align-items:center;gap:10px;height:100%;min-width:0;text-decoration:none;color:var(--ink-3);
  font:500 .8125rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;transition:color .3s}
.cb-seg.is-cur{color:var(--ink)}
.cb-label{flex:none;white-space:nowrap}
.cb-track{position:relative;flex:1 1 auto;min-width:24px;height:2px;border-radius:2px;background:var(--hair-2);overflow:hidden}
.cb-fill{position:absolute;inset:0;border-radius:2px;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
.cb-note{flex:none;margin-left:auto;font:500 .8125rem/1 var(--f-mono);letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}
@media (max-width:1099px){ .cb-note{display:none} }
@media (max-width:759px){
  .chapterbar{border-bottom:0;background:var(--hair)}
  .cb-in{padding-inline:0;max-width:none;gap:0}
  .cb-segs{max-width:none;gap:2px}
  .cb-label,.cb-note{display:none}
  .cb-track{height:2px;border-radius:0;background:transparent}
  .cb-fill{border-radius:0}
}

/* ---------- 9. Modes ---------- */
/* reduced motion or ?static=1: html.reduced is set before first paint (head script) */
html.reduced *,html.reduced *::before,html.reduced *::after{
  transition-duration:.01ms !important;transition-delay:0s !important;
  animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
html.capture .nav,html.capture .chapterbar,html.capture .skip{display:none}

/* Lenis 1.1 (fine pointers only) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
/* Not here on purpose: html.lenis-scrolling main{pointer-events:none}. Measured at 4x on the real GPU
   (qa/E0/r3/hittest.cjs) it raised hit-test time in every scene (hero 113 -> 138ms, grain 36 -> 84ms,
   tour 48 -> 120ms): each wheel event still hit-tests for its target, and toggling an inherited property
   on all of main at every scroll start and stop restyles the whole subtree. */

/* ?grid=1 overlay */
.fm-grid-overlay{position:fixed;inset:0;z-index:120;pointer-events:none}
.fm-grid-overlay .wrap,.fm-grid-overlay .grid{height:100%}
.fm-grid-overlay i{display:block;height:100%;background:rgba(216,255,122,.06);box-sizing:border-box;border-inline:1px solid rgba(216,255,122,.22)}
.fm-grid-overlay b{position:absolute;left:0;right:0;border-top:1px dashed rgba(224,138,109,.6)}