/* Shared by the landing page (landing.html) and /work (work.html): one frame
   for both. Page-only pieces stay in each page. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #080810;
  --surface: rgb(var(--ink-rgb) / 0.05);
  --surface-2: rgb(var(--ink-rgb) / 0.08);
  --border: rgb(var(--ink-rgb) / 0.08);
  --text: #ffffff;
  --text-2: rgb(var(--ink-rgb) / 0.55);
  --purple: #7c3aed;
  --violet: #6366f1;
  --pink: #ec4899;
  --peach: #f59e6b;
  /* Theme accents. Defaults are Lilac Mono (the app's default); a visitor's
     saved app theme overrides them before first paint (script at top of body). */
  --accent-ink: #b5a1fb; /* = Lilac Mono accent-ink (#a78bfa 82% + white) */
  --accent: #a78bfa;
  --accent-strong: #7c3aed;
  --on-strong: #fff;
  --acc-rgb: 124 58 237;
  --ink-rgb: 255 255 255;
  --bg-rgb: 8 8 16;
  --acc2-rgb: 236 72 153;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow-x: hidden;
}
/* Purple gradient behind the whole page: soft blobs that drift on their own
   (transform-only animation, so nothing repaints) inside .bg-blobs, which
   js/bg-glow.js slides toward the cursor. A small dithered pixel patch
   (.bg-pixels) trails the cursor and fades out when the mouse rests. The
   same script autoscrolls from the middle line like a stylus barrel button. */
.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(160deg, rgb(var(--acc-rgb) / 0.06) 0%, transparent 45%, transparent 60%, rgb(var(--acc2-rgb) / 0.04) 100%);
}
.bg-blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; will-change: transform; }
.bg-blob { position: absolute; border-radius: 50%; will-change: transform; animation: blobDrift 22s ease-in-out infinite alternate; }
.bg-blob.b1 { width: 62vmax; height: 62vmax; left: 38%; top: -22%; background: radial-gradient(closest-side, rgb(var(--acc-rgb) / 0.22), rgb(var(--acc-rgb) / 0)); }
.bg-blob.b2 { width: 52vmax; height: 52vmax; left: -18%; top: 30%; background: radial-gradient(closest-side, rgb(var(--acc2-rgb) / 0.12), rgb(var(--acc2-rgb) / 0)); animation-duration: 27s; animation-delay: -9s; }
.bg-blob.b3 { width: 46vmax; height: 46vmax; left: 55%; top: 48%; background: radial-gradient(closest-side, rgb(var(--acc-rgb) / 0.14), rgb(var(--acc-rgb) / 0)); animation-duration: 31s; animation-delay: -17s; }
@keyframes blobDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(-9vw, 7vh, 0) scale(1.12); }
  66%  { transform: translate3d(7vw, -6vh, 0) scale(0.92); }
  100% { transform: translate3d(-4vw, -9vh, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .bg-blob { animation: none; } }
body.video-on .bg-blob { animation-play-state: paused; } /* held still while the demo video plays (js/bg-glow.js) */
.bg-pixels {
  position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 340px; height: 340px; image-rendering: pixelated; opacity: 0; will-change: transform, opacity;
}

/* ── Animations ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes revealUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes nodePop { 0% { transform:scale(0.92); opacity:0; } 100% { transform:scale(1); opacity:1; } }

.anim-h1     { animation: fadeUp 0.7s ease both; animation-delay: 0.25s; }
.anim-sub    { animation: fadeUp 0.7s ease both; animation-delay: 0.4s; }
.anim-cta    { animation: fadeUp 0.7s ease both; animation-delay: 0.55s; }
.anim-strip  { animation: fadeIn 0.8s ease both; animation-delay: 0.7s; }
.reveal { opacity:0; animation: revealUp 1s ease both; animation-play-state: paused; }
.reveal.playing { animation-play-state: running; }


/* ── Nav ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 66px;
  background: rgb(var(--bg-rgb) / 0.7); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; text-decoration: none; color: var(--text); }
.nav-logo img { border-radius: 50%; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a { color: var(--text-2); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
/* Nine links don't fit between phone and desktop widths: keep the pages
   (Pricing, Demo, Blog, Contact, App) and drop the in-page section jumps. */
@media (max-width: 1240px) { .nav-section { display: none; } .nav-links { gap: 28px; } }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.landing-translate-wrap { position: relative; }
.landing-translate-btn {
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgb(var(--ink-rgb) / 0.12);
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--text); cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.landing-translate-btn:hover { background: rgb(var(--ink-rgb) / 0.12); border-color: rgb(var(--ink-rgb) / 0.22); transform: translateY(-1px); }
.landing-translate-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px;
  padding: 8px; border-radius: 16px;
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  background: rgb(var(--bg-rgb) / 0.95); backdrop-filter: blur(18px);
  display: none; flex-direction: column; gap: 4px; z-index: 120;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.landing-translate-menu.open { display: flex; }
.landing-lang-btn {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: none;
  background: transparent; color: var(--text); cursor: pointer;
  font-size: 13px; text-align: left; transition: background 0.15s, color 0.15s;
}
.landing-lang-btn:hover, .landing-lang-btn.active { background: rgb(var(--acc-rgb) / 0.16); color: var(--text); }
/* Theme picker: same button + menu as the language one, one row per theme. */
.landing-theme-menu { max-height: min(70vh, 560px); overflow-y: auto; }
.landing-theme-btn { display: flex; align-items: center; gap: 10px; }
.landing-theme-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1px solid rgb(var(--ink-rgb) / 0.18); }
.btn-join { padding: 9px 22px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity 0.2s; }
.btn-join:hover { opacity: 0.88; }

/* ── Hero ── */
.hero {
  /* Short enough that the demo below starts on the first screen. */
  min-height: 74vh; display: flex; align-items: center; justify-content: center;
  padding: 100px 48px 80px;
  position: relative; overflow: hidden;
  flex-direction: column; text-align: center;
}
.hero-content { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; }
h1 {
  font-size: clamp(40px, 6vw, 76px); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.02; margin-bottom: 18px; color: var(--text);
}
.hero-sub { font-size: 22px; color: var(--text-2); line-height: 1.65; margin-bottom: 40px; max-width: 560px; margin-left: auto; margin-right: auto; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
}
.hero-cta:hover { opacity: 0.9; transform: translateY(-1px); }
.hero-cta svg { flex-shrink: 0; }
.hero-cta-row {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.hero-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px;
  background: rgb(var(--ink-rgb) / 0.06); color: var(--text);
  border: 1px solid rgb(var(--ink-rgb) / 0.12);
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: border-color 0.2s, transform 0.15s, background 0.2s;
}
.hero-note { margin-top: 14px; font-size: 14px; color: var(--text-3); }
.hero-cta-secondary:hover { border-color: rgb(var(--acc-rgb) / 0.45); background: rgb(var(--acc-rgb) / 0.12); transform: translateY(-1px); }

/* ── Hero mockup visual ── */
.hero-visual {
  position: relative; z-index: 1;
  display: flex; gap: 64px; margin-top: 64px;
  max-width: 920px; width: 100%;
  justify-content: center;
}
/* Scroll-scrubbed exaggeration: as the hero scrolls past, the demo grows
   then fades — driven every frame by scroll position (see the scroll
   listener near the bottom of this file), not a fixed-duration animation
   like .anim-strip/.reveal elsewhere. */
.hero-visual {
  transform: scale(var(--visual-scale, 1)); opacity: var(--visual-opacity, 1);
  will-change: transform, opacity; transform-origin: center top;
}
.hero-demo-frame {
  /* The full product demo: a real-app screen recording (16:9, 1080p source).
     Autoplays muted; controls let visitors unmute the voiceover. */
  width: 100%; max-width: 820px; aspect-ratio: 16 / 9;
  border-radius: 20px;
  border: 1px solid rgb(var(--ink-rgb) / 0.12);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
  display: block; margin: 0 auto;
  background: #0a0a14;
  object-fit: cover;
}

/* ── Brand strip ── */
.brand-strip {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 18px 48px; display: flex; align-items: center; justify-content: center;
  gap: 12px; overflow-x: auto; flex-wrap: wrap;
}
.pill-link {
  font-size: 12px; color: rgb(var(--ink-rgb) / 0.42); font-weight: 500;
  letter-spacing: 0.04em; white-space: nowrap;
  text-decoration: none; padding: 5px 0; border: none;
  transition: color 0.2s;
}
.pill-link:hover { color: rgb(var(--ink-rgb) / 0.75); }

/* ── Section base ── */
.section-feature {
  padding: 80px 48px;
  max-width: 1200px; margin: 0 auto;
}
.sec-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.sec-title { font-size: clamp(28px,4vw,52px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; line-height: 1.1; }
.sec-body { font-size: 17px; color: var(--text-2); line-height: 1.7; max-width: 520px; margin-bottom: 32px; }
.highlight-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.chip {
  padding: 5px 11px; border-radius: 5px;
  font-size: 13px; font-weight: 500; color: rgb(var(--ink-rgb) / 0.7);
  background: rgb(var(--ink-rgb) / 0.04); border: 1px solid var(--border);
}
.chip-purple { background: rgb(var(--ink-rgb) / 0.04); border-color: var(--border); color: rgb(var(--ink-rgb) / 0.7); }

/* ── Feature layout: text + card side by side ── */
.feat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feat-split.reverse { direction: rtl; }
.feat-split.reverse > * { direction: ltr; }

/* ── Mode card (existing style, kept) ── */
.mode-card {
  border-radius: 24px; overflow: hidden;
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
}
.mode-header {
  padding: 28px 28px 20px; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.07);
  display: flex; align-items: center; gap: 16px;
}
.mode-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mode-title { font-size: 18px; font-weight: 700; }
.mode-desc { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.mode-rows { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.mode-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: 14px;
  background: rgb(var(--ink-rgb) / 0.04);
  transition: background 0.15s;
}
.mode-row:hover { background: rgb(var(--ink-rgb) / 0.08); }
.mode-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: rgb(var(--ink-rgb) / 0.07);
}
.mode-row-name { font-size: 15px; font-weight: 600; }
.mode-row-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ── Cross-mode section ── */
.crossmode-section {
  position: relative; overflow: hidden;
  padding: 88px 48px;
  border-top: 1px solid var(--border);
}
.crossmode-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.crossmode-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.crossmode-title { font-size: clamp(32px,5vw,62px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 20px; line-height: 1.06; }
.crossmode-body { font-size: 17px; color: var(--text-2); line-height: 1.7; max-width: 560px; margin: 0 auto 48px; }

/* ── Flow diagram ── */
.flow-diagram {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap; row-gap: 16px;
  width: 100%; margin: 0 auto;
}
.flow-node {
  padding: 14px 22px; border-radius: 16px;
  font-size: 14px; font-weight: 700;
  border: 1px solid; text-align: center;
  min-width: 160px;
}
.flow-node-companion {
  background: rgb(var(--acc-rgb) / 0.12); border-color: rgb(var(--acc-rgb) / 0.35); color: #a5b4fc;
}
.flow-node-sim {
  background: rgb(var(--acc2-rgb) / 0.12); border-color: rgb(var(--acc2-rgb) / 0.35); color: #f9a8d4;
}
.flow-node-mem {
  background: rgb(var(--acc-rgb) / 0.12); border-color: rgb(var(--acc-rgb) / 0.35); color: var(--accent-ink);
}
.flow-arrow {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px;
}
.flow-arrow-line {
  width: 40px; height: 2px;
  background: rgb(var(--acc-rgb) / 0.45);
  position: relative;
}
.flow-arrow-line::after {
  content: ''; position: absolute; right: -4px; top: -4px;
  border: 5px solid transparent;
  border-left: 7px solid rgb(var(--acc-rgb) / 0.8);
}
.flow-switch {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); margin-top: 6px;
}

/* ── Wellness section ── */
.wellness-section { padding: 80px 48px; max-width: 1200px; margin: 0 auto; }

.page-tail { position: relative; }

/* ── Feat cards (phase 1: icon+title / phase 2: description slides up) ── */
.cards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
.feat-card {
  border-radius: 20px;
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  position: relative; overflow: hidden; min-height: 160px;
  display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 28px;
  background: rgb(var(--ink-rgb) / 0.03);
  cursor: default;
  transition: border-color 0.2s;
}
.feat-card:hover { border-color: rgb(var(--ink-rgb) / 0.16); }
.feat-card::before { content:''; position:absolute; inset:0; opacity:0.12; transition:opacity 0.25s; }
.feat-card:hover::before { opacity:0.22; }
.feat-icon {
  width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--ink-rgb) / 0.07);
}
.feat-card h3 {
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.02em; line-height: 1.25;
  position: relative; z-index: 1; color: var(--text);
}
.feat-card p {
  position: absolute; inset: 0; z-index: 2;
  padding: 32px; margin: 0;
  font-weight: 400;
  font-size: 15px; color: rgb(var(--ink-rgb) / 0.82); line-height: 1.7;
  display: flex; align-items: center; justify-content: center; text-align: center;
  transform: translateY(100%); transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
}
.feat-card:hover p { transform: translateY(0); }
.card-yellow::before { background: none; }
.card-yellow p { background: #101018; }

/* ── Demo ── */
.story-section { max-width: 1200px; margin: 0 auto; padding: 24px 48px 0; }
.demo-frame { margin-top: 32px; display: flex; justify-content: center; }
.demo-frame .hero-demo-frame { max-width: 720px; transition: max-width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.demo-frame.playing .hero-demo-frame { max-width: 1100px; }
/* The tall phone cut never grows: grown, it no longer fit on screen, paused,
   shrank, fit again and played -- an endless flicker on narrow windows. */
.demo-frame.playing .hero-demo-frame.is-vertical { max-width: min(100%, calc(78vh * 9 / 16)); }
@media (prefers-reduced-motion: reduce) { .demo-frame .hero-demo-frame { transition: none; } }
.demo-frame .hero-demo-frame { width: 100%; border-radius: 12px; border: 1px solid var(--border); background: #000; }

/* ── Read a situation (the interactive centrepiece) ── */
.reader [hidden], .how [hidden] { display: none !important; }
/* Jev-style statements: few words, set very large and tight, centred. */
.reader > .reader-top .sec-title, .how > .sec-title, .cmp > .sec-title, #demo > .sec-title,
.founding > .sec-title, .faq-wrap > .sec-title {
  font-size: clamp(30px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.03em; text-align: center; margin: 0 auto 24px; max-width: 22ch;
}
.reader, .how, .cmp, .founding, .faq-wrap { max-width: 1100px; margin: 0 auto; padding: 96px 48px 0; }
.reader-top { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.reader-top .sec-title { margin: 0; }
.reader-mode { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / 0.03); }
.mode-btn { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.mode-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.reader-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.reader-chip { font: inherit; font-size: 15px; padding: 10px 18px; border-radius: 999px; cursor: pointer; color: var(--text-2); background: rgb(var(--ink-rgb) / 0.03); border: 1px solid var(--border); transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; }
.reader-chip:hover { color: var(--text); }
.reader-chip[aria-selected="true"] { color: var(--text); background: rgb(var(--acc-rgb) / 0.2); border-color: rgb(var(--acc-rgb) / 0.6); box-shadow: 0 0 0 4px rgb(var(--acc-rgb) / 0.12); }
.reader-setup { font-size: 17px; color: var(--text-2); margin: 28px 0 18px; text-align: center; }
/* Like the app's panel: most supported, then two alternatives on the left;
   the four speculative reads on the right, labelled. */
.takes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.takes-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.takes-label { margin: 2px 0 2px 4px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.takes-col.spec .take { opacity: 0.85; }
.take { position: relative; border-radius: 10px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / 0.03); padding: 20px 22px 18px; outline: none; transition: border-color 0.2s, background 0.2s; }
.take-line { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
/* The advice: revealed on hover/focus where there is a pointer, always shown on touch. */
/* The advice is always shown: nothing on the card grows or moves. */
.take-more { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.take:hover, .take:focus-visible { border-color: rgb(var(--acc-rgb) / 0.5); background: rgb(var(--acc-rgb) / 0.08); }
.take { display: flex; flex-direction: column; }
.take-who { margin: auto 0 0; padding-top: 14px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.take.best { border-color: rgb(var(--acc-rgb) / 0.6); background: rgb(var(--acc-rgb) / 0.08); padding: 20px 22px; border-radius: 20px; }
.take.best .take-line { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.take.best .take-more { font-size: 15.5px; margin-top: 8px; }
.take.best .take-badge { align-self: flex-start; margin: 0 0 10px; font-size: 12px; padding: 3px 10px; }
.take.best .take-who { font-size: 13px; padding-top: 10px; }
/* The other six: one line each, with the perspective's face beside it. */
.take:not(.best) { flex-direction: row; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 8px; }
/* The seven perspectives: line icons on violet tiles, as in the app. */
.take-ava { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgb(var(--acc-rgb) / 0.4); display: flex; align-items: center; justify-content: center; color: var(--accent-ink); background: rgb(var(--acc-rgb) / 0.16); border: 1px solid rgb(var(--acc-rgb) / 0.35); }
.take-ico { display: inline-flex; color: var(--accent-ink); }
.take-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.take:not(.best) .take-line { font-size: 16px; line-height: 1.35; }
.take:not(.best) .take-who { margin: 0; padding: 0; font-size: 12.5px; }
.take.best:hover, .take.best:focus-visible { border-color: var(--accent); background: rgb(var(--acc-rgb) / 0.14); }
.take.best .take-line { color: var(--text); }
.take-badge { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--on-strong); background: var(--accent-strong); }
@media (hover: none), (max-width: 768px) {
  .take-more { max-height: none; opacity: 1; margin-top: 10px; }
}
.takes.dealing .take { animation: deal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 60ms); }
/* Switching: the old content blurs and fades away, the new one rises into
   place. Each block is held at its tallest height, so only the content
   moves, never the page around it. */
@keyframes deal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes leave { to { opacity: 0; transform: translateY(-10px); } }
.reader-stage.leaving .reader-panel:not([hidden]) { animation: leave 0.24s ease-in both; }
.how.leaving .how-panel:not([hidden]) { animation: leave 0.16s ease-in both; }
.rehearse { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.rehearse.dealing > * { animation: deal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rehearse.dealing > :nth-child(2) { animation-delay: 0.12s; }
.rehearse.dealing > :nth-child(3) { animation-delay: 0.24s; }
.rehearse.dealing > :nth-child(4) { animation-delay: 0.36s; }
.bubble { max-width: 82%; padding: 12px 16px; border-radius: 18px; font-size: 16px; line-height: 1.45; }
.bubble-who { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.bubble-who b { font-size: 13px; font-weight: 700; color: var(--text); }
.who-ava { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--accent-ink); background: rgb(var(--acc-rgb) / 0.16); border: 1px solid rgb(var(--acc-rgb) / 0.4); }
.who-rel { font-size: 12px; color: var(--text-3); }
.who-rel::before { content: '·'; margin-right: 6px; }
.bubble.them { align-self: flex-start; background: rgb(var(--ink-rgb) / 0.06); border-bottom-left-radius: 6px; }
.bubble.me { align-self: flex-end; border-bottom-right-radius: 6px; }
.bubble.draft { border: 1px dashed rgb(var(--ink-rgb) / 0.25); color: var(--text-2); text-decoration: line-through; text-decoration-color: rgb(var(--ink-rgb) / 0.35); }
.bubble.draft .bubble-who { text-decoration: none; }
.bubble.better { background: var(--accent-strong); color: var(--on-strong); }
.bubble.better .bubble-who { color: rgb(var(--ink-rgb) / 0.75); }
.coach { align-self: center; width: 100%; padding: 14px 18px; border-radius: 14px; background: rgb(var(--acc-rgb) / 0.08); border-left: 3px solid var(--accent); }
.coach-label { font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.coach p { margin: 4px 0 0; font-size: 15px; color: var(--text); line-height: 1.5; }
.reader-note { margin-top: 18px; font-size: 13px; color: rgb(var(--ink-rgb) / 0.35); text-align: center; }

/* ── How it works: tabs ── */
.how-tabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
/* 1 → 2 → 3: the arrow out of the current step lights up. */
.how-arrow { display: inline-flex; color: rgb(var(--ink-rgb) / 0.25); transition: color 0.35s ease, transform 0.35s ease; }
.how-tab[aria-selected="true"] + .how-arrow { color: var(--accent); transform: translateX(3px); }
/* Phones: the three steps stack, arrows pointing down. */
@media (max-width: 640px) {
  .how-tabs { flex-direction: column; gap: 6px; }
  .how-arrow { transform: rotate(90deg); }
  .how-tab[aria-selected="true"] + .how-arrow { transform: rotate(90deg) translateX(3px); }
}
.how-tab { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 16px; font-weight: 600; padding: 10px 18px 10px 10px; border-radius: 999px; cursor: pointer; color: var(--text-2); background: none; border: 1px solid var(--border); transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; }
.how-n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; background: rgb(var(--ink-rgb) / 0.06); transition: background 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.how-tab[aria-selected="true"] { color: var(--text); border-color: rgb(var(--acc-rgb) / 0.6); background: rgb(var(--acc-rgb) / 0.14); box-shadow: 0 0 0 4px rgb(var(--acc-rgb) / 0.12); }
.how-tab[aria-selected="true"] .how-n { background: var(--accent-strong); color: var(--on-strong); transform: scale(1.12); }
.how-panel { margin: 24px auto 0; max-width: 1004px; text-align: center; }
.how-line { margin: 0; font-size: 22px; line-height: 1.45; color: var(--text); }
/* "Behind it": what the backend does for this step, as a small flow. */
.how-flow { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flow-tag { font-size: 12px; font-weight: 600; color: var(--accent); padding: 3px 10px; border-radius: 999px; background: rgb(var(--acc-rgb) / 0.12); }
.graph { display: flex; align-items: stretch; justify-content: center; height: 176px; }
.g-col { display: flex; flex-direction: column; justify-content: space-around; }
.g-node { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-size: 15px; white-space: nowrap; color: var(--text-2); background: rgb(var(--ink-rgb) / 0.04); border: 1px solid var(--border); }
.g-node.strong { color: var(--text); border-color: rgb(var(--acc-rgb) / 0.55); background: rgb(var(--acc-rgb) / 0.16); }
/* The seven perspectives sit ON one circle (centres exactly on the outline),
   the judge's caption under it; an arrow on to the ranked readings. */
.graph:has(.g-ring) { height: auto; align-items: center; gap: 28px; }
.graph:has(.g-ring) > .g-col { gap: 12px; justify-content: center; }
.g-ringwrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.g-ring { --ring: 250px; --r: calc(var(--ring) * 0.39); position: relative; width: var(--ring); height: var(--ring); flex: none; }
.g-face { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-ink); background: var(--bg); background-image: linear-gradient(rgb(var(--acc-rgb) / 0.16), rgb(var(--acc-rgb) / 0.16)); border: 1.5px solid rgb(var(--acc-rgb) / 0.55);
  transform: rotate(calc(var(--i) * 360deg / 7 - 90deg)) translate(var(--r)) rotate(calc(90deg - var(--i) * 360deg / 7)); }
.g-face svg { width: 20px; height: 20px; }
.g-ring-cap { font-size: 15px; color: var(--text-2); }
/* Bars to scale: 1, 2 and 4 readings. */
.g-node.rank i { display: inline-block; height: 8px; width: calc(var(--w) * 10px); border-radius: 4px; background: var(--accent); }
.g-node.rank:not(.strong) i { background: rgb(var(--acc-rgb) / 0.45); }
.g-link { width: 76px; height: 100%; flex: none; overflow: visible; }
.g-link path { fill: none; stroke: rgb(var(--acc-rgb) / 0.55); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 3; stroke-dashoffset: 0; } /* 3, not 1: non-scaling-stroke stretches the dash unevenly on tall graphs; the extra length keeps every curve whole */
.graph.chain { height: auto; align-items: center; gap: 10px; }
.g-arrow { display: inline-flex; color: var(--accent); }
.g-loop { margin: 10px 0 0; font-size: 13px; color: var(--accent); }
/* Each time a step comes up: nodes fade in left to right, links draw. */
@keyframes draw { from { stroke-dashoffset: 3; } to { stroke-dashoffset: 0; } }
.how-panel:not([hidden]) .g-ringwrap, .how-panel:not([hidden]) .g-col, .how-panel:not([hidden]) .graph.chain > * { animation: deal 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.how-panel:not([hidden]) .graph > :nth-child(3), .how-panel:not([hidden]) .graph.chain > :nth-child(n+3) { animation-delay: 0.2s; }
.how-panel:not([hidden]) .graph > :nth-child(5), .how-panel:not([hidden]) .graph.chain > :nth-child(n+5) { animation-delay: 0.4s; }
.how-panel:not([hidden]) .graph.chain > :nth-child(n+7) { animation-delay: 0.6s; }
.how-panel:not([hidden]) .g-link path { animation: draw 0.5s ease-out both; animation-delay: 0.1s; }
.how-panel:not([hidden]) .graph > .g-link:nth-child(4) path { animation-delay: 0.3s; }
/* Narrow screens: tighter graphs; the rehearsal chain stacks. */
@media (max-width: 700px) {
  .graph { height: 168px; }
  .g-node { font-size: 11.5px; padding: 6px 8px; white-space: normal; max-width: 112px; }
  .g-node.rank i { width: calc(var(--w) * 5px); height: 6px; }
  .g-link { width: 26px; }
  .graph:has(.g-ring) { flex-direction: column; gap: 14px; }
  .graph:has(.g-ring) .g-ring-arrow { transform: rotate(90deg); }
  .g-ring { --ring: 210px; }
  .g-face { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .g-face svg { width: 16px; height: 16px; }
  .g-ring-cap { font-size: 13px; }
  .graph.chain { flex-direction: column; gap: 4px; }
  .graph.chain .g-node { max-width: none; }
  .g-arrow { transform: rotate(90deg); }
}
.how-panel:not([hidden]) { animation: deal 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── Compare: every app side by side ── */
.cmp-wrap { max-width: 980px; margin: 28px auto 0; border-radius: 10px; border: 1px solid var(--border); overflow-x: auto; }
.cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.cmp-table th, .cmp-table td { padding: 16px 18px; text-align: left; border-top: 1px solid var(--border); vertical-align: top; }
.cmp-table thead th { border-top: 0; font-size: 13px; font-weight: 700; color: var(--text-2); }
.cmp-table tbody th { font-weight: 600; color: var(--text); width: 30%; }
.cmp-table .us { background: rgb(var(--acc-rgb) / 0.14); color: var(--text); }
.cmp-table thead .us { color: var(--accent-ink); }
.cmp-table .yes { color: var(--accent-ink); font-weight: 600; }
.cmp-table .yes::before { content: '✓ '; }
.cmp-table .no { color: rgb(var(--ink-rgb) / 0.35); }
.cmp-table .part { color: var(--text-2); }
.cmp-table .short { display: none; }
/* Phones: each feature gets its own full-width line, with the five
   results in an even row under it; short app names and ✓ / — marks. */
@media (max-width: 640px) {
  .cmp-wrap { overflow: visible; }
  .cmp-table { min-width: 0; display: block; font-size: 13px; }
  .cmp-table thead, .cmp-table tbody { display: block; }
  .cmp-table tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cmp-table thead th:first-child { display: none; }
  .cmp-table thead th { padding: 12px 2px; font-size: 11.5px; text-align: center; border-top: 0; }
  .cmp-table tbody th { grid-column: 1 / -1; width: auto; padding: 14px 14px 2px; font-size: 14px; text-align: left; border-top: 1px solid var(--border); background: none; }
  .cmp-table td { padding: 6px 2px 14px; text-align: center; border-top: 0; }
  .cmp-table thead .us { border-radius: 10px 10px 0 0; }
  .cmp-table .full { display: none; }
  .cmp-table .short { display: inline; }
  .cmp-table .yes, .cmp-table .no { font-size: 0; }
  .cmp-table .yes::before { content: '✓'; font-size: 17px; }
  .cmp-table .no::before { content: '—'; font-size: 15px; }
  .cmp-table .part { font-size: 11px; line-height: 1.3; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-bench-row a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cmp-bench { max-width: 980px; margin: 16px auto 0; font-size: 15px; color: var(--text-2); }
.cmp-bench a { color: var(--accent-ink); font-weight: 600; }
.compare-note { max-width: 980px; margin: 14px auto 0; font-size: 12px; color: rgb(var(--ink-rgb) / 0.35); }

/* ── Founding members + email capture: same frame as the sections above ── */
.founding { text-align: center; }
.tag-chip { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgb(var(--acc-rgb) / 0.12); color: var(--accent-ink); font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.sec-sub { font-size: 19px; line-height: 1.5; color: var(--text-2); max-width: 46ch; margin: -8px auto 0; }
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1004px; margin: 48px auto 0; text-align: left; }
.perk { border-radius: 12px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / 0.03); padding: 36px; }
.perk-icon { width: 56px; height: 56px; border-radius: 16px; background: rgb(var(--acc-rgb) / 0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.perk-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--text); }
.perk-text { font-size: 17px; line-height: 1.55; color: var(--text-2); }
.foot-sub { margin-top: 22px; max-width: 300px; }
.foot-sub label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.foot-sub-row { display: flex; gap: 6px; }
.foot-sub input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid rgb(var(--ink-rgb) / 0.14); background: rgb(var(--ink-rgb) / 0.05); color: var(--text); font: inherit; font-size: 13px; outline: none; }
.foot-sub input:focus { border-color: var(--accent); }
.foot-sub button { padding: 8px 12px; border-radius: 10px; border: none; background: var(--text); color: var(--bg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.foot-sub button:hover { opacity: 0.88; }
.lead-msg { font-size: 13px; margin-top: 8px; min-height: 18px; color: var(--accent-ink); }

/* ── Pricing: three features, the rest on demand ── */

/* ── Footer: link columns ── */
.site-footer { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 48px; padding: 64px 48px 48px; border-top: 1px solid var(--border); background: var(--bg); }
.foot-brand p { margin-top: 14px; font-size: 13px; color: rgb(var(--ink-rgb) / 0.35); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-col h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 14px; }
.foot-col a { display: block; font-size: 14px; color: var(--text-2); text-decoration: none; padding: 5px 0; }
.foot-col a:hover { color: var(--text); }

.reader button:focus-visible, .how button:focus-visible, .take:focus-visible, .foot-col a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .takes.dealing .take, .rehearse.dealing > *, .how-panel:not([hidden]),
  .reader-stage.leaving .reader-panel, .how.leaving .how-panel, .how-panel .graph, .how-panel .graph * { animation: none !important; }
  .take, .take-more { transition: none; }
}

/* ── Pricing ── */

/* ── CTA ── */
/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 1004px; margin: 0 auto; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0 28px; transition: border-color 0.2s; }
.faq-item:hover, .faq-item[open] { border-color: rgb(var(--acc-rgb) / 0.4); }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 19px; line-height: 1.4; list-style: none; position: relative; padding: 24px 64px 24px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
/* A 40px circle with a chevron that turns when the answer opens. */
.faq-item summary::before { content: ''; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: rgb(var(--acc-rgb) / 0.14); }
.faq-item summary::after { content: ''; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2.5px solid var(--accent-ink); border-bottom: 2.5px solid var(--accent-ink); transform: rotate(45deg); transition: transform 0.25s, margin-top 0.25s; }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }
.faq-item[open] > :not(summary) { animation: deal 0.3s ease both; }
@media (prefers-reduced-motion: reduce) { .faq-item[open] > :not(summary) { animation: none; } }
.faq-a { padding: 0 0 22px; text-align: left; max-width: 75ch; display: grid; gap: 12px; }
.faq-a p, .faq-a li { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.faq-a p:first-child { color: var(--text); }
.faq-a ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.faq-a li { position: relative; padding-left: 22px; }
.faq-a li::before { content: ''; position: absolute; left: 4px; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.faq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.faq-chips svg { color: var(--accent-ink); flex: none; }
.faq-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 14px; color: var(--text); background: rgb(var(--acc-rgb) / 0.12); border: 1px solid rgb(var(--acc-rgb) / 0.3); }
.faq-chips i { font-style: normal; color: var(--accent); }
.faq-a .faq-meta { font-size: 14.5px; color: var(--text-2); }
.faq-item .faq-src { font-size: 14px; }
.faq-item .faq-src a { color: var(--accent-ink); }
.contact-wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px 24px; text-align: center; }
.contact-wrap h2 { font-size: clamp(28px,4vw,44px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; }
.contact-wrap > p { color: var(--text-2); font-size: 16px; line-height: 1.6; margin-bottom: 28px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.contact-card { display: block; padding: 20px; border-radius: 16px; border: 1px solid rgb(var(--ink-rgb) / 0.1); background: rgb(var(--ink-rgb) / 0.04); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.contact-card:hover { border-color: rgb(var(--acc-rgb) / 0.6); transform: translateY(-2px); }
.contact-card strong { display: block; font-size: 15px; margin-bottom: 6px; }
.contact-card span { color: var(--text-2); font-size: 14px; word-break: break-all; }
.cta-wrap {
  position: relative; overflow: hidden;
  padding: 88px 48px; text-align: center;
}
.cta-wrap h2 { font-size: clamp(30px,4vw,52px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 16px; position: relative; z-index: 1; }
.cta-wrap p { font-size: 16px; color: var(--text-2); margin-bottom: 40px; position: relative; z-index: 1; }
.cta-wrap a { position: relative; z-index: 1; }

footer {
  border-top: 1px solid var(--border);
  padding: 28px 48px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--text-2);
}

/* ── Flow loop diagram ── */
.flow-loop { display:flex; flex-direction:column; align-items:center; gap:0; width:100%; max-width:760px; margin:0 auto; }
.flow-loop-top { display:flex; align-items:center; width:100%; }
.flow-card { flex:1; min-height:120px; padding:22px; gap:16px; }
.flow-card-text { position:relative; z-index:1; }
.flow-card-text h3 { font-size:clamp(20px,2.2vw,28px); margin-bottom:2px; }
.flow-card-sub { font-size:13px; font-weight:400; color:rgb(var(--ink-rgb) / 0.55); display:block; }
.card-indigo { background:rgb(var(--acc-rgb) / 0.07); }
.card-indigo::before { background:none; }
.card-pink { background:rgb(var(--acc2-rgb) / 0.06); }
.card-pink::before { background:none; }
.flow-loop-arrow { display:flex; flex-direction:column; align-items:center; padding:0 16px; flex-shrink:0; }
.flow-loop-line { width:48px; height:2px; background:linear-gradient(90deg,rgb(var(--acc-rgb) / 0.4),rgb(var(--acc-rgb) / 0.8)); position:relative; }
.flow-loop-line::after { content:''; position:absolute; right:-5px; top:-4px; border:5px solid transparent; border-left:7px solid rgb(var(--acc-rgb) / 0.8); }
.flow-loop-back { width:100%; display:flex; flex-direction:column; align-items:center; }
.flow-loop-arc-wrap { position:relative; width:calc(50% + 40px); margin:0 calc(25% - 20px); }
.flow-loop-arc {
  width:100%; height:48px;
  border:2px solid rgb(var(--acc-rgb) / 0.45);
  border-top:none; border-radius:0 0 14px 14px;
  position:relative;
}
/* Upward arrowhead on left end */
.flow-loop-arc::before {
  content:''; position:absolute; left:-1px; top:-8px;
  border:5px solid transparent;
  border-bottom:8px solid rgb(var(--acc-rgb) / 0.8);
  transform:translateX(-50%);
}
/* "switch back" sits on top of the arc's border */
.flow-loop-arc-label-top {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap;
}
/* "full context intact" sits below the arc */
.flow-loop-arc-label-bot {
  text-align:center; margin-top:8px;
  font-size:11px; font-weight:400; color:rgb(var(--ink-rgb) / 0.45);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .hero { padding: 100px 24px 60px; }
  .hero-visual { margin-top: 32px; }
  .brand-strip { padding: 16px 20px; gap: 8px; }
  .section-feature { padding: 64px 24px; }
  .feat-split { grid-template-columns: 1fr; gap: 40px; }
  .feat-split.reverse { direction: ltr; }
  .crossmode-section { padding: 80px 24px; }
  .flow-diagram { flex-direction: column; }
  .flow-arrow-line { width: 2px; height: 28px; background: linear-gradient(180deg, rgb(var(--acc-rgb) / 0.4), rgb(var(--acc-rgb) / 0.7)); }
  .flow-arrow-line::after { right: -4px; top: auto; bottom: -4px; border: 5px solid transparent; border-top: 7px solid rgb(var(--acc-rgb) / 0.8); border-left: transparent; }
  .wellness-section { padding: 64px 24px; }
  .wellness-grid { grid-template-columns: 1fr; }
  .cta-wrap { padding: 80px 24px; }
  footer { padding: 24px 20px; flex-direction: column; gap: 8px; text-align: center; }
  /* Wellness: one card per row; the section's inline 48px side padding is
     too wide for phones. */
  #wellness { padding: 64px 24px !important; }
  .cards-grid { grid-template-columns: 1fr; }
  .reader, .how, .cmp, .founding, .faq-wrap { padding: 64px 20px 0; }
  /* Phone polish: less padding and smaller type where desktop sizes crowd. */
  .hero { min-height: auto; padding: 104px 20px 40px; }
  .hero-sub { font-size: 18px; margin-bottom: 28px; }
  .story-section { padding: 8px 16px 0; }
  .reader-chips { gap: 6px; }
  .reader-chip { font-size: 13.5px; padding: 8px 13px; }
  .reader-setup { font-size: 15px; margin: 18px 0 12px; }
  .take.best { padding: 18px; }
  .take.best .take-line { font-size: 18px; }
  .take.best .take-more { font-size: 15px; }
  .take:not(.best) { padding: 10px 14px 10px 10px; gap: 12px; }
  .take-ava { width: 36px; height: 36px; }
  .take:not(.best) .take-line { font-size: 15px; }
  .how-line { font-size: 16px; }
  .perk { padding: 22px; border-radius: 12px; }
  .perk-icon { width: 44px; height: 44px; margin-bottom: 14px; }
  .perk-title { font-size: 18px; }
  .perk-text { font-size: 15px; }
  .perks { margin-top: 28px; gap: 12px; }
  .faq-list { gap: 8px; }
  .faq-item { padding: 0 16px; border-radius: 10px; }
  .faq-item summary { font-size: 15.5px; padding: 16px 48px 16px 0; }
  .faq-item summary::before { width: 32px; height: 32px; margin-top: -16px; }
  .faq-item summary::after { right: 12px; width: 8px; height: 8px; margin-top: -6px; }
  .faq-a p, .faq-a li { font-size: 15px; }
  .cta-wrap { padding: 64px 20px; }
  .perks { grid-template-columns: 1fr; }
  .sec-sub { font-size: 16px; }
  .takes { grid-template-columns: 1fr; }
  .bubble { max-width: 92%; }

  .site-footer { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 40px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  /* Cross-mode loop: stack the two cards with a downward "switch" arrow, and
     replace the U-shaped return arc (which needs side-by-side cards) with a
     plain label. */
  .flow-loop-top { flex-direction: column; }
  .flow-card { width: 100%; flex: none; }
  .flow-loop-arrow { padding: 10px 0; flex-direction: row; gap: 10px; }
  .flow-loop-line { width: 2px; height: 28px; background: linear-gradient(180deg, rgb(var(--acc-rgb) / 0.4), rgb(var(--acc-rgb) / 0.8)); }
  .flow-loop-line::after { right: auto; left: -4px; top: auto; bottom: -6px; border: 5px solid transparent; border-top: 7px solid rgb(var(--acc-rgb) / 0.8); }
  .flow-loop-arc-wrap { width: auto; margin: 14px 0 0; }
  .flow-loop-arc { display: none; }
  .flow-loop-arc-label-top { position: static; transform: none; }
  .flow-loop-arc-label-top::before { content: '\2191\00a0'; }
}
/* Touch screens (and phone-width layouts) can't rely on hover, so the slide-up card description would never
   appear: show it under the title instead. */
@media (hover: none), (max-width: 768px) {
  .feat-card { flex-wrap: wrap; row-gap: 12px; }
  .feat-card p, .card-yellow p {
    position: static; transform: none; display: block; flex-basis: 100%;
    padding: 0; background: none; text-align: left;
    font-size: 14px; line-height: 1.6; color: var(--text-2);
  }
}
.hero-demo-frame.is-vertical {
  aspect-ratio: 9 / 16;
  /* Whole video, control bar included, fits on one phone screen. */
  max-width: min(100%, calc(78vh * 9 / 16));
}
@media (max-width: 480px) {
  nav { padding: 0 16px; }
  .nav-actions { gap: 6px; }
  .btn-join { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  .nav-logo { gap: 8px; font-size: 16px; }
  /* Email capture: input over button, so neither forces sideways scroll. */
}

/* ── Launch line (landing only): sits above the fixed nav until dismissed ── */
.launch-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: 40px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 44px; background: var(--accent-strong); color: var(--on-strong);
  font-size: 14px;
}
.launch-bar[hidden] { display: none; }
.launch-link { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.launch-link:hover .launch-more { text-decoration: underline; }
.launch-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / 0.2); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.launch-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.launch-more { flex: none; font-weight: 700; }
.launch-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.launch-close:hover { background: rgb(255 255 255 / 0.15); }
.launch-bar :focus-visible { outline: 2px solid var(--on-strong); outline-offset: 2px; }
body.has-launch-bar nav { top: 40px; }
body.has-launch-bar .hero { padding-top: 140px; }
@media (max-width: 768px) {
  .launch-bar { font-size: 13px; padding: 0 40px 0 12px; }
  .launch-text { display: none; }
  body.has-launch-bar .hero { padding-top: 144px; }
}