/* urtime landing v2 — the scroll story, paper edition.
   Founder direction (July 6, after seeing the navy + the dawn): NO navy
   canvas at all. The whole page is one continuous paper world — the hero
   melts straight into the story, the canvas warms gently to butter for the
   payoff (cream → butter is the only colour move, and it's a same-lightness
   neighbour shift, never a "switch"). Navy lives ONLY in the footer band
   and inside the phone UI. White cards + app pastels carry the tasks. */

/* self-hosted so no visitor IP leaks to Google Fonts (variable font, 200–800) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans.woff2') format('woff2');
}

:root {
  /* Brand accents */
  --color-butter:        #F2C97D;
  --color-butter-press:  #E8B355;

  /* v2 canvas — navy theater, cream islands (hero/faq + two light beats) */
  --navy:                #1E2A4A;
  --navy-deep:           #16203A;
  --color-paper:         #FCFBF8;
  --ink-mut:             rgba(26, 22, 18, 0.62);
  --ink-line:            rgba(26, 22, 18, 0.10);
  --cream-txt:           #F2EFE7;
  --cream-mut:           rgba(242, 239, 231, 0.62);
  --cream-faint:         rgba(242, 239, 231, 0.38);
  --cream-line:          rgba(242, 239, 231, 0.16);

  /* Card ink (dark text on white cards) */
  --color-ink:           #1A1612;

  /* In-app UI palette (phone mockup + task cards) */
  --app-bg:              #F6F4EE;
  --app-navy:            #1E2A4A;
  --app-card-white:      #FFFFFF;
  --app-task-yellow:     #FBF1C8;
  --app-task-sage:       #DDEDD5;
  --app-task-blush:      #F8D5D5;
  --app-lavender:        #E3E7F5;
  --app-confirm:         #7FB97D;

  /* Surfaces */
  --color-white:         #FFFFFF;
  --navy-mut:            rgba(30, 42, 74, 0.55);

  /* story headline ink (constant — the stage is always light now) */
  --stage-ink:           #1A1612;

  /* Radii */
  --radius-sm:   8px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  --shadow-card: 0 6px 20px rgba(26, 22, 18, 0.12), 0 2px 6px rgba(26, 22, 18, 0.07); /* tuned for the paper canvas */

  /* motion signature — one set of curves, reused, so the whole page moves
     like it was made by one hand (ease-out-soft for travel/fade, spring for
     tactile press feedback only) */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  font-size: 16px;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: clip;
}

/* scroll journey line + dot — behind all content (z 0); deeper bands (z 1)
   hide the line; the sticky stage sits at z 2. */
.journey {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.journey-path {
  fill: none;
  stroke: rgba(26, 22, 18, 0.12); /* ink hairline on the paper canvas */
  stroke-width: 2;
  stroke-linecap: round;
}
.journey-tail {
  fill: none;
  stroke: var(--color-butter);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.55;
}
.journey-halo { fill: var(--color-butter); opacity: 0.16; }
.journey-dot  { fill: var(--color-butter); opacity: 0; transition: opacity 300ms ease; }

@media (prefers-reduced-motion: reduce) {
  .journey { display: none; }
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink);
  /* --navy-live (historical name) = the page canvas, scroll-driven by
     initStory's render(p): paper for the whole story, warming to butter over
     the final stretch. the dark sticky nav reads the same var. */
  background-color: var(--navy-live, var(--color-paper));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: inline-block; vertical-align: middle; }

a { color: inherit; }

.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;
}

/* ============ layout primitives ============ */

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px)  { .container { padding-inline: 40px; } }
@media (min-width: 1024px) { .container { padding-inline: 64px; } }

.paper-grain { position: relative; }
.paper-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  z-index: 0;
}
.paper-grain > .container { position: relative; z-index: 2; }

/* ============ type ============ */

.logo-word {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-ink);
}
.logo-word--footer { color: var(--cream-txt); }
.logo-word--footer { font-size: 1.625rem; }
.brand-i { position: relative; }
.brand-dot {
  position: absolute;
  left: 50%;
  --dot-nudge: 0.019em;
  transform: translateX(calc(-50% + var(--dot-nudge)));
  bottom: 0.82em;
  width: 0.17em;
  height: 0.17em;
  border-radius: 50%;
  background: var(--color-butter);
  transition: opacity 300ms ease;
}
.dot-pulse { animation: dotLand 700ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dotLand {
  0%   { transform: translateX(calc(-50% + var(--dot-nudge))) scale(0.3); }
  60%  { transform: translateX(calc(-50% + var(--dot-nudge))) scale(1.6); }
  100% { transform: translateX(calc(-50% + var(--dot-nudge))) scale(1); }
}

.section-h2 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.024em;
  color: var(--cream-txt);
}
@media (max-width: 767px) { .section-h2 { font-size: 1.75rem; } }

.butter-star { color: var(--color-butter); font-style: normal; }

/* ============ buttons ============ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-butter);
  color: var(--color-ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26, 22, 18, 0.10);
  transition: background-color 150ms var(--ease-out-soft),
              transform 200ms var(--ease-out-soft),
              box-shadow 200ms var(--ease-out-soft);
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover  { background-color: var(--color-butter-press); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26, 22, 18, 0.16); }
.btn-primary:active { transform: translateY(0) scale(0.97); transition-duration: 90ms; box-shadow: 0 2px 8px rgba(26, 22, 18, 0.10); }
.btn-primary:focus-visible {
  outline: 2px solid var(--color-butter-press);
  outline-offset: 3px;
}
/* signup CTAs are inert "opens soon" pills until the app opens */
.btn-primary.btn-disabled {
  background: transparent;
  color: var(--ink-mut);
  border: 1.5px solid var(--ink-line);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.nav--navy .btn-disabled { color: var(--cream-mut); border-color: var(--cream-line); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.btn-ghost:hover { opacity: 0.65; }
.btn-ghost:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.btn-ghost .icon { width: 16px; height: 16px; stroke-width: 2; }

/* ============ icons ============ */

svg.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

/* ============ nav ============ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* fallback: ride the page canvas (paper → butter, JS-driven var) */
  background: var(--navy-live, var(--color-paper));
  transition: background-color 400ms ease, border-bottom-color 200ms ease;
  border-bottom: 1px solid transparent;
}
/* frosted vellum: the section underneath shows through softly blurred, so the
   nav never clashes with the band it's floating over */
@supports (background: color-mix(in srgb, red 50%, transparent)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav {
    background: color-mix(in srgb, var(--navy-live, #FCFBF8) 60%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
  }
}
.nav--scrolled { border-bottom-color: rgba(26, 22, 18, 0.10); }
/* over the navy footer band a cream veil goes muddy — flip to navy glass */
.nav--navy { background: rgba(22, 32, 58, 0.92); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav--navy { background: rgba(22, 32, 58, 0.66); }
}
.nav--navy .logo-word, .nav--navy .btn-ghost { color: var(--cream-txt); }
.nav--navy.nav--scrolled { border-bottom-color: var(--cream-line); }
.nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  text-decoration: none;
}
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav .btn-primary { padding: 10px 20px; font-size: 0.875rem; }
.nav-howlink { min-height: 44px; }
@media (max-width: 767px) { .nav-howlink { display: none; } }

/* ============ hero (short — the story is the page) ============ */

.hero {
  /* short of the fold on purpose — the story's first headline + a couple of
     chips peek above the fold at rest, which IS the scroll invite */
  min-height: calc(72vh - 64px);
  min-height: calc(72svh - 64px);
  display: flex;
  align-items: center;
  padding-block: 56px 48px;
  background: var(--color-paper);
  position: relative;
  z-index: 1; /* opaque island — the journey line passes behind */
  overflow: hidden;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}
.hero-inner { position: relative; max-width: 560px; min-width: 0; text-align: left; }

/* at headline scale the butter i-dot is the motif's origin — let it read */
.hero-h1 .brand-dot { width: 0.20em; height: 0.20em; bottom: 0.80em; }

.hero-h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.45rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-ink);
}
.h1-line { display: block; }
/* the middle line reads lost — quieter ink so the last line's resolve lands */
.h1-line--quiet { margin-top: 0.08em; color: rgba(26, 22, 18, 0.55); }

.hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  animation: wordUp 550ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes wordUp { to { opacity: 1; transform: translateY(0); } }
.rise {
  opacity: 0;
  animation: riseUp 600ms ease-out forwards;
}
@keyframes riseUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.underline-wrap { position: relative; display: inline-block; }
.butter-underline {
  position: absolute;
  left: -2px;
  bottom: -8px;
  width: 100%;
  height: 12px;
  overflow: visible;
}
.butter-underline path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}
.hero-h1 .butter-underline path { animation: drawUnderline 600ms 1500ms ease-out forwards; }
@keyframes drawUnderline { to { stroke-dashoffset: 0; } }

/* ---- hero background: aceternity "background gradient animation" ----
   ported from React/Tailwind to vanilla, retuned for the cream canvas. the
   original uses mix-blend-mode:hard-light on a dark bg — on near-white paper
   that vanishes, so this drops the blend and rides on soft alpha + heavy blur
   instead. drift is transform-only (compositor carries it; this page can't
   afford paint storms — blur is static per-layer, never animated). warmth
   pools centre-right behind the demo; the far-left stays clean so the dark
   headline keeps its contrast. keyframes = the original move* set. */
.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* melt the field into the paper at every edge so nothing hard-cuts into the story */
  -webkit-mask-image: radial-gradient(ellipse 118% 104% at 56% 40%, #000 42%, transparent 86%);
          mask-image: radial-gradient(ellipse 118% 104% at 56% 40%, #000 42%, transparent 86%);
}
.hg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
}
/* sage — the broad soft field */
.hg-3 {
  width: 52%; height: 88%; top: 2%; left: 20%;
  background: radial-gradient(circle at 50% 50%, rgba(221, 237, 213, 0.55), transparent 60%);
  transform-origin: calc(50% + 15vw) 50%;
  animation: hgCircle 42s linear infinite;
}
/* butter — the warm core */
.hg-1 {
  width: 46%; height: 78%; top: 6%; left: 40%;
  background: radial-gradient(circle at 50% 50%, rgba(242, 201, 125, 0.5), transparent 62%);
  animation: hgVertical 30s ease-in-out infinite;
}
/* blush — right side */
.hg-2 {
  width: 42%; height: 70%; top: 12%; left: 52%;
  background: radial-gradient(circle at 50% 50%, rgba(248, 213, 213, 0.5), transparent 62%);
  transform-origin: calc(50% - 14vw) 50%;
  animation: hgCircle 26s linear infinite reverse;
}
/* lavender — cool balance, lower centre */
.hg-4 {
  width: 40%; height: 66%; top: 24%; left: 30%;
  background: radial-gradient(circle at 50% 50%, rgba(227, 231, 245, 0.5), transparent 62%);
  animation: hgHorizontal 38s ease-in-out infinite;
}
/* butter spark — small tight orbit inside the core */
.hg-5 {
  width: 28%; height: 46%; top: 30%; left: 48%;
  background: radial-gradient(circle at 50% 50%, rgba(242, 201, 125, 0.42), transparent 58%);
  transform-origin: calc(50% + 10vw) 50%;
  animation: hgCircle 22s ease-in-out infinite;
}
@keyframes hgVertical {
  0%, 100% { transform: translateY(-8%); }
  50%      { transform: translateY(8%); }
}
@keyframes hgHorizontal {
  0%, 100% { transform: translateX(-10%) translateY(-4%); }
  50%      { transform: translateX(10%) translateY(4%); }
}
@keyframes hgCircle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* the one that follows the cursor (aceternity's "interactive" blob). sized to
   the container, centred on its origin so a JS translate parks the glow right
   under the pointer. no keyframe — script.js eases the transform toward the
   mouse; on touch / reduced-motion it just sits centred. */
.hg-interactive {
  width: 100%; height: 100%; top: 0; left: 0;
  background: radial-gradient(circle at 50% 50%, rgba(242, 201, 125, 0.5), transparent 46%);
}

/* (no hero seam — the hero and the story share the same paper canvas) */

/* floating task chips — the story's pile teased around the centred pitch;
   the white bubble is urtime's reply. hidden (bubble excepted) under 1024px. */
.hero .container { position: relative; }

/* ---- the hero demo: messy pile → drawn arrow → the day it became ---- */
.hero-demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.hero-chipstack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  flex-shrink: 0;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 12px;
  border-left: 3px solid transparent;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--app-navy);
  box-shadow: 0 2px 12px rgba(26, 22, 18, 0.10);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: chipIn 600ms ease-out var(--chip-in, 1300ms) forwards,
             heroFloat var(--chip-float, 7s) ease-in-out calc(var(--chip-in, 1300ms) + 600ms) infinite alternate;
}
@keyframes chipIn { to { opacity: 1; } }
@keyframes heroFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}
.hero-chip .s-lock { width: 12px; height: 12px; opacity: 0.6; }
.hc-yellow { background: var(--app-task-yellow); border-left-color: #E5C75F; rotate: -2.5deg; margin-right: 8px;  --chip-in: 1250ms; --chip-float: 6.5s; }
.hc-blush  { background: var(--app-task-blush);  border-left-color: #E89090; rotate: 1.6deg;  margin-right: -6px; --chip-in: 1450ms; --chip-float: 7.5s; }
.hc-sage   { background: var(--app-task-sage);   border-left-color: #9CC394; rotate: 2deg;    margin-right: 20px; --chip-in: 1650ms; --chip-float: 8s; }
.hero-flow {
  width: 94px;
  flex-shrink: 0;
  color: var(--color-butter-press);
  overflow: visible;
}
.hf-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawFlow 720ms ease-out 2300ms forwards;
}
.hf-head {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawFlow 320ms ease-out 2900ms forwards;
}
@keyframes drawFlow { to { stroke-dashoffset: 0; } }
.hero-phone {
  rotate: 1.4deg;
  animation: heroFloat 9s ease-in-out 3.2s infinite alternate;
}
@media (min-width: 1200px) {
  /* keep the hero side-by-side but shrink the demo so the headline never gets squeezed */
  .hero-phone { width: 206px; height: 412px; }
  .hero-phone .phone-frame { transform: scale(0.735); transform-origin: top center; }
  .hero-flow { width: 72px; }
  .hero-chip { font-size: 0.72rem; }
}
@media (max-width: 1199px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-inner { margin-inline: auto; text-align: center; max-width: 640px; }
  .hero-demo { flex-direction: column; justify-content: center; gap: 20px; }
  .hero-chipstack { flex-direction: column; align-items: center; }
  .hc-yellow { margin-right: 0; }
  .hc-blush  { margin-right: -28px; }
  .hc-sage   { margin-right: 34px; }
  .hero-flow { transform: rotate(90deg); width: 66px; margin-block: -8px; }
}
@media (max-width: 767px) {
  /* phones: the demo phone renders full-size otherwise — shrink it + the chips */
  .hero-phone .phone-frame { transform: scale(0.72); transform-origin: top center; }
  .hero-chip { font-size: 0.72rem; padding: 7px 11px; }
}

.cta-row {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}
@media (max-width: 1199px) { .cta-row { justify-content: center; } }

/* ============ what it does — the whole pitch, scannable in one line ============ */
.howstrip {
  position: relative;
  z-index: 1;
  padding-block: 18px 52px;
}
.strip-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 30px;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.strip-steps li {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  translate: 0 0;
  transition: translate 320ms ease;
}
.strip-steps li + li::before {
  content: '→';
  font-weight: 700;
  color: var(--ink-mut);
  opacity: 0.5;
  translate: 0 0;
  transition: color 320ms, opacity 320ms, translate 320ms;
}

/* the highlighter relay: a butter marker sweeps behind each step in turn,
   lighting the pitch on loop (JS toggles .lit / .done) */
.strip-steps .ss { position: relative; color: rgba(26, 22, 18, 0.5); }
.strip-steps .ss::before {
  content: '';
  position: absolute;
  inset: -3px -12px -6px -10px;
  background: var(--color-butter);
  opacity: 0.5;
  border-radius: 9px;
  transform: scaleX(0) skewX(-6deg);
  transform-origin: left center;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
  z-index: -1;
}
.strip-steps li.lit { translate: 0 -2px; }
.strip-steps li.lit .ss { color: var(--color-ink); }
.strip-steps li.lit .ss::before { transform: scaleX(1) skewX(-6deg); opacity: 0.5; }
.strip-steps li.done .ss { color: var(--color-ink); }
.strip-steps li.done .ss::before { transform: scaleX(1) skewX(-6deg); opacity: 0.16; }
/* the arrow BEFORE a lit/done step warms up (arrow belongs to li + li::before) */
.strip-steps li.lit::before,
.strip-steps li.done::before {
  color: var(--color-butter-press);
  opacity: 1;
  translate: 2px 0;
}

/* static / reduced motion: land the whole strip resolved even before JS runs */
body.static-mode .strip-steps li .ss::before { transform: scaleX(1) skewX(-6deg); }
body.static-mode .strip-steps li .ss { color: var(--color-ink); }

@media (max-width: 767px) {
  .howstrip { padding-block: 8px 34px; }
  .strip-steps { font-size: 1.05rem; gap: 8px 16px; }
  .strip-steps li { gap: 16px; }
}

/* ============ the story (sticky stage, scroll-scrubbed) ============ */

.story {
  height: 520vh; /* 6 beats + payoff — the short cut of the story */
  position: relative;
}
.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: 2; /* above the journey line */
}
.story-stage {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 64px;
}

/* headline rail — one big line per beat, position varies per scene */
.story-head { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.sh { position: absolute; top: 12vh; opacity: 0; }
.sh-pos-l { left: 64px; max-width: 580px; }
.sh-pos-r { right: 64px; max-width: 580px; text-align: right; }
.sh-pos-c { left: 0; right: 0; margin-inline: auto; width: min(780px, 88%); text-align: center; }
.sh-h {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
  /* --stage-ink flips cream→ink as the canvas warms to butter (initStory) */
  color: var(--stage-ink, var(--cream-txt));
  transition: color 400ms ease;
}
/* the payoff: words left, the eased day standing still on the right */
.sh--payoff { top: 36vh; max-width: 460px; pointer-events: auto; }
@media (min-width: 768px) and (max-width: 1100px) {
  .sh--payoff { max-width: 380px; }
  .stage-phone--payoff { right: 6%; transform: translateY(-50%) translateY(var(--rise, 0px)) scale(1); }
}
.sh--payoff .sh-h { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.sh--payoff .btn-primary { margin-top: 28px; box-shadow: 0 6px 18px rgba(26, 22, 18, 0.10); } /* keeps the butter CTA lifted off the arrived butter canvas */

/* the brain-dump chips — white app-flavoured cards, JS owns transform/opacity */
.chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chip {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-white);
  border: none;
  border-left: 4px solid var(--app-task-yellow);
  border-radius: 12px;
  padding: 9px 15px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-navy);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
}
.chip:nth-child(3n+2) { border-left-color: #9CC394; }
.chip:nth-child(3n)   { border-left-color: #E89090; }
/* idle bob rides the separate `translate` property — it composes with the
   JS-owned inline transform, so the scroll choreography is untouched */
@keyframes chipBob { from { translate: 0 0; } to { translate: 0 -9px; } }
.chip { animation: chipBob 5.2s ease-in-out infinite alternate; }
.chip:nth-child(2n) { animation-duration: 6.6s; animation-delay: -2.1s; }
.chip:nth-child(3n) { animation-duration: 7.4s; animation-delay: -3.6s; }

/* the phone — stands at the right from beat 1 (empty day), eats the pile at
   the hand-over, then leaves; the reasoning beats stay phone-free */
.stage-phone {
  position: absolute;
  top: 50%;
  right: 7%;
  z-index: 4;
  opacity: 0;
  transform: translateY(-46%) translateY(var(--rise, 0px));
  will-change: transform, opacity;
}

/* the payoff phone: the day AFTER the tired reflow — bigger, more central,
   with a butter halo: this is the result the whole scroll was building to */
.stage-phone--payoff {
  right: 16%;
  transform: translateY(-50%) translateY(var(--rise, 0px)) scale(1.10);
}
.stage-phone--payoff::before {
  content: '';
  position: absolute;
  inset: -8% -30%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 55%, rgba(242, 201, 125, 0.55), transparent 68%);
}

/* ============ the scenes — each beat gets its own graphic world ============
   scene chrome is ink-on-paper throughout. */

.scene { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* task cards: white, app-navy text, pastel edge — the app's language, big */
.strip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-white);
  border-left: 5px solid var(--app-task-yellow);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 18px 22px;
  min-width: 350px;
  color: var(--app-navy);
  opacity: 0;
  transform: translateY(26px) rotate(var(--tilt, 0deg));
  transition: opacity 380ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.strip.on { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
.strip.ring { animation: stripRing 1100ms ease-out; }
@keyframes stripRing {
  0%   { box-shadow: 0 0 0 0 rgba(242, 201, 125, 0.55), var(--shadow-card); }
  100% { box-shadow: 0 0 0 16px rgba(242, 201, 125, 0), var(--shadow-card); }
}
.s-time {
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--color-butter);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  flex-shrink: 0;
}
.s-body { display: flex; flex-direction: column; min-width: 0; }
.s-body b { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.s-body span { font-size: 0.875rem; color: var(--navy-mut); margin-top: 2px; }
.s-tag {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1.5px solid var(--app-navy);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  flex-shrink: 0;
}
.s-tag--soft { border-style: dashed; border-color: rgba(30, 42, 74, 0.45); color: var(--navy-mut); font-weight: 600; }
.s-lock { width: 12px; height: 12px; stroke-width: 2; }
.s-min {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--color-butter);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  flex-shrink: 0;
}

/* beat A: deadlines first — a slot rail, and math locks into the front slot */
.rail {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 56%;
  border-top: 2px dashed rgba(26, 22, 18, 0.16);
  opacity: 0;
  transition: opacity 400ms ease;
}
.rail.on { opacity: 1; }
.rail i {
  position: absolute;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 22, 18, 0.22);
}
.rail i:nth-child(1) { left: 8%; }
.rail i:nth-child(2) { left: 38%; }
.rail i:nth-child(3) { left: 66%; }
.rail i:nth-child(4) { left: 92%; }
.rail-ring {
  position: absolute;
  left: 8%;
  top: -21px;
  width: 40px;
  height: 40px;
  margin-left: -16px;
  border: 2.5px solid var(--color-butter);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 350ms ease, transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rail-ring.on { opacity: 1; transform: scale(1); }
.ghost-time {
  position: absolute;
  left: 12%;
  top: 16%;
  font-size: clamp(6rem, 12vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(26, 22, 18, 0.055);
  opacity: 0;
  transition: opacity 500ms ease;
  user-select: none;
}
.ghost-time.on { opacity: 1; }
.st-math { left: 20%; top: 40%; --tilt: -1.2deg; min-width: 480px; padding: 24px 28px; }
.st-math .s-body b { font-size: 1.4rem; }
.st-math .s-time { font-size: 1rem; padding: 7px 15px; }
.st-read { left: 52%; top: 63%; --tilt: 1.5deg; min-width: 320px; padding: 14px 20px; border-left-color: var(--app-task-blush); }
.strip--side .s-body b { font-size: 1.05rem; }
.st-read.on.away { transform: translateY(0) translateX(130px) rotate(3deg); opacity: 0.35; }

/* beat B: study plan — a 20-minute dial splits as the steps appear */
.sgroup { position: absolute; }
.sgroup .strip { position: relative; }
.sgroup-b { right: 8%; top: 23%; width: min(500px, 84%); }
.st-essay { --tilt: 1deg; border-left-color: var(--app-task-blush); }
.strip--step {
  min-width: 0;
  width: fit-content;
  margin: 14px 0 0 64px;
  padding: 10px 16px;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  border-left-width: 4px;
  border-left-color: var(--app-task-sage);
  border-radius: 10px;
  transform: translateY(14px) rotate(var(--tilt, 0deg));
}
.st-s1 { --tilt: -0.6deg; }
.st-s2 { --tilt: 0.8deg; }
.st-s3 { --tilt: -0.4deg; }
.b-bracket {
  position: absolute;
  left: 26px;
  top: 78px;
  width: 34px;
  height: 152px;
  color: rgba(232, 179, 85, 0.8); /* butter-press — plain butter melts into cream */
  opacity: 0;
  transition: opacity 320ms ease;
}
.b-bracket path { stroke-width: 2.5; }

/* the prep pass: a material attaches to a step, marked ready (real V2 behavior) */
.b-bracket.on { opacity: 1; }
.dial {
  position: absolute;
  left: 14%;
  top: 31%;
  width: 190px;
  height: 190px;
  opacity: 0;
  transition: opacity 400ms ease;
}
.dial.on { opacity: 1; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 350ms ease, stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dial .d-track { stroke: rgba(26, 22, 18, 0.10); opacity: 1; }
.d-s1 { stroke: var(--color-butter); stroke-dasharray: 23 100; stroke-dashoffset: 0; }
.d-s2 { stroke: #DDEDD5; stroke-dasharray: 48 100; stroke-dashoffset: -25; }
.d-s3 { stroke: #F8D5D5; stroke-dasharray: 23 100; stroke-dashoffset: -75; }
.d-s1.on, .d-s2.on, .d-s3.on { opacity: 1; }
.dial-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-ink);
  font-size: 1.6rem;
  line-height: 1.1;
}
.dial-label small { font-size: 0.75rem; font-weight: 600; color: var(--ink-mut); }

/* beat C: fixed stays fixed — lock rings hold, ghosts drift past */
.st-gym { left: calc(50% - 200px); top: 44%; --tilt: 0deg; border-left-color: var(--app-task-sage); }
.pinring {
  position: absolute;
  left: 50%;
  top: calc(44% + 34px);
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border: 1.5px solid var(--cream-line);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 450ms ease, transform 600ms ease;
}
.pinring.on { opacity: 1; transform: scale(1); }
.pinring { border-color: rgba(26, 22, 18, 0.20); }
.pr-1 { --d: 320px; }
.pr-2 { --d: 470px; border-color: rgba(26, 22, 18, 0.13); }
.pr-3 { --d: 640px; border-color: rgba(26, 22, 18, 0.08); }
.strip--ghost {
  min-width: 0;
  padding: 10px 18px;
  background: rgba(26, 22, 18, 0.055);
  border-left: none;
  border-radius: 10px;
  box-shadow: none;
  color: var(--ink-mut);
  transform: translateX(-130px) skewX(-6deg);
  transition: opacity 500ms ease, transform 1500ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.strip--ghost .s-body b { font-size: 1rem; font-weight: 600; }
.st-g1 { left: 14%; top: 32%; }
.st-g1.on { opacity: 0.8; transform: translateX(130px) skewX(-6deg); }
.st-g1.on.gone { opacity: 0; transform: translateX(300px) skewX(-6deg); }
.st-g2 { left: 20%; top: 62%; transform: translateX(-150px) skewX(-6deg); }
.st-g2.on { opacity: 0.65; transform: translateX(110px) skewX(-6deg); }
.st-g2.on.gone { opacity: 0; transform: translateX(280px) skewX(-6deg); }



/* beat E: the tired reflow — pastel bars whose width IS the duration */
.scene-t { opacity: 0; transition: opacity 300ms ease; }
.scene-t.live { opacity: 1; }
.mini {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translateX(-50%);
  width: min(520px, 86%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mrow {
  position: relative;
  height: 50px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mrow.on { opacity: 1; transform: none; }
.m-full, .m-eased {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 320ms ease;
}
.m-eased { opacity: 0; }
.bar {
  width: var(--w, 100%);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--app-task-yellow);
  color: var(--app-navy);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 0 14px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bar--blush { background: var(--app-task-blush); }
.bar--sage  { background: var(--app-task-sage); }
.bar .s-min { background: rgba(30, 42, 74, 0.12); color: var(--app-navy); }
.bar-out {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-mut);
  white-space: nowrap;
}
.m-dashed {
  flex: 1;
  height: 100%;
  border: 1.5px dashed rgba(26, 22, 18, 0.25);
  border-radius: 12px;
  color: var(--ink-mut);
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini.eased .m-full { opacity: 0; }
.mini.eased .m-eased { opacity: 1; transition-delay: 140ms; }
/* the break row doesn't exist until the day eases — air literally appears */
.mrow-break { height: 0; transition: height 420ms ease, opacity 300ms ease, transform 380ms ease; }
.mini.eased .mrow-break { height: 40px; }

/* the tired exchange, quoted around the stack */
.bub {
  position: absolute;
  width: 230px;
  background: var(--color-white);
  color: var(--app-navy);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 350ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bub.on { opacity: 1; transform: translateY(0); }
.bub-who {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy-mut);
  margin-bottom: 2px;
}
.bub-user  { left: calc(50% - 460px); top: 24%; border-radius: 14px 14px 4px 14px; rotate: -1deg; }
.bub-reply { left: calc(50% + 285px); top: 63%; border-radius: 14px 14px 14px 4px; }

/* the hand-over: the one messy text that starts everything (lives outside
   scene-t — it belongs to the phone cameo beat, still on navy) */
.bub--handover {
  left: 12%;
  top: 40%;
  width: 260px;
  border-radius: 14px 14px 4px 14px;
  rotate: -1.2deg;
  z-index: 4;
}

/* ============ phone frame + today screen (in-app UI, unchanged) ============ */

.phone-frame {
  width: 280px;
  height: 560px;
  border-radius: 36px;
  border: 2px solid rgba(26, 22, 18, 0.30);
  background: var(--app-bg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(26, 22, 18, 0.18);
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--color-ink);
}
.screen-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.phone-frame::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 6px;
  background: var(--app-navy);
  border-radius: 3px;
  opacity: 0.25;
  z-index: 5;
}

.bottom-tabs {
  display: flex;
  background: var(--app-card-white);
  border-top: 1px solid rgba(30, 42, 74, 0.08);
  padding: 7px 6px 10px;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--app-navy);
  opacity: 0.45;
}
.tab .icon { width: 16px; height: 16px; }
.tab .tab-ico { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-pill); }
.tab.active { opacity: 1; }
.tab.active .tab-ico { background: var(--app-lavender); }

.icon.zap  { width: 11px; height: 11px; stroke-width: 2; }
.icon.lock { width: 10px; height: 10px; stroke-width: 2; opacity: 0.6; }

.today-header {
  padding: 28px 14px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.today-date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--app-navy);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hdr-chev { width: 11px; height: 11px; opacity: 0.6; }
.strip-chev {
  width: 12px;
  height: 12px;
  align-self: center;
  color: var(--app-navy);
  opacity: 0.4;
  flex-shrink: 0;
}
.today-pill {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--app-navy);
  background: var(--app-lavender);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.day-strip {
  display: flex;
  gap: 6px;
  padding: 6px 14px 10px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(30, 42, 74, 0.08);
}
.ds { opacity: 0; transition: opacity 300ms ease-out; }
.ds.on { opacity: 1; }
.day {
  width: 38px;
  padding: 5px 0;
  border-radius: 10px;
  text-align: center;
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(30, 42, 74, 0.55);
  line-height: 1.3;
}
.day b { display: block; font-size: 11.5px; }
.day.sel { background: var(--app-navy); color: #fff; }
.day.today-ring {
  border: 1.5px solid var(--app-navy);
  background: var(--app-card-white);
  color: var(--app-navy);
  padding: 3.5px 0;
}

.timeline {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.t-row {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: stretch;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 320ms ease-out, transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.t-row.on { opacity: 1; transform: none; }
.t-block.lock-confirm { animation: lockConfirm 900ms ease-out; }
@keyframes lockConfirm {
  0%   { box-shadow: 0 0 0 0 rgba(30, 42, 74, 0); }
  30%  { box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(30, 42, 74, 0); }
}
.t-time {
  width: 44px;
  font-size: 8.5px;
  color: rgba(26, 22, 18, 0.45);
  padding-top: 5px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums; /* digits don't jitter when the eased day swaps in */
}
.t-dur, .day b, .s-min, .s-time { font-variant-numeric: tabular-nums; }
.t-block {
  flex: 1;
  border-radius: 12px;
  padding: 7px 10px;
  background: var(--app-card-white);
  position: relative;
  min-height: 46px;
  border-left: 3px solid transparent;
}
.t-block.blush   { border-left-color: #E89090; }
.t-block.sage    { border-left-color: #9CC394; }
.t-block.tyellow { border-left-color: #E5C75F; }
.t-block .grip {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}
.t-block .grip svg { fill: var(--app-navy); opacity: 0.3; }
.t-block .grip ~ .bt, .t-block .grip ~ .bs { margin-left: 12px; }
.gbadge {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--app-card-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.t-block .bt {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--app-navy);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 36px;
}
.t-block .bs {
  font-size: 8.5px;
  color: rgba(30, 42, 74, 0.55);
  margin-top: 2px;
}
.t-dur {
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: 8px;
  font-weight: 600;
  background: rgba(30, 42, 74, 0.08);
  border-radius: var(--radius-pill);
  padding: 2px 6px;
  color: var(--app-navy);
}
.blush   { background: var(--app-task-blush); }
.sage    { background: var(--app-task-sage); }
.tyellow { background: var(--app-task-yellow); }
.t-free {
  flex: 1;
  border: 1px dashed rgba(26, 22, 18, 0.20);
  border-radius: 10px;
  font-size: 8.5px;
  color: rgba(26, 22, 18, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-height: 26px;
}

.fab-mic {
  position: absolute;
  bottom: 68px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--app-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(30, 42, 74, 0.30);
  z-index: 4;
}

/* ============ vs chatbots (alive vs still) ============ */

/* the handles summary + comparison + founder note form ONE white band after
   the story. the top of the band (now .handles) bridges from the arrived
   warm-white canvas (#FDF6E8 = initStory's p=1 colour) up to pure white —
   no seam. z-index 1 keeps the journey line dipping behind the band. */
.handles {
  padding-block: 96px 36px;
  color: var(--color-ink);
  background-color: var(--color-white);
  background-image: linear-gradient(to bottom, #FDF6E8 0, #FEFCF7 16vh, #FFFFFF 34vh);
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.handles .section-h2 { text-align: center; color: var(--color-ink); }
.handles-grid {
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  max-width: 1020px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.handles-grid li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--color-white);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
}
.h-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--app-task-yellow);
  color: var(--app-navy);
}
.h-ico .icon { width: 16px; height: 16px; }
.handles-grid li:nth-child(4n+2) .h-ico { background: var(--app-task-sage); }
.handles-grid li:nth-child(4n+3) .h-ico { background: var(--app-task-blush); }
.handles-grid li:nth-child(4n)   .h-ico { background: var(--app-lavender); }
.handles-grid b { display: block; font-size: 0.95rem; font-weight: 700; color: var(--app-navy); }
.handles-grid li div span {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-mut);
}
@media (max-width: 1023px) {
  .handles-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}
@media (max-width: 560px) {
  .handles { padding-block: 64px 20px; }
  .handles-grid { grid-template-columns: 1fr; max-width: 420px; }
}

.versus {
  padding-block: 56px 72px;
  color: var(--color-ink);
  background-color: var(--color-white);
  position: relative;
  z-index: 1;
}
.versus .section-h2 { text-align: center; color: var(--color-ink); }
.vs-h2-dim { color: rgba(26, 22, 18, 0.5); }
.vs-sub { text-align: center; color: var(--ink-mut); font-size: 1.02rem; margin-top: 12px; }

/* the head-to-head: a clean two-column table split by a centre spine — the
   chatbot's answers on the left (muted, crossed off), urtime's on the right
   (a faint butter wash, checked). same topics, two takes, read straight across. */
.vs-table {
  position: relative;
  max-width: 760px;
  margin: 40px auto 0;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(to right, transparent 0 50%, rgba(242, 201, 125, 0.06) 50%);
  box-shadow: 0 14px 36px rgba(26, 22, 18, 0.08);
}
/* the centre spine dividing the two columns */
.vs-panel {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--ink-line);
}
.vs-labels,
.vs-row { display: grid; grid-template-columns: 1fr 1fr; }
.vs-labels { border-bottom: 1px solid var(--ink-line); }
.vs-lbl {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 24px;
  font-weight: 700; font-size: 1rem;
}
.vs-lbl--them { color: var(--ink-mut); }
.vs-lbl--us { color: var(--app-navy); }
.vs-rows .vs-row { border-top: 1px solid var(--ink-line); }
.vs-rows .vs-row:first-child { border-top: none; }
.vs-them, .vs-us {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 15px 24px;
  font-size: 0.95rem; line-height: 1.45;
  text-align: left;
}
.vs-them { color: var(--ink-mut); }
.vs-them::before {
  content: '\2715';
  color: rgba(26, 22, 18, 0.34); font-weight: 700; line-height: 1.5;
  flex-shrink: 0;
}
.vs-us { color: var(--app-navy); font-weight: 500; }

/* presence dots: urtime is online, the chatbot isn't */
.vs-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vs-dot--off { background: rgba(26, 22, 18, 0.25); }
.vs-dot--live { background: var(--color-butter); animation: livePing 2.6s ease-out infinite; }
@keyframes livePing {
  0%   { box-shadow: 0 0 0 0 rgba(242, 201, 125, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(242, 201, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 201, 125, 0); }
}
.vs-check {
  width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0;
  stroke: var(--app-confirm); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.vs-check path { stroke-dasharray: 30; stroke-dashoffset: 30; }

/* one calm reveal on scroll-in (.vs-live): the table fades up, rows rise, checks draw */
.vs-table { opacity: 0; transform: translateY(12px); transition: opacity 700ms ease, transform 700ms ease; }
.vs-row { opacity: 0; transform: translateY(10px); transition: opacity 460ms ease, transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.vs-check path { transition: stroke-dashoffset 420ms ease; }
.vs-live .vs-table { opacity: 1; transform: none; }
.vs-live .vs-row { opacity: 1; transform: none; }
.vs-live .vs-rows .vs-row:nth-child(1) { transition-delay: 0.12s; }
.vs-live .vs-rows .vs-row:nth-child(2) { transition-delay: 0.24s; }
.vs-live .vs-rows .vs-row:nth-child(3) { transition-delay: 0.36s; }
.vs-live .vs-rows .vs-row:nth-child(4) { transition-delay: 0.48s; }
.vs-live .vs-rows .vs-row:nth-child(1) .vs-check path { transition-delay: 0.34s; }
.vs-live .vs-rows .vs-row:nth-child(2) .vs-check path { transition-delay: 0.46s; }
.vs-live .vs-rows .vs-row:nth-child(3) .vs-check path { transition-delay: 0.58s; }
.vs-live .vs-rows .vs-row:nth-child(4) .vs-check path { transition-delay: 0.70s; }
.vs-live .vs-check path { stroke-dashoffset: 0; }

/* static / reduced motion: land on the end state, everything legible */
body.static-mode .vs-table,
body.static-mode .vs-row { opacity: 1; transform: none; }
body.static-mode .vs-check path { stroke-dashoffset: 0; }

@media (max-width: 767px) {
  .versus { padding-block: 64px; }
  /* keep the two columns on phones (just compact) so it still reads as a
     side-by-side comparison, not a stacked one-by-one list */
  .vs-table { max-width: 440px; }
  .vs-lbl { padding: 12px 12px; font-size: 0.8rem; gap: 6px; }
  .vs-them, .vs-us { padding: 12px 12px; font-size: 0.76rem; gap: 7px; line-height: 1.4; }
  .vs-check { width: 14px; height: 14px; margin-top: 0; }
}

/* ============ founder note — a quiet beat on the arrived canvas ============ */

.founder { padding-block: 8px 64px; color: var(--color-ink); background: var(--color-white); position: relative; z-index: 1; }
.founder-inner { max-width: 560px; text-align: center; }
.founder-line { font-size: 1.125rem; line-height: 1.7; }
.founder-line + .founder-line { margin-top: 10px; }
/* "it does now." gets the butter underline, drawn when the line reveals */
.founder .butter-underline { bottom: -5px; height: 10px; }
.founder .butter-underline path { transition: stroke-dashoffset 650ms ease 450ms; }
.founder-line.revealed .butter-underline path { stroke-dashoffset: 0; }
.founder-sig { margin-top: 18px; font-size: 0.875rem; font-weight: 600; color: var(--ink-mut); }
@media (max-width: 767px) { .founder { padding-bottom: 48px; } }

/* ============ faq ============ */
/* a paper band before the navy footer — the journey line stays visible
   through its gutters (bg is non-positioned, line rides above) */

.faq { padding-block: 96px; color: var(--color-ink); background: var(--color-paper); }
.faq .section-h2 { color: var(--color-ink); }
.faq-inner { max-width: 680px; }
.faq-list {
  margin-top: 40px;
  border-top: 1px solid var(--ink-line);
}
.faq-item { border-bottom: 1px solid var(--ink-line); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  padding: 20px 0;
  min-height: 44px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-chevron { transition: transform 250ms ease; }
.faq-item--open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}
.faq-item--open .faq-answer { max-height: 500px; } /* longest answer must not clip on narrow phones */
.faq-answer p {
  color: var(--ink-mut);
  padding: 0 32px 20px 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 250ms ease 60ms, transform 250ms ease 60ms;
}
.faq-item--open .faq-answer p { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) { .faq { padding-block: 64px; } }

/* ============ footer ============ */

.footer {
  background: var(--navy-deep);
  border-top: 1px solid var(--cream-line);
  padding-block: 56px;
  position: relative;
  z-index: 1;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.footer-tag {
  font-size: 0.875rem;
  color: rgba(242, 239, 231, 0.60);
  margin-top: 12px;
}
.footer-made {
  font-size: 0.75rem;
  color: rgba(242, 239, 231, 0.55);
  margin-top: 6px;
}
.footer-right { text-align: right; }
.footer-links, .footer-legal {
  font-size: 0.875rem;
  color: rgba(242, 239, 231, 0.65);
}
.footer-legal { margin-top: 8px; font-size: 0.75rem; color: rgba(242, 239, 231, 0.60); }
.footer-links a, .footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.footer-links a:hover, .footer-legal a:hover { text-decoration: underline; }
.footer-micro {
  font-size: 0.75rem;
  color: rgba(242, 239, 231, 0.55);
  margin-top: 12px;
}
@media (max-width: 767px) {
  .footer-inner { flex-direction: column; }
  .footer-right { text-align: left; }
}

/* ============ scroll reveals ============ */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease-out-soft), transform 560ms var(--ease-out-soft);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============ story responsive ============ */

@media (max-width: 1023px) {
  .story-stage { padding-inline: 32px; }
  .sh-pos-l { left: 32px; }
  .sh-pos-r { right: 32px; }
  .st-math { left: 8%; }
  .st-read { left: 42%; }
  .sgroup-b { right: 4%; }
  .dial { left: 5%; width: 160px; height: 160px; }
  .bub-user  { left: 24px; }
  .bub-reply { left: auto; right: 24px; }
  .bub--handover { left: 32px; }
}

@media (max-width: 767px) {
  .story { height: 460vh; }
  .story-stage { padding-inline: 20px; }
  .sh { top: 8vh; }
  .sh-pos-l, .sh-pos-r { left: 20px; right: 20px; max-width: none; text-align: left; }
  .sh-h { font-size: 1.625rem; }
  /* payoff stacks: words up top, the eased day below (bottom crop tolerated) */
  .sh--payoff { top: 8vh; }
  .sh--payoff .sh-h { font-size: 2rem; }
  .sh--payoff .btn-primary { margin-top: 20px; }
  .stage-phone--payoff {
    top: auto;
    bottom: -92px;
    right: 50%;
    transform: translateX(50%) translateY(var(--rise, 0px)) scale(0.8);
  }
  .bub--handover { left: 20px; top: 13.5%; width: 200px; }
  .chip { font-size: 0.72rem; padding: 5px 9px 5px 11px; }
  /* scaled down so it doesn't swallow a phone screen; transform:scale keeps the
     app copy laid out (width-shrinking would wrap it) */
  .stage-phone {
    right: 50%;
    transform: translate(50%, -50%) translateY(var(--rise, 0px)) scale(0.8);
    top: 58%;
  }
  .fab-mic { bottom: 60px; right: 12px; width: 38px; height: 38px; }
  /* scenes stack centre, full width */
  .strip { min-width: 0; padding: 10px 13px; gap: 9px; border-radius: 12px; }
  .s-body b { font-size: 0.9rem; line-height: 1.2; }
  .s-body span { font-size: 0.72rem; }
  .s-time { font-size: 0.74rem; padding: 3px 8px; }
  .s-tag { font-size: 0.68rem; padding: 3px 8px; }
  .s-min { font-size: 0.66rem; padding: 2px 6px; }
  .ghost-time { left: 16px; top: 15%; font-size: 3rem; }
  /* these scene strips have bigger, more specific title/time sizes on desktop —
     bring them down on phones too (specificity has to match to win) */
  .st-math .s-body b { font-size: 1rem; }
  .st-math .s-time { font-size: 0.78rem; padding: 4px 10px; }
  .strip--side .s-body b { font-size: 0.85rem; }
  .strip--ghost .s-body b { font-size: 0.85rem; }
  .rail { left: 20px; right: 20px; top: 50%; }
  .st-math { left: 20px; right: 20px; top: 34%; }
  .st-read { left: 44px; right: 40px; top: 56%; }
  .st-read.on.away { transform: translateY(0) translateX(52px) rotate(3deg); opacity: 0.35; }
  .sgroup-b { left: 20px; right: 20px; top: 24%; width: auto; }
  .strip--step { margin-left: 44px; }
  .b-bracket { left: 14px; top: 70px; }
  .dial { display: none; }
  .st-gym { left: 20px; right: 20px; top: 42%; }
  .pr-1 { --d: 260px; }
  .pr-2 { --d: 380px; }
  .pr-3 { --d: 500px; }
  .pinring { top: calc(42% + 34px); }
  .st-g1 { left: 20px; top: 30%; transform: translateX(-70px) skewX(-6deg); }
  .st-g1.on { opacity: 0.8; transform: translateX(70px) skewX(-6deg); }
  .st-g1.on.gone { opacity: 0; transform: translateX(150px) skewX(-6deg); }
  .st-g2 { left: 30px; top: 60%; transform: translateX(-80px) skewX(-6deg); }
  .st-g2.on { opacity: 0.65; transform: translateX(60px) skewX(-6deg); }
  .st-g2.on.gone { opacity: 0; transform: translateX(140px) skewX(-6deg); }
  .mini { top: 32%; width: calc(100% - 40px); }
  .bar { font-size: 0.78rem; padding: 0 10px; gap: 6px; }
  .bub { width: 180px; font-size: 0.8rem; padding: 8px 11px; }
  .bub-user  { left: 20px; top: 16%; }
  .bub-reply { left: auto; right: 20px; top: auto; bottom: 11%; }
}

/* ============ static / reduced-motion collapse ============
   no scroll theater: the story becomes a normal band showing the end state
   (payoff headline, the eased evening, the tired exchange). */

.story-static.story { height: auto; }
.story-static .story-sticky { position: static; height: auto; overflow: visible; }
.story-static .story-stage { height: auto; padding-block: 96px 72px; }
.story-static .story-head { position: static; }
.story-static .sh { display: none; }
.story-static .sh--payoff { display: block; position: static; opacity: 1 !important; transform: none !important; }
.story-static .chips, .story-static .stage-phone,
.story-static .scene-a, .story-static .scene-b, .story-static .scene-c,
.story-static .bub--handover { display: none; }
/* ...but the payoff phone stays: it's the proof shot, centred under the words */
.story-static .stage-phone--payoff {
  display: flex;
  justify-content: center;
  position: static;
  opacity: 1 !important;
  transform: none;
  margin-top: 44px;
}
.story-static .stage-phone--payoff::before { inset-inline: 0; }
.story-static .scene-t { position: relative; inset: auto; opacity: 1; margin-top: 48px; }
.story-static .mini { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
.story-static .scene-t .bub {
  position: static;
  opacity: 1;
  transform: none;
  rotate: none;
  width: auto;
  max-width: 300px;
  margin: 16px auto 0;
}

/* QA scrub mode (?p=0.42) — the stage becomes a fixed full-viewport layer */
body.qa-pin .story-sticky {
  position: fixed;
  inset: 0;
  background: var(--navy-live, var(--color-paper));
  z-index: 50;
}

/* static QA mode (?static=1) — kill all motion so screenshots settle
   (body itself included — the navy drift runs ON body) */
body.static-mode, body.static-mode *, body.static-mode *::before, body.static-mode *::after {
  animation: none !important;
  transition: none !important;
}
body.static-mode .hw, body.static-mode .rise, body.static-mode .hero-chip { opacity: 1; transform: none; }
body.static-mode .butter-underline path { stroke-dashoffset: 0; }
body.static-mode .hf-line, body.static-mode .hf-head { stroke-dashoffset: 0; }
body.static-mode .hero { min-height: 0; padding-block: 96px 150px; } /* vh heights break full-page captures; extra bottom keeps copy clear of the navy seam */

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .butter-underline path { animation: none; stroke-dashoffset: 0; }
}