/* Hallmark · shape: Narrative Workflow as a flight (proposal C, from A) · the page is one 3D journey: hero balls, approach, low flight past the screens, the role houses, the globe with pins · genre: modern-minimal · theme: brand · redesign: full · job: subscribe (waitlist + demo)
 * paper: oklch(19.1% 0.045 272) · accent: oklch(62.7% 0.264 313) · display: Plus Jakarta Sans 600 · body: IBM Plex Sans · hero: Banner · nav: plain bar · footer: colophon block · signature: the logo’s three dots as lit 3D spheres beside the question, under a glass disc; the Overview screen answers it
 * axes: dark/geometric-sans/chromatic-orchid · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: P, a dark SaaS page is the expected answer; the question at poster size and the film as the first section make the argument instead of orbs and tilt */
/* Hallmark · reworded "Book a demo" to "See it live" (nav) and "Book a walkthrough" (hero link) · 19 names "Book a demo" as a stock second action */
/* Hallmark · dropped the kickers "Why Caply", "Who it’s for", "Features", "Early access" and the "01 · Week Plan" step labels · 54 and 63 name them; step names became the h3s, the old h3 lines became bold lead-ins */
/* Hallmark · dropped the 3D tilt, orbs and the depth deck · 29 names the orbs; each feature now shows its screen at full width */
/* Hallmark · dismissed 42 · the stamp names it: a plain bar, three section links, PL and one action, no pill */
/* Hallmark · waive 24b · one nudge, -5px centres the 14px seek thumb on the 4px video track · the player in the film keeps its thumb on the line */
/* Hallmark · dismissed 25 · the role line is one sentence set as a statement, 30ch is its measure */
/* Hallmark · answered F7 · the pin and house labels are pill tags on purpose, they echo the glass buttons and read as map markers */
/* Hallmark · dismissed 77 · in the journey the sections are tall scroll stages over one 3D scene; with no journey the page has its full eight sections */
/* Hallmark · dismissed 29 · the frosted buttons match the hero glass disc; the user chose this style over solid and outline */
/* Hallmark · by request: frosted glass buttons; soft drifting light fields behind the hero (one hue each, no purple-to-blue ramp; 29 waived on the user's ask); balls travel from the hero into the Why column; circle reveals; Lenis smooth scroll; line reveals */
/* Hallmark · motion by request: hero settle, the logo as three lit spheres with a frosted glass disc that follows the cursor on a spring (paused off-screen, under reduced motion and by a visible button; glass is a genre refusal, taken because the user asked for it), scroll-driven screen rises, list settles; the user asked for more motion than the genre default */
/* Hallmark · dismissed F8 · one scroll pattern, the same rise on the film and on each feature screen */
/* Hallmark · dismissed 23 · the 6% is the orchid blob, the logo's own top dot; the accent stays a signal everywhere else */
/* Hallmark · waive 80 · three flat circles, the shapes and colours of the Caply logo, aria-hidden · the user's logo is the guard, no blur and no glow, so 29 does not apply */
/* tokens.css, base.css and common.css are linked from the page (no @import chain) */
/* Hallmark · waive 47b · one frame, the real product film inside · the film is Caply itself, rounded only, no device chrome */

h1, h2, h3 { color: var(--color-ink); }
main, .footer { position: relative; z-index: var(--z-raised); }
.balls-gl { position: fixed; inset: 0; z-index: var(--z-base); width: 100%; height: 100%; pointer-events: none; }
a { color: var(--color-ink); }

/* ─── Controls ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--glass-rim); border-radius: var(--radius-pill);
  background: var(--glass-btn); color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform 160ms var(--ease-out);
}
.btn:hover { background: var(--glass-btn-hover); border-color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn-ghost:hover { background: var(--color-paper-3); border-color: var(--color-muted); }
.btn-wide { width: 100%; }

input[type="email"], input[type="text"] {
  width: 100%; min-height: 48px; padding: 0 var(--space-md);
  border: 1px solid var(--color-muted); border-radius: var(--radius-input);
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md);
  transition: border-color var(--dur-short) var(--ease-out);
}
input::placeholder { color: var(--color-muted); }
input[type="email"]:hover, input[type="text"]:hover { border-color: var(--color-ink-2); }
input[type="email"]:focus-visible, input[type="text"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
input:disabled { opacity: 0.55; cursor: not-allowed; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--color-accent); width: 18px; height: 18px; margin: var(--space-2xs) 0 0; flex: none; }
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ─── Nav: a plain bar, transparent until the page moves ─────────────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky-nav); border-bottom: 1px solid transparent; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.nav.is-scrolled { background: var(--color-paper); border-bottom-color: var(--color-rule); }
.nav-bar { display: flex; align-items: center; gap: var(--space-xl); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; }
.brand:focus-visible, .nav a:focus-visible, .footer-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-input); }
.nav nav { margin-left: auto; }
.nav ul { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.nav nav a, .lang { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.nav nav a:hover, .lang:hover { color: var(--color-ink); text-decoration: underline; }
@media (max-width: 60rem) { .nav nav { display: none; } .lang { margin-left: auto; } }

/* ─── Hero: the question, then Caply's answer on screen ────────────── */
.hero { padding-block: calc(72px + var(--space-3xl)) var(--section-gap-s); }
.hero-title { max-width: none; margin: 0; font: 600 clamp(2.75rem, 6.4vw + 0.5rem, 6.5rem)/1.02 var(--font-display); letter-spacing: -0.035em; color: var(--color-ink); text-wrap: balance; }

/* The logo's three dots as lit spheres, beside the headline, never under it.
   The .anchor spans only hold the layout; caply.js moves the SVG blobs onto them. */
.title-wrap {
  --x-s: 73%; --y-s: 16%; --r-s: clamp(20px, 2.8vw, 40px);
  --x-m: 83%; --y-m: 74%; --r-m: clamp(32px, 4.6vw, 66px);
  --x-l: 96%; --y-l: -8%; --r-l: clamp(46px, 7vw, 100px);
  position: relative; isolation: isolate;
}
.anchor { position: absolute; z-index: -1; left: calc(var(--x) - var(--r)); top: calc(var(--y) - var(--r)); width: calc(var(--r) * 2); aspect-ratio: 1; border-radius: 50%; }
.anchor-s { --x: var(--x-s); --y: var(--y-s); --r: var(--r-s); background: var(--color-lilac); }
.anchor-m { --x: var(--x-m); --y: var(--y-m); --r: var(--r-m); background: var(--color-lilac); }
.anchor-l { --x: var(--x-l); --y: var(--y-l); --r: var(--r-l); background: var(--color-accent); }
.blobs { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.shade-lilac stop:nth-child(1) { stop-color: var(--sphere-lilac-hi); }
.shade-lilac stop:nth-child(2) { stop-color: var(--sphere-lilac); }
.shade-lilac stop:nth-child(3) { stop-color: var(--sphere-lilac-lo); }
.shade-orchid stop:nth-child(1) { stop-color: var(--sphere-orchid-hi); }
.shade-orchid stop:nth-child(2) { stop-color: var(--sphere-orchid); }
.shade-orchid stop:nth-child(3) { stop-color: var(--sphere-orchid-lo); }
.ball-grain { mix-blend-mode: soft-light; opacity: 0.28; }
.has-gl .blobs > use { display: none; }

/* Frosted glass disc over the orchid ball; caply.js moves it with the cursor */
.title-wrap { perspective: 900px; --gx: 88%; --gy: 38%; --gr: clamp(56px, 8.4vw, 122px); }
.glass {
  position: absolute; z-index: 0; left: calc(var(--gx) - var(--gr)); top: calc(var(--gy) - var(--gr));
  width: calc(var(--gr) * 2); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-2) 70%);
  border: 1px solid var(--glass-rim);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  will-change: transform;
}
.title-wrap:not(.blobs-ready) .glass { display: none; }
@media (max-width: 40rem) { .glass { display: none; } }
/* Until the script has placed the blobs (or with no script), show the still dots and no navy copy */
.title-wrap:not(.blobs-ready) .blobs, .title-wrap:not(.blobs-ready) .blob-toggle { display: none; }
.title-wrap.blobs-ready .anchor { visibility: hidden; }

.blob-toggle {
  position: absolute; right: 0; bottom: calc(-1 * var(--space-xs)); display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-ink-2); cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform 160ms var(--ease-out);
}
.blob-toggle:hover { color: var(--color-ink); border-color: var(--color-muted); }
.blob-toggle:active { transform: scale(0.94); }
.blob-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.blob-toggle .i-play, .blob-toggle[aria-pressed="true"] .i-pause { display: none; }
.blob-toggle[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 60rem) { .br-wide { display: none; } }
@media (max-width: 40rem) { .balls-gl, .blobs, .anchor, .blob-toggle { display: none; } } /* no room beside the headline on a phone */
.hero-foot {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl);
  align-items: start; margin-top: var(--space-2xl);
}
.lede { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 44ch; }
.quick-row { display: flex; gap: var(--space-xs); }
.quick-row input { flex: 1; min-width: 0; }
.quick-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }
.quick-note strong { color: var(--color-ink-2); font-weight: 600; }
.quick-note a, .consent a { color: var(--color-ink-2); white-space: nowrap; }
.form-status:empty { min-height: 0; }
.hero-demo { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.hero-demo a { color: var(--color-ink); text-decoration: underline; }
.hero-demo a:hover { color: var(--color-focus); }
.answer { margin: var(--space-2xl) 0 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-rule); background: var(--color-paper-3); }
.answer img { width: 100%; }
@media (max-width: 60rem) {
  .hero { padding-top: calc(72px + var(--space-xl)); }
  .hero-foot { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .answer { margin-top: var(--space-xl); }
}
@media (max-width: 26rem) { .quick-row { flex-direction: column; } }

/* ─── Film ────────────────────────────────────────────────────────────── */
.film { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.film .screen { border: 1px solid var(--color-rule); }

/* ─── Why: head left, numbered rows right ─────────────────────────────── */
.why { padding-block: var(--section-gap-s) var(--section-gap); border-top: 1px solid var(--color-rule); }
.why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.why-aside { position: sticky; top: calc(var(--space-3xl) + var(--space-md)); }
.why h2 { max-width: 14ch; }
.why-dots { position: relative; height: clamp(220px, 24vw, 340px); margin-top: var(--space-xl); }
.why-dot { position: absolute; aspect-ratio: 1; }
.why-dot-s { left: 6%; top: 62%; width: clamp(40px, 4.6vw, 66px); }
.why-dot-m { left: 28%; top: 30%; width: clamp(64px, 7.4vw, 106px); }
.why-dot-l { left: 54%; top: 0; width: clamp(92px, 11vw, 158px); }
.rows { margin: 0; padding: 0; list-style: none; counter-reset: why; }
.rows li {
  counter-increment: why; display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--space-lg); row-gap: var(--space-xs);
  padding-block: var(--space-xl); border-top: 1px solid var(--color-rule);
}
.rows li:first-child { padding-top: 0; border-top: 0; }
.rows li::before { content: counter(why); grid-row: span 2; font: 600 var(--text-3xl)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.rows p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .why-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .why-aside { position: static; } .why-dots { display: none; } }

/* ─── Features: each screen at full width under its own line ────────── */
.features { padding-block: var(--section-gap) var(--section-gap-s); }
.features h2 { margin-bottom: var(--space-xl); }
.steps { margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.step h3 { font-size: var(--text-2xl); }
.step p { color: var(--color-ink-2); max-width: 60ch; font-size: var(--text-lg); line-height: 1.5; }
.step p strong { display: block; margin-bottom: var(--space-2xs); color: var(--color-ink); font-weight: 600; }
.step-media { grid-column: 1 / -1; margin: 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-rule); background: var(--color-paper-3); }
.step-media img { width: 100%; }
@media (max-width: 60rem) { .step { grid-template-columns: minmax(0, 1fr); } }

/* ─── Who it's for: a switcher, one role at a time ────────────────────── */
.whom { padding-block: var(--section-gap-l) var(--section-gap); }
.whom h2 { max-width: 18ch; }
.switch { margin-top: var(--space-2xl); }
.switch-tabs { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
html:not(.js) .switch-tabs { display: none; }
.switch-tabs button {
  min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; color: var(--color-ink-2); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.switch-tabs button:hover { color: var(--color-ink); background: var(--color-paper-2); }
.switch-tabs button:active { transform: translateY(1px); }
.switch-tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switch-tabs button[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-focus); }
.switch-panel { margin-top: var(--space-xl); }
.switch-panel p { font: 600 clamp(1.75rem, 2.6vw + 0.5rem, 3rem)/1.18 var(--font-display); letter-spacing: -0.025em; color: var(--color-ink); max-width: 30ch; }
.js .switch-role { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .switch-role { margin-bottom: var(--space-sm); color: var(--color-ink-2); }
html:not(.js) .switch-panel + .switch-panel { padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }

/* ─── Also in the box: a ruled list ───────────────────────────────────── */
.also { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.also-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.also-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.also-list li { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-lg); color: var(--color-ink); }
.also-list svg { flex-shrink: 0; color: var(--color-focus); }
@media (max-width: 60rem) { .also-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .also-list { grid-template-columns: minmax(0, 1fr); } }

/* ─── Notify: the close ───────────────────────────────────────────────── */
.notify { padding-block: var(--section-gap-s); background: var(--color-paper-3); }
.notify-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.notify-copy { display: grid; gap: var(--space-md); }
.notify-copy h2 { max-width: 12ch; margin-bottom: var(--space-xs); }
.notify-copy p { color: var(--color-ink-2); max-width: 46ch; }
.no-spam strong { color: var(--color-ink); }
.form { display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field label, .choice legend { font-size: var(--text-sm); color: var(--color-ink-2); }
.opt { color: var(--color-muted); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; border: 0; }
.choice legend { margin-bottom: var(--space-xs); padding: 0; }
.option { display: flex; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.option:hover { border-color: var(--color-muted); }
.option:has(input:checked) { border-color: var(--color-focus); }
.option strong { display: block; font-weight: 600; }
.option small { display: block; color: var(--color-ink-2); font-size: var(--text-sm); }
.consent { display: flex; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); cursor: pointer; }
@media (max-width: 60rem) { .notify-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }
@media (max-width: 40rem) { .field-row, .choice { grid-template-columns: minmax(0, 1fr); } }

/* ─── Footer: a colophon block ────────────────────────────────────────── */
.footer { padding-block: var(--space-2xl) var(--space-3xl); }
.footer-block { display: grid; gap: var(--space-md); }
.footer p { color: var(--color-muted); font-size: var(--text-sm); max-width: none; }
.footer-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: var(--space-md); padding: 0; border: 0; background: none; color: var(--color-ink-2); font: inherit; text-decoration: underline; cursor: pointer; }
.footer-link:hover { color: var(--color-ink); }

/* ─── Motion ───────────────────────────────────────────────────────────
   Hero: one staggered settle on load. Below: screens rise as they scroll in
   (scroll-driven, off the main thread; static where unsupported). Lists settle
   once in view. Everything is visible with no script and under reduced motion. */
@keyframes enter { from { opacity: 0; transform: translateY(16px); } }
.title-wrap[data-enter] { --i: 0; } .lede[data-enter] { --i: 1; } .quick[data-enter] { --i: 2; } .answer[data-enter] { --i: 3; }
.rows li:nth-child(2), .also-list li:nth-child(2) { --i: 1; } .rows li:nth-child(3), .also-list li:nth-child(3) { --i: 2; }
.rows li:nth-child(4), .also-list li:nth-child(4) { --i: 3; } .also-list li:nth-child(5) { --i: 4; } .also-list li:nth-child(6) { --i: 5; }
.js [data-enter] { animation: enter 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }

.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  /* The video and each feature screen open through a growing circle, like the logo's dots */
  @keyframes iris { from { clip-path: circle(16% at 50% 55%); transform: scale(1.12); } to { clip-path: circle(75% at 50% 50%); transform: none; } }
  .film video { animation: iris linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  .step-media { view-timeline: --shot block; }
  .step-media img { animation: iris linear both; animation-timeline: --shot; animation-range: entry 0% cover 50%; }
}

/* Headings: words rise out of their line, line by line (caply.js splits them) */
.lines-ready .w { display: inline-block; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; vertical-align: top; }
.lines-ready .wi { display: inline-block; transform: translateY(110%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--line, 0) * 110ms); }
.lines-ready.is-in .wi { transform: none; }

/* Role switcher: the new panel fades up as the tab changes */
.switch-panel { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), display 220ms allow-discrete; }
@starting-style { .js .switch-panel { opacity: 0; transform: translateY(6px); } }

/* Press feedback */
.btn:active, .switch-tabs button:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .js [data-enter], .film video, .step-media img { animation: none; }
  .lines-ready .wi { transform: none; transition: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .switch-panel { transition: opacity 220ms var(--ease-out); }
  @starting-style { .js .switch-panel { transform: none; } }
  .btn, .switch-tabs button, .skip, .nav, .blob-toggle { transition: none; }
}

/* ─── Proposal C: the planet journey (only with html.journey-on) ───────── */
.journey { position: relative; overflow: clip; } /* the sticky stage must not hang past the journey into the footer */
.journey-stage { display: none; }
.journey-on .journey-stage {
  display: block; position: sticky; top: 0; z-index: 0; height: 100dvh; margin-bottom: -100dvh; overflow: hidden;
  background:
    radial-gradient(60% 55% at 82% 18%, color-mix(in oklab, var(--glow-a) 30%, transparent), transparent),
    radial-gradient(50% 50% at 12% 70%, color-mix(in oklab, var(--glow-b) 35%, transparent), transparent),
    var(--color-paper);
}
.journey-canvas { display: block; width: 100%; height: 100%; }
.journey-on .journey > section { position: relative; z-index: 1; background: transparent; border-top: 0; }
.journey-on .anchor, .journey-on .blobs, .journey-on .why-dots { display: none; }
/* the journey could not start (journey.js): the light planets stand in for the flat ones */
.journey-fallback .anchor, .journey-fallback .blobs, .journey-fallback .why-dots { display: none; }

/* Why: text on the left, the planet grows on the right */
.journey-on .why { min-height: 190vh; padding-top: 40vh; }
.journey-on .why-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); row-gap: var(--space-2xl); }
.journey-on .why-aside, .journey-on .rows { grid-column: 1; }
.journey-on .why-aside { position: static; }

/* Features: one screen-tall stop per screen; the card sits opposite its 3D panel */
.journey-on .features { padding-top: 60vh; }
.journey-on .features h2 { margin-bottom: 0; }
.journey-on .step { display: flex; align-items: center; min-height: 110vh; padding: 0; border-top: 0; }
.journey-on .step:nth-child(even) { justify-content: flex-end; }
.journey-on .step-media { display: none; }
.step-card { display: grid; gap: var(--space-sm); }
.journey-on .step-card {
  max-width: 420px; padding: var(--space-xl); border: 1px solid var(--glass-rim); border-radius: var(--radius-card);
  background: var(--glass-tint-2); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.journey-on .js .step, .journey-on .step { opacity: 1; }

/* Who: the text holds still on the left while the three houses pass */
.journey-on .whom { height: 330vh; padding: 0; }
.journey-on .whom > .container { position: sticky; top: 72px; min-height: calc(100dvh - 72px); display: flex; flex-direction: column; justify-content: center; }
.journey-on .whom h2, .journey-on .switch-panel { max-width: 44%; }
.journey-on .switch-panel p { font-size: var(--text-2xl); max-width: 24ch; }

/* Also in the box: the items become labels on the globe's pins */
.journey-on .also { height: 260vh; padding: 0; }
.journey-on .also > .container { position: sticky; top: 72px; height: calc(100dvh - 72px); display: block; padding-top: var(--space-2xl); }
.journey-on .also-list { position: absolute; inset: 0; display: block; margin: 0; }
.journey-on .also-list li, .journey-on .also-list li[data-reveal] {
  position: absolute; left: 0; top: 0; padding: var(--space-xs) var(--space-md); border: 1px solid var(--glass-rim); border-radius: var(--radius-pill);
  background: var(--glass-tint-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: var(--text-md); white-space: nowrap; transform: translate(-50%, -100%) translateY(-14px);
  transition: opacity var(--dur-short) var(--ease-out);
}
.js.journey-on .also-list li[data-reveal]:not(.is-on) { opacity: 0; }
.js.journey-on .also-list li[data-reveal].is-on { opacity: 1; }
.journey-on .also > .container { overflow: clip; }

/* The role's name, beside its house */
.house-label {
  position: absolute; left: 0; top: 0; padding: var(--space-xs) var(--space-md); border: 1px solid var(--glass-rim); border-radius: var(--radius-pill);
  background: var(--glass-tint-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 600 var(--text-md)/1.2 var(--font-display); color: var(--color-ink); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out);
}
.house-label.is-on { opacity: 1; }

/* The close: the white balls orbit the purple one, under the copy */
.notify-canvas { display: none; }
.journey-on .notify { position: relative; }
.journey-on .notify-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.journey-on .notify > .container { position: relative; z-index: 1; }
.journey-on .notify-copy { padding-bottom: 300px; }

/* Shooting stars over the hero sky (journey.js adds one now and then) */
.shooting-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.shooting-star {
  position: absolute; width: var(--len, 140px); height: 1.5px; border-radius: 2px; transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent, var(--color-lilac));
  opacity: 0; animation: shoot 1100ms var(--ease-out) forwards;
}
@keyframes shoot {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(calc(var(--len, 140px) * 2.6)); }
}
@media (prefers-reduced-motion: reduce) { .shooting-star { display: none; } }
.journey-on .answer.screen { position: relative; z-index: 1; }
.footer { background: var(--color-paper); }
/* The close: the same night sky as the journey, the planets under a gravity lens */
.journey-on .notify {
  background:
    radial-gradient(55% 70% at 22% 72%, color-mix(in oklab, var(--glow-a) 32%, transparent), transparent),
    radial-gradient(45% 60% at 88% 12%, color-mix(in oklab, var(--glow-b) 38%, transparent), transparent),
    var(--color-paper);
}

/* Who: in the journey the role name heads the text; the house is the picture, no tabs, no floating pill */
.journey-on .switch-tabs { display: none; }
.journey-on .js .switch-role, .js.journey-on .switch-role { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-bottom: var(--space-sm); font-size: var(--text-title); color: var(--color-focus); }
.house-label { display: none; }
/* Pin labels point away from the middle of the planet */
.journey-on .also-list li[data-side="left"] { transform: translate(-100%, -50%) translateX(-18px); }
.journey-on .also-list li[data-side="right"] { transform: translate(0, -50%) translateX(18px); }
.journey-on .also-list li[data-side="top"] { transform: translate(-50%, -100%) translateY(-18px); }

/* Who: the role as a headline with a short orchid bar, the text plain beneath */
.journey-on .switch-panel { transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); } /* no display transition: never two texts at once */
.journey-on .js .switch-role, .js.journey-on .switch-role { display: block; margin: 0 0 var(--space-sm); padding: 0; font: 700 var(--text-title)/1.15 var(--font-display); color: var(--color-ink); }
.journey-on .switch-panel p { font-size: var(--text-xl); line-height: 1.35; color: var(--color-ink-2); max-width: 30ch; }

/* 1 · Headline: the role set big in white, a short orchid bar under it, plain text */
.js.journey-on .whom .switch-role { font-size: clamp(2.5rem, 4vw, 3.75rem); letter-spacing: -0.03em; line-height: 1.02; }
.journey-on .switch-role::after { content: ""; display: block; width: 56px; height: 4px; margin-top: var(--space-md); border-radius: 2px; background: var(--color-focus); }






/* Who: the role text waits until the road has turned toward the houses */
.journey-on .whom .switch, .journey-on .whom .switch-tabs { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.journey-on .whom:not(.is-turned) .switch { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* Also in the box: larger pin labels */
.journey-on .also-list li, .journey-on .also-list li[data-reveal] { font-size: var(--text-lead); padding: var(--space-sm) var(--space-lg); }
.journey-on .also-list li svg { width: 24px; height: 24px; }
/* Who: brighter description, and the block sits higher */
.journey-on .whom .switch-panel p { color: var(--color-ink); }

/* Phones: the role tabs as one scrollable row, never a wrapped pill */
@media (max-width: 40rem) {
  .switch-tabs { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .switch-tabs::-webkit-scrollbar { display: none; }
  .switch-tabs button { flex: none; padding: 0 var(--space-md); font-size: var(--text-sm); }
}

/* Narrow screens with motion and WebGL (html.m3d): the planets sit on a fixed layer behind the page */
.m3d-canvas { display: none; }
.m3d .m3d-canvas { display: block; position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; } /* lvh: the tallest the screen gets, toolbar hidden */
.m3d body { background: radial-gradient(80% 50% at 85% 10%, color-mix(in oklab, var(--glow-a) 22%, transparent), transparent), var(--color-paper); background-attachment: fixed; }
.m3d .features, .m3d .notify, .m3d .why, .m3d .also { background: transparent; }
.m3d .hero { padding-top: calc(72px + 150px); } /* room for the three balls above the headline */
.m3d .nav.is-scrolled { background: color-mix(in oklab, var(--color-paper) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* The 3D fades in once it is built and warmed up (journey.js / mobile3d.js add the ready class) */
.journey-canvas, .m3d-canvas { opacity: 0; transition: opacity 450ms var(--ease-out); }
.journey-ready .journey-canvas, .m3d-ready .m3d-canvas { opacity: 1; }

/* Calls to action: a solid lilac fill with navy text, so "See it live", "Notify me" and "Send" are the
   first thing the eye finds on the dark page (the quiet ghost button keeps the glass look) */
.btn:not(.btn-ghost) {
  background: var(--color-lilac); color: var(--color-accent-ink); border-color: var(--color-lilac);
  font-weight: 700; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--color-accent) 70%, transparent);
  transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform 160ms var(--ease-out);
}
.btn:not(.btn-ghost):hover { background: var(--color-ink); border-color: var(--color-ink); box-shadow: 0 8px 26px -8px color-mix(in oklab, var(--color-accent) 90%, transparent); transform: translateY(-1px); }
.btn:not(.btn-ghost):active { transform: translateY(0) scale(0.98); }
@media (prefers-reduced-motion: reduce) { .btn:not(.btn-ghost):hover { transform: none; } }