/* ForgeOS public site — the design system (FDS) and every signed-out page.
 *
 * Asked for on 2026-09-25: a new signed-out site "worthy of a category-defining
 * technology company", in the same navy and indigo. One idea carries it: name
 * the outcome, and ForgeOS finds the path, does the work and shows the proof.
 * Its visual signature is the Outcome Path (.path, .flow, .rail), a single
 * indigo-to-blue hairline from intent to a proof seal.
 *
 * Colour: every value is a platform token or a mix of two. Night sections are
 * fixed; day sections read the platform tokens, so the theme toggle and the
 * system setting both still work. No inline styles anywhere: the application
 * serves these pages under style-src 'self'.
 */
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url(/assets/fonts/geist-mono-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* Brand — the indigo family, and the spectrum blue as its cool partner */
  --indigo-700: #4338CA; --indigo-600: #4F46E5; --indigo-500: #6366F1; --indigo-400: #818CF8;
  --indigo-300: #A5B4FC; --indigo-200: #C7D2FE; --indigo-100: #E0E7FF; --indigo-050: #EEF2FF;
  --blue: #2563EB; --violet: #7C3AED; --pink: #DB2777; --orange: #F97316; --green: #16A34A;
  --blue-300: color-mix(in srgb, #2563EB 45%, #fff);

  /* Night — the canvas the brand lives on */
  --n-000: #07080D; --n-050: #0B0D14; --n-100: #0E1017; --n-200: #161923; --n-300: #1D2130; --n-400: #252A3B; --n-line: #272C3B; --n-line-2: #343A4E;
  --n-ink: #F5F6FA; --n-ink-2: #B4B9C8; --n-ink-3: #868CA0;

  /* Day — read from the platform tokens, so light and dark both work */
  --ink: var(--m19-ink); --ink-2: var(--m19-ink-2); --ink-3: var(--m19-ink-3); --ink-4: var(--m19-ink-4);
  --canvas: var(--m19-canvas); --surface: var(--m19-surface); --surface-2: var(--m19-surface-2); --surface-3: var(--m19-surface-3); --line: var(--m19-line); --line-2: var(--m19-line-strong);
  --tint-050: var(--m19-brand-050); --tint-100: var(--m19-brand-100); --tint-200: var(--m19-brand-200); --tint-ink: var(--m19-brand-700);

  /* State */
  --ok: var(--m19-state-success); --ok-ink: var(--m19-state-success-ink); --ok-soft: var(--m19-state-success-soft); --ok-n: #4ADE80;
  --warn: #F79009; --warn-soft: #FEF3E2; --err: #F04438; --err-soft: #FEECEB; --info: #2E90FA;

  /* The one gradient: intent (indigo) to outcome (blue) */
  --path: linear-gradient(90deg, var(--indigo-500), var(--blue));
  --path-text: linear-gradient(92deg, var(--indigo-300) 0%, #B7C5FF 45%, var(--blue-300) 100%);

  /* Type */
  --font: "Geist", Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-display: clamp(44px, 6.6vw, 96px);
  --t-h1: clamp(40px, 5.2vw, 72px);
  --t-h2: clamp(32px, 4vw, 54px);
  --t-h3: clamp(21px, 1.8vw, 26px);
  --t-lede: clamp(17px, 1.5vw, 21px);
  --t-body: 16px; --t-small: 14px; --t-micro: 12.5px;

  /* Space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 136px;

  /* Shape & depth */
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --e-1: 0 1px 2px rgba(16,24,40,.05);
  --e-2: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -10px rgba(16,24,40,.14);
  --e-3: 0 2px 4px rgba(16,24,40,.04), 0 36px 72px -24px rgba(16,24,40,.28);
  --e-n: 0 40px 80px -32px rgba(0,0,0,.75);
  --glow: 0 0 0 1px rgba(129,140,248,.28), 0 24px 64px -24px rgba(99,102,241,.55);
  --focus: 0 0 0 3px var(--n-100), 0 0 0 5px var(--indigo-300);

  --wrap: 1200px; --gutter: 24px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 640px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; }
body.site input::placeholder, body.site textarea::placeholder { color: var(--ink-3); opacity: 1; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body.site { margin: 0; font-family: var(--font); font-size: var(--t-body); line-height: 1.55; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.night { background: var(--n-100); color: var(--n-ink); position: relative; isolation: isolate; }
.night.deep { background: var(--n-050); }
.grid-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%); }
.aura { overflow: hidden; }
.aura::after { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: -320px; width: 1100px; height: 760px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(99,102,241,.34), transparent), radial-gradient(closest-side at 70% 60%, rgba(37,99,235,.22), transparent); filter: blur(20px); }
.hair { position: relative; }
.hair::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(165,180,252,.7), transparent); }

/* ── Type ─────────────────────────────────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--tint-ink); }
.night .eyebrow { color: var(--indigo-300); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.display { font-size: var(--t-display); line-height: .98; letter-spacing: -.048em; font-weight: 680; margin: 0; text-wrap: balance; }
.h1 { font-size: var(--t-h1); line-height: 1; letter-spacing: -.045em; font-weight: 680; margin: 0; text-wrap: balance; }
.h2 { font-size: var(--t-h2); line-height: 1.03; letter-spacing: -.04em; font-weight: 660; margin: 14px 0 0; text-wrap: balance; }
.h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.025em; font-weight: 620; margin: 0; }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-3); margin: 20px 0 0; max-width: 52ch; text-wrap: pretty; }
.night .lede { color: var(--n-ink-2); }
.path-text { background: var(--path-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mono { font-family: var(--mono); }
.center { text-align: center; } .center .lede, .center .h2 { margin-inline: auto; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 22px; border-radius: var(--r-pill); font: 600 15px/1 var(--font); letter-spacing: -.005em; border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), background .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--indigo-600); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px -10px rgba(79,70,229,.9); }
.btn-primary:hover { background: var(--indigo-500); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.night .btn-secondary { color: var(--n-ink); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.03); }
.btn-quiet { background: transparent; color: var(--tint-ink); padding: 0 6px; }
.night .btn-quiet { color: var(--indigo-300); }
.btn-sm { --h: 38px; padding: 0 16px; font-size: 14px; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn.is-loading { color: transparent; position: relative; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Chips, badges ────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.night .chip { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--n-ink-2); }
.chip.is-on { border-color: var(--tint-200); background: var(--tint-050); color: var(--tint-ink); }
.night .chip.is-on, .app .chip.is-on { border-color: rgba(129,140,248,.5); background: rgba(99,102,241,.14); color: var(--tint-200); }
.chip svg { width: 14px; height: 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge.live { background: var(--tint-050); color: var(--tint-ink); }
.badge.soon { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-3); }
.night .badge { background: rgba(255,255,255,.06); color: var(--n-ink-2); }
.night .badge.ok { background: rgba(18,183,106,.14); color: #86EFAC; }
.night .badge.live { background: rgba(99,102,241,.18); color: var(--tint-200); }
.night .badge.soon { background: transparent; border-color: rgba(255,255,255,.18); }
.concept { position: absolute; top: 12px; right: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--n-ink-3); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 3px 7px; background: rgba(0,0,0,.25); }

/* ── Product frame (the app, drawn as the app) ───────────────────────── */
.app { background: var(--n-200); border: 1px solid var(--n-line); border-radius: 18px; box-shadow: var(--e-n), var(--glow); overflow: hidden; color: var(--n-ink); text-align: left; }
.ask { background: var(--indigo-600); color: #fff; border-radius: 16px 16px 4px 16px; padding: 12px 15px; font-size: 15px; justify-self: end; max-width: 92%; box-shadow: 0 10px 26px -12px rgba(79,70,229,.9); }
.reply { font-size: 14.5px; color: var(--n-ink-2); line-height: 1.6; }
.reply b { color: var(--n-ink); font-weight: 600; }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--n-ink-3); }

/* The Outcome Path — the brand's signature primitive */
.path { position: relative; display: grid; gap: 10px; padding-left: 26px; }
.path::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--indigo-400), var(--blue) 70%, rgba(255,255,255,.12) 70%); }
.node { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 14px; color: var(--n-ink); }
.node::before { content: ""; position: absolute; left: -24px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--n-200); border: 2px solid var(--indigo-400); }
.node.done::before { background: var(--indigo-500); border-color: var(--indigo-500); box-shadow: 0 0 0 4px rgba(99,102,241,.16); }
.node.live::before { border-color: var(--blue-300); box-shadow: 0 0 0 5px rgba(37,99,235,.2); animation: pulse 1.8s var(--ease) infinite; }
.node.wait { color: var(--n-ink-3); } .node.wait::before { border-color: var(--n-line-2); border-style: dashed; }
.node small { font-family: var(--mono); font-size: 11.5px; color: var(--n-ink-3); }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(37,99,235,0); } }
.res { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; grid-column: 1 / -1; }
.res span { font-size: 12px; border: 1px solid var(--n-line-2); border-radius: 8px; padding: 3px 8px; color: var(--n-ink-2); background: rgba(255,255,255,.02); display: inline-flex; gap: 6px; align-items: center; }
.res span i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--indigo-400)); }

.seal { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 12px 14px; background: linear-gradient(90deg, rgba(99,102,241,.16), rgba(37,99,235,.12)); border: 1px solid rgba(129,140,248,.3); }
.seal .ring { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--path); color: #fff; box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
.seal .ring svg { width: 16px; height: 16px; }
.seal b { display: block; font-size: 14px; color: var(--n-ink); } .seal span { font-size: 12.5px; color: var(--n-ink-2); }
.decide { display: flex; gap: 8px; } .decide .btn { flex: 1; }

.preview { border-radius: 12px; overflow: hidden; background: #fff; color: var(--ink); border: 1px solid var(--n-line); }
.preview .bar { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #EEF0F5; }
.preview .bar i { width: 7px; height: 7px; border-radius: 50%; background: #CBD0DD; }
.preview .bar span { margin-left: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

@media (max-width: 900px) { .app-body { grid-template-columns: 1fr; } .app-main { border-right: 0; border-bottom: 1px solid var(--n-line); } }

/* ── Sections ─────────────────────────────────────────────────────────── */
.sec { padding-block: var(--s-10); }
.sec.sm { padding-block: var(--s-9); }
/* 56 and 44 on a phone, not 88 and 64: two neighbouring sections put 176px
   of empty page between them, most of a phone screen of nothing between
   every pair. Reported 2026-09-25 as the spacing on the main site being off. */
@media (max-width: 760px) { .sec { padding-block: 56px; } .sec.sm { padding-block: 44px; } }
.head { max-width: 760px; }
.head.center { margin-inline: auto; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--e-1); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--e-2); }
.night .card { background: rgba(22,25,35,.7); border-color: var(--n-line); box-shadow: none; }
.ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-050); color: var(--indigo-600); border: 1px solid var(--tint-100); }
.ico svg { width: 21px; height: 21px; }
.night .ico { background: rgba(99,102,241,.12); color: var(--indigo-300); border-color: rgba(129,140,248,.25); }

/* Footer */
.ftr { background: var(--n-050); color: var(--n-ink-2); padding: 80px 0 36px; border-top: 1px solid var(--n-line); font-size: 14px; }
.ftr-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 32px; }
.ftr-grid h6 { margin: 0 0 14px; font-size: 13px; color: var(--n-ink); font-weight: 600; }
.ftr-grid a { display: block; padding: 5px 0; }
.ftr-grid a:hover { color: var(--n-ink); }
.ftr-grid .brand { color: var(--n-ink); padding: 0; display: inline-flex; }
.ftr-grid p { max-width: 32ch; margin: 14px 0 0; }
.ftr-base { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--n-line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 900px) { .ftr-grid { grid-template-columns: 1fr 1fr; } .ftr-grid > div:first-child { grid-column: 1 / -1; } }

/* Homepage sections, built from FDS primitives. */
.hero { padding-top: 96px; padding-bottom: 0; text-align: center; overflow: hidden; }
.hero .display { max-width: 15ch; margin: 22px auto 0; }
.hero .lede { margin-inline: auto; max-width: 44ch; }
.hero .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.assure { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 13.5px; color: var(--n-ink-3); }
.assure span { display: inline-flex; align-items: center; gap: 7px; }
.assure svg { width: 14px; height: 14px; color: var(--indigo-300); }

.goal { background: rgba(0,0,0,.22); border: 1px solid var(--n-line-2); border-radius: 14px; padding: 12px 14px; }
.goal .t { font-size: 15.5px; color: var(--n-ink); }
.goal .row { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.goal .go { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--indigo-600); color: #fff; display: grid; place-items: center; }
.goal .go svg { width: 15px; height: 15px; }

/* Built-site preview inside the hero */
.studio { padding: 16px 18px 18px; background: #F9F7F3; font-size: 12px; color: #2A2622; }
.studio nav { display: flex; justify-content: space-between; align-items: center; }
.studio nav b { font-size: 15px; letter-spacing: -.02em; }
.studio nav span { display: flex; gap: 12px; color: #6E655C; }
.studio h5 { margin: 18px 0 6px; font-size: 26px; letter-spacing: -.035em; line-height: 1.02; font-weight: 650; }
.studio p { margin: 0 0 12px; color: #6E655C; font-size: 12.5px; }

/* Outputs vs outcomes */
.versus { display: grid; grid-template-columns: 1fr 1.35fr; gap: 20px; margin-top: 48px; }
.vcard { border-radius: var(--r-xl); padding: 28px; border: 1px solid var(--line); background: var(--surface); }
.vcard h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.03em; }
.vcard p { margin: 0; color: var(--ink-3); }
.vcard.model .out { margin-top: 26px; border: 1px dashed var(--line-2); border-radius: 14px; padding: 16px; font-size: 14px; color: var(--ink-3); background: var(--surface-2); line-height: 1.6; }
.vcard.model .out i { display: block; height: 8px; border-radius: 5px; background: var(--line); margin-top: 8px; }
.vcard.forge { background: var(--n-100); border-color: var(--n-line); color: var(--n-ink); position: relative; overflow: hidden; }
.vcard.forge p { color: var(--n-ink-2); }
.rail { margin-top: 26px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.rail .end { border-radius: 14px; border: 1px solid var(--n-line-2); padding: 12px 14px; font-size: 13.5px; background: rgba(255,255,255,.03); }
.rail .end b { display: block; font-size: 11px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-ink-3); font-weight: 500; margin-bottom: 4px; }
.rail .end.ok { border-color: rgba(129,140,248,.45); background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(37,99,235,.12)); }
.rail .mid { position: relative; display: flex; flex-wrap: nowrap; gap: 5px; justify-content: center; padding: 18px 0; }
.rail .mid::before { content: ""; position: absolute; left: -12px; right: -12px; top: 50%; height: 2px; background: var(--path); opacity: .9; z-index: 0; }
.rail .mid span { white-space: nowrap; position: relative; z-index: 1; font-size: 12px; border-radius: 999px; padding: 5px 10px; background: var(--n-200); border: 1px solid var(--n-line-2); color: var(--n-ink-2); }
@media (max-width: 900px) { .versus { grid-template-columns: 1fr; } .rail { grid-template-columns: 1fr; } .rail .mid::before { left: 50%; right: auto; top: -8px; bottom: -8px; width: 2px; height: auto; } }

/* Capabilities */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.cap { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); padding: 22px; display: grid; gap: 6px; align-content: start; min-height: 230px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.cap:hover { border-color: var(--tint-200); box-shadow: var(--e-2); }
.cap .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.vcard.forge .seal { margin-top: 20px; }
.cap h3 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.cap p { margin: 0; color: var(--ink-3); font-size: 14.5px; }
.cap .eg { margin-top: 14px; font-size: 13px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cap .eg b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; display: block; margin-bottom: 3px; }
.next { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); color: var(--ink-3); font-size: 14px; }
.next strong { color: var(--ink); font-weight: 600; margin-right: 6px; }
/* Availability, per advertised part (tools/forgeos_outcome_availability.py). */
.avail { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avail li { color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.avail-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; font: 500 11px/1.6 var(--mono); background: var(--surface-3); color: var(--ink-2); }
.avail-tag[data-availability=here] { background: var(--ok-soft); color: var(--ok-ink); }
.avail-tag[data-availability=experimental] { background: var(--tint-050); color: var(--tint-ink); }
.avail-tag[data-availability=not-yet] { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.avail-h { margin: 12px 0 6px; }
.night .avail-tag { background: rgba(255,255,255,.06); color: var(--n-ink-2); }
.night .avail-tag[data-availability=here] { background: rgba(18,183,106,.14); color: #86EFAC; }
.night .avail-tag[data-availability=experimental] { background: rgba(99,102,241,.18); color: #C7D2FE; }  /* fixed, like "here": --tint-200 turns dark in the dark theme (1.5:1) */
@media (max-width: 1000px) { .caps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .caps { grid-template-columns: 1fr; } .cap { min-height: 0; } }

/* How it works — the Outcome Path, laid flat */
.flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 56px; }
.flow::before { content: ""; position: absolute; left: 28px; right: calc((100% - 56px) / 5 - 28px); top: 27px; height: 2px; background: var(--path); opacity: .8; }
.fstep { position: relative; text-align: left; }
.fstep .num { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--n-200); border: 1px solid var(--n-line-2); color: var(--indigo-300); box-shadow: 0 0 0 6px var(--n-100); }
.fstep .num svg { width: 22px; height: 22px; }
.fstep:last-child .num { background: var(--path); color: #fff; border: 0; }
.fstep h3 { margin: 20px 0 6px; font-size: 19px; letter-spacing: -.025em; color: var(--n-ink); }
.fstep p { margin: 0; font-size: 14.5px; color: var(--n-ink-2); }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; gap: 22px; } .flow::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--indigo-500), var(--blue)); } .fstep { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; } .fstep h3 { margin: 4px 0 4px; } .fstep p { grid-column: 2; } }

/* Best path */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.facts { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 20px; }
.facts li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; }
.facts b { display: block; font-size: 16.5px; letter-spacing: -.015em; }
.facts span { color: var(--ink-3); font-size: 14.5px; }
.router { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--e-3); padding: 24px; display: grid; gap: 14px; }
.router .task { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; }
.router .task small { display: block; color: var(--ink-3); font-size: 12.5px; }
.router .pick { font-family: var(--mono); font-size: 12px; padding: 5px 10px; border-radius: 8px; background: var(--tint-050); color: var(--tint-ink); white-space: nowrap; }
.router .pick.up { background: color-mix(in srgb, var(--blue) 14%, var(--surface)); color: var(--m19-state-info-ink); }
.provs { display: flex; flex-wrap: wrap; gap: 6px; }
.provs span { font-size: 12.5px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 4px 10px; color: var(--ink-2); }
.provs span.hl { background: var(--tint-050); border-color: var(--tint-100); color: var(--tint-ink); }
.conns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.conns div { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 6px; font-size: 13.5px; }
.conns div svg { width: 20px; height: 20px; color: var(--ink); }
.conns small { color: var(--ink-3); font-size: 12px; }

/* Proof */
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.proof-panel { border-radius: var(--r-xl); border: 1px solid var(--n-line); background: var(--n-200); padding: 24px; display: grid; gap: 14px; align-content: start; }
.proof-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--n-line); border: 1px solid var(--n-line); border-radius: var(--r-xl); overflow: hidden; }
.proof-list li { background: var(--n-100); padding: 22px 22px 22px 70px; position: relative; }
.proof-list li svg { position: absolute; left: 22px; top: 22px; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: rgba(99,102,241,.14); color: var(--indigo-300); }
.proof-list b { display: block; font-size: 16.5px; color: var(--n-ink); letter-spacing: -.015em; }
.proof-list span { color: var(--n-ink-2); font-size: 14.5px; }
.honest { margin-top: 20px; display: flex; gap: 14px; align-items: flex-start; border-radius: var(--r-lg); border: 1px solid rgba(247,144,9,.35); background: rgba(247,144,9,.08); padding: 16px 18px; color: var(--n-ink-2); font-size: 14.5px; }
.honest b { color: var(--n-ink); }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }

/* Control ladder */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 48px; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.rung { padding: 26px 22px; border-right: 1px solid var(--line); position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.rung .gate { margin-top: auto !important; }
.rung p { margin-bottom: 16px !important; }
.rung:last-child { border-right: 0; }
.rung .step { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; }
.rung h3 { margin: 12px 0 6px; font-size: 20px; letter-spacing: -.025em; }
.rung p { margin: 0; font-size: 14.5px; color: var(--ink-3); }
.rung .gate { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tint-ink); background: var(--tint-050); border-radius: 999px; padding: 5px 10px; }
.rung .gate svg { width: 13px; height: 13px; }
.rung:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 32px; width: 16px; height: 16px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface); transform: rotate(45deg); z-index: 1; }
.also { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; color: var(--ink-3); font-size: 14.5px; }
.also span { display: inline-flex; align-items: center; gap: 8px; }
.also svg { width: 17px; height: 17px; color: var(--indigo-600); }
@media (max-width: 900px) { .ladder { grid-template-columns: 1fr 1fr; } .rung:nth-child(2) { border-right: 0; } .rung:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .rung::after { display: none; } }
@media (max-width: 520px) { .ladder { grid-template-columns: 1fr; } .rung { border-right: 0; border-bottom: 1px solid var(--line); } .rung:last-child { border-bottom: 0; } }

/* People */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.person { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); padding: 20px; display: grid; gap: 14px; align-content: start; }
.person .who { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.person .who i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 13px; color: #fff; background: var(--c); }
.person q { quotes: none; font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.person .got { font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; display: flex; gap: 8px; }
.person .got svg { width: 15px; height: 15px; color: var(--ok); flex: none; margin-top: 2px; }
@media (max-width: 1000px) { .people { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .people { grid-template-columns: 1fr; } }

/* Closing */
.close { text-align: center; padding-block: 136px; overflow: hidden; }
.close .display { font-size: clamp(40px, 6vw, 84px); max-width: 13ch; margin: 18px auto 0; }
.composer { max-width: 720px; margin: 40px auto 0; text-align: left; background: rgba(22,25,35,.85); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 18px 18px 14px 20px; box-shadow: var(--glow); }
.composer .t { font-size: 17px; color: var(--n-ink-3); }
.composer .row { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.composer .go { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo-600); color: #fff; display: grid; place-items: center; }
.composer .go svg { width: 17px; height: 17px; }
@media (max-width: 640px) { .close { padding-block: 72px; } .composer .row .chip:nth-child(n+3) { display: none; } }

/* Phone: compact rather than endless */
@media (max-width: 640px) {
  .caps { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 36px; }
  .cap { padding: 16px; gap: 4px; }
  .cap .top { margin-bottom: 6px; }
  .cap .ico { width: 36px; height: 36px; }
  .cap h3 { font-size: 17px; }
  .cap p { font-size: 13.5px; line-height: 1.45; }
  .cap .eg { display: none; }
  .people { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .person { flex: 0 0 80%; scroll-snap-align: start; }
  .vcard { padding: 22px; }
}
@media (max-width: 900px) { .fstep .num { grid-row: span 2; } .fstep h3 { align-self: end; } .fstep p { align-self: start; } }
@media (max-width: 640px) { .router { padding: 18px; } .router .task { grid-template-columns: 1fr; } .router .pick { justify-self: start; } .conns { grid-template-columns: 1fr; } .conns div { grid-template-columns: 22px 1fr; align-items: center; } .conns small { grid-column: 2; } }
@media (max-width: 430px) { .hero .display { font-size: 37px; letter-spacing: -.045em; } .hero .eyebrow { font-size: 11px; } }

/* Inner pages: platform, trust, pricing, auth. FDS primitives only. */
.page-hero { padding-top: 104px; padding-bottom: 96px; overflow: hidden; }
.page-hero .h1 { max-width: 16ch; margin-top: 20px; }
.page-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.page-hero.center { text-align: center; } .page-hero.center .h1 { margin-inline: auto; } .page-hero.center .lede { margin-inline: auto; } .page-hero.center .ctas { justify-content: center; }
@media (max-width: 640px) { .page-hero { padding-top: 72px; padding-bottom: 64px; } }

/* Anatomy of a run */
.anatomy { display: grid; grid-template-columns: 300px 1fr; gap: 56px; margin-top: 56px; align-items: start; }
.stages { position: relative; display: grid; gap: 4px; }
.stages::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, var(--indigo-500), var(--blue)); }
.stage { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 10px 12px 10px 0; border-radius: 14px; }
.stage i { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 12px; background: var(--surface); border: 1px solid var(--tint-200); color: var(--tint-ink); }
.stage b { font-size: 16px; letter-spacing: -.015em; }
.stage.on { background: var(--tint-050); }
.stage.on i { background: var(--indigo-600); color: #fff; border-color: var(--indigo-600); box-shadow: 0 0 0 5px var(--tint-100); }
.record { display: grid; gap: 14px; }
.rec-row { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.rec-row h4 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.rec-row h4 small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.rec-row p { margin: 0; color: var(--ink-3); font-size: 14.5px; }
.rec-row .kept { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 960px) { .anatomy { grid-template-columns: 1fr; gap: 28px; } .stages { display: none; } .rec-row { grid-template-columns: 1fr; gap: 6px; } }

/* Output kinds */
.kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.kind { border: 1px solid var(--n-line); border-radius: 18px; padding: 20px; background: rgba(22,25,35,.6); }
.kind h3 { margin: 12px 0 10px; font-size: 17px; letter-spacing: -.02em; color: var(--n-ink); }
.kind ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kind li { font-size: 12.5px; color: var(--n-ink-2); border: 1px solid var(--n-line-2); border-radius: 999px; padding: 3px 10px; }
.kinds-note { margin-top: 18px; font-size: 14px; color: var(--n-ink-3); }
.kinds-note a { color: var(--indigo-300); text-decoration: underline; text-underline-offset: 3px; }
/* The availability key sits under the connections, in a light section: the
   night palette above is below contrast there. */
.sec:not(.night) .avail-key { color: var(--ink-3); }
.sec:not(.night) .avail-key a { color: inherit; }
@media (max-width: 1000px) { .kinds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kinds { grid-template-columns: 1fr; } }

/* Status table (connections) */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 40px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); font-size: 14.5px; }
.tbl th, .tbl td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; background: var(--surface-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 600; white-space: nowrap; }
.tbl td .sub { display: block; color: var(--ink-3); font-weight: 400; }
.tbl.limits td:first-child { white-space: normal; }
@media (max-width: 700px) { .tbl thead { display: none; } .tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .tbl tr:last-child { border-bottom: 0; } .tbl td { padding: 0; border: 0; } .tbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--ink-3); } .tbl td:nth-child(3) { grid-column: 2; grid-row: 1; } }

/* Developer strip */
.dev { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.codeblock { background: var(--n-050); border: 1px solid var(--n-line); border-radius: 18px; overflow: hidden; color: var(--n-ink-2); }
.codeblock .cb-top { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--n-line); }
.codeblock .cb-top span { font-size: 12.5px; padding: 6px 12px; border-radius: 9px; color: var(--n-ink-3); }
.codeblock .cb-top span.on { background: var(--n-300); color: var(--n-ink); }
.codeblock pre { margin: 0; padding: 18px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.75; white-space: pre-wrap; }
.codeblock .k { color: #C4B5FD; } .codeblock .s { color: #86EFAC; } .codeblock .c { color: var(--n-ink-3); }
@media (max-width: 900px) { .dev { grid-template-columns: 1fr; } }

/* Trust: authority map + facts */
.authmap { margin-top: 48px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: hidden; }
.authmap .row, .authmap .auth-branch { display: grid; grid-template-columns: 180px 1fr auto; gap: 20px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.authmap .row:last-child, .authmap .auth-branch:last-child { border-bottom: 0; }
.authmap :is(.row, .auth-branch) b { font-size: 16px; letter-spacing: -.015em; display: flex; gap: 10px; align-items: center; }
.authmap :is(.row, .auth-branch) b svg { width: 18px; height: 18px; color: var(--indigo-600); }
.authmap :is(.row, .auth-branch) span:not(.who) { color: var(--ink-3); font-size: 14.5px; }
.authmap .who { justify-self: end; white-space: nowrap; }
.authmap .auth-branch { background: var(--surface-2); }
@media (max-width: 760px) { .authmap .row, .authmap .auth-branch { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; } .authmap .who { justify-self: start; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.grid-3 .card h3 { margin: 16px 0 6px; font-size: 18px; letter-spacing: -.02em; }
.grid-3 .card p { margin: 0; color: var(--ink-3); font-size: 14.5px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
.notyet { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.notyet > div { border-radius: 20px; padding: 24px; }
.notyet .have { background: var(--surface); border: 1px solid var(--line); }
.notyet .dont { border: 1px dashed var(--line-2); }
.notyet h3 { margin: 0 0 14px; font-size: 18px; }
.notyet ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.notyet li { display: flex; gap: 10px; }
.notyet li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.notyet .have svg { color: var(--ok); } .notyet .dont svg { color: var(--ink-3); }
@media (max-width: 800px) { .notyet { grid-template-columns: 1fr; } }
.measure { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.measure .m { border: 1px solid var(--n-line); border-radius: 20px; padding: 24px; background: var(--n-200); }
.measure .m strong { display: block; font-size: 44px; letter-spacing: -.04em; color: var(--n-ink); line-height: 1; }
.measure .m span { display: block; margin-top: 10px; color: var(--n-ink-2); font-size: 14.5px; }
.measure .m em { display: block; margin-top: 12px; font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--n-ink-3); }
@media (max-width: 900px) { .measure { grid-template-columns: 1fr; } }

/* Pricing */
.plan { max-width: 960px; margin: -56px auto 0; position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--e-3); overflow: hidden; }
.plan .l, .plan .r { padding: 40px; }
.plan .r { background: var(--surface-2); border-left: 1px solid var(--line); }
.plan .big { font-size: 80px; font-weight: 680; letter-spacing: -.05em; line-height: 1; margin-top: 10px; }
.plan .big small { font-size: 18px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.plan .note { color: var(--ink-3); font-size: 15px; margin: 12px 0 26px; }
.incl { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.incl li { display: flex; gap: 12px; font-size: 15.5px; color: var(--ink-2); }
.incl .ok { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.incl .ok svg { width: 12px; height: 12px; }
.meter { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.meter .top { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-3); }
.meter .top b { color: var(--ink); }
.meter .track { margin: 12px 0 8px; height: 10px; border-radius: 99px; background: var(--surface-3); position: relative; }
.meter .track i { position: absolute; inset: 0 44% 0 0; border-radius: 99px; background: var(--path); }
.meter .track em { position: absolute; right: 18%; top: -6px; width: 2px; height: 22px; background: var(--ink); border-radius: 2px; }
.meter small { font-size: 12.5px; color: var(--ink-3); }
.qa { max-width: 780px; margin: 40px auto 0; display: grid; gap: 10px; }
.qa details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
.qa summary { cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--indigo-600); font-size: 22px; line-height: 1; }
.qa details[open] summary::after { content: "–"; }
.qa p { margin: 10px 0 0; color: var(--ink-3); }
@media (max-width: 820px) { .plan { grid-template-columns: 1fr; margin-top: -32px; } .plan .r { border-left: 0; border-top: 1px solid var(--line); } .plan .l, .plan .r { padding: 26px 22px; } .plan .big { font-size: 64px; } }

/* Auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--surface); }
.auth-form { display: flex; flex-direction: column; padding: 28px 56px; }
.auth-form .brand { color: var(--ink); }
.auth-box { margin: auto 0; width: 100%; max-width: 400px; align-self: center; }
.auth-box h1 { font-size: 40px; letter-spacing: -.045em; line-height: 1.05; margin: 0; }
.auth-box > p { margin: 10px 0 28px; color: var(--ink-3); }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field label a { color: var(--indigo-600); font-weight: 500; }
.field input { height: 50px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); }
.field input:focus { outline: none; border-color: var(--indigo-500); box-shadow: 0 0 0 4px rgba(99,102,241,.16); }
.field.err input { border-color: var(--err); box-shadow: 0 0 0 4px rgba(240,68,56,.12); }
.field .msg { font-size: 13px; color: #B42318; display: flex; gap: 6px; align-items: center; }
.auth-box .btn-primary.wide { width: 100%; min-height: 52px; font-size: 16px; margin-top: 6px; }
.or { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 22px 0; color: var(--ink-3); font-size: 13px; }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); }
.btn-gh { width: 100%; min-height: 50px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.btn-gh svg { width: 18px; height: 18px; }
.auth-alt { text-align: center; margin-top: 22px; font-size: 15px; color: var(--ink-3); }
.auth-alt a { color: var(--indigo-600); font-weight: 600; }
.auth-fine { margin-top: auto; font-size: 12.5px; color: var(--ink-3); }
.auth-art { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 56px; }
.auth-art .stack { width: 100%; max-width: 460px; display: grid; gap: 16px; }
.auth-art .quote { position: absolute; left: 56px; right: 56px; bottom: 48px; font-size: 24px; letter-spacing: -.025em; line-height: 1.3; color: var(--n-ink); max-width: 24ch; }
.auth-art .quote span { display: block; margin-top: 10px; font-size: 14px; letter-spacing: 0; color: var(--n-ink-2); }
@media (max-width: 960px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } .auth-form { padding: 20px 16px 28px; } .auth-box h1 { font-size: 34px; } }

/* Design system sheet */
.ds { padding-block: 72px; }
.ds h2 { font-size: 28px; letter-spacing: -.03em; margin: 56px 0 18px; }
.sw { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.sw div { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); font-size: 12px; }
.sw div i { display: block; height: 72px; background: var(--c); }
.sw div span { display: block; padding: 8px 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.sw div span b { display: block; font-family: var(--font); font-size: 12.5px; color: var(--ink); font-weight: 600; }
.type-row { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.type-row code { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.comp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.comp > div { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: var(--surface); display: grid; gap: 12px; align-content: start; }
.comp > div.dark { background: var(--n-100); border-color: var(--n-line); }
.comp h4 { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.comp .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn.is-hover { background: var(--indigo-500); transform: translateY(-1px); }
.btn.is-focus { box-shadow: var(--focus); }
@media (max-width: 900px) { .sw { grid-template-columns: repeat(4, 1fr); } .comp { grid-template-columns: 1fr; } }

@media (max-width: 640px) { .type-row { grid-template-columns: 1fr; gap: 6px; } .type-row .display { font-size: 44px !important; } }

/* ── Header: the hooks site.js and theme.js drive (.topbar-inner, .nav,
   .nav-toggle, .row, .theme-toggle) keep their names ───────────────────── */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(14,16,23,.94); backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid rgba(255,255,255,.06); color: var(--n-ink); }
.topbar-inner { display: flex; align-items: center; height: 68px; gap: 28px; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.topbar .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--n-ink); }
.topbar .brand img { width: 24px; height: 24px; }
/* Inline beside the name it read "ForgeOSby Medina19" at desktop widths. */
.topbar .brand small { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--n-ink-3); letter-spacing: .02em; }
.topbar .nav { display: flex; gap: 4px; font-size: 14.5px; }
.topbar .nav a { padding: 8px 12px; border-radius: 10px; color: var(--n-ink-2); }
.topbar .nav a:hover, .topbar .nav a[aria-current="page"] { color: var(--n-ink); background: rgba(255,255,255,.06); }
.topbar .row { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.topbar .row .link { color: var(--n-ink-2); padding: 8px 10px; border-radius: 10px; }
.topbar .row .link:hover { color: var(--n-ink); }
.theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,.12); color: var(--n-ink-3); border-radius: var(--r-pill); height: 34px; padding: 0 12px; font: 500 12.5px/1 var(--font); cursor: pointer; }
.theme-toggle:hover { color: var(--n-ink); }
.nav-toggle { display: none; margin-left: auto; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--n-ink); font: 600 14px/1 var(--font); cursor: pointer; order: 3; }
/* flex: none -- as a flex item the icon shrank to 2.9px on a phone and the
   Menu button showed a dot where its three lines belong. */
.nav-toggle svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 1020px) {
  .topbar .nav { display: none; }
  .topbar .row .theme-toggle, .topbar .row .link { display: none; }
  .topbar .row { margin-left: auto; }
  .nav-toggle { display: inline-flex; margin-left: 0; }
  .topbar .nav[data-open] { display: grid; position: absolute; left: 0; right: 0; top: 68px; gap: 2px; padding: 12px var(--gutter) 20px; background: var(--n-100); border-bottom: 1px solid var(--n-line); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
  .topbar .nav[data-open] a { padding: 14px 12px; font-size: 16px; }
  .nav-sheet-theme { padding: 12px; }
  .nav-sheet-theme .theme-toggle { display: inline-flex; align-items: center; }
}
@media (max-width: 1020px) { .topbar .row .btn-primary { min-height: 40px; } }
/* On a phone the byline wrapped after its first word, "ForgeOSby" over
   "Medina19"; it goes under the name whole instead. */
@media (max-width: 760px) {
  .topbar .brand span { display: flex; flex-direction: column; line-height: 1.15; }
  .topbar .brand small { white-space: nowrap; margin: 1px 0 0; }
}
@media (max-width: 380px) { .topbar .brand small { display: none; } }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--indigo-600); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 1em; height: 1em; }

/* Layout helpers, so the markup carries no style attributes */
.band { background: var(--surface); border-block: 1px solid var(--line); }
.pt-0 { padding-top: 0 !important; }
.pb-lg { padding-bottom: 128px; }
.ctas-center { margin-top: 28px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.mt-0 { margin-top: 0 !important; }
.chip-dim { color: var(--n-ink-3); }
.label-day { color: var(--ink-3); }
.pick.ok { background: var(--ok-soft); color: var(--ok-ink); }
.honest svg { color: #FDB022; flex: none; width: 20px; height: 20px; }
.provs { margin-top: 8px; }
.dev-list { display: grid; gap: 18px; align-content: start; }
.dev-list .item { display: flex; gap: 14px; }
.dev-list .item div { color: var(--ink-3); font-size: 14.5px; }
.dev-list .item b { display: block; color: var(--ink); font-size: 15.5px; }
.dev-list .btn { justify-self: start; }
.notyet .ask-us { margin: 18px 0 0; color: var(--ink-3); font-size: 14.5px; }
.notyet .ask-us a { color: var(--tint-ink); font-weight: 600; }
.plan .cta { margin-top: 28px; }
.plan .note.tight { margin: 8px 0 0; }
.plan .h3 { margin-top: 10px; }
.meter + .meter { margin-top: 12px; }
.auth-art .app { padding: 18px; }
.auth-art .path { margin-top: 14px; }
.auth-art .decide { margin-top: 16px; }
.hidden-social[hidden] { display: none; }

/* Footer */
.ftr .theme-note { color: var(--n-ink-3); }
.ftr-base a:hover { color: var(--n-ink); }

/* ── Semantic markup resets and class-based variants (no style attributes) ── */
.assure { list-style: none; padding: 0; }
.flow, .ladder, .stages { list-style: none; padding: 0; margin-bottom: 0; }
/* margin-bottom only: margin-block here, later in the file than .flow's 56px
   and .ladder's 48px, zeroed both, and "From intent to outcome." sat on its
   first step with no gap at all. .stages has no margin of its own. */
.stages { margin-top: 0; }
.also { list-style: none; padding: 0; }
figure.person { margin: 0; }
.person blockquote { margin: 0; font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.person .got { margin: 0; }
.person figcaption.who { margin: 0; }
.examples-note { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }
.rec-row h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.rec-row h3 small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.r-indigo { --c: var(--indigo-400); } .r-blue { --c: var(--blue); } .r-green { --c: var(--green); }
.c-indigo { --c: var(--indigo-600); } .c-pink { --c: var(--pink); } .c-green { --c: var(--green); } .c-blue { --c: var(--blue); }
.out .w92 { width: 92%; } .out .w78 { width: 78%; } .out .w60 { width: 60%; }
.studio .time { font-family: var(--mono); font-size: 11px; color: #6E655C; }
a.composer { display: block; color: inherit; transition: border-color .2s; }
a.composer:hover { border-color: rgba(165,180,252,.5); }
a.composer .row, a.composer .t { display: flex; }
.decide .btn { cursor: default; }
.decide .btn:hover { transform: none; }
.ftr-h { margin: 0 0 14px; font-size: 13px; color: var(--n-ink); font-weight: 600; }
.ftr-grid nav a { display: block; padding: 5px 0; }
.ftr-grid nav a:hover { color: var(--n-ink); }
.topbar .nav .nav-signin { display: none; }
@media (max-width: 1020px) { .topbar .nav[data-open] .nav-signin { display: block; } }
a.inline { color: var(--tint-ink); text-decoration: underline; text-underline-offset: 3px; }
.night a.inline { color: var(--indigo-300); }
.fineprint { margin: 20px 0 0; font-size: 14px; color: var(--ink-3); max-width: 78ch; }
.night-fine { color: var(--n-ink-3); }
/* The measurement note is written by its own tool with class="muted", a day-ink tone;
   on the night ground it takes the night ink, and its link the night link colour. */
.night-fine .muted { color: inherit; }
.night-fine a:not(.btn) { color: var(--indigo-300); text-decoration: underline; text-underline-offset: 3px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
.authmap .who { text-transform: capitalize; }
.authmap :is(.row, .auth-branch) b { text-transform: none; }
.notyet li span b { color: var(--ink); }
.plan .big { margin-bottom: 0; }
.assure li { display: inline-flex; align-items: center; gap: 7px; }

/* The eight-beat loop: two rows of four on desktop */
.flow-8 { grid-template-columns: repeat(4, 1fr); row-gap: 40px; }
.flow-8::before { right: calc((100% - 42px) / 4 - 28px); }
@media (min-width: 901px) { .flow-8 .fstep:nth-child(n+5) .num { box-shadow: 0 0 0 6px var(--n-100); } }
.scoped { margin: 22px 0 0; max-width: 78ch; color: var(--ink-2); font-size: 15px; }

/* The fine print: progressive disclosure for everything a careful reader asks */
.fine-box { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.fine-box > summary { list-style: none; cursor: pointer; padding: 24px 28px; display: grid; gap: 4px; position: relative; }
.fine-box > summary::-webkit-details-marker { display: none; }
.fine-box > summary::after { content: "+"; position: absolute; right: 28px; top: 22px; font-size: 26px; color: var(--tint-ink); }
.fine-box[open] > summary::after { content: "–"; }
.fine-box > summary h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.fine-hint { color: var(--ink-3); font-size: 14.5px; padding-right: 32px; }
.fine-body { padding: 0 28px 28px; max-width: 86ch; color: var(--ink-2); }
.fine-body h3 { margin: 28px 0 8px; font-size: 17px; letter-spacing: -.015em; color: var(--ink); }
.fine-body p { margin: 0 0 10px; font-size: 15px; }
.muted { color: var(--ink-3); font-size: 14px; }
.fine-body .warn { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--m19-state-warning-soft); color: var(--m19-state-warning-ink); }
.table-wrap { overflow-x: auto; border-radius: 16px; }
.tbl.states { margin-top: 0; }
/* Inset past the table's rounded corner, which clips its own box, caption too. */
.tbl caption { text-align: left; padding: 0 18px 10px; color: var(--ink-3); font-size: 13px; caption-side: top; }
.qa details .tbl { margin-top: 0; }
.pill { display: inline-flex; font-family: var(--mono); font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill-idle { background: var(--surface-3); color: var(--ink-2); }
.pill-info { background: var(--tint-050); color: var(--tint-ink); }
.pill-go { background: var(--ok-soft); color: var(--ok-ink); }
.pill-wait { background: var(--m19-state-warning-soft); color: var(--m19-state-warning-ink); }
.pill-stop { background: var(--m19-state-danger-soft); color: var(--m19-state-danger-ink); }
@media (max-width: 900px) { .flow-8 { grid-template-columns: 1fr; row-gap: 22px; } }
@media (max-width: 640px) { .fine-box > summary { padding: 18px 18px; } .fine-box > summary::after { right: 18px; top: 16px; } .fine-body { padding: 0 18px 20px; } }
.promises{border-bottom:1px solid var(--line);background:var(--surface)}
.promise-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-block:22px}
.promise{display:flex;gap:12px;align-items:flex-start}
.promise>svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--indigo-600)}
.os-stat-value{margin:0;font-weight:600;font-size:15px;color:var(--ink)}
.os-stat-label{margin:2px 0 0;font-size:13px;color:var(--ink-3)}
@media (max-width:820px){.promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.promise-grid{grid-template-columns:1fr}}
@media (max-width: 360px) { .topbar .row .btn-primary { display: none; } }

/* Recorded runs on the homepage: the same card, read top to bottom, one column on a phone. */
.caps.runs { margin-top: 32px; }
.caps.runs .cap { min-height: 0; }
.caps.runs .cap b { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
@media (max-width: 640px) { .caps.runs { grid-template-columns: 1fr; } }

/* simple-v1: public pages -- tap-to-open cards and "more" disclosures */
.tap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 18px; align-items: start; }
.tap-card, .more { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: var(--ink-2); text-align: left; transition: border-color .15s ease; }
.tap-card > summary, .more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 44px; font-weight: 600; color: var(--ink); border-radius: 16px; }
.tap-card > summary::-webkit-details-marker, .more > summary::-webkit-details-marker { display: none; }
.tap-card > summary::after, .more > summary::after { content: "+"; margin-left: auto; color: var(--tint-ink); font-size: 20px; line-height: 1; }
.tap-card[open] > summary::after, .more[open] > summary::after { content: "–"; }
.tap-card > summary small { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 500; }
.tap-card > :not(summary), .more > :not(summary) { margin: 0; padding: 0 16px 14px; }
.tap-card:hover, .more:hover, .tap-card[open], .more[open] { border-color: var(--tint-200); }
.tap-card > summary:focus-visible, .more > summary:focus-visible { box-shadow: var(--focus); }
.more { margin-top: 14px; }
.more > .table-wrap, .more > .codeblock, .more > .tbl { margin: 0 16px 16px; padding: 0; }
.night .tap-card, .night .more { background: var(--n-200); border-color: var(--n-line); color: var(--n-ink-2); }
.night .tap-card > summary, .night .more > summary { color: var(--n-ink); }
.night .tap-card > summary::after, .night .more > summary::after, .night .tap-card > summary small { color: var(--indigo-300); }
.night .tap-card:hover, .night .more:hover, .night .tap-card[open], .night .more[open] { border-color: var(--n-line-2); }
.qa details { transition: border-color .15s ease; }
.qa details:hover, .qa details[open] { border-color: var(--tint-200); }
.qa summary:focus-visible { box-shadow: var(--focus); }
.qa details > :not(summary) { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .tap-card, .more, .qa details { transition: none; } }

/* ── The homepage asks first (owner, 2026-10-08: "like Replit") ───────────────
   One question, one box, a row of starts. The first screen is the box; what
   ForgeOS is and what it has made sit below it for anyone who scrolls. */
.ask-hero { min-height: calc(100svh - 64px); display: flex; align-items: center; padding: 48px 0 56px; text-align: center; }
.ask-hero .wrap { width: 100%; max-width: 760px; }
.ask-hero .display { font-size: clamp(40px, 7vw, 68px); max-width: none; margin: 0; }
.ask-hero .lede { margin: 16px auto 0; max-width: 46ch; color: var(--ink-2); }
.ask-box { position: relative; margin: 36px auto 0; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px 72px 18px 20px; box-shadow: var(--e-1); }
.ask-box:focus-within { border-color: var(--indigo-400); box-shadow: 0 0 0 4px var(--tint-050), var(--e-1); }
.ask-box textarea { display: block; width: 100%; min-height: 56px; max-height: 40vh; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; line-height: 1.45; }
.ask-box textarea::placeholder { color: var(--ink-3); }
.ask-box textarea:focus-visible { box-shadow: none; }
.ask-go { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-600); color: #fff; cursor: pointer; }
.ask-go:hover { background: var(--indigo-500); }
.ask-go:focus-visible { outline: 3px solid var(--indigo-300); outline-offset: 2px; }
.ask-go svg { width: 20px; height: 20px; }
.ask-kinds { display: flex; gap: 10px; justify-content: center; margin: 22px -16px 0; padding: 4px 16px; overflow-x: auto; scrollbar-width: none; }
.ask-kinds::-webkit-scrollbar { display: none; }
.ask-kind { flex: 0 0 auto; display: grid; justify-items: center; gap: 8px; min-width: 76px; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.ask-kind .ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ask-kind:hover .ico, .ask-kind:focus-visible .ico { border-color: var(--indigo-400); }
.ask-kind:focus-visible { outline: none; }
.ask-kind svg { width: 22px; height: 22px; }
.ask-note { margin: 26px 0 0; font-size: var(--t-small); color: var(--ink-3); }
/* Which starts above are experimental, computed with the row it sits under. */
.ask-avail { margin-top: 14px; }
@media (max-width: 560px) {
  /* A phone sees the box and every kind at once: no screenful of empty hero
     above them, and no sideways scroller with its last kind cut off at the
     edge (390px, 2026-10-10). */
  .ask-hero { min-height: 0; align-items: flex-start; padding: 28px 0 40px; }
  .ask-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; margin: 22px 0 0; padding: 4px 0; overflow: visible; }
  .ask-kind { min-width: 0; }
}
.ask-examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 22px; }
.ask-examples-h { width: 100%; font-size: var(--t-small); color: var(--ink-3); }
.ask-examples .chip { cursor: pointer; font: inherit; font-size: 13px; }
/* The charter on /trust: what ForgeOS will never do. */
.never { max-width: 780px; margin: 32px auto 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.never li { padding: 14px 18px 14px 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); position: relative; line-height: 1.5; }
.never li::before { content: "✕"; position: absolute; left: 18px; top: 14px; color: var(--ink-3); }