/* ============================================================
   Intelligent AI World — Shared Design System (iaw.css)
   Used by every page: home, solution landing pages, blog posts, hubs.
   ============================================================ */
/* ============================================================
   IAW — Brand System v2
   Mark:        Aperture (three converging arcs)
   Type:        Inter (self-hosted variable, 400–700 + italic) —
                one face on every OS; system stack is fallback only
   Palette:     Ink, bone, lime (signature) + teal, oxblood (vertical)
   Voice:       Editorial, confident, contrarian
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-var-italic.woff2") format("woff2");
}

:root {
  /* Brand channels — rgba() reads these so the whole system re-themes from one block */
  --ink-rgb:    10,10,12;
  --bone-rgb:   244,239,230;
  --lime-rgb:   212,255,61;

  --ink:        #0a0a0c;
  --ink-0:      #08080a;
  --ink-2:      #131318;
  --ink-3:      #1d1d24;
  --bone:       #f4efe6;
  --bone-mute:  #a8a39a;
  --bone-soft:  #847f77;
  --line:       rgba(var(--bone-rgb),0.08);
  --line-2:     rgba(var(--bone-rgb),0.16);
  --line-3:     rgba(var(--bone-rgb),0.24);

  /* Signatures */
  --lime:       #d4ff3d;        /* brand fill — stays bright in both themes */
  --lime-ink:   #d4ff3d;        /* accent as TEXT — re-themed for contrast on light */
  --on-lime:    #0a0a0c;        /* text sitting ON a lime fill — never flips */
  --lime-soft:  rgba(var(--lime-rgb),0.12);
  --teal:       #4a8e90;       /* healthcare */
  --teal-soft:  rgba(74,142,144,0.15);
  --oxblood:    #a3343b;       /* legal — fill */
  --oxblood-ink: #d0606a;      /* legal as TEXT — #a3343b is 2.74:1 on ink */
  --oxblood-soft: rgba(163,52,59,0.15);

  --serif: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --w:      1280px;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv01", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--lime); color: var(--on-lime); }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 32px; }
.serif { font-family: var(--serif); font-style: normal; font-weight: 400; letter-spacing: -0.02em; }
.mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-mute);
  font-weight: 500;
}
.tnum { font-variant-numeric: tabular-nums; }

/* Film grain overlay */
.grain {
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

/* ============================================================
   NAV
   ============================================================ */
nav.top {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(140%);
  background: rgba(var(--ink-rgb),0.6);
  border-bottom: 1px solid var(--line);
}
nav.top .row {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; letter-spacing: -0.015em; font-size: 15px;
  color: var(--bone);
}
.brand .mark { width: 30px; height: 30px; display: block; }
/* real logo carries its own colors (bone spokes/nodes + lime core) — no override */
.brand .wordmark { font-family: var(--sans); }
.brand .wordmark em {
  font-family: var(--serif); font-style: normal;
  font-weight: 400; color: var(--lime-ink);
  margin-right: 1px;
}
nav.top ul {
  display: flex; gap: 32px; align-items: center;
  margin: 0; padding: 0; list-style: none;
  font-size: 13.5px; color: var(--bone-mute);
}
nav.top ul a { transition: color .2s var(--ease); position: relative; }
nav.top ul a:hover { color: var(--bone); }
nav.top ul .glyph { color: var(--lime-ink); margin-right: 4px; font-family: var(--serif); font-style: normal; opacity: 0.5; }

/* Scroll progress line */
.scroll-progress {
  position: absolute; bottom: -1px; left: 0;
  height: 1px; background: var(--lime);
  width: 0%; transition: width .12s linear;
  box-shadow: 0 0 8px var(--lime);
}

.cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  background: var(--lime);
  color: var(--on-lime);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  border: 1px solid var(--lime);
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), background .2s var(--ease);
}
.cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -8px rgba(var(--lime-rgb),0.45);
}
.cta-btn.alt {
  background: transparent; color: var(--bone);
  border-color: var(--line-2);
}
.cta-btn.alt:hover {
  background: var(--bone); color: var(--ink); border-color: var(--bone);
  box-shadow: none;
}
.cta-btn .arrow { display: inline-flex; align-items: center; transition: transform .2s var(--ease); }
.cta-btn:hover .arrow { transform: translateX(3px); }

/* Mobile nav toggle (hamburger) */
.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--bone); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
nav.top.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.top.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.top.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  nav.top ul {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(var(--ink-rgb),0.97); backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--line);
    padding: 4px 22px 18px;
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  nav.top.nav-open ul { opacity: 1; transform: none; pointer-events: auto; }
  nav.top ul li { width: 100%; border-top: 1px solid var(--line); }
  nav.top ul li:first-child { border-top: 0; }
  nav.top ul a { display: flex; align-items: center; min-height: 48px; font-size: 16px; }
  /* Tap-target minimums on phones */
  .cta-btn { min-height: 44px; }
  nav.top .cta-btn { padding: 10px 16px; font-size: 13px; white-space: nowrap; }
  .foot-cols a, footer a { padding-block: 4px; }
}
@media (max-width: 460px) { .brand .wordmark { display: none; } }

/* ============================================================
   STICKY CTA PILL (appears after hero)
   ============================================================ */
.sticky-cta {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 90;
  display: flex; align-items: center; gap: 12px;
  background: var(--lime);
  color: var(--on-lime);
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 20px 50px -12px rgba(var(--lime-rgb),0.45), 0 0 0 1px rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.sticky-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: normal; font-size: 16px;
}
.sticky-cta .arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime-ink);
  display: flex; align-items: center; justify-content: center;
}
.sticky-cta:hover { transform: translateY(-2px); }
@media (max-width: 600px) {
  .sticky-cta { right: 16px; left: 16px; bottom: 16px; justify-content: center; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 200px 0 140px;
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(var(--bone-rgb),0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--bone-rgb),0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 78%);
}

/* Aperture motif as hero backdrop */
.aperture-bg {
  position: absolute;
  right: -8%; top: -10%;
  width: 70vw; max-width: 1100px;
  aspect-ratio: 1;
  z-index: -2;
  opacity: 0.85;
  animation: rotate-slow 90s linear infinite;
}
@keyframes rotate-slow { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .aperture-bg { animation: none; }
}

.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 40px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(var(--ink-rgb),0.62);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.hero .eyebrow .glyph {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lime); color: var(--on-lime);
  border-radius: 50%;
  font-family: var(--serif); font-style: normal;
  font-size: 13px;
}
.hero .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  animation: pulse 2.4s ease-in-out infinite;
  margin-right: 6px;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.hero h1 {
  /* Inter runs ~5% wider than the SF Pro this was tuned on — scale and tracking
     compensated so the headline keeps its original three-line composition */
  font-size: clamp(46px, 7vw, 102px);
  line-height: 0.98;
  letter-spacing: -0.048em;
  font-weight: 500;
  margin: 0 0 40px;
  max-width: 19ch;
  font-variation-settings: "opsz" 96;
}
.hero h1 em {
  font-family: var(--serif); font-style: normal;
  font-weight: 400; color: var(--lime-ink);
  letter-spacing: -0.03em;
}

/* Split-text reveal */
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.split-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.split-line.in > span { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .split-line > span { transform: none; transition: none; }
}

.hero .lede {
  font-size: clamp(17px, 1.45vw, 21px);
  color: var(--bone-mute);
  max-width: 56ch;
  margin: 0 0 48px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s;
}
.hero .lede.in { opacity: 1; transform: none; }

.hero .actions {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease) .7s, transform .8s var(--ease) .7s;
}
.hero .actions.in { opacity: 1; transform: none; }
.hero .actions .cta-btn { padding: 14px 24px; font-size: 14px; }

.hero .meta {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 56px;
  margin-top: 88px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  max-width: 720px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease) .9s, transform .8s var(--ease) .9s;
}
.hero .meta.in { opacity: 1; transform: none; }
.hero .meta b {
  display: block;
  font-family: var(--serif); font-style: normal; font-weight: 400;
  color: var(--bone);
  font-size: 36px; letter-spacing: -0.02em; line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.hero .meta .label { color: var(--bone-soft); font-size: 12.5px; }
@media (max-width: 700px) {
  .hero .meta { grid-template-columns: 1fr; gap: 28px; }
}

/* Social proof strip */
.proof-strip {
  margin-top: 88px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease) 1.1s, transform .8s var(--ease) 1.1s;
}
.proof-strip.in { opacity: 1; transform: none; }
.proof-strip .label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-soft); margin-bottom: 24px;
}
.proof-strip .logos {
  display: flex; gap: 56px; align-items: center; flex-wrap: wrap;
  font-family: var(--serif); font-style: normal;
  font-size: 22px; color: var(--bone-mute);
  letter-spacing: -0.01em;
}
.proof-strip .logos span { opacity: 0.7; transition: opacity .2s ease; }
.proof-strip .logos span:hover { opacity: 1; color: var(--bone); }

/* ============================================================
   MANIFESTO STRIP (was: ticker)
   ============================================================ */
.manifesto {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  overflow: hidden;
  background: var(--ink);
}
.manifesto .track {
  display: flex; gap: 64px;
  white-space: nowrap;
  animation: scroll 110s linear infinite;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--bone-mute);
  letter-spacing: -0.015em;
}
.manifesto:hover .track { animation-play-state: paused; }
.manifesto .track > span { display: inline-flex; align-items: center; gap: 64px; }
.manifesto .glyph-sm {
  display: inline-block; width: 14px; height: 14px;
  vertical-align: middle;
}
.manifesto .glyph-sm path { stroke: var(--lime-ink); }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .manifesto .track { animation: none; }
}

/* ============================================================
   SECTION BASE
   ============================================================ */
section { padding: 140px 0; position: relative; }
.section-label {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 40px;
}
.section-label::before {
  content: ""; width: 28px; height: 1px; background: var(--lime);
}
h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
  max-width: 22ch;
  font-variation-settings: "opsz" 64;
}
h2 em {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  color: var(--lime-ink);
}
.h2-sub {
  margin-top: 28px;
  font-size: 18px; color: var(--bone-mute);
  max-width: 60ch; line-height: 1.55;
}

/* ============================================================
   01 / PROOF — live builds + guarantees (replaced the stat wall)
   ============================================================ */
.gap { border-top: 1px solid var(--line); }
.gap .raw-panel { margin-top: 56px; }

/* ── Live product theater ─────────────────────────────────
   The real product in an embedded frame. Nothing loads until
   the visitor clicks Go live — the poster is pure CSS. */
.theater { margin-top: 56px; }
.th-tabs {
  display: flex; gap: 10px; margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.th-tabs::-webkit-scrollbar { display: none; }
.th-tab {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 12px 18px 11px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(var(--bone-rgb), .015);
  color: var(--bone-mute); cursor: pointer;
  font-family: inherit;
  transition: border-color .35s cubic-bezier(.2,.7,.3,1), background .35s cubic-bezier(.2,.7,.3,1), color .35s cubic-bezier(.2,.7,.3,1);
}
.th-tab b { font-size: 14.5px; color: var(--bone); letter-spacing: -0.01em; }
.th-tab span { font-size: 11px; color: var(--bone-soft); }
.th-tab:hover { border-color: rgba(var(--bone-rgb), .2); }
.th-tab.active { border-color: rgba(var(--lime-rgb), .55); background: rgba(var(--lime-rgb), .05); }
.th-tab.active b { color: var(--lime-ink); }
.th-tab:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: 3px; }

.th-frame {
  border: 1px solid rgba(var(--bone-rgb), .12);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .6), 0 30px 80px -20px rgba(var(--ink-rgb), .8), 0 0 64px -18px rgba(var(--lime-rgb), .18);
}
.th-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--bone-rgb), .05), rgba(var(--bone-rgb), .015)), rgba(var(--ink-rgb), .93);
}
.th-dots { display: flex; gap: 6px; }
.th-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--bone-rgb), .16); }
.th-url {
  flex: 1; min-width: 0;
  font-size: 11.5px; letter-spacing: .02em; color: var(--bone-mute);
  background: rgba(var(--ink-rgb), .55);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.th-open {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-soft); text-decoration: none;
  transition: color .3s ease;
}
.th-open:hover { color: var(--lime-ink); }
.th-soon {
  flex: 0 0 auto;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px;
}
.th-stage { position: relative; aspect-ratio: 16 / 10; background: var(--ink-0); }
.th-poster {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 32px;
  background:
    radial-gradient(90% 90% at 50% 10%, rgba(var(--lime-rgb), .07) 0%, rgba(var(--lime-rgb), 0) 55%),
    linear-gradient(180deg, var(--ink-2), var(--ink-0));
}
.th-badge {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime-ink);
  border: 1px solid rgba(var(--lime-rgb), .32); border-radius: 999px;
  padding: 8px 16px;
  background: rgba(var(--lime-rgb), .05);
}
.th-foot {
  margin-top: 16px;
  font-size: 13.5px; line-height: 1.55; color: var(--bone-soft);
  max-width: 46em;
}
.th-mono {
  width: 76px; height: 76px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--lime-ink);
  border: 1px solid rgba(var(--lime-rgb), .3);
  background: rgba(var(--lime-rgb), .05);
  margin-bottom: 6px;
}
.th-name { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--bone); }
.th-sub { font-size: 14px; color: var(--bone-mute); line-height: 1.5; max-width: 40ch; margin: 0 0 14px; }
.th-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: rgba(var(--ink-rgb), .93);
}
.th-chips span {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px;
}
.th-chips span:first-child { color: var(--lime-ink); border-color: rgba(var(--lime-rgb), .35); }
@media (max-width: 700px) {
  .th-stage { aspect-ratio: 4 / 5; }
  .th-chrome { gap: 10px; padding: 10px 12px; }
  .th-open { display: none; }
  /* six tabs need a visible affordance that the rail scrolls */
  .th-tabs { padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .th-tab { padding: 10px 14px 9px; }
  .th-tab b { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .raw-live .dot { animation: none; }
}

/* four compact client-build cards under the Rockets panel */
.build-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.build {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(var(--bone-rgb), .015);
}
.build .b-tag {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime-ink); margin-bottom: 8px;
}
.build b { font-size: 16.5px; color: var(--bone); letter-spacing: -0.01em; }
.build span { font-size: 12.5px; color: var(--bone-soft); line-height: 1.45; }

/* the guarantees, in writing */
.inwriting {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-top: 34px;
}
.iw-label {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-soft); margin-bottom: 24px;
}
.iw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.iw-item { display: flex; flex-direction: column; gap: 8px; }
.iw-item b { font-size: 16px; color: var(--bone); letter-spacing: -0.01em; }
.iw-item span { font-size: 13.5px; color: var(--bone-mute); line-height: 1.55; max-width: 34em; }

@media (max-width: 900px) {
  .build-row { grid-template-columns: repeat(2, 1fr); }
  .iw-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 480px) {
  .build-row { grid-template-columns: 1fr; }
}

/* ============================================================
   02 / VERTICALS — Per-vertical micro-palettes + textures
   ============================================================ */
.verts { border-top: 1px solid var(--line); }
.vert-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vert {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .25s var(--ease);
  min-height: 620px;

  /* spotlight var */
  --mx: 50%; --my: 50%;
}
.vert::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px at var(--mx) var(--my), rgba(var(--lime-rgb),0.07), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.vert:hover::before { opacity: 1; }
.vert:hover { transform: translateY(-4px); border-color: var(--line-2); }

/* Per-vertical accent colors */
.vert.uni    { --acc: var(--lime-ink); --acc-soft: var(--lime-soft); }
.vert.health { --acc: var(--teal); --acc-soft: var(--teal-soft); }
.vert.legal  { --acc: var(--oxblood-ink); --acc-soft: var(--oxblood-soft); }
.vert.health::before { background: radial-gradient(360px at var(--mx) var(--my), rgba(74,142,144,0.10), transparent 60%); }
.vert.legal::before  { background: radial-gradient(360px at var(--mx) var(--my), rgba(163,52,59,0.10), transparent 60%); }

/* Vertical textures (subtle, 6% opacity) */
.vert .texture { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; z-index: 0; }
.vert.uni .texture {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 23px,
    var(--bone) 23px,
    var(--bone) 24px
  );
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.vert.legal .texture::after {
  content: "§";
  position: absolute; bottom: -40px; right: -20px;
  font-family: var(--serif); font-style: normal;
  font-size: 360px; color: var(--bone);
  line-height: 0.8;
}

.vert .v-num {
  font-family: var(--serif); font-style: normal;
  font-size: 13px; color: var(--acc);
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.vert h3 {
  font-size: clamp(34px, 3vw, 44px);
  letter-spacing: -0.03em;
  line-height: 0.98; margin: 0 0 10px;
  font-weight: 500; position: relative; z-index: 1;
}
.vert h3 em {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  color: var(--acc);
}
.vert .v-tagline {
  font-family: var(--serif); font-style: normal;
  font-size: 17px; color: var(--bone-mute);
  margin: 0 0 22px; position: relative; z-index: 1;
}
.vert .v-desc {
  font-size: 14.5px; color: var(--bone-mute);
  line-height: 1.55; margin: 0 0 24px;
  position: relative; z-index: 1;
}
.vert .v-workflows {
  margin: 0 0 24px;
  display: flex; flex-wrap: wrap; gap: 6px;
  position: relative; z-index: 1;
}
.vert .v-workflows span {
  font-size: 11px; padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px; color: var(--bone-mute);
  font-family: var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Reference engagement */
.vert .v-ref {
  margin: 0 0 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--acc);
  border-radius: 4px 12px 12px 4px;
  background: rgba(var(--bone-rgb),0.02);
  position: relative; z-index: 1;
}
.vert .v-ref .label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 8px;
}
.vert .v-ref p {
  margin: 0; font-size: 13.5px; line-height: 1.5;
  color: var(--bone); font-family: var(--serif);
  font-style: normal; letter-spacing: -0.005em;
}

.vert .v-stat {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  position: relative; z-index: 1;
}
.vert .v-stat .big {
  font-family: var(--serif); font-style: normal;
  font-size: 36px; line-height: 1; letter-spacing: -0.02em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.vert .v-stat .big .hl { color: var(--acc); }
.vert .v-stat .lbl {
  margin-top: 8px; font-size: 12px;
  color: var(--bone-soft); line-height: 1.4;
  max-width: 32ch;
}
.vert .v-stat .v-src {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--acc);
  text-decoration: none; opacity: .85;
  transition: opacity .3s cubic-bezier(.2,.7,.3,1);
}
.vert .v-stat .v-src:hover { opacity: 1; }
.vert .v-stat .v-src .arrow { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.vert .v-stat .v-src:hover .arrow { transform: translateX(3px); }
.vert .v-link {
  margin-top: auto;
  font-size: 13.5px; font-weight: 600;
  display: inline-flex; gap: 8px; align-items: center;
  color: var(--bone);
  padding-top: 20px; border-top: 1px solid var(--line);
  position: relative; z-index: 1;
  transition: color .2s ease;
}
.vert .v-link:hover { color: var(--acc); }
.vert .v-link .arrow { transition: transform .2s var(--ease); }
.vert .v-link:hover .arrow { transform: translateX(4px); }

/* Healthcare ECG */
.vert.health .ecg {
  position: absolute; left: 0; right: 0; bottom: 80px;
  height: 60px; opacity: 0.18; z-index: 0;
  pointer-events: none;
}
.vert.health .ecg path { stroke: var(--teal); stroke-width: 1.2; fill: none; }

@media (max-width: 900px) {
  .vert-grid { grid-template-columns: 1fr; }
  .vert { min-height: auto; }
}

/* ============================================================
   03 / STUDIO — Manifesto pillars
   ============================================================ */
.studio { border-top: 1px solid var(--line); }
.studio-grid {
  margin-top: 96px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 96px;
  align-items: start;
}
.studio-pillars { display: grid; gap: 0; }
.pillar {
  border-top: 1px solid var(--line);
  padding: 32px 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
}
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar .num-svg {
  width: 60px; height: 56px;
  color: var(--lime-ink);
  font-family: var(--serif); font-style: normal;
}
.pillar .num-svg text {
  font-family: var(--serif); font-style: normal;
  font-size: 44px; fill: var(--lime-ink); fill-opacity: 0; stroke: var(--lime-ink);
  stroke-width: 1.2;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.2s var(--ease), fill-opacity 0.4s ease 0.8s;
}
.pillar.in .num-svg text { stroke-dashoffset: 0; fill-opacity: 1; }
.pillar h4 {
  font-size: 20px; letter-spacing: -0.02em;
  margin: 0 0 8px; font-weight: 600;
}
.pillar p { margin: 0; color: var(--bone-mute); font-size: 15px; line-height: 1.55; }
@media (max-width: 900px) { .studio-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ============================================================
   04 / ENGAGEMENTS — 4 tiers (Custom anchors the top)
   ============================================================ */
.stack { background: var(--ink-0); border-top: 1px solid var(--line); }
.tiers {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.8fr;
  gap: 16px;
}
.tier {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .25s var(--ease);
  --mx: 50%; --my: 50%;
}
.tier::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(380px at var(--mx) var(--my), rgba(var(--lime-rgb),0.06), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.tier:hover::before { opacity: 1; }
.tier:hover { transform: translateY(-4px); border-color: var(--line-2); }

.tier.flagship {
  background: linear-gradient(180deg, #181822 0%, #0e0e14 100%);
  border-color: rgba(var(--lime-rgb),0.28);
}
.tier.flagship::after {
  content: "Most engagements start here";
  position: absolute; top: 18px; right: 18px;
  background: var(--lime); color: var(--on-lime);
  padding: 5px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: -0.005em;
}
.tier .tier-tag {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-soft);
  margin-bottom: 22px;
}
.tier h3 {
  font-size: 24px; letter-spacing: -0.02em;
  line-height: 1.15; margin: 0 0 12px;
  font-weight: 600;
}
.tier h3 em { font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--lime-ink); }
.tier .price {
  margin: 16px 0 4px;
  font-family: var(--serif); font-style: normal;
  font-size: 32px; letter-spacing: -0.02em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.tier .price .unit { font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--bone-mute); margin-left: 6px; }
.tier .duration { font-size: 12.5px; color: var(--bone-soft); margin-bottom: 24px; }
.tier ul {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: grid; gap: 11px;
}
.tier ul li {
  font-size: 13.5px; color: var(--bone-mute); line-height: 1.5;
  padding-left: 20px; position: relative;
}
.tier ul li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 1px; background: var(--lime);
}

/* Risk reversal pill on Tier 1 */
.tier .risk-reversal {
  margin: 0 0 24px;
  padding: 14px 16px;
  background: rgba(var(--lime-rgb),0.06);
  border: 1px solid rgba(var(--lime-rgb),0.2);
  border-radius: 10px;
  font-family: var(--serif); font-style: normal;
  font-size: 13.5px; line-height: 1.45;
  color: var(--bone);
  letter-spacing: -0.005em;
}
.tier .risk-reversal .label {
  display: block;
  font-family: var(--mono); font-style: normal;
  font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--lime-ink);
  margin-bottom: 6px;
}

.tier .tier-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bone); font-size: 13.5px; font-weight: 600;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  transition: color .2s ease;
}
.tier .tier-cta:hover { color: var(--lime-ink); }
.tier .tier-cta .arrow { transition: transform .2s var(--ease); }
.tier .tier-cta:hover .arrow { transform: translateX(4px); }

/* Custom tier (4th) */
.tier.custom {
  background: var(--ink);
  border-color: var(--line);
}
.tier.custom .price-na {
  margin: 16px 0 4px;
  font-family: var(--serif); font-style: normal;
  font-size: 24px; color: var(--bone-mute);
}

@media (max-width: 1100px) {
  .tiers { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .tiers { grid-template-columns: 1fr; }
}

/* ============================================================
   05 / HOW — Interactive timeline
   ============================================================ */
.how { border-top: 1px solid var(--line); }
.timeline {
  margin-top: 96px;
  position: relative;
}
.timeline-bar {
  position: relative;
  height: 1px;
  background: var(--line);
  margin: 0 32px;
}
.timeline-bar .fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%; background: var(--lime);
  transition: width .8s var(--ease);
  box-shadow: 0 0 12px rgba(var(--lime-rgb),0.6);
}
.timeline-dots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 32px;
  top: -7px;
}
.t-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--line-3);
  transition: background .3s ease, border-color .3s ease, transform .3s var(--ease);
  position: relative;
}
.t-dot::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--lime);
  opacity: 0; transform: scale(0.6);
  transition: opacity .3s ease, transform .4s var(--ease);
}
.t-dot.active { background: var(--lime); border-color: var(--lime-ink); }
.t-dot.active::after { opacity: 1; transform: scale(1); }
.timeline-steps {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.t-step {
  padding: 0 32px;
  border-right: 1px solid var(--line);
  min-height: 220px;
  transition: opacity .3s ease;
  opacity: 0.55;
}
.t-step.active { opacity: 1; }
.t-step:last-child { border-right: none; }
.t-step .week {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--lime-ink); letter-spacing: 0.16em;
  text-transform: uppercase;
}
.t-step h5, .t-step h3 {
  margin: 14px 0 10px;
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15;
}
.t-step p { color: var(--bone-mute); font-size: 14px; line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
  .timeline-bar, .timeline-dots, .timeline-steps { margin: 0; grid-template-columns: 1fr; }
  .timeline-bar { display: none; }
  .timeline-dots { display: none; }
  .t-step { border-right: none; border-bottom: 1px solid var(--line); padding: 24px 0; opacity: 1; min-height: auto; }
}

/* ============================================================
   06 / LAB — Flagships + Launch Log
   ============================================================ */
.lab { border-top: 1px solid var(--line); }
.lab-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), border-color .25s var(--ease);
  --mx: 50%; --my: 50%;
}
.product::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px at var(--mx) var(--my), rgba(var(--lime-rgb),0.06), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.product:hover::before { opacity: 1; }
.product:hover { transform: translateY(-4px); border-color: var(--line-2); }
.product .p-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.product .p-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: var(--ink);
  letter-spacing: -0.01em;
  font-family: var(--serif); font-style: normal;
}
.product.simplos .p-mark { background: var(--lime); }
.product.dona .p-mark { background: var(--bone); }
.product.twinn .p-mark { background: var(--oxblood); color: #f4efe6; }
.product .p-stage {
  font-size: 10.5px; color: var(--bone-soft);
  font-family: var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.product h4 {
  font-size: 28px; letter-spacing: -0.02em;
  margin: 0 0 8px; font-weight: 600;
  line-height: 1.1;
}
.product .p-line {
  font-family: var(--serif); font-style: normal;
  color: var(--bone-mute); font-size: 17px; margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.product .p-desc {
  font-size: 14.5px; color: var(--bone-mute);
  line-height: 1.55; margin: 0 0 24px;
}
.product .p-link {
  margin-top: auto;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bone);
}
.product .p-link .arrow { transition: transform .2s var(--ease); }
.product .p-link:hover .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .lab-grid { grid-template-columns: 1fr; }
  .product { min-height: auto; }
}

/* Launch Log */
.launch-log {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}
.launch-log-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 32px;
  gap: 32px; flex-wrap: wrap;
}
.launch-log-head h4 {
  margin: 0; font-size: 24px;
  letter-spacing: -0.02em; font-weight: 500;
}
.launch-log-head h4 em { font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--lime-ink); }
.launch-log-head .ph {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12px; color: var(--bone-mute);
}
.launch-log-head .ph .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff6a3d;
  box-shadow: 0 0 8px #ff6a3d;
}

.log-table {
  border-top: 1px solid var(--line);
}
.log-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px 100px 60px;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 14px;
  transition: background .2s ease;
}
.log-row:hover { background: rgba(var(--bone-rgb),0.02); }
.log-row .date {
  font-family: var(--mono); font-size: 11px;
  color: var(--bone-soft); letter-spacing: 0.1em;
}
.log-row .name {
  font-weight: 600; color: var(--bone);
  letter-spacing: -0.01em;
}
.log-row .name .arr { color: var(--lime-ink); margin-right: 8px; font-family: var(--serif); font-style: normal; }
.log-row .upvotes {
  color: var(--bone-mute); font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.05em;
}
.log-row .rank {
  font-family: var(--serif); font-style: normal;
  color: var(--lime-ink); font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.log-row .visit {
  font-size: 11px; color: var(--bone-soft);
  text-align: right; transition: color .2s ease;
}
.log-row:hover .visit { color: var(--lime-ink); }
@media (max-width: 800px) {
  .log-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .log-row .upvotes, .log-row .rank, .log-row .date { font-size: 11px; }
}

/* ============================================================
   07 / FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq-list {
  margin-top: 80px;
  display: grid;
  gap: 0;
}
.faq-item {
  border-top: 1px solid var(--line);
  padding: 36px 0;
  display: grid;
  grid-template-columns: 60px 1fr 1.6fr;
  gap: 32px;
  align-items: start;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item .num {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--bone-soft);
  text-transform: uppercase;
}
.faq-item .q {
  font-family: var(--serif); font-style: normal;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25; letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0;
}
.faq-item .a {
  color: var(--bone-mute);
  font-size: 16px; line-height: 1.6;
  margin: 0;
  max-width: 34em;   /* ~70 characters — was running to 90 */
}
.faq-item .a b { color: var(--bone); font-weight: 600; }
@media (max-width: 800px) {
  .faq-item { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   08 / FOUNDER NOTE
   ============================================================ */
.founder {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(var(--lime-rgb),0.045), transparent 60%),
    var(--ink);
}
.founder-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: center;
}
.founder-photo-frame {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.founder-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.founder-photo-frame::after {
  /* subtle bottom scrim for depth */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--ink-rgb),0.62) 0%, transparent 40%);
  pointer-events: none; z-index: 1;
}
.founder-photo-frame .aperture-mask {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: soft-light;
  z-index: 2;
}
.founder-photo-frame .photo-cap {
  position: absolute; left: 20px; bottom: 16px; z-index: 3;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone); opacity: 0.9;
}
.founder-photo-frame .aperture-mask path { stroke: var(--lime-ink); }

blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--bone);
  hanging-punctuation: first;
  position: relative;
}
blockquote::first-letter {
  font-size: 1.6em;
  line-height: 1;
  color: var(--lime-ink);
  margin-right: 4px;
  vertical-align: -0.04em;
}
blockquote .pull-q {
  font-size: 60px; color: var(--lime-ink);
  line-height: 0; display: block; margin-bottom: 28px;
  font-family: var(--serif); font-style: normal;
}
.signature {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--bone-mute); font-size: 14px;
}
.signature b { color: var(--bone); font-weight: 600; display: block; margin-bottom: 2px; }

/* Founder credibility row */
.credibility {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cred {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(var(--bone-rgb),0.015);
}
.cred .cred-lbl {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-soft); margin-bottom: 8px;
}
.cred .cred-val {
  font-family: var(--serif); font-style: normal;
  font-size: 17px; color: var(--bone); letter-spacing: -0.01em;
  line-height: 1.15;
}
@media (max-width: 900px) {
  .founder-grid { grid-template-columns: 1fr; gap: 48px; }
  .credibility { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   09 / CTA + Scheduler
   ============================================================ */
.cta {
  border-top: 1px solid var(--line);
  padding: 140px 0 100px;
  background:
    radial-gradient(70% 80% at 50% 100%, rgba(var(--lime-rgb),0.1), transparent 60%);
}
.cta-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.cta h2 {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  max-width: 14ch;
}
.cta .lede {
  margin: 28px 0 36px;
  color: var(--bone-mute);
  font-size: 18px;
  max-width: 48ch;
}
.cta .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta .actions .cta-btn { padding: 14px 24px; font-size: 14px; }
.cta-meta {
  margin-top: 32px;
  color: var(--bone-soft); font-size: 13px;
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
}
.cta-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* Mock scheduler card */
.scheduler {
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.scheduler::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 100% 0, rgba(var(--lime-rgb),0.06), transparent 60%);
  pointer-events: none;
}
.sched-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
}
.sched-head .left {
  display: flex; align-items: center; gap: 12px;
}
.sched-head .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--lime);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: normal;
  color: var(--on-lime); font-size: 18px;
}
.sched-head .name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.sched-head .sub { font-size: 12px; color: var(--bone-mute); }
.sched-head .live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--bone-mute);
  font-family: var(--mono); letter-spacing: 0.1em;
}
.sched-head .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 8px var(--lime);
  animation: pulse 2s ease-in-out infinite;
}
.sched-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
}
.sched-day {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.sched-day .dow {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--bone-soft); letter-spacing: 0.16em; text-transform: uppercase;
}
.sched-day .date {
  font-family: var(--serif); font-style: normal;
  font-size: 26px; color: var(--bone); letter-spacing: -0.02em;
  margin: 4px 0 12px;
  font-variant-numeric: tabular-nums;
}
.sched-day .slots { display: grid; gap: 6px; }
.sched-day .slot {
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11.5px; color: var(--bone);
  font-family: var(--mono); letter-spacing: 0.05em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sched-day .slot:hover {
  background: var(--lime); color: var(--on-lime); border-color: var(--lime-ink);
}
.sched-day .slot.taken {
  text-decoration: line-through; color: var(--bone-soft);
  cursor: not-allowed; opacity: 0.5;
}
.sched-day .slot.taken:hover { background: transparent; border-color: var(--line); color: var(--bone-soft); }
.sched-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--bone-soft);
  display: flex; justify-content: space-between;
}

@media (max-width: 900px) {
  .cta-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   FOOTER + STUDIO STAMP
   ============================================================ */
footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 80px 0 40px;
  position: relative;
}
.foot-top {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 80px;
  align-items: start;
}
.foot-brand h5, .foot-brand .foot-tagline {
  font-family: var(--serif); font-style: normal;
  font-size: 24px; letter-spacing: -0.02em;
  color: var(--bone); margin: 24px 0 12px;
  max-width: 22ch; line-height: 1.2;
  font-weight: 400;
}
.foot-brand p { color: var(--bone-mute); font-size: 14px; max-width: 32ch; margin: 0; }
.foot-col h6, .foot-col h2 {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-soft); margin: 0 0 18px; font-weight: 500;
}
.foot-col a {
  display: block; color: var(--bone-mute);
  margin-bottom: 11px; font-size: 13.5px;
  transition: color .2s ease;
}
.foot-col a:hover { color: var(--bone); }

/* Studio stamp */
.studio-stamp {
  width: 120px; height: 120px;
  margin-bottom: 24px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.studio-stamp .ring {
  position: absolute; inset: 0;
  animation: rotate-slow 30s linear infinite;
}
.studio-stamp .ring text {
  font-family: var(--mono); font-size: 8.5px;
  fill: var(--bone-mute); letter-spacing: 0.16em;
  text-transform: uppercase;
}
.studio-stamp .center {
  width: 56px; height: 56px;
}
.studio-stamp .center path { stroke: var(--lime-ink); }
@media (prefers-reduced-motion: reduce) { .studio-stamp .ring { animation: none; } }

.foot-bottom {
  border-top: 1px solid var(--line);
  padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--bone-soft);
  flex-wrap: wrap; gap: 16px;
}
.foot-bottom .made {
  font-family: var(--serif); font-style: normal;
  color: var(--bone-mute);
}
@media (max-width: 1000px) {
  .foot-top { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .foot-top .foot-brand { grid-column: span 3; }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .split-line > span, .lede, .actions, .meta, .proof-strip {
    opacity: 1 !important; transform: none !important;
  }
}

/* SR-only utility */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   INNER PAGES — Solution landing pages, blog posts, hubs
   (shared components, brand-consistent with the home system)
   ============================================================ */

/* ----- Page hero (compact, for inner pages) ----- */
.page-hero { position: relative; padding: 150px 0 80px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(var(--bone-rgb),0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--bone-rgb),0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 78%);
}
.page-hero .aperture-bg { position: absolute; right: -6%; top: -14%; width: 56vw; max-width: 820px; aspect-ratio: 1; z-index: -2; opacity: 0.7; animation: rotate-slow 90s linear infinite; }
.page-hero h1 { font-size: clamp(38px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 500; margin: 0 0 28px; max-width: 18ch; font-variation-settings: "opsz" 96; }
.page-hero h1 em { font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--lime-ink); letter-spacing: -0.03em; }
.page-hero .lede { font-size: clamp(17px, 1.45vw, 21px); color: var(--bone-mute); max-width: 58ch; margin: 0 0 36px; line-height: 1.55; }
.page-hero .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ----- Breadcrumb ----- */
.breadcrumb { display: flex; gap: 10px; align-items: center; margin-bottom: 28px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-soft); flex-wrap: wrap; }
.breadcrumb a { color: var(--bone-mute); transition: color .2s ease; }
.breadcrumb a:hover { color: var(--lime-ink); }
.breadcrumb .sep { color: var(--lime-ink); opacity: 0.6; }

/* ----- Inline stat band ----- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
.stat-band .s { padding: 32px 24px; border-right: 1px solid var(--line); }
.stat-band .s:last-child { border-right: none; }
.stat-band .s .n { font-family: var(--serif); font-style: normal; font-size: clamp(34px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--bone); }
.stat-band .s .n .hl { color: var(--lime-ink); }
.stat-band .s .l { margin-top: 14px; font-size: 13px; color: var(--bone-mute); line-height: 1.45; }
@media (max-width: 900px){ .stat-band { grid-template-columns: 1fr 1fr; } .stat-band .s:nth-child(2n){ border-right:none; } .stat-band .s:nth-child(n+3){ border-top:1px solid var(--line);} }

/* ----- Two-column feature rows (problem / solution / how) ----- */
.feature-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.feature-row.flip { grid-template-columns: 1.1fr 1fr; }
@media (max-width: 900px){ .feature-row, .feature-row.flip { grid-template-columns: 1fr; gap: 36px; } }

/* ----- Numbered step list ----- */
.steplist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.steplist .row { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.steplist .row .k { font-family: var(--serif); font-style: normal; color: var(--lime-ink); font-size: 22px; }
.steplist .row h4, .steplist .row h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.steplist .row p { margin: 0; color: var(--bone-mute); font-size: 15px; line-height: 1.55; }

/* ----- Bulleted value list ----- */
.vlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.vlist li { font-size: 15.5px; color: var(--bone-mute); line-height: 1.5; padding-left: 24px; position: relative; }
.vlist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 1px; background: var(--lime); }
.vlist li b { color: var(--bone); font-weight: 600; }

/* ----- Callout / ROI box ----- */
.callout { border: 1px solid var(--line); border-left: 2px solid var(--lime); border-radius: 4px 16px 16px 4px; padding: 28px 32px; background: rgba(var(--lime-rgb),0.04); }
.callout .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime-ink); margin-bottom: 12px; }
.callout p { margin: 0; font-family: var(--serif); font-style: normal; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -0.015em; color: var(--bone); }

/* ----- Mid/bottom CTA band ----- */
.cta-band { border-top: 1px solid var(--line); background: radial-gradient(70% 90% at 50% 100%, rgba(var(--lime-rgb),0.09), transparent 60%); text-align: center; padding: 120px 0; }
.cta-band h2 { margin: 0 auto; max-width: 18ch; }
.cta-band .lede { margin: 26px auto 38px; color: var(--bone-mute); font-size: 18px; max-width: 52ch; }
.cta-band .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .cta-meta { margin-top: 30px; color: var(--bone-soft); font-size: 13px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; align-items: center; }
.cta-band .cta-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* ----- ARTICLE / BLOG prose ----- */
.article-wrap { max-width: 760px; margin: 0 auto; }
.article-head { padding: 140px 0 48px; border-bottom: 1px solid var(--line); }
.article-head .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime-ink); margin-bottom: 20px; }
.article-head h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 500; margin: 0 0 24px; font-variation-settings: "opsz" 96; }
.article-head h1 em { font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--lime-ink); }
.article-meta { display: flex; gap: 20px; align-items: center; color: var(--bone-soft); font-size: 13.5px; flex-wrap: wrap; }
.article-meta .who { display: flex; align-items: center; gap: 10px; color: var(--bone-mute); }
.article-meta .who .av { width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--on-lime); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: normal; font-size: 15px; }
.prose { font-size: 18px; line-height: 1.72; color: var(--bone-mute); padding: 56px 0 24px; }
.prose > p { margin: 0 0 26px; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.025em; color: var(--bone); margin: 56px 0 20px; font-weight: 600; max-width: none; }
.prose h2 em, .prose h3 em { font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--lime-ink); }
.prose h3 { font-size: 22px; letter-spacing: -0.015em; color: var(--bone); margin: 40px 0 14px; font-weight: 600; }
.prose a { color: var(--lime-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: opacity .2s ease; }
.prose a:hover { opacity: 0.75; }
.vlist a { color: var(--lime-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: opacity .2s ease; }
.vlist a:hover { opacity: 0.75; }

/* chip on the brief when someone arrives from the agent catalogue */
.agent-ask {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 12px 16px;
  border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 12px;
  background: rgba(var(--lime-rgb), .05);
}
.agent-ask .aa-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bone-soft);
}
.agent-ask .aa-val { font-size: 14px; color: var(--lime-ink); font-weight: 500; }

/* ── Agent catalogue ─────────────────────────────────────── */
.agent-grid {
  margin-top: 40px;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.agent-card {
  display: flex; flex-direction: column;
  padding: 26px 26px 22px;
  border: 1px solid var(--line); border-radius: 18px;
  background: rgba(var(--bone-rgb), .015);
  text-decoration: none; color: inherit;
  transition: border-color .4s cubic-bezier(.2,.7,.3,1), background .4s cubic-bezier(.2,.7,.3,1), transform .4s cubic-bezier(.2,.7,.3,1);
}
.agent-card:hover { border-color: rgba(var(--lime-rgb), .42); background: rgba(var(--bone-rgb), .04); transform: translateY(-3px); }
.agent-card:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: 3px; }
.ac-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ac-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bone-soft);
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px;
}
.ac-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime-ink);
}
.ac-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime-ink); animation: rawPulse 2s ease-in-out infinite; }
.agent-card h3 { font-size: 21px; line-height: 1.2; margin: 0 0 10px; letter-spacing: -0.01em; }
.agent-card h3 em { font-style: normal; color: var(--acc, var(--lime-ink)); }
.agent-card > p { font-size: 14px; line-height: 1.55; color: var(--bone-soft); margin: 0 0 18px; flex: 1; }
.ac-save {
  padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.ac-save b { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.ac-save span { font-size: 12px; line-height: 1.4; color: var(--bone-soft); }
.ac-go {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lime-ink);
}
.ac-go .arrow { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.agent-card:hover .ac-go .arrow { transform: translateX(4px); }
.agent-card.live { border-color: rgba(var(--lime-rgb), .3); }
@media (max-width: 560px) {
  .agent-grid { grid-template-columns: 1fr; }
  .agent-card { padding: 22px 20px 20px; }
}
.prose strong { color: var(--bone); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 26px; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 1px; background: var(--lime); }
.prose ol { counter-reset: li; }
.prose ol li { position: relative; padding-left: 36px; counter-increment: li; }
.prose ol li::before { content: counter(li); position: absolute; left: 0; top: 0; font-family: var(--serif); font-style: normal; color: var(--lime-ink); font-size: 17px; }
.prose blockquote { margin: 36px 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--lime); font-family: var(--serif); font-style: normal; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.32; letter-spacing: -0.015em; color: var(--bone); }
.prose .lead { font-size: 21px; line-height: 1.6; color: var(--bone); margin-bottom: 30px; }
.prose figure { margin: 36px 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 48px 0; }

/* Key takeaways box */
.takeaways { border: 1px solid var(--line-2); border-radius: 18px; background: var(--ink-2); padding: 28px 32px; margin: 8px 0 40px; }
.takeaways .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime-ink); margin-bottom: 16px; }
.takeaways ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.takeaways li { font-size: 15px; color: var(--bone-mute); line-height: 1.5; padding-left: 24px; position: relative; }
.takeaways li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 1px; background: var(--lime); }

/* Table of contents */
.toc { border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; margin: 0 0 40px; background: rgba(var(--bone-rgb),0.015); }
.toc .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-soft); margin-bottom: 14px; }
.toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: grid; gap: 9px; }
.toc li { counter-increment: toc; font-size: 14.5px; }
.toc a { color: var(--bone-mute); display: flex; gap: 12px; transition: color .2s ease; }
.toc a:hover { color: var(--lime-ink); }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--lime-ink); }

/* Inline article CTA */
.article-cta { border: 1px solid rgba(var(--lime-rgb),0.28); border-radius: 20px; background: linear-gradient(180deg, #161620, #0e0e14); padding: 36px; margin: 48px 0; }
.article-cta .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime-ink); margin-bottom: 14px; }
.article-cta h3 { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 600; line-height: 1.15; }
.article-cta h3 em { font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--lime-ink); }
.article-cta p { color: var(--bone-mute); font-size: 15px; margin: 0 0 22px; line-height: 1.55; }

/* Author bio / related */
.related { border-top: 1px solid var(--line); padding-top: 40px; margin-top: 48px; }
.related .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-soft); margin-bottom: 22px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px){ .related-grid { grid-template-columns: 1fr; } }

/* ----- HUB cards (solutions index, blog index) ----- */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; }
@media (max-width: 1000px){ .hub-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .hub-grid { grid-template-columns: 1fr; } }
.hub-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: var(--ink-2); padding: 30px; transition: transform .3s var(--ease), border-color .25s ease; min-height: 260px; position: relative; overflow: hidden; }
.hub-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.hub-card .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime-ink); margin-bottom: 16px; }
.hub-card h3, .hub-card h2 { font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; font-weight: 600; }
.hub-card h3 em, .hub-card h2 em { font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--lime-ink); }
.hub-card p { color: var(--bone-mute); font-size: 14px; line-height: 1.55; margin: 0 0 20px; }
.hub-card .go { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--bone); display: inline-flex; gap: 8px; align-items: center; }
.hub-card .go .arrow { transition: transform .2s var(--ease); }
.hub-card:hover .go .arrow { transform: translateX(4px); }
.hub-card .acv { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--bone-soft); }

/* Solutions section on home */
.sol { border-top: 1px solid var(--line); }

/* ============================================================
   PRODUCT CONSOLE MOCKUP — Stripe/Apple-grade realistic UI
   Vector-crisp, retina-perfect, used in heroes to "show the product"
   ============================================================ */
.console-wrap { position: relative; margin-top: 76px; }
.console-wrap .glow { position:absolute; inset:-8% 6% 12% 6%; z-index:0; background:radial-gradient(60% 60% at 50% 0%, rgba(var(--lime-rgb),0.16), transparent 70%); filter:blur(40px); pointer-events:none; }
.console {
  position: relative; z-index: 1;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #16161d 0%, #0d0d12 100%);
  border: 1px solid rgba(var(--bone-rgb),0.12);
  box-shadow:
    inset 0 1px 0 rgba(var(--bone-rgb),0.07),
    0 2px 6px rgba(0,0,0,0.4),
    0 18px 40px -16px rgba(0,0,0,0.6),
    0 48px 90px -28px rgba(0,0,0,0.8);
}
.console .chrome { display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid rgba(var(--bone-rgb),0.07); background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); }
.console .dots { display:flex; gap:8px; }
.console .dots i { width:11px; height:11px; border-radius:50%; display:block; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.25); }
.console .dots i:nth-child(1){ background:#ff5f57; } .console .dots i:nth-child(2){ background:#febc2e; } .console .dots i:nth-child(3){ background:#28c840; }
.console .url { margin:0 auto; font-family:var(--mono); font-size:11px; letter-spacing:0.02em; color:var(--bone-soft); background:rgba(var(--bone-rgb),0.045); padding:6px 16px; border-radius:8px; border:1px solid rgba(var(--bone-rgb),0.05); }
.console .url b { color:var(--bone-mute); font-weight:500; }
.console .body { display:grid; grid-template-columns:204px 1fr; }
.console .side { border-right:1px solid rgba(var(--bone-rgb),0.07); padding:18px 14px; background:rgba(0,0,0,0.15); }
.console .side .brandrow { display:flex; align-items:center; gap:9px; margin-bottom:20px; padding:0 6px; }
.console .side .brandrow .m { width:18px; height:18px; border-radius:5px; background:conic-gradient(from 200deg, #d4ff3d, #a3343b, #d4ff3d); }
.console .side .brandrow span { font-size:12.5px; font-weight:600; color:var(--bone); letter-spacing:-0.01em; }
.console .side .navlabel { font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bone-soft); margin:0 8px 10px; }
.console .side a, .console .side .navitem { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; font-size:12.5px; color:var(--bone-mute); margin-bottom:2px; }
.console .side .navitem .ic { width:13px; height:13px; border-radius:3px; border:1.4px solid currentColor; opacity:0.6; }
.console .side .navitem.active { background:rgba(var(--lime-rgb),0.10); color:var(--bone); }
.console .side .navitem.active .ic { border-color: var(--lime-ink); opacity:1; }
.console .main { padding:18px 20px 22px; min-width:0; }
.console .topbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.console .topbar h4, .console .topbar .ct-title { margin:0; font-size:15px; font-weight:600; letter-spacing:-0.015em; color:var(--bone); }
.console .live { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#28c840; background:rgba(40,200,64,0.10); padding:4px 9px; border-radius:999px; }
.console .live .p { width:6px; height:6px; border-radius:50%; background:#28c840; box-shadow:0 0 8px #28c840; animation:cpulse 1.6s ease-in-out infinite; }
@keyframes cpulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.console .runid { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--bone-soft); }
.console .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.console .tile { border:1px solid rgba(var(--bone-rgb),0.08); border-radius:10px; padding:12px 13px; background:rgba(var(--bone-rgb),0.015); }
.console .tile .k { font-size:10.5px; color:var(--bone-soft); margin-bottom:7px; }
.console .tile .v { font-size:20px; font-weight:600; letter-spacing:-0.02em; color:var(--bone); font-variant-numeric:tabular-nums; }
.console .tile .v .u { font-size:11px; color:var(--bone-soft); font-weight:400; margin-left:2px; }
.console .tile .v.ok { color: var(--lime-ink); }
.console .split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.console .pane { border:1px solid rgba(var(--bone-rgb),0.08); border-radius:10px; overflow:hidden; background:rgba(0,0,0,0.18); }
.console .pane .ph { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-bottom:1px solid rgba(var(--bone-rgb),0.06); }
.console .pane .ph .t { font-size:11px; color:var(--bone-mute); font-weight:600; }
.console .pane .ph .tag { font-family:var(--mono); font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:var(--bone-soft); }
.console .pane .pc { padding:13px; }
/* source doc */
.console .docline { height:7px; border-radius:3px; background:rgba(var(--bone-rgb),0.10); margin-bottom:8px; }
.console .docline.s60{ width:60%; } .console .docline.s80{ width:80%; } .console .docline.s40{ width:40%; }
.console .docline.hl { background:linear-gradient(90deg, rgba(var(--lime-rgb),0.5), rgba(var(--lime-rgb),0.2)); box-shadow:0 0 0 1px rgba(var(--lime-rgb),0.15); }
.console .docrow { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.console .docrow .lbl { font-size:10px; color:var(--bone-soft); width:74px; flex:none; }
/* extracted fields */
.console .field { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(var(--bone-rgb),0.05); }
.console .field:last-child { border-bottom:none; }
.console .field .fk { font-size:11.5px; color:var(--bone-mute); }
.console .field .fv { font-family:var(--mono); font-size:11.5px; color:var(--bone); font-variant-numeric:tabular-nums; }
.console .field .fv.lime { color: var(--lime-ink); }
.console .field .chk { color: var(--lime-ink); font-size:12px; }
.console .decision { margin-top:12px; padding:12px; border:1px solid rgba(var(--lime-rgb),0.22); border-radius:9px; background:rgba(var(--lime-rgb),0.05); }
.console .decision .dk { font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color: var(--lime-ink); margin-bottom:6px; }
.console .decision .dv { font-size:22px; font-weight:600; letter-spacing:-0.02em; color:var(--bone); font-variant-numeric:tabular-nums; }
.console .evbar { margin-top:11px; }
.console .evbar .evrow { display:flex; justify-content:space-between; font-size:10.5px; color:var(--bone-soft); margin-bottom:6px; }
.console .evbar .track { height:6px; border-radius:999px; background:rgba(var(--bone-rgb),0.08); overflow:hidden; }
.console .evbar .track > i { display:block; height:100%; width:96%; border-radius:999px; background:linear-gradient(90deg,#d4ff3d,#a3ff6b); }
.console .activity { display:flex; align-items:center; gap:14px; margin-top:14px; padding-top:13px; border-top:1px solid rgba(var(--bone-rgb),0.06); font-size:11px; color:var(--bone-mute); flex-wrap:wrap; }
.console .activity .done { color:var(--bone-mute); } .console .activity .done b{ color: var(--lime-ink); font-weight:700; margin-right:3px; }
.console .activity .doing { color:var(--bone); display:inline-flex; align-items:center; gap:7px; }
.console .activity .doing .cur { width:7px; height:13px; background:var(--lime); border-radius:1px; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50%{opacity:0} }
.console.compact .body { grid-template-columns:1fr; }
.console.compact .side { display:none; }
@media (max-width:820px){
  .console .body { grid-template-columns:1fr; }
  .console .side { display:none; }
  .console .split { grid-template-columns:1fr; }
  .console .tiles { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   CAPABILITY BENTO — varied visuals explaining the agent
   (pipeline / gauge / sources / extract / thread / decision)
   ============================================================ */
.cap { border-top:1px solid var(--line); }
.cap-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:52px; }
.cap-tile { grid-column:span 2; border:1px solid var(--line); border-radius:18px; background:var(--ink-2); padding:24px; display:flex; flex-direction:column; min-height:236px; position:relative; overflow:hidden; transition:border-color .25s ease, transform .25s ease; }
.cap-tile:hover { border-color:var(--line-2); transform:translateY(-3px); }
.cap-tile.w4 { grid-column:span 4; }
.cap-tile .cl { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color: var(--lime-ink); margin-bottom:11px; }
.cap-tile h4, .cap-tile h3 { margin:0 0 7px; font-size:17px; font-weight:600; letter-spacing:-0.015em; color:var(--bone); }
.cap-tile p { margin:0; font-size:13px; color:var(--bone-mute); line-height:1.5; max-width:42ch; }
.cap-tile .ct-viz { margin-top:auto; padding-top:20px; }
@media(max-width:880px){ .cap-grid{ grid-template-columns:1fr 1fr; } .cap-tile,.cap-tile.w4{ grid-column:span 1; } }
@media(max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

/* pipeline */
.viz-pipeline { display:flex; align-items:flex-start; }
.viz-pipeline .node { flex:1; text-align:center; position:relative; }
.viz-pipeline .node .d { width:34px; height:34px; margin:0 auto 9px; border-radius:9px; border:1px solid var(--line-2); background:rgba(var(--lime-rgb),0.06); display:flex; align-items:center; justify-content:center; color: var(--lime-ink); font-family:var(--serif); font-style:normal; font-size:14px; }
.viz-pipeline .node span { font-size:11px; color:var(--bone-mute); line-height:1.25; display:block; padding:0 4px; }
.viz-pipeline .node:not(:last-child)::after { content:""; position:absolute; top:17px; left:64%; right:-36%; height:1px; background:linear-gradient(90deg,var(--line-2),rgba(var(--bone-rgb),0.04)); }

/* gauge */
.viz-gauge { display:flex; align-items:center; gap:16px; }
.viz-gauge svg { width:82px; height:82px; flex:none; }
.viz-gauge .g-t { font-size:12.5px; color:var(--bone-mute); line-height:1.45; }
.viz-gauge .g-t b { color:var(--bone); font-weight:600; }

/* sources */
.viz-sources { display:flex; flex-wrap:wrap; gap:7px; }
.viz-sources span { font-size:11.5px; padding:6px 11px; border-radius:8px; border:1px solid var(--line-2); color:var(--bone-mute); background:rgba(var(--bone-rgb),0.02); display:inline-flex; align-items:center; gap:7px; }
.viz-sources span::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--lime); opacity:0.75; }

/* extract */
.viz-extract { display:grid; }
.viz-extract .r { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.viz-extract .r:last-child { border-bottom:none; }
.viz-extract .r .k { color:var(--bone-soft); }
.viz-extract .r .v { font-family:var(--mono); color:var(--bone); }
.viz-extract .r .v.lime { color: var(--lime-ink); }

/* checks (inline, used in decision tile foot) */
.viz-decision .dl { font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--bone-soft); margin-bottom:6px; }
.viz-decision .dv { font-size:23px; font-weight:600; letter-spacing:-0.02em; color:var(--bone); line-height:1.05; }
.viz-decision .dv .lime { color: var(--lime-ink); }
.viz-decision .checks { display:grid; gap:7px; margin-top:14px; }
.viz-decision .checks .c { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--bone-mute); }
.viz-decision .checks .c .b { width:15px; height:15px; border-radius:5px; background:rgba(var(--lime-rgb),0.12); color: var(--lime-ink); display:flex; align-items:center; justify-content:center; font-size:9px; flex:none; }

/* thread */
.viz-thread { display:grid; gap:7px; }
.viz-thread .m { font-size:11.5px; padding:8px 11px; border-radius:11px; max-width:90%; line-height:1.4; }
.viz-thread .m.in { background:rgba(var(--bone-rgb),0.05); color:var(--bone-mute); border:1px solid var(--line); }
.viz-thread .m.out { background:linear-gradient(135deg,#cdfa4a,#a3ff6b); color:var(--ink); margin-left:auto; font-weight:500; }

/* ============================================================
   ROI CALCULATOR + LEAD CAPTURE + PILLAR/WHITEPAPER
   ============================================================ */
.calc { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
@media(max-width:820px){ .calc{ grid-template-columns:1fr; } }
.calc-panel { border:1px solid var(--line); border-radius:20px; background:var(--ink-2); padding:32px; }
.calc-panel.results { background:linear-gradient(180deg,#161620,#0e0e14); border-color:rgba(var(--lime-rgb),0.24); display:flex; flex-direction:column; }
.calc-panel h3 { margin:0 0 22px; font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--bone); }
.calc-field { margin-bottom:20px; }
.calc-field label { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--bone-mute); margin-bottom:9px; }
.calc-field label b { color: var(--lime-ink); font-family:var(--mono); font-size:13px; }
.calc-field input[type=number], .calc-field select { width:100%; background:var(--ink); border:1px solid var(--line-2); border-radius:10px; color:var(--bone); padding:11px 13px; font-family:var(--mono); font-size:14px; -webkit-appearance:none; appearance:none; }
.calc-field select { background-image:linear-gradient(45deg,transparent 50%,var(--bone-mute) 50%),linear-gradient(135deg,var(--bone-mute) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.calc-field input[type=range] { width:100%; accent-color: var(--lime-ink); height:4px; }
.calc-result .rlabel { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color: var(--lime-ink); }
.calc-result .rbig { font-family:var(--serif); font-style:normal; font-size:clamp(42px,6vw,66px); line-height:1; letter-spacing:-0.03em; color:var(--bone); margin:10px 0 6px; font-variant-numeric:tabular-nums; }
.calc-result .rsub { font-size:13.5px; color:var(--bone-mute); }
.calc-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.calc-stats .cs .v { font-size:25px; font-weight:600; letter-spacing:-0.02em; color:var(--bone); font-variant-numeric:tabular-nums; }
.calc-stats .cs .v.lime { color: var(--lime-ink); }
.calc-stats .cs .k { font-size:12px; color:var(--bone-soft); margin-top:5px; line-height:1.35; }
.calc-cta { margin-top:auto; }
.calc-note { font-size:11.5px; color:var(--bone-soft); margin-top:16px; line-height:1.5; }

.lead-form { display:flex; gap:10px; flex-wrap:wrap; max-width:460px; }
.lead-form input[type=email]{ flex:1; min-width:210px; background:var(--ink); border:1px solid var(--line-2); border-radius:999px; color:var(--bone); padding:13px 18px; font-size:14px; }
.lead-form input[type=email]:focus{ outline:none; border-color: var(--lime-ink); }
.lead-form button{ cursor:pointer; }
.lead-done{ font-size:14px; color: var(--lime-ink); padding:14px 0; line-height:1.5; }
.lead-note{ font-size:11.5px; color:var(--bone-soft); margin-top:12px; }

/* whitepaper / pillar layout */
.gate-row { display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:center; }
@media(max-width:900px){ .gate-row{ grid-template-columns:1fr; gap:32px; } }
.pdf-cover { aspect-ratio:8.5/11; max-width:340px; border-radius:10px; background:radial-gradient(120% 80% at 100% 0%, rgba(var(--lime-rgb),0.10), transparent 55%), linear-gradient(160deg,#16161d,#0a0a0e); border:1px solid var(--line-2); box-shadow:0 40px 80px -28px rgba(0,0,0,0.8); padding:34px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.pdf-cover .pc-k { font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color: var(--lime-ink); }
.pdf-cover .pc-mark { width:26px; height:26px; border-radius:7px; background:conic-gradient(from 200deg,#d4ff3d,#a3343b,#d4ff3d); margin-top:14px; }
.pdf-cover h3 { font-size:28px; line-height:1.08; letter-spacing:-0.02em; margin:auto 0 0; font-weight:600; }
.pdf-cover h3 em { font-family:var(--serif); font-style:normal; font-weight:400; color: var(--lime-ink); }
.pdf-cover .pc-foot { font-size:11px; color:var(--bone-soft); margin-top:16px; }

/* ----- Pre-call qualifying intake form ----- */
.intake-form { display:grid; gap:14px; max-width:640px; margin-top:8px; }
.intake-form .if-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:560px){ .intake-form .if-row { grid-template-columns:1fr; } }
.intake-form input, .intake-form select, .intake-form textarea { width:100%; background:var(--ink); border:1px solid var(--line-2); border-radius:10px; color:var(--bone); padding:12px 14px; font-size:14px; font-family:inherit; }
.intake-form textarea { resize:vertical; }
.intake-form input:focus, .intake-form select:focus, .intake-form textarea:focus { outline:none; border-color: var(--lime-ink); }
.intake-form select { -webkit-appearance:none; appearance:none; }
.intake-form button { justify-self:start; cursor:pointer; }

/* ============================================================
   CLASSY MOTION LAYER (v7) — subtle, restrained, reduced-motion aware
   ============================================================ */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 92px; }

@media (prefers-reduced-motion: no-preference) {
  /* Reveal: gentle rise + fade + micro-blur lifting into focus */
  .reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); filter: blur(5px); }
  .reveal.in { filter: blur(0); }
}

/* Cursor-aware spotlight on cards (vars set by iaw-anim.js) */
.hub-card, .cap-tile { position: relative; }
.hub-card::after, .cap-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(var(--lime-rgb),0.10), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.hub-card:hover::after, .cap-tile:hover::after { opacity: 1; }
.hub-card > *, .cap-tile > * { position: relative; z-index: 1; }

/* Premium hover: smoother lift + a whisper of lime border + soft shadow */
.hub-card, .cap-tile, .tier, .vert, .product { transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease); }
.hub-card:hover, .cap-tile:hover { border-color: rgba(var(--lime-rgb),0.28); box-shadow: 0 24px 56px -28px rgba(0,0,0,0.75), 0 0 0 1px rgba(var(--lime-rgb),0.07); }

/* Nav: subtle elevated/frosted state once scrolled */
nav.top { transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
nav.top.scrolled { background: rgba(var(--ink-rgb),0.80); border-bottom-color: var(--line-2); box-shadow: 0 6px 24px -12px rgba(0,0,0,0.6); }

/* Animated underline on nav links */
nav.top ul a { position: relative; }
nav.top ul a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--lime); opacity: .85; transition: right .35s var(--ease); }
nav.top ul a:hover::after { right: 0; }

/* Button micro-interaction */
.cta-btn { transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s ease, color .2s ease, opacity .2s ease; }
.cta-btn:hover { transform: translateY(-2px); }
.cta-btn:active { transform: translateY(0); }

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { filter: none !important; }
  .hub-card::after, .cap-tile::after { display: none; }
  nav.top ul a::after { transition: none; }
}

/* Hero logo-motion accent (home) — dark video bg dropped via screen blend */
.hero-media { position:absolute; right:5%; top:8%; width:clamp(190px,25vw,360px); aspect-ratio:1; z-index:-1; mix-blend-mode:screen; opacity:.95; pointer-events:none; -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 46%, transparent 68%); mask-image:radial-gradient(circle at 50% 50%, #000 46%, transparent 68%); }
@media (max-width:900px){ .hero-media { right:-8%; top:3%; width:62vw; opacity:.5; } }

/* First-load logo flourish (home only) — session-gated, skippable, reduced-motion-safe */
#intro { position:fixed; inset:0; z-index:9999; background:var(--ink); display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity .7s var(--ease); }
#intro.done { opacity:0; pointer-events:none; }
#intro .intro-vid { width:min(44vw,300px); aspect-ratio:1; mix-blend-mode:screen; -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 46%, transparent 70%); mask-image:radial-gradient(circle at 50% 50%, #000 46%, transparent 70%); }
html.intro-skip #intro { display:none !important; }

/* Founding-partner band (home) */
.founding-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--lime-rgb),0.045), transparent); }
.founding-band .fb-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 60px 0; flex-wrap: wrap; }
.founding-band .fb-copy { max-width: 62ch; }
.founding-band h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -0.03em; margin: 12px 0 14px; }
.founding-band p { color: var(--bone-mute); font-size: 16px; line-height: 1.55; margin: 0; }
.founding-band .cta-btn { flex: none; }

/* "Most clients start here" ribbon on the flagship engagement tier */
.tier .flag-ribbon { display: inline-block; align-self: flex-start; background: var(--lime); color: var(--on-lime); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }

/* Brand moment bands — full-bleed image pauses, no chrome */
.brand-band { position: relative; margin: clamp(56px,8vw,120px) 0 0; }
.brand-band img { display: block; width: 100%; height: min(72vh, 680px); object-fit: cover; }
.brand-band-sm img { height: min(52vh, 460px); }
.brand-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ink-rgb),.28), rgba(var(--ink-rgb),0) 30%, rgba(var(--ink-rgb),0) 62%, rgba(var(--ink-rgb),.42)); pointer-events: none; }
.brand-band .bb-cap { position: absolute; left: max(24px, 5vw); bottom: 22px; z-index: 1; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-mute); }

/* Scroll-scrubbed skyline hero background (home) */
.hero-sky { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; opacity: .85; pointer-events: none; }
.hero-sky-scrim { position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--ink-rgb),.82) 0%, rgba(var(--ink-rgb),.5) 42%, rgba(var(--ink-rgb),.12) 100%),
              linear-gradient(180deg, rgba(var(--ink-rgb),.4) 0%, rgba(var(--ink-rgb),.1) 30%, rgba(var(--ink-rgb),.85) 97%); }
.hero.has-sky .hero-media { display: none; }

/* Hero-over-video readability */
.hero.has-sky h1 { text-shadow: 0 2px 28px rgba(var(--ink-rgb),.65); }
.hero.has-sky .lede { color: var(--bone); opacity: .95; max-width: 52ch; text-shadow: 0 1px 20px rgba(var(--ink-rgb),.7); }

/* Phones get the video too, but a 1.1MB cut of it — see the source switch in index.html.
   The poster stays as the background so there is never a blank frame while it loads. */
@media (max-width: 760px) {
  .hero.has-sky { background-image: url("/assets/hero-loop-poster.jpg"); background-size: cover; background-position: center; }
  .hero-sky { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sky { display: none; }
  .hero.has-sky { background-image: url("/assets/hero-loop-poster.jpg"); background-size: cover; background-position: center; }
}

/* Visible keyboard focus for every interactive element (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--lime); color: var(--on-lime);
  padding: 12px 18px; font-weight: 600; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }

/* ═══════════════════════════════════════════════════════════════
   MOTION & CRAFT LAYER v2 — the "expensive" pass
   Principles: one accent, composed hero, GPU-only motion,
   staggered choreography, reduced-motion honoured throughout.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);      /* premium settle */
  --e-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-1: .55s; --d-2: .8s; --d-3: 1.1s;
}

/* ── 1. HERO COMPOSITION ─────────────────────────────────────── */
/* Carve a legible column out of the footage instead of an even wash */
.hero-sky-scrim{
  background:
    radial-gradient(120% 90% at 12% 45%, rgba(var(--ink-rgb),.96) 0%, rgba(var(--ink-rgb),.86) 32%, rgba(var(--ink-rgb),.35) 62%, rgba(var(--ink-rgb),.05) 100%),
    linear-gradient(180deg, rgba(var(--ink-rgb),.78) 0%, rgba(var(--ink-rgb),.10) 26%, rgba(var(--ink-rgb),.12) 55%, rgba(var(--ink-rgb),.92) 100%);
}
.hero-sky{ opacity:.78; transform: scale(1.04); }

/* Hero type: one accent only — the second lime phrase becomes bone */
.hero h1 em{ color: var(--lime-ink); }
.hero h1 .accent-quiet{ color: var(--bone); }

/* ── 2. READABILITY ──────────────────────────────────────────── */
/* Apple/Stripe sit at 60–68ch. We were at 75. */
.lede{ max-width: 34em; }
.h2-sub{ max-width: 33em; }   /* ~72 characters */
.prose p{ max-width: 38em; }
.vlist li{ max-width: 44em; }
h1, h2, h3{ text-wrap: balance; }
p, li{ text-wrap: pretty; }

/* ── 3. REVEAL EASING ONLY — we do NOT redefine opacity/visibility here.
   The site's existing .reveal mechanism owns showing content; we only
   upgrade the easing curve so the settle feels expensive. ─────────── */
.reveal{ transition-timing-function: var(--e-expo); transition-duration: var(--d-2); }

/* children stagger — progressive enhancement: visible unless JS arms it,
   so a failed observer or broken script can never hide content */
.stagger.armed > *{
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--d-2) var(--e-expo), transform var(--d-2) var(--e-expo);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.stagger.armed.in > *{ opacity: 1; transform: none; }

/* ── 4. IMAGE REVEALS — clip + scale settle (very Apple) ─────── */
.brand-band img{ transition: transform 1.8s var(--e-expo); }
.brand-band.armed img{ transform: scale(1.08); }
.brand-band.armed.seen img{ transform: scale(1); }

/* ── 5. PARALLAX (JS sets --py; transform only) ──────────────── */
.parallax{ transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ── 6. MICRO-INTERACTIONS ───────────────────────────────────── */
.cta-btn{ transition: transform .35s var(--e-expo), box-shadow .45s var(--e-expo), background .3s var(--e-soft); }
.cta-btn:hover{ transform: translate3d(0,-2px,0) scale(1.015); }
.cta-btn:active{ transform: translate3d(0,0,0) scale(.985); transition-duration: .1s; }

.hub-card, .vert, .tier, .cap-tile{
  transition: transform .5s var(--e-expo), border-color .4s var(--e-soft), background .4s var(--e-soft);
}
.hub-card:hover, .cap-tile:hover{ transform: translate3d(0,-4px,0); }

/* section labels draw a hairline as they enter */
.section-label{ position: relative; }
.section-label::after{
  content:""; position:absolute; left:0; bottom:-10px; height:1px; width:0;
  background: linear-gradient(90deg, var(--lime), transparent);
  transition: width 1.2s var(--e-expo) .15s;
}
.section-label.in::after{ width: 190px; }

/* ── 7. NUMERALS settle rather than pop ──────────────────────── */
.count, .tnum{ font-variant-numeric: tabular-nums; }

/* ── 8. REDUCED MOTION — everything above collapses to instant ─ */
@media (prefers-reduced-motion: reduce){
  .reveal, .stagger > *, .brand-band img{
    transition: none !important; opacity: 1 !important; transform: none !important;
    clip-path: none !important;
  }
  .parallax{ transform: none !important; }
  .section-label::after{ transition: none; width: 190px; }
  .cta-btn:hover, .hub-card:hover, .cap-tile:hover{ transform: none; }
}

/* ── Article FAQ (details/summary) — used by /blog/ posts for FAQPage schema parity ── */
.faq-block { margin-top: 64px; }
.faq-q { border-top: 1px solid var(--line); }
.faq-q:last-of-type { border-bottom: 1px solid var(--line); }
.faq-q > summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--sans); font-size: clamp(1rem, 1.6vw, 1.12rem); font-weight: 600;
  color: var(--bone); line-height: 1.4;
}
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 1.6px solid var(--lime); border-bottom: 1.6px solid var(--lime);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--e-expo);
}
.faq-q[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq-q > summary:hover { color: var(--lime-ink); }
.faq-q > p { margin: 0 0 24px; padding-right: 44px; color: var(--bone-soft); }
@media (prefers-reduced-motion: reduce) { .faq-q > summary::after { transition: none; } }

/* ============================================================
   LIGHT THEME
   The system re-themes from one block because every colour
   resolves through a token: --ink is "surface", --bone is
   "foreground", and every rgba() reads a channel token.
   ============================================================ */
:root[data-theme="light"] {
  /* Channels — every rgba() in the sheet re-points here */
  --ink-rgb:    241,239,232;
  --bone-rgb:   18,18,16;
  --lime-rgb:   206,242,62;

  /* Surfaces: warm bone page, pure-white cards sitting above it.
     Straight from the locked brand kit — flat white reads cheaper. */
  --ink:        #f1efe8;
  --ink-0:      #e9e6dc;
  --ink-2:      #ffffff;
  --ink-3:      #e7e4da;

  /* Foreground — warm near-black, not a cold grey */
  --bone:       #121210;
  --bone-mute:  #57544b;
  --bone-soft:  #6b6960;

  /* Hairlines carry more weight on bone than they do on black */
  --line:       rgba(18,18,16,0.10);
  --line-2:     rgba(18,18,16,0.17);
  --line-3:     rgba(18,18,16,0.28);

  /* Accent: the brand lime stays bright for fills, exactly as the kit uses it.
     Text gets a deep olive instead — bright lime on bone is 1.6:1 and illegible. */
  --lime:       #cef23e;
  --lime-ink:   #4d6b00;
  --lime-soft:  rgba(206,242,62,0.20);
  --on-lime:    #0a0a0c;

  --teal:       #2f6d6f;
  --oxblood:    #8e2b32;
  --oxblood-ink: #8e2b32;

  color-scheme: light;
}

/* Hairline rules and 1px dashes vanish at 1.6:1. Everything that is a THIN
   lime mark (not a fill) switches to the text tone; solid fills stay bright. */
:root[data-theme="light"] .vlist li::before,
:root[data-theme="light"] .prose ul li::before,
:root[data-theme="light"] .takeaways li::before,
:root[data-theme="light"] .section-label::before,
:root[data-theme="light"] .section-label::after,
:root[data-theme="light"] nav.top ul a::after,
:root[data-theme="light"] .viz-sources span::before {
  background: var(--lime-ink);
}

/* Elevation: on black, depth comes from lighter fills. On white it has to
   come from shadow, or every card reads as a flat rectangle. */
:root[data-theme="light"] .hub-card,
:root[data-theme="light"] .cap-tile,
:root[data-theme="light"] .tier,
:root[data-theme="light"] .console {
  box-shadow: 0 1px 2px rgba(18,18,26,.04), 0 8px 24px -12px rgba(18,18,26,.10);
}
:root[data-theme="light"] .hub-card:hover,
:root[data-theme="light"] .cap-tile:hover {
  box-shadow: 0 2px 4px rgba(18,18,26,.05), 0 18px 40px -16px rgba(18,18,26,.16);
}

/* Nav: heavier blur and a real hairline, since a translucent white bar over
   white content has no edge of its own */
:root[data-theme="light"] nav.top { background: rgba(255,255,255,0.72); }
:root[data-theme="light"] nav.top.scrolled { background: rgba(255,255,255,0.86); }

/* Grain reads as haze in overlay mode on a light surface — multiply keeps it as texture */
:root[data-theme="light"] .grain { opacity: .022; mix-blend-mode: multiply; }

/* Hero video was art-directed against black. On white it becomes a pale
   architectural texture rather than a subject, so the headline stays readable. */
:root[data-theme="light"] .hero-sky { opacity: .38; }
:root[data-theme="light"] .hero-sky-scrim {
  background: linear-gradient(90deg, rgba(var(--ink-rgb),.94) 0%, rgba(var(--ink-rgb),.80) 44%, rgba(var(--ink-rgb),.52) 100%),
              linear-gradient(180deg, rgba(var(--ink-rgb),.72) 0%, rgba(var(--ink-rgb),.42) 30%, rgba(var(--ink-rgb),.96) 97%);
}
:root[data-theme="light"] .hero.has-sky h1 { text-shadow: 0 1px 26px rgba(var(--ink-rgb),.9); }
:root[data-theme="light"] .hero.has-sky .lede { text-shadow: 0 1px 18px rgba(var(--ink-rgb),.95); }
@media (max-width: 760px) {
  :root[data-theme="light"] .hero.has-sky::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: rgba(var(--ink-rgb),.62);
  }
}

/* The inline mark paints its spokes and nodes with currentColor, so it
   inherits the foreground and needs no per-theme rule. The core keeps the
   brand lime in both themes, exactly as the brand kit specifies. */

/* Photography carries its own light. Lift it slightly off a white page so it
   doesn't sit in a hole, and soften the scrim that was built for black. */
:root[data-theme="light"] .brand-band::after {
  background: linear-gradient(180deg, rgba(var(--ink-rgb),.20), rgba(var(--ink-rgb),0) 26%, rgba(var(--ink-rgb),0) 66%, rgba(var(--ink-rgb),.34));
}
:root[data-theme="light"] .brand-band img,
:root[data-theme="light"] .founder-photo-frame img { border-radius: 2px; }

/* Traffic-light chrome and status colours keep their meaning in both themes. */

/* ── Theme toggle ───────────────────────────────────────────
   Sun and moon share one circle. The moon is the same disc with a
   second disc masked out of it, so the shape morphs rather than swaps.
   ─────────────────────────────────────────────────────────── */
.theme-toggle {
  --tt: 34px;
  position: relative;
  width: var(--tt); height: var(--tt);
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--bone);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s var(--e-soft), background-color .3s var(--e-soft), transform .45s var(--e-expo);
}
.theme-toggle:hover { border-color: var(--line-3); background: rgba(var(--bone-rgb),0.05); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg { width: 17px; height: 17px; display: block; overflow: visible; }

.tt-disc {
  fill: currentColor;
  transform-origin: center;
  transition: transform .55s var(--e-expo), r .55s var(--e-expo);
}
/* the disc that bites the crescent out of the sun */
.tt-cut { transition: transform .55s var(--e-expo), opacity .35s var(--e-soft); }
.tt-rays {
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none;
  transform-origin: center;
  transition: transform .55s var(--e-expo), opacity .3s var(--e-soft);
}

/* DARK theme -> show the moon (you are in dark, the control reads as "night") */
:root:not([data-theme="light"]) .tt-disc  { transform: scale(1); }
:root:not([data-theme="light"]) .tt-cut   { transform: translate(4px, -3.5px); opacity: 1; }
:root:not([data-theme="light"]) .tt-rays  { transform: scale(.4) rotate(-45deg); opacity: 0; }

/* LIGHT theme -> show the sun */
:root[data-theme="light"] .tt-disc { transform: scale(.62); }
:root[data-theme="light"] .tt-cut  { transform: translate(13px, -11px); opacity: 0; }
:root[data-theme="light"] .tt-rays { transform: scale(1) rotate(0deg); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tt-disc, .tt-cut, .tt-rays, .theme-toggle { transition: none; }
}

/* ── Theme crossfade ────────────────────────────────────────
   Transitions are OFF by default so first paint is instant and
   scroll stays cheap. The toggle arms them for one beat only.
   ─────────────────────────────────────────────────────────── */
html.theme-anim,
html.theme-anim body,
html.theme-anim nav.top,
html.theme-anim footer,
html.theme-anim .hub-card,
html.theme-anim .cap-tile,
html.theme-anim .tier,
html.theme-anim .console,
html.theme-anim .cta-btn,
html.theme-anim .brand-band::after,
html.theme-anim .hero-sky,
html.theme-anim .hero-sky-scrim,
html.theme-anim .grain,
html.theme-anim .theme-toggle,
html.theme-anim .article-cta,
html.theme-anim .faq-q,
html.theme-anim .prose,
html.theme-anim .lede,
html.theme-anim h1, html.theme-anim h2, html.theme-anim h3,
html.theme-anim h4, html.theme-anim h5, html.theme-anim p,
html.theme-anim a, html.theme-anim span, html.theme-anim li,
html.theme-anim b, html.theme-anim em, html.theme-anim div {
  transition: background-color .42s var(--e-soft),
              color .42s var(--e-soft),
              border-color .42s var(--e-soft),
              box-shadow .42s var(--e-soft),
              opacity .42s var(--e-soft) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim * { transition: none !important; }
}

/* Logo lockup: one file per theme, swapped in CSS so there is no flash
   and no layout shift while an image loads. */
/* `.brand .mark { display:block }` is (0,2,0) and outranks a bare
   `.mark-light`, so these must match its specificity or both marks render. */
.brand .mark-light { display: none; }
:root[data-theme="light"] .brand .mark-dark  { display: none; }
:root[data-theme="light"] .brand .mark-light { display: block; }

@media (max-width: 900px) {
  .theme-toggle { --tt: 32px; margin-left: 0; margin-right: 6px; }
}

/* ── Dark feature panels keep their art direction in both themes ──
   These five paint a dark surface with a gradient rather than a
   background-color, so they never picked up the light palette while their
   text did — dark on black. Re-drawing them in bone would flatten the page;
   instead each stays dark and re-declares the foreground tokens in its own
   scope, so every child resolves against the surface it actually sits on.
   On bone they read as anchored blocks, carried by elevation.
   ─────────────────────────────────────────────────────────── */
:root[data-theme="light"] .console,
:root[data-theme="light"] .article-cta,
:root[data-theme="light"] .tier.flagship,
:root[data-theme="light"] .calc-panel.results,
:root[data-theme="light"] .pdf-cover {
  --ink-rgb:   10,10,12;
  --bone-rgb:  244,239,230;
  --lime-rgb:  212,255,61;
  --ink:       #0a0a0c;
  --ink-0:     #08080a;
  --ink-2:     #131318;
  --ink-3:     #1d1d24;
  --bone:      #f4efe6;
  --bone-mute: #a8a39a;
  --bone-soft: #847f77;
  --line:      rgba(244,239,230,0.08);
  --line-2:    rgba(244,239,230,0.16);
  --line-3:    rgba(244,239,230,0.24);
  --lime:      #d4ff3d;
  --lime-ink:  #d4ff3d;
  --lime-soft: rgba(212,255,61,0.12);
  color: var(--bone);
}
:root[data-theme="light"] .console,
:root[data-theme="light"] .article-cta,
:root[data-theme="light"] .tier.flagship,
:root[data-theme="light"] .calc-panel.results {
  box-shadow: 0 2px 6px rgba(18,18,16,.06), 0 30px 60px -30px rgba(18,18,16,.42);
}
/* a dark panel on bone needs no hairline — the shadow already separates it */
:root[data-theme="light"] .article-cta,
:root[data-theme="light"] .tier.flagship { border-color: rgba(244,239,230,0.12); }

/* Eval-target gauges on the solutions pages: these are inline SVG whose track,
   arc and value were hardcoded bone/lime. They sit inside a card that turns
   white on the light theme, so all three had to resolve through tokens. */
.viz-gauge .g-track { stroke: var(--line-2); }
.viz-gauge .g-arc   { stroke: var(--lime-ink); }
.viz-gauge .g-val   { fill: var(--bone); }
/* The aperture flourish inherits the foreground so it survives on bone;
   its lime and oxblood arcs stay as drawn, they read on both surfaces. */
.aperture-bg { color: var(--bone); }
/* Entity disclosure sits under the copyright line, quiet but findable */
.foot-bottom .ent-br { display: block; content: ""; }
.foot-bottom span b { color: var(--bone-mute); font-weight: 600; }

/* ── Mobile nav drawer opacity fix ──
   nav.top itself carries background: rgba(var(--ink-rgb),0.6) — a deliberately
   thin, translucent header bar. The dropdown <ul> sits at 0.97 opacity, but
   both nav.top and its child ul declare their own backdrop-filter blur(), and
   stacked semi-transparent blur layers compound: the visible result reads far
   more translucent than either single alpha value suggests, letting page
   content ghost through the open drawer. When the drawer is open, force the
   parent to solid so there is only one translucent layer, not two stacked. */
nav.top.nav-open { background: rgba(var(--ink-rgb),0.99); }
:root[data-theme="light"] nav.top.nav-open { background: rgba(255,255,255,0.98); }

/* The parent's higher opacity alone didn't fix it — two nested backdrop-filter
   blurs compositing is the actual cause, and it survives even a near-1.0 alpha
   background underneath. Removing blur from the drawer itself and making it a
   truly flat, solid fill removes the bug class entirely rather than tuning it. */
@media (max-width: 1000px) {
  /* backdrop-filter on nav.top itself has the identical compositing bug —
     strip it too, on the header bar, not just the drawer beneath it. */
  nav.top.nav-open { background: var(--ink); backdrop-filter: none; }
  nav.top.nav-open ul { background: var(--ink); backdrop-filter: none; }
  :root[data-theme="light"] nav.top.nav-open { background: var(--ink-2); }
  :root[data-theme="light"] nav.top.nav-open ul { background: var(--ink-2); }
}

/* Founder LinkedIn link — quiet inline credential, not a button */
.li-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 13px; font-weight: 600; color: var(--lime-ink); }
.li-link:hover .arrow { transform: translateX(3px); }
.li-link .arrow { transition: transform .2s var(--ease); }
.signature .li-link { display: flex; }

/* ── Pricing qualifier — a rate card assembled live ─────────
   Three staged questions on a rail; each answer collapses to its choice and
   unlocks the next; the result renders as a prepared-for-you rate card with
   staggered line items. No backend — state lives in the DOM.
   ─────────────────────────────────────────────────────────── */
.pq { border: 1px solid var(--line-2); border-radius: 26px; padding: clamp(24px, 4vw, 48px); background: var(--ink-2); overflow: hidden; }
:root[data-theme="light"] .pq { box-shadow: 0 1px 2px rgba(18,18,26,.04), 0 12px 32px -16px rgba(18,18,26,.12); }

/* The rail: a hairline thread the answered steps light up */
.pq-rail { position: relative; }
.pq-rail::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.pq-step { position: relative; padding: 0 0 8px 34px; margin-bottom: 14px; transition: opacity .45s var(--e-soft); }
.pq-step.locked { opacity: .32; pointer-events: none; }

.pq-head { display: flex; align-items: baseline; gap: 14px; width: 100%; text-align: left; background: none; border: 0; padding: 0 0 12px; cursor: pointer; color: inherit; }
.pq-head:disabled { cursor: default; }
.pq-dot { position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%;
  border: 1.6px solid var(--line-3); background: var(--ink-2);
  transition: background .35s var(--e-soft), border-color .35s var(--e-soft), box-shadow .35s var(--e-soft); }
.pq-step.done .pq-dot { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 10px rgba(var(--lime-rgb), .5); }
.pq-q { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-soft); }
.pq-chosen { margin-left: auto; font-family: var(--serif); font-style: normal; font-size: 15px; color: var(--lime-ink);
  opacity: 0; transform: translateX(6px); transition: opacity .4s var(--e-soft), transform .4s var(--e-expo); }
.pq-step.done .pq-chosen { opacity: 1; transform: none; }
.pq-step.done .pq-head { cursor: pointer; }
.pq-step.done .pq-head::after { content: "edit"; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-soft); margin-left: 12px; opacity: 0; transition: opacity .25s; }
.pq-step.done .pq-head:hover::after { opacity: .8; }

/* Options: pills that leave gracefully once a choice is made */
.pq-opts { display: flex; flex-wrap: wrap; gap: 10px; max-height: 220px; transition: max-height .5s var(--e-expo), opacity .4s var(--e-soft); }
.pq-step.done .pq-opts { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.pq-opt {
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--bone); font-size: 14px; font-weight: 500; line-height: 1.2;
  transition: border-color .2s var(--ease), background .3s var(--e-soft), color .2s var(--ease), transform .25s var(--e-expo);
}
.pq-opt:hover { border-color: var(--lime-ink); transform: translateY(-2px); }
.pq-opt:active { transform: scale(.97); }
.pq-opt[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); border-color: var(--lime); font-weight: 600; }

/* The rate card */
.pq-result { border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 26px; }
.pq-result[hidden] { display: none; }
.pq-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.pq-prepared { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-soft); }
.pq-serial { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--bone-soft); opacity: .7; }
.pq-tier-name { font-size: clamp(22px, 3.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 4px; }
.pq-tier-name em { font-family: var(--serif); font-style: normal; color: var(--lime-ink); }
.pq-tier-for { color: var(--bone-mute); font-size: 14.5px; margin: 0 0 20px; max-width: 56ch; }

.pq-rows { border-top: 1px solid var(--line); }
.pq-row { display: grid; grid-template-columns: 1.5fr .9fr .9fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline;
  opacity: 0; transform: translateY(12px); }
.pq-result.in .pq-row { opacity: 1; transform: none;
  transition: opacity .55s var(--e-soft), transform .6s var(--e-expo);
  transition-delay: calc(var(--i, 0) * 75ms); }
.pq-row .n { font-weight: 600; font-size: 14.5px; }
.pq-row .n small { display: block; font-weight: 400; color: var(--bone-soft); font-size: 12px; margin-top: 2px; }
.pq-row .p { font-family: var(--serif); font-style: normal; color: var(--lime-ink); font-size: 16.5px; white-space: nowrap; }
.pq-row .t { color: var(--bone-soft); font-size: 12.5px; text-align: right; }

.pq-note { margin: 20px 0 0; padding: 15px 20px; border-left: 2px solid var(--lime-ink); color: var(--bone-mute); font-size: 14px; line-height: 1.65; background: rgba(var(--lime-rgb), 0.05); border-radius: 0 12px 12px 0;
  opacity: 0; transform: translateY(10px); }
.pq-result.in .pq-note { opacity: 1; transform: none; transition: opacity .5s var(--e-soft) .45s, transform .55s var(--e-expo) .45s; }
.pq-note b { color: var(--bone); }
.pq-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px;
  opacity: 0; }
.pq-result.in .pq-actions { opacity: 1; transition: opacity .5s var(--e-soft) .6s; }
.pq-fineprint { margin-top: 16px; font-size: 12px; color: var(--bone-soft); }

@media (prefers-reduced-motion: reduce) {
  .pq-opts, .pq-opt, .pq-chosen, .pq-dot { transition: none; }
  .pq-row, .pq-note, .pq-actions { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 700px) {
  .pq-row { grid-template-columns: 1fr auto; }
  .pq-row .t { grid-column: 1 / -1; text-align: left; margin-top: -6px; }
  .pq-chosen { font-size: 13px; }
}

/* ── Gated tier-card prices ──
   The anchors below the qualifier stay blurred until the visitor has answered
   the three questions; completing the qualifier unblurs them in sequence.
   The blur is experiential, not secrecy — the numbers live in the FAQ schema
   for crawlers, and no-JS visitors get them unblurred via <noscript>. */
.price-locked { position: relative; }
.price-locked .price-val {
  filter: blur(9px); opacity: .55; user-select: none;
  transition: filter .7s var(--e-expo), opacity .7s var(--e-soft);
}
.price-locked .price-hint {
  display: block; font-size: 9px; letter-spacing: .14em; margin-top: 4px;
  color: var(--bone-soft); opacity: .8;
  transition: opacity .4s var(--e-soft);
}
.price-locked.unlocked .price-val { filter: none; opacity: 1; user-select: auto; }
.price-locked.unlocked .price-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .price-locked .price-val, .price-locked .price-hint { transition: none; }
}

/* ── Page-hero video background (pricing) ──
   Same discipline as the homepage sky: video sits behind a token-driven scrim
   so the headline stays readable in both themes; phones get the poster only. */
.page-hero.has-video { position: relative; overflow: hidden; }
.page-hero.has-video .ph-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; opacity: 1; pointer-events: none; }
/* Directional scrim: carries the text column on the left, releases the video on
   the right; a bottom fade seats the hero into the next section. */
.page-hero.has-video .ph-scrim { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--ink-rgb),.86) 0%, rgba(var(--ink-rgb),.55) 34%, rgba(var(--ink-rgb),.14) 62%, rgba(var(--ink-rgb),0) 100%),
              linear-gradient(180deg, rgba(var(--ink-rgb),.30) 0%, rgba(var(--ink-rgb),0) 30%, rgba(var(--ink-rgb),.88) 100%); }
.page-hero.has-video h1 { text-shadow: 0 2px 26px rgba(var(--ink-rgb),.65); }
.page-hero.has-video .lede { text-shadow: 0 1px 18px rgba(var(--ink-rgb),.7); }
:root[data-theme="light"] .page-hero.has-video .ph-video { opacity: .8; }
:root[data-theme="light"] .page-hero.has-video .ph-scrim {
  background: linear-gradient(90deg, rgba(var(--ink-rgb),.94) 0%, rgba(var(--ink-rgb),.74) 38%, rgba(var(--ink-rgb),.30) 68%, rgba(var(--ink-rgb),.06) 100%),
              linear-gradient(180deg, rgba(var(--ink-rgb),.42) 0%, rgba(var(--ink-rgb),.06) 32%, rgba(var(--ink-rgb),.94) 100%); }
:root[data-theme="light"] .page-hero.has-video h1 { text-shadow: 0 1px 24px rgba(var(--ink-rgb),.9); }
:root[data-theme="light"] .page-hero.has-video .lede { text-shadow: 0 1px 16px rgba(var(--ink-rgb),.95); }
@media (max-width: 760px) {
  .page-hero.has-video .ph-video { display: none; }
  .page-hero.has-video { background-image: url("/assets/pricing-hero-poster.jpg"); background-size: cover; background-position: center; }
  .page-hero.has-video::before { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(var(--ink-rgb),.72); }
}

/* ── Email step: same rail language, one pill-shaped field ── */
.pq-email { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-height: 220px;
  transition: max-height .5s var(--e-expo), opacity .4s var(--e-soft); }
.pq-step.done .pq-email { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.pq-email input {
  flex: 1 1 260px; max-width: 380px;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--bone); font: inherit; font-size: 14px;
  transition: border-color .25s var(--e-soft), box-shadow .25s var(--e-soft);
}
.pq-email input::placeholder { color: var(--bone-soft); }
.pq-email input:focus { outline: none; border-color: var(--lime-ink); box-shadow: 0 0 0 3px rgba(var(--lime-rgb), .18); }
.pq-email .cta-btn { padding: 11px 20px; }
.pq-email-err { flex-basis: 100%; font-size: 10px; letter-spacing: .12em; color: #b3564f; }
.pq-email-note { flex-basis: 100%; font-size: 12px; color: var(--bone-soft); }
.pq-email.shake { animation: pqShake .4s var(--e-soft); }
@keyframes pqShake { 0%,100%{transform:none} 25%{transform:translateX(-6px)} 55%{transform:translateX(5px)} 80%{transform:translateX(-3px)} }
@media (prefers-reduced-motion: reduce) { .pq-email.shake { animation: none; } .pq-email { transition: none; } }

/* ── Sprint scroll chapter (methodology) ────────────────────
   Pinned full-bleed video; four caption stages driven by scroll progress.
   The video PLAYS continuously — scroll advances the story, not the frames. */
.sprint-scroll .ss-track { height: 400vh; position: relative; }
.ss-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.ss-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; will-change: transform; }
.ss-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--ink-rgb),.88) 0%, rgba(var(--ink-rgb),.56) 36%, rgba(var(--ink-rgb),.12) 66%, rgba(var(--ink-rgb),0) 100%),
              linear-gradient(180deg, rgba(var(--ink-rgb),.35) 0%, rgba(var(--ink-rgb),0) 30%, rgba(var(--ink-rgb),.85) 100%); }
:root[data-theme="light"] .ss-scrim {
  background: linear-gradient(90deg, rgba(var(--ink-rgb),.94) 0%, rgba(var(--ink-rgb),.74) 40%, rgba(var(--ink-rgb),.30) 70%, rgba(var(--ink-rgb),.06) 100%),
              linear-gradient(180deg, rgba(var(--ink-rgb),.40) 0%, rgba(var(--ink-rgb),.08) 32%, rgba(var(--ink-rgb),.92) 100%); }
.ss-copy { position: relative; width: 100%; }
.ss-copy h2 { max-width: 15ch; text-shadow: 0 2px 24px rgba(var(--ink-rgb),.6); }
.ss-caps { position: relative; min-height: 190px; max-width: 520px; margin-top: 30px; }
.ss-cap { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(18px);
  transition: opacity .55s var(--e-soft), transform .6s var(--e-expo); pointer-events: none; }
.ss-cap.active { opacity: 1; transform: none; }
.ss-cap .k { font-size: 10.5px; letter-spacing: .16em; color: var(--lime-ink); margin-bottom: 10px; }
.ss-cap h4 { font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; text-shadow: 0 1px 18px rgba(var(--ink-rgb),.6); }
.ss-cap p { color: var(--bone); opacity: .82; font-size: 16px; line-height: 1.6; margin: 0; max-width: 44ch; text-shadow: 0 1px 14px rgba(var(--ink-rgb),.7); }
.ss-bars { display: flex; gap: 8px; margin-top: 200px; }
.ss-bars span { width: 36px; height: 2px; background: rgba(var(--bone-rgb),.22); border-radius: 2px; transition: background .4s var(--e-soft); }
.ss-bars span.on { background: var(--lime); }
.ss-fallback { display: none; }
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .sprint-scroll { display: none; }
  .ss-fallback { display: block; }
}

/* ── Product hover previews (hero proof strip) ──────────────
   Glass identity card that rises above a product name on hover.
   Desktop fine-pointers only; touch falls back to plain links. */
.pp-card { position: fixed; z-index: 320; width: 296px; pointer-events: none;
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom center;
  transition: opacity .3s var(--e-soft), transform .45s var(--e-expo);
  border-radius: 20px; padding: 22px 22px 18px;
  background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14); }
.pp-card.show { opacity: 1; transform: translateY(0) scale(1); }
.pp-card .pp-mono { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 24px; color: #0a0a0c; background: var(--lime); margin-bottom: 14px;
  box-shadow: 0 6px 18px -6px rgba(var(--lime-rgb), .55); }
.pp-card h5, .pp-card .pp-name { margin: 0 0 5px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: #f4efe6; }
.pp-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: rgba(244,239,230,.75); }
.pp-card .pp-foot { font-family: var(--mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: rgba(244,239,230,.5);
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 11px; display: flex; justify-content: space-between; }
.pp-card .pp-foot .live { color: var(--lime); }
:root[data-theme="light"] .pp-card {
  background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.45));
  border-color: rgba(18,18,16,.12);
  box-shadow: 0 30px 70px -28px rgba(18,18,16,.35), inset 0 1px 0 rgba(255,255,255,.8); }
:root[data-theme="light"] .pp-card h5, :root[data-theme="light"] .pp-card .pp-name { color: #12121a; }
:root[data-theme="light"] .pp-card p { color: rgba(18,18,26,.72); }
:root[data-theme="light"] .pp-card .pp-foot { color: rgba(18,18,26,.5); border-top-color: rgba(18,18,26,.1); }
:root[data-theme="light"] .pp-card .pp-foot .live { color: var(--lime-ink); }
.proof-strip .logos > * { cursor: default; }
.proof-strip .logos > a { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pp-card { transition: opacity .2s; } }

/* ── Primary navigation with dropdown panels ────────────────
   Five top-level items; deeper destinations live in glass panels that open on
   hover (pointer) and on click/Enter (keyboard + touch). Mobile collapses the
   same markup into an accordion inside the existing drawer.
   ─────────────────────────────────────────────────────────── */
nav.top ul li.has-menu { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; line-height: inherit;
  transition: color .2s var(--ease);
}
.nav-trigger:hover, li.has-menu.open > .nav-trigger { color: var(--bone); }
.nav-caret { width: 7px; height: 7px; margin-top: -2px; opacity: .5;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg); transition: transform .35s var(--e-expo), opacity .2s; }
li.has-menu.open .nav-caret { transform: rotate(-135deg) translate(-2px,-2px); opacity: .9; }

.nav-panel {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(.98);
  min-width: 268px; padding: 10px; z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  border-radius: 18px;
  /* A translucent sheen over an opaque base. The sheen alone reads as glass on a
     flat page but disappears over the hero video — the base is what makes the
     links legible on every background. */
  background:
    linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(var(--ink-rgb),.93);
  backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 64px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.10);
  transition: opacity .28s var(--e-soft), transform .42s var(--e-expo), visibility .28s;
}
/* invisible bridge so the pointer can travel from trigger to panel */
.nav-panel::before { content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
li.has-menu.open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.nav-panel a {
  display: block; padding: 10px 13px; border-radius: 11px;
  font-size: 13.5px; color: var(--bone-mute); line-height: 1.35;
  transition: background .22s var(--e-soft), color .2s var(--ease), transform .3s var(--e-expo);
}
.nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(var(--bone-rgb),.07); color: var(--bone); transform: translateX(3px); }
.nav-panel a b { display: block; font-weight: 600; color: var(--bone); font-size: 13.5px; margin-bottom: 1px; }
.nav-panel a span { display: block; font-size: 11.5px; color: var(--bone-soft); line-height: 1.4; }
.nav-panel a:hover b { color: var(--lime-ink); }
.nav-panel .np-sep { height: 1px; background: var(--line); margin: 7px 10px; }
:root[data-theme="light"] .nav-panel {
  background:
    linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.30)),
    rgba(255,255,255,.95);
  border-color: rgba(18,18,16,.12);
  box-shadow: 0 28px 64px -26px rgba(18,18,16,.30), inset 0 1px 0 rgba(255,255,255,.9);
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-caret, .nav-panel a { transition: opacity .15s, visibility .15s; }
}

@media (max-width: 1000px) {
  /* accordion inside the mobile drawer — panels stack in flow, no overlay */
  nav.top ul li.has-menu { width: 100%; }
  .nav-trigger { width: 100%; justify-content: space-between; min-height: 48px; font-size: 16px; }
  .nav-panel {
    position: static; transform: none; min-width: 0; width: 100%;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: none; padding: 0 0 8px 14px;
    max-height: 0; overflow: hidden; opacity: 1; visibility: visible; pointer-events: auto;
    transition: max-height .42s var(--e-expo);
  }
  li.has-menu.open .nav-panel { transform: none; max-height: 460px; pointer-events: auto; }
  .nav-panel::before { display: none; }
  .nav-panel a { padding: 9px 10px; }
  .nav-panel a span { display: none; }
}

/* ── Vertical hover preview ──
   A framed product shot that rises beside the vertical card on hover. Same
   glass language as the nav panels and product cards, with an opaque base so
   it stays legible over whatever sits behind it. Desktop fine-pointer only. */
.vp-card {
  position: fixed; z-index: 320; width: 420px; pointer-events: none;
  opacity: 0; transform: translateY(12px) scale(.97);
  transition: opacity .3s var(--e-soft), transform .5s var(--e-expo);
  border-radius: 20px; padding: 12px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(var(--ink-rgb),.94);
  backdrop-filter: blur(26px) saturate(165%); -webkit-backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 76px -26px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.10);
}
.vp-card.show { opacity: 1; transform: translateY(0) scale(1); }
.vp-card img { display: block; width: 100%; border-radius: 12px; }
.vp-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 4px 3px; }
.vp-meta b { font-size: 13.5px; font-weight: 600; color: #f4efe6; }
.vp-meta span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(244,239,230,.55); text-align: right; }
:root[data-theme="light"] .vp-card {
  background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.30)), rgba(255,255,255,.96);
  border-color: rgba(18,18,16,.12);
  box-shadow: 0 34px 76px -30px rgba(18,18,16,.34), inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme="light"] .vp-meta b { color: #12121a; }
:root[data-theme="light"] .vp-meta span { color: rgba(18,18,26,.5); }
@media (prefers-reduced-motion: reduce) { .vp-card { transition: opacity .18s; } }

/* ── Rockets AI feature panel (case-studies) ──
   The one fully-public, fully-verifiable engagement gets its own proof block
   instead of a one-line card — real capabilities, a real cited answer, a real
   build window. Same glass language as the rest of the site, opaque base. */
.raw-panel { border: 1px solid var(--line-2); border-radius: 24px; padding: clamp(22px, 4vw, 40px); background: var(--ink-2); margin-top: 28px; }
:root[data-theme="light"] .raw-panel { box-shadow: 0 1px 2px rgba(18,18,26,.04), 0 8px 24px -12px rgba(18,18,26,.10); }
.raw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.raw-head h3 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.raw-head h3 em { font-family: var(--serif); font-style: normal; color: var(--lime-ink); }
.raw-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime-ink); }
.raw-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(var(--lime-rgb),.6); animation: rawPulse 2s ease-in-out infinite; }
@keyframes rawPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.raw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
@media (max-width: 700px) { .raw-stats { grid-template-columns: repeat(2, 1fr); } }
.raw-stat { background: var(--ink-2); padding: 16px 14px; }
.raw-stat b { display: block; font-family: var(--serif); font-style: normal; font-size: clamp(20px, 2.6vw, 27px); color: var(--bone); }
.raw-stat span { font-size: 11.5px; color: var(--bone-soft); }

.raw-proof { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; background: var(--ink); margin-bottom: 22px; }
.raw-proof .rp-q { font-size: 13px; color: var(--bone-soft); margin: 0 0 10px; }
.raw-proof .rp-q b { color: var(--bone); font-weight: 600; }
.raw-proof .rp-a { font-size: 14.5px; line-height: 1.65; color: var(--bone); margin: 0 0 12px; }
.raw-src { display: flex; flex-wrap: wrap; gap: 8px; }
.raw-src a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--lime-ink); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; transition: border-color .2s, background .25s var(--e-soft); }
.raw-src a:hover { border-color: var(--lime-ink); background: rgba(var(--lime-rgb),.06); }
.raw-src a::before { content: "↗"; opacity: .6; }

.raw-caps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.raw-cap { font-size: 12px; color: var(--bone-mute); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.raw-caps-more { font-size: 12px; color: var(--bone-soft); align-self: center; }

.raw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.raw-foot .rf-note { font-size: 12.5px; color: var(--bone-soft); }

/* ══════════════════════════════════════════════════════════════
   AWWWARDS PASS — motion & layout choreography.
   Everything here is presentational: transform/opacity only,
   desktop-gated where noted, and inert under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Custom cursor ─────────────────────────────────────────── */
#cursor, #cursorRing {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999;
  will-change: transform;
}
#cursor {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lime, #cef23e);
  mix-blend-mode: difference;
  transform: translate(-100px, -100px);
}
#cursorRing {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1.5px solid rgba(var(--lime-rgb), .65);
  mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-100px, -100px) scale(.35);
  opacity: .55;
  transition: opacity .3s ease;
}
#cursorRing .cl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime-ink);
  opacity: 0; transform: scale(.6);
  transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
  white-space: nowrap;
}
html.cursor-on #cursorRing.hot { opacity: 1; }
html.cursor-on #cursorRing.labeled { border-color: rgba(var(--lime-rgb), .9); background: rgba(var(--ink-rgb), .25); }
html.cursor-on #cursorRing.labeled .cl { opacity: 1; transform: scale(1); }
html:not(.cursor-on) #cursor, html:not(.cursor-on) #cursorRing { display: none; }

/* ── 2. Scroll-stacking verticals (homepage, desktop) ─────────── */
@media (min-width: 1001px) {
  body.home .vert-grid.stacked {
    display: block;
    padding-bottom: 8vh;
  }
  body.home .vert-grid.stacked .vert {
    position: sticky;
    max-width: 880px;
    margin: 0 auto 12vh;
    box-shadow: 0 -18px 60px -30px rgba(var(--ink-rgb), .9);
    transform: scale(calc(1 - var(--stack-away, 0) * 0.05)) translateY(calc(var(--stack-away, 0) * -14px));
    filter: brightness(calc(1 - var(--stack-away, 0) * 0.25));
    transition: none;
  }
  body.home .vert-grid.stacked .vert:nth-child(1) { top: 84px;  z-index: 1; }
  body.home .vert-grid.stacked .vert:nth-child(2) { top: 100px; z-index: 2; }
  body.home .vert-grid.stacked .vert:nth-child(3) { top: 116px; z-index: 3; margin-bottom: 4vh; }
}

/* ── 3. Line-mask headline reveals ────────────────────────────── */
.lm { display: block; overflow: hidden; }
.lm > span { display: block; transform: translateY(112%); }
h2.lm-ready { opacity: 1 !important; transform: none !important; }
h2.lm-ready.in .lm > span,
h2.lm-ready.lm-in .lm > span {
  transform: translateY(0);
  transition: transform .9s var(--e-expo, cubic-bezier(.16,1,.3,1));
  transition-delay: calc(var(--lmi, 0) * 70ms);
}

/* ── 4. Hero exit choreography ────────────────────────────────── */
body.home .hero .wrap { will-change: transform, opacity; }
body.home .hero-sky { will-change: transform; }

/* ── 5. Ghost numerals ────────────────────────────────────────── */
.ghost-num {
  position: absolute; right: 2vw; top: -30px;
  font-size: clamp(140px, 17vw, 240px);
  font-weight: 700; line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--bone-rgb), .10);
  pointer-events: none; user-select: none;
  z-index: 0;
  will-change: transform;
}
section { position: relative; }
section > .wrap { position: relative; z-index: 1; }
@media (max-width: 1000px) { .ghost-num { display: none; } }

/* ── 6. Card physics: tilt + glare, magnetic buttons ──────────── */
html.fx .hub-card, html.fx .agent-card, html.fx .tier, html.fx .vert {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
html.fx .hub-card::after, html.fx .agent-card::after, html.fx .tier::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--bone-rgb), .07), transparent 60%);
  opacity: var(--go, 0); pointer-events: none;
  transition: opacity .4s ease;
}
html.fx .hub-card, html.fx .agent-card, html.fx .tier { position: relative; overflow: hidden; }
html.fx .cta-btn { transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease, border-color .3s ease; will-change: transform; }

/* ── 7. Footer curtain + marquee velocity ─────────────────────── */
body.home main#main-content { position: relative; z-index: 2; background: var(--ink); }
body.home footer { position: sticky; bottom: 0; z-index: 1; }
@media (max-width: 1000px) {
  body.home footer { position: static; }
}

/* ── 8. Section rhythm: sticky rails + offset grid ────────────── */
@media (min-width: 1001px) {
  body.home .studio-grid > div:first-child { position: sticky; top: 110px; align-self: start; }
  .faq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
  .faq-rail { position: sticky; top: 110px; }
  body.home #solutions .hub-grid { align-items: start; }
  body.home #solutions .hub-card:nth-child(even) { margin-top: 48px; }
}
@media (max-width: 1000px) {
  .faq-grid { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  #cursor, #cursorRing { display: none !important; }
  .lm > span { transform: none !important; transition: none !important; }
  .ghost-num { display: none; }
  body.home .vert-grid.stacked .vert { transform: none; filter: none; }
  html.fx .hub-card, html.fx .agent-card, html.fx .tier, html.fx .vert { transform: none; }
}

/* ── Page-hero cover image (replaces the aperture animation where used) ──
   Directional scrim keeps the left-aligned headline readable while the
   right side of the photograph stays visible. Theme-aware via --ink-rgb. */
.page-hero.has-cover { position: relative; overflow: hidden; }
.page-hero.has-cover .ph-cover {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .8;
}
.page-hero.has-cover .ph-cover-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), .92) 0%, rgba(var(--ink-rgb), .72) 38%, rgba(var(--ink-rgb), .25) 68%, rgba(var(--ink-rgb), .05) 100%),
    linear-gradient(180deg, rgba(var(--ink-rgb), .55) 0%, rgba(var(--ink-rgb), .08) 35%, rgba(var(--ink-rgb), .78) 100%);
}
.page-hero.has-cover .wrap { position: relative; z-index: 2; }
@media (max-width: 760px) {
  .page-hero.has-cover .ph-cover { opacity: .55; }
  .page-hero.has-cover .ph-cover-scrim {
    background:
      linear-gradient(180deg, rgba(var(--ink-rgb), .82) 0%, rgba(var(--ink-rgb), .6) 55%, rgba(var(--ink-rgb), .88) 100%);
  }
}

/* ══════════════════════════════════════════════════════════════
   COMPACT PASS — sections 03–06 tightened so a cold visitor
   reaches the contact form sooner. No copy removed anywhere:
   long lists collapse behind progressive disclosure instead.
   ══════════════════════════════════════════════════════════════ */

/* shared: these four sections drop from 140px to ~88px vertical padding */
.studio, .stack, .sol, .how { padding: 88px 0; }

/* 06 kicker — the relocated brand-band caption */
.kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-soft); margin: -8px 0 18px; }

/* ── 03 Studio: pillars as a tight 2×2 bento ── */
@media (min-width: 901px) {
  .studio-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .studio-pillars .pillar {
    margin: 0; padding: 22px 22px 20px;
    border: 1px solid var(--line); border-radius: 16px;
    background: rgba(var(--bone-rgb), .015);
  }
  .studio-pillars .pillar .num-svg { width: 40px; }
  .studio-pillars .pillar h3, .studio-pillars .pillar h4 { font-size: 16.5px; margin-bottom: 6px; }
  .studio-pillars .pillar p { font-size: 13.5px; line-height: 1.55; }
}

/* ── 04 Engagements: tier bullets behind disclosure ── */
.tier-more summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lime-ink); padding: 4px 0 10px;
}
.tier-more summary::-webkit-details-marker { display: none; }
.tier-more summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.tier-more[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.tier-more ul { margin-top: 2px; }

/* ── 05 Solutions: Stripe-style index rows instead of cards ── */
@media (min-width: 901px) {
  body.home #solutions .hub-grid { display: block; }
  body.home #solutions .hub-card { min-height: 0; }
  body.home #solutions .hub-card {
    display: grid;
    grid-template-columns: 150px minmax(0, .8fr) minmax(0, 1.2fr) 24px;
    grid-template-areas: "tag title desc go" "tag title acv go";
    align-items: center; column-gap: 28px; row-gap: 4px;
    padding: 20px 26px;
    border-radius: 0; border: 0; border-top: 1px solid var(--line);
    margin: 0 !important;
  }
  body.home #solutions .hub-card .tag { grid-area: tag; }
  body.home #solutions .hub-card h3  { grid-area: title; }
  body.home #solutions .hub-card > p { grid-area: desc; align-self: end; }
  body.home #solutions .hub-card .acv { grid-area: acv; align-self: start; margin: 0; font-size: 11px; color: var(--bone-soft); }
  body.home #solutions .hub-card .go { grid-area: go; }
  body.home #solutions .hub-card:last-of-type { border-bottom: 1px solid var(--line); }
  body.home #solutions .hub-card .tag { margin: 0; }
  body.home #solutions .hub-card h3 { font-size: 19px; margin: 0; }
  body.home #solutions .hub-card p { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--bone-soft); }
  body.home #solutions .hub-card .go { margin: 0; font-size: 0; }        /* keep the arrow, drop the label */
  body.home #solutions .hub-card .go .arrow { font-size: initial; }
  body.home #solutions .hub-card:hover { background: rgba(var(--bone-rgb), .03); }
}

/* ── 06 Sprint timeline: tighter steps ── */
.timeline-steps .t-step p { font-size: 13px; line-height: 1.5; }
.timeline { margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  .tier-more summary::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE POLISH PASS — 80% of traffic is a phone.
   Fixes: iOS input auto-zoom, sub-44px tap targets, sub-10.5px
   type, nav blur jank, hero height, safe-area insets.
   ══════════════════════════════════════════════════════════════ */

/* 1 ── iOS zoom kill-switch: any input under 16px makes Safari zoom
       the page on focus and strand the visitor there. Applies at every
       width — 16px is fine on desktop too. */
.intake-form input, .intake-form select, .intake-form textarea,
.pq-email input, .lead-form input {
  font-size: 16px;
}

@media (max-width: 760px) {

  /* 2 ── tap targets to ≥44px on everything a thumb needs */
  .proof-strip .logos a, .proof-strip .logos span { padding: 10px 4px; margin: -6px 0; }
  .proof-strip .label a { display: inline-block; padding: 8px 0; }
  .vert .v-stat .v-src { padding: 12px 0; margin: -2px 0; }
  .pq-head { min-height: 48px; }
  .tier-cta { padding-top: 14px; padding-bottom: 14px; }
  .tier-more summary { padding: 12px 0; }
  .theme-toggle { width: 44px; height: 44px; }
  footer .foot-col a { display: block; padding: 9px 0; }
  .raw-src a { padding: 10px 2px; }
  .th-open { display: inline-flex; padding: 10px 8px; }   /* was hidden — a phone user deserves the open link too */

  /* 3 ── legibility floor: nothing under 10.5px */
  .price-hint, .risk-reversal .label, .cred-lbl,
  .th-chips span, .raw-cap, .b-tag, .iw-label,
  .pq-serial, .pq-fineprint { font-size: 10.5px !important; }

  /* 4 ── nav: backdrop blur is the single biggest scroll-jank source
         on low-end phones. Solid ink at high alpha reads identically. */
  nav.top, nav.top.scrolled {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(10, 10, 12, .97);
  }
  :root[data-theme="light"] nav.top, :root[data-theme="light"] nav.top.scrolled {
    background: rgba(251, 250, 248, .97);
  }

  /* 5 ── hero: 1,880px of phone hero before any proof is two full
         screens too many. Tighten the stack, keep every element. */
  .hero h1 { margin-bottom: 24px; }
  .hero .lede { margin-bottom: 22px; }
  .hero .meta { margin-top: 30px; gap: 18px; }
  .hero .meta > div { padding: 0; }
  .proof-strip { margin-top: 28px; }
  .hero .actions { gap: 10px; }

  /* 5b ── counters as a compact 3-across row; numerals scaled down */
  .hero .meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hero .meta .tnum, .hero .meta .serif { font-size: 30px; }
  .hero .meta .label { font-size: 10.5px; }

  /* 2b ── remaining thumb targets */
  .tier-cta { min-height: 46px; display: inline-flex; align-items: center; }
  .li-link { display: inline-flex; padding: 12px 0; }
  .hub-card .go, .agent-card .ac-go { padding: 10px 0; margin: -4px 0; }

  /* 3b ── last of the 10px labels */
  .th-soon, .hub-card .tag, .tag, .photo-cap, .ac-tag { font-size: 10.5px !important; }

  /* 6 ── safe areas: notched phones */
  .sticky-cta, #stickyCta { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* 7 ── smoother touch scrolling for the two horizontal rails */
.th-tabs, .raw-caps { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.th-tab { scroll-snap-align: start; }

/* ── Theater live embeds — demo lives inside the frame ── */
.th-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--ink-0); }
.th-stage iframe[hidden] { display: none; }
.th-poster[hidden] { display: none; }

/* ── Investors flywheel ── */
.fw-wrap { margin-top: 64px; display: grid; place-items: center; }
.fw-svg { width: min(820px, 100%); height: auto; display: block; }
.fw-svg .fw-ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 9; }
.fw-svg .fw-ring-g { transform-origin: 390px 390px; animation: fwSpin 90s linear infinite; }
.fw-svg .fw-ring2 { fill: none; stroke: var(--line); stroke-width: 1; opacity: .5; }
@keyframes fwSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fw-svg .fw-ring-g { animation: none; } }
.fw-svg .fw-arc { fill: none; stroke: var(--line-2); stroke-width: 1.3; }
.fw-svg .fw-node rect { fill: var(--ink-2); stroke: var(--line-2); stroke-width: 1; }
.fw-svg .fw-node text { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; fill: var(--bone); }
.fw-svg .fw-node.hot rect { stroke: rgba(var(--lime-rgb), .55); fill: rgba(var(--lime-rgb), .05); }
.fw-svg .fw-node.hot text { fill: var(--lime-ink); }
.fw-svg .fw-c1 { font-family: var(--mono); font-size: 21px; letter-spacing: .22em; fill: var(--bone); }
.fw-svg .fw-c2 { font-family: var(--serif); font-style: italic; font-size: 15px; fill: var(--bone-soft); }
.reveal .fw-node { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--e-expo), transform .7s var(--e-expo); transition-delay: calc(var(--fi) * 90ms + 200ms); }
.reveal.in .fw-node { opacity: 1; transform: none; }
.reveal .fw-arc { stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1.1s var(--e-expo); transition-delay: .35s; }
.reveal.in .fw-arc { stroke-dashoffset: 0; }
.fw-mobile { display: none; }
@media (max-width: 700px) {
  .fw-svg { display: none; }
  .fw-mobile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
  .fwm { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); border: 1px solid var(--line-2); background: var(--ink-2); border-radius: 999px; padding: 12px 22px; text-align: center; width: min(320px, 100%); }
  .fwm.hot { color: var(--lime-ink); border-color: rgba(var(--lime-rgb), .55); background: rgba(var(--lime-rgb), .05); }
  .fwm-a { color: var(--lime-ink); font-size: 17px; opacity: .75; }
}


/* ── Investors — editorial layouts (typography-first, hairline rules) ── */
.pullquote { font-family: var(--serif); font-style: normal; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.3; letter-spacing: -0.02em; color: var(--bone); margin: 72px auto 0; max-width: 26ch; text-align: center; }
.pullquote em { color: var(--lime-ink); font-style: italic; }
.pullquote.sm { font-size: clamp(18px, 2.2vw, 24px); margin-top: 56px; max-width: 34ch; color: var(--bone-mute); }
.pullquote.sm em { color: var(--lime-ink); }

.spec { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 72px; margin-top: 56px; }
.spec > div { display: flex; gap: 20px; align-items: baseline; padding: 19px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; letter-spacing: -0.01em; color: var(--bone); }
.spec > div .mono { font-size: 10.5px; color: var(--lime-ink); letter-spacing: .12em; }
@media (max-width: 700px) { .spec { grid-template-columns: 1fr; } .spec > div { padding: 16px 0; font-size: 14.5px; } }

.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; margin-top: 64px; }
.statband .stat { border-top: 1px solid var(--line-2); padding-top: 22px; }
.statband .stat b { display: block; font-family: var(--serif); font-style: normal; font-weight: 500; font-size: clamp(36px, 4.6vw, 58px); letter-spacing: -0.03em; line-height: 1; color: var(--bone); margin-bottom: 12px; }
.statband .stat span { font-size: 13.5px; color: var(--bone-mute); line-height: 1.5; display: block; max-width: 22ch; }
@media (max-width: 700px) { .statband { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; margin-top: 48px; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 64px; }
.split > div { border-top: 1px solid var(--line-2); padding-top: 24px; }
.split-tag { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-soft); margin-bottom: 14px; }
.split-tag.lime { color: var(--lime-ink); }
.split h3 { margin: 0 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.split p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--bone-mute); max-width: 46ch; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; gap: 40px; } }

.moat-list { margin-top: 56px; border-top: 1px solid var(--line-2); }
.mrow { display: grid; grid-template-columns: 56px 240px 1fr; gap: 24px; align-items: baseline; padding: 21px 0; border-bottom: 1px solid var(--line); }
.mnum { font-size: 10.5px; color: var(--lime-ink); letter-spacing: .12em; }
.mterm { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--bone); }
.mdesc { font-size: 15px; color: var(--bone-mute); }
@media (max-width: 700px) { .mrow { grid-template-columns: 40px 1fr; } .mdesc { grid-column: 2; margin-top: 2px; } }

.ledger { max-width: 680px; margin: 56px 0 0; }
.lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.lrow:first-child { border-top: 1px solid var(--line); }
.l-what { font-size: 16px; letter-spacing: -0.01em; color: var(--bone); }
.l-verb { font-family: var(--serif); font-style: italic; font-size: 21px; letter-spacing: -0.02em; color: var(--lime-ink); }
.lrow.dim .l-what { color: var(--bone-soft); }
.lrow.dim .l-verb { color: var(--bone-soft); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(163,52,59,.75); }

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; }
.timeline .tl { padding: 4px 36px 0; border-left: 1px solid var(--line); }
.timeline .tl:first-child { padding-left: 0; border-left: 0; }
.tl-when { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-soft); margin-bottom: 14px; }
.tl-when.lime { color: var(--lime-ink); }
.timeline .tl h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.timeline .tl p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--bone-mute); }
@media (max-width: 700px) { .timeline { grid-template-columns: 1fr; gap: 32px; } .timeline .tl { border-left: 1px solid var(--line); padding: 0 0 0 22px; } .timeline .tl:first-child { border-left: 1px solid var(--line); padding-left: 22px; } }

/* ── Wedge rail (about-us) ── */
.wedge { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 56px; }
.wg { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); border: 1px solid var(--line-2); background: var(--ink-2); border-radius: 999px; padding: 13px 26px; text-align: center; width: min(340px, 100%); }
.wg.hot { color: var(--lime-ink); border-color: rgba(var(--lime-rgb), .55); background: rgba(var(--lime-rgb), .05); }
.wg-a { color: var(--lime-ink); font-size: 17px; opacity: .75; }

/* ── Investors: market blocks + worklist cascade ── */
.market { display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px; margin-top: 72px; }
.mk { border-top: 1px solid var(--line-2); padding-top: 26px; }
.mk-tag { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-ink); margin-bottom: 20px; }
.mk-num { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 5.4vw, 72px); letter-spacing: -0.035em; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.mk-label { font-size: 14.5px; color: var(--bone); margin-top: 14px; letter-spacing: -0.01em; }
.mk-src { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--bone-soft); margin-top: 5px; }
.mk p { margin: 18px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--bone-mute); max-width: 38ch; }
@media (max-width: 880px) { .market { grid-template-columns: 1fr; gap: 48px; margin-top: 56px; } }

.worklist-head { margin-top: 110px; text-align: center; }
.worklist-head h3 { margin: 0; font-size: clamp(22px, 2.8vw, 32px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; }
.worklist-head h3 em { font-style: normal; color: var(--lime-ink); }
.worklist { margin: 56px auto 0; max-width: 560px; text-align: center; }
.worklist > div { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.3vw, 26px); letter-spacing: -0.02em; line-height: 1.4; color: var(--bone-soft); padding: 9px 0; }
.worklist > div.wl-final { font-style: normal; font-family: var(--sans); font-weight: 600; color: var(--lime-ink); font-size: clamp(17px, 2vw, 21px); letter-spacing: -0.01em; margin-top: 18px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ── Investors: Apple bento grids + product rail + micro-motion ── */
.bento { display: grid; gap: 18px; margin-top: 64px; }
.b-what { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
.b-what .bt-img { grid-row: span 2; }
.bt { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--ink-2); padding: 26px; display: flex; flex-direction: column; transition: transform .45s var(--e-expo), border-color .3s ease, background .3s ease; }
@media (hover:hover) { .bt:hover { transform: translateY(-5px); border-color: var(--line-2); } }
.bt-num { font-size: 10.5px; letter-spacing: .14em; color: var(--lime-ink); margin-bottom: 12px; }
.bt h3 { margin: auto 0 0; font-size: clamp(16px, 1.5vw, 19.5px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; max-width: 22ch; }
.bt-ghost { position: absolute; right: 14px; top: 6px; font-family: var(--serif); font-size: 92px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; transition: -webkit-text-stroke-color .35s ease, transform .5s var(--e-expo); }
@media (hover:hover) { .bt:hover .bt-ghost { -webkit-text-stroke-color: rgba(var(--lime-rgb), .45); transform: translateY(-4px); } }
.bt-hot { border-color: rgba(var(--lime-rgb), .3); background: linear-gradient(180deg, var(--ink-2), rgba(var(--lime-rgb), .04)); }
.bt-img { padding: 0; margin: 0; border-color: var(--line-2); }
.bt-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.2s var(--e-expo); }
.reveal.in .bt-img img, .stagger .bt-img img { transform: scale(1.06); }
.bt-img.in-settled img { transform: scale(1); }
.bt-img figcaption { position: absolute; left: 16px; bottom: 14px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #f4f3ef; background: rgba(10,10,12,.55); backdrop-filter: blur(8px); border-radius: 999px; padding: 7px 14px; }
.b-progress { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
.b-progress .bt-wide { grid-column: span 2; grid-row: span 2; }
.bt-stat { justify-content: flex-end; }
.bt-stat b { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.03em; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.bt-stat span { font-size: 12.5px; color: var(--bone-mute); margin-top: 10px; line-height: 1.45; }
@media (max-width: 940px) {
  .b-what { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .b-what .bt-hot { grid-column: span 2; }
  .b-progress { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .bt-ghost { font-size: 68px; }
}
@media (max-width: 560px) {
  .b-what { grid-template-columns: 1fr; grid-auto-rows: minmax(128px, auto); }
  .b-what .bt-hot { grid-column: auto; }
  .b-what .bt-img { grid-row: span 1; min-height: 220px; }
  .b-progress { grid-template-columns: 1fr 1fr; }
  .b-progress .bt-wide { grid-column: span 2; grid-row: span 1; min-height: 200px; }
}

.prail-wrap { position: relative; margin-top: 64px; }
.prail { display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 78vw); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 22px; scrollbar-width: none; }
.prail::-webkit-scrollbar { display: none; }
.pcard { position: relative; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 26px; background: var(--ink-2); padding: 34px 32px 30px; min-height: 460px; display: flex; flex-direction: column; color: inherit; transition: transform .45s var(--e-expo), border-color .3s ease; }
@media (hover:hover) { .pcard:hover { transform: translateY(-6px); border-color: rgba(var(--lime-rgb), .4); } }
.pcard .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-ink); margin-bottom: 18px; }
.pcard h3 { margin: 0 0 14px; font-size: clamp(24px, 2.4vw, 31px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.pcard p { margin: 0 0 26px; font-size: 14.5px; line-height: 1.65; color: var(--bone-mute); max-width: 40ch; }
.pcard .go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--lime-ink); }
.pcard .go .arrow { transition: transform .3s var(--e-expo); }
@media (hover:hover) { .pcard:hover .go .arrow { transform: translateX(5px); } }
.pc-ghost { position: absolute; right: -6px; bottom: -30px; font-family: var(--serif); font-style: italic; font-size: 180px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; transition: -webkit-text-stroke-color .4s ease; }
@media (hover:hover) { .pcard:hover .pc-ghost { -webkit-text-stroke-color: rgba(var(--lime-rgb), .3); } }
.prail-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.pr-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--bone); font-size: 16px; cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s var(--e-expo); }
.pr-btn:hover { border-color: var(--lime-ink); background: rgba(var(--lime-rgb), .07); transform: scale(1.06); }
@media (max-width: 700px) { .prail { grid-auto-columns: 86vw; } .prail-nav { display: none; } }
[data-plx] { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .bt, .pcard, .bt-img img { transition: none !important; transform: none !important; } }

/* ── Blog post covers ── */
.post-cover { margin: 0 0 40px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 21 / 9; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .post-cover { aspect-ratio: 16 / 10; border-radius: 16px; margin-bottom: 28px; } }

/* ── Spring micro-interactions (motion-safe) ── */
@media (prefers-reduced-motion: no-preference) {
  .cta-btn, .pr-btn, .th-tab, .theme-toggle { transition-timing-function: cubic-bezier(.34,1.56,.64,1); }
  .cta-btn:active, .pr-btn:active, .th-tab:active { transform: scale(.96); }
  .bt:active, .pcard:active { transform: translateY(-2px) scale(.99); }
  .hub-card .go .arrow, .pcard .go .arrow { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
}

/* ── Hero source citation ── */
.hero-src { margin: 0 0 40px; font-size: 10.5px; letter-spacing: .05em; color: var(--bone-soft); }
.hero .lede:has(+ .hero-src) { margin-bottom: 14px; }
@media (max-width: 700px) {
  .hero-src { margin-bottom: 22px; }
  .hero .lede:has(+ .hero-src) { margin-bottom: 10px; }
}
.hero-src a { color: var(--bone-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: color .2s ease; }
.hero-src a:hover { color: var(--lime-ink); }
.src-note { font-size: 13.5px; color: var(--bone-soft); }

/* ── Studio pillars — flagship image tiles ── */
.studio-pillars.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pillar.has-img {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 22px;
  padding: 26px; min-height: 420px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  transition: transform .5s var(--e-expo), border-color .35s ease, opacity .8s var(--e-expo);
}
.pillar.has-img .num-svg { filter: drop-shadow(0 1px 10px rgba(10,10,12,.85)); }
.pillar.has-img .num-svg text { stroke: #d4ff3d; fill: #d4ff3d; }
.pillar.has-img:last-child { border-bottom: 1px solid var(--line); }
@media (hover: hover) {
  .pillar.has-img:hover { transform: translateY(-5px); border-color: rgba(var(--lime-rgb), .38); }
  .pillar.has-img:hover .p-bg { transform: scale(1.05); }
}
.pillar.has-img .p-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.01);
  transition: transform 1.2s var(--e-expo);
}
.pillar.has-img .p-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.34) 0%, rgba(10,10,12,.62) 46%, rgba(10,10,12,.92) 100%);
}
.pillar.has-img .num-svg, .pillar.has-img > div { position: relative; z-index: 1; }
/* tiles sit on a photo — text stays light in BOTH themes */
.pillar.has-img h3, .pillar.has-img h4 { color: #f4f3ef; }
.pillar.has-img p { color: rgba(244,243,239,.8); font-size: 14.5px; max-width: 44ch; }
[data-theme="light"] .pillar.has-img { border-color: rgba(10,10,12,.14); }
@media (max-width: 700px) {
  .studio-pillars.showcase { grid-template-columns: 1fr; gap: 12px; }
  .pillar.has-img { min-height: 300px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar.has-img, .pillar.has-img .p-bg { transition: none !important; transform: none !important; }
  .pillar .num-svg text { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; transition: none !important; }
}

/* ── Studio flagship rail (Apple-style tall cards) ── */
.sf-head { max-width: 720px; margin-bottom: 56px; }
.studio-rail { grid-auto-columns: min(560px, 86vw); }
.studio-rail .pillar.has-img { min-height: 470px; scroll-snap-align: start; border-radius: 26px; padding: 30px 28px; }
.studio-rail .pillar.has-img h3, .studio-rail .pillar.has-img h4 { font-size: clamp(22px, 2vw, 27px); letter-spacing: -0.025em; }
@media (max-width: 700px) {
  .studio-rail { grid-auto-columns: 84vw; }
  .studio-rail .pillar.has-img { min-height: 400px; }
  .sf-head { margin-bottom: 36px; }
}

/* ── Sprint rail (06) — cinematic video steps ── */
.sprint-rail { grid-auto-columns: min(640px, 88vw); }
.sprint-rail .pillar.has-img { min-height: 420px; scroll-snap-align: start; border-radius: 26px; padding: 28px; }
.sp-week { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #d4ff3d; text-shadow: 0 1px 8px rgba(10,10,12,.8); }
.sprint-rail .pillar.has-img h4 { font-size: clamp(21px, 1.9vw, 26px); letter-spacing: -0.025em; }
@media (max-width: 700px) {
  .sprint-rail { grid-auto-columns: 86vw; }
  .sprint-rail .pillar.has-img { min-height: 340px; }
}
video.p-bg { background: var(--ink-0); }

/* ── Side image frames (industry feature rows) ── */
.side-img { position: relative; margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); align-self: stretch; min-height: 340px; }
.side-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.side-img figcaption { position: absolute; left: 16px; bottom: 14px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #f4f3ef; background: rgba(10,10,12,.55); backdrop-filter: blur(8px); border-radius: 999px; padding: 7px 14px; }
@media (max-width: 900px) { .side-img { min-height: 260px; } }

/* ── Brand slideshow (Apple-style crossfade + Ken Burns) ── */
.bb-show { position: relative; }
.bb-show .bs-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1);
  transition: opacity 1.4s var(--e-soft, ease);
  will-change: opacity, transform;
}
.bb-show .bs-img:first-child { position: relative; }
.bb-show .bs-img.is-on { opacity: 1; animation: bsKen 7s linear forwards; }
@keyframes bsKen { from { transform: scale(1); } to { transform: scale(1.06); } }
.bs-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; gap: 8px; z-index: 2; }
.bs-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(244,243,239,.35); transition: background .4s ease, transform .4s var(--e-expo); }
.bs-dot.on { background: #d4ff3d; transform: scale(1.25); }
.bb-show .bb-cap { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .bb-show .bs-img { transition: none; animation: none !important; }
  .bs-dots { display: none; }
}

/* ── FAQ dropdowns ── */
.faq-dd { border-top: 1px solid var(--line); }
.faq-dd:last-child { border-bottom: 1px solid var(--line); }
.faq-dd summary { display: flex; align-items: baseline; gap: 22px; padding: 24px 4px; cursor: pointer; list-style: none; transition: color .25s ease; }
.faq-dd summary::-webkit-details-marker { display: none; }
.faq-dd summary .num { font-size: 11px; color: var(--lime-ink); letter-spacing: .12em; }
.faq-dd summary .q { flex: 1; font-size: clamp(16px, 1.5vw, 19px); font-weight: 600; letter-spacing: -0.015em; color: var(--bone); }
.faq-dd .dd-ic { position: relative; width: 18px; height: 18px; flex: none; align-self: center; }
.faq-dd .dd-ic::before, .faq-dd .dd-ic::after { content: ""; position: absolute; inset: auto; left: 2px; right: 2px; top: 8px; height: 1.6px; background: var(--lime-ink); border-radius: 2px; transition: transform .35s var(--e-expo); }
.faq-dd .dd-ic::after { transform: rotate(90deg); }
.faq-dd[open] .dd-ic::after { transform: rotate(0deg); }
.faq-dd summary:hover .q { color: var(--lime-ink); }
.faq-dd .dd-a { overflow: hidden; }
.faq-dd .dd-a p { margin: 0 0 26px; padding-left: 40px; max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--bone-mute); }
.faq-dd[open] .dd-a p { animation: ddIn .45s var(--e-expo); }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .faq-dd summary { gap: 14px; padding: 19px 2px; } .faq-dd .dd-a p { padding-left: 26px; } }
@media (prefers-reduced-motion: reduce) { .faq-dd[open] .dd-a p { animation: none; } .faq-dd .dd-ic::before, .faq-dd .dd-ic::after { transition: none; } }

/* ── Hero proof: live-deployment line ── */
.label-live { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; color: var(--bone); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #d4ff3d; flex: none; align-self: center; box-shadow: 0 0 10px rgba(212,255,61,.7); animation: livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.hero-live { margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; animation: heroLiveIn .8s var(--ease) 1s backwards; }
@keyframes heroLiveIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-live { animation: none; } }
.hero-live + .meta { margin-top: 56px; }
@media (max-width: 700px) { .hero-live { font-size: 10.5px; line-height: 1.6; } }
@media (min-width: 701px) and (max-height: 960px) {
  .hero { padding-top: 140px; }
  .hero-live { margin-top: 20px; }
}

/* ── AI Vendor Scorecard ── */
.sc-q { border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; margin: 0 0 14px; transition: border-color .3s ease; }
.sc-q.sc-miss { border-color: #febc2e; }
.sc-q legend { float: left; width: 100%; font-size: clamp(16px, 1.5vw, 18.5px); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 16px; }
.sc-q .sc-num { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime-ink); margin-bottom: 8px; font-weight: 400; }
.sc-opts { display: flex; gap: 10px; flex-wrap: wrap; clear: both; }
.sc-opts label { cursor: pointer; }
.sc-opts input { position: absolute; opacity: 0; }
.sc-opts span { display: inline-block; border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 18px; font-size: 13.5px; color: var(--bone-mute); transition: all .25s var(--e-expo); }
.sc-opts input:checked + span { border-color: var(--lime-ink); color: var(--lime-ink); background: rgba(var(--lime-rgb), .07); }
.sc-opts input:focus-visible + span { outline: 2px solid var(--lime-ink); outline-offset: 2px; }
.sc-opts label:hover span { border-color: var(--lime-ink); }
.sc-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.sc-progress { font-size: 11px; letter-spacing: .1em; color: var(--bone-soft); }
.sc-grade { display: flex; align-items: center; gap: 36px; margin-top: 40px; flex-wrap: wrap; }
.sc-letter { font-family: var(--serif); font-weight: 500; font-size: clamp(84px, 10vw, 140px); line-height: 1; color: var(--lime-ink); border: 1px solid var(--line-2); border-radius: 26px; padding: 12px 38px; }
.sc-gate { border: 1px solid rgba(var(--lime-rgb), .3); border-radius: 22px; background: linear-gradient(180deg, var(--ink-2), rgba(var(--lime-rgb), .04)); padding: 32px; margin-top: 44px; max-width: 620px; }
.sc-gate h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -0.02em; }
.sc-gate p { margin: 0 0 18px; color: var(--bone-mute); font-size: 14.5px; }
.sc-gate-form { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-gate-form input { flex: 1; min-width: 220px; font-size: 16px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink-0); color: var(--bone); }
.sc-fine { font-size: 10px; letter-spacing: .06em; color: var(--bone-soft); margin: 12px 0 0; }
.sc-report-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 44px 0 10px; }
.sc-report-head h3 { margin: 0; font-size: 23px; letter-spacing: -0.02em; }
.sc-r { border-top: 1px solid var(--line); padding: 22px 0; }
.sc-r .sc-num { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime-ink); }
.sc-r-mark.m2 { color: var(--lime-ink); } .sc-r-mark.m1 { color: #febc2e; } .sc-r-mark.m0 { color: #ff6b6b; }
.sc-r-why { margin: 10px 0 8px; font-size: 15px; line-height: 1.6; color: var(--bone); max-width: 64ch; }
.sc-r-clause { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bone-mute); max-width: 64ch; }
.sc-r-clause b { color: var(--bone); }
@media (max-width: 700px) { .sc-q { padding: 18px; } .sc-letter { padding: 8px 26px; } .sc-grade { gap: 22px; } }
@media print {
  nav.top, footer, .sc-gate, #scForm, .page-hero .actions, .cta-band, .theme-toggle { display: none !important; }
  body { background: #fff; color: #111; }
  .sc-r, .sc-grade, h1, h2, h3, p, .sc-num { color: #111 !important; }
}

/* ── Qualifier: typed industry ── */
.pq-other-input { display: block; margin-top: 12px; width: min(340px, 100%); font-size: 16px; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink-0); color: var(--bone); transition: border-color .25s ease; }
.pq-other-input:focus { outline: none; border-color: var(--lime-ink); }
.pq-other-input[hidden] { display: none; }

/* ── Founder note — narrative prose (replaces the display blockquote) ── */
.founder-note p { margin: 0 0 20px; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.65; color: var(--bone); letter-spacing: -0.01em; max-width: 58ch; }
.founder-note p:first-child { font-family: var(--serif); font-style: normal; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; letter-spacing: -0.015em; }
.founder-note p:last-child { margin-bottom: 0; }
.founder-note + .signature { margin-top: 28px; }

/* ── Micro-polish: media arrival + tap comfort + focus rings ── */
@media (prefers-reduced-motion: no-preference) {
  img.img-ldg { opacity: 0; }
  img.img-ldg.img-ld { opacity: 1; transition: opacity .5s ease; }
}
.hero-src a { padding-block: 8px; margin-block: -8px; }
.faq-dd summary:focus-visible, .pq-opt:focus-visible, .pr-btn:focus-visible, .th-tab:focus-visible { outline: 2px solid var(--lime-ink); outline-offset: 3px; border-radius: 8px; }

/* ── Branded loader (once per session; lifts when the page is ready) ── */
#iawLoader {
  position: fixed; inset: 0; z-index: 9999;
  background: #0a0a0c;
  display: flex; align-items: center; justify-content: center;
  transition: transform .75s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .75s;
  animation: ldrAutoClear 0s linear 3.2s forwards; /* no-JS / worst-case: clears itself */
}
#iawLoader.lift { transform: translateY(-100%); visibility: hidden; }
#iawLoader.skip { display: none; animation: none; }
@keyframes ldrAutoClear { to { visibility: hidden; pointer-events: none; opacity: 0; } }
.ldr-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ldr-mark { color: #f4f3ef; opacity: 0; transform: scale(.7) rotate(-14deg); animation: ldrMark .9s cubic-bezier(.16, 1, .3, 1) .1s forwards; }
@keyframes ldrMark { to { opacity: 1; transform: scale(1) rotate(0deg); } }
.ldr-ring { position: absolute; top: 26px; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 1px solid rgba(212,255,61,.55); opacity: 0; animation: ldrRing 1.5s cubic-bezier(.16, 1, .3, 1) .35s infinite; }
@keyframes ldrRing { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.1); } }
.ldr-word { font-family: var(--mono); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: rgba(244,243,239,.55); opacity: 0; animation: ldrWord .8s ease .45s forwards; }
@keyframes ldrWord { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #iawLoader { display: none !important; animation: none; } }

/* ── Audit fixes (2026-08-18) ── */
/* F26: country pages carry two nav CTAs; keep one on small screens so the menu stays reachable */
@media (max-width: 640px) { nav.top .cta-btn.alt { display: none; } }
/* F27: qualifier pill stacks outgrow the 220px cap on phones */
@media (max-width: 700px) { .pq-opts { max-height: 460px; } .pq-email { max-height: 340px; } }
/* F28+F31: investors progress bento — single column on small phones, natural rows */
@media (max-width: 560px) {
  .b-progress { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .b-progress .bt-wide { grid-column: auto; grid-row: auto; min-height: 220px; }
  .b-progress .bt-stat { min-height: 128px; }
}
/* F29/F14: the hidden attribute must always beat the mobile display override */
@media (max-width: 760px) { .th-open[hidden] { display: none !important; } }
/* F16: outgoing slide eases back instead of snapping */
.bb-show .bs-img { transition: opacity 1.4s var(--e-soft, ease), transform 1.4s linear; }
/* F17: intro overlay can never permanently black out the page */
#intro { animation: ldrAutoClear 0s linear 4s forwards; }
/* F33: ROI calculator inputs join the 16px no-zoom rule */
@media (max-width: 760px) { .roi input, .roi select, input[type="number"] { font-size: 16px !important; } }
/* F35: theme toggle tap size on touch tablets */
@media (min-width: 761px) and (max-width: 900px) { .theme-toggle { width: 44px; height: 44px; } }
/* F36: qualifier email error meets the mobile legibility floor */
.pq-err { font-size: 11px !important; }