/* =============================================================================
   slides.css — Harla pre-seed deck stylesheet (standalone, unscoped)
   Import once at the app root (e.g. in app/layout.tsx or _app.tsx).

   Contents
     1. Brand fonts (@font-face) — self-hosted woff2 under /public/fonts
     2. Design tokens (:root custom properties)
     3. Base type helpers (.h-display, .metric, .label …)
     4. Deck canvas + chrome (.bg, .pad, .chrome, .eyebrow, .mark)
     5. Type helpers (.kicker, .head, .lede, .ul, .gold, .dim, .cap)
     6. The signature glass card (.glass)
     7. Entrance animation gate ([data-deck-active] .anim…) + @keyframes
     8. Per-template layout classes
   ============================================================================= */

/* === 1 · Brand fonts ====================================================== */
/* Inter Tight — headlines & metrics */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-tight-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-tight-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-tight-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-tight-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-tight-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/inter-tight-latin-500-italic.woff2') format('woff2');}
/* Manrope — body copy */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-latin-800-normal.woff2') format('woff2');}
/* Inter Tight italic — used for label accents */
@font-face{font-family:'Inter Tight';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/inter-tight-latin-400-italic.woff2') format('woff2');}

/* === 2 · Design tokens ==================================================== */
:root {
  /* Font families */
  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-label:   'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'Manrope', system-ui, sans-serif;

  /* Ink — the midnight ground */
  --ink-950: #06090F;
  --ink-900: #0A0E18;
  --ink-850: #0B0F1B;
  --ink-800: #10141F;
  --ink-700: #161B29;
  --ink-600: #1F2535;
  --ink-500: #2B3243;

  /* Ink ramp — now the primary text on white (markup uses --cream-* for text) */
  --cream:      #15181E;   /* charcoal — primary text */
  --cream-200:  #20242C;
  --cream-dim:  rgba(21, 24, 30, 0.74);   /* secondary grey */
  --cream-mute: rgba(21, 24, 30, 0.55);   /* muted grey */
  --cream-faint:rgba(21, 24, 30, 0.40);   /* faint grey — labels */
  --cream-line: rgba(21, 24, 30, 0.13);
  --cream-line-strong: rgba(21, 24, 30, 0.22);

  /* Green — the single brand accent, tuned legible on white */
  --green:        #0E8A45;
  --green-text:   #0C7A3E;
  --green-bright: #109A50;
  --green-deep:   #0A6B35;
  --green-glow:   rgba(14, 138, 69, 0.30);
  --green-wash:   rgba(14, 138, 69, 0.10);
  --green-line:   rgba(14, 138, 69, 0.34);

  /* Functional */
  --positive: #7FB995;
  --warning:  #D9A865;
  --negative: #C97A66;

  /* Semantic — light ground */
  --bg:            #FFFFFF;
  --bg-raised:     #FFFFFF;
  --surface:       #F4F5F3;
  --surface-hover: #ECEEEB;

  --fg:        var(--cream);
  --fg-muted:  var(--cream-dim);
  --fg-subtle: var(--cream-mute);
  --fg-faint:  var(--cream-faint);

  --accent:        var(--green);
  --accent-hover:  var(--green-bright);
  --accent-press:  var(--green-deep);
  --on-accent:     #053C20;

  --border:        var(--cream-line);
  --border-strong: var(--cream-line-strong);
  --divider:       rgba(255, 249, 232, 0.08);

  /* Glass */
  --glass-bg:      rgba(16, 20, 31, 0.62);
  --glass-bg-solid:rgba(13, 17, 27, 0.92);
  --glass-border:  rgba(255, 249, 232, 0.14);
  --glass-top:     rgba(255, 249, 232, 0.10);
  --glass-blur:    22px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7);
  --shadow-glass: 0 24px 60px -24px rgba(0,0,0,0.75),
                  inset 0 1px 0 0 var(--glass-top);
  --ring: 0 0 0 3px var(--green-wash), 0 0 0 1px var(--green-line);

  /* Spacing — 4px base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;
}

/* === 3 · Base type helpers (from foundations) ============================= */
.harla-type-base {
  font-family: var(--font-body);
  color: var(--fg);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-wrap: balance;
}
.h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.03em; color: var(--fg); text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; color: var(--fg); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); }
.body-lg { font-family: var(--font-body); font-weight: 400; font-size: 19px; line-height: 1.4; color: var(--fg-muted); }
.body    { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--fg-muted); }
.body-sm { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.5;  color: var(--fg-subtle); }
.label { font-family: var(--font-label); font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); }
.label-accent { color: var(--accent); }
.label-sm { font-family: var(--font-label); font-weight: 500; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.metric-accent { color: var(--accent); }

/* === 4 · Deck canvas + chrome ============================================= */
html, body { margin: 0; background: #C9CBC6; }
deck-stage:not(:defined) { visibility: hidden; }

section {
  box-sizing: border-box;
  background: #FFFFFF;
  color: var(--cream);
  font-family: var(--font-body);
  overflow: hidden;
}
section * { box-sizing: border-box; }

/* Full-bleed background image + brand overlay treatment.
   The image is supplied per slide (style="background-image:url(...)" set by
   the renderer). Two stacked pseudo-elements keep the "midnight room, single
   warm light" look readable over any photo:
     ::before — a directional dark scrim (heaviest top-left, where content
                sits) so cream text always clears AA contrast.
     ::after  — the warm amber glow at --orb, painted on top so the brand
                light survives the scrim. */
.bg { position: absolute; inset: 0; background-image: none !important; background-color: #FFFFFF; }
/* glows removed for the light theme */
.bg::before { content: none; display: none; }
.bg::after { content: none; display: none; }

/* ----- Full-bleed text positioning helpers -----
   .pad already inset-positions a slide's content over the image. Use these
   modifiers on .pad to anchor a content block within the bleed. */
.pad.bleed-bottom { justify-content: flex-end; }
.pad.bleed-center { justify-content: center; }
.pad.bleed-middle { justify-content: center; align-items: flex-start; }

/* Slide chrome */
.pad { position: absolute; inset: 0; padding: 60px 72px; display: flex; flex-direction: column; }
.deck-chrome { display: flex; justify-content: space-between; align-items: flex-start; flex: none; }
.eyebrow { font-family: var(--font-label); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-mute); margin: 0; }
.mark { height: 22px; width: auto; opacity: .92; }

/* === 5 · Type helpers ===================================================== */
.kicker { font-family: var(--font-label); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin: 0; }
.head { font-family: var(--font-display); font-weight: 700; letter-spacing: -.032em; line-height: 1.03; color: var(--cream); margin: 0; }
.dim { color: var(--cream-mute); }
.gold { color: var(--cream); }
.head-green { color: var(--green); -webkit-text-stroke: 0; }
.lede { font-family: var(--font-body); font-weight: 400; color: var(--cream-dim); margin: 0; line-height: 1.5; }

.metric { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: .96; color: var(--cream); margin: 0; }
.metric.gold { color: var(--cream); }
.cap { font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--cream-mute); margin: 10px 0 0; line-height: 1.5; max-width: 240px; }

/* underline accent on a word */
.ul { position: relative; display: inline-block; }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: .07em; background: var(--green); }

/* === 6 · The card — design system light surface (.card treatment) ========= */
/* White card on dark slide background, cream tokens remapped to ink so all
   descendants automatically read as dark text without per-element overrides. */
.glass {
  background: #F7F8F6;
  border: 1px solid rgba(21, 24, 30, 0.11);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21, 24, 30, 0.05), 0 10px 28px -14px rgba(21, 24, 30, 0.18);
  /* Remap cream tokens → ink so child styles using var(--cream-*) get dark text */
  --cream:             #0A0E18;   /* ink-900 — primary text */
  --cream-dim:         #1F2535;   /* ink-600 — secondary text */
  --cream-mute:        #2B3243;   /* ink-500 — muted text */
  --cream-faint:       #3D4557;   /* ink-400 — labels / captions */
  --cream-line:        rgba(10, 14, 24, 0.10);
  --cream-line-strong: rgba(10, 14, 24, 0.18);
  --divider:           rgba(10, 14, 24, 0.06);
  /* Green accent → legible on-white tone from design system */
  --green:             var(--green-text);
  --green-glow:        rgba(14, 128, 64, 0.25);
  /* Dark surface tokens used inside cards (e.g. fractional pill bg) → light tint */
  --ink-800:           rgba(10, 14, 24, 0.06);
}

/* === 7 · Entrance animation =============================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-deck-active] .anim  { animation: rise var(--dur-slow) var(--ease) both; }
  [data-deck-active] .anim2 { animation: rise var(--dur-slow) var(--ease) .08s both; }
  [data-deck-active] .anim3 { animation: rise var(--dur-slow) var(--ease) .16s both; }
  [data-deck-active] .anim4 { animation: rise var(--dur-slow) var(--ease) .24s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* === 8 · Per-template layout ============================================== */

/* ----- Title / Vision ----- */
.title-head { font-size: 88px; }
.footmeta { display: grid; grid-template-columns: repeat(4, auto); gap: 0 56px; margin-top: auto; }
.footmeta .k { font-family: var(--font-label); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--cream-faint); margin: 0 0 6px; }
.footmeta .v { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--cream); margin: 0; }

/* ----- metric row ----- */
.mrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.mrow .metric { font-size: 58px; }

/* ----- stages ----- */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stage { padding: 28px 20px 32px; border-radius: 14px; min-height: 180px; }
.stage .n { font-family: var(--font-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); margin: 0 0 12px; }
.stage h4 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--cream); margin: 0 0 9px; }
.stage p { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--cream-mute); margin: 0; }

/* metric strip (inline trio) */
.mstrip { display: flex; gap: 46px; align-items: flex-end; }
.mstrip .m { display: flex; flex-direction: column; }
.mstrip .mv { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; font-size: 34px; line-height: 1; color: var(--cream); }
.mstrip .mv.gold { color: var(--green); }
.mstrip .mc { font-family: var(--font-label); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--cream-mute); margin-top: 8px; max-width: 210px; line-height: 1.5; }

/* ----- competition matrix ----- */
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--divider); }
.matrix thead th { font-family: var(--font-label); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--cream-faint); font-weight: 500; }
.matrix .tool { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--cream); }
.matrix .seg { font-family: var(--font-body); font-size: 12px; color: var(--cream-mute); }
.matrix .mk { color: var(--cream-faint); font-size: 15px; }
.matrix .hit { color: var(--green); }
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix .harla-row { background: var(--green-wash); }
.matrix .harla-row .tool { color: var(--green-bright); }

/* ----- traction list ----- */
.tlist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.titem { padding: 18px 22px; border-radius: 14px; }
.titem .big { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--cream); margin: 0 0 6px; line-height: 1.14; }
.titem .sub { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--cream-mute); margin: 0; }
.titem .tag { font-family: var(--font-label); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); margin: 0 0 9px; }

/* ----- partner strip ----- */
.partners { padding-top: 18px; display: flex; align-items: center; gap: 64px; }
.partners .plabel { font-family: var(--font-label); font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--cream-faint); flex: none; max-width: 118px; line-height: 1.6; margin: 0; }
.pmarks { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 24px; }
.pmark { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.012em; color: var(--cream-dim); white-space: nowrap; }
.plogo { height: 52px; width: auto; display: block; opacity: .85; }
.plogo[alt="PwC"] { height: 104px; }
.plogo[alt="DKLM Solicitors"] { height: 94px; }
.plogo[alt="Revantage"] { height: 73px; }
.plogo[alt="Revantage"], .plogo[alt="PwC"], .plogo[alt="Southwark Council"], .plogo[alt="DKLM Solicitors"] { filter: none; }

/* ----- product slide ----- */
.split { display: grid; gap: 40px; align-items: stretch; }
.feat { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--divider); }
.feat:first-child { border-top: 0; }
.feat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-top: 7px; flex: none; }
.feat p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--cream-dim); }
.feat p b { color: var(--cream); font-weight: 600; }

/* product panel mock */
.pp { padding: 22px 22px 6px; border-radius: 16px; display: flex; flex-direction: column; height: 100%; }
.pp-eye { font-family: var(--font-label); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin: 0 0 16px; }
.pp-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pp-cell { background: var(--ink-800); border: 1px solid var(--cream-line); border-radius: 10px; padding: 14px; }
.pp-cell .v { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; color: var(--cream); }
.pp-cell .v.gold { color: var(--green); }
.pp-cell .c { font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-mute); margin-top: 6px; line-height: 1.4; }
.pp-list-h { font-family: var(--font-label); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-faint); margin: 18px 0 10px; }
.txn { background: var(--ink-800); border: 1px solid var(--cream-line); border-radius: 10px; padding: 13px 15px; display: flex; align-items: center; gap: 14px; margin-bottom: 9px; }
.txn .ref { font-family: var(--font-mono); font-size: 10px; color: var(--green); }
.txn .open { font-family: var(--font-body); font-size: 10px; color: var(--cream-faint); margin-top: 3px; }
.txn .addr { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--cream); line-height: 1.15; }
.txn .par { font-family: var(--font-body); font-size: 10.5px; color: var(--cream-mute); margin-top: 2px; }
.txn .val { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--cream); font-variant-numeric: tabular-nums; margin-left: auto; }
.segbar { display: flex; gap: 4px; width: 78px; flex: none; }
.segbar i { height: 5px; flex: 1; border-radius: 3px; background: var(--ink-600); }
.segbar i.g { background: var(--positive); }
.segbar i.a { background: var(--green); }

/* product — brand-styled kanban board */
.kanban { height: 100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 16px 16px 15px; border-radius: 16px; background: var(--glass-bg); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass); }
.kan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--divider); }
.kan-title { font-family: var(--font-label); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-dim); margin: 0; }
.kan-chips { display: flex; gap: 7px; flex: none; }
.kchip { font-family: var(--font-label); font-size: 8.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cream-line); color: var(--cream-mute); white-space: nowrap; }
.kchip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.kchip.done { color: var(--positive); border-color: rgba(127,185,149,.4); }
.kchip.active { color: var(--green); border-color: var(--green-line); background: var(--green-wash); }
.kan-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; min-height: 0; }
.kan-col { display: flex; flex-direction: column; gap: 7px; }
.kch { font-family: var(--font-label); font-size: 8.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--cream-faint); margin: 0 0 2px; display: flex; justify-content: space-between; align-items: center; }
.kch span { color: var(--cream-mute); }
.kan-card { position: relative; background: var(--ink-800); border: 1px solid var(--cream-line); border-radius: 8px; padding: 8px 10px 8px 13px; overflow: hidden; }
.kan-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--positive); }
.kan-card.active { border-color: var(--green-line); box-shadow: 0 0 0 1px var(--green-line); background: var(--green-wash); }
.kan-card.active::before { background: var(--green); }
.kt { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: -.01em; color: var(--cream); margin: 0; line-height: 1.15; padding-right: 10px; }
.km { font-family: var(--font-body); font-size: 9px; color: var(--cream-mute); margin: 3px 0 0; font-variant-numeric: tabular-nums; }
.kdot { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }
.kan-card.active .kdot { background: var(--green); box-shadow: 0 0 8px var(--green-glow); }

/* ----- business model / pricing ----- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { padding: 22px 22px 20px; border-radius: 14px; display: flex; flex-direction: column; }
.tier.feature { background: var(--green-wash); border-color: var(--green-line); }
.tier .tname { font-family: var(--font-label); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--cream); margin: 0 0 6px; }
.tier .tlead { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--cream); margin: 0 0 14px; line-height: 1.14; }
.tier .prow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--divider); font-family: var(--font-body); font-size: 13px; color: var(--cream-dim); }
.tier .prow:first-of-type { border-top: 0; }
.tier .prow b { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tier .tdesc { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--cream-mute); margin: 13px 0 0; }
.tier .ttar { margin-top: auto; padding-top: 14px; }
.tier .ttar .n { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--cream); letter-spacing: -.01em; }
.tier .ttar .t { font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-mute); margin-top: 5px; line-height: 1.45; }

/* ----- market ----- */
.mkts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mkt { padding: 22px; border-radius: 14px; display: flex; flex-direction: column; }
.mkt.feature { background: var(--green-wash); border-color: var(--green-line); }
.mkt .label { margin: 0 0 16px; color: var(--cream); }
.mkt .nums { display: flex; align-items: baseline; gap: 10px; }
.mkt .tamcol { display: inline-flex; flex-direction: column; align-items: flex-start; }
.mkt .vsep { width: 1px; height: 30px; margin-top: 2px; background: var(--cream-line-strong); flex: none; }
.mkt .sam { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.025em; color: var(--cream); font-variant-numeric: tabular-nums; }
.mkt.feature .sam { color: var(--green); }
.mkt .arrow { color: var(--cream-faint); font-size: 16px; }
.mkt .tam { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.025em; color: var(--cream-mute); font-variant-numeric: tabular-nums; }
.mkt .tav { font-family: var(--font-label); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--cream); margin: 7px 0 0; display: block; white-space: nowrap; }
.mkt .mdesc { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--cream); margin: 14px 0 0; }

/* ----- go-to-market ----- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { padding: 20px 22px; border-radius: 14px; }
.step .sn { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.step h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--cream); margin: 10px 0 9px; line-height: 1.15; }
.step p { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--cream-mute); margin: 0; }
.steplist { list-style: none; margin: 8px 0 0; padding: 0; }
.steplist li { font-family: var(--font-body); font-size: 12.5px; line-height: 1.45; color: var(--cream-mute); padding-left: 15px; position: relative; margin-bottom: 6px; }
.steplist li:last-child { margin-bottom: 0; }
.steplist li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.loop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chip { font-family: var(--font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); border: 1px solid var(--cream-line-strong); border-radius: 999px; padding: 8px 15px; }
.chip.gold { color: var(--cream); border-color: var(--green-line); background: var(--green-wash); }
.arr { color: var(--cream-faint); font-size: 15px; }

/* ----- team ----- */
.teamgrid { display: grid; grid-template-columns: 1.05fr 1.6fr; gap: 18px; align-items: start; }
.founder { padding: 26px 28px; border-radius: 16px; background: var(--green-wash); border: 1px solid var(--green-line); display: flex; flex-direction: column; }
.founder .role { font-family: var(--font-label); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--green); margin: 0 0 9px; }
.founder .nm { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.025em; color: var(--cream); margin: 0 0 14px; }
.founder p { font-family: var(--font-body); font-size: 11.5px; line-height: 1.5; color: var(--cream-dim); margin: 0 0 8px; }
.founder p:last-child { margin-bottom: 0; }
.tcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; align-items: start; }
.tcol { display: flex; flex-direction: column; gap: 14px; }
.teamtop { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 14px; align-items: stretch; }
.fracrow { display: flex; align-items: center; gap: 22px; }
.fracrow h5 { margin: 0; flex: none; width: 96px; }
.lh-row-h { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tcard { padding: 18px 20px; border-radius: 14px; }
.tcard h5 { font-family: var(--font-label); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--cream-faint); margin: 0 0 13px; }
.person { margin-bottom: 11px; }
.person:last-child { margin-bottom: 0; }
.person .pn { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--cream); letter-spacing: -.01em; }
.person .pr { font-family: var(--font-body); font-size: 11.5px; color: var(--cream-mute); margin-top: 1px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pillm { font-family: var(--font-label); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); border: 1px solid var(--cream-line); border-radius: 999px; padding: 5px 11px; }
.founder .photo { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; object-position: center 20%; border: 1px solid var(--cream-line-strong); flex: none; }
.qrbox { width: 74px; height: 74px; border-radius: 8px; background: #fff; padding: 5px; flex: none; }
.qrbox img { width: 100%; height: 100%; display: block; }
.li-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green-line); border-radius: var(--r-sm); padding: 10px 15px; text-decoration: none; background: var(--green-wash); }
.lh-row { display: flex; flex-direction: column; gap: 9px; }
.lh { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 36px; border: 1px solid var(--cream-line); border-radius: 8px; background: var(--ink-800); padding: 0 13px; }
.lh-role { font-family: var(--font-label); font-size: 9.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--cream-faint); }
.lh-co { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--cream-dim); letter-spacing: -.01em; }

/* ----- roadmap ----- */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.phase { padding: 18px 18px 16px; border-radius: 14px; display: flex; flex-direction: column; }
.phase.feature { background: var(--green-wash); border-color: var(--green-line); }
.phase .mo { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); margin: 0 0 9px; }
.phase h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--cream); margin: 0 0 12px; line-height: 1.14; }
.phase ul { list-style: none; margin: 0 0 14px; padding: 0; }
.phase li { font-family: var(--font-body); font-size: 11px; line-height: 1.45; color: var(--cream-mute); padding-left: 12px; position: relative; margin-bottom: 5px; }
.phase li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--cream-faint); }
.phase .stat { margin-top: auto; display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--divider); }
.phase .stat > div + div { border-left: 1px solid var(--divider); padding-left: 16px; }
.phase .stat .sv { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.phase.feature .stat .sv { color: var(--green); }
.phase .stat .sc { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-mute); margin-top: 4px; }

/* ----- ask ----- */
.askgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; }
.allocbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--cream-line); }
.allocbar .people { background: var(--green); width: 76%; }
.allocbar .prod { background: var(--cream-mute); width: 24%; }
.alloc { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.alloc h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--cream); margin: 0 0 3px; letter-spacing: -.01em; }
.alloc .pct { color: var(--green); }
.alloc .ad { font-family: var(--font-body); font-size: 12px; color: var(--cream-mute); margin: 0 0 12px; line-height: 1.4; }
.alloc .li { font-family: var(--font-body); font-size: 12px; color: var(--cream-dim); padding: 4.5px 0; border-top: 1px solid var(--divider); display: flex; justify-content: space-between; gap: 8px; }
.alloc .li:first-of-type { border-top: 0; }
.askside { padding: 24px 26px; border-radius: 16px; display: flex; flex-direction: column; }
.askside .role { font-family: var(--font-label); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--green); margin: 0 0 8px; }
.askside h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--cream); margin: 0 0 14px; }
.askside .li { font-family: var(--font-body); font-size: 12.5px; color: var(--cream-dim); line-height: 1.45; padding: 6px 0; border-top: 1px solid var(--divider); }
.askside .li:first-of-type { border-top: 0; }
.askmetrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 18px; }
.askmetrics .v { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: #000; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.askmetrics .c { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: #000; margin-top: 5px; line-height: 1.4; }

/* ----- Rail toggle (page chrome — collapses/expands thumbnail rail) ----- */
.rail-toggle { position: fixed; top: 12px; left: 12px; z-index: 2147483646;
  appearance: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
  background: rgba(0,0,0,0.45); width: 28px; height: 28px; cursor: pointer;
  color: #e8e0d0; display: flex; align-items: center; justify-content: center;
  transition: background 140ms ease, opacity 140ms ease; opacity: 0.6; padding: 0; }
.rail-toggle:hover { background: rgba(0,0,0,0.65); opacity: 1; }
@media print { .rail-toggle { display: none; } }