/* ============================================================================
   Jay waitlist landing page

   Design register updated 2026-10-25: the site now shares the app's Sun design — Lora 600
   display type over Hanken Grotesk body, navy links and chrome accents, sage markers, and
   gold reserved for sun art and the headline accent.

   Colour values are lifted verbatim from app/src/theme.ts so the page and the app cannot
   drift. Do not hand-pick new colours here; add them to the app's theme first.
   ========================================================================== */

/* ------------------------------------------------------------------- fonts */
/* Self-hosted. No external font request — it would be a render-blocking third-party
   round trip on a page with a Lighthouse >=90 budget. */
@font-face {
  font-family: 'Lora';
  src: url('assets/fonts/Lora_600SemiBold.51e3f6b1.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/HankenGrotesk_500Medium.00851975.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/HankenGrotesk_600SemiBold.2e44cdbb.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/HankenGrotesk_700Bold.42fb38e3.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand — app/src/theme.ts */
  --cream: #F8F4EC;
  --cream-deep: #F0E9DC;
  --card: #FFFDF9;
  --sage: #EBEFE6;
  --ink: #0F1D3A;
  --ink-soft: #4A6B8A;
  --accent: #0F1D3A;          /* navy — links and accent chrome */
  --sage-mark: #7C8869;       /* sage eyebrow and note markers */
  --gold: #EBB823;            /* fills and borders only, never text */
  --gold-ink: #8A6200;        /* gold-family text */
  --error: #AF4630;           /* form errors only */
  --border: #E7DDCC;
  --hair: #EFE8DA;

  /* Journey / document category tones — app DOCUMENT_CATEGORY_DETAILS + JOURNEY_CATEGORY_TONES */
  --tone-assessment: #7C8869;
  --tone-therapy: #E2725B;
  --tone-school: #C7922C;
  --tone-medication: #EBB823;
  --tone-ndis: #7A72B8;
  --tone-medical: #7A853B;

  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Lora', 'Iowan Old Style', 'Apple Garamond', serif;

  /* Motion tokens are published by motion/tokens.js at boot; these are the pre-JS fallbacks
     so a stylesheet-only render still animates correctly. */
  --dur-micro: 150ms;
  --dur-base: 300ms;
  --dur-entrance: 350ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: 32px;
  --radius-card: 20px;
  --radius-control: 14px;

  interpolate-size: allow-keywords; /* lets <details> animate to height:auto natively */
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
svg { display: block; }

.accent { color: var(--accent); }

/* Warm text selection — a small detail that makes the page feel finished. */
::selection { background: rgba(235, 184, 35, 0.32); }

/* Deep links (/#waitlist is printed on the share link and in llms.txt) must land the
   section below the fixed nav, not underneath it. */
[id] { scroll-margin-top: 88px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 820px; }
.center { text-align: center; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: var(--radius-control); text-decoration: none; font-weight: 600;
  transition: top var(--dur-micro) var(--ease-standard);
}
.skip-link:focus { top: 12px; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 46px); }
.lede { margin-top: 18px; font-size: 19px; color: var(--ink-soft); }

.sparkle { width: 11px; height: 11px; fill: var(--gold); display: inline-block; margin-right: 8px; }

/* ------------------------------------------------------------------ reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-entrance) var(--ease-entrance) var(--reveal-delay, 0ms),
    transform var(--dur-entrance) var(--ease-entrance) var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }


/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--radius-control);
  background: none; color: inherit;
  font: inherit; font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-standard),
              background var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #17294c; box-shadow: 0 8px 20px rgba(15, 29, 58, 0.18); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-lg { min-height: 54px; padding: 0 30px; }
.btn-block { width: 100%; }
.btn-quiet {
  min-height: 44px; padding: 0 16px; font-size: 15px;
  border: 1px solid var(--border); background: var(--card); color: var(--ink-soft);
}
.btn-quiet:hover { color: var(--ink); border-color: var(--ink-soft); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* --------------------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.nav.is-scrolled { border-bottom-color: var(--hair); }
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 11px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; /* touch target */
  font-weight: 700; font-size: 22px; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none;
}
.brand-pip { width: 34px; height: 34px; object-fit: contain; object-position: top; }

/* The nav CTA is revealed only once the hero CTA has scrolled away, so the two never
   compete for the same decision. Matches the reference's `show-cta` behaviour.
   `visibility` (not just opacity/pointer-events) takes the button out of the tab order
   while hidden, so keyboard users never land on a button they cannot see. */
.nav-cta {
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              visibility 0s linear var(--dur-base);
}
.nav.is-scrolled .nav-cta {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition-delay: 0s;
}


/* ------------------------------------------------------------ final + foot */

/* Grouped footer — same groups every page renders from content.footer.groups via
   functions/_shared/site-chrome.js. */
.foot { padding-top: 46px; }
.foot-groups {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) 8px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.foot-group h2 {
  margin: 0 0 6px; font-family: var(--font); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.foot-group ul { margin: 0; padding: 0; list-style: none; }
.foot-group li { margin: 0; }
.foot-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14.5px; color: var(--ink); text-decoration: none; border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .foot-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.foot-legal, .foot-copy { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.foot-legal { padding-top: 26px; font-size: 13.5px; color: var(--ink-soft); max-width: 1200px; }
.foot-copy { margin-top: 8px; padding-bottom: 54px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 700px) { .foot-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-groups { grid-template-columns: 1fr; } }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600;
}
.faq-item summary span { transition: color var(--dur-micro) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover span { color: var(--accent); }
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { position: relative; width: 15px; height: 15px; flex: none; }
.faq-mark::before, .faq-mark::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: var(--accent);
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq-mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: rotate(0deg); }
.faq-answer { overflow: hidden; height: 0; transition: height var(--dur-base) var(--ease-standard); }
.faq-item[open] .faq-answer { height: auto; }
.faq-answer p { padding: 0 4px 24px; max-width: 68ch; color: var(--ink-soft); }

/* ------------------------------------------------------------------ modal */
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-scrim {
  position: absolute; inset: 0;
  background: rgba(15, 29, 58, 0.42); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--dur-entrance) var(--ease-standard);
}
.modal.is-open .modal-scrim { opacity: 1; }
.modal-card {
  position: relative; z-index: 1;
  width: min(470px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 22px; padding: 34px 30px 30px; text-align: center;
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-entrance) var(--ease-entrance),
              transform var(--dur-entrance) var(--ease-entrance);
}
.modal.is-open .modal-card { opacity: 1; transform: none; }
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; border-radius: 50%;
}
.modal-close svg { width: 17px; height: 17px; stroke: var(--ink-soft); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.modal-close:hover svg { stroke: var(--ink); }
.modal-pip { width: 76px; height: auto; margin: 0 auto 14px; display: block; }
.modal-card h2 { font-size: 26px; }
.modal-lede { margin-top: 10px; font-size: 15.5px; color: var(--ink-soft); }

.waitlist-form { margin-top: 22px; text-align: left; }
.field { display: block; }
.field-label {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px;
}
.field input {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: #fff; font: inherit; font-size: 16px; color: var(--ink);
}
.field input[aria-invalid='true'] { border-color: var(--error); }
.field-country { margin-top: 14px; }
.field select {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: #fff; font: inherit; font-size: 16px; color: var(--ink);
}
.field-error { margin-top: 9px; font-size: 14px; color: var(--error); font-weight: 600; }
.turnstile { min-height: 0; margin-top: 14px; }
.turnstile:empty { display: none; }
.waitlist-form .btn { margin-top: 16px; }
.modal-consent { margin-top: 12px; font-size: 13px; color: var(--ink-soft); text-align: center; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  display: none; animation: spin 700ms linear infinite;
}
.btn.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.success-mark {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--sage); display: grid; place-items: center;
}
.success-mark svg { width: 26px; height: 26px; stroke: var(--tone-assessment); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.survey { margin-top: 24px; text-align: left; }
.survey fieldset { border: 0; padding: 0; margin: 0; }
.survey-prompt { font-size: 15px; font-weight: 600; padding: 0; }
.survey-optional { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.survey-options { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.survey-option {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  font-size: 14.5px; cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-standard),
              background var(--dur-micro) var(--ease-standard);
}
.survey-option:hover { border-color: var(--ink-soft); background: var(--sage); }
.survey-option input { accent-color: var(--accent); width: 17px; height: 17px; }
.survey-status { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
.survey-status.is-error { color: var(--error); }
.survey-thanks { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--tone-assessment); }
.share { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); }
.share-label { font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }

/* ------------------------------------------------------------------ brand */
.brand {
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.brand-mark { width: 34px; height: 34px; border-radius: 9px; }

.nav-links { display: flex; gap: 26px; margin-left: auto; margin-right: 8px; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 18px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); font-weight: 600; font-size: 15px; cursor: pointer;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: var(--sage); }
.nav-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px;
  padding: 10px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--card); box-shadow: 0 18px 44px rgba(56, 37, 18, 0.14); z-index: 120;
}
.nav-menu-list a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
}
.nav-menu-list a:hover { background: var(--sage); }
@media (max-width: 760px) { .nav-links { display: none; } .nav-menu { display: block; margin-left: auto; margin-right: 8px; } }
.nav-cta { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .faq { padding-bottom: 84px; }
  .section-head { margin-bottom: 38px; }
}

@media (max-width: 720px) {
  .modal-card { padding: 30px 22px 24px; }
}

@media (max-width: 520px) {
  .nav-inner { padding-top: 9px; padding-bottom: 9px; }
  .brand { font-size: 23px; }
  .nav-cta { padding-right: 14px; padding-left: 14px; font-size: 14px; }
}

/* Respect the iOS home indicator and notch. */
@supports (padding: max(0px)) {
  .foot { padding-bottom: max(54px, env(safe-area-inset-bottom)); }
  .modal { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------- reduced motion */
/* Applied via the media query and via .motion-reduced, which JS also sets when motion
   setup fails. Content is never hidden behind an animation in either case. */
@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;
  }
}

/* `transition: none` matters as much as the opacity here. A transition with a near-zero duration
   is still a *pending* transition for one frame, and during that frame the computed opacity is
   still the start value — i.e. the content is invisible. Removing the transition entirely means
   there is no frame in which reduced-motion content cannot be seen. */
.motion-reduced [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.motion-reduced .nav-cta { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.motion-reduced .hero-sun-image, .motion-reduced .final-sun, .motion-reduced .thought-in { animation: none; }

.faq { padding: clamp(88px, 10vw, 144px) 0; background: #fbf7ef; }
.faq h2 { font-family: var(--font-display); font-size: clamp(42px, 5vw, 68px); font-weight: 600; letter-spacing: -0.02em; }
/* closing call to action: the sun returns over the page's last words */
.final { position: relative; padding: clamp(94px, 11vw, 150px) var(--gutter) clamp(110px, 12vw, 170px); }
.final h2 { max-width: 12ch; margin: 0 auto; text-wrap: balance; font-size: clamp(46px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.035em; }
.final .lede { max-width: 40ch; margin-left: auto; margin-right: auto; color: #3d5877; }
.final-sun {
  display: block; width: clamp(140px, 14vw, 200px); height: auto; margin: 0 auto 10px;
  animation: sun-float 9s ease-in-out infinite;
}

/* ------------------------------------------------ continuous canvas */
/* One supplied image spans the complete landing document. It is never tiled, repeated or faded
   into a substitute flat field. Where supported it clips rather than hides: a hidden overflow
   makes main a scroll container and stops the tale's stage from pinning. Browsers without
   overflow: clip keep hidden and never pin (see the inline script in templates.js). */
body { background: #fbf7ef; }
main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #fbf7ef;
  background-image: url('assets/brand/landing-canvas-desktop.54e5fecd.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
@supports (overflow: clip) { main { overflow: clip; } }
main > * { position: relative; z-index: 1; }
/* The tale stays out of that stacking context so the leaf shade can multiply onto the canvas. */
main > .tale { z-index: auto; }
.faq, .final, .foot { background: transparent; }
.faq { padding-top: clamp(104px, 13vw, 180px); }
.final { padding-top: clamp(104px, 13vw, 180px); }
.foot { border-top: 1px solid rgba(15, 29, 58, 0.12); margin-top: 0; }

/* With the story pinned, motion/tale.js starts the canvas where the stage comes to rest and sizes
   it to the page from there; the stage carries the top of the same canvas (see the pinned stage). */
.tale-on main { background-size: var(--canvas-size, cover); background-position: center var(--canvas-y, 0px); }

@media (max-width: 900px) {
  main {
    background-image: url('assets/brand/landing-canvas-mobile.216b9174.webp');
    background-size: auto 100%;
    background-position: 26% top;
  }
  .tale-on main { background-size: var(--canvas-size, auto 100%); background-position: 26% var(--canvas-y, 0px); }
  .faq, .final { padding-top: 96px; }
}

/* -------------------------------------------------------------- founders */
.hero-founders { margin-top: 22px; font-size: 15px; font-weight: 600; }
.hero-founders a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(15, 29, 58, 0.28); text-underline-offset: 4px; }
.hero-founders a::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sage-mark); }
.hero-founders a:hover { text-decoration-color: currentColor; }

.founders-copy .founders-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration-color: rgba(15, 29, 58, 0.3); text-underline-offset: 4px; }
.founders-copy .founders-link:hover { text-decoration-color: currentColor; }
.founders { padding: clamp(96px, 12vw, 168px) 0 0; background: transparent; }
.founders-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.founders-photo { margin: 0; }
.founders-photo img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(64, 45, 25, 0.45); }
.founders-copy h2 { max-width: 13ch; margin-bottom: 8px; font: 600 clamp(40px, 4.4vw, 64px)/1 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.founders-copy > p { max-width: 52ch; margin-top: 16px; color: #3d5877; font-size: 18px; }
.founders-copy blockquote { margin: 30px 0 0; padding-left: 20px; border-left: 3px solid var(--sage-mark); }
.founders-copy blockquote p { font: 600 clamp(19px, 1.8vw, 23px)/1.35 var(--font-display); color: var(--ink); }
.founders-copy cite { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 14px; font-style: normal; font-weight: 600; }

@media (max-width: 900px) {
  .founders { padding-top: 96px; }
  .founders-layout { grid-template-columns: 1fr; gap: 36px; }
  .founders-copy > p { font-size: 17px; }
}
/* ------------------------------------------------------- App Store */
/* Apple's badge is used unmodified, at least 40px tall, with clear space around it. */
.get-app { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.get-app p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.get-app-center { justify-content: center; flex-direction: column; gap: 6px; margin-top: 26px; }
.app-badge { display: inline-flex; align-items: center; min-height: 44px; border-radius: 10px; }
.app-badge img { display: block; height: auto; max-width: 100%; }
.app-badge:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(15, 29, 58, 0.3); text-underline-offset: 4px; cursor: pointer;
}
.link-btn:hover { text-decoration-color: currentColor; }
.modal-au { margin: 10px 0 0; font-size: 15px; color: var(--ink-soft); }
.modal-au a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.nav-cta { white-space: nowrap; }
@media (max-width: 420px) {
  .nav .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ------------------------------------------------------------------- tale */
/* The hero and the story are one stage (templates.js renderTale, motion/tale.js).
   Base rules are the plain layout used without the controller: each chapter is its own section
   with its own phone showing the finished scene. `.tale-on` pins the stage under the nav and
   stacks the chapters so one phone plays them all. Scroll drives the state and every transition
   below reverses from wherever it has got to when the state flips back. */

.tale { position: relative; --s: 0.86; }
.tale-skip {
  position: absolute; left: 12px; top: -80px; z-index: 210;
  padding: 12px 18px; border-radius: var(--radius-control);
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
  transition: top var(--dur-micro) var(--ease-standard);
}
.tale-skip:focus { top: 80px; }

/* chapter copy */
.ch {
  position: relative; max-width: 1200px; margin: 0 auto;
  padding: clamp(64px, 9vw, 128px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(36px, 7vw, 120px);
}
.ch-hero { padding-top: clamp(124px, 13vw, 176px); }
.ch-copy { position: relative; z-index: 4; max-width: 34rem; }
.ch-hero .ch-copy { max-width: 40rem; }
.ch-hero h1 {
  max-width: 7.6em; text-wrap: balance;
  font-size: clamp(52px, 6.4vw, 100px); line-height: 0.95; letter-spacing: -0.035em;
}
.ch-hero .lede { max-width: 31ch; margin-top: 28px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.48; color: #3d5877; }
.ch-hero .get-app { margin-top: 34px; }
.ch-hero .hero-founders { margin-top: 10px; }
.ch h2 { max-width: 11ch; text-wrap: balance; font-size: clamp(40px, 4.4vw, 66px); line-height: 1; letter-spacing: -0.03em; }
.ch-body { max-width: 34ch; margin-top: 22px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.52; color: #3d5877; }
.ch-soon { display: flex; align-items: baseline; gap: 10px; max-width: 40ch; margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.ch-soon::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-mark); transform: translateY(-1px); }
.ch-fine { max-width: 46ch; margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

/* A week of nudges: one cell a day. */
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 31rem; margin: 30px 0 0; padding: 0; list-style: none; }
.wk-days li { padding-top: 10px; border-top: 2px solid var(--sage-mark); }
.wk-days b { display: block; font-size: 13px; font-weight: 700; }
.wk-days span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--ink-soft); }

/* the sun and the leaf shade belong to the hero */
.hero-sun {
  position: absolute; z-index: -1; pointer-events: none;
  right: calc(-168px * var(--s)); top: calc(-8px * var(--s)); width: calc(330px * var(--s));
}
.hero-sun-image {
  display: block; width: 100%; height: auto; max-width: none;
  animation: sun-float 9s ease-in-out infinite;
}
@keyframes sun-float { 50% { transform: translateY(-10.35px); } }
.hero-canopy {
  /* Past the screen's right edge however wide the screen, so the shade never ends in a line. */
  position: absolute; z-index: 5; top: -14%; right: min(-10%, calc((100% - 100vw) / 2 - 24px)); width: 60%; height: 128%; pointer-events: none;
  background: url('assets/brand/canopy-natural.238bd8c0.webp') no-repeat right top / contain;
  opacity: 0.4; mix-blend-mode: multiply;
}

/* ------------------------------------------------------------------ phone */
/* One 340 x 724 phone, drawn at full size and scaled by --s, so every scene is laid out in the
   app's own points. The bezel is a border, which leaves the screen hole transparent: the pinned
   stage stacks one phone per chapter exactly on top of each other and only the hero's draws. */
.ch-device { position: relative; width: calc(340px * var(--s)); height: calc(724px * var(--s)); }
.ch-device::after {
  content: ''; position: absolute; z-index: -2; left: 14%; right: 14%; bottom: -16px; height: 34px;
  border-radius: 50%; background: rgba(56, 37, 18, 0.2); filter: blur(18px);
}
.device {
  position: absolute; left: 0; top: 0; width: 340px; height: 724px;
  transform: scale(var(--s)); transform-origin: 0 0;
  border: 12px solid #101a30; border-radius: 54px;
  box-shadow: 0 0 0 1px #34405e, 0 0 0 2.5px rgba(15, 29, 58, 0.5),
              0 50px 80px -36px rgba(15, 29, 58, 0.5), 0 26px 46px -26px rgba(56, 37, 18, 0.3);
}
.device::before, .device::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #101a30; }
.device::before { left: -15.5px; top: 132px; height: 58px; box-shadow: 0 72px 0 #101a30; }
.device::after { right: -15.5px; top: 172px; height: 90px; }
.screen {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: 42px;
  background: #f8f4ec url('assets/brand/landing-canvas-mobile.216b9174.webp') center top / cover no-repeat;
}
.ph-island { position: absolute; z-index: 8; top: 11px; left: 50%; width: 98px; height: 29px; margin-left: -49px; border-radius: 16px; background: #0a1020; }
.ph-home { position: absolute; z-index: 8; bottom: 8px; left: 50%; width: 118px; height: 4.5px; margin-left: -59px; border-radius: 3px; background: var(--ink); }
.ph-glare {
  position: absolute; z-index: 9; inset: 0; border-radius: 42px; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 30%);
  mix-blend-mode: soft-light;
}

.scene { position: absolute; inset: 0; color: var(--ink); }
.ph-status {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 52px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 28px 0 36px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
}
.ph-status-i { display: flex; align-items: center; gap: 6px; }
.ph-body { position: absolute; inset: 0; padding: 62px 18px 96px; }
.ph-sun { position: absolute; z-index: 3; right: 14px; top: 58px; width: 48px; height: 48px; }
.ph-h { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 31px; line-height: 1.05; letter-spacing: -0.02em; }
.ph-sub { margin-top: 6px; padding-right: 56px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.ph-month { margin: 14px 0 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.ph-tile { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--sage); }
.ph-tile svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ph-tabbar {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around; padding: 10px 8px 26px;
  background: rgba(255, 253, 249, 0.9); border-top: 1px solid rgba(15, 29, 58, 0.08); backdrop-filter: blur(12px);
  font-size: 10px; font-weight: 600; color: var(--ink-soft);
}
.ph-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 54px; }
.ph-tpill { display: grid; place-items: center; width: 42px; height: 27px; border-radius: 14px; }
.ph-tpill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ph-tab.is-active { color: var(--ink); }
.ph-tab.is-active .ph-tpill { background: #dfe5d8; }

/* A row that opens from nothing when its line arrives. */
.slot { display: grid; grid-template-rows: 1fr; }
.slot-in { min-height: 0; overflow: hidden; }

/* banner over an open app (iOS style) */
.ph-banner {
  position: absolute; z-index: 7; top: 50px; left: 9px; right: 9px;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 12px 13px 13px; border-radius: 22px;
  background: rgba(255, 253, 249, 0.88); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 18px 36px -16px rgba(15, 29, 58, 0.45);
}

/* lock screen */
.scene-lock { background: #efe7d7 url('assets/brand/landing-canvas-mobile.216b9174.webp') 26% 6% / 230% auto no-repeat; }
.scene-lock::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 64% at 50% 0%, rgba(255, 253, 249, 0.6), rgba(255, 253, 249, 0) 62%);
}
.lk-when { position: absolute; z-index: 2; top: 66px; left: 0; right: 0; height: 130px; text-align: center; }
.lk-day { position: absolute; inset: 0; }
.lk-day:not(.is-current) { opacity: 0; }
.lk-date { font-size: 16px; font-weight: 600; }
.lk-time { margin-top: 2px; font-family: var(--font); font-size: 86px; font-weight: 700; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.lk-stack { position: absolute; z-index: 2; left: 10px; right: 10px; top: 222px; }
.lk-note {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  margin-top: 8px; padding: 12px 13px 13px; border-radius: 22px;
  background: rgba(255, 253, 249, 0.74); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px -14px rgba(15, 29, 58, 0.4);
}
.lk-note img, .ph-banner img { width: 36px; height: 36px; border-radius: 9px; }
.lk-text { min-width: 0; }
.lk-text b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.lk-text span {
  display: -webkit-box; margin-top: 2px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 12.5px; line-height: 1.36; color: #24324f;
}
.lk-note small, .ph-banner small { padding-top: 1px; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.lk-controls { position: absolute; z-index: 2; left: 46px; right: 46px; bottom: 44px; display: flex; justify-content: space-between; }
.lk-controls span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(15, 29, 58, 0.13); backdrop-filter: blur(10px); }
.lk-controls svg { width: 21px; height: 21px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* documents */
.dc-chips { display: flex; gap: 6px; margin-top: 14px; }
.dc-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: rgba(255, 253, 249, 0.9); font-size: 10.5px; font-weight: 600;
}
.dc-chip.is-on { background: var(--ink); border-color: var(--ink); color: #f8f4ec; }
.dc-count { display: inline-grid; overflow: hidden; height: 1.35em; font-variant-numeric: tabular-nums; }
.dc-count i { grid-area: 1 / 1; font-style: normal; opacity: 0.75; }
.dc-list { margin-top: 4px; }
.dc-card {
  position: relative; display: flex; gap: 11px; align-items: flex-start;
  margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255, 253, 249, 0.95);
}
.dc-new { display: grid; transition: box-shadow 600ms var(--ease-standard); }
.dc-new > * { grid-area: 1 / 1; }
.dc-new:has(.dc-filed.is-on) { box-shadow: 0 0 0 3px rgba(124, 136, 105, 0.2); }
.dc-filed { display: flex; gap: 11px; align-items: flex-start; }
.dc-raw { display: flex; gap: 12px; align-items: center; align-self: center; }
.dc-file { flex: none; display: grid; place-items: center; width: 40px; height: 48px; border-radius: 8px; background: #efe8da; }
.dc-file svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dc-raw b { display: block; font-size: 12.5px; font-weight: 600; }
.dc-status { position: relative; display: block; height: 1.45em; margin-top: 2px; font-size: 10.5px; color: var(--ink-soft); }
.dc-status > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.dc-bar { display: block; width: 156px; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: #e7ddcc; }
.dc-bar i { display: block; width: 100%; height: 100%; background: var(--sage-mark); transform-origin: left; }
.dc-date { flex: none; width: 44px; padding-right: 10px; border-right: 1px solid rgba(15, 29, 58, 0.1); text-align: center; }
.dc-date b { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1; }
.dc-date span { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.dc-date i { display: block; font-style: normal; font-size: 8.5px; color: var(--ink-soft); }
.dc-main { min-width: 0; }
.dc-main h4 { margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.2; }
.dc-meta { margin-top: 3px; font-size: 9.5px; color: var(--ink-soft); }
.dc-sum { margin-top: 5px; font-size: 10.5px; line-height: 1.4; color: var(--ink-soft); }
.dc-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  padding: 3px 9px; border-radius: 999px; background: var(--sage);
  font-size: 9px; font-weight: 700;
}
.dc-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--tone-therapy); }
.dc-tag-assessment::before { background: var(--tone-assessment); }

/* journey */
.jy-card {
  display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px;
  border: 1px solid var(--border); border-radius: 16px; background: rgba(255, 253, 249, 0.97);
  box-shadow: 0 12px 26px -18px rgba(15, 29, 58, 0.45);
}
.jy-card b { display: block; font-size: 13px; font-weight: 700; }
.jy-card div > span { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.35; color: var(--ink-soft); }
.jy-chev { margin-left: auto; font-size: 20px; line-height: 1; color: var(--ink-soft); }
.jy-thread { position: relative; margin-top: 2px; padding-left: 20px; }
.jy-thread::before {
  content: ''; position: absolute; left: 6px; top: 34px; bottom: 8px; width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, #ebb823, #b9c4ae 62%, #dfe5d8);
  transform-origin: top; transform: scaleY(var(--draw, 1));
}
.jy-item { position: relative; }
.jy-item::before {
  content: ''; position: absolute; left: -19px; top: 15px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--sage-mark); background: radial-gradient(circle, var(--tone, #7c8869) 0 2.6px, #fffdf9 3px);
}
.jy-moment { padding: 11px 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 253, 249, 0.95); }
.jy-tag { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.jy-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.jy-moment b { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; }
.jy-moment p:not(.jy-tag) { margin-top: 2px; font-size: 10.5px; line-height: 1.4; color: var(--ink-soft); }
.jy-from { display: block; margin-top: 6px; font-size: 9px; color: var(--sage-mark); }
.jy-add { position: absolute; z-index: 4; right: 16px; bottom: 100px; padding: 9px 15px; border-radius: 999px; background: var(--ink); color: #f8f4ec; font-size: 11px; font-weight: 600; box-shadow: 0 12px 24px -12px rgba(15, 29, 58, 0.6); }

/* chat */
.ct-head {
  position: absolute; z-index: 4; top: 54px; left: 0; right: 0;
  display: flex; align-items: center; gap: 10px; padding: 0 16px 12px;
  border-bottom: 1px solid rgba(15, 29, 58, 0.09);
}
.ct-head-sun { width: 32px; height: 32px; }
.ct-head b { display: block; font-size: 14.5px; }
.ct-head span { display: block; font-size: 10px; color: var(--ink-soft); }
.ct-view {
  position: absolute; top: 102px; left: 0; right: 0; bottom: 146px; overflow: hidden; padding: 0 14px;
  -webkit-mask-image: linear-gradient(transparent, #000 22px); mask-image: linear-gradient(transparent, #000 22px);
}
.ct-col { padding: 12px 0 8px; }
.ct-msg { width: fit-content; max-width: 84%; padding: 10px 13px; border-radius: 17px; font-size: 12.5px; line-height: 1.45; }
.ct-user { margin: 12px 0 0 auto; border: 1px solid var(--border); border-bottom-right-radius: 5px; background: #fffdf9; }
.ct-jay { margin-top: 10px; }
.ct-row { display: flex; gap: 8px; align-items: flex-start; }
.ct-avatar { flex: none; width: 24px; height: 24px; margin-top: 3px; }
.ct-bubble { max-width: 88%; }
.ct-jay:has(.ct-draft) .ct-bubble { flex: 1; max-width: none; }
.ct-bot { max-width: none; border-bottom-left-radius: 5px; background: #e7ede1; }
.ct-bot p + p, .ct-bot ol { margin-top: 6px; }
.ct-bot ol { padding-left: 17px; }
.ct-bot li + li { margin-top: 3px; }
.ct-draft { padding: 9px 11px; border: 1px solid rgba(15, 29, 58, 0.08); border-radius: 12px; background: rgba(255, 253, 249, 0.85); font-size: 11.5px; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.ct-pill { padding: 7px 12px; border-radius: 18px; background: var(--ink); color: #f8f4ec; font-size: 11px; font-weight: 600; }
.ct-chip { padding: 6px 9px; border: 1px solid var(--border); border-radius: 18px; font-size: 11px; }
.ct-result { width: fit-content; margin: 10px auto 0; font-size: 11px; color: var(--ink-soft); text-align: center; }
.ct-result u { margin-left: 3px; color: var(--ink); text-underline-offset: 2px; }
.ct-typing { display: none; }
.ct-input {
  position: absolute; z-index: 4; left: 14px; right: 14px; bottom: 90px;
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 16px;
  border: 1px solid var(--border); border-radius: 22px; background: rgba(255, 253, 249, 0.97);
  font-size: 12px; color: var(--ink-soft);
}
.ct-input > span:nth-child(2) { flex: 1; }
.ct-plus { font-size: 17px; }
.ct-send { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); }
.ct-send svg { width: 14px; height: 14px; fill: none; stroke: #f8f4ec; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* discover: the home tiles, then this week's finds, which scroll up as they arrive */
.ds-view {
  position: absolute; top: 52px; left: 0; right: 0; bottom: 84px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18px); mask-image: linear-gradient(transparent, #000 18px);
}
.ds-col { position: relative; padding: 10px 18px 16px; }
.ds-col .ph-sun { top: 10px; right: 14px; }
.ds-research {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 18px; background: rgba(255, 253, 249, 0.95);
  transition: box-shadow 600ms var(--ease-standard);
}
/* The art sits whole inside its circle, as in the app, so the book's sun is never cropped. */
.ds-art { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--card); overflow: hidden; }
.ds-art img { width: 68px; height: auto; }
.ds-research p { display: flex; align-items: center; gap: 7px; }
.ds-research b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.ds-research div > span { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.ds-research:has(.ds-new.is-on) { box-shadow: 0 0 0 3px rgba(185, 196, 174, 0.75); }
.ds-new { padding: 2px 8px; border-radius: 999px; background: var(--sage); font-size: 9.5px; font-weight: 700; }
.ds-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ds-tile, .ds-grants { border: 1px solid var(--border); border-radius: 16px; background: rgba(255, 253, 249, 0.95); }
.ds-tile { padding: 12px; }
.ds-tile img { display: block; width: 54px; height: auto; margin: 2px auto 8px; }
.ds-tile b, .ds-grants b { display: block; font-size: 12.5px; font-weight: 600; }
.ds-tile span, .ds-grants span { font-size: 9.5px; line-height: 1.4; color: var(--ink-soft); }
.ds-grants { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 12px; }
.ds-grants img { flex: none; width: 48px; height: auto; }
.ds-finds-head { margin-top: 18px; }
.ds-find {
  margin-top: 8px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255, 253, 249, 0.97); box-shadow: 0 12px 26px -20px rgba(15, 29, 58, 0.45);
}
.ds-badges { display: flex; align-items: center; gap: 6px; }
.ds-badges span { padding: 3px 8px; border-radius: 999px; background: var(--sage); font-size: 9px; font-weight: 700; }
.ds-badges span + span { padding: 0; background: none; font-weight: 600; color: var(--ink-soft); }
.ds-find b { display: block; margin-top: 7px; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.ds-find > p:not(.ds-badges):not(.ds-closes) { margin-top: 4px; font-size: 10.5px; line-height: 1.42; color: var(--ink-soft); }
.ds-closes { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 10.5px; font-weight: 700; }
.ds-closes svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-remind { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: #f8f4ec; font-size: 10px; font-weight: 600; }
.ds-src { display: block; margin-top: 7px; font-size: 9px; color: var(--ink-soft); }
.ds-why { display: block; margin-top: 2px; font-size: 9px; color: var(--sage-mark); }

/* the load: the parent's list, scattered around a phone that's been set down */
.ch-handover { margin-top: 26px; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.scene-off { background: #0d1424; }
.scene-off::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 46% at 50% 46%, rgba(255, 253, 249, 0.2), rgba(255, 253, 249, 0) 70%);
  opacity: var(--absorb, 0);
}
.thoughts { position: absolute; inset: 0; pointer-events: none; }
.thought {
  --k: 0;
  position: absolute; z-index: 3; left: 50%; top: 50%;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--x) * var(--tx, 1) * var(--s) * (1 - var(--k))), calc((var(--y) * var(--ty, 1) + var(--ty0, 0px)) * var(--s) * (1 - var(--k))))
    rotate(calc(var(--r) * (1 - var(--k))))
    scale(calc(1 - 0.72 * var(--k)));
  opacity: calc(1 - var(--k));
}
.thought-in {
  display: block; white-space: nowrap;
  padding: calc(11px * var(--s)) calc(16px * var(--s));
  border: 1px solid rgba(15, 29, 58, 0.08); border-radius: calc(14px * var(--s));
  background: #fffdf9; box-shadow: 0 16px 30px -18px rgba(56, 37, 18, 0.5), 0 2px 6px rgba(56, 37, 18, 0.06);
  font-size: calc(15px * var(--s)); font-weight: 600; color: var(--ink);
  animation: thought-drift calc(6s + var(--i) * 0.7s) ease-in-out calc(var(--i) * -1.3s) infinite;
}
@keyframes thought-drift { 50% { transform: translateY(-7px); } }

/* the jump-to index and its progress line only exist on the pinned stage */
.tale-index { display: none; }

/* plain layout: show each scene's last moment */
html:not(.tale-on) .is-gone { display: none; }
html:not(.tale-on) .ct-view,
html:not(.tale-on) .ds-view { display: flex; flex-direction: column; justify-content: flex-end; }

@media (max-width: 899px) {
  .ch { grid-template-columns: 1fr; gap: 40px; }
  .ch-device { justify-self: center; }
  .ch-hero h1 { font-size: clamp(42px, 11.2vw, 64px); }
  .ch-hero .lede { margin-top: 18px; font-size: 17.5px; }
  .ch-hero .get-app { margin-top: 22px; }
  .ch h2 { max-width: 14ch; font-size: clamp(30px, 8vw, 44px); }
  .ch-body { max-width: 40ch; margin-top: 12px; font-size: 16.5px; line-height: 1.48; }
  .ch-soon, .ch-fine { margin-top: 10px; font-size: 13.5px; }
  .wk-days { gap: 4px; margin-top: 16px; }
  .wk-days span { font-size: 10px; }
  /* The paper behind a phone-sized hero already carries leaf shadows; a second, faint shade here
     only delayed the first full paint. */
  .hero-canopy { display: none; }
  /* A phone screen leaves little room either side, so the list gathers over the phone itself. */
  .ch-load .ch-device { --tx: 0.24; --ty: 0.66; --ty0: -70px; }
}

/* --------------------------------------------------------- pinned stage */
.tale-on .tale { height: calc((var(--tale-total, 6) + 1) * 100svh); }
.tale-on .tale-pin {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  /* Sticky makes the pin its own stacking context, so it carries the paper the leaf shade
     multiplies onto: the top of the page canvas, at the size the page below it uses. */
  background: #fbf7ef url('assets/brand/landing-canvas-desktop.54e5fecd.webp') center top / var(--canvas-size, cover) no-repeat;
}
/* Over that, the hero's paper: the top of the canvas at the screen's width, which on a phone is
   where its leaf shadows show. It gives way as the story ends, so the stage scrolls off on the
   paper the page continues on. */
.tale-on .tale-pin::before {
  content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: #fbf7ef url('assets/brand/landing-canvas-desktop.54e5fecd.webp') center top / cover no-repeat;
  opacity: calc(1 - var(--settle, 0));
}
@media (max-width: 900px) {
  .tale-on .tale-pin { background-image: url('assets/brand/landing-canvas-mobile.216b9174.webp'); background-position: 26% top; }
  .tale-on .tale-pin::before { background-image: url('assets/brand/landing-canvas-mobile.216b9174.webp'); }
}
/* The phone fits a wide screen, so there is nothing to clip; clipping only cut its shadow off in a
   line as the stage scrolled away. */
@media (min-width: 900px) { .tale-on .tale-pin { overflow: visible; } }
.tale-on .ch {
  position: absolute; inset: var(--nav-h, 66px) 0 0; margin: 0 auto; padding-top: 0; padding-bottom: 0;
  --s: var(--pin-s, 0.86); pointer-events: none;
}
.tale-on .ch.is-active { pointer-events: auto; }

/* Copy hands over in turn: the old chapter's words are gone before the new ones arrive, so two
   chapters never read at once. */
.tale-on .ch-copy > * { transition: opacity 240ms var(--ease-standard), transform 340ms var(--ease-standard); }
.tale-on .ch:not(.is-active) .ch-copy > * { opacity: 0; }
.tale-on .ch.is-next .ch-copy > * { transform: translateY(28px); }
.tale-on .ch.is-past .ch-copy > * { transform: translateY(-28px); }
.tale-on .ch.is-active .ch-copy > * {
  transition: opacity 700ms var(--ease-expressive) var(--d, 260ms), transform 840ms var(--ease-expressive) var(--d, 260ms);
}
.tale-on .ch.is-active .ch-copy > :nth-child(2) { --d: 320ms; }
.tale-on .ch.is-active .ch-copy > :nth-child(3) { --d: 380ms; }
.tale-on .ch.is-active .ch-copy > :nth-child(4) { --d: 430ms; }

/* The hero is the page-load moment: words rise in, then the sun. Scrolling turns the sun into the
   phone, lands the notifications, then lifts the copy away in step with the scroll. */
.tale-on .ch-hero .ch-copy { opacity: calc(1 - var(--hero-out, 0)); transform: translateY(calc(var(--hero-out, 0) * -64px)); }
.tale-on .ch-hero .ch-copy > * { animation: tale-rise 1000ms var(--ease-expressive) backwards; }
.tale-on .ch-hero .ch-copy > :nth-child(2) { animation-delay: 120ms; }
.tale-on .ch-hero .ch-copy > :nth-child(3) { animation-delay: 240ms; }
.tale-on .ch-hero .ch-copy > :nth-child(4) { animation-delay: 340ms; }
.tale-on .ch-hero .hero-canopy { opacity: calc(1 - var(--hero-out, 0)); }
@keyframes tale-rise { from { opacity: 0; transform: translateY(22px); } }

/* The sun opens and closes the story: it turns into the phone as the hero plays and back once the
   week is over (motion/sunMorph.js). A stand-in phone forms over the stage; the chapters' own phone
   fades in over it (--phone) once the two match, and its screen wakes (--wake) after that. */
.tale-on .hero-sun { display: none; }
.tale-on .ch-device { opacity: var(--phone, 0); }
.tale-on .ch:last-of-type .screen::after {
  content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: #f8f4ec url('assets/brand/landing-canvas-mobile.216b9174.webp') center top / cover no-repeat;
  opacity: calc(1 - var(--wake, 0));
}
.morph { display: none; }
.tale-on .morph { display: block; position: absolute; inset: 0; pointer-events: none; }
.tale-on .mo-sun, .tale-on .mo-shape, .tale-on .mo-shadow { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tale-on .mo-sun { will-change: transform; }
.mo-sun-in { display: block; width: 100%; height: 100%; }
.tale-ready .mo-sun-in { animation: tale-rise 1200ms var(--ease-expressive) 120ms backwards; }
.mo-sun-img { display: block; width: 100%; height: auto; max-width: none; animation: sun-bob 9s ease-in-out infinite; }
@keyframes sun-bob { 50% { translate: 0 calc(-10.35px * var(--float, 1)); } }
.tale-on .mo-shape {
  overflow: hidden;
  box-shadow: 0 0 0 calc(1px * var(--pin-s, 1)) rgba(52, 64, 94, var(--bz, 0)),
              0 0 0 calc(2.5px * var(--pin-s, 1)) rgba(15, 29, 58, calc(0.5 * var(--bz, 0)));
}
.mo-shape > i { position: absolute; display: block; }
.mo-paper { inset: 0; background: #f8f4ec url('assets/brand/landing-canvas-mobile.216b9174.webp') center top / cover no-repeat; opacity: var(--paper, 0); }
/* The app icon's own backdrop: pale sage, lighter at the top. */
.mo-tile { inset: 0; background: linear-gradient(180deg, #f7f9f0 0%, #eef2e3 48%, #e4ebd6 100%); opacity: var(--tile, 0); }
.mo-bezel { inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--bzw, 0px) #101a30; }
.mo-island {
  left: 50%; top: calc(23px * var(--pin-s, 1)); width: calc(98px * var(--pin-s, 1)); height: calc(29px * var(--pin-s, 1));
  margin-left: calc(-49px * var(--pin-s, 1)); border-radius: calc(16px * var(--pin-s, 1)); background: #0a1020; opacity: var(--isl, 0);
}
.mo-home {
  left: 50%; bottom: calc(20px * var(--pin-s, 1)); width: calc(118px * var(--pin-s, 1)); height: calc(4.5px * var(--pin-s, 1));
  margin-left: calc(-59px * var(--pin-s, 1)); border-radius: 3px; background: var(--ink); opacity: var(--isl, 0);
}
.tale-on .mo-shadow {
  box-shadow: 0 calc(50px * var(--pin-s, 1)) calc(80px * var(--pin-s, 1)) calc(-36px * var(--pin-s, 1)) rgba(15, 29, 58, calc(0.5 * var(--phone-shadow, 0))),
              0 calc(26px * var(--pin-s, 1)) calc(46px * var(--pin-s, 1)) calc(-26px * var(--pin-s, 1)) rgba(56, 37, 18, calc(0.3 * var(--phone-shadow, 0))),
              0 calc(12px * var(--pin-s, 1)) calc(26px * var(--pin-s, 1)) calc(-8px * var(--pin-s, 1)) rgba(56, 37, 18, calc(0.32 * var(--icon-shadow, 0)));
}
.tale-on .mo-shadow::after {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: -16px; height: 34px;
  border-radius: 50%; background: rgba(56, 37, 18, 0.2); filter: blur(18px); opacity: var(--phone-shadow, 0);
}

/* One phone: the hero's draws the bezel, shadow and paper; the last chapter's draws the island,
   home bar and glare on top; every chapter's scene sits between them. */
.tale-on .ch:not(.ch-hero) .device { border-color: transparent; box-shadow: none; }
.tale-on .ch:not(.ch-hero) .device::before,
.tale-on .ch:not(.ch-hero) .device::after,
.tale-on .ch:not(.ch-hero) .ch-device::after { display: none; }
.tale-on .ch:not(.ch-hero) .screen { background: none; }
.tale-on .ch:not(:last-of-type) .ph-island,
.tale-on .ch:not(:last-of-type) .ph-home,
.tale-on .ch:not(:last-of-type) .ph-glare { display: none; }

/* Screens hand over in turn too: the outgoing screen is gone before the next one appears, so two
   never show at once, however fast the scroll. */
.tale-on .scene { transition: opacity 220ms var(--ease-standard), transform 320ms var(--ease-standard); }
.tale-on .ch:not(.is-active) .scene { opacity: 0; }
.tale-on .ch.is-next .scene { transform: translateY(14px) scale(0.985); }
.tale-on .ch.is-past .scene { transform: translateY(-14px) scale(0.985); }
.tale-on .ch.is-active .scene { transition: opacity 560ms var(--ease-expressive) 220ms, transform 700ms var(--ease-expressive) 220ms; }
/* The phone sleeps for the load chapter and wakes into Documents: the paper under every scene
   dims with it, so the dark screen shows no light edge. */
.tale-on .ch-hero .screen { transition: background-color 420ms var(--ease-standard); }
.tale-on .tale-pin.is-asleep .ch-hero .screen { background-color: #0d1424; background-image: none; }

/* Lines arrive as their beat is reached and leave the same way when scrolling back. */
.tale-on [data-b], .tale-on [data-gone] { transition: opacity 480ms var(--ease-standard), transform 640ms var(--ease-expressive); }
.tale-on [data-b]:not(.is-on) { opacity: 0; transform: translateY(10px); }
.tale-on .is-gone { opacity: 0; transform: translateY(-6px); }

.tale-on .slot { transition: grid-template-rows 620ms var(--ease-expressive), opacity 480ms var(--ease-standard); }
.tale-on .slot[data-b]:not(.is-on),
.tale-on .slot.is-gone { grid-template-rows: 0fr; opacity: 0; transform: none; }
.tale-on .slot-in > * { transition: transform 620ms var(--ease-expressive); }
.tale-on .slot:not(.is-on) > .slot-in > * { transform: translateY(-10px) scale(0.97); }

.tale-on .ph-banner { transition: transform 620ms cubic-bezier(0.2, 0.9, 0.25, 1), opacity 300ms var(--ease-standard); }
.tale-on .ph-banner[data-b]:not(.is-on), .tale-on .ph-banner.is-gone { opacity: 0; transform: translateY(-130%) scale(0.96); }

.tale-on .lk-day { transition: opacity 420ms var(--ease-standard), transform 520ms var(--ease-expressive); }
.tale-on .lk-day:not(.is-current) { transform: translateY(-8px); }

.tale-on .dc-count i { transition: transform 520ms var(--ease-expressive), opacity 360ms var(--ease-standard); }
.tale-on .dc-now:not(.is-on) { transform: translateY(100%); }
.tale-on .dc-was.is-gone { transform: translateY(-100%); }
.tale-on .dc-bar i { transform: scaleX(0.08); transition: transform 1500ms cubic-bezier(0.3, 0.1, 0.2, 1); }
.tale-on .slot.is-on .dc-bar i { transform: scaleX(1); }
.tale-on .dc-status:has(.dc-read.is-on) + .dc-bar { background: linear-gradient(90deg, #e7ddcc 0%, #b9c4ae 50%, #e7ddcc 100%) 0 0 / 200% 100%; animation: tale-shimmer 1.4s linear infinite; }
.tale-on .dc-status:has(.dc-read.is-on) + .dc-bar i { opacity: 0; }
@keyframes tale-shimmer { to { background-position: -200% 0; } }

.tale-on .ct-col, .tale-on .ds-col { transition: transform 720ms var(--ease-expressive); }
.tale-on .ct-typing {
  display: flex; gap: 4px; width: fit-content; height: 0; margin-left: 32px; padding: 0 12px;
  overflow: hidden; border-radius: 14px; background: #e7ede1; opacity: 0;
}
.tale-on .ct-jay.is-on .ct-typing { animation: tale-typing 900ms var(--ease-standard) both; }
.tale-on .ct-typing i { flex: none; align-self: center; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); }
.tale-on .ct-jay.is-on .ct-typing i { animation: tale-dot 0.55s ease-in-out 2; }
.tale-on .ct-typing i:nth-child(2) { animation-delay: 0.15s; }
.tale-on .ct-typing i:nth-child(3) { animation-delay: 0.3s; }
.tale-on .ct-jay .ct-row { transition: opacity 480ms var(--ease-standard), transform 640ms var(--ease-expressive); }
.tale-on .ct-jay:not(.is-on) .ct-row { opacity: 0; transform: translateY(8px); }
.tale-on .ct-jay.is-on .ct-row { transition-delay: 640ms; }
@keyframes tale-typing {
  0% { height: 0; opacity: 0; }
  22%, 72% { height: 30px; opacity: 1; }
  100% { height: 0; opacity: 0; }
}
@keyframes tale-dot { 40% { transform: translateY(-3px); } }

.tale-on .thought { --k: clamp(0, calc(var(--absorb, 0) * 1.5 - var(--i) * 0.07), 1); transition: transform 140ms linear, opacity 140ms linear; }
.tale-on .thought-in { transition: opacity 640ms var(--ease-standard), scale 820ms var(--ease-expressive); }
.tale-on .thought-in[data-b]:not(.is-on) { opacity: 0; transform: none; scale: 0.9; }
.tale-on .thought-in.is-on { transition-delay: calc(var(--i) * 80ms); }

.tale-on .wk-days li { border-top-color: #dfe5d8; transition: border-color 420ms var(--ease-standard); }
.tale-on .wk-days li[data-b]:not(.is-on) { opacity: 1; transform: none; }
.tale-on .wk-days li > * { opacity: 0.4; transition: opacity 420ms var(--ease-standard); }
.tale-on .wk-days li.is-on { border-top-color: var(--sage-mark); }
.tale-on .wk-days li.is-on > * { opacity: 1; }
.tale-on .wk-days li.is-today { border-top-color: var(--ink); }

/* jump-to index, shown once the tour starts */
.tale-on .tale-index {
  display: block; position: absolute; z-index: 6; left: 0; right: 0; bottom: 20px;
  max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--gutter) - 12px);
  opacity: 0; visibility: hidden;
  transition: opacity 400ms var(--ease-standard), visibility 0s linear 400ms;
}
.tale-on .tale-pin.is-touring .tale-index { opacity: 1; visibility: visible; transition-delay: 0s; }
.tale-index ol { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tale-index button {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  transition: color var(--dur-micro) var(--ease-standard), background var(--dur-micro) var(--ease-standard);
}
.tale-index button:hover { color: var(--ink); background: rgba(223, 229, 216, 0.6); }
.tale-index button[aria-current] { color: var(--ink); background: #dfe5d8; }
.tale-index-bar { display: block; width: min(31rem, calc(100% - 24px)); height: 2px; margin: 6px 0 0 12px; overflow: hidden; border-radius: 1px; background: rgba(15, 29, 58, 0.1); }
.tale-index-bar i { display: block; width: 100%; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--tour, 0)); }

@media (max-width: 899px) {
  .tale-on .ch { display: block; }
  .tale-on .ch-copy { position: absolute; top: 16px; left: var(--gutter); right: var(--gutter); max-width: none; }
  /* Positioned with top, not a transform: a transform here would isolate the sun's blend. */
  .tale-on .ch-device {
    position: absolute; left: 50%; top: calc(16px + var(--device-top, 420px)); margin-left: calc(-170px * var(--s));
  }
  .tale-on .tale-pin.is-moving .ch-device { transition: top 640ms var(--ease-expressive); }
  /* The stage is as tall as the screen with the browser's toolbars tucked away, so the page never
     shows below it. The chapters keep to the screen with the toolbars showing, and the phone fades
     into the stage's own paper at that edge rather than being cut (MOBILE_FADE in motion/tale.js). */
  .tale-on .tale-pin { height: 100lvh; }
  .tale-on .ch { bottom: calc(100lvh - 100svh); }
  .tale-on .tale-pin::after {
    content: ''; position: absolute; z-index: 5; inset: 0; pointer-events: none; background: inherit;
    -webkit-mask-image: linear-gradient(transparent calc(100svh - 40px), #000 100svh);
    mask-image: linear-gradient(transparent calc(100svh - 40px), #000 100svh);
  }
  /* The words under the hero's headline make way as the sun goes into its icon (--words-out), so
     the phone opens under the headline with every notification in view. They follow the scroll
     exactly, so they carry no transition of their own. */
  .tale-on .ch-hero .ch-copy > :not(h1) { opacity: calc(1 - var(--words-out, 0)); translate: 0 calc(var(--words-out, 0) * -16px); }
  .tale-on .ch-hero.is-active .ch-copy > :not(h1) { transition: none; }
  .tale-on .ch-hero.is-lifted .ch-copy > :not(h1) { visibility: hidden; }
  .tale-on .tale-index { top: var(--nav-h, 62px); bottom: auto; padding: 0; }
  .tale-on .tale-index ol { display: none; }
  .tale-on .tale-index-bar { width: 100%; margin: 0; border-radius: 0; }
}