/* ══════════════════════════════════════════════════════════════════════════
   northstaraiinc.com — v2, the light build.

   The palette is NorthStar's own, copied by hand out of `design/tokens.css`
   (the `:root` block) so the brochure and the product a pilot signs into are
   the same colour. This file is a copy rather than an import: `marketing/` is
   a five-file static site with no build step and nothing outside its own
   folder is deployed. If the token file's values move, re-copy them here.

   Type is the product's too: Bricolage Grotesque on page titles, Inter for
   everything a person reads as prose, JetBrains Mono for anything read
   character by character — a lot number, a price, a range.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --background:#f4f7fd;
  --foreground:#16233a;
  --card:#ffffff;
  --foreground-faint:#8b95a9;

  --primary:#2a54d6;
  --primary-foreground:#ffffff;
  --brand:#3d6bf0;
  --brand-soft:#dde8ff;
  --secondary:#f7fafe;

  --muted:#eef3fb;
  --muted-foreground:#55627a;
  --accent:#eff4ff;
  --accent-foreground:#2143ac;
  --track:#dde6f4;
  --border:#e7edf7;
  --ring:#3d6bf0;

  --ai:#9a6413;      --ai-bg:#fdf4e4;   --ai-dot:#e9a23b;
  --ok:#177a5b;      --ok-bg:#e5f6ef;   --ok-dot:#2fb389;
  --info:#2a54d6;    --info-bg:#eaf0ff; --info-dot:#3d6bf0;
  --sold:#5b45bd;    --sold-bg:#f0ecff; --sold-dot:#8b6df0;

  --stage:#0b1524;
  --stage-foreground:#dce5f8;

  --radius:16px;
  --max:1180px;

  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-title:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --font-code:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-title); font-weight:600; letter-spacing:-0.02em; line-height:1.1;}
h4,h5{font-family:var(--font-ui); font-weight:600;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.mono{font-family:var(--font-code);}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
section{padding:96px 0;}
@media(max-width:760px){ section{padding:68px 0;} .wrap{padding:0 22px;} }

.eyebrow{
  font-family:var(--font-code);
  font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent-foreground);
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:16px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand);}

/* ── Header ──────────────────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,0.86);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:70px;}
.brand{display:flex; align-items:center; gap:11px; font-size:17.5px; font-weight:600; letter-spacing:-0.01em;}
.brand .mark{width:27px; height:27px; flex-shrink:0;}
.brand b{font-weight:600;}
.brand b span{color:var(--brand);}
.navlinks{display:flex; gap:34px; font-size:14.5px; color:var(--muted-foreground);}
.navlinks a{transition:color .18s;}
.navlinks a:hover{color:var(--primary);}
@media(max-width:940px){ .navlinks{display:none;} }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:14.5px; font-weight:500;
  padding:11px 20px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; transition:background .18s, border-color .18s, transform .18s;
}
.btn-primary{background:var(--primary); color:var(--primary-foreground);}
.btn-primary:hover{background:#2247bb; transform:translateY(-1px);}
.btn-ghost{border-color:var(--border); background:var(--card); color:var(--foreground);}
.btn-ghost:hover{border-color:var(--brand); color:var(--primary);}
.btn-lg{padding:14px 26px; font-size:15.5px; border-radius:12px;}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:84px 0 88px;
  background:
    radial-gradient(900px 520px at 78% 18%, #ffffff 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#ffffff 0%, var(--background) 68%);
  border-bottom:1px solid var(--border);
}
.hero-grid{display:grid; grid-template-columns:1.06fr 0.94fr; gap:40px; align-items:center; position:relative; z-index:2;}
@media(max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:40px;} }
.hero h1{font-size:clamp(36px,4.4vw,52px); margin-bottom:22px;}
.hero h1 em{font-style:normal; color:var(--primary);}
.hero p.lede{font-size:18px; color:var(--muted-foreground); max-width:520px; margin-bottom:34px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hero-art{position:relative; margin-right:-56px;}
@media(max-width:1300px){ .hero-art{margin-right:0;} }
.hero-art img{width:100%; height:auto;}
@media(max-width:760px){ .hero-art{max-width:420px; margin:0 auto;} }

/* ── Ticker ──────────────────────────────────────────────────────────── */
.ticker-strip{background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; padding:15px 0;}
.ticker-track{display:flex; gap:44px; white-space:nowrap; animation:ticker 34s linear infinite; width:max-content;}
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none;} }
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.ticker-track span{font-family:var(--font-code); font-size:12.5px; letter-spacing:0.11em; color:var(--muted-foreground); text-transform:uppercase; display:flex; align-items:center; gap:44px;}
.ticker-track span.dot::before{content:"★"; color:var(--brand); margin-right:44px; font-size:9px;}

/* ── The comparison ──────────────────────────────────────────────────── */
.split{display:grid; grid-template-columns:0.82fr 1.18fr; gap:64px; align-items:center;}
@media(max-width:960px){ .split{grid-template-columns:1fr; gap:40px;} }
.split h2{font-size:clamp(29px,3.5vw,40px); margin-bottom:18px;}
.split p.body{color:var(--muted-foreground); font-size:16.5px; max-width:440px;}

.compare-toggle{display:inline-flex; margin-bottom:20px; background:var(--muted); border-radius:999px; padding:4px;}
.compare-toggle button{
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  padding:8px 18px; border-radius:999px; border:none; background:transparent;
  color:var(--muted-foreground); cursor:pointer; transition:background .18s,color .18s;
}
.compare-toggle button.active{background:var(--card); color:var(--primary); box-shadow:0 1px 2px rgba(22,35,58,0.07);}

.tag{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px;}
.tag-header{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-code); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px;}
.tag-header .state{display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px;}
.tag-header .state::before{content:""; width:6px; height:6px; border-radius:50%;}
.tag.raw .tag-header{color:var(--foreground-faint);}
.tag.raw .state{background:var(--muted); color:var(--muted-foreground);}
.tag.raw .state::before{background:var(--foreground-faint);}
.tag.ready .tag-header{color:var(--foreground-faint);}
.tag.ready .state{background:var(--ok-bg); color:var(--ok);}
.tag.ready .state::before{background:var(--ok-dot);}
.tag-photo{border-radius:12px; overflow:hidden; background:var(--muted); margin-bottom:8px;}
.tag-photo img{width:100%; height:auto;}
.tag-photo-note{font-family:var(--font-code); font-size:11px; color:var(--foreground-faint); margin-bottom:14px;}
.tag-title{font-family:var(--font-title); font-size:20px; font-weight:600; line-height:1.25; margin-bottom:8px;}
.tag.raw .tag-title{font-family:var(--font-ui); font-weight:400; font-style:italic; font-size:16.5px; color:var(--muted-foreground);}
.tag-desc{font-size:14px; color:var(--muted-foreground); margin-bottom:16px;}
.tag-foot{display:flex; justify-content:space-between; align-items:center; gap:14px; padding-top:14px; border-top:1px solid var(--border); font-family:var(--font-code); font-size:12.5px; color:var(--muted-foreground);}
.tag.ready .tag-foot b{color:var(--foreground); font-weight:500;}
.tag-hidden{display:none;}

/* ── Stat banner ─────────────────────────────────────────────────────── */
.stat-banner{background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:58px 0;}
.stat-row{display:flex; align-items:center; justify-content:center; gap:38px; flex-wrap:wrap; text-align:center;}
.stat-block .num{font-family:var(--font-title); font-weight:600; font-size:clamp(34px,5.4vw,58px); line-height:1;}
.stat-block .lbl{font-family:var(--font-code); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--foreground-faint); margin-top:10px;}
.stat-block.before .num{color:var(--muted-foreground);}
.stat-block.after .num{color:var(--primary);}
.stat-arrow{color:var(--brand); font-size:26px; line-height:1;}
.stat-note{text-align:center; font-size:13px; color:var(--foreground-faint); max-width:520px; margin:22px auto 0;}

/* ── How it works ────────────────────────────────────────────────────── */
.flow-head{max-width:660px; margin-bottom:48px;}
.flow-head h2{font-size:clamp(29px,3.5vw,42px); margin-bottom:16px;}
.flow-head p{color:var(--muted-foreground); font-size:16.5px;}
.flow-row{display:grid; grid-template-columns:repeat(6,1fr); gap:18px; position:relative;}
.flow-row::before{content:""; position:absolute; top:20px; left:6%; right:6%; height:1px; background:var(--track);}
.flow-step{position:relative; text-align:center;}
.flow-dot{
  width:41px; height:41px; border-radius:50%; background:var(--card);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; position:relative; z-index:2;
  font-family:var(--font-code); font-size:13px; color:var(--primary);
}
.flow-step h4{font-size:14.5px; margin-bottom:7px;}
.flow-step p{font-size:12.8px; color:var(--muted-foreground); line-height:1.5;}
@media(max-width:940px){
  .flow-row{grid-template-columns:repeat(2,1fr); gap:30px 20px;}
  .flow-row::before{display:none;}
  .flow-step{text-align:left;}
  .flow-dot{margin:0 0 12px;}
}

/* ── Knowledge ───────────────────────────────────────────────────────── */
#knowledge{background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.know-head{text-align:center; max-width:790px; margin:0 auto 44px;}
.know-head .eyebrow{justify-content:center;}
.know-head h2{font-size:clamp(29px,3.5vw,42px); margin-bottom:16px;}
.know-head p{color:var(--muted-foreground); font-size:16.5px;}
.know-stage{
  position:relative; border:1px solid var(--border); border-radius:24px; padding:40px;
  background:
    radial-gradient(60% 40% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, var(--card) 0%, var(--accent) 100%);
}
.know-tiles{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; padding:0;}
.know-tile{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.know-tile img{width:100%; height:auto; display:block;}
.know-tile h4{font-size:15.5px; margin:0 22px 6px;}
.know-tile p{font-size:13.5px; color:var(--muted-foreground); line-height:1.55; margin:0 22px 24px;}

.know-strip{margin-top:28px; display:grid; align-items:center; grid-template-columns:auto 40px auto 40px 1fr 40px auto;}
.know-sources{display:grid; gap:8px; position:relative; padding-right:22px;}
.know-sources::before{content:""; position:absolute; right:0; top:17px; bottom:17px; width:1px; background:var(--track);}
.know-src{
  position:relative; display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:12.5px; color:var(--muted-foreground);
  background:var(--card); border:1px solid var(--border); border-radius:999px; padding:7px 14px 7px 11px;
}
.know-src::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand);}
.know-src::after{content:""; position:absolute; left:100%; top:50%; width:22px; height:1px; background:var(--track);}
.know-join{height:1px; background:var(--track); position:relative;}
.know-join::after{content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--track);}
.know-lot{width:96px; height:96px;}
.know-lot img{width:100%; height:auto; display:block; border-radius:18px;}
.know-draft{background:var(--ai-bg); border-radius:14px; padding:14px 22px 16px 24px; position:relative; overflow:hidden;}
.know-draft::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--ai-dot);}
.know-badge{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ai); margin-bottom:6px;}
.know-badge::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ai-dot);}
.know-draft p{font-size:17px; color:var(--foreground); line-height:1.4; margin:0;}
.know-approve{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; background:var(--ok-bg); color:var(--ok); font-weight:600; font-size:14.5px; border-radius:999px; padding:11px 20px 11px 12px;}
.know-tick{width:22px; height:22px; border-radius:50%; background:var(--ok); position:relative; flex-shrink:0;}
.know-tick::after{content:""; position:absolute; left:8px; top:5px; width:5px; height:9px; border:solid #ffffff; border-width:0 1.8px 1.8px 0; transform:rotate(42deg);}
.know-fine{margin:28px 0 0; text-align:center; font-size:14px; color:var(--muted-foreground);}
@media(max-width:1100px){ .know-strip{grid-template-columns:auto 28px auto 28px 1fr 28px auto;} .know-stage{padding:28px;} }
@media(max-width:880px){
  .know-tiles{grid-template-columns:1fr; gap:14px;}
  .know-tile{text-align:center; align-items:center;}
  .know-tile img{max-width:400px;}
  .know-strip{grid-template-columns:1fr; justify-items:center; margin-top:22px;}
  .know-sources{padding-right:0; justify-items:center;}
  .know-sources::before, .know-src::after{display:none;}
  .know-join{width:1px; height:26px;}
  .know-join::after{right:-3px; top:auto; bottom:-1px;}
  .know-draft{width:100%;}
}
@media(max-width:600px){ .know-stage{padding:16px; margin:0 -8px; border-radius:20px;} .know-head{margin-bottom:32px;} }

/* ── Product screens ─────────────────────────────────────────────────── */
.screens-note{font-size:13.5px; color:var(--foreground-faint); margin-top:14px; max-width:580px;}
.screens-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:1000px){ .screens-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:680px){ .screens-grid{grid-template-columns:1fr;} }
.screen-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .18s, transform .18s;}
.screen-card:hover{border-color:var(--brand-soft); transform:translateY(-2px);}
.screen-body{background:var(--secondary); border-bottom:1px solid var(--border); padding:16px 16px 0;}
.screen-body img{width:100%; height:auto; border-radius:10px 10px 0 0;}
.screen-caption{padding:18px 20px 22px;}
.screen-caption h4{font-size:15.5px; margin-bottom:6px;}
.screen-caption p{font-size:13.5px; color:var(--muted-foreground); line-height:1.55;}

/* ── Integrations ────────────────────────────────────────────────────── */
.integrate{background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.integrate-inner{text-align:center; max-width:700px; margin:0 auto;}
.integrate .eyebrow{justify-content:center;}
.integrate h2{font-size:clamp(27px,3.3vw,38px); margin-bottom:16px;}
.integrate p{color:var(--muted-foreground); font-size:16.5px; margin-bottom:34px;}
.chip-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; color:var(--foreground);
  border:1px solid var(--border); background:var(--secondary);
  padding:9px 9px 9px 18px; border-radius:999px;
}
.chip-status{font-family:var(--font-code); font-style:normal; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px;}
.chip-status.dev{background:var(--info-bg); color:var(--info);}
.chip-status.planned{background:var(--muted); color:var(--muted-foreground);}
.integrate-fine{font-size:13px; color:var(--foreground-faint); margin:26px 0 0;}

/* ── Who it's for ────────────────────────────────────────────────────── */
.who-featured{
  background:linear-gradient(135deg,var(--accent) 0%, var(--card) 62%);
  border:1px solid var(--brand-soft); border-radius:var(--radius);
  padding:34px 34px 32px; margin-bottom:22px;
}
.who-featured-tag{
  display:inline-block; font-family:var(--font-code); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase;
  background:var(--info-bg); color:var(--info);
  padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.who-featured h4{font-family:var(--font-title); font-size:24px; margin-bottom:10px;}
.who-featured p{color:var(--muted-foreground); font-size:15.5px; max-width:640px;}
.who-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:940px){ .who-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .who-grid{grid-template-columns:1fr;} }
.who-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px 24px;}
.who-card h4{font-size:16.5px; margin-bottom:9px;}
.who-card p{font-size:14px; color:var(--muted-foreground); line-height:1.55;}

/* ── Pilot form ──────────────────────────────────────────────────────── */
.pilot-wrap{display:grid; grid-template-columns:0.88fr 1.12fr; gap:60px; align-items:start;}
@media(max-width:960px){ .pilot-wrap{grid-template-columns:1fr; gap:40px;} }
#pilot h2{font-size:clamp(29px,3.5vw,40px); margin-bottom:18px;}
#pilot p.body{color:var(--muted-foreground); font-size:16.5px; max-width:440px;}
.pilot-alt{margin-top:20px; font-size:14.5px; color:var(--muted-foreground);}
.pilot-alt a{color:var(--primary); border-bottom:1px solid var(--brand-soft);}
.pilot-form{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:30px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:560px){ .form-row{grid-template-columns:1fr;} }
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:500; color:var(--muted-foreground); margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-ui); font-size:14.5px; color:var(--foreground);
  background:var(--secondary); border:1px solid var(--border); border-radius:10px;
  padding:11px 13px; outline:none; transition:border-color .18s, box-shadow .18s;
}
.field textarea{min-height:96px; resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ring); box-shadow:0 0 0 3px var(--brand-soft);}
.pilot-form .btn{width:100%; padding:13px 20px; font-size:15px;}
.form-fine{font-size:12.5px; color:var(--foreground-faint); margin-top:14px; text-align:center;}

/* The pilot form sends itself (contact.northstaraiinc.com, 17 September).
   The honeypot is off-screen rather than display:none, because a bot that
   fills forms reads the computed style and skips a hidden input. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
/* The widget Lộc created (17 Sep) is the invisible kind: it draws nothing
   and sets its token in the background, so no space is reserved for it. If
   it is ever switched to Managed it renders a 300x65 box here and pushes the
   button down, which is fine; below 420 the card gives its padding back
   rather than push the document sideways (rule 17). */
.pilot-form .cf-turnstile{margin:0;}
@media(max-width:420px){ .pilot-form{padding:24px 20px;} }
.form-status{font-size:13px; line-height:1.5; margin:14px 0 0; padding:11px 13px; border-radius:8px; border:1px solid transparent;}
.form-status.is-sent{color:var(--ok); background:var(--ok-bg); border-color:#bfe8d5;}
.form-status.is-failed{color:#9a2b3a; background:#fdeef1; border-color:#f3c9d1;}
.form-status a{color:inherit; text-decoration:underline;}
.pilot-form .btn[disabled]{opacity:0.62; cursor:default; transform:none;}
.pilot-form .btn[disabled]:hover{background:var(--primary); transform:none;}

/* ── Company ─────────────────────────────────────────────────────────── */
.company-top{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; margin-bottom:44px;}
@media(max-width:960px){ .company-top{grid-template-columns:1fr; gap:34px;} }
#company h2{font-size:clamp(29px,3.5vw,40px); margin-bottom:18px;}
#company p.body{color:var(--muted-foreground); font-size:16.5px; max-width:460px;}
.ledger{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:10px 22px;}
.ledger-row{display:flex; align-items:center; gap:13px; padding:15px 0; font-size:14.5px; color:var(--muted-foreground); border-bottom:1px solid var(--border);}
.ledger-row:last-child{border-bottom:none;}
.stamp{width:19px; height:19px; border-radius:50%; background:var(--ok-bg); flex-shrink:0; position:relative;}
.stamp::after{content:""; position:absolute; left:6px; top:4.5px; width:5px; height:9px; border:solid var(--ok); border-width:0 1.8px 1.8px 0; transform:rotate(42deg);}
.story-block{display:grid; grid-template-columns:auto 1fr; gap:26px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:34px;}
@media(max-width:700px){ .story-block{grid-template-columns:1fr; gap:18px;} }
.story-avatar{
  width:60px; height:60px; border-radius:50%;
  background:var(--accent); color:var(--accent-foreground);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-title); font-size:20px; font-weight:600;
}
.story-text p{color:var(--muted-foreground); font-size:16px; margin-bottom:16px; max-width:720px;}
.story-sig{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-top:6px;}
.story-sig b{font-size:15.5px;}
.story-sig .role{font-size:13.5px; color:var(--foreground-faint);}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer{background:#0a1120; color:#e9eefb; padding:64px 0 30px;}
footer .brand b span{color:#6690fb;}
.footer-top{display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.09);}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col{display:flex; flex-direction:column; gap:11px;}
.footer-col h5{font-family:var(--font-code); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#6f7d99; margin-bottom:4px;}
.footer-col a{font-size:14px; color:#98a4bd; transition:color .18s;}
.footer-col a:hover{color:#e9eefb;}
.footer-col .disabled{font-size:14px; color:#4d5871;}
.footer-fine{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; font-size:12.5px; color:#6f7d99;}
.tag-note{font-size:12px; color:var(--foreground-faint); margin-top:12px; text-align:right;}

/* ── Sub-pages: investors, privacy, terms (17 September) ─────────────
   The same header and footer as index.html; only the middle differs. A
   page-hero band instead of the hero, a prose column for the legal pages,
   the founder's numbered narrative for investors. Same idiom: tokens,
   hairlines, radius 16, no shadows. */
.page-hero{
  padding:72px 0 56px;
  background:linear-gradient(180deg,#ffffff 0%, var(--background) 100%);
  border-bottom:1px solid var(--border);
}
.page-hero .eyebrow{margin-bottom:14px;}
.page-hero h1{font-size:clamp(32px,4.4vw,48px); max-width:760px;}
.page-hero p{color:var(--muted-foreground); font-size:16.5px; max-width:600px; margin-top:16px;}
.subpage a:not(.btn):not(.brand){color:var(--primary); border-bottom:1px solid var(--brand-soft); transition:border-color .18s;}
.subpage a:not(.btn):not(.brand):hover{border-color:var(--brand);}
@media(max-width:760px){ .page-hero{padding:52px 0 40px;} }

.legal-body{max-width:760px; padding:64px 0 100px;}
.legal-body h2{font-size:21px; margin:36px 0 12px;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{color:var(--muted-foreground); font-size:16px; margin-bottom:14px;}
.legal-body ul{color:var(--muted-foreground); font-size:16px; margin:0 0 14px 20px;}
@media(max-width:760px){ .legal-body{padding:48px 0 72px;} }

.subpage h2.thesis{font-size:clamp(26px,3.2vw,36px); max-width:680px; line-height:1.15;}
.narrative-flow{position:relative; margin-top:44px; max-width:760px;}
.narrative-flow::before{content:""; position:absolute; left:23px; top:6px; bottom:6px; width:1px; background:var(--track);}
.narrative-step{display:grid; grid-template-columns:48px 1fr; gap:22px; padding-bottom:42px; position:relative;}
.narrative-step:last-child{padding-bottom:0;}
.narrative-num{
  width:48px; height:48px; border-radius:50%;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-code); font-size:13px; color:var(--primary);
  position:relative; z-index:2;
}
.narrative-body h3{font-family:var(--font-ui); font-size:18px; font-weight:600; letter-spacing:0; line-height:1.3; margin:11px 0 8px;}
.narrative-body p{color:var(--muted-foreground); font-size:15.5px; line-height:1.65; max-width:640px;}
.narrative-ledger{margin-top:16px; max-width:480px;}
.ask-block{background:var(--accent); border:1px solid var(--brand-soft); border-radius:var(--radius); padding:26px 28px; margin-top:22px;}
.ask-block h3{font-size:16px; margin:0 0 6px;}
.ask-block p{margin:0;}
.subpage-contact{padding-top:0;}
.story-contact{margin-top:14px;}
@media(max-width:520px){
  .narrative-step{grid-template-columns:40px 1fr; gap:16px;}
  .narrative-num{width:40px; height:40px; font-size:12px;}
  .narrative-flow::before{left:19px;}
}