/* ════════════════════════════════════════════════════════════════════
   Driades landing page
   Palette matches the docs site (docs/html) and the app shell.
   Enhanced for: parallax depth, smartphone-first, ambient visuals.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --bg:          #0c1116;
  --bg-alt:      #10151a;
  --panel:       #182028;
  --panel-2:     #1d2731;
  --border:      #2a3540;
  --border-soft: #212b35;
  --text:        #e5ecf2;
  --muted:       #9fb0bf;
  --faint:       #6c7f8e;
  --accent:      #4ade80;
  --accent-dim:  #2fa25c;
  --accent-ink:  #08130c;
  --blue:        #60a5fa;
  --warn:        #fbbf24;
  --danger:      #f87171;

  --radius:      12px;
  --radius-sm:   8px;
  --maxw:        1120px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3.8vw, 2.3rem); font-weight: 650; }
h3 { font-size: 1.2rem; font-weight: 620; }
h4 { font-size: 1rem;   font-weight: 620; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  background: #0a0f14; border: 1px solid var(--border-soft);
  padding: 1px 5px; border-radius: 5px; font-size: .88em;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

.muted { color: var(--muted); }
.small { font-size: .875rem; }

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

/* ═══════════════════════════════════════ scroll progress bar ══ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  height: 2.5px; background: transparent; pointer-events: none;
}
.scroll-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(74,222,128,.35);
  will-change: width;
}

/* ═══════════════════════════════════════════════ ambient background ══ */
.ambient-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.ambient-layer {
  position: absolute; inset: -20%;
  will-change: transform;
}
.ambient-far {
  background:
    radial-gradient(ellipse 800px 500px at 15% 20%, rgba(74,222,128,.045), transparent 70%),
    radial-gradient(ellipse 600px 400px at 85% 70%, rgba(96,165,250,.035), transparent 70%);
  animation: ambientDrift 60s ease-in-out infinite alternate;
}
.ambient-mid {
  background:
    radial-gradient(ellipse 500px 300px at 70% 30%, rgba(74,222,128,.03), transparent 70%),
    radial-gradient(ellipse 400px 250px at 20% 80%, rgba(96,165,250,.022), transparent 70%);
  animation: ambientDrift 40s ease-in-out infinite alternate-reverse;
}
.ambient-near {
  background:
    radial-gradient(ellipse 300px 200px at 55% 60%, rgba(74,222,128,.035), transparent 70%),
    radial-gradient(ellipse 250px 180px at 40% 15%, rgba(96,165,250,.025), transparent 70%);
  animation: ambientDrift 20s ease-in-out infinite alternate;
}

/* ═══════════════════════════════════════ floating particles ══ */
.ambient-particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.particle {
  position: absolute; border-radius: 50%;
  will-change: transform, opacity;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0%   { transform: translateY(110vh) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: var(--p-opacity, .4); }
  90%  { opacity: var(--p-opacity, .4); }
  100% { transform: translateY(-10vh) translateX(var(--p-drift, 20px)) scale(.6); opacity: 0; }
}
@keyframes ambientDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-3%, 2%) scale(1.02); }
  66%  { transform: translate(2%, -1%) scale(0.99); }
  100% { transform: translate(-1%, 3%) scale(1.01); }
}

main { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────── nav ── */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 32px);
  display: flex; align-items: center; gap: 24px;
}

.brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); font-weight: 680; font-size: 1.05rem;
  letter-spacing: -0.02em; text-decoration: none;
}
.brand:hover { text-decoration: none; }
/* The grove mark in logo.svg — sized in em so it tracks the wordmark. */
.brand-mark { width: 1.3em; height: 1.3em; display: block; flex-shrink: 0; }
.brand-name { letter-spacing: -0.03em; }

.nav-links {
  display: flex; gap: 22px; margin-left: auto;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.nav-links a {
  color: var(--muted); font-size: .925rem; text-decoration: none;
  transition: color .15s; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1.5px; background: var(--accent);
  transition: width .25s var(--ease-out);
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a:hover::after { width: 100%; }
.nav-links a.is-active { color: var(--text); }
.nav-links a.is-active::after { width: 100%; }

/* ── "More": the separate pages, folded into one dropdown ──
   Click and keyboard only, no hover-open — a menu that opens on hover then
   refuses to stay closed when you click it is worse than one that waits. */

.nav-group { position: relative; display: flex; align-items: center; }

.nav-group-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .925rem; color: var(--muted);
  transition: color .15s;
}
.nav-group-btn:hover,
.nav-group-btn[aria-expanded="true"] { color: var(--text); }
.nav-caret { transition: transform .22s var(--ease-out); }
.nav-group-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 14px); right: 0;
  min-width: 176px; padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
}
.nav-group-btn[aria-expanded="true"] + .nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-links .nav-menu a {
  padding: 8px 10px; border-radius: 6px; font-size: .9rem; white-space: nowrap;
}
.nav-links .nav-menu a::after { display: none; }
.nav-links .nav-menu a:hover { background: var(--panel-2); }
.nav-links .nav-menu a[aria-current="page"] { color: var(--accent); }

.nav-toggle {
  display: none; flex-direction: column; gap: 4px;
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  padding: 0; margin-left: auto; z-index: 101;
}
.toggle-bar {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--text); margin: 0 auto;
  transition: transform .35s var(--ease-out), opacity .25s;
}

.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(2) {
  opacity: 0; transform: translateX(-6px);
}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ───────────────────────────────────────────────────────── buttons ── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 20px; border-radius: var(--radius-sm);
  font: inherit; font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .1s, opacity .15s, box-shadow .2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 4px 16px rgba(74, 222, 128, .16);
}
.btn-primary:hover { background: #5ee893; box-shadow: 0 6px 24px rgba(74, 222, 128, .24); }

.btn-ghost {
  background: transparent; color: var(--text); border-color: var(--border);
}
.btn-ghost:hover { background: var(--panel); border-color: var(--faint); }

.btn-sm { padding: 8px 15px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ────────────────────────────────────────────────────────── badge ── */

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 10px; border-radius: 999px;
  background: rgba(74, 222, 128, .1);
  border: 1px solid rgba(74, 222, 128, .28);
  color: var(--accent); font-size: .8rem; font-weight: 600;
  letter-spacing: .01em; margin: 0 0 20px;
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ════════════════════════════════════════════════════ story rail ══ */

.story {
  --intro: 0;
  --stage-top: 88px;
  --stage-lift: clamp(1rem, 3vh, 2.2rem);
  --stage-grow: 0.09;

  max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* ── the scrolling column ── */

.story-copy { min-width: 0; padding-top: clamp(40px, 8vh, 80px); }

.hero-block { padding-bottom: clamp(48px, 12vh, 120px); }

.hero-block h1 { margin-bottom: 20px; }
.hero-block h1::after {
  content: ""; display: block; width: 56px; height: 3px; margin-top: 18px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}

.lede { font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--muted); max-width: 34em; }
.lede strong { color: var(--text); font-weight: 620; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; }
.hero-note { font-size: .85rem; color: var(--faint); margin: 0; }

/* ── hero visual (mobile only) ── */
.hero-visual {
  display: none; margin: 6px 0 22px;
}
.hero-visual svg {
  width: 100%; max-width: 420px; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

.scroll-cue {
  display: none; align-items: center; gap: 10px;
  margin: 40px 0 0; font-size: .78rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: .09em;
}
.has-rail .scroll-cue { display: flex; }
.cue-line {
  width: 34px; height: 1px; background: var(--faint);
  transform-origin: left; animation: cueSlide 2.6s ease-in-out infinite;
}
@keyframes cueSlide {
  0%, 100% { transform: scaleX(.4); opacity: .4; }
  50%      { transform: scaleX(1);  opacity: 1; }
}
.has-rail .scroll-cue { opacity: calc(1 - var(--intro)); }

/* ── scene visuals (mobile only) ── */

.scene-visual {
  display: none;
  margin: 18px 0 22px;
}
.scene-visual svg {
  width: 100%; max-width: 420px; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

/* ── scenes ── */

.scene {
  padding: clamp(14vh, 20vh, 26vh) 0;
  max-width: 34em;
}
.scene:last-of-type { padding-bottom: clamp(10vh, 14vh, 18vh); }

.scene-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 12px; padding-left: 13px; position: relative;
}
.scene-label::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .12em;
  width: 2px; background: var(--accent); border-radius: 1px;
}

.scene-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 16px; }
.scene p { color: var(--muted); font-size: 1.02rem; }
.scene p:last-child { margin-bottom: 0; }
.scene strong { color: var(--text); font-weight: 620; }

.has-rail .scene {
  transition: opacity .45s ease, filter .45s ease, transform .6s var(--ease-out);
  opacity: .32;
}
.has-rail .scene.is-active { opacity: 1; transform: translateY(0); }
.has-rail .scene:not(.is-active) { transform: translateY(6px); }
.has-rail .scene:not(.is-active) .scene-label { color: var(--faint); }
.has-rail .scene:not(.is-active) .scene-label::before { background: var(--border); }
.has-rail .scene:not(.is-active) strong { color: var(--muted); }

/* ── the pinned column ── */

.story-stage { min-width: 0; }

.has-rail .story-stage {
  position: sticky; top: var(--stage-top);
  height: calc(100vh - var(--stage-top) - 24px);
  display: flex; align-items: center;
}

/* Intro settle animation uses --intro driven by scroll */
.has-rail .stage {
  transform:
    translate3d(0, calc((1 - var(--intro)) * var(--stage-lift)), 0)
    scale(calc(1 + (1 - var(--intro)) * var(--stage-grow)));
  transform-origin: center center;
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════ the stage ══ */

.stage {
  width: 100%;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transition: box-shadow .35s ease;
}
.stage:hover {
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(74,222,128,.06);
}

.stage-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.chip {
  font-size: .75rem; color: var(--muted); background: var(--bg);
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
}
.chip-room { font-family: ui-monospace, Consolas, monospace; }

.stage-mode {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
  background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .3);
  padding: 2px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.avatars { margin-left: auto; display: flex; }
.av {
  width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; font-style: normal;
  color: var(--accent-ink); border: 2px solid var(--panel-2); margin-left: -6px;
}
.av-a { background: var(--accent); }
.av-b { background: var(--blue); }
.av-c { background: var(--warn); font-size: 9px; }

.stage-body { position: relative; }
.stage-map { display: block; width: 100%; height: auto; }

/* ── scene parts: off by default, .on is toggled by story.js ── */

.sc, .stage-ov {
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s, transform .5s ease;
}
.sc.on, .stage-ov.on { opacity: 1; visibility: visible; }

.story:not(.has-rail) .sc-raster-clipped,
.story:not(.has-rail) .sc-poly,
.story:not(.has-rail) .sc-obs,
.story:not(.has-rail) .sc-cursors,
.story:not(.has-rail) .ov-layers {
  opacity: 1; visibility: visible;
}

.layer-terrain {
  transform: translateY(calc((1 - var(--intro)) * -10px));
  transition: transform .1s linear;
}

.sc-poly .poly-line {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.1s cubic-bezier(.65, .05, .36, 1), d 1.1s var(--ease-out);
}
.sc-poly.on .poly-line { stroke-dashoffset: 0; }

.sc-poly .poly-handles circle {
  opacity: 0; transition: opacity .3s ease .7s, cx 1.1s var(--ease-out), cy 1.1s var(--ease-out);
}
.sc-poly.on .poly-handles circle { opacity: 1; }

.is-clipping .poly-line { stroke-dasharray: 6 4; stroke-dashoffset: 0; animation: dash 30s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -200; } }

/* ── scrubbing back: the boundary returns to the shape it had in 2021 ──
   The drawn outline, its vertex handles and the raster's clip path all
   morph together, so the mask keeps hugging the edge while it moves.
   Browsers without the CSS `d` property simply keep today's shape. */

.clip-shape { transition: d 1.1s var(--ease-out); }

.is-scrubbing .poly-line,
.is-scrubbing .clip-shape { d: path("M140 122 L214 100 L250 152 L206 184 L152 168 Z"); }

.is-scrubbing .poly-handles circle:nth-child(1) { cx: 140px; cy: 122px; }
.is-scrubbing .poly-handles circle:nth-child(2) { cx: 214px; cy: 100px; }
.is-scrubbing .poly-handles circle:nth-child(3) { cx: 250px; cy: 152px; }
.is-scrubbing .poly-handles circle:nth-child(4) { cx: 206px; cy: 184px; }
.is-scrubbing .poly-handles circle:nth-child(5) { cx: 152px; cy: 168px; }

/* A dashed echo of where the boundary sits today, so the change is legible
   rather than just a shape that quietly moved. */
.poly-ghost, .poly-ghost-label {
  opacity: 0; stroke: var(--faint); fill: none;
  transition: opacity .6s ease .35s;
}
.poly-ghost-label { fill: var(--faint); stroke: none; }
.is-scrubbing .poly-ghost { opacity: .5; }
.is-scrubbing .poly-ghost-label { opacity: .75; }

.sc-raster-full rect { transform-origin: center; }
.sc-raster-full.on rect { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }

.sc-obs circle { fill: var(--blue); opacity: .85; transition: opacity .5s ease, fill .5s ease; }
.sc-obs circle:nth-child(odd) { fill: var(--accent); }
.is-scrubbing .sc-obs circle[data-era="new"] { opacity: 0; }
.is-querying .sc-obs circle { fill: var(--faint); opacity: .35; }
.is-querying .sc-obs circle[data-era="new"] { fill: var(--accent); opacity: 1; }

/* Plots that only exist back in 2021: nowhere on today's map, and they
   pop in inside the old boundary once the room scrubs back to find them.
   Placed after the rules above so the hidden default wins by source order. */
.sc-obs circle[data-era="gone"] {
  opacity: 0; r: 1.5px;
  transition: opacity .45s ease, r .5s var(--ease-out);
}
.is-scrubbing .sc-obs circle[data-era="gone"] {
  opacity: .9; r: 4px;
  transition-delay: .55s;
}

/* ── 06 running the query ────────────────────────────────────────────
   The boundary does not move here — it is the query's WHERE clause. A scan
   crosses it once and every plot the query matched sprouts inside, left to
   right, following the sweep. --i is the tree's index, set in the markup. */

.sc-trees text {
  opacity: 0; transform: translateY(7px);
}
.is-querying .sc-trees text {
  animation: sprout .55s var(--ease-out) both;
  animation-delay: calc(.4s + var(--i) * 28ms);
}
@keyframes sprout {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scan-bar { fill: url(#scan-grad); opacity: 0; }
.is-querying .scan-bar { animation: scan 2s var(--ease-out) .15s; }
@keyframes scan {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(166px); }
}

/* The result line reports the query running, then what it mounted. */
.ov-result { display: grid; }
.res-run, .res-done { grid-area: 1 / 1; }
.res-run { opacity: 0; color: var(--faint); font-weight: 400; }
.is-querying .res-run  { animation: resRun 2.3s both; }
.is-querying .res-done { animation: resDone 2.3s both; }
@keyframes resRun  { 0%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes resDone { 0%, 84% { opacity: 0; } 85%, 100% { opacity: 1; } }

/* ── cursors ── */

.cursor { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
.cursor-a   { animation: driftA 15s ease-in-out infinite; }
.cursor-b   { animation: driftB 18s ease-in-out infinite; }
/* Dryads: only present once the story reaches them, on their own drifts. */
.cursor-bot  { animation: driftC 12s ease-in-out infinite; opacity: 0; transition: opacity .5s; }
.cursor-bot2 { animation: driftD 16s ease-in-out infinite; opacity: 0; transition: opacity .5s .15s; }
.is-agent .cursor-bot,
.is-agent .cursor-bot2 { opacity: 1; }

@keyframes driftA {
  0%   { transform: translate(168px, 122px); }
  25%  { transform: translate(248px, 100px); }
  55%  { transform: translate(224px, 178px); }
  80%  { transform: translate(140px, 152px); }
  100% { transform: translate(168px, 122px); }
}
@keyframes driftB {
  0%   { transform: translate(330px, 92px); }
  30%  { transform: translate(360px, 158px); }
  60%  { transform: translate(292px, 214px); }
  85%  { transform: translate(372px, 128px); }
  100% { transform: translate(330px, 92px); }
}
/* The two dryad drifts are planting rounds: every waypoint is a spot where
   one of them sets a tree down, and .sc-planted holds the trees they leave.
   Change a waypoint and its tree in the markup has to move with it. Fae
   works the left edge, Melia the lower middle — Marc's drift owns the right
   side and Ana's the centre. */
@keyframes driftC {
  0%   { transform: translate(66px, 96px); }
  35%  { transform: translate(34px, 178px); }
  70%  { transform: translate(92px, 236px); }
  100% { transform: translate(66px, 96px); }
}
@keyframes driftD {
  0%   { transform: translate(162px, 252px); }
  30%  { transform: translate(238px, 266px); }
  65%  { transform: translate(196px, 216px); }
  100% { transform: translate(162px, 252px); }
}

/* The tree each dryad is carrying, and the ones already planted.

   The drops are phase-locked to the flights: same duration, and each tree's
   delay is the fraction of the loop at which its dryad reaches that spot
   (--t in the markup). Neither animation is gated on .is-agent, because
   restarting the drops when the scene lights would put them out of step
   with a flight that has been running since load. */
.fae-load { opacity: .92; }

.sc-planted text {
  opacity: 0;
  animation: plant 12s var(--ease-out) infinite;
  animation-delay: calc(var(--t) * 12s);
}
.sc-planted text[data-fae="melia"] {
  animation-duration: 16s;
  animation-delay: calc(var(--t) * 16s);
}
@keyframes plant {
  0%   { opacity: 0; transform: translateY(5px); }
  5%   { opacity: 1; transform: translateY(0); }
  88%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* ── HTML overlays on the map ── */

.stage-ov {
  position: absolute;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  font-size: .72rem; color: var(--text);
}
.has-rail .stage-ov:not(.on) { transform: translateY(6px); }

.ov-layers {
  top: 12px; left: 12px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 5px; min-width: 122px;
}
.ov-title {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 700; margin-bottom: 1px;
}
.ov-row { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.sw-green  { background: var(--accent); }
.sw-orange { background: #f97316; }
.sw-blue   { background: var(--blue); }

.ov-measure {
  bottom: 14px; left: 12px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
  border-color: var(--accent-dim);
}
.ov-measure strong { font-size: .78rem; }
.ov-measure span { color: var(--accent); font-variant-numeric: tabular-nums; }

/* The measurement belongs to the geometry, so it follows it back in time. */
.ov-m-then { display: none; }
.is-scrubbing .ov-m-now { display: none; }
.is-scrubbing .ov-m-then { display: inline; }

.ov-note, .ov-note-past {
  top: 46px; right: 14px; width: 148px; padding: 9px 11px;
  background: #fde68a; color: #422006; border-color: #d9a441;
  line-height: 1.45; box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
/* A note written that year, resurfacing as the room scrubs past it. */
.ov-note-past.on { transform: rotate(-1.6deg); }
.note-author {
  display: block; font-weight: 700; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: #7c5a13; margin-bottom: 3px;
}

.ov-sql {
  bottom: 14px; right: 12px; padding: 10px 12px; max-width: 218px;
}
.ov-sql code {
  display: block; background: none; border: 0; padding: 0;
  font-size: .68rem; line-height: 1.55; color: var(--muted);
}
.ov-result {
  display: block; margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--border-soft);
  color: var(--accent); font-weight: 600; font-size: .68rem;
}

/* ── the shared timeline ── */

.stage-timeline {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-top: 1px solid var(--border); background: var(--panel-2);
}
.tl-label { font-size: .7rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.tl-track { position: relative; flex: 1; height: 4px; background: var(--bg); border-radius: 2px; }
.tl-fill {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  background: var(--accent-dim); border-radius: 2px;
  transition: width .9s cubic-bezier(.65, .05, .36, 1);
}
.tl-knob {
  position: absolute; top: 50%; left: 100%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  background: var(--accent); border-radius: 50%;
  transition: left .9s cubic-bezier(.65, .05, .36, 1), box-shadow .5s ease;
}
/* One tick per year between the two labels: 2019 → 2026 is seven steps,
   so each tick sits at a multiple of 100/7%. */
.tl-tick {
  position: absolute; top: -3px; width: 1px; height: 10px;
  background: var(--faint); opacity: 0; margin-left: -.5px;
  transition: opacity .5s ease, background .5s ease;
}
.tl-tick:nth-of-type(1) { left: 14.286%; }
.tl-tick:nth-of-type(2) { left: 28.571%; }
.tl-tick:nth-of-type(3) { left: 42.857%; }
.tl-tick:nth-of-type(4) { left: 57.143%; }
.tl-tick:nth-of-type(5) { left: 71.429%; }
.tl-tick:nth-of-type(6) { left: 85.714%; }
.is-scrubbing .tl-tick { opacity: .45; }
.is-scrubbing .tl-tick:nth-of-type(2) { background: var(--accent); opacity: 1; height: 14px; top: -5px; }

/* Parked on 2021 — the second tick — while the time scene is up. */
.is-scrubbing .tl-fill { width: 28.571%; }
.is-scrubbing .tl-knob { left: 28.571%; box-shadow: 0 0 0 4px rgba(74, 222, 128, .16); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .ambient-layer { animation: none; }
}

/* ═════════════════════════════════════════════ reveal on scroll ══ */

.will-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.will-reveal.is-in { opacity: 1; transform: none; }

.will-reveal-left {
  opacity: 0; transform: translateX(-28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.will-reveal-left.is-in { opacity: 1; transform: none; }

.will-reveal-right {
  opacity: 0; transform: translateX(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.will-reveal-right.is-in { opacity: 1; transform: none; }

.will-reveal-scale {
  opacity: 0; transform: scale(.94);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.will-reveal-scale.is-in { opacity: 1; transform: none; }

/* Staggered delays for grid children */
.reveal > .feat:nth-child(1),
.reveal > .tier:nth-child(1) { transition-delay: .00s; }
.reveal > .feat:nth-child(2),
.reveal > .tier:nth-child(2) { transition-delay: .06s; }
.reveal > .feat:nth-child(3) { transition-delay: .12s; }
.reveal > .feat:nth-child(4) { transition-delay: .18s; }
.reveal > .feat:nth-child(5) { transition-delay: .24s; }
.reveal > .feat:nth-child(6) { transition-delay: .30s; }
.reveal > .feat:nth-child(7) { transition-delay: .36s; }
.reveal > .feat:nth-child(8) { transition-delay: .42s; }

/* ──────────────────────────────────────────────────────── sections ── */

.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 32px);
}

.section-alt {
  max-width: none;
  background: var(--bg-alt);
  border-block: 1px solid var(--border-soft);
}
.section-alt > * { max-width: var(--maxw); margin-inline: auto; }

.section-head { max-width: 46em; margin-bottom: 44px; }
.section-sub { color: var(--muted); font-size: 1.05rem; margin: 0; }

/* ───────────────────────────────────────────────────── feature grid ── */

.grid-features {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden;
}
.feat { background: var(--bg); padding: 22px 20px; transition: background .18s, transform .25s var(--ease-out); }
.feat:hover, .feat:active { background: var(--panel); transform: translateY(-2px); }
.feat h4 { margin-bottom: 6px; }
.feat p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ───────────────────────────────────────────────────────── tiers ── */

.tiers {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  align-items: start; margin-bottom: 56px;
}

.tier {
  position: relative;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 28px;
  display: flex; flex-direction: column; height: 100%;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.tier:hover { transform: translateY(-3px); }

.tier-featured {
  border-color: var(--accent-dim);
  background: linear-gradient(180deg, rgba(74, 222, 128, .05), transparent 220px), var(--panel);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, .12), 0 20px 50px rgba(0, 0, 0, .35);
}
.tier-featured:hover {
  box-shadow: 0 0 0 1px rgba(74, 222, 128, .18), 0 28px 64px rgba(0, 0, 0, .45);
}

.tier-ribbon {
  position: absolute; top: -12px; left: 28px;
  background: var(--accent); color: var(--accent-ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}

.tier-head { margin-bottom: 22px; }
.tier-head h3 { font-size: 1.45rem; margin-bottom: 2px; }
.tier-tag { color: var(--faint); font-size: .85rem; margin: 0 0 16px; }
.tier-price { margin: 0 0 14px; display: flex; align-items: baseline; gap: 6px; }
.tier-price .amount { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; }
.tier-price .per { color: var(--faint); font-size: .9rem; }
.tier-blurb { color: var(--muted); font-size: .95rem; margin: 0; }

.tier-list {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: flex; flex-direction: column; gap: 11px; flex: 1;
}
.tier-list li {
  position: relative; padding-left: 26px;
  font-size: .95rem; color: var(--text);
}
.tier-list li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--accent); font-weight: 700;
}
.tier-list li.incl::before { content: "✦"; }
.tier-list .sub {
  display: inline-block; color: var(--muted); font-size: .875rem;
  line-height: 1.55; margin-top: 3px;
}

.soon {
  display: inline-block; vertical-align: 1px;
  background: rgba(251, 191, 36, .13); border: 1px solid rgba(251, 191, 36, .3);
  color: var(--warn); font-size: .66rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; margin-left: 5px;
}

.tier-foot {
  color: var(--faint); font-size: .8rem; margin: 14px 0 0; text-align: center;
}

/* ─────────────────────────────────────────────────── comparison ── */

.table-scroll { overflow-x: auto; margin-bottom: 48px; -webkit-overflow-scrolling: touch; }

.compare {
  width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem;
}
.compare th, .compare td {
  border-bottom: 1px solid var(--border-soft);
  padding: 13px 16px; text-align: left; vertical-align: top;
}
.compare thead th {
  border-bottom: 1px solid var(--border);
  font-size: 1rem; font-weight: 650; color: var(--text);
}
.compare thead th:nth-child(3) { color: var(--accent); }
.compare .th-sub {
  display: block; font-size: .72rem; font-weight: 500;
  color: var(--faint); text-transform: uppercase; letter-spacing: .05em;
}
.compare tbody th { font-weight: 500; color: var(--text); width: 40%; }
.compare td { color: var(--muted); }
.compare td.yes { color: var(--accent); font-weight: 700; }
.compare tbody tr:hover { background: rgba(255, 255, 255, .022); }

/* ──────────────────────────────────────────────────────── callout ── */

.callout {
  display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(74, 222, 128, .07), rgba(96, 165, 250, .05));
  border: 1px solid rgba(74, 222, 128, .24);
  border-radius: var(--radius); padding: 28px;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.callout:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.callout-icon { font-size: 1.9rem; line-height: 1; flex-shrink: 0; }
.callout h3 { margin-bottom: 8px; }
.callout p { color: var(--muted); margin: 0 0 .8em; font-size: .95rem; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

/* ────────────────────────────────────────────────── split / stack ── */

.split {
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: 1.4fr 1fr; align-items: start;
}
.split p { color: var(--muted); }

.stack-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: transform .35s var(--ease-out);
}
.stack-card:hover { transform: translateY(-2px); }
.stack-card h4 {
  color: var(--faint); text-transform: uppercase;
  font-size: .72rem; letter-spacing: .08em; margin-bottom: 14px;
}
.stack { list-style: none; padding: 0; margin: 0 0 16px; }
.stack li {
  padding: 7px 0; border-bottom: 1px solid var(--border-soft);
  font-size: .9rem; color: var(--text);
}
.stack li:last-child { border-bottom: none; }
.stack-note { color: var(--faint); font-size: .8rem; margin: 0; }

/* ─────────────────────────────────────────────────────── waitlist ── */

.waitlist {
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: 1fr 1fr; align-items: start;
}
.waitlist-copy p { color: var(--muted); }

.waitlist-form {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px;
  transition: box-shadow .35s ease;
}
.waitlist-form:focus-within {
  box-shadow: 0 0 0 1px rgba(74,222,128,.08), 0 20px 50px rgba(0,0,0,.25);
}

.field { margin-bottom: 18px; border: 0; padding: 0; }

.field label, .field legend {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--text); margin-bottom: 7px; padding: 0;
}
.req { color: var(--accent); }
.opt { color: var(--faint); font-weight: 400; font-size: .78rem; }

.field input[type="email"],
.field input[type="text"],
.field textarea {
  width: 100%; padding: 11px 13px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: .93rem;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: #56666f; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .13);
  transform: translateY(-1px);
}
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field textarea { resize: vertical; min-height: 76px; }

.field-interest { display: flex; flex-direction: column; gap: 2px; }

.check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .89rem; font-weight: 400; color: var(--muted);
  cursor: pointer; margin-bottom: 0; padding: 3px 0;
  min-height: 44px; /* touch target */
}
.check input { accent-color: var(--accent); margin: 3px 0 0; flex-shrink: 0; width: 18px; height: 18px; }
.check:hover { color: var(--text); }
.check-consent { margin: 4px 0 18px; }

.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* ── captcha slot ── */

.captcha-field { margin-bottom: 20px; }
.captcha-slot { min-height: 0; }

.captcha-box {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 15px;
}
.captcha-q {
  font-size: .85rem; font-weight: 600; color: var(--text);
  margin: 0 0 4px; display: flex; align-items: center; gap: 7px;
}
.captcha-hint { font-size: .74rem; color: var(--faint); margin: 0 0 12px; }
.captcha-options { display: flex; gap: 9px; flex-wrap: wrap; }
.captcha-opt {
  width: 50px; height: 50px; font-size: 1.5rem; line-height: 1;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.captcha-opt:hover { border-color: var(--faint); transform: translateY(-1px); }
.captcha-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.captcha-opt.selected { border-color: var(--accent); background: rgba(74, 222, 128, .12); }
.captcha-opt.wrong { border-color: var(--danger); background: rgba(248, 113, 113, .12); }

.captcha-solved {
  display: flex; align-items: center; gap: 9px;
  font-size: .87rem; color: var(--accent); font-weight: 600;
}
.captcha-note {
  font-size: .72rem; color: var(--faint); margin: 10px 0 0;
  padding-top: 10px; border-top: 1px solid var(--border-soft);
}

/* ── form status ── */

.form-status {
  margin: 14px 0 0; font-size: .87rem; min-height: 1.2em; text-align: center;
}
.form-status.error   { color: var(--danger); }
.form-status.success { color: var(--accent); }
.form-status.info    { color: var(--muted); }

.form-done {
  text-align: center; padding: 22px 8px;
}
.form-done .tick { font-size: 2rem; display: block; margin-bottom: 10px; }
.form-done h3 { color: var(--accent); }
.form-done p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ───────────────────────────────────────────────────────────── faq ── */

.faq { display: grid; gap: 10px; max-width: 780px; }
.faq details {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 15px 20px;
  transition: border-color .25s, box-shadow .25s;
  /* smooth open/close grid trick */
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows .4s var(--ease-out), border-color .25s, box-shadow .25s;
}
.faq details[open] {
  grid-template-rows: auto 1fr;
  border-color: var(--accent-dim);
}
.faq details:hover { border-color: var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: .97rem;
  list-style: none; position: relative; padding-right: 26px;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: -2px;
  color: var(--accent); font-size: 1.25rem; font-weight: 400;
  transition: transform .3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s var(--ease-out);
}
.faq details[open] .faq-body {
  opacity: 1;
  transform: translateY(0);
}
.faq p { color: var(--muted); font-size: .92rem; margin: 12px 0 0; }

/* ────────────────────────────────────────────────────────── footer ── */

.footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-alt);
  padding: 44px clamp(16px, 4vw, 32px) 28px;
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 28px;
  justify-content: space-between; align-items: flex-start;
}
.footer .brand { margin-bottom: 8px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: var(--muted); font-size: .9rem; }
.footer-links a:hover { color: var(--text); }
.footer-legal {
  max-width: var(--maxw); margin: 32px auto 0;
  padding-top: 20px; border-top: 1px solid var(--border-soft);
}

/* ─────────────────────────────────────────────── back to top ── */
.to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: pointer; opacity: 0; transform: translateY(12px) scale(.9);
  transition: opacity .3s ease, transform .3s var(--ease-out), background .2s, border-color .2s;
  pointer-events: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.to-top.is-visible {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.to-top:hover, .to-top:active {
  background: var(--panel-2); border-color: var(--accent-dim);
  color: var(--accent);
}
.to-top svg { transition: transform .25s var(--ease-out); }
.to-top:hover svg { transform: translateY(-2px); }

@supports (padding: max(0px)) {
  .to-top {
    bottom: max(24px, env(safe-area-inset-bottom));
    right: max(24px, env(safe-area-inset-right));
  }
}

/* ═══════════════════════════════════════════════════════════════
   PARALLAX UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.parallax-slow,
.parallax-mid,
.parallax-fast {
  will-change: transform;
}

.parallax-breathe {
  animation: breatheScale 12s ease-in-out infinite;
}
@keyframes breatheScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* ═════════════════════════════════════════════════════─ responsive ── */

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-stage { order: -1; position: static; height: auto; }
  .story-copy { padding-top: 0; }
  .hero-block { padding-bottom: clamp(32px, 6vh, 56px); }
  .stage { transform: none; }
  .scene { padding: clamp(28px, 6vh, 48px) 0; max-width: none; }
  .scene:first-of-type { padding-top: clamp(36px, 8vh, 64px); }
  .split, .waitlist { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }

  /* Make stage more prominent on mobile */
  .stage { max-width: 520px; margin: 0 auto; }
  .story-stage { padding: 16px 0 32px; }

  /* Show hero + scene visuals on mobile */
  .hero-visual {
    display: block;
    opacity: 0; transform: translateY(16px) scale(.97);
    animation: sceneVisualIn .7s var(--ease-out) .1s both;
  }
  .hero-visual svg { margin: 0 auto; display: block; }

  .scene-visual {
    display: block;
    opacity: 1; transform: translateY(0) scale(1);
    animation: sceneVisualIn .7s var(--ease-out) both;
  }
  .scene:nth-child(2) .scene-visual { animation-delay: .05s; }
  .scene:nth-child(3) .scene-visual { animation-delay: .10s; }
  .scene:nth-child(4) .scene-visual { animation-delay: .15s; }
  .scene:nth-child(5) .scene-visual { animation-delay: .20s; }
  .scene:nth-child(6) .scene-visual { animation-delay: .25s; }
  .scene:nth-child(7) .scene-visual { animation-delay: .30s; }
  .scene:nth-child(8) .scene-visual { animation-delay: .35s; }
  .scene-visual svg {
    margin: 0 auto;
    display: block;
  }
  @keyframes sceneVisualIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Scroll progress bar slightly thicker on touch */
  .scroll-progress { height: 3px; }
}

@media (max-width: 740px) {
  .nav-links {
    position: fixed; inset: 0 0 0 auto;
    width: min(280px, 70vw);
    height: 100vh; height: 100dvh;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--border-soft);
    flex-direction: column; gap: 0;
    padding: 88px 20px 24px;
    /* The accordion can outgrow a short phone — let the panel scroll. */
    overflow-y: auto; overscroll-behavior: contain;
    z-index: 99;
    opacity: 0; transform: translateX(100%);
    pointer-events: none;
  }
  .nav-links.is-open {
    opacity: 1; transform: translateX(0); pointer-events: auto;
  }
  .nav-links a {
    padding: 14px 0; font-size: 1.05rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a::after { display: none; }

  /* In the slide-in panel the dropdown becomes an accordion instead. */
  .nav-group { display: block; }
  .nav-group-btn {
    width: 100%; justify-content: space-between;
    padding: 14px 0; font-size: 1.05rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-caret { width: 14px; height: 14px; }
  .nav-menu {
    position: static; min-width: 0; padding: 0; gap: 0;
    background: none; border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    opacity: 1; visibility: visible; transform: none;
    max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease-out);
  }
  .nav-group-btn[aria-expanded="true"] + .nav-menu { max-height: 320px; }
  .nav-links .nav-menu a {
    padding: 12px 0 12px 14px; border-radius: 0; font-size: 1rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-links .nav-menu a:last-child { border-bottom: 0; }
  .nav-links .nav-menu a:hover { background: none; }

  .nav-toggle { display: flex; }
  .nav-cta { display: none; }

  /* Body scroll lock when menu open */
  body.menu-open { overflow: hidden; }

  .tier { padding: 26px 20px; }
  .tier-ribbon { left: 20px; }
  .waitlist-form { padding: 20px; }
  .callout { flex-direction: column; gap: 14px; padding: 22px; }

  /* Larger touch targets everywhere */
  .btn { padding: 13px 22px; }
  .btn-sm { padding: 10px 17px; }
  .check { min-height: 48px; padding: 6px 0; }

  /* Comparison table horizontal scroll */
  .table-scroll { margin: 0 -16px 48px; padding: 0 16px; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  h2 { font-size: clamp(1.25rem, 5vw, 1.7rem); }
  .scene-title { font-size: 1.3rem; }
  .hero-block { padding-bottom: 28px; }
  .footer-inner { flex-direction: column; gap: 20px; }
}

/* Respect safe-area-inset on notched phones */
@supports (padding: max(0px)) {
  .nav-inner {
    padding-left: max(clamp(16px, 4vw, 32px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 4vw, 32px), env(safe-area-inset-right));
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .section {
    padding-left: max(clamp(16px, 4vw, 32px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 4vw, 32px), env(safe-area-inset-right));
  }
  .footer {
    padding-left: max(clamp(16px, 4vw, 32px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 4vw, 32px), env(safe-area-inset-right));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════ use cases grid ══ */
.grid-uses {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden;
}
.use {
  background: var(--bg); padding: 26px 22px;
  transition: background .2s, transform .25s var(--ease-out);
  display: flex; flex-direction: column; gap: 10px;
}
.use:hover { background: var(--panel); transform: translateY(-2px); }
.use-icon { font-size: 1.8rem; line-height: 1; margin-bottom: 2px; }
.use h4 { margin: 0; font-size: 1.05rem; }
.use p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ───────────────────────────────────────────── gallery ══ */
.gallery-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 36px;
}
.gallery-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.gallery-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.gallery-preview { background: var(--bg-alt); padding: 16px 16px 8px; }
.gallery-preview svg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.gallery-meta { padding: 18px; }
.gallery-meta h4 { font-size: 1rem; margin-bottom: 6px; }
.gallery-meta p { color: var(--muted); font-size: .88rem; margin: 0 0 12px; }
.gallery-tag {
  font-size: .72rem; color: var(--accent); font-weight: 600;
  background: rgba(74, 222, 128, .08); border: 1px solid rgba(74, 222, 128, .22);
  padding: 3px 10px; border-radius: 999px; display: inline-block;
}
.gallery-foot { text-align: center; }

/* ────────────────────────────────────────── testimonials ══ */
.testimonials-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.testimonial {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px;
  transition: transform .3s var(--ease-out), border-color .3s;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 220px;
}
.testimonial:hover { border-color: var(--accent-dim); transform: translateY(-3px); }
.testimonial-text p {
  color: var(--text); font-size: 1rem; line-height: 1.6; margin: 0 0 18px;
  font-style: italic;
}
.testimonial-text p::before { content: "\" "; color: var(--accent); }
.testimonial-author {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.testimonial-author strong { display: block; font-size: .92rem; }
.testimonial-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; background: var(--accent); color: var(--accent-ink);
  flex-shrink: 0;
}

/* ─────────────────────────────────── mobile section nav ══ */
.section-nav {
  display: none; position: sticky; top: 53px; z-index: 95;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav-track {
  display: flex; gap: 8px; padding: 0 clamp(16px, 4vw, 32px);
  width: max-content;
}
.sn-item {
  font-size: .78rem; font-weight: 600; text-decoration: none;
  color: var(--faint); padding: 5px 12px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sn-item.is-active { color: var(--accent); background: rgba(74,222,128,.09); border-color: rgba(74,222,128,.25); }

/* ──────────────────────────────────── waitlist perks ══ */
.waitlist-perks {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.waitlist-perks li {
  position: relative; padding-left: 24px;
  font-size: .92rem; color: var(--muted);
}
.waitlist-perks li::before {
  content: "→"; position: absolute; left: 0; top: -1px;
  color: var(--accent); font-weight: 700;
}

@media (max-width: 900px) {
  .section-nav { display: block; }
}

/* ═══════════════════════════════════════ stories / blog ══ */

.stories-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.story-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s;
  display: flex; flex-direction: column;
}
.story-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.35); border-color: var(--accent-dim); }
.story-thumb { background: var(--bg-alt); padding: 14px 14px 6px; }
.story-thumb svg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.story-meta { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.story-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: rgba(74,222,128,.09); border: 1px solid rgba(74,222,128,.22);
  padding: 2px 10px; border-radius: 999px; width: fit-content;
}
.story-date { font-size: .78rem; color: var(--faint); }
.story-meta h4 { font-size: 1.05rem; margin: 0; line-height: 1.3; }
.story-meta p { color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.55; flex: 1; }
.story-link {
  font-size: .88rem; font-weight: 600; color: var(--accent); text-decoration: none;
  margin-top: 6px; transition: color .15s;
}
.story-link:hover { color: #5ee893; }

/* ═════════════════════════════════ canvas gallery / apps ══ */

.apps-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.app-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s;
  display: flex; flex-direction: column;
}
.app-card:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(0,0,0,.4); border-color: var(--accent-dim); }
.app-preview { background: var(--bg-alt); padding: 16px 16px 8px; }
.app-preview svg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.app-meta { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.app-meta h4 { font-size: 1.08rem; margin: 0; }
.app-meta p { color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.55; flex: 1; }
.app-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.app-tag {
  font-size: .72rem; color: var(--muted); background: var(--bg);
  border: 1px solid var(--border-soft); padding: 3px 10px; border-radius: 999px;
}

/* ═══════════════════════════════════ curated datasets ══ */

.datasets-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-bottom: 36px;
}
.dataset-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s;
  display: flex; flex-direction: column;
}
.dataset-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.32); border-color: var(--accent-dim); }
.dataset-preview { background: var(--bg-alt); padding: 14px 14px 6px; }
.dataset-preview svg { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.dataset-meta { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dataset-meta h4 { font-size: 1.02rem; margin: 0; }
.dataset-desc { color: var(--muted); font-size: .88rem; margin: 0; line-height: 1.55; flex: 1; }
.dataset-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ds-spec {
  font-size: .7rem; color: var(--faint); background: var(--bg);
  border: 1px solid var(--border-soft); padding: 2px 9px; border-radius: 999px;
}
.datasets-foot { text-align: center; }

/* ═══════════════════════════════════════ explore teasers ══ */

.explore-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.explore-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
  text-decoration: none; color: inherit;
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s;
  display: flex; flex-direction: column; gap: 10px;
}
.explore-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  border-color: var(--accent-dim);
}
.explore-card:hover .explore-link { color: #5ee893; }
.explore-icon { font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.explore-card h4 { margin: 0; font-size: 1.1rem; }
.explore-card p { color: var(--muted); font-size: .92rem; margin: 0; line-height: 1.55; flex: 1; }
.explore-link {
  font-size: .9rem; font-weight: 600; color: var(--accent);
  margin-top: 4px; transition: color .15s;
}

/* ───────────────────────────────────────── page hero ── */

.page-hero {
  padding-bottom: clamp(24px, 4vw, 40px);
}
.page-hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
}

/* ═════════════════════════════════════════ about us ══ */

.about {
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: 1.6fr 1fr; align-items: start;
  max-width: var(--maxw); margin: 0 auto;
}
.about-text p { color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.about-text p strong { color: var(--text); }
.about-text h2 a { color: var(--accent); }
.about-text h2 a:hover { color: #5ee893; }
.about-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.fact {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 20px 18px;
  text-align: center; transition: border-color .2s, transform .25s var(--ease-out);
}
.fact:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.fact-num {
  display: block; font-size: 1.8rem; font-weight: 700;
  color: var(--accent); letter-spacing: -0.03em; line-height: 1.1;
}
.fact-label {
  display: block; font-size: .78rem; color: var(--muted);
  margin-top: 6px; text-transform: uppercase; letter-spacing: .06em;
}

@media (max-width: 740px) {
  .about { grid-template-columns: 1fr; }
  .about-facts { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════ changelog ══ */

.changelog-timeline {
  display: flex; flex-direction: column; gap: 0;
  max-width: 780px; margin: 0 auto;
  position: relative;
}
.changelog-timeline::before {
  content: ""; position: absolute; left: 20px; top: 0; bottom: 0;
  width: 2px; background: var(--border-soft);
}
.release {
  display: grid; grid-template-columns: 110px 1fr; gap: 28px;
  padding: 32px 0 32px 0; position: relative;
}
.release::before {
  content: ""; position: absolute; left: 16px; top: 38px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
.release-badge {
  text-align: right; padding-top: 4px;
}
.release-tag {
  display: inline-block; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--faint);
}
.release-tag.release-latest {
  background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.3);
  color: var(--accent);
}
.release-date {
  display: block; font-size: .78rem; color: var(--faint);
  margin-top: 6px;
}
.release-body {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px;
  transition: border-color .25s, box-shadow .25s;
}
.release-body:hover { border-color: var(--accent-dim); box-shadow: 0 12px 36px rgba(0,0,0,.2); }
.release-version { font-size: 1.35rem; margin: 0 0 2px; }
.release-tagline { color: var(--muted); font-size: .95rem; margin: 0 0 18px; }
.release-changes { display: flex; flex-direction: column; gap: 18px; }
.change-type {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin: 0 0 8px; padding-left: 10px;
  position: relative;
}
.change-type::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 3px; border-radius: 2px;
}
.change-added { color: var(--accent); }
.change-added::before { background: var(--accent); }
.change-changed { color: var(--blue); }
.change-changed::before { background: var(--blue); }
.change-fixed { color: var(--warn); }
.change-fixed::before { background: var(--warn); }
.change-planned { color: var(--faint); }
.change-planned::before { background: var(--faint); }
.change-group ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.change-group li { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.change-group li a { color: var(--accent); }

@media (max-width: 640px) {
  .changelog-timeline::before { left: 10px; }
  .release { grid-template-columns: 1fr; gap: 14px; padding-left: 30px; }
  .release::before { left: 6px; }
  .release-badge { text-align: left; }
}

/* ═════════════════════════════════════ status ══ */

.status-overall {
  display: flex; align-items: center; gap: 20px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  margin-bottom: 32px;
  transition: border-color .3s, box-shadow .3s;
}
.status-overall.status-ok { border-color: var(--accent-dim); }
.status-overall.status-degraded { border-color: var(--warn); }
.status-overall.status-down { border-color: var(--danger); }
.status-pulse {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(74,222,128,.5);
  animation: statusPulse 2.5s ease-out infinite;
}
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.status-overall h2 { margin: 0 0 4px; font-size: 1.3rem; }
.status-overall p { margin: 0; color: var(--muted); font-size: .95rem; }

.status-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 40px;
}
.status-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.status-card:hover { transform: translateY(-2px); border-color: var(--accent-dim); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.status-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.status-top h4 { margin: 0; font-size: 1rem; }
.status-desc { color: var(--muted); font-size: .84rem; margin: 0 0 14px; }

.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; position: relative;
}
.status-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  opacity: .35;
}
.status-dot.status-ok { background: var(--accent); }
.status-dot.status-ok::after { background: var(--accent); animation: statusPulse 2.5s ease-out infinite; }
.status-dot.status-warn { background: var(--warn); }
.status-dot.status-warn::after { background: var(--warn); }
.status-dot.status-down { background: var(--danger); }
.status-dot.status-down::after { background: var(--danger); }

.status-uptime { display: flex; align-items: center; gap: 10px; }
.uptime-label { font-size: .72rem; color: var(--faint); white-space: nowrap; }
.uptime-bar {
  flex: 1; height: 5px; border-radius: 3px; background: var(--bg);
  overflow: hidden;
}
.uptime-fill {
  display: block; height: 100%; width: calc(var(--uptime-pct, 99) * 1%);
  background: var(--accent); border-radius: 3px;
  transition: width 1s var(--ease-out);
}
.uptime-pct { font-size: .75rem; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; width: 40px; text-align: right; }

.status-history { max-width: 780px; margin: 0 auto; }
.status-history h3 { margin-bottom: 18px; }
.incident-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.incident {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 18px 20px;
  display: grid; gap: 6px;
}
.incident-badge {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 10px; border-radius: 999px;
  width: fit-content;
}
.incident-badge.incident-resolved {
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25);
  color: var(--accent);
}
.incident-badge.incident-maintenance {
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25);
  color: var(--warn);
}
.incident-date { font-size: .78rem; color: var(--faint); }
.incident p { color: var(--muted); font-size: .9rem; margin: 4px 0 0; }
.status-note { text-align: center; }