/* ============================================================================
   OkComputer — web-five marketing site
   Built on the app's own "Glass" design system (tokens lifted from
   okc-react-frontend/tailwind.config.js + src/index.css). The look carries over
   from web-four; the narrative does not. This site leads with what a company
   can do with the product and only then explains how it works.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  /* backdrop / elevation */
  --bg:            #0b0c10;
  --bg-1:          #15161c;
  --bg-2:          #1c1e26;
  --bg-3:          #232631;

  /* ink */
  --ink:           #eef1f4;
  --ink-2:         #c8ccd3;
  --ink-muted:     #9ba0aa;
  --ink-faint:     #6b7280;

  /* accent — OkComputer deep blue, stored as channels for rgb(var()/a) */
  --accent-rgb:    122 162 247;   /* #7AA2F7 */
  --accent-2-rgb:  159 188 249;   /* #9FBCF9 */
  --accent:        rgb(var(--accent-rgb));
  --accent-2:      rgb(var(--accent-2-rgb));

  /* semantic */
  --jade-rgb:      106 212 163;   /* #6AD4A3 */
  --sky-rgb:       130 200 229;   /* #82C8E5 */
  --amber:         #e6b45c;
  --danger-rgb:    229 114 138;   /* #E5728A */
  --danger:        rgb(var(--danger-rgb));
  --jade:          rgb(var(--jade-rgb));
  --sky:           rgb(var(--sky-rgb));

  /* the memory register — deliberately apart from the accent, rose/pink */
  --rose-rgb:      229 143 177;   /* #E58FB1 */
  --rose:          rgb(var(--rose-rgb));

  /* frost hairlines */
  --frost:         rgba(255,255,255,0.122);
  --frost-strong:  rgba(255,255,255,0.2);
  --frost-faint:   rgba(255,255,255,0.06);

  /* radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px;
  --r-2xl: 16px; --r-3xl: 20px; --r-pill: 999px;

  /* shadows */
  --shadow-frost: 0 8px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-float: 0 18px 60px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  --glow:    0 0 0 1px rgb(var(--accent-rgb)/0.35), 0 8px 32px rgb(var(--accent-rgb)/0.18);
  --glow-sm: 0 0 18px rgb(var(--accent-rgb)/0.25);

  /* motion — the OkComputer signature curve */
  --quint: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --maxw: 1200px;
  --nav-h: 64px;

  /* fonts */
  --sans: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "SF Mono", Consolas, ui-monospace, monospace;

  color-scheme: dark;
}

/* ---- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: rgb(var(--jade-rgb)/0.32); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- 3. Ambient backdrop (Aurora + blueprint grid + vignette) -----------
   Aurora glow is painted with soft radial-gradients rather than a blur filter.
   A large filter:blur() on full-viewport elements is extremely expensive to
   rasterize (and murder to animate on scroll); a gradient that fades to
   transparent inside its own box gives the same soft glow for near-zero cost.
   Do not reintroduce filter:blur() here. */
.backdrop { position: fixed; inset: 0; z-index: -2; background: var(--bg); overflow: hidden; }
.aurora { position: absolute; border-radius: 50%; opacity: 0.95; will-change: transform; }
.aurora.a1 { width: 70vw; height: 70vw; left: -16vw; top: -22vw;  background: radial-gradient(circle at center, rgb(var(--jade-rgb)/0.20), rgb(var(--jade-rgb)/0.06) 34%, transparent 66%); }
.aurora.a2 { width: 78vw; height: 78vw; right: -20vw; top: -14vw; background: radial-gradient(circle at center, rgb(var(--accent-rgb)/0.20), rgb(var(--accent-rgb)/0.06) 34%, transparent 66%); }
.aurora.a3 { width: 82vw; height: 82vw; left: 8vw; bottom: -42vw; background: radial-gradient(circle at center, rgb(var(--sky-rgb)/0.13), rgb(var(--sky-rgb)/0.04) 34%, transparent 66%); }
.grid-tex {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
}
.vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 90% at 50% 0%, transparent 45%, rgba(0,0,0,0.5));
}

/* ---- 4. Layout helpers -------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }
.section { position: relative; padding: clamp(76px, 11vh, 150px) 0; }
.section-tight { padding: clamp(48px, 7vh, 90px) 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: var(--glow-sm); }
.eyebrow .num { color: var(--accent); }

h1, h2, h3 { font-weight: 640; letter-spacing: -0.02em; line-height: 1.05; }
.h-hero  { font-size: clamp(40px, 6.4vw, 92px); font-weight: 680; letter-spacing: -0.035em; line-height: 1.0; }
.h-sec   { font-size: clamp(30px, 4.4vw, 56px); }
.h-sub   { font-size: clamp(21px, 2.5vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
.lede    { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); line-height: 1.65; max-width: 62ch; }
/* A statement of the problem, set above the section heading that answers it.
   Quieter and smaller than the heading on purpose: it is the setup, not the claim. */
.thesis  { margin-top: 20px; max-width: 58ch; font-size: clamp(16px, 1.35vw, 19px);
           line-height: 1.6; color: var(--ink-muted); }
.thesis em { font-style: normal; color: var(--ink-2); }
.muted   { color: var(--ink-muted); }
.mono    { font-family: var(--mono); }
.grad-ink {
  background: linear-gradient(115deg, var(--ink) 20%, var(--accent-2) 60%, var(--jade) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.accent-ink { color: var(--accent); }

/* ---- 5. Buttons & pills ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid var(--frost); color: var(--ink);
  transition: transform .25s var(--quint), box-shadow .25s var(--quint), background .25s var(--quint), border-color .25s;
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-2px); }
.btn-accent {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-color: transparent; color: #0b0c10; box-shadow: var(--glow-sm);
}
.btn-accent:hover { box-shadow: var(--glow); color: #0b0c10; }
.btn-ghost { background: rgba(255,255,255,0.04); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--frost-strong); }
.btn-sm { padding: 9px 15px; font-size: 13.5px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--frost); background: rgba(255,255,255,0.03);
  font-size: 12.5px; color: var(--ink-2);
}
.pill .dot { width: 7px; height: 7px; border-radius: 999px; }
.dot-jade { background: var(--jade); box-shadow: 0 0 10px rgb(var(--jade-rgb)/0.6); }
.dot-accent { background: var(--accent); box-shadow: var(--glow-sm); }
.dot-amber { background: var(--amber); }
.dot-rose { background: var(--rose); box-shadow: 0 0 10px rgb(var(--rose-rgb)/0.6); }

/* ---- 6. Cards & glass --------------------------------------------------- */
.card {
  background: rgba(28,30,38,0.55);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--frost);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-frost);
}
.card-pad { padding: 22px 24px; }

/* ---- 7. Nav ------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(16px, 4vw, 40px);
  transition: background .4s var(--quint), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(19,20,26,0.72);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom-color: var(--frost);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 640; letter-spacing: -0.02em; font-size: 16px; }
.brand .mark { width: 26px; height: 26px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 8px 13px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500;
  color: var(--ink-muted); transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.nav-right { display: flex; align-items: center; gap: 12px; }
/* The nav thins out rather than disappearing. Hiding it outright left a phone
   with no way to reach pricing from the header at all. */
@media (max-width: 1040px) {
  .nav-links a:not(.nav-keep-md) { display: none; }
}
@media (max-width: 620px) {
  .nav-links a:not(.nav-keep-sm) { display: none; }
  .nav-links a { padding: 10px 10px; }
}

/* ---- 8. Hero ------------------------------------------------------------ */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); position: relative; }
/* Two columns above 940px: the argument on the left, the film on the right.
   The headline runs smaller than a full-bleed hero would carry because it now
   shares the fold with a 16:9 video — the cap is set so "how your company
   works" still holds ONE line inside half the page at every width. */
.hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
}
.hero .h-hero { font-size: clamp(30px, 3.2vw, 42px); }
.hero .h-hero .line { display: block; overflow: hidden; }
.hero .lede { margin-top: 20px; font-size: clamp(15.5px, 1.2vw, 17.5px); max-width: 46ch; }
.hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { margin-top: 18px; font-size: 12.5px; color: var(--ink-faint); font-family: var(--mono); }

/* ---- 8b. The hero film --------------------------------------------------
   The 77-second product film. `preload="none"` plus a poster means the hero
   costs one 68 KB JPEG until a visitor actually asks for the video, so the
   9 MB file never touches the first paint. */
.hero-media { min-width: 0; }
.vfilm {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-2xl); overflow: hidden;
  border: 1px solid var(--frost); background: #06070a;
  box-shadow: var(--shadow-float);
}
.vfilm video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #06070a;
}
.vfilm-play {
  position: absolute; inset: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(11,12,16,0.20), rgba(11,12,16,0.62));
  transition: opacity .45s var(--quint), visibility .45s;
}
/* pointer-events goes first so the overlay stops swallowing clicks on the
   native controls the instant playback starts, rather than 450ms later. */
.vfilm.playing .vfilm-play { opacity: 0; visibility: hidden; pointer-events: none; }
.vfilm-btn {
  width: 62px; height: 62px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: rgba(11,12,16,0.62); border: 1px solid var(--frost-strong);
  backdrop-filter: blur(10px); box-shadow: var(--glow);
  transition: transform .35s var(--spring), background .3s var(--quint);
}
.vfilm-btn svg { width: 26px; height: 26px; margin-left: 3px; color: var(--ink); }
.vfilm-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--ink-2); text-shadow: 0 1px 10px rgba(0,0,0,0.8);
}
.vfilm-play:hover .vfilm-btn { transform: scale(1.08); background: rgb(var(--accent-rgb)/0.22); }
.vfilm-cap {
  margin-top: 13px; font-size: 12.5px; color: var(--ink-faint);
  font-family: var(--mono); line-height: 1.65; max-width: 52ch;
}

/* Stacked below 940px: the words come first, the film sits under them. The
   caption goes with it — on a phone the film is a preview, not the argument. */
@media (max-width: 940px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 34px); padding-bottom: 40px; }
  .hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .hero .h-hero { font-size: clamp(34px, 6.2vw, 52px); }
  .hero .lede { font-size: 17px; max-width: 56ch; }
  .hero .scroll-cue { display: none; }
  .vfilm-cap { display: none; }
}
.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.scroll-cue .bar { width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); }

/* generic scroll-reveal */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .9s var(--quint), transform .9s var(--quint); }

/* ---- 9. Capability map (the constellation) ------------------------------
   An SVG holds the hairlines; the labels are real DOM text positioned over it,
   so they stay selectable, searchable and crisp at any zoom. */
.map-head { max-width: 760px; }
.map-stage {
  position: relative; margin-top: 46px;
  aspect-ratio: 16 / 10;
  min-height: 460px;
}
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-link {
  fill: none; stroke: rgba(255,255,255,0.13); stroke-width: 1;
  stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1.1s var(--quint), stroke .45s var(--quint), opacity .45s var(--quint);
}
.map-stage.drawn .map-link { stroke-dashoffset: 0; }
.map-node {
  position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; opacity: 0;
  transition: opacity .6s var(--quint), color .35s var(--quint), transform .45s var(--quint);
}
.map-stage.drawn .map-node { opacity: 1; }

.map-core {
  display: flex; align-items: center; gap: 11px;
  font-size: clamp(19px, 2.1vw, 27px); font-weight: 640; letter-spacing: -0.025em; color: var(--ink);
  padding: 10px 20px 10px 14px; border-radius: var(--r-pill);
  background: rgba(11,12,16,0.72); border: 1px solid var(--frost);
  backdrop-filter: blur(10px); box-shadow: var(--glow-sm);
}
.map-core .mark { width: clamp(24px, 2.4vw, 32px); height: clamp(24px, 2.4vw, 32px); flex: none; }

.map-spoke {
  font-size: clamp(14px, 1.25vw, 17.5px); font-weight: 640; letter-spacing: -0.015em; color: var(--ink);
  cursor: default; padding: 4px 6px; border-radius: var(--r-sm);
}
.map-leaf { font-size: clamp(12px, 1.05vw, 14.5px); color: var(--ink-muted); padding: 3px 5px; border-radius: var(--r-sm); }
.map-leaf.linked { color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 4px; cursor: pointer; }
.map-leaf.linked:hover { color: var(--accent-2); text-decoration-color: rgb(var(--accent-rgb)/0.7); }
.map-leaf .dept { color: var(--ink-faint); font-size: 0.86em; }

/* cluster focus: the hovered spoke and its leaves lift, everything else recedes */
.map-stage.focusing .map-node { opacity: 0.24; }
.map-stage.focusing .map-node.lit { opacity: 1; }
.map-stage.focusing .map-node.lit.map-spoke { color: var(--accent-2); }
.map-stage.focusing .map-link { opacity: 0.22; }
.map-stage.focusing .map-link.lit { opacity: 1; stroke: rgb(var(--accent-rgb)/0.65); }
.map-stage.focusing .map-core { opacity: 1; }

.map-caption {
  margin-top: 10px; min-height: 46px;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--ink-2); max-width: 74ch;
}
.map-caption .ci { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--accent); }
.map-caption b { color: var(--ink); font-weight: 600; }

/* the fallback list, shown on narrow screens and with scripts off */
.map-list { display: none; margin-top: 36px; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.map-list dl { margin: 0; padding: 18px 20px; border: 1px solid var(--frost); border-radius: var(--r-xl); background: rgba(255,255,255,0.02); }
.map-list dt { font-weight: 640; font-size: 15.5px; margin-bottom: 8px; }
.map-list dd { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.75; }
@media (max-width: 860px) {
  .map-stage { display: none; }
  .map-caption { display: none; }
  .map-list { display: grid; }
}

/* ---- 10. Three-idea row (the "more than a chatbot" section) ------------- */
.idea-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.idea {
  padding: 26px 24px; border-radius: var(--r-2xl);
  border: 1px solid var(--frost); background: rgba(255,255,255,0.02);
}
.idea .ii { width: 26px; height: 26px; color: var(--accent); margin-bottom: 16px; }
.idea h3 { font-size: 19px; margin-bottom: 9px; letter-spacing: -0.02em; }
.idea p { font-size: 14.8px; color: var(--ink-muted); line-height: 1.7; }
@media (max-width: 820px) { .idea-row { grid-template-columns: 1fr; } }

/* ---- 11. Real-app showcase (poster-gated) ------------------------------- */
.showcase-frame {
  position: relative; border-radius: var(--r-2xl); border: 1px solid var(--frost);
  overflow: hidden; box-shadow: var(--shadow-float); background: var(--bg-1);
  aspect-ratio: 1280 / 800;
}
/* The embedded app does not take the pointer until it is asked to.
   A wheel event over a live iframe is delivered to the IFRAME's document; when
   nothing in there scrolls, the browser chains the scroll out to this page,
   where it fights the smooth-scrolling that owns the page position. The result
   is the stutter you feel with the cursor over the demo. Keeping the frame
   pointer-transparent until someone clicks means the wheel lands on this page
   like any other element, and once the demo IS live it keeps its own scrolling
   to itself (overscroll-behavior) while smooth scrolling stands down. */
.showcase-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none;
}
.showcase-frame.live iframe { pointer-events: auto; }
.showcase-frame.live { overscroll-behavior: contain; }
.showcase-frame.started { cursor: pointer; }
.showcase-frame.live { cursor: default; }

.showcase-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 2; pointer-events: none; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--frost); background: rgba(11,12,16,0.82);
  backdrop-filter: blur(10px); box-shadow: var(--shadow-frost);
  font-size: 12px; color: var(--ink-2);
  transition: opacity .3s var(--quint);
}
.showcase-hint kbd {
  font-family: var(--mono); font-size: 10.5px; padding: 1px 6px;
  border: 1px solid var(--frost); border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06); color: var(--ink);
}
.showcase-frame:not(.live) .hint-live { display: none; }
.showcase-frame.live .hint-idle { display: none; }
.showcase-frame.live .showcase-hint { border-color: rgb(var(--accent-rgb)/0.45); }
.showcase-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center; padding: 0; border-radius: 0;
  cursor: pointer; overflow: hidden;
}
.showcase-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity .4s var(--quint), transform .6s var(--quint); }
.showcase-poster::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 50%, rgba(11,12,16,0.35), rgba(11,12,16,0.82));
}
.showcase-poster .play {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 24px 14px 20px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #0b0c10;
  font-weight: 640; font-size: 15.5px; box-shadow: var(--glow);
  transition: transform .3s var(--quint);
}
.showcase-poster .play svg { width: 18px; height: 18px; }
.showcase-poster:hover img { opacity: 0.72; transform: scale(1.02); }
.showcase-poster:hover .play { transform: translateY(-2px) scale(1.03); }
.showcase-poster.gone { display: none; }

.showcase-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.showcase-tab { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--frost); background: rgba(255,255,255,0.02); font-size: 13.5px; color: var(--ink-muted); transition: all .25s var(--quint); }
.showcase-tab:hover { color: var(--ink-2); border-color: var(--frost-strong); }
.showcase-tab.active { color: var(--ink); border-color: rgb(var(--accent-rgb)/0.5); background: rgb(var(--accent-rgb)/0.12); }

.demo-note-small { display: none; }

/* Driving a desktop workspace through a phone-sized iframe is a bad experience,
   and it would pull several megabytes of application over a mobile connection to
   get there. Below this size (or on a touch-first device) the section keeps its
   point by showing the still instead, and site.js never loads the app at all.
   The media query and the check in site.js must stay in step. */
@media (max-width: 900px), (pointer: coarse) {
  .showcase-tabs { display: none; }
  .showcase-frame iframe { display: none; }
  .showcase-hint { display: none; }
  .showcase-poster { cursor: default; }
  .showcase-poster .play { display: none; }
  .showcase-poster img { opacity: 0.9; }
  .showcase-poster.gone { display: grid; }
  .demo-note { display: none; }
  .demo-note-small { display: block; }
}

/* ---- 12. Feature sections (heading + copy on one side, diagram on the other) */
.feature { position: relative; padding: clamp(60px, 9vh, 116px) 0; }
.feature-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature.flip .feature-grid { grid-template-columns: 1.08fr 0.92fr; }
.feature.flip .feature-copy { order: 2; }
.feature.flip .feature-visual { order: 1; }
.feature-copy .eyebrow { margin-bottom: 18px; }
.feature-copy h2 { font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -0.028em; line-height: 1.1; }
.feature-copy p { margin-top: 18px; font-size: 16.5px; color: var(--ink-2); line-height: 1.7; max-width: 52ch; }
.feature-copy .fine-ref { margin-top: 20px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); line-height: 1.8; max-width: 46ch; }
.feature-copy .fine-ref b { color: var(--accent); font-weight: 500; }
.feature-visual {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-2xl);
  border: 1px solid var(--frost); overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(28,30,38,0.7), rgba(11,12,16,0.9));
  box-shadow: var(--shadow-float);
}
@media (max-width: 940px) {
  .feature-grid, .feature.flip .feature-grid { grid-template-columns: 1fr; gap: 30px; }
  .feature.flip .feature-copy { order: 1; }
  .feature.flip .feature-visual { order: 2; }
}
/* On a phone a 4:3 box is too short for the busier diagrams (the scheduled-work
   one stacks a card, three steps, the connections and a spend meter). Swap the
   ratio for a definite height so nothing gets clipped. */
@media (max-width: 720px) {
  .feature-visual { aspect-ratio: auto; height: 470px; }
}

/* proof line that sits under the verification feature */
.proof-row { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; }
.proof { display: flex; flex-direction: column; gap: 2px; }
.proof .num { font-size: 30px; font-weight: 680; letter-spacing: -0.03em; line-height: 1.1; }
.proof .num .u { font-size: 0.52em; color: var(--ink-muted); font-weight: 600; margin-left: 3px; }
.proof .lbl { font-size: 13px; color: var(--ink-muted); max-width: 22ch; line-height: 1.5; }
.proof.win .num { color: var(--jade); }

/* ---- 13. Under-the-hood strip ------------------------------------------- */
.hood { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--frost); border-radius: var(--r-2xl); overflow: hidden; background: rgba(255,255,255,0.02); }
.hood > div { padding: 24px 26px; border-right: 1px solid var(--frost); }
.hood > div:last-child { border-right: 0; }
.hood .ht { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.hood p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }
@media (max-width: 880px) {
  .hood { grid-template-columns: 1fr; }
  .hood > div { border-right: 0; border-bottom: 1px solid var(--frost); }
  .hood > div:last-child { border-bottom: 0; }
}

/* ---- 14. For teams ------------------------------------------------------ */
.teams-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 44px; }
.team-card { padding: 24px 26px; border-radius: var(--r-2xl); border: 1px solid var(--frost); background: rgba(255,255,255,0.02); }
.team-card h3 { font-size: 17.5px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.team-card h3 .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.team-card p { font-size: 14.5px; color: var(--ink-muted); line-height: 1.7; }
@media (max-width: 760px) { .teams-grid { grid-template-columns: 1fr; } }

.candid { margin-top: 20px; padding: 18px 22px; border-radius: var(--r-xl); border: 1px solid var(--frost); background: rgba(255,255,255,0.015); }
.candid p { font-size: 14px; color: var(--ink-muted); line-height: 1.7; margin: 0; }
.candid .lead { color: var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- 15. Pricing -------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.price-card { display: flex; flex-direction: column; padding: 26px 22px; border-radius: var(--r-2xl); border: 1px solid var(--frost); background: rgba(255,255,255,0.02); position: relative; }
.price-card.pop { border-color: rgb(var(--accent-rgb)/0.5); background: rgb(var(--accent-rgb)/0.06); box-shadow: var(--glow-sm); }
.price-card .plan { font-size: 15px; font-weight: 600; }
.price-card .badge { position: absolute; top: -11px; right: 18px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #0b0c10; }
.price-card .amt { margin-top: 14px; font-size: 40px; font-weight: 680; letter-spacing: -0.03em; }
.price-card .amt .per { font-size: 15px; color: var(--ink-muted); font-weight: 500; letter-spacing: 0; }
.price-card .credits { margin-top: 4px; color: var(--accent); font-size: 13.5px; font-family: var(--mono); }
.price-card .tagline { margin-top: 6px; color: var(--ink-muted); font-size: 13.5px; }
.price-card .feats { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; flex: 1; }
.price-card .feats li { display: flex; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.price-card .feats li.no { color: var(--ink-faint); }
.price-card .feats .ic { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--jade); }
.price-card .feats li.no .ic { color: var(--ink-faint); }
@media (max-width: 980px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }

/* ---- 16. Big closing CTA ----------------------------------------------- */
.cta-card { text-align: center; padding: clamp(48px, 8vw, 92px) 32px; border-radius: var(--r-3xl); border: 1px solid var(--frost); background: radial-gradient(120% 120% at 50% 0%, rgb(var(--accent-rgb)/0.10), rgba(28,30,38,0.4)); box-shadow: var(--shadow-float); position: relative; overflow: hidden; }
.cta-card .h-sec { max-width: 17ch; margin-inline: auto; }
.cta-card .lede { margin: 20px auto 0; text-align: center; }

/* ---- 17. Footer --------------------------------------------------------- */
.footer { border-top: 1px solid var(--frost); padding: 48px 0 60px; margin-top: 40px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.footer .col-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer a { color: var(--ink-muted); font-size: 14px; }
.footer a:hover { color: var(--ink); }
.footer .fine { color: var(--ink-faint); font-size: 12.5px; margin-top: 18px; max-width: 62ch; }

/* ---- 18. Chapter progress rail (left edge) ----------------------------- */
.chapter-rail { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px; }
.chapter-rail a { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 11px; font-family: var(--mono); }
.chapter-rail .tick { width: 22px; height: 2px; background: var(--frost); border-radius: 2px; transition: all .3s var(--quint); }
.chapter-rail a.active { color: var(--ink-2); }
.chapter-rail a.active .tick { width: 34px; background: var(--accent); box-shadow: var(--glow-sm); }
.chapter-rail .cl { opacity: 0; transform: translateX(-6px); transition: all .3s var(--quint); }
.chapter-rail a:hover .cl, .chapter-rail a.active .cl { opacity: 1; transform: none; }
@media (max-width: 1360px) { .chapter-rail { display: none; } }

/* ---- 19. Small screens --------------------------------------------------
   Touch targets first: several links here are only as tall as their text, which
   is fine for a cursor and awkward for a thumb. */
/* Tablets are touch devices too, so the thumb-sized targets key off the same
   breakpoint as the demo swap rather than a narrower phone-only one. */
@media (max-width: 900px), (pointer: coarse) {
  .footer a { padding: 11px 0; }
  .footer .col-links { gap: 8px 22px; }
  .brand { padding: 9px 0; }
  .muted a { display: inline-block; padding: 10px 0; }
  .nav-links a { padding: 12px 13px; }
  .idea, .team-card { padding: 22px 20px; }
  .card-pad { padding: 18px 20px; }
  .cta-card { padding-inline: 22px; }
}
@media (max-width: 480px) {
  .wrap { padding-inline: 20px; }
  .h-hero { font-size: clamp(36px, 10.5vw, 46px); }
  .lede { font-size: 16.5px; }
  .hero .lede { font-size: 17px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .section { padding: 62px 0; }
  .feature { padding: 52px 0; }
}

/* ---- 20. Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .map-node { opacity: 1 !important; }
  .map-link { stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
}

/* ---- 21. $OKCO holder tiers ------------------------------------------- */
.holder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.holder-card { border: 1px solid var(--frost); border-radius: var(--r-xl); background: rgba(255,255,255,0.02); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.holder-card.t4 { border-color: rgb(var(--accent-rgb)/0.55); background: rgb(var(--accent-rgb)/0.07); }
.holder-card .tier { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.holder-card .bal { font-size: 20px; font-weight: 700; }
.holder-card .bal small { color: var(--ink-muted); font-weight: 400; font-size: 12px; }
.holder-card .save { color: var(--jade); font-weight: 600; font-size: 14px; }
.holder-card ul { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 5px; }
.holder-card li { color: var(--ink-2); font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.holder-card li .ic { flex: none; width: 15px; height: 15px; color: var(--jade); margin-top: 1px; }
.holder-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.holder-chip { font-size: 12.5px; color: var(--ink-muted); border: 1px solid var(--frost); border-radius: 999px; padding: 6px 14px; }
.holder-cta { margin-top: 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }