/* ============================================================================
   ForgeOS v2: tokens + components.   Documentation: design/SYSTEM.md
   ----------------------------------------------------------------------------
   Order: fonts, tokens (dark, light), engine token bridge, base, type, layout,
   grounds, buttons, chips, media frames, nav + mega menu, sheet, footer,
   cards that earn it (plan, proof, faq), calculator, chat, utilities,
   reduced motion.   Page-specific styles live in assets/css/page-*.css.
   Rules: transform/opacity only for motion, no transition: all, no gradient
   text, no glow halos, one accent per ground, no em dashes in content.
   ========================================================================== */

/* Type: Funnel Display (display) + Funnel Sans (text), one superfamily drawn together, so the
   pairing is coherent. Display carries sharp ink-trap cuts that read engineered and forged;
   text is open and calm at small sizes. Geist Mono only for labels and data. All OFL, self-hosted. */
@font-face { font-family: "Funnel Display"; src: url("../fonts/funnel-display.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("../fonts/funnel-sans.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

/* ------------------------------------------------------------- tokens -- */
:root {
  /* colour roles (dark, the default) */
  --bg:        #08070f;   /* night ground */
  --bg-dusk:   #0e0c1a;   /* lifted ground for alternating sections */
  --surface:   #13111f;   /* raised */
  --surface-2: #1b1829;   /* raised twice (inputs inside a surface) */
  --ink:       #efecf7;
  --ink-2:     #aba6c2;   /* secondary text, 8.5:1 on --bg */
  --ink-3:     #8a85a3;   /* tertiary/labels, 5.7:1 on --bg */
  --line:      rgb(239 236 247 / 0.09);
  --line-2:    rgb(239 236 247 / 0.16);
  --accent:      #6652f5; /* fills: primary button, active states. White on it 5.1:1 */
  --accent-ink:  #ffffff;
  --accent-text: #a396ff; /* accent as text on dark grounds, 7.4:1 */
  --accent-soft: rgb(102 82 245 / 0.16);
  --signal:      #5aa9ff; /* "live / AI working" only. Never a second brand accent */

  /* data colours (status, split segments). Data, not decoration. */
  --hot: #ff7a5c; --warm: #f5b84b; --question: #5aa9ff; --cold: #8a85a3; --ok: #4bd6a0;
  --seg-creator: #8c7bff; --seg-monetized: #5aa9ff; --seg-scout: #4bd6a0; --seg-forgeos: #c9c4dc;

  /* paper ground: the contract/document moment. Light in BOTH themes. */
  --paper: #f6f4fb; --paper-ink: #16131f; --paper-ink-2: #514c66; --paper-line: rgb(22 19 31 / 0.12);

  /* type */
  --f-display: "Funnel Display", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-text: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wdth-display: 100%;          /* kept for page CSS that still reads it; Funnel has no width axis */
  --w-display: 600; --w-hero: 620; --w-em: 300;

  --t-xs:   clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --t-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-lg:   clamp(1.125rem, 1.04rem + 0.36vw, 1.375rem);
  --t-xl:   clamp(1.3125rem, 1.14rem + 0.72vw, 2rem);
  --t-2xl:  clamp(1.75rem, 1.3rem + 1.8vw, 3.25rem);
  --t-3xl:  clamp(2.25rem, 1.45rem + 3.3vw, 5.25rem);
  --t-hero: clamp(2.75rem, 1.2rem + 6.4vw, 8.75rem);

  /* leading never below 0.98 on multi-line display: Funnel's descenders (g, y) clear the next
     line's ascenders at these values at every breakpoint. Tracking tightens with size. */
  --track-hero: -0.038em; --track-display: -0.03em; --track-snug: -0.018em; --track-label: 0.09em;
  --lh-hero: 0.98; --lh-display: 1.02; --lh-snug: 1.14; --lh-body: 1.62;
  --measure: 62ch;

  /* space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem;
  --section: clamp(4.5rem, 3rem + 6.4vw, 10rem);
  --gutter: clamp(1rem, 0.2rem + 3.4vw, 4rem);
  /* fluid container: 1248px at 1280, ~1330 at 1440, ~1470 at 1920, 1728 cap at 2560+.
     Wide screens get wider content, not wider gutters. */
  --maxw: clamp(72rem, 56rem + 30vw, 108rem);
  --maxw-text: 46rem;
  --nav-h: 64px;

  /* radius: one scale, held everywhere */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* elevation: offset + blur, tinted to the night hue */
  --shadow-c: 252 60% 2%;
  --e1: 0 1px 2px hsl(var(--shadow-c) / 0.4), 0 2px 8px -2px hsl(var(--shadow-c) / 0.3);
  --e2: 0 2px 4px hsl(var(--shadow-c) / 0.3), 0 12px 28px -8px hsl(var(--shadow-c) / 0.5);
  --e3: 0 4px 10px hsl(var(--shadow-c) / 0.3), 0 28px 60px -16px hsl(var(--shadow-c) / 0.6), 0 60px 120px -40px hsl(var(--shadow-c) / 0.55);
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.07);

  /* glass: a specific effect for things that float over media. Not for cards. */
  --glass: rgb(19 17 31 / 0.62);
  --glass-strong: rgb(19 17 31 / 0.82);
  --glass-blur: blur(18px) saturate(150%);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-1: 140ms; --d-2: 220ms; --d-3: 420ms; --d-4: 700ms;

  --z-nav: 60; --z-sheet: 70; --z-chat: 80; --z-skip: 100;
}

:root[data-theme="light"] {
  --bg: #f3f1f8; --bg-dusk: #e9e6f2; --surface: #ffffff; --surface-2: #f6f5fa;
  --ink: #14111f; --ink-2: #4d4862; --ink-3: #625d77;
  --line: rgb(20 17 31 / 0.10); --line-2: rgb(20 17 31 / 0.18);
  --accent: #5b45f0; --accent-ink: #ffffff; --accent-text: #5b45f0; --accent-soft: rgb(91 69 240 / 0.10);
  --signal: #1a64c2;
  --hot: #d9472a; --warm: #a96c00; --question: #1a64c2; --cold: #6b6680; --ok: #0f7a52;
  --seg-creator: #6652f5; --seg-monetized: #2f86e8; --seg-scout: #17a274; --seg-forgeos: #9f99b5;
  --shadow-c: 252 30% 30%;
  --e1: 0 1px 2px hsl(var(--shadow-c) / 0.10), 0 2px 8px -2px hsl(var(--shadow-c) / 0.10);
  --e2: 0 2px 4px hsl(var(--shadow-c) / 0.08), 0 12px 28px -8px hsl(var(--shadow-c) / 0.18);
  --e3: 0 4px 10px hsl(var(--shadow-c) / 0.08), 0 28px 60px -16px hsl(var(--shadow-c) / 0.22), 0 60px 120px -40px hsl(var(--shadow-c) / 0.2);
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --glass: rgb(255 255 255 / 0.66); --glass-strong: rgb(255 255 255 / 0.86);
  color-scheme: light;
}
:root { color-scheme: dark; }

/* bridge to the scroll-craft engine (assets/css/scrollcraft.css). Never restyle .sc-* */
:root {
  --sc-canvas: var(--bg); --sc-surface: var(--surface); --sc-ink: var(--ink); --sc-ink-soft: var(--ink-2);
  --sc-accent: var(--accent); --sc-accent-ink: var(--accent-ink);
  --sc-font-display: var(--f-display); --sc-font-text: var(--f-text); --sc-font-mono: var(--f-mono);
  --sc-gutter: var(--gutter); --sc-maxw: var(--maxw); --sc-ease-out: var(--ease-out);
}

/* --------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-text); font-size: var(--t-base); line-height: var(--lh-body);
  letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip; font-synthesis-weight: none;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
::selection { background: var(--accent); color: var(--accent-ink); }
:root { caret-color: var(--accent); accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: var(--r-xs); }
@supports (scrollbar-color: auto) { html { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; } }
:where(table, output, .num, [data-sc-count]) { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

.skip { position: fixed; left: 12px; top: 12px; z-index: var(--z-skip); padding: 10px 14px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform var(--d-2) var(--ease-out); }
.skip:focus { 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; }

/* grain: a flat dark ground bands on real displays */
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .grain { opacity: 0.035; mix-blend-mode: multiply; }

/* --------------------------------------------------------- typography -- */
.d-hero, .d-1, .d-2, .d-3 {
  font-family: var(--f-display); font-weight: var(--w-display); font-kerning: normal;
  line-height: var(--lh-display); letter-spacing: var(--track-display); text-wrap: balance; color: var(--ink);
}
.d-hero { font-size: var(--t-hero); letter-spacing: var(--track-hero); font-weight: var(--w-hero); line-height: var(--lh-hero); }
.d-1 { font-size: var(--t-3xl); }
.d-2 { font-size: var(--t-2xl); line-height: 1.05; }
.d-3 { font-size: var(--t-xl); line-height: var(--lh-snug); letter-spacing: var(--track-snug); font-weight: 560; }
.h-4 { font-family: var(--f-text); font-size: var(--t-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.h-5 { font-family: var(--f-text); font-size: var(--t-base); font-weight: 600; line-height: 1.35; letter-spacing: -0.008em; }
/* emphasis inside a display line: the light cut of the same family. Never italic, never colour. */
.d-hero em, .d-1 em, .d-2 em, .d-3 em { font-style: normal; font-weight: var(--w-em); letter-spacing: -0.02em; }
.lede { font-size: var(--t-lg); line-height: 1.52; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; letter-spacing: -0.006em; }
.body { color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.small { font-size: var(--t-sm); color: var(--ink-2); }
.label { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.accent { color: var(--accent-text); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-5); }
.stack > :is(.d-1, .d-2) + :is(.lede, .body) { margin-top: var(--s-5); }

/* ------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.rule { height: 1px; border: 0; margin: 0; background: var(--line); }

/* grounds: hard edges, painted per section (no engine drift: grounds must follow the theme) */
[data-ground="night"] { background-color: var(--bg); }
[data-ground="dusk"] { background-color: var(--bg-dusk); }
[data-ground="paper"] {
  background-color: var(--paper); color: var(--paper-ink);
  --ink: var(--paper-ink); --ink-2: var(--paper-ink-2); --ink-3: #625d77; --line: var(--paper-line); --line-2: rgb(22 19 31 / 0.2);
  --surface: #ffffff; --surface-2: #f1eff7; --accent-text: #5b45f0; --accent: #5b45f0; --edge: inset 0 1px 0 #fff;
  --shadow-c: 252 30% 30%;
  --e1: 0 1px 2px hsl(var(--shadow-c) / 0.10), 0 2px 8px -2px hsl(var(--shadow-c) / 0.10);
  --e2: 0 2px 4px hsl(var(--shadow-c) / 0.08), 0 12px 28px -8px hsl(var(--shadow-c) / 0.18);
  --e3: 0 4px 10px hsl(var(--shadow-c) / 0.08), 0 28px 60px -16px hsl(var(--shadow-c) / 0.22);
  --seg-creator: #6652f5; --seg-monetized: #2f86e8; --seg-scout: #17a274; --seg-forgeos: #9f99b5;
  --hot: #d9472a; --ok: #0f7a52;
  color-scheme: light;
}
:root[data-theme="light"] [data-ground="paper"] { --paper: #ffffff; }

/* ------------------------------------------------------------ buttons -- */
.btn {
  --h: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  height: var(--h); padding: 0 1.15em; border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: transform var(--d-1) var(--ease-out), background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn .i { width: 1.05em; height: 1.05em; transition: transform var(--d-2) var(--ease-out); }
.btn--sm { --h: 38px; padding: 0 0.95em; border-radius: var(--r-sm); font-size: var(--t-sm); }
.btn--lg { --h: 54px; padding: 0 1.45em; font-size: var(--t-base); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px hsl(var(--shadow-c) / 0.4), 0 8px 20px -8px rgb(70 50 220 / 0.55); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--glass { background: var(--glass); color: var(--ink); border-color: var(--line-2); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn--quiet { --h: auto; padding: 0; height: auto; border: 0; background: none; color: var(--accent-text); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in oklab, var(--accent) 88%, white); transform: translateY(-1px); }
  .btn--ghost:hover, .btn--glass:hover { border-color: var(--ink-3); background: color-mix(in oklab, var(--ink) 6%, transparent); }
  .btn:hover .i:last-child { transform: translateX(2px); }
  .btn--quiet:hover { text-decoration: underline; }
}
.btn:active { transform: scale(0.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* -------------------------------------------------------------- chips -- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; white-space: nowrap; background: color-mix(in oklab, var(--c, var(--ink-3)) 16%, transparent); color: color-mix(in oklab, var(--c, var(--ink-2)) 78%, var(--ink)); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--ink-3)); }
.chip--hot { --c: var(--hot); } .chip--warm { --c: var(--warm); } .chip--question { --c: var(--question); } .chip--cold { --c: var(--cold); } .chip--ok { --c: var(--ok); } .chip--live { --c: var(--signal); }
.chip--plain::before { display: none; }
.tag-example { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* icon */
.i { width: 20px; height: 20px; flex: none; }

/* -------------------------------------------------------- media frame -- */
/* .frame: a window around a real screenshot or clip. .frame__bar carries the real URL. */
.frame { position: relative; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--e3), var(--edge); overflow: hidden; isolation: isolate; }
.frame__bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.02em; }
.frame__bar::before { content: ""; width: 34px; height: 8px; flex: none; background: radial-gradient(circle at 4px 4px, var(--line-2) 3.5px, transparent 4px) 0 0 / 13px 8px repeat-x; }
.frame__bar span { margin-inline: auto; padding-right: 34px; }
.frame > img, .frame > .vid { width: 100%; }
.frame__note { position: absolute; right: 12px; bottom: 10px; z-index: 3; padding: 3px 8px; border-radius: var(--r-xs); background: var(--glass-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* phone device: for portrait clips and the Forge Alarm */
.phone { position: relative; width: min(300px, 74vw); aspect-ratio: 9 / 19.5; border-radius: 44px; padding: 10px; background: linear-gradient(160deg, #2a2640, #0c0b14 60%); box-shadow: var(--e3), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.phone__screen { position: relative; height: 100%; border-radius: 35px; overflow: hidden; background: #05040a; color: #efecf7; }
.phone__screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 5; }

/* .vid: lazy video. Poster <img> is the real first frame; forge.js adds <video> when allowed */
.vid { position: relative; overflow: hidden; background: #0b0a14; }
.vid > img, .vid > video { width: 100%; height: 100%; object-fit: cover; }
.vid > video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-4) var(--ease-out); }
.vid.is-playing > video { opacity: 1; }

/* ---------------------------------------------------------------- nav -- */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-nav); padding: 10px var(--gutter) 0; pointer-events: none; }
.nav__bar {
  pointer-events: auto; position: relative; max-width: calc(var(--maxw) + 24px); margin-inline: auto; height: 54px;
  display: flex; align-items: center; gap: var(--s-4); padding: 0 8px 0 14px; border-radius: var(--r-md);
  border: 1px solid transparent; transition: background-color var(--d-3) var(--ease-out), border-color var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.nav.is-solid .nav__bar, .nav.is-open .nav__bar { background: var(--glass-strong); border-color: var(--line); box-shadow: var(--e2); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.nav__brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.03em; text-decoration: none; color: var(--ink); }
.mark { width: 28px; height: 28px; color: var(--accent-text); }
.nav__menu { display: flex; align-items: center; gap: 2px; margin-left: var(--s-5); }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: var(--r-sm); border: 0; background: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color var(--d-1) var(--ease-out), background-color var(--d-1) var(--ease-out); }
.nav__link .i { width: 14px; height: 14px; transition: transform var(--d-2) var(--ease-out); }
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-expanded="true"] .i { transform: rotate(180deg); }
.nav__link { position: relative; }
.nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent-text); transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--d-2) var(--ease-out); }
.nav__link[aria-current="page"], .nav__item:has([aria-current="page"]) > .nav__trigger { color: var(--ink); }
.nav__link[aria-current="page"]::after, .nav__item:has([aria-current="page"]) > .nav__trigger::after { transform: scaleX(1); }
.nav__trigger::after { right: 26px; }
.nav__menu:has(> .nav__link[aria-current="page"]) .nav__trigger::after { transform: scaleX(0); }
.nav__menu:has(> .nav__link[aria-current="page"]) .nav__trigger { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); } }
.nav__brand[aria-current="page"] { color: var(--ink); }
/* reading progress: a hairline under the bar, so "where am I on this page" is always answered */
.nav__progress { position: relative; max-width: calc(var(--maxw) + 24px); margin: 0 auto; height: 2px; pointer-events: none; overflow: hidden; border-radius: 2px; opacity: 0; transition: opacity var(--d-3) var(--ease-out); }
.nav.is-solid .nav__progress { opacity: 1; }
.nav__progress i { position: absolute; inset: 0; background: var(--accent-text); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); opacity: 0.8; }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav__login { padding: 0 10px; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); text-decoration: none; }
.nav__login:hover { color: var(--ink); }
.nav__icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); border: 0; background: none; color: var(--ink-2); }
.nav__icon:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); }
.nav__icon .i { width: 18px; height: 18px; }
.nav__sun { display: none; } :root[data-theme="light"] .nav__sun { display: block; } :root[data-theme="light"] .nav__moon { display: none; }
.nav__burger { display: none; position: relative; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform var(--d-2) var(--ease-out); }
.nav__burger span:first-child { transform: translateY(-4px); } .nav__burger span:last-child { transform: translateY(4px); }
.nav__burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* mega menu */
.mega {
  position: absolute; top: calc(100% + 12px); left: -12px; width: min(760px, 86vw); padding: 10px; border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface) 96%, transparent); border: 1px solid var(--line-2); box-shadow: var(--e3); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.985); transform-origin: 20% 0;
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out), visibility 0s linear var(--d-2);
}
.mega--narrow { width: 420px; }
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.mega__item { display: flex; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); text-decoration: none; transition: background-color var(--d-1) var(--ease-out); }
.mega__item:hover, .mega__item:focus-visible, .mega__item[aria-current="page"] { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.mega__item b { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.mega__item small { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-3); }
.mega__list--thumbs .mega__item { align-items: center; }
.mega__thumb { flex: none; width: 64px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: #0b0a14; box-shadow: inset 0 0 0 1px var(--line); }
.mega__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-4) var(--ease-out); }
.mega__item:hover .mega__thumb img { transform: scale(1.08); }
.mega__item[aria-current="page"] b::after { content: "You are here"; margin-left: 8px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 0.6875rem; font-weight: 600; vertical-align: 1px; }
.mega__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); }
.mega__ico .i { width: 17px; height: 17px; }
.mega__feature { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.mega__media { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.mega__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-4) var(--ease-out); }
.mega__feature:hover .mega__media img { transform: scale(1.03); }
.mega__feature-copy { padding: 12px 14px 14px; }
.mega__feature-copy b { display: block; font-size: var(--t-sm); color: var(--ink); }
.mega__feature-copy small { display: block; margin-top: 3px; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); }
.mega__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--accent-text); }
.mega__more .i { width: 14px; height: 14px; }
.mega__foot { display: flex; gap: var(--s-5); margin-top: 10px; padding: 12px 12px 4px; border-top: 1px solid var(--line); }
.mega__foot a { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.mega__foot a:hover { color: var(--ink); }
.mega__foot .i { width: 13px; height: 13px; }

/* mobile sheet */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); padding: calc(var(--nav-h) + 18px) var(--gutter) 32px; overflow-y: auto; background: var(--bg); }
.sheet__inner { display: flex; flex-direction: column; max-width: 520px; margin-inline: auto; }
.sheet__label { margin: 22px 0 6px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.sheet a:not(.btn) { padding: 10px 0; font-family: var(--f-display); font-weight: 560; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.sheet a[aria-current="page"] { color: var(--accent-text); }
.sheet__home { margin-bottom: 4px; }
.sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 6px; }
.sheet .sheet__grid a { display: grid; gap: 8px; padding: 0 0 4px; border: 0; font-family: var(--f-text); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; }
.sheet__grid img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--r-md); background: #0b0a14; box-shadow: inset 0 0 0 1px var(--line); }
.sheet .sheet__grid a[aria-current="page"] img { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sheet__cta { display: grid; gap: 10px; margin-top: 28px; text-align: center; color: var(--ink-3); font-size: var(--t-sm); }
.nav.is-open { z-index: calc(var(--z-sheet) + 1); }
body.is-locked { overflow: hidden; }

@media (max-width: 980px) {
  .nav__menu, .nav__login { display: none; }
  .nav__burger { display: inline-grid; }
}
@media (max-width: 420px) {
  .nav__actions .btn--sm { padding: 0 0.8em; font-size: 0.8125rem; }
  .nav__brand span { display: none; }
}

/* ------------------------------------------------------------- footer -- */
/* Sitemap, then a closing card with the page's two-tone wordmark (Forge + page word). */
.foot { position: relative; overflow: hidden; padding: var(--s-9) 0 0.1px; border-top: 1px solid var(--line); background: var(--bg); font-size: var(--t-sm); isolation: isolate; }
.foot__glow { position: absolute; inset: auto -10% -30% -10%; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 30% 100%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%), radial-gradient(40% 50% at 78% 100%, color-mix(in oklab, var(--signal) 12%, transparent), transparent 70%); }
.foot__lead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5) var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid var(--line); }
.foot__say { max-width: 22ch; font-family: var(--f-display); font-weight: 560; font-size: var(--t-2xl); line-height: 1.06; letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; }
.foot__reach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.foot__mail { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: border-color var(--d-2) var(--ease-out); }
.foot__mail .i { width: 0.9em; height: 0.9em; color: var(--accent-text); transition: transform var(--d-2) var(--ease-out); }
.foot__mail:hover { border-color: var(--accent-text); } .foot__mail:hover .i { transform: translate(2px, -2px); }
.foot__map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); padding: var(--s-7) 0; }
.foot__map h2 { margin-bottom: var(--s-3); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.foot__map a { display: flex; align-items: center; gap: 4px; width: fit-content; min-height: 32px; color: var(--ink-2); text-decoration: none; transition: color var(--d-1) var(--ease-out); }
.foot__map a .i { width: 13px; height: 13px; opacity: 0.6; }
.foot__map a:hover { color: var(--ink); }
.foot__map a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.foot__map a[aria-current="page"]::before { content: ""; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--accent-text); }
/* closing card: inset glass panel, a quiet link row, the page's two-tone wordmark, the legal line */
.foot__card { position: relative; isolation: isolate; overflow: hidden; margin: var(--s-6) clamp(8px, 0.8vw, 14px) clamp(8px, 0.8vw, 14px);
  padding: clamp(40px, 6vw, 96px) var(--gutter) var(--s-6); border-radius: clamp(20px, 2.2vw, 32px);
  border: 1px solid rgb(160 170 255 / 0.12); background: linear-gradient(180deg, #121633 0%, #0b0d20 55%, #080915 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 30px 80px -40px rgb(0 0 0 / 0.8); color: #c9cbe0; }
.foot__card-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 60% at 50% 18%, rgb(150 165 255 / 0.10), transparent 70%), radial-gradient(60% 50% at 50% 110%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px clamp(16px, 2.4vw, 36px); }
.foot__row a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--t-sm); font-weight: 500; color: #c9cbe0; text-decoration: none; transition: color var(--d-1) var(--ease-out); }
.foot__row a:hover { color: #fff; }
.foot__word { margin: clamp(24px, 4vw, 56px) auto clamp(16px, 2.4vw, 32px); text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  font-family: var(--f-display); font-weight: 640; line-height: 0.9; letter-spacing: -0.04em; font-size: var(--fit, calc(84vw / var(--chars, 7) * 1.7)); padding-bottom: 0.2em; }
.foot__word span { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.foot__w1 { background-image: linear-gradient(180deg, #f1f1f6 0%, #b9bac8 45%, #6d6f84 80%, rgb(70 72 96 / 0.55) 100%); }
.foot__w2 { background-image: linear-gradient(180deg, #d4dcff 0%, #a9b8f2 45%, #7383c9 80%, rgb(80 92 160 / 0.55) 100%); }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-6); text-align: center; color: #8d90aa; font-size: var(--t-xs); }
.foot__top-link { display: inline-flex; align-items: center; gap: 6px; color: #c9cbe0; text-decoration: none; }
.foot__top-link .i { width: 14px; height: 14px; transform: rotate(-45deg); }
.foot__top-link:hover { color: #fff; }
.foot__card a:focus-visible { outline: 2px solid #a9b8f2; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 980px) { .foot__map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .foot__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__card { padding-bottom: calc(var(--s-5) + 64px); } /* clears the Ask Forge button */
}

/* ---------------------------------------------------------- plan card -- */
/* Same features on every plan, so the card is a ledger of limits: rows line up across all three. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1), var(--edge); isolation: isolate; overflow: hidden;
  transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out), border-color var(--d-3) var(--ease-out); }
.plan::before { content: ""; position: absolute; inset: 0 0 auto; height: 140px; z-index: -1; pointer-events: none; background: radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%); }
.plan--lead { border-color: color-mix(in oklab, var(--accent) 55%, transparent); box-shadow: var(--e2), var(--edge); }
.plan--lead::before { height: 220px; background: radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 72%); }
.plan__name { font-family: var(--f-display); font-weight: 560; font-size: var(--t-lg); letter-spacing: -0.015em; color: var(--ink); }
.plan__flag { position: absolute; top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); right: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: var(--s-5); }
.plan__price b { font-family: var(--f-display); font-weight: 600; font-size: clamp(3rem, 2rem + 3vw, 4.75rem); letter-spacing: -0.045em; line-height: 0.9; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--ink-3); font-size: var(--t-sm); }
.plan__for { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-sm); min-height: 3em; }
.plan__list { margin: var(--s-5) 0 var(--s-6); padding: 0; display: grid; gap: 0; font-size: var(--t-sm); color: var(--ink-2); list-style: none; border-top: 1px solid var(--line); }
.plan__list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.plan__list .i { width: 17px; height: 17px; flex: none; color: var(--accent-text); }
/* ledger rows: <li><span>Seats</span><b>2</b></li> */
.plan__list li > span:first-child:not(.i) { color: var(--ink-2); }
.plan__list li:not(.plan__all) > b:last-child { margin-left: auto; font-family: var(--f-display); font-weight: 560; font-size: var(--t-lg); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan__all { color: var(--ink); }
.plan__all b { font-weight: 600; }
.plan .btn { margin-top: auto; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--e3), var(--edge); }
  .plan--lead:hover { border-color: color-mix(in oklab, var(--accent) 75%, transparent); }
}
.plan:focus-within { border-color: var(--line-2); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- proof (no stats) */
/* Stat-free proof: concrete, checkable statements ("Signed PDF saved in the room"), never numbers we can't back. */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0; border-top: 1px solid var(--line); }
.proof > * { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: 1px solid var(--line); }
.proof b { display: block; color: var(--ink); font-weight: 600; }
.proof span { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--t-sm); }

/* integrations strip: real things it works with, set as type (no borrowed logos) */
.works { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); color: var(--ink-3); }
.works b { font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.03em; color: var(--ink-2); }

/* ---------------------------------------------------------------- faq -- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) 0; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { flex: none; width: 20px; height: 20px; color: var(--ink-3); transition: transform var(--d-2) var(--ease-out); }
.faq details[open] summary .i { transform: rotate(45deg); color: var(--accent-text); }
.faq .faq__a { padding: 0 0 var(--s-5); max-width: 64ch; color: var(--ink-2); }
.faq .faq__a > * + * { margin-top: var(--s-3); }
.faq details[open] .faq__a { animation: faq-in var(--d-3) var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* ----------------------------------------------------------- CTA band -- */
.cta-band { padding-block: var(--section); text-align: center; position: relative; overflow: hidden; }
.cta-band__inner { display: grid; justify-items: center; gap: var(--s-5); }
.cta-band .lede { margin-inline: auto; }

/* --------------------------------------------------------- calculator -- */
.calc { display: grid; gap: var(--s-4); }
.calc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.calc__label { font-weight: 600; color: var(--ink); }
.calc__num { display: flex; align-items: baseline; gap: 2px; padding: 6px 16px 6px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: inset 0 1px 2px hsl(var(--shadow-c) / 0.12); transition: border-color var(--d-2) var(--ease-out); }
.calc__num:hover { border-color: var(--ink-3); }
.calc__num span { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 400; color: var(--ink-3); }
.calc__input { width: 3.2ch; border: 0; background: none; text-align: right; font-family: var(--f-display); font-weight: 600; font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.calc__input::-webkit-inner-spin-button, .calc__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc__input:focus { outline: none; }
.calc__num:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.calc__track { position: relative; height: 52px; margin-top: var(--s-2); }
.calc__bar { position: absolute; inset: 6px 0; display: flex; gap: 3px; border-radius: var(--r-sm); overflow: hidden; }
.calc__bar i { display: block; height: 100%; min-width: 0; flex: 0 0 auto; width: var(--w, 25%); border-radius: 5px; background: var(--c); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 -10px 18px -10px rgb(0 0 0 / 0.25); transition: width var(--d-2) var(--ease-out); }
.calc__bar [data-seg="creator"] { --c: var(--seg-creator); } .calc__bar [data-seg="monetized"] { --c: var(--seg-monetized); }
.calc__bar [data-seg="scout"] { --c: var(--seg-scout); } .calc__bar [data-seg="forgeos"] { --c: var(--seg-forgeos); }
.calc__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
/* the handle: a raised pill with grip lines, so it reads as something to drag */
.calc__track::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: var(--pos, 50%); width: 14px; margin-left: -7px; border-radius: 7px; pointer-events: none; transition: left var(--d-2) var(--ease-out);
  background: linear-gradient(90deg, transparent 4px, var(--line-2) 4px 5px, transparent 5px 9px, var(--line-2) 9px 10px, transparent 10px), var(--surface); border: 1px solid var(--line-2); box-shadow: var(--e2); }
.calc__track:focus-within::after { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.calc__scale { display: flex; justify-content: space-between; margin-top: -6px; font-family: var(--f-mono); font-size: 0.6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.calc__presets { display: inline-flex; gap: 2px; padding: 3px; width: fit-content; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.calc__presets button { height: 34px; min-width: 56px; padding: 0 12px; border-radius: var(--r-sm); border: 0; background: none; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out); }
.calc__presets button::after { content: "%"; color: var(--ink-3); font-weight: 500; }
.calc__presets button:hover { color: var(--ink); }
.calc__presets button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--e1), var(--edge); }
.calc__presets button.is-on::after { color: inherit; }
.calc__rows { display: grid; gap: 0; margin: var(--s-2) 0 0; border-top: 1px solid var(--line); }
.calc__rows > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(56px, 22%) auto; align-items: center; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--line); }
.calc__rows dt { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; align-items: center; font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.calc__rows dt i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.calc__rows dt small { grid-column: 2; font-weight: 400; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.4; }
.calc__meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.calc__meter i { display: block; height: 100%; width: var(--share, 25%); border-radius: 3px; background: var(--c); transition: width var(--d-2) var(--ease-out); }
.calc__rows [data-k="creator"] { --c: var(--seg-creator); } .calc__rows [data-k="monetized"] { --c: var(--seg-monetized); }
.calc__rows [data-k="scout"] { --c: var(--seg-scout); } .calc__rows [data-k="forgeos"] { --c: var(--seg-forgeos); }
.calc__rows dd { margin: 0; min-width: 3.6ch; text-align: right; font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc__total { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink-3); font-size: var(--t-sm); }
.calc__total b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .calc__rows > div { grid-template-columns: minmax(0, 1fr) auto; } .calc__meter { display: none; } }

/* ---------------------------------------------------------- Ask Forge -- */
.chat-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-chat); display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 8px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--glass-strong); color: var(--ink); font-size: var(--t-sm); font-weight: 600; box-shadow: var(--e2); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: transform var(--d-2) var(--ease-out), opacity var(--d-2) var(--ease-out); }
.chat-fab .mark { width: 32px; height: 32px; }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab:active { transform: scale(0.97); }
body.chat-open .chat-fab { opacity: 0; pointer-events: none; transform: translateY(6px); }
.chat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-chat); width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100svh - 96px)); display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--glass-strong); box-shadow: var(--e3); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.98); transform-origin: 100% 100%; transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-drawer), visibility 0s linear var(--d-3); }
body.chat-open .chat { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; border-bottom: 1px solid var(--line); }
.chat__head .mark { width: 32px; height: 32px; }
.chat__title { margin-right: auto; line-height: 1.25; }
.chat__title b { display: block; font-size: var(--t-sm); }
.chat__title small { color: var(--ink-3); font-size: 0.75rem; }
.chat__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: var(--t-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg--bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 6px; }
.msg--user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.msg--err { border: 1px solid color-mix(in oklab, var(--hot) 50%, transparent); }
.msg a { color: inherit; text-decoration: underline; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: typing 1s infinite var(--ease-io); }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 50% { opacity: 0.3; transform: translateY(-2px); } }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.chat__chips button { padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: none; font-size: 0.8125rem; color: var(--ink-2); }
.chat__chips button:hover { color: var(--ink); border-color: var(--ink-3); }
.chat__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat__form textarea { flex: 1; height: 44px; max-height: 120px; padding: 11px 13px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); resize: none; font-size: var(--t-sm); line-height: 1.45; }
.chat__form textarea:focus { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.chat__form button { flex: none; width: 44px; height: 44px; border-radius: var(--r-md); border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.chat__form button[disabled] { opacity: 0.5; }
.chat__foot { padding: 0 14px 12px; font-size: 0.6875rem; color: var(--ink-3); }
.chat .nav__icon { width: 34px; height: 34px; }
@media (max-width: 560px) {
  .chat-fab { padding: 0 8px; } .chat-fab span { display: none; }
  .chat { right: 0; bottom: 0; width: 100vw; height: 100svh; border-radius: 0; }
}

/* ------------------------------------------------------ reveal (no engine) */
/* Pages that do not load the engine use [data-in] (forge.js). Same feel as data-sc-in. */
.js [data-in] { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.js [data-in].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .js [data-in] { transform: none; transition-duration: 200ms; }
  .btn, .mega, .chat, .chat-fab, .vid > video { transition-duration: 1ms !important; }
  .typing i { animation: none; }
}

/* theme-aware posters: give a .vid two posters, the light one lazy so dark visitors never fetch it */
.vid .poster-light { display: none; }
:root[data-theme="light"] .vid:has(.poster-light) .poster-dark { display: none; }
:root[data-theme="light"] .vid .poster-light { display: block; }

/* ============================================================== round 3 ==
   Shared components added in round 3: atmosphere on grounds, the card system,
   next-page paths, the in-page section index, the film band and video control.
   ======================================================================== */

/* atmosphere: dusk bands carry a faint, full-bleed light so wide screens never show a flat slab */
[data-ground="dusk"] {
  background-image:
    radial-gradient(60% 80% at 0% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, color-mix(in oklab, var(--signal) 6%, transparent), transparent 70%);
}
.wrap--wide { max-width: calc(var(--maxw) + 16rem + var(--gutter) * 2); }

/* ------------------------------------------------------------- cards --- */
/* .card: a link or article with real media on top, a clear stack under it, and the action pinned
   to the bottom so every card in a row ends on the same line (equal heights, no empty bands).
   <a class="card" href="…">
     <span class="card__media"><img …></span>            (or class="card__media vid" with data-video)
     <span class="card__body"><span class="card__kicker">Deal Rooms</span><span class="card__title">One private room per deal.</span>
       <span class="card__text">…</span><span class="card__go">See Deal Rooms{{icon:arrow}}</span></span>
   </a>
   Modifiers: card--wide (media beside the body from 860px), card--glass (media is a glass render,
   always on its own dark well), card--shot (a real screenshot standing in a lit well). */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--s-4); align-items: stretch; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1), var(--edge);
  overflow: hidden; isolation: isolate; color: inherit; text-decoration: none;
  transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out), border-color var(--d-3) var(--ease-out); }
.card__media { position: relative; display: block; aspect-ratio: var(--card-ar, 16 / 10); overflow: hidden; background: #0b0a14; }
.card__media > img, .card__media > video, .card__media.vid > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; pointer-events: none; z-index: 1; background: linear-gradient(0deg, color-mix(in oklab, var(--surface) 70%, transparent), transparent); }
.card__body { display: flex; flex-direction: column; flex: 1; gap: var(--s-3); padding: var(--s-5) clamp(1.25rem, 0.9rem + 1vw, 1.75rem) clamp(1.25rem, 0.9rem + 1vw, 1.75rem); }
.card__kicker { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); }
.card__title { font-family: var(--f-display); font-weight: 560; font-size: var(--t-xl); line-height: 1.12; letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }
.card__text { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; max-width: 48ch; text-wrap: pretty; }
.card__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--s-3); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.card__go .i { width: 16px; height: 16px; color: var(--accent-text); transition: transform var(--d-2) var(--ease-out); }
.card--glass .card__media { background: radial-gradient(70% 80% at 50% 60%, rgb(102 82 245 / 0.22), transparent 70%), #07060d; }
.card--glass .card__media > img { object-fit: contain; padding: 6% 10%; }
.card--shot .card__media { padding: 22px 22px 0; background: radial-gradient(90% 120% at 30% 0%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%), var(--surface-2); }
.card--shot .card__media > img { position: relative; inset: auto; height: auto; border-radius: 10px 10px 0 0; box-shadow: var(--e3); }
.card--shot .card__media::after { display: none; }
@media (min-width: 860px) {
  .card--wide { flex-direction: row; }
  .card--wide .card__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 100%; }
  .card--wide .card__media::after { inset: 0 0 0 auto; width: 30%; height: auto; background: linear-gradient(270deg, color-mix(in oklab, var(--surface) 60%, transparent), transparent); }
  .card--wide .card__body { justify-content: center; padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
}
@media (hover: hover) and (pointer: fine) {
  a.card:hover, .card:has(a:hover) { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--e3), var(--edge); }
  a.card:hover .card__media > img, a.card:hover .card__media > video, a.card:hover .card__media.vid > img { transform: scale(1.04); }
  a.card:hover .card__go .i { transform: translateX(3px); }
  .card--shot:hover .card__media > img { transform: translateY(-6px); }
}
a.card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: var(--r-lg); }
a.card:active { transform: scale(0.99); }

/* ------------------------------------------------------- next paths --- */
/* Injected by the build at the end of every page (see NEXT in _build/build.py). */
.next { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); border-top: 1px solid var(--line); }
.next__head { margin-bottom: var(--s-5); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.next__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-4); }
.next__card { position: relative; display: flex; align-items: flex-end; min-height: clamp(16rem, 12rem + 12vw, 26rem); padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem); border-radius: var(--r-xl);
  overflow: hidden; isolation: isolate; text-decoration: none; color: #efecf7; background: #07060d; border: 1px solid rgb(239 236 247 / 0.1); box-shadow: var(--e2);
  transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out); }
.next__media { position: absolute; inset: 0; z-index: -1; }
.next__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0.92; transition: transform 1100ms var(--ease-out); }
.next__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(7 6 13 / 0.94) 0%, rgb(7 6 13 / 0.72) 34%, rgb(7 6 13 / 0) 72%), linear-gradient(90deg, rgb(7 6 13 / 0.5), rgb(7 6 13 / 0) 60%); }
.next__copy { display: grid; gap: var(--s-2); max-width: 34rem; }
.next__kicker { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: #b7adff; }
.next__title { font-family: var(--f-display); font-weight: 600; font-size: var(--t-3xl); line-height: 1; letter-spacing: -0.035em; color: #f4f2fa; }
.next__card:not(.next__card--lead) .next__title { font-size: var(--t-2xl); }
.next__text { color: #c9c4dc; font-size: var(--t-base); line-height: 1.5; max-width: 40ch; }
.next__go { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-3); font-weight: 600; font-size: var(--t-sm); color: #f4f2fa; }
.next__go .i { width: 18px; height: 18px; transition: transform var(--d-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .next__card:hover { transform: translateY(-4px); box-shadow: var(--e3); }
  .next__card:hover .next__media img { transform: scale(1.05); }
  .next__card:hover .next__go .i { transform: translateX(4px); }
}
.next__card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: var(--r-xl); }
@media (max-width: 760px) { .next__grid { grid-template-columns: 1fr; } .next__card { min-height: 15rem; } }

/* ---------------------------------------------------- section index --- */
/* Long pages: mark sections with data-index="Label". forge.js builds a quiet column of dots on the
   right edge; the current one is lit. Hover or focus slides the labels out to the left as a menu. */
.sindex { position: fixed; right: max(10px, env(safe-area-inset-right)); top: 50%; z-index: 40; transform: translateY(-50%); display: none; transition: opacity var(--d-3) var(--ease-out); }
@media (min-width: 1100px) { .sindex { display: block; } }
.sindex ol { position: relative; display: grid; gap: 0; margin: 0; padding: 6px 0; list-style: none; }
.sindex a { position: relative; display: grid; place-items: center; width: 28px; height: 26px; text-decoration: none; color: var(--ink-3); }
.sindex a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; transition: transform var(--d-2) var(--ease-out), opacity var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out); }
.sindex a span { position: absolute; right: 100%; top: 50%; padding: 3px 9px; border-radius: var(--r-xs); white-space: nowrap; font-size: 0.75rem; font-weight: 500; color: var(--ink-2);
  background: var(--glass-strong); box-shadow: var(--e1); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  opacity: 0; visibility: hidden; transform: translate(6px, -50%); transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out), visibility 0s linear var(--d-2); }
.sindex:hover a span, .sindex:focus-within a span { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.sindex a:hover span, .sindex a:focus-visible span, .sindex a.is-on span { color: var(--ink); }
.sindex a.is-on { color: var(--accent-text); }
.sindex a.is-on::before { opacity: 1; transform: scale(1.6); }
.sindex a:hover::before { opacity: 1; }
.sindex.is-off { opacity: 0; pointer-events: none; }

/* --------------------------------------------------------- film band --- */
/* A full-bleed video moment with copy in one corner (scrim only where the copy sits).
   <section class="film" data-ground="night">
     <div class="film__media vid" data-video="media/x" data-video-control><img src="media/x.webp" … alt="" loading="lazy"></div>
     <div class="film__scrim" aria-hidden="true"></div>
     <div class="wrap film__copy"><h2 class="d-2">…</h2><p class="body">…</p></div>
   </section>
   Modifiers: film--trail (copy bottom-right), film--short (70vh). Always dark: hard-coded light ink. */
.film { position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 56.25vw + 10rem); min-height: clamp(30rem, 56.25vw, 100svh); overflow: hidden; background: #07060d; color: #efecf7; isolation: isolate; }
.film--short { min-height: clamp(26rem, 44vw, 80svh); }
.film__media { position: absolute; inset: 0; z-index: -2; }
.film__media > img, .film__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgb(7 6 13 / 0.92) 0%, rgb(7 6 13 / 0.5) 34%, rgb(7 6 13 / 0) 64%), linear-gradient(90deg, rgb(7 6 13 / 0.7) 0%, rgb(7 6 13 / 0) 55%); }
.film--trail .film__scrim { background: linear-gradient(0deg, rgb(7 6 13 / 0.92) 0%, rgb(7 6 13 / 0.5) 34%, rgb(7 6 13 / 0) 64%), linear-gradient(270deg, rgb(7 6 13 / 0.7) 0%, rgb(7 6 13 / 0) 55%); }
.film__copy { position: relative; padding-block: var(--section) clamp(3rem, 2rem + 4vw, 6rem); }
.film__copy > * { max-width: 30rem; }
.film--trail .film__copy { display: grid; justify-items: end; text-align: right; }
.film__copy .d-1, .film__copy .d-2 { color: #f4f2fa; max-width: 16ch; }
.film__copy .body, .film__copy .lede { color: #c9c4dc; margin-top: var(--s-4); }
.film__copy .label { color: #b7adff; margin-bottom: var(--s-4); }
/* the film is always dark, so its glass button stays dark glass with light ink in both themes */
.film .btn--glass { background: rgb(19 17 31 / 0.62); color: #efecf7; border-color: rgb(239 236 247 / 0.24); }
@media (hover: hover) and (pointer: fine) { .film .btn--glass:hover { background: rgb(19 17 31 / 0.8); border-color: rgb(239 236 247 / 0.45); } }
/* phones: the copy covers most of the frame, so the scrim must cover it too (body text stayed under 4.5:1 over bright clips) */
@media (max-width: 760px) {
  .film .film__scrim { background: linear-gradient(0deg, rgb(7 6 13 / 0.95) 0%, rgb(7 6 13 / 0.84) 50%, rgb(7 6 13 / 0.3) 85%, rgb(7 6 13 / 0.1) 100%); }
}

/* video control: any .vid[data-video-control] gets a pause/play button (WCAG 2.2.2) */
.vid-ctl { position: absolute; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 5; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgb(239 236 247 / 0.24); background: rgb(7 6 13 / 0.55); color: #efecf7; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color var(--d-1) var(--ease-out); }
.vid-ctl:hover { background: rgb(7 6 13 / 0.8); }
.vid-ctl .i { width: 16px; height: 16px; }
.vid-ctl .vid-ctl__play { display: none; } .vid-ctl.is-paused .vid-ctl__play { display: block; } .vid-ctl.is-paused .vid-ctl__pause { display: none; }
.no-video .vid-ctl { display: none; }
/* full-bleed bands: keep the control clear of the fixed Ask Forge button in the bottom-right corner */
.film .vid-ctl { bottom: auto; top: clamp(12px, 2vw, 24px); }

@media (prefers-reduced-motion: reduce) {
  .card, .plan, .next__card, .card__media > img, .next__media img { transition-duration: 1ms !important; }
  a.card:hover, .plan:hover, .next__card:hover { transform: none !important; }
}