@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo-var.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces-italic-var.woff2") format("woff2");
  font-style: italic; font-weight: 300 700; font-display: swap;
}

/* Palette: warm paper, leaf, soil, sun and sky by day; forest night and lamplight after dark. */
:root {
  --bg: #f6f0e4;             /* warm paper */
  --bg-2: #eee5d3;
  --surface: #fffbf2;
  --surface-2: #f3eadb;
  --ink: #1d2419;            /* deep leaf-black */
  --ink-muted: #474c3d;
  --ink-subtle: #625f4f;
  --rule: rgba(29, 36, 25, 0.13);
  --accent: #9c4220;         /* text-safe terracotta on paper */
  --accent-fill: #eeaa3c;    /* sun gold as a surface */
  --accent-bg: rgba(238, 170, 60, 0.17);
  --leaf: #3d7340;
  --leaf-bg: rgba(88, 140, 70, 0.14);
  --ok: #2f6f35;
  --open: #9a5a00;
  --code-bg: #1d2419;
  --code-ink: #f6f0e4;
  --bubble: #25402a;
  --bubble-ink: #fbf6ea;
  --answer-bg: #f1ebdb;
  --track: rgba(29, 36, 25, 0.08);
  --wait: #ddd2bc;
  --g-fill: rgba(238, 170, 60, 0.28);
  --shadow: 0 1px 2px rgba(60, 40, 10, 0.06), 0 18px 48px -24px rgba(60, 40, 10, 0.28);
  --night: #0f1d19;          /* the film's sky before dawn, for the manifesto band in both themes */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --radius: 22px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111710;           /* forest at night */
    --bg-2: #0c110b;
    --surface: #182017;
    --surface-2: #1f291d;
    --ink: #f3ecdc;
    --ink-muted: #cfc8b5;
    --ink-subtle: #a8a490;
    --rule: rgba(243, 236, 220, 0.13);
    --accent: #f0b35a;       /* lamplight */
    --accent-fill: #eeaa3c;
    --accent-bg: rgba(238, 170, 60, 0.13);
    --leaf: #9ccf7a;
    --leaf-bg: rgba(140, 192, 99, 0.13);
    --ok: #8fd08c;
    --open: #ffc15a;
    --code-bg: #f3ecdc;
    --code-ink: #111710;
    --bubble: #e3ecd3;
    --bubble-ink: #1a2616;
    --answer-bg: #1d261b;
    --track: rgba(243, 236, 220, 0.08);
    --wait: #35402f;
    --g-fill: rgba(238, 170, 60, 0.2);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 48px -24px rgba(0, 0, 0, 0.7);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .8 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--grain), var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  font-size: clamp(15.5px, 0.6vw + 12.5px, 18px);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--accent-fill); outline-offset: 3px; border-radius: 6px; }
code, pre { font-family: var(--mono); }
code { font-size: 0.88em; background: var(--accent-bg); padding: 0.08em 0.38em; border-radius: 5px; }

/* ---------- hero: always a night-to-day film, so its text is always light ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background: #0f1a14;
  color: #fff;
}
.hero-media, .hero-scrim { position: absolute; inset: 0; z-index: 0; }
/* Copy sits on its own layer above the film. With the film at z-index -1, iOS Safari
   painted the playing <video> over plain text (nav, headline, lede) and left only the
   already-composited pieces (eyebrow, buttons) on top. */
.topbar, .hero-copy, .film-caption { position: relative; z-index: 1; transform: translateZ(0); }
.hero-media picture, .hero-poster, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
}
.hero-video { opacity: 0; transition: opacity 0.6s ease; }
.hero-video.is-playing { opacity: 1; }
/* The film keeps its left 45% for the headline; the scrim makes that zone a quiet, dark field. */
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(10, 18, 13, 0.88) 0%, rgba(10, 18, 13, 0.74) 30%, rgba(10, 18, 13, 0.26) 50%, rgba(10, 18, 13, 0) 60%),
    linear-gradient(0deg, rgba(10, 18, 13, 0.55) 0%, rgba(10, 18, 13, 0) 16%);
}

.topbar {
  display: flex; align-items: center; justify-content: flex-start; gap: clamp(20px, 4vw, 48px);
  padding: 18px clamp(16px, 4vw, 56px);
  width: 100%;
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.brand span { font: 800 22px/1 var(--sans); font-stretch: 115%; letter-spacing: 0.08em; }
.topbar-links { display: flex; gap: clamp(14px, 2.4vw, 30px); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }
.topbar-links a { text-decoration: none; color: rgba(255, 255, 255, 0.78); }
.topbar-links a:hover { color: #fff; }

.hero-copy {
  padding: clamp(24px, 8vh, 96px) clamp(16px, 4vw, 56px) 40px;
  max-width: 740px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 13px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 22px; padding: 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #f6c14f; box-shadow: 0 0 0 2px #1d2419; }
h1 {
  font: 800 clamp(50px, 7.2vw, 108px)/0.94 var(--sans); font-stretch: 112%;
  letter-spacing: -0.035em; margin: 0 0 24px; text-wrap: balance;
}
h1 em { font: italic 560 1.04em/1 var(--serif); letter-spacing: -0.02em; color: #f6c14f; padding-right: 0.04em; }
.lede { font-size: clamp(17px, 0.5vw + 15px, 20px); line-height: 1.5; color: rgba(255, 255, 255, 0.9); margin: 0 0 30px; max-width: 32em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 14px;
  font: 700 16px/1 var(--sans); letter-spacing: 0.01em; text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-fill); color: #1d1a0e; }
.btn-primary:hover { background: #f5bd5c; }
.btn-ghost { border: 2px solid currentColor; }
.hero .btn-ghost { color: #fff; background: rgba(10, 18, 13, 0.35); }
.hero .btn-ghost:hover { background: #fff8ea; color: #1d2419; border-color: #fff8ea; }
.apk-note { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.66); max-width: 40em; }

.film-caption { margin: auto 0 0; padding: 0 clamp(16px, 4vw, 56px) 22px; font-size: 13.5px; font-weight: 500; }
.film-caption a { color: rgba(255, 255, 255, 0.72); }

@media (max-aspect-ratio: 4/5) {
  /* Phone: the film's top half is open daytime sky, too bright to set type on.
     So the copy gets its own night band and the film follows below it, cropped
     to the phone and the place label; nothing overlaps at any screen height. */
  .hero { min-height: 0; background: var(--grain), #0f1a14; }
  .topbar { order: 1; justify-content: space-between; padding-top: 14px; padding-bottom: 6px; }
  .hero-copy { order: 2; padding-top: 8px; padding-bottom: 26px; }
  .hero-media { order: 3; position: relative; inset: auto; aspect-ratio: 1 / 1; margin-top: -20px; }
  .hero-media picture, .hero-poster, .hero-video { object-position: 50% 100%; }
  .hero-media::after { content: ""; position: absolute; inset: 0 0 auto; height: 24%; background: linear-gradient(180deg, #0f1a14 0%, rgba(15, 26, 20, 0.55) 40%, rgba(15, 26, 20, 0) 100%); }
  .hero-scrim { display: none; }
  .topbar-links a:not(:last-child) { display: none; }
  .eyebrow { margin-bottom: 14px; font-size: 10.5px; letter-spacing: 0.08em; padding: 7px 11px; }
  h1 { margin-bottom: 14px; font-size: clamp(42px, 12vw, 64px); }
  .lede { margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
  .hero .long { display: none; }
  .hero .ctas { flex-wrap: nowrap; gap: 10px; }
  .hero .btn { flex: 1 1 0; padding: 0 12px; min-height: 50px; font-size: 15px; }
  .apk-note, .film-caption { display: none; }
}
@media (max-width: 380px) { .hero .btn svg { display: none; } }

/* ---------- lower page: type scale = display (h2) / title (h3, 20px) / body (17px) / label (12.5px caps) ---------- */
.section { padding: clamp(84px, 11vw, 152px) 0; }
.section + .section { border-top: 1px solid var(--rule); position: relative; }
/* a garland of leaves on the line between sections */
.section + .section::before { content: ""; position: absolute; left: 50%; top: 0; width: min(640px, 86vw); aspect-ratio: 1600 / 150; transform: translate(-50%, -47%);
  background: url("/nature/divider.webp") center / contain no-repeat; pointer-events: none; }
@media (prefers-color-scheme: dark) { .section + .section::before { background-image: url("/nature/divider-night.webp"); } }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 56px; align-items: start; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .section-lede { padding-top: 0.5em; }
.section-head .kicker { grid-column: 1 / -1; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 750 12.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.kicker::before { content: ""; width: 18px; height: 12px; background: currentColor; -webkit-mask: var(--leaf-mask) center / contain no-repeat; mask: var(--leaf-mask) center / contain no-repeat; }
:root { --leaf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8C5 1 15 0 23 3c-2 8-12 12-22 5zm0 0c7-1 13-3 18-4' fill='black' stroke='black' stroke-width='.5'/%3E%3C/svg%3E"); }
h2 em { font: italic 560 1.04em/1 var(--serif); letter-spacing: -0.02em; color: var(--accent); }
h2 {
  font: 800 clamp(36px, 4.8vw, 66px)/0.98 var(--sans); font-stretch: 108%;
  letter-spacing: -0.035em; margin: 0; text-wrap: balance;
}
h3 { font: 750 20px/1.25 var(--sans); letter-spacing: -0.01em; margin: 0 0 8px; text-wrap: balance; }
.section-lede { margin: 0; color: var(--ink-muted); text-wrap: pretty; }
p { text-wrap: pretty; }

/* reveal on scroll: fast and small, like the film's cuts */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- 1. how it works ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 14px 26px; box-shadow: var(--shadow); }
.step > :not(.vis) { margin-left: 12px; margin-right: 12px; }
.step p { color: var(--ink-muted); font-size: 16px; margin-bottom: 0; }
.step-n { margin: 22px 0 6px; font: 800 13px/1 var(--sans); letter-spacing: 0.14em; color: var(--accent); }
.vis { height: 176px; border-radius: 14px; background: var(--surface-2); padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 10px; overflow: hidden; }
.dl-row { display: flex; justify-content: space-between; font: 600 13px/1 var(--sans); color: var(--ink-muted); }
.dl-row span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-subtle); }
.dl-bar { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; margin-bottom: 8px; }
.dl-bar i { display: block; height: 100%; width: 72%; border-radius: 5px; background: var(--accent-fill); transition: width 1.4s var(--ease) 0.3s; }
.dl-done i { width: 100%; background: var(--ink-subtle); }
.js .step:not(.in) .dl-bar i { width: 4%; }
.qs { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--accent-fill); color: #1d1a0e; font: 700 15px/1 var(--sans); }
.qs-ico svg { width: 20px; height: 20px; display: block; }
.qs-label { flex: 1; }
.switch { width: 40px; height: 24px; border-radius: 12px; background: rgba(29, 26, 14, 0.85); position: relative; }
.switch i { position: absolute; top: 3px; left: 19px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-fill); transition: left 0.4s var(--ease) 0.4s; }
.js .step:not(.in) .switch i { left: 3px; }
.qs-off { background: var(--surface); color: var(--ink-muted); border: 1px solid var(--rule); }
.qs-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.qs-bars i { width: 3.5px; border: 1.4px solid currentColor; border-radius: 1px; }
.qs-bars i:nth-child(1) { height: 6px; } .qs-bars i:nth-child(2) { height: 9px; } .qs-bars i:nth-child(3) { height: 12px; } .qs-bars i:nth-child(4) { height: 15px; }
.vis-answer { gap: 12px; align-items: stretch; }
.vis .mini-q { align-self: flex-end; margin: 0; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--bubble); color: var(--bubble-ink); font: 650 14px/1.2 var(--sans); }
.vis .mini-a { margin: 0; display: grid; gap: 7px; }
.mini-a i { display: block; height: 8px; border-radius: 4px; background: var(--wait); }
.mini-a .short { width: 58%; }
.vis .mini-src { margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent-fill) 55%, transparent); font: 650 13px/1 var(--sans); }
.mini-src svg, .chip svg { width: 16px; height: 16px; flex: none; }

.facts { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.facts li { border-top: 2px solid var(--ink); padding-top: 16px; display: grid; gap: 6px; }
.facts strong { font: 750 18px/1.25 var(--sans); }
.facts span { color: var(--ink-muted); font-size: 15px; line-height: 1.5; }

/* ---- 2. where it matters ---- */
.section-places { background: var(--grain), var(--bg-2); }
.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.place-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.6s var(--ease); }
.place-card picture { display: block; overflow: hidden; }
.place-card img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; transition: transform 0.6s var(--ease); }
.place-card:hover { transform: translateY(-4px); }
.place-card:hover img { transform: scale(1.04); }
.place-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 0 20px 22px; margin-top: -22px; }
.place-body::before { content: ""; position: absolute; inset: 0 0 auto; height: 22px; background: var(--surface); border-radius: 18px 18px 0 0; }
.place-tag { position: relative; align-self: flex-start; margin: -8px 0 0; padding: 9px 14px 8px 12px; border-radius: 999px; background: var(--c); color: #1d1a0e; font: 800 12.5px/1 var(--sans); font-stretch: 92%; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.place-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bubble { position: relative; margin: 0; align-self: flex-end; max-width: 94%; padding: 12px 16px; border-radius: 18px 18px 5px 18px; background: var(--bubble); color: var(--bubble-ink); font: 650 16.5px/1.35 var(--sans); }
.answer { margin: 0; padding: 12px 14px 13px; border-radius: 5px 16px 16px 16px; background: var(--answer-bg); color: var(--ink-muted); font-size: 15.5px; line-height: 1.5; max-width: 96%; }
.answer-who { display: block; margin-bottom: 4px; font: 750 11.5px/1 var(--sans); letter-spacing: 0.14em; color: var(--leaf); }
.chips { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-think { background: var(--leaf-bg) !important; border-color: color-mix(in srgb, var(--leaf) 45%, transparent) !important; }
.swipe-hint { display: none; margin: -8px 0 12px; font: 700 12.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-subtle); }
.swipe-hint span { display: inline-block; margin-left: 4px; }
.places-note { margin: 28px 0 0; font-size: 14.5px; color: var(--ink-subtle); max-width: 46em; }
.chip { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 11px; font: 650 14px/1.25 var(--sans); background: color-mix(in srgb, var(--c) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }

/* ---- 3. the receipt ---- */
.data-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 36px); }
.data-card + .data-card { margin-top: 20px; }
.data-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; margin-bottom: 28px; }
.data-head h3 { margin: 0; font-size: clamp(20px, 1.6vw, 24px); }
.data-eyebrow { margin: 0 0 8px; font: 750 12.5px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.data-meta { margin: 0; font-size: 14px; color: var(--ink-subtle); }
.timeline { margin-bottom: 32px; }
.tl-bar { display: flex; gap: 3px; height: 60px; }
.tl-bar span { flex: 0 0 var(--w); display: flex; align-items: center; padding: 0 16px; min-width: 0; border-radius: 6px; transition: flex-basis 1.1s var(--ease) 0.2s; }
.tl-bar em { font: 650 14.5px/1.2 var(--sans); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-wait { background: var(--wait); color: var(--ink); border-radius: 12px 6px 6px 12px !important; }
.tl-gen { background: var(--accent-fill); color: #1d1a0e; border-radius: 6px 12px 12px 6px !important; }
.js .data-card:not(.in) .tl-wait { flex-basis: 0%; }
.js .data-card:not(.in) .tl-gen { flex-basis: 0%; }
.tl-axis { position: relative; height: 26px; margin-top: 8px; font: 650 13px/1 var(--sans); color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.tl-axis span { position: absolute; top: 8px; white-space: nowrap; transform: translateX(-50%); }
.tl-axis span:first-child { left: 0; transform: none; }
.tl-axis span:last-child { transform: translateX(-100%); }
.tl-axis span::before { content: ""; position: absolute; top: -8px; left: 50%; width: 1px; height: 6px; background: var(--ink-subtle); }
.tl-axis span:first-child::before { left: 0; } .tl-axis span:last-child::before { left: auto; right: 0; }
.tl-legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 13.5px/1.3 var(--sans); color: var(--ink-muted); }
.tl-legend li { display: inline-flex; align-items: center; gap: 8px; }
.tl-legend i { width: 12px; height: 12px; border-radius: 3px; }
.k-wait { background: var(--wait); } .k-gen { background: var(--accent-fill); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule); }
.stats div { padding: 22px 20px 0 0; }
.stats div:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--rule); }
.stats div:nth-child(n + 4) { border-top: 1px solid var(--rule); margin-top: 22px; }
.stats dt { white-space: nowrap; font: 650 12.5px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 10px; }
.stats dd { margin: 0; white-space: nowrap; font: 800 clamp(34px, 4vw, 56px)/1 var(--sans); font-stretch: 105%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stats dd small { font: 600 14px var(--sans); letter-spacing: 0; color: var(--ink-subtle); }

.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; align-items: center; padding: 14px 10px; margin: 0 -10px; border-radius: 12px; transition: background-color 0.2s ease; }
.bars li:hover { background: var(--surface-2); }
.bars li + li { border-top: 1px solid var(--rule); }
.bar-name { margin: 0; font: 750 16px/1.25 var(--sans); grid-row: span 2; }
.bar-name span { display: block; font: 600 12.5px/1.4 var(--sans); color: var(--accent); }
.bar { position: relative; display: flex; align-items: center; gap: 12px; height: 30px; }
.bar::after { content: ""; position: absolute; left: 82%; top: -14px; bottom: -34px; border-left: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.bar i { height: 22px; width: calc(var(--v) / var(--max) * 82%); border-radius: 3px 4px 4px 3px; background: var(--accent-fill); transition: width 1s var(--ease); }
.js .data-card:not(.in) .bar i { width: 0; }
.bars li:nth-child(1) .bar i { transition-delay: 0.1s; } .bars li:nth-child(2) .bar i { transition-delay: 0.18s; } .bars li:nth-child(3) .bar i { transition-delay: 0.26s; } .bars li:nth-child(4) .bar i { transition-delay: 0.34s; }
.bar b { font: 800 17px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-fail .bar b { font-weight: 650; color: var(--accent); }
.bar-note { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-muted); max-width: 46em; }
.bars li:first-child .bar::before { content: "120 s timeout"; position: absolute; left: 82%; top: -30px; transform: translateX(-50%); font: 650 12px/1 var(--sans); color: var(--ink-subtle); white-space: nowrap; }
.bars li:first-child { margin-top: 18px; }
.bars li:last-child .bar::after { bottom: 4px; }
.as-table { margin-top: 20px; }
.as-table summary { cursor: pointer; display: inline-flex; font: 650 14px/1 var(--sans); color: var(--accent); padding: 8px 0; }
.table-scroll { overflow-x: auto; margin-top: 10px; }
table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-top: 1px solid var(--rule); vertical-align: top; }
thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-subtle); border-top: 0; }
td { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.data-foot { margin: 20px 0 0; font-size: 14px; color: var(--ink-subtle); }

.provenance { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; align-items: start; }
.provenance > p { margin: 0; color: var(--ink-muted); font-size: 15px; }
.provenance strong { color: var(--ink); }
.run-it { display: grid; gap: 14px; }
.run-it p { margin: 0; font: 700 20px/1.35 var(--sans); letter-spacing: -0.01em; }
.run-it pre { margin: 0; padding: 14px 18px; border-radius: 12px; background: var(--code-bg); color: var(--code-ink); font-size: 14px; overflow-x: auto; max-width: 100%; justify-self: start; }
.run-it pre code { background: none; padding: 0; }

/* ---- 4. manifesto: the film's night, in both themes ---- */
.manifesto {
  position: relative; overflow: hidden; color: #fff8ea; isolation: isolate;
  padding: clamp(96px, 14vw, 200px) 0;
  background:
    radial-gradient(1.2px 1.2px at 20% 30%, rgba(255, 248, 226, 0.6), transparent),
    radial-gradient(1px 1px at 70% 22%, rgba(255, 248, 226, 0.5), transparent),
    radial-gradient(1.4px 1.4px at 45% 15%, rgba(255, 248, 226, 0.55), transparent),
    radial-gradient(1px 1px at 88% 12%, rgba(255, 248, 226, 0.45), transparent),
    var(--night);
}
/* a moonlit garden frames the words: leaves hang in from the top corners, grass along the foot (the film's foliage kit) */
.manifesto::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    url("/nature/corner-r-night.webp") right top / min(44vw, 620px) auto no-repeat,
    url("/nature/corner-l-night.webp") left top / min(26vw, 360px) auto no-repeat,
    url("/nature/meadow-night.webp") center bottom / auto clamp(56px, 7vw, 96px) repeat-x;
}
.m-line { margin: 0; font: 800 clamp(46px, 8.4vw, 132px)/0.95 var(--sans); font-stretch: 110%; letter-spacing: -0.04em; text-wrap: balance; }
.m-line + .m-line { margin-top: 0.12em; color: #b9dca0; }
.m-line em { font: italic 560 1.04em/1 var(--serif); letter-spacing: -0.02em; color: #f6c14f; }
.m-line.m-small { margin-top: clamp(32px, 4vw, 48px) !important; max-width: 34em; font: 450 clamp(18px, 1.4vw, 22px)/1.5 var(--sans); letter-spacing: 0; color: rgba(255, 248, 234, 0.82); }
.m-cite { margin: 20px 0 0; font: 650 14px/1 var(--sans); }
.m-cite a { color: rgba(255, 248, 234, 0.75); }

/* ---- 5. honest + open ---- */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.strip-col { padding: 24px 32px 0 0; display: grid; gap: 12px; align-content: start; }
.strip-col + .strip-col { padding-left: 32px; border-left: 1px solid var(--rule); }
.strip-col p { margin: 0; color: var(--ink-muted); font-size: 16px; }
.strip-col strong { color: var(--ink); }
.strip-label { font: 750 12.5px/1 var(--sans) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink) !important; }
.text-link { font: 650 15px/1.3 var(--sans); color: var(--accent); }
.open-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--ink-muted); font-size: 16px; }
.open-list li { position: relative; padding-left: 22px; }
.open-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--open); }

/* ---- 6. roadmap: a path from roots to grove ---- */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; }
/* the ground line the four marks grow from */
.path::before { content: ""; position: absolute; left: 28px; right: 28px; top: 66px; height: 2px; background: repeating-linear-gradient(90deg, var(--rule) 0 10px, transparent 10px 18px); }
.phase { position: relative; display: flex; flex-direction: column; }
.phase-mark { position: relative; z-index: 1; width: 72px; height: 72px; margin-bottom: 18px; padding: 10px; border-radius: 50%; background: var(--surface); border: 1px solid var(--rule); color: var(--leaf); box-shadow: var(--shadow); }
.phase-mark svg { display: block; width: 100%; height: 100%; }
.phase-now .phase-mark { background: var(--accent-fill); border-color: transparent; color: #1d2419; --g-fill: rgba(255, 250, 235, 0.55); box-shadow: 0 0 0 6px var(--accent-bg), var(--shadow); }
.phase-when { margin: 0 0 6px; font: 750 12.5px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-subtle); }
.phase-when span { color: var(--accent); }
.phase-now .phase-when span { color: var(--leaf); }
.phase h3 { font: italic 560 30px/1.05 var(--serif); letter-spacing: -0.01em; margin: 0 0 16px; }

/* ---- 7. final call ---- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(84px, 11vw, 144px) 0; background: var(--grain), var(--bg-2); text-align: center; border-top: 1px solid var(--rule); }
/* the pig sits in a spray of leaves and flowers, open at the top */
.cta-band::before { content: ""; position: absolute; z-index: -1; left: 50%; top: calc(clamp(84px, 11vw, 144px) + 168px); width: min(560px, 118vw); aspect-ratio: 1000 / 520; transform: translate(-50%, -100%);
  background: url("/nature/wreath.webp") center bottom / contain no-repeat; pointer-events: none; }
.cta-inner img { width: 160px; height: 160px; margin: 0 auto 8px; transition: transform 0.5s var(--ease); }
.cta-inner:hover img { transform: rotate(-4deg) translateY(-4px); }
.cta-inner h2 { max-width: 15em; margin: 0 auto 36px; }
.cta-band .ctas { justify-content: center; }
.cta-band .btn { min-width: 210px; }
.cta-band .btn-ghost { color: var(--ink); }
.cta-band .btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary { box-shadow: 0 10px 24px -12px rgba(200, 130, 30, 0.7); }
.btn-primary:hover { transform: translateY(-2px); }
.cta-note { margin: 22px 0 0; font-size: 14px; color: var(--ink-subtle); }

.footer { border-top: 1px solid var(--rule); padding: 26px 0 36px; font-size: 14px; color: var(--ink-subtle); background: var(--grain), var(--bg-2); }
.footer-row { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.footer p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { text-decoration: none; } .footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-subtle); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.footer-social a:hover { color: var(--ink); border-color: var(--ink-subtle); }
.social-discord { padding: 7px 14px 7px 11px; font-weight: 600; font-size: 13px; }
.social-icon { width: 34px; height: 34px; justify-content: center; }
.footer-social svg { flex: none; }
.sopa { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; }
.sopa img { width: 40px; height: 40px; image-rendering: pixelated; transition: transform 0.3s var(--ease); }
.sopa:hover img { transform: rotate(-8deg); }

/* ---- responsive ---- */
@media (max-width: 1040px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .path::before { display: none; }
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .section-head, .provenance { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip-col, .strip-col + .strip-col { padding: 22px 0; border-left: 0; }
  .strip-col + .strip-col { border-top: 1px solid var(--rule); }
  .bars li { grid-template-columns: minmax(0, 1fr); }
  .bar-name { grid-row: auto; margin-bottom: 8px; }
  .bar-name span { display: inline; margin-left: 6px; }
}
@media (max-width: 600px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  /* six places become one swipeable row instead of six screens of scrolling */
  .places { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 calc(-1 * clamp(16px, 4vw, 56px)); padding: 6px clamp(16px, 4vw, 56px) 20px; scroll-padding: 0 clamp(16px, 4vw, 56px); scrollbar-width: none; }
  .places::-webkit-scrollbar { display: none; }
  .place-card { flex: 0 0 86%; scroll-snap-align: start; }
  .swipe-hint { display: block; }
  .js .places .reveal { opacity: 1; transform: none; }
  /* the path turns into a stem you scroll down */
  .path { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding-left: 0; }
  .path::before { display: block; left: 31px; right: auto; top: 40px; bottom: 40px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--rule) 0 10px, transparent 10px 18px); }
  .phase { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; }
  .phase-mark { width: 64px; height: 64px; grid-row: span 3; margin: 0; }
  .phase-sum { grid-column: 2; }
  .phase h3 { font-size: 27px; margin-bottom: 12px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(n) { border-left: 0; padding-left: 0; border-top: 0; margin-top: 0; }
  .stats dd { font-size: 36px; }
  .stats div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule); }
  .stats div:nth-child(n + 3) { border-top: 1px solid var(--rule); margin-top: 18px; }
  .tl-bar { height: 48px; }
  .tl-bar span { padding: 0 10px; }
  .tl-bar em { display: none; }
  .cta-band .btn { min-width: 0; flex: 1 1 100%; }
  .place-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .dl-bar i, .switch i, .tl-bar span, .bar i, .place-card, .place-card img, .cta-inner img { transition: none !important; }
  .js .step:not(.in) .dl-bar i { width: 72%; } .js .step:not(.in) .dl-done i { width: 100%; }
  .js .step:not(.in) .switch i { left: 19px; }
  .js .data-card:not(.in) .tl-wait { flex-basis: 60.4%; } .js .data-card:not(.in) .tl-gen { flex-basis: 39.6%; }
  .js .data-card:not(.in) .bar i { width: calc(var(--v) / var(--max) * 82%); }
  .place-card:hover, .place-card:hover img, .btn-primary:hover { transform: none; }
}

/* ---- 404 ---- */
.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 0; text-align: center; background: var(--grain), var(--bg); }
.lost-inner { display: grid; justify-items: center; gap: 18px; }
.lost img { width: 140px; height: 140px; }
.lost h1 { font-size: clamp(40px, 6vw, 76px); margin: 0; color: var(--ink); }
.lost h1 em { color: var(--accent); }
.lost .ctas { justify-content: center; margin-top: 8px; }
.lost .btn-ghost { color: var(--ink); }

/* ---- home: roadmap summary ---- */
.phase-sum { margin: 0; flex: 1; border-top: 2px solid var(--ink); padding-top: 14px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.5; }
.phase:not(.phase-now) .phase-sum { border-top-style: dashed; border-top-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.phase-sum strong { color: var(--ink); }
.roadmap-more { margin: clamp(36px, 4vw, 52px) 0 0; }
.btn-line { color: var(--ink); border: 2px solid currentColor; }
.btn-line:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-line .arrow { transition: transform 0.2s var(--ease); }
.btn-line:hover .arrow { transform: translateX(4px); }

/* ---------- roadmap page ---------- */
/* the header is the film's night before dawn, in both themes, so the nav reads the same as on the home hero */
.rm-top {
  position: relative; overflow: hidden; isolation: isolate; color: #fff8ea;
  padding-bottom: clamp(48px, 7vw, 96px);
  background:
    radial-gradient(1.2px 1.2px at 22% 26%, rgba(255, 248, 226, 0.6), transparent),
    radial-gradient(1px 1px at 64% 18%, rgba(255, 248, 226, 0.5), transparent),
    radial-gradient(1.4px 1.4px at 46% 10%, rgba(255, 248, 226, 0.55), transparent),
    radial-gradient(1px 1px at 86% 30%, rgba(255, 248, 226, 0.45), transparent),
    radial-gradient(1px 1px at 8% 58%, rgba(255, 248, 226, 0.4), transparent),
    var(--night);
}
.rm-top::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    url("/nature/corner-r-night.webp") right top / min(40vw, 560px) auto no-repeat,
    url("/nature/meadow-night.webp") center bottom / auto 56px repeat-x;
}
@media (max-width: 640px) {
  .rm-top::before { background-position: right -30px top 64px, center bottom; background-size: 150px auto, auto 34px; }
  .rm-top { padding-bottom: 64px; }
}
.rm-top .topbar { max-width: 1200px; margin: 0 auto; }
.topbar-links a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: #f6c14f; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.rm-intro { padding-top: clamp(28px, 7vh, 84px); padding-bottom: clamp(44px, 6vw, 80px); }
.rm-intro h1 { max-width: 11.5em; margin-bottom: 26px; }
.rm-lede { margin: 0 0 16px; max-width: 34em; font-size: clamp(17px, 0.5vw + 15px, 21px); line-height: 1.5; color: rgba(255, 248, 234, 0.88); }
.rm-note { margin: 0; display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: rgba(255, 248, 234, 0.64); }
.rm-note::before { content: ""; flex: none; margin-top: 0.72em; width: 26px; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); }

/* four stages on one ground line; the solid part is what has grown so far */
.growth { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.growth::before, .growth::after { content: ""; position: absolute; top: 36px; height: 2px; }
.growth::before { left: 12.5%; right: 12.5%; background: repeating-linear-gradient(90deg, rgba(255, 248, 234, 0.3) 0 10px, transparent 10px 18px); }
.growth::after { left: 12.5%; width: 12.5%; background: linear-gradient(90deg, #f6c14f, rgba(246, 193, 79, 0)); }
.growth a { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 0 4px; text-decoration: none; color: inherit; border-radius: 16px; }
.g-mark { position: relative; z-index: 1; display: block; width: 72px; height: 72px; padding: 11px; margin-bottom: 12px; border-radius: 50%; background: #15261f; border: 1px solid rgba(255, 248, 234, 0.2); color: #b9dca0; --g-fill: rgba(238, 170, 60, 0.22); transition: transform 0.3s var(--ease), border-color 0.3s ease; }
.g-mark svg { display: block; width: 100%; height: 100%; }
.growth a:hover .g-mark { transform: translateY(-3px); border-color: rgba(255, 248, 234, 0.5); }
.g-now .g-mark { background: #eeaa3c; border-color: transparent; color: #1d2419; --g-fill: rgba(255, 250, 235, 0.55); box-shadow: 0 0 0 6px rgba(238, 170, 60, 0.18); }
.g-name { font: italic 560 clamp(18px, 1.8vw, 26px)/1.1 var(--serif); }
.g-when { font: 750 12px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 248, 234, 0.62); }
.g-now .g-when { color: #b9dca0; }

/* the phases: one stem you walk down, solid where it has grown, dashed ahead */
.rm-main { padding-top: clamp(72px, 9vw, 128px); }
.stages { list-style: none; margin: 0; padding: 0; }
.stage { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: clamp(20px, 3.4vw, 48px); padding-bottom: clamp(72px, 9vw, 128px); scroll-margin-top: 24px; }
.stage::before { content: ""; position: absolute; left: 43px; top: 96px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--ink) 26%, transparent) 0 10px, transparent 10px 18px); }
.stage-now::before { background: linear-gradient(180deg, var(--leaf) 70%, color-mix(in srgb, var(--leaf) 20%, transparent)); border-radius: 2px; }
.stage-last::before { -webkit-mask: linear-gradient(#000 30%, transparent 90%); mask: linear-gradient(#000 30%, transparent 90%); }
.stage-mark { position: sticky; top: 24px; display: block; width: 88px; height: 88px; padding: 14px; border-radius: 50%; background: var(--surface); border: 1px solid var(--rule); color: var(--leaf); box-shadow: var(--shadow); }
.stage-mark svg { display: block; width: 100%; height: 100%; }
.stage-now .stage-mark { background: var(--accent-fill); border-color: transparent; color: #1d2419; --g-fill: rgba(255, 250, 235, 0.55); box-shadow: 0 0 0 7px var(--accent-bg), var(--shadow); }
.stage-later .stage-mark { background: var(--bg); box-shadow: none; border-style: dashed; border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.stage-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 10px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 36px); padding-top: 8px; }
.stage-head .phase-when { grid-column: 1 / -1; margin: 0; }
.stage-head h2 { font: italic 560 clamp(46px, 6.2vw, 90px)/0.95 var(--serif); letter-spacing: -0.02em; padding-bottom: 0.06em; }
.stage-lede { margin: 0; padding-bottom: 0.5em; color: var(--ink-muted); max-width: 34em; }
.stage-lede a { color: var(--accent); }

.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.item { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); }
.stage-now .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-now .item { box-shadow: var(--shadow); }
.stage-later .item { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--ink) 24%, transparent); }
.item h3 { margin: 0; font-size: 19px; }
.item p { margin: 0; color: var(--ink-muted); font-size: 15.5px; line-height: 1.5; }
.item .item-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 6px; border-radius: 999px; font: 750 11.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.item-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.item .tag-done { background: var(--leaf-bg); color: var(--ok); }
.item .tag-wip { background: var(--accent-bg); color: var(--open); }
.tag-wip::before { animation: wip 1.8s ease-in-out infinite; }
@keyframes wip { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); } }
.item .tag-next { background: var(--accent-bg); color: var(--accent); }
.item .tag-later, .item .tag-explore { background: var(--track); color: var(--ink-subtle); }
.tag-explore::before { background: transparent; border: 1.6px solid currentColor; }
.item-proof { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font: 650 14.5px/1.3 var(--sans); color: var(--accent); }
.item-proof::after { content: "→"; transition: transform 0.2s var(--ease); text-decoration: none; }
.item-proof:hover::after { transform: translateX(3px); }

.page-roadmap .cta-inner h2 { margin-bottom: 18px; }
.cta-lede { margin: 0 auto 32px; max-width: 34em; color: var(--ink-muted); }

@media (max-width: 860px) {
  .stage-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .growth::before, .growth::after { top: 28px; }
  .g-mark { width: 56px; height: 56px; padding: 8px; margin-bottom: 8px; }
  .g-now .g-mark { box-shadow: 0 0 0 4px rgba(238, 170, 60, 0.18); }
  .g-when { font-size: 10px; letter-spacing: 0.1em; }
  .stage { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .stage::before { left: 25px; top: 62px; }
  .stage-mark { width: 52px; height: 52px; padding: 8px; top: 16px; }
  .stage-now .stage-mark { box-shadow: 0 0 0 5px var(--accent-bg), var(--shadow); }
  .stage-head { padding-top: 0; }
  .stage-head h2 { font-size: 46px; }
  .item { padding: 18px 18px 20px; }
  .stage-now .items { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tag-wip::before { animation: none; }
  .g-mark, .item-proof::after, .btn-line .arrow { transition: none; }
  .growth a:hover .g-mark, .item-proof:hover::after, .btn-line:hover .arrow { transform: none; }
}