/* ============================================================
   FRAI - Cohort 01 waitlist
   Design system: "The Build Ledger"
   Warm editorial paper · grotesque display · mono annotations
   Depth via hard poster shadows + 1px ink rules (no glass, no blobs)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Paper & ink - warm, not neutral grey */
  --paper:        #F3EDE1;   /* base background */
  --paper-2:      #ECE3D2;   /* recessed panels */
  --paper-3:      #E3D8C2;   /* deeper inset */
  --card:         #FBF7EF;   /* raised surfaces catch light */
  --ink:          #1B1713;   /* near-black, warm */
  --ink-2:        #3C342B;   /* espresso */
  --ink-muted:    #6E6456;   /* captions, meta */
  --ink-faint:    #97897554; /* hairlines on paper */

  /* Accents - a tight, deliberate duo + one cool note */
  --vermilion:    #DC4524;   /* primary CTA · "ship it" */
  --vermilion-d:  #B5360F;
  --amber:        #E6A11F;   /* marker / highlight */
  --amber-wash:   #F6D98F;
  --ink-blue:     #2B4C63;   /* quiet technical/link accent */
  --moss:         #4E6A3A;   /* "live / shipped" status */

  /* Dark section - precision + technical credibility */
  --night:        #14100B;
  --night-2:      #1E1812;
  --night-line:   #ffffff1f;
  --cream:        #F0E7D6;
  --cream-muted:  #B6A88E;

  /* Type */
  --display: "Bricolage Grotesque", Georgia, serif;
  --sans:    "Hanken Grotesk", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Fluid type scale (1.25 ~ major third, fluid) */
  --t-xs:   0.78rem;
  --t-sm:   0.9rem;
  --t-base: 1.02rem;
  --t-md:   clamp(1.1rem, 0.9rem + 0.9vw, 1.35rem);
  --t-lg:   clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
  --t-xl:   clamp(2.1rem, 1.3rem + 3.6vw, 3.4rem);
  --t-2xl:  clamp(2.9rem, 1.4rem + 6.6vw, 6.2rem);
  --t-3xl:  clamp(3.6rem, 1.2rem + 10vw, 8.5rem);

  /* Depth - hard poster offset + soft ambient (layered, never blurred-glass) */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --sh-hard:   4px 4px 0 var(--ink);
  --sh-hard-lg:7px 7px 0 var(--ink);
  --sh-amber:  4px 4px 0 var(--amber);
  --sh-soft:   0 18px 38px -26px rgba(27,23,19,.55);
  --sh-lift:   0 2px 0 #ffffffaa inset, 0 14px 30px -22px rgba(27,23,19,.5);

  --edge: 1.5px solid var(--ink);
  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--amber); color: var(--ink); }

/* Paper grain - atmospheric depth, very subtle, not noisy */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Section eyebrow - ledger entry marker */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 1.5px; background: var(--vermilion);
}
.eyebrow .num { color: var(--vermilion); font-weight: 700; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
.balance { text-wrap: balance; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .82rem 1.4rem;
  background: var(--bg); color: var(--fg);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-xs);
  font-weight: 700; font-size: var(--t-sm); letter-spacing: .01em;
  box-shadow: var(--sh-hard);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--accent { --bg: var(--vermilion); --fg: #fff; border-color: var(--ink); }
.btn--ghost  { --bg: transparent; --fg: var(--ink); box-shadow: 2px 2px 0 var(--ink-faint); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--lg { padding: 1rem 1.7rem; font-size: var(--t-base); }
.btn .arr { transition: transform .15s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- Chips / tags ---------- */
.chip {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .34rem .7rem; border: 1.5px solid var(--ink);
  border-radius: var(--r-xs); background: var(--card);
}
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 3px #4e6a3a30; }
.dot--live { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 3px #4e6a3a30 } 50%{ box-shadow:0 0 0 6px #4e6a3a10 } }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: #f3ede1ee;
  border-bottom: 1.5px solid var(--ink);
  backdrop-filter: saturate(1.1); /* mild - color, not frost */
}
.topbar__in { display: flex; align-items: center; gap: 1rem; height: 62px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.brand__mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--vermilion); color: #fff; border: 1.5px solid var(--ink);
  border-radius: var(--r-xs); box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  transform: rotate(-3deg);
}
.topbar__spacer { flex: 1; }
.topbar__meta { display: flex; align-items: center; gap: 1rem; }
.spots-mini { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); }
.spots-mini b { color: var(--vermilion); }
@media (max-width: 720px){ .spots-mini{ display:none; } .topbar__in{ height: 56px; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem,7vw,5rem); position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: start; }
@media (max-width: 920px){ .hero__grid{ grid-template-columns: 1fr; } }

.hero__kicker { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.hero h1 {
  font-size: var(--t-3xl);
  letter-spacing: -.035em;
  margin-bottom: 1.3rem;
}
.hero h1 .mark {
  position: relative; display: inline-block; color: var(--vermilion); font-style: italic;
}
.hero h1 .mark::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .42em; z-index: -1;
  background: var(--amber-wash); transform: rotate(-1deg);
}
.hero__sub { font-size: var(--t-md); color: var(--ink-2); max-width: 38ch; margin-bottom: 2rem; }
.hero__sub b { color: var(--ink); font-weight: 700; }

/* Inline capture */
.capture { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 460px; }
.capture__field {
  flex: 1 1 220px; display: flex; align-items: center; gap: .55rem;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-xs);
  padding: 0 .9rem; box-shadow: var(--sh-hard); transition: box-shadow .12s, transform .12s;
}
.capture__field:focus-within { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--vermilion); }
.capture__field input { flex: 1; border: none; background: none; outline: none; padding: .85rem 0; min-width: 0; }
.capture__field input::placeholder { color: var(--ink-muted); }
.capture__note { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-muted); margin-top: .9rem; display:flex; align-items:center; gap:.5rem; }
.capture__note svg{ flex:none; }

/* Hero side - the "build receipt" card */
.receipt {
  background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  box-shadow: var(--sh-hard-lg); position: relative; overflow: hidden;
  transform: rotate(.6deg);
}
.receipt__top { padding: .8rem 1.1rem; border-bottom: 1.5px dashed var(--ink-faint); display:flex; align-items:center; justify-content:space-between; background: var(--paper-2); }
.receipt__top .ttl { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; }
.receipt__body { padding: 1.1rem; }
.receipt__row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted var(--ink-faint); font-size: var(--t-sm); }
.receipt__row:last-child { border: none; }
.receipt__row .k { color: var(--ink-muted); font-family: var(--mono); font-size: var(--t-xs); }
.receipt__row .v { font-weight: 600; text-align: right; }
.receipt__row .v.pos { color: var(--moss); }
.receipt__stamp {
  position: absolute; right: -6px; bottom: 14px; transform: rotate(-9deg);
  font-family: var(--mono); font-weight: 700; font-size: var(--t-xs); letter-spacing: .12em;
  color: var(--vermilion); border: 2px solid var(--vermilion); padding: .3rem .55rem; border-radius: var(--r-xs);
  opacity: .9;
}

/* Countdown */
.countdown { margin-top: 2.2rem; }
.countdown__lbl { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .6rem; display: block; }
.clock { display: flex; gap: .55rem; flex-wrap: wrap; }
.clock__cell {
  background: var(--ink); color: var(--paper); border-radius: var(--r-xs);
  padding: .55rem .7rem; min-width: 62px; text-align: center; border: 1.5px solid var(--ink);
  box-shadow: var(--sh-soft);
}
.clock__cell .n { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.clock__cell .u { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-muted); margin-top: .25rem; }

/* ---------- Marquee proof strip ---------- */
.marquee { border-block: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); overflow: hidden; }
.marquee__track { display: flex; gap: 3rem; white-space: nowrap; padding: .7rem 0; animation: scroll 32s linear infinite; font-family: var(--mono); font-size: var(--t-sm); letter-spacing: .04em; }
.marquee__track span { display: inline-flex; align-items: center; gap: 3rem; }
.marquee__track span::after { content: "✦"; color: var(--amber); }
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ============================================================
   GENERIC SECTION HEADER
   ============================================================ */
.sec-head { max-width: 62ch; margin-bottom: clamp(2rem,4vw,3rem); }
.sec-head h2 { font-size: var(--t-xl); margin-bottom: .8rem; }
.sec-head p { font-size: var(--t-md); color: var(--ink-2); }

/* ---------- Contrast block (the "info vs outcome" argument) ---------- */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--ink); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-hard-lg); }
@media (max-width: 680px){ .versus{ grid-template-columns: 1fr; } }
.versus__col { padding: clamp(1.4rem,3vw,2.2rem); }
.versus__col--bad { background: var(--paper-2); border-right: 1.5px solid var(--ink); }
.versus__col--good { background: var(--ink); color: var(--cream); }
@media (max-width:680px){ .versus__col--bad{ border-right:none; border-bottom:1.5px solid var(--ink);} }
.versus__tag { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; display:inline-block; padding:.2rem .5rem; border:1.5px solid currentColor; border-radius: var(--r-xs); }
.versus__col--good .versus__tag { color: var(--amber); border-color: var(--amber); }
.versus__col h3 { font-size: var(--t-lg); margin-bottom: .9rem; }
.versus ul { list-style: none; display: grid; gap: .65rem; }
.versus li { display: flex; gap: .6rem; font-size: var(--t-sm); }
.versus li .ic { flex: none; font-family: var(--mono); font-weight: 700; }
.versus__col--bad .ic { color: var(--ink-muted); }
.versus__col--good .ic { color: var(--amber); }

/* ============================================================
   OUTCOME CARDS - what you leave with
   ============================================================ */
.cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
@media (max-width: 880px){ .cards3{ grid-template-columns: 1fr; } }
.ocard {
  background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  padding: 1.5rem; position: relative; box-shadow: var(--sh-hard);
  transition: transform .14s ease, box-shadow .14s ease;
}
.ocard:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.ocard__no { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-muted); }
.ocard__ic { width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: var(--r-xs); background: var(--amber-wash); margin: .8rem 0 1rem; box-shadow: 2px 2px 0 var(--ink); }
.ocard h3 { font-size: var(--t-md); margin-bottom: .5rem; }
.ocard p { font-size: var(--t-sm); color: var(--ink-2); }
.ocard__foot { margin-top: 1rem; padding-top: .9rem; border-top: 1px dotted var(--ink-faint); font-family: var(--mono); font-size: var(--t-xs); color: var(--moss); display:flex; align-items:center; gap:.4rem; }

/* Skill band - the broader "you keep the skill" hook */
.skillband {
  margin-top: 1.2rem; background: var(--ink); color: var(--cream);
  border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  box-shadow: var(--sh-hard-lg); padding: clamp(1.4rem,3vw,2.2rem);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem,3vw,2.2rem); align-items: center;
}
@media (max-width: 720px){ .skillband{ grid-template-columns: 1fr; gap: 1rem; } }
.skillband__tag {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--amber); border-radius: var(--r-xs);
  padding: .45rem .7rem; align-self: start; white-space: nowrap; box-shadow: 2px 2px 0 var(--amber-wash);
}
.skillband__body h3 { font-size: var(--t-lg); line-height: 1.1; margin-bottom: .6rem; }
.skillband__body h3 em { color: var(--amber); font-style: italic; }
.skillband__body p { font-size: var(--t-sm); color: var(--cream-muted); max-width: 64ch; }

/* ============================================================
   CURRICULUM - the 4-week ledger
   ============================================================ */
.ledger { border: 1.5px solid var(--ink); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-hard-lg); background: var(--card); }
.lrow { display: grid; grid-template-columns: 132px 1fr auto; gap: 1.2rem; align-items: center; padding: 1.35rem clamp(1.1rem,3vw,2rem); border-bottom: 1.5px solid var(--ink); transition: background .15s; }
.lrow:last-child { border-bottom: none; }
.lrow:hover { background: var(--paper-2); }
@media (max-width: 760px){ .lrow{ grid-template-columns: 1fr; gap: .5rem; } }
.lrow__wk { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--vermilion); font-weight: 700; }
.lrow__wk b { display:block; font-family: var(--display); font-size: 2rem; color: var(--ink); letter-spacing: -.03em; }
.lrow__main h3 { font-size: var(--t-md); margin-bottom: .3rem; }
.lrow__main p { font-size: var(--t-sm); color: var(--ink-2); max-width: 52ch; }
.lrow__out { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-muted); text-align: right; }
.lrow__out b { color: var(--moss); display: block; }
.lrow--bonus { background: var(--ink); color: var(--cream); }
.lrow--bonus:hover { background: var(--ink); }
.lrow--bonus .lrow__wk, .lrow--bonus .lrow__wk b { color: var(--amber); }
.lrow--bonus .lrow__main p { color: var(--cream-muted); }
.lrow--bonus .lrow__out { color: var(--cream-muted); }

/* ============================================================
   INTERACTIVE DEMO - "ask the Naija store assistant"
   ============================================================ */
.demo { background: var(--night); color: var(--cream); border-radius: var(--r-md); border: 1.5px solid var(--ink); overflow: hidden; box-shadow: var(--sh-hard-lg); }
.demo__bar { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--night-line); background: var(--night-2); }
.demo__bar .tl { display:flex; gap:.4rem; }
.demo__bar .tl i { width:.7rem; height:.7rem; border-radius:50%; display:block; }
.demo__bar .ttl { font-family: var(--mono); font-size: var(--t-xs); color: var(--cream-muted); margin-left: .4rem; letter-spacing:.06em; }
.demo__body { padding: 1.3rem; display: flex; flex-direction: column; gap: .9rem; min-height: 230px; }
.bubble { max-width: 80%; padding: .7rem .95rem; border-radius: 10px 10px 10px 2px; font-size: var(--t-sm); line-height: 1.5; }
.bubble--bot { background: var(--night-2); border: 1px solid var(--night-line); align-self: flex-start; }
.bubble--bot .src { display:block; margin-top:.5rem; font-family: var(--mono); font-size: .68rem; color: var(--amber); }
.bubble--user { background: var(--vermilion); color: #fff; align-self: flex-end; border-radius: 10px 10px 2px 10px; }
.demo__chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.3rem 1.1rem; }
.qchip { font-family: var(--mono); font-size: var(--t-xs); padding: .4rem .7rem; border: 1px solid var(--night-line); border-radius: var(--r-xs); color: var(--cream); background: var(--night-2); transition: background .15s, border-color .15s; }
.qchip:hover { background: var(--vermilion); border-color: var(--vermilion); }
.typing span { display:inline-block; width:.4rem; height:.4rem; border-radius:50%; background: var(--cream-muted); margin-right:.2rem; animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }

/* ============================================================
   THE MATH - ₦100k justification
   ============================================================ */
.math { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 880px){ .math{ grid-template-columns: 1fr; } }
.mcard { border: 1.5px solid var(--ink); border-radius: var(--r-sm); padding: 1.5rem; background: var(--paper-2); position: relative; }
.mcard__tag { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.mcard__price { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem,3vw,2.6rem); margin: .5rem 0 .2rem; letter-spacing: -.03em; }
.mcard__price s { color: var(--ink-muted); text-decoration-thickness: 2px; }
.mcard p { font-size: var(--t-sm); color: var(--ink-2); }
.mcard--win { background: var(--ink); color: var(--cream); box-shadow: var(--sh-hard-lg); transform: translateY(-6px); }
.mcard--win .mcard__tag { color: var(--amber); }
.mcard--win p { color: var(--cream-muted); }
.mcard--win .mcard__price { color: #fff; }
.mcard__flag { position:absolute; top:-1px; right: 1rem; background: var(--vermilion); color:#fff; font-family: var(--mono); font-size:.62rem; letter-spacing:.1em; padding:.3rem .55rem; border:1.5px solid var(--ink); border-top:none; border-radius: 0 0 var(--r-xs) var(--r-xs); }
@media (max-width:880px){ .mcard--win{ transform:none; } }

/* ============================================================
   FOUNDER
   ============================================================ */
.founder { display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
@media (max-width: 820px){ .founder{ grid-template-columns: 1fr; } }
.founder__card { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-sm); padding: 1.4rem; box-shadow: var(--sh-hard-lg); }
.founder__photo {
  aspect-ratio: 4 / 5; border: 1.5px solid var(--ink); border-radius: var(--r-xs);
  background: var(--paper-3);
  position: relative; overflow: hidden;
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.founder__photo .badge { position: absolute; bottom: .7rem; right: .7rem; box-shadow: 2px 2px 0 var(--ink); }
.founder__caption { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-muted); line-height: 1.4; margin: .6rem 0 1rem; }
.founder__name { font-family: var(--display); font-weight: 800; font-size: var(--t-lg); }
.founder__role { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-muted); margin-bottom: 1rem; }
.cred { display: grid; gap: .55rem; }
.cred li { display: flex; gap: .6rem; font-size: var(--t-sm); align-items: flex-start; }
.cred li .ic { flex:none; color: var(--vermilion); font-family: var(--mono); font-weight: 700; }
.founder__pull { font-family: var(--display); font-size: var(--t-lg); line-height: 1.18; letter-spacing: -.02em; margin-bottom: 1.4rem; }
.founder__pull .mark { background: var(--amber-wash); padding: 0 .15em; }
.founder__body p { color: var(--ink-2); margin-bottom: 1rem; max-width: 58ch; }

/* ============================================================
   APPLICATION FORM
   ============================================================ */
.apply { background: var(--ink); color: var(--cream); position: relative; }
.apply .eyebrow { color: var(--cream-muted); }
.apply .eyebrow::before { background: var(--amber); }
.apply h2 { color: var(--cream); }
.apply__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: start; }
@media (max-width: 860px){ .apply__grid{ grid-template-columns: 1fr; } }
.apply__lead p { color: var(--cream-muted); max-width: 42ch; margin-bottom: 1.5rem; }
.apply__steps { display: grid; gap: .8rem; }
.apply__steps li { display:flex; gap:.8rem; align-items:flex-start; font-size: var(--t-sm); }
.apply__steps .n { flex:none; width:1.7rem; height:1.7rem; display:grid; place-items:center; font-family: var(--mono); font-size:.78rem; border:1.5px solid var(--amber); color: var(--amber); border-radius: var(--r-xs); }

.form { background: var(--night-2); border: 1.5px solid var(--cream); border-radius: var(--r-sm); padding: clamp(1.3rem,3vw,1.9rem); box-shadow: 6px 6px 0 var(--vermilion); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-muted); margin-bottom: .45rem; }
.field label .req { color: var(--vermilion); }
.field input, .field textarea, .field select {
  width: 100%; background: var(--night); border: 1.5px solid #ffffff33; border-radius: var(--r-xs);
  padding: .8rem .9rem; color: var(--cream); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px #e6a11f33; }
.field input::placeholder, .field textarea::placeholder { color: #8a7d6a; }
.field textarea { resize: vertical; min-height: 92px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px){ .field--row{ grid-template-columns: 1fr; } }
.form__submit { width: 100%; margin-top: .4rem; }
.form__fine { font-family: var(--mono); font-size: var(--t-xs); color: #8a7d6a; margin-top: .9rem; text-align: center; }
.form__msg { margin-top: 1rem; padding: .9rem; border-radius: var(--r-xs); font-size: var(--t-sm); display: none; }
.form__msg.show { display: block; }
.form__msg.ok { background: #4e6a3a; color: #fff; }
.form__msg.err { background: var(--vermilion-d); color: #fff; }

/* Success takeover */
.applied { display: none; text-align: center; padding: 1rem 0; }
.applied.show { display: block; }
.applied .big { font-family: var(--display); font-weight: 800; font-size: var(--t-lg); margin: .6rem 0; color:#fff; }
.applied .pos { font-family: var(--mono); color: var(--amber); font-size: var(--t-sm); }
.applied .stamp { display:inline-block; transform: rotate(-6deg); border:2px solid var(--moss); color: #9fc27a; font-family: var(--mono); font-weight:700; letter-spacing:.12em; padding:.4rem .7rem; border-radius: var(--r-xs); margin-bottom: 1rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: grid; gap: .8rem; max-width: 800px; }
.q { border: 1.5px solid var(--ink); border-radius: var(--r-sm); background: var(--card); overflow: hidden; box-shadow: 3px 3px 0 var(--ink-faint); }
.q summary { list-style: none; cursor: pointer; padding: 1.05rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 700; font-family: var(--display); font-size: var(--t-md); }
.q summary::-webkit-details-marker { display: none; }
.q summary .pm { flex: none; font-family: var(--mono); font-size: 1.3rem; color: var(--vermilion); transition: transform .2s; line-height: 1; }
.q[open] summary .pm { transform: rotate(45deg); }
.q__a { padding: 0 1.2rem 1.2rem; color: var(--ink-2); font-size: var(--t-sm); max-width: 64ch; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { text-align: center; }
.final h2 { font-size: var(--t-2xl); margin-bottom: 1rem; }
.final p { font-size: var(--t-md); color: var(--ink-2); max-width: 46ch; margin: 0 auto 2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1.5px solid var(--ink); background: var(--paper-2); }
.footer__in { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; padding-block: 2rem; }
.footer__meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-muted); line-height: 1.7; }
.footer__links { display: flex; gap: 1.2rem; font-family: var(--mono); font-size: var(--t-xs); }
.footer__links a:hover { color: var(--vermilion); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Utility ---------- */
.mono { font-family: var(--mono); }
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.hide { display: none !important; }

/* Visually hidden but available to screen readers + crawlers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}