/* =========================================================================
   VITALi site: motion and the 2026-10 home (loaded after styles.css)

   The rules for motion on this site:
   - Everything is readable without it. Content is never hidden unless html.motion is set (the head
     script sets it when the visitor has not asked for reduced motion), and every hidden state has a
     CSS fallback that shows it after 3 seconds in case motion.js never runs.
   - One curve, three durations (--e-out; 0.4, 0.8, 1.2 s). Calm beats busy.
   - Only transform and opacity move, so phones keep up.
   ========================================================================= */

:root {
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --header-h: 72px;
}

/* Lenis (smooth scrolling on computers): native smooth scrolling must be off while it runs */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

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

/* --- Hidden-until-revealed states, with the 3-second safety net ----------- */
@keyframes x-show { to { opacity: 1; transform: none; visibility: visible; } }
html.motion:not(.motion-ready) [data-reveal],
html.motion:not(.motion-ready) [data-stagger] > *,
html.motion:not(.motion-ready) [data-hero] {
  opacity: 0;
  animation: x-show 0.6s var(--e-out) 3s forwards;
}
html.motion:not(.motion-ready) [data-split] {
  visibility: hidden;
  animation: x-show 0s 3s forwards;
}

/* Words cut by motion.js: each word rises from behind its own edge */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0 0.16em; margin: -0.06em 0 -0.16em; }
.wi { display: inline-block; will-change: transform; }
/* Highlight statements: words start dim and light up as you scroll through them */
.hw { transition: none; }

/* --- Page transitions between pages (browsers that support them) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.32s var(--e-inout) both vt-out; }
::view-transition-new(root) { animation: 0.5s var(--e-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* --- Header: hides on the way down, comes back on the way up -------------- */
.site-header { transition: transform 0.5s var(--e-out), background-color 0.3s var(--ease), border-color 0.3s var(--ease); will-change: transform; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
/* The real app icon (2026-10-11): the pulse draws itself in, then the dot of the i lands. */
.mark-live { border-radius: 7px; }
html.motion .mark-live path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mark-draw 1.2s var(--e-out) 0.25s forwards; }
html.motion .mark-live .mark-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mark-dot 0.45s cubic-bezier(.34,1.56,.64,1) 1.15s forwards; }
html.intro .mark-live path { animation-delay: 2.1s; }
html.intro .mark-live .mark-dot { animation-delay: 3s; }
@keyframes mark-draw { to { stroke-dashoffset: 0; } }
@keyframes mark-dot { to { transform: scale(1); } }
.scroll-progress { height: 2px; opacity: 0.85; }

/* --- Intro: shown once per visit ------------------------------------------ */
.intro-curtain { display: none; }
html.intro .intro-curtain {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0b0c0d;
  color: #f5f6f8;
  /* Safety net: if motion.js never runs, the curtain lifts on its own */
  animation: intro-away 0.7s var(--e-inout) 3.2s forwards;
}
@keyframes intro-away { to { opacity: 0; visibility: hidden; } }
html.intro.motion-ready .intro-curtain { animation: none; }
.intro-pulse { width: min(640px, 84vw); height: auto; overflow: visible; }
.intro-pulse path {
  stroke: #34d2ec;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 10px rgba(52, 210, 236, 0.55));
}
html.intro:not(.motion-ready) .intro-pulse path { animation: mark-draw 1.6s var(--e-inout) 0.2s forwards; }
.intro-meta {
  position: absolute;
  left: max(24px, env(safe-area-inset-left));
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7d8089;
}
.intro-brand { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.02em; text-transform: none; color: #f5f6f8; }
.intro-brand .i { color: #34d2ec; }
.intro-count { font-family: var(--serif); font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: -0.02em; color: #f5f6f8; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; }
.intro-tag { text-align: end; }
@media (max-width: 560px) {
  .intro-meta { grid-template-columns: 1fr 1fr; }
  .intro-count { grid-column: 1 / -1; grid-row: 1; margin-bottom: 18px; }
}

/* --- Ambient glow (parallax background light) ----------------------------- */
.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient i {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 26%, transparent), transparent);
  filter: blur(20px);
  opacity: 0.55;
}
.ambient i:nth-child(1) { left: 50%; top: 20%; translate: -50% 0; }
.ambient i:nth-child(2) { left: -20%; top: -30%; width: 50vmax; height: 50vmax; opacity: 0.25; background: radial-gradient(closest-side, color-mix(in srgb, var(--sleep) 30%, transparent), transparent); }
[data-theme="light"] .ambient i { opacity: 0.35; }
section > .container { position: relative; z-index: 1; }

/* --- Hero ----------------------------------------------------------------- */
.hero2 {
  padding-top: clamp(20px, 4vw, 48px);
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
}
.hero2-copy { max-width: 940px; }
.hero2 .pill { margin-inline: auto; }
.hero2 h1 {
  font-size: clamp(2.5rem, 6.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-top: 22px;
  text-wrap: balance;
}
.hero2 h1 .accent { color: var(--primary); }
.hero2-sub {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--text-secondary);
  font-size: clamp(1.04rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.hero2-cta { margin-top: 30px; display: grid; justify-items: center; gap: 12px; }
.hero2-cta .badges { justify-content: center; }
.launch-note { font-size: 0.92rem; color: var(--text-secondary); }
.launch-note strong { color: var(--text); }
.launch-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
html:not([data-prelaunch]) .prelaunch-only { display: none !important; }
.hero2-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 22px; font-size: 0.88rem; color: var(--text-muted); }
.hero2-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero2-trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }

.hero2-stage { position: relative; height: clamp(470px, 58vw, 760px); margin-top: clamp(30px, 3.5vw, 52px); }
.hero2-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(to bottom, transparent, var(--bg) 88%);
  z-index: 4;
  pointer-events: none;
}
.hero2-glow {
  position: absolute;
  left: 50%;
  top: 8%;
  width: min(900px, 120vw);
  height: 80%;
  translate: -50% 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 30%, transparent), transparent 72%);
  filter: blur(10px);
  opacity: 0.7;
}
.fan { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }
.fan-slot { position: absolute; top: 0; left: 0; }
/* The hero sets each phone's size on its slot; .dev declares its own --k, so it has to be passed down
   (until 2026-10-11 it was not, and every hero phone rendered at the default 0.72, too big on a phone). */
.fan-slot .dev { will-change: transform; --k: var(--fk, 0.72); }
.fan-c { --fk: 0.74; translate: -50% 0; z-index: 3; }
.fan-l, .fan-r { --fk: 0.62; z-index: 2; opacity: 0.94; }
.fan-l { translate: calc(-50% - 270px) 70px; rotate: -7deg; }
.fan-r { translate: calc(-50% + 270px) 70px; rotate: 7deg; }
@media (max-width: 900px) {
  .fan-c { --fk: 0.62; }
  .fan-l, .fan-r { --fk: 0.5; }
  .fan-l { translate: calc(-50% - 190px) 60px; }
  .fan-r { translate: calc(-50% + 190px) 60px; }
}
@media (max-width: 560px) {
  .hero2 h1 { font-size: 2.45rem; margin-top: 16px; }
  .hero2-sub { font-size: 1rem; margin-top: 14px; }
  .hero2-cta { margin-top: 20px; }
  .hero2-trust { margin-top: 14px; font-size: 0.8rem; gap: 4px 14px; }
  .hero2-stage { height: 500px; margin-top: 26px; }
  .hero2-stage::after { height: 16%; }
  .fan-c { --fk: 0.5; }
  .fan-l, .fan-r { --fk: 0.4; }
  .fan-l { translate: calc(-50% - 132px) 56px; rotate: -9deg; }
  .fan-r { translate: calc(-50% + 132px) 56px; rotate: 9deg; }
}

.float-chip {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  box-shadow: var(--shadow-lg);
  text-align: start;
  will-change: transform;
}
.float-chip strong { display: block; font-size: 0.86rem; }
.float-chip div > span { display: block; font-size: 0.76rem; color: var(--text-muted); }
.float-chip .fc-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); flex: none; }
.fc-ic svg { width: 17px; height: 17px; }
.chip-a { left: calc(50% + 150px); top: 22%; }
.chip-b { right: calc(50% + 150px); top: 52%; }
@media (max-width: 900px) {
  .chip-a { left: calc(50% + 70px); top: 6%; }
  .chip-b { right: calc(50% + 70px); top: 40%; }
}
@media (max-width: 560px) {
  .float-chip { padding: 8px 11px 8px 8px; gap: 8px; }
  .float-chip strong { font-size: 0.78rem; }
  .float-chip span { font-size: 0.7rem; }
  .float-chip .fc-ic { width: 28px; height: 28px; }
  .chip-a { left: auto; right: 12px; top: 2%; }
  .chip-b { right: auto; left: 12px; top: 46%; }
}

/* --- Statements ------------------------------------------------------------ */
.statement { padding-block: clamp(70px, 12vw, 160px); }
.statement-text {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.2vw, 3.3rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}
.statement-text.big { font-size: clamp(1.9rem, 4.8vw, 3.8rem); }

/* --- The pulse line between sections ------------------------------------- */
.pulse-div { height: clamp(50px, 7vw, 90px); margin: 0 auto; max-width: 1400px; padding-inline: var(--gutter); }
.pulse-div svg { width: 100%; height: 100%; overflow: visible; }
.pulse-div path { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }

/* --- Story --------------------------------------------------------------- */
.story { padding-bottom: clamp(40px, 6vw, 80px); }
.story-steps { display: grid; gap: clamp(56px, 8vw, 110px); counter-reset: none; }
.story-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 6vw, 90px); max-width: 1000px; margin-inline: auto; }
.story-step:nth-child(even) .story-cap { order: 2; }
.story-cap { max-width: 440px; }
.story-k { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.story-cap h3 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.story-cap p { margin-top: 16px; color: var(--text-secondary); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.65; }
.story-dev .dev { --k: 0.66; }
.story-dots { display: none; }
@media (max-width: 760px) {
  .story-step { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .story-step:nth-child(even) .story-cap { order: 0; }
  .story-dev .dev { --k: 0.56; }
}

/* Pinned mode (motion.js adds .is-pinned): the steps stack in one place and scrolling plays them */
.story.is-pinned .story-stage { position: relative; height: 100vh; height: 100svh; }
.story.is-pinned .story-steps { position: relative; display: block; height: 100%; }
.story.is-pinned .story-step {
  position: absolute;
  inset: 0;
  max-width: 1080px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.story.is-pinned .story-step:nth-child(even) .story-cap { order: 0; }
.story.is-pinned .story-dev { position: relative; }
.story.is-pinned .story-dots {
  display: flex;
  gap: 8px;
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 40px);
  translate: -50% 0;
}
.story-dots i { width: 7px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--text) 22%, transparent); transition: width 0.4s var(--e-out), background-color 0.4s; }
.story-dots i.on { width: 26px; background: var(--primary); }
@media (max-width: 760px) {
  .story.is-pinned .story-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 18px; padding-bottom: 46px; }
  .story.is-pinned .story-cap { order: 2; max-width: 360px; }
  .story.is-pinned .story-cap h3 { font-size: 1.55rem; }
  .story.is-pinned .story-cap p { font-size: 0.95rem; margin-top: 8px; }
  .story.is-pinned .story-k { margin-bottom: 6px; }
}

/* --- Four apps into one -------------------------------------------------- */
.merge-stage { position: relative; height: clamp(220px, 26vw, 300px); margin-bottom: clamp(10px, 2vw, 24px); }
.mapp { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 12px; will-change: transform; }
.mapp-ic {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: var(--c);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 26%, var(--card)), color-mix(in srgb, var(--c) 8%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--border));
  box-shadow: var(--shadow-md);
}
.mapp-ic svg { width: 38px; height: 38px; }
.mapp-l { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.mapp[data-app="food"] { --x: -330px; }
.mapp[data-app="gym"] { --x: -110px; }
.mapp[data-app="sleep"] { --x: 110px; }
.mapp[data-app="habit"] { --x: 330px; }
.mapp:not(.mapp-v) { transform: translateX(var(--x)); }
.mapp-v img { width: 112px; height: 112px; border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 80px -10px color-mix(in srgb, var(--primary) 50%, transparent); }
.mapp-v .mapp-l { font-family: var(--serif); font-size: 1.05rem; color: var(--text); }
html:not(.motion) .mapp-v { display: none; }
html.motion .mapp-v { opacity: 0; }
@media (max-width: 760px) {
  .mapp-ic { width: 64px; height: 64px; border-radius: 17px; }
  .mapp-ic svg { width: 28px; height: 28px; }
  .mapp-l { font-size: 0.76rem; }
  .mapp[data-app="food"] { --x: -120px; }
  .mapp[data-app="gym"] { --x: -40px; }
  .mapp[data-app="sleep"] { --x: 40px; }
  .mapp[data-app="habit"] { --x: 120px; }
  .mapp[data-app="gym"], .mapp[data-app="habit"] { margin-top: 0; }
  .mapp:not(.mapp-v) { transform: translateX(var(--x)) translateY(var(--y, 0)); }
  .mapp[data-app="food"], .mapp[data-app="sleep"] { --y: -52px; }
  .mapp[data-app="gym"], .mapp[data-app="habit"] { --y: 52px; }
  .mapp[data-app="food"] { --x: -70px; }
  .mapp[data-app="sleep"] { --x: 70px; }
  .mapp[data-app="gym"] { --x: -70px; }
  .mapp[data-app="habit"] { --x: 70px; }
  .merge-stage { height: 250px; }
  .mapp-v img { width: 92px; height: 92px; border-radius: 22px; }
}

/* --- Coach ---------------------------------------------------------------- */
.coach2 { overflow: hidden; }
.ambient-coach i { left: 70%; top: 10%; width: 60vmax; height: 60vmax; opacity: 0.4; }
.coach2-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 90px); align-items: center; }
.coach2-copy .section-title { text-wrap: balance; }
.coach2-copy .section-sub { margin-top: 16px; }
.coach2-list { display: grid; gap: 16px; margin-top: 28px; }
.coach2-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--text-secondary); line-height: 1.55; }
.coach2-list strong { color: var(--text); }
.coach2-list .ck { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; margin-top: 1px; }
.coach2-list .ck svg { width: 15px; height: 15px; }
.coach2-visual { position: relative; padding-bottom: 60px; }
.coach2-dev { --k: 0.7; }
.consent-card {
  position: absolute;
  right: -96px;
  bottom: 24px;
  width: 300px;
  padding: 16px 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
  box-shadow: var(--shadow-lg);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-secondary);
  z-index: 3;
  will-change: transform;
}
.consent-card b { color: var(--text); }
.consent-card p + p { margin-top: 6px; }
.cc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--text); font-size: 0.95rem; }
.cc-lock { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.cc-lock svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .coach2-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .coach2-copy { max-width: 620px; }
  .coach2-dev { --k: 0.6; }
  .consent-card { left: 50%; translate: -50% 0; bottom: 0; width: min(320px, 88vw); }
  .coach2-visual { padding-bottom: 150px; }
}

/* --- Privacy ------------------------------------------------------------- */
.privacy2 { padding-block: clamp(80px, 12vw, 150px); overflow: hidden; }
.vault { position: relative; width: 150px; height: 230px; margin: 0 auto clamp(30px, 5vw, 56px); }
.vault-ceiling { position: absolute; left: -60px; right: -60px; top: 6px; border-top: 1.5px dashed color-mix(in srgb, var(--primary) 45%, transparent); }
.vault-phone {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  height: 196px;
  translate: -50% 0;
  border-radius: 22px;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, var(--card)), var(--card));
  overflow: hidden;
}
.vault-glow { position: absolute; inset: 30% 10% auto; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 50%, transparent), transparent); }
.vault-dots i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
  left: calc(50% + var(--dx));
  bottom: 40px;
  opacity: 0;
}
.vault-dots i:nth-child(1) { --dx: -36px; --d: 0s; }
.vault-dots i:nth-child(2) { --dx: -20px; --d: 0.7s; }
.vault-dots i:nth-child(3) { --dx: -6px; --d: 1.4s; }
.vault-dots i:nth-child(4) { --dx: 10px; --d: 0.35s; }
.vault-dots i:nth-child(5) { --dx: 26px; --d: 1.05s; }
.vault-dots i:nth-child(6) { --dx: -28px; --d: 1.75s; }
.vault-dots i:nth-child(7) { --dx: 2px; --d: 2.1s; }
.vault-dots i:nth-child(8) { --dx: 18px; --d: 2.45s; }
.vault-dots i:nth-child(9) { --dx: -14px; --d: 2.8s; }
.vault-dots i:nth-child(10) { --dx: 32px; --d: 3.15s; }
html.motion .privacy2.in-view .vault-dots i { animation: dot-bounce 3.5s var(--e-inout) var(--d) infinite; }
@keyframes dot-bounce {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  48% { transform: translateY(-176px); opacity: 1; }
  56% { transform: translateY(-160px); }
  86% { transform: translateY(-8px); opacity: 0.9; }
  100% { transform: translateY(0); opacity: 0; }
}
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: clamp(40px, 6vw, 70px) auto 0; }
.fact { padding: 22px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); display: grid; gap: 6px; }
.fact strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.fact span { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

/* --- Everything else -------------------------------------------------------- */
.everything2 { overflow: hidden; }
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; text-align: center; }
.count b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.count > span { display: block; color: var(--text-secondary); font-size: 0.95rem; margin-top: 6px; }
@media (max-width: 760px) { .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
.rows { display: grid; justify-items: center; gap: 14px; margin-top: clamp(44px, 6vw, 70px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.row { display: flex; gap: 12px; width: max-content; will-change: transform; }
.row span {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
}
.row span:nth-child(3n + 1) { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }

/* --- Your data ------------------------------------------------------------ */
.data2-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.data2 .section-head { margin-bottom: 26px; }
.why-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; }
.why-list h3 { font-size: 1.15rem; margin-bottom: 6px; }
.why-list p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; }
.export { position: relative; height: 380px; }
.export-file {
  position: absolute;
  left: 50%;
  top: 56%;
  translate: -50% -50%;
  width: min(280px, 80%);
  padding: 22px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 6px;
  justify-items: start;
  z-index: 2;
}
.ef-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: 6px; }
.ef-ic svg { width: 24px; height: 24px; }
.export-file strong { font-size: 1.02rem; }
.ef-meta { font-size: 0.85rem; color: var(--text-muted); }
.ef-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--elevated); overflow: hidden; margin-top: 10px; }
.ef-bar i { display: block; height: 100%; width: 100%; background: var(--primary); border-radius: inherit; transform-origin: 0 50%; }
.export-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 3;
  will-change: transform;
}
.export-card span { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.export-card[data-fly="1"] { left: 4%; top: 2%; }
.export-card[data-fly="2"] { right: 2%; top: 9%; }
.export-card[data-fly="3"] { left: 0; top: 24%; }
.export-card[data-fly="4"] { right: 6%; top: 28%; }
@media (max-width: 900px) {
  .data2-grid { grid-template-columns: minmax(0, 1fr); }
  .export { height: 330px; max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) { .why-list { grid-template-columns: minmax(0, 1fr); } }

/* --- Pricing --------------------------------------------------------------- */
.billing-toggle .save { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); padding: 2px 8px; border-radius: 999px; margin-inline-start: 6px; }
.billing-toggle button[aria-pressed="true"] .save { background: color-mix(in srgb, var(--on-primary) 18%, transparent); color: var(--on-primary); }
.price-note { font-size: 0.85rem; color: var(--primary); min-height: 1.4em; margin-top: -2px; }
.price-amount .num { display: inline-block; font-variant-numeric: tabular-nums; }
.price-amount .num.roll { animation: num-roll 0.5s var(--e-out); }
@keyframes num-roll { 0% { transform: translateY(40%); opacity: 0; filter: blur(4px); } 100% { transform: none; opacity: 1; filter: none; } }
/* --- Plan cards: a quiet visual per plan, a tilt and a light on hover, depth when swiped (2026-10-11) ---- */
.pricing-grid.four { perspective: 1400px; }
.price-card {
  position: relative;
  isolation: isolate;
  translate: 0 0;
  rotate: var(--ax, 1) var(--ay, 0) 0 var(--ang, 0deg);
  transition: translate 0.6s var(--e-out), rotate 0.6s var(--e-out), box-shadow 0.5s var(--e-out), border-color 0.35s, background-color 0.35s;
}
.price-card > :not(.pc-bg):not(.pc-spot):not(.price-badge) { position: relative; z-index: 1; }
.price-card > .price-badge { z-index: 3; }
.pc-bg, .pc-spot { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
/* The visual lives in the top of the card, behind the name and price, and fades out before the list */
.pc-bg { -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 70%); }
.pc-bg i { position: absolute; inset: -12%; display: block; opacity: 0.7; transition: transform 0.9s var(--e-out), opacity 0.5s; will-change: transform; }
/* Free: a fine grid of dots, drifting */
.pc-free .pc-bg i {
  background-image: radial-gradient(color-mix(in srgb, var(--text) 26%, transparent) 1px, transparent 1.6px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(90% 80% at 85% 0%, #000, transparent 75%);
  mask-image: radial-gradient(90% 80% at 85% 0%, #000, transparent 75%);
  animation: pc-drift 22s linear infinite;
}
@keyframes pc-drift { to { background-position: 16px 32px; } }
/* Plus: rings rippling out of the corner */
.pc-plus .pc-bg i {
  background: repeating-radial-gradient(circle at 92% 4%, transparent 0 20px, color-mix(in srgb, var(--primary) 55%, transparent) 20px 21.6px);
  -webkit-mask-image: radial-gradient(80% 70% at 92% 4%, #000 10%, transparent 80%);
  mask-image: radial-gradient(80% 70% at 92% 4%, #000 10%, transparent 80%);
  animation: pc-ripple 7s ease-in-out infinite;
  transform-origin: 92% 4%;
}
@keyframes pc-ripple { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
/* Pro: the Coach plan, flowing lines like a conversation */
.pc-pro .pc-bg i {
  background: color-mix(in srgb, var(--primary) 70%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='28'%3E%3Cpath d='M0 14c30 0 30-10 60-10s30 20 60 20 30-20 60-20 30 10 60 10' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 240px 28px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='28'%3E%3Cpath d='M0 14c30 0 30-10 60-10s30 20 60 20 30-20 60-20 30 10 60 10' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 240px 28px repeat;
  opacity: 0.3;
  animation: pc-flow 9s linear infinite;
}
@keyframes pc-flow { to { -webkit-mask-position: 240px 0; mask-position: 240px 0; } }
/* Pro adds to Plus: the same rings, fainter, under its waves */
.pc-pro .pc-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 98% 0%, transparent 0 20px, color-mix(in srgb, var(--primary) 40%, transparent) 20px 21.4px);
  -webkit-mask-image: radial-gradient(70% 60% at 98% 0%, #000 10%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 98% 0%, #000 10%, transparent 80%);
  opacity: 0.7;
}
/* Max has everything: the rings, fine rays turning slowly around a glowing core, and two satellites in orbit.
   Same thin cyan lines as the others (2026-10-11: the aurora blur did not belong to the family). */
/* The rays turn by animating their angle, not the layer: rotating the layer turned its corner mask with it,
   and after half a turn the whole visual had swung out of the card (2026-10-11). */
@property --pc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pc-max .pc-bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 42%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 42%, transparent 88%);
  background: radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--primary) 90%, transparent) 0 3.5px, color-mix(in srgb, var(--primary) 35%, transparent) 4.5px 10px, color-mix(in srgb, var(--primary) 12%, transparent) 11px 46px, transparent 90px);
}
.pc-max .pc-bg i {
  background:
    repeating-conic-gradient(from var(--pc-a) at 84% 14%, color-mix(in srgb, var(--primary) 26%, transparent) 0deg 0.5deg, transparent 0.5deg 7.5deg),
    repeating-conic-gradient(from calc(var(--pc-a) * -0.6 + 3.75deg) at 84% 14%, color-mix(in srgb, var(--primary) 12%, transparent) 0deg 0.35deg, transparent 0.35deg 7.5deg),
    repeating-radial-gradient(circle at 84% 14%, transparent 0 22px, color-mix(in srgb, var(--primary) 50%, transparent) 22px 23.6px);
  -webkit-mask-image: radial-gradient(125% 105% at 84% 14%, #000 18%, transparent 86%);
  mask-image: radial-gradient(125% 105% at 84% 14%, #000 18%, transparent 86%);
  opacity: 0.9;
  animation: pc-rays 60s linear infinite;
}
@keyframes pc-rays { to { --pc-a: 360deg; } }
.pc-max .pc-bg::before,
.pc-max .pc-bg::after {
  content: "";
  position: absolute;
  left: 92%;
  top: 5%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px 3px color-mix(in srgb, var(--primary) 55%, transparent);
  animation: pc-orbit 11s linear infinite;
  --r: 100px;
}
.pc-max .pc-bg::after { --r: 180px; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; animation-duration: 19s; animation-direction: reverse; opacity: 0.85; }
@keyframes pc-orbit { from { transform: rotate(0deg) translateX(var(--r)); } to { transform: rotate(360deg) translateX(var(--r)); } }/* The light under the cursor */
.pc-spot { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--primary) 16%, transparent), transparent 62%); opacity: 0; transition: opacity 0.4s; }
@media (hover: hover) and (pointer: fine) {
  .price-card:hover { translate: 0 -8px; box-shadow: var(--shadow-lg), 0 24px 60px -30px color-mix(in srgb, var(--primary) 55%, transparent); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
  .price-card:hover .pc-spot { opacity: 1; }
  .price-card:hover .pc-bg i { transform: scale(1.08); opacity: 1; }
  .price-card:hover .price-features .check { transform: scale(1.12); }
  .price-features .check { transition: transform 0.4s var(--e-out); }
  .price-card:hover .price-features li:nth-child(2) .check { transition-delay: 0.04s; }
  .price-card:hover .price-features li:nth-child(3) .check { transition-delay: 0.08s; }
  .price-card:hover .price-features li:nth-child(4) .check { transition-delay: 0.12s; }
  .price-card:hover .price-features li:nth-child(5) .check { transition-delay: 0.16s; }
}
/* On a phone: cards shrink and fade as they slide away, their backgrounds move at their own speed, and the
   arriving card's list ticks in */
@media (max-width: 720px) {
  .pricing-grid.four .price-card { rotate: none; scale: calc(1 - var(--d, 0) * 0.09); opacity: calc(1 - var(--d, 0) * 0.5); transition: box-shadow 0.5s, border-color 0.35s; }
  .pricing-grid.four .pc-bg i { translate: calc(var(--s, 0) * -60px) 0; }
  /* 50px, so a card shrunk by 9% while it slides away still keeps a 44px button */
  .pricing-grid.four .price-card .btn { min-height: 50px; }
  .pricing-grid.four .price-card.is-active .price-features li { animation: pc-li 0.5s var(--e-out) both; }
  .pricing-grid.four .price-card.is-active .price-features li:nth-child(2) { animation-delay: 0.06s; }
  .pricing-grid.four .price-card.is-active .price-features li:nth-child(3) { animation-delay: 0.12s; }
  .pricing-grid.four .price-card.is-active .price-features li:nth-child(4) { animation-delay: 0.18s; }
  .pricing-grid.four .price-card.is-active .price-features li:nth-child(5) { animation-delay: 0.24s; }
  .pricing-grid.four .price-card.is-active .price-amount .num { animation: num-roll 0.5s var(--e-out); }
}
@keyframes pc-li { from { opacity: 0; translate: 14px 0; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .pc-bg i, .pc-bg::before, .pc-bg::after, .pricing-grid.four .price-card.is-active .price-features li, .pricing-grid.four .price-card.is-active .price-amount .num { animation: none !important; }
  .price-card { rotate: none; }
}
@media (max-width: 720px) {
  .pricing-grid.four {
    display: flex;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 6px var(--gutter) 18px;
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pricing-grid.four::-webkit-scrollbar { display: none; }
  /* One whole card at a time (2026-10-11): the 84% peek read as a card cut off, not as "swipe me" */
  .pricing-grid.four { padding-top: 22px; gap: calc(var(--gutter) * 2); scroll-padding-inline: var(--gutter); }
  .pricing-grid.four .price-card { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
}
/* The phone's plan switcher: four segments with a sliding pill (script.js 15b) */
.plan-tabs { display: none; }
@media (max-width: 720px) {
  .plan-tabs {
    --x: 1;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 420px;
    margin: 4px auto 0;
    padding: 4px;
    border-radius: 999px;
    background: var(--elevated);
    border: 1px solid var(--border);
    isolation: isolate;
  }
  .plan-tabs::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 4);
    border-radius: 999px;
    background: var(--primary);
    transform: translateX(calc(var(--x) * 100%));
    transition: transform 0.45s var(--e-out);
  }
  [dir="rtl"] .plan-tabs::before { left: auto; right: 4px; transform: translateX(calc(var(--x) * -100%)); }
  .plan-tabs button {
    min-height: 44px;
    border: 0;
    background: none;
    border-radius: 999px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s;
    white-space: nowrap;
  }
  .plan-tabs button[aria-pressed="true"] { color: var(--on-primary); }
}

/* --- Testimonials (shown once real quotes exist) -------------------------- */
.quote-card { margin: 0; padding: 26px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); display: grid; gap: 18px; align-content: space-between; }
.quote-card blockquote { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; }
.quote-card figcaption { display: grid; gap: 2px; font-size: 0.88rem; color: var(--text-muted); }
.quote-card figcaption strong { color: var(--text); }

/* --- Final call to action ------------------------------------------------- */
.final2 { text-align: center; padding-bottom: 0; overflow: hidden; }
.ambient-final i { left: 50%; top: 40%; translate: -50% 0; opacity: 0.6; }
.final2-title { font-size: clamp(2.4rem, 6.4vw, 5rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; max-width: 900px; margin: 0 auto; }
.final2-sub { margin-top: 16px; color: var(--text-secondary); font-size: 1.1rem; }
.final2-badges { justify-content: center; margin-top: 28px; }
.final2 .launch-note { margin-top: 16px; }
/* The whole phone, not a half-phone behind a fade: at the end of the page that read as cut off (2026-10-11). */
.final2-phone {
  margin-top: clamp(40px, 6vw, 70px);
  padding-bottom: clamp(48px, 7vw, 96px);
  display: flex;
  justify-content: center;
}
.final2-phone .dev { --k: 0.62; }
@media (max-width: 560px) { .final2-phone .dev { --k: 0.5; } }

/* --- Footer: the page lifts off it ------------------------------------------ */
/* The curtain reveal (page sliding up off a sticky footer) was removed 2026-10-11: its hard shadowed edge read as a page cut off at the bottom. */
.footer-bottom { align-items: center; }
.footer-pulse svg { width: 120px; height: 24px; }
.footer-pulse path { stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; }
.site-footer.in-view .footer-pulse path { animation: mark-draw 1.8s var(--e-out) forwards; }
html:not(.motion) .footer-pulse path { stroke-dashoffset: 0; }

/* --- Buttons: a little life ----------------------------------------------- */
.btn, .store-badge { transition: transform 0.35s var(--e-out), background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.35s var(--e-out); }
.btn:active, .store-badge:active { transform: scale(0.97); }
.launch-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  translate: -50% 20px;
  z-index: 300;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 0.92rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--e-out), translate 0.45s var(--e-out);
  max-width: calc(100vw - 32px);
  text-align: center;
}
.launch-toast.show { opacity: 1; translate: -50% 0; }

/* Story: the later phones are only glass laid over the first phone */
.dev-ghost::before, .dev-ghost::after { display: none; }

/* --- Fixes from the first screenshot pass (2026-10-09) ---------------------- */
.section-title { text-wrap: balance; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 1240px) { .consent-card { right: -24px; } }
.pricing-faq { max-width: 980px; margin: clamp(40px, 6vw, 64px) auto 0; }
.pfaq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.pfaq h3 { font-size: 1.12rem; margin-bottom: 8px; }
.pfaq p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }
.pfaq p strong { color: var(--text); }
@media (max-width: 720px) { .pfaq-grid { grid-template-columns: minmax(0, 1fr); } }
.pricing-note { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }@media (max-width: 900px) { .consent-card { right: auto; } }

/* Story on phones: the phone sits at a fixed spot near the top and the caption at a fixed spot below it,
   so every screen lands exactly over the previous one whatever the caption's length. */
@media (max-width: 760px) {
  .story.is-pinned .story-step { display: block; padding: 0; }
  .story.is-pinned .story-dev { position: absolute; top: max(56px, 6svh); left: 50%; translate: -50% 0; }
  .story.is-pinned .story-cap { position: absolute; left: 0; right: 0; bottom: calc(92px + 2svh); margin: 0 auto; padding-inline: 4px; max-width: 380px; text-align: center; }
}

/* --- Features page: one phone stays beside the text and changes screen (computers);
       each feature gets its own phone (phones and narrow windows) ----------------------- */
.fx-hero { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(20px, 4vw, 40px); text-align: center; overflow: hidden; }
.fx-hero .breadcrumb { justify-content: center; margin-bottom: clamp(28px, 5vw, 56px); }
.fx-title { font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; margin-top: 8px; }
.fx-lead { max-width: 640px; margin: 20px auto 0; color: var(--text-secondary); font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.65; }
.fx { padding-top: 0; }
.fx-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 7vw, 110px); align-items: start; max-width: 1120px; }
.fx-item { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding-block: 6vh; max-width: 480px; transition: opacity 0.6s var(--e-out); }
.fx-item h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.fx-item > p { margin-top: 16px; color: var(--text-secondary); font-size: 1.06rem; line-height: 1.65; }
.fx-points { display: grid; gap: 10px; margin-top: 22px; }
.fx-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.98rem; }
.fx-points li::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 3px; border-radius: 6px; background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D2EC' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
[data-theme="light"] .fx-points li::before { background-color: var(--primary-soft); }
.fx-note { margin-top: 14px; font-size: 0.85rem; color: var(--text-muted); }
.fx-sticky { position: sticky; top: calc(50vh - 307px); padding-block: 0; }
.fx-sticky .dev { --k: 0.68; }
.fx-layer { position: absolute; inset: 0; opacity: 0; transform: scale(0.965); transition: opacity 0.7s var(--e-out), transform 0.9s var(--e-out); }
.fx-layer.is-on { opacity: 1; transform: none; }
.fx-inline { display: none; }
@media (min-width: 901px) {
  html:not(.no-js) .fx-item:not(.is-on) { opacity: 0.28; }
}
@media (max-width: 1100px) and (min-width: 901px) { .fx-sticky .dev { --k: 0.58; } .fx-sticky { top: calc(50vh - 262px); } }
@media (max-height: 760px) and (min-width: 901px) { .fx-sticky .dev { --k: 0.56; } .fx-sticky { top: calc(50vh - 252px); } }
@media (max-width: 900px) {
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
  .fx-sticky { display: none; }
  .fx-item { min-height: 0; padding-block: clamp(36px, 8vw, 64px); max-width: 560px; margin-inline: auto; text-align: center; align-items: center; }
  .fx-points { justify-items: start; text-align: start; }
  .fx-inline { display: flex; justify-content: center; margin-top: 30px; }
  .fx-inline .dev { --k: 0.56; }
}
@media (prefers-reduced-motion: reduce) { .fx-layer, .fx-item { transition: none; } }
.billing-toggle button { min-height: 44px; }
.tl-head { flex-wrap: wrap; row-gap: 6px; }
.tl-item { min-width: 0; overflow-wrap: anywhere; }

/* --- Story, round two (2026-10-10): cards that fly out of the phone, a giant word behind it ----------------- */
.story-dev { position: relative; }
.story-cards { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.story-cards .float-chip { position: absolute; white-space: nowrap; }
.story-cards .sc-a { right: calc(100% - 46px); top: 20%; }
.story-cards .sc-b { left: calc(100% - 46px); top: 60%; }
[dir="rtl"] .story-cards .sc-a { right: auto; left: calc(100% - 46px); }
[dir="rtl"] .story-cards .sc-b { left: auto; right: calc(100% - 46px); }
.story-ghost { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.story-ghost span {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(5rem, 15vw, 15rem);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--text) 13%, transparent);
  opacity: 0;
}
.story.is-pinned .story-steps { z-index: 1; }
.story-num { display: block; font-family: var(--serif); font-size: 0.95rem; color: var(--text-muted); margin-bottom: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.story-num b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) {
  .story-cards .float-chip { white-space: normal; max-width: 150px; padding: 7px 10px 7px 7px; }
  .story-cards .sc-a { right: calc(100% - 58px); top: 10%; }
  .story-cards .sc-b { left: calc(100% - 58px); top: 52%; }
  [dir="rtl"] .story-cards .sc-a { left: calc(100% - 58px); }
  [dir="rtl"] .story-cards .sc-b { right: calc(100% - 58px); }
  .story-num { display: none; }
  .story-ghost span { top: 34%; font-size: 26vw; }
}

/* --- Privacy: the orbit. Your data circles the phone and never crosses the ring ---------------------------- */
.privacy-stage { position: relative; }
.orbit {
  --rx: min(400px, 40vw);
  --ry: calc(var(--rx) * 0.3);
  position: relative;
  height: clamp(380px, 56vh, 600px);
  margin: 0 auto clamp(16px, 3vw, 32px);
}
.orbit-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 50; }
.orbit-core .dev { --k: 0.42; }
/* The vault (2026-10-11): a glass lock badge (not a black disc over the screen), a frosted veil, the shield */
.orbit-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--card) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 8%, transparent), 0 18px 50px -12px color-mix(in srgb, var(--primary) 55%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: scale(0.7);
  z-index: 60;
  transition: color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.orbit-lock svg { width: 30px; height: 30px; overflow: visible; }
.orbit-lock .lk-check { stroke-dasharray: 1; stroke-dashoffset: 1; }
.orbit-lock.is-shut { color: #3dc585; border-color: rgba(61, 197, 133, 0.55); box-shadow: 0 0 0 8px rgba(61, 197, 133, 0.1), 0 18px 50px -12px rgba(61, 197, 133, 0.6); }
.vault-veil {
  position: absolute;
  inset: var(--bz);
  border-radius: calc(55px * var(--k));
  background: radial-gradient(120% 70% at 50% 50%, color-mix(in srgb, var(--bg) 35%, transparent), color-mix(in srgb, var(--bg) 80%, transparent));
  -webkit-backdrop-filter: blur(5px) saturate(1.2);
  backdrop-filter: blur(5px) saturate(1.2);
  opacity: 0;
  z-index: 55;
}
.vault-shield { position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-width: none; overflow: visible; pointer-events: none; color: var(--primary); z-index: -1; }
.vault-shield .vs-edge { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 70%, transparent)); }
.vault-shield .vs-edge2 { fill: none; stroke: var(--primary); stroke-width: 8; stroke-opacity: 0.08; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vault-shield .vs-fill { fill: var(--primary); opacity: 0; }
.vault-shield .vs-hex { opacity: 0; }
.vault-shield .vs-sweep { opacity: 0; transition: opacity 0.6s; animation: vault-sweep 3.2s linear infinite; }
@keyframes vault-sweep { from { transform: translateY(-40%); } to { transform: translateY(140%); } }
.vault-shield.is-hit .vs-edge { animation: vault-flash 0.5s ease-out; }
@keyframes vault-flash { 0% { stroke-width: 3.2; filter: drop-shadow(0 0 14px var(--primary)); } 100% { stroke-width: 1.6; } }
.vault-hit {
  position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; pointer-events: none; z-index: 65;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 55%, transparent), color-mix(in srgb, var(--primary) 12%, transparent) 45%, transparent 68%);
  animation: vault-hit 0.75s ease-out forwards;
}
@keyframes vault-hit { from { scale: 0.2; opacity: 1; } to { scale: 1.4; opacity: 0; } }
.vault-threat {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 13px; z-index: 66; pointer-events: none;
  display: grid; place-items: center; color: #e5484d;
  background: color-mix(in srgb, #e5484d 12%, var(--card));
  border: 1px solid color-mix(in srgb, #e5484d 42%, transparent);
  box-shadow: 0 10px 26px -10px rgba(229, 72, 77, 0.6);
  opacity: 0;
}
.vault-threat svg { width: 19px; height: 19px; }
.vault-threat.is-bounced { color: var(--text-muted); border-color: var(--border); box-shadow: none; }
.orbit-core.absorb .dev-screen { animation: vault-absorb 0.45s ease-out; }
@keyframes vault-absorb { 0% { box-shadow: inset 0 0 0 0 transparent; } 30% { box-shadow: inset 0 0 40px 4px color-mix(in srgb, var(--primary) 70%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.orbit .orbit-chip { border-color: color-mix(in srgb, var(--primary) calc(var(--enc, 0) * 100%), var(--border)); }
.orbit-chip > span:last-child { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
@media (max-width: 760px) { .vault-threat { width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 10px; } .vault-threat svg { width: 15px; height: 15px; } .orbit-lock { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 17px; } .orbit-lock svg { width: 24px; height: 24px; } }
.orbit-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.orbit-rings i {
  position: absolute;
  width: calc(var(--rx) * 2 * var(--s));
  height: calc(var(--ry) * 2 * var(--s));
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  box-shadow: inset 0 0 40px -12px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 30px -14px color-mix(in srgb, var(--primary) 60%, transparent);
  will-change: transform, opacity;
}
.orbit-rings i:nth-child(1) { --s: 1.22; opacity: 0.55; }
.orbit-rings i:nth-child(2) { --s: 1; opacity: 0.35; border-style: dashed; }
.orbit-rings i:nth-child(3) { --s: 0.66; opacity: 0.25; }
.orbit-chip {
  --a: calc(var(--i) * 45deg);
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  font-size: 0.84rem;
  transform: translate(-50%, -50%) translate(calc(cos(var(--a)) * var(--rx)), calc(sin(var(--a)) * var(--ry)));
  will-change: transform, opacity;
}
.orbit-chip b { font-weight: 700; }
.orbit-chip > span:last-child { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.orbit-chip .fc-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); flex: none; }
.orbit-chip .fc-ic svg { width: 15px; height: 15px; }
.privacy2.is-pinned { padding-top: 0; }
.privacy2.is-pinned .privacy-stage { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.privacy2.is-pinned .statement-text.big { font-size: clamp(1.6rem, 3.6vw, 3rem); }
@media (max-width: 760px) {
  .orbit { --rx: 40vw; --ry: calc(var(--rx) * 0.42); height: 52svh; }
  .orbit-core .dev { --k: 0.34; }
  .orbit-chip { font-size: 0.7rem; padding: 5px 9px 5px 5px; gap: 6px; }
  .orbit-chip .fc-ic { width: 22px; height: 22px; border-radius: 7px; }
  .orbit-chip .fc-ic svg { width: 12px; height: 12px; }
  .orbit-chip > span:last-child { display: none; }
}

/* --- The backdrop (backdrop.js): a faint living dot field behind every page --- */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
main { position: relative; z-index: 0; }

/* --- Stack calculator, round two (2026-10-10): app tiles, popular quick-adds, the bar, the yearly saving --- */
.sc-logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 100%, #fff 0%), color-mix(in srgb, var(--c) 72%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px -4px color-mix(in srgb, var(--c) 60%, transparent);
}
.sc-name { display: flex; align-items: center; gap: 12px; }
.sc-nt { display: grid; gap: 2px; min-width: 0; }
.sc-nt strong { overflow-wrap: anywhere; }
.sc-nt span { font-size: 0.78rem; color: var(--text-muted); }
.sc-list .sc-li { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 0.95rem; }
.sc-list .sc-logo { width: 26px; height: 26px; border-radius: 8px; font-size: 0.66rem; }
.sc-quick { display: grid; gap: 8px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s var(--e-out), border-color 0.2s, background-color 0.2s;
}
.sc-chip .sc-logo { width: 30px; height: 30px; border-radius: 50%; font-size: 0.68rem; }
/* The real icons: iOS-style rounded square (22.5% of the side), a hairline so white icons hold their edge */
.sc-logo.is-icon { display: block; background: none; object-fit: cover; border-radius: 22.5%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent), 0 4px 10px -5px rgba(0, 0, 0, 0.35); -webkit-user-drag: none; user-select: none; }
.sc-chip .sc-logo.is-icon { border-radius: 22.5%; width: 28px; height: 28px; }
.sc-chip > span:last-child { color: var(--primary); font-weight: 800; font-size: 1.05rem; margin-inline-start: 2px; }
.sc-chip:hover { border-color: var(--primary); transform: translateY(-2px); }
.sc-chip:active { transform: scale(0.97); }
.sc-rows .sc-row { animation: sc-in 0.45s var(--e-out); }
@keyframes sc-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .sc-rows .sc-row { animation: none; } }
.sc-bars { width: 100%; display: grid; gap: 8px; margin-top: 14px; text-align: start; }
.sc-bar { display: grid; gap: 4px; }
.sc-bar span { font-size: 0.75rem; color: var(--text-muted); }
.sc-bar i { display: block; height: 10px; border-radius: 999px; width: var(--w); background: linear-gradient(90deg, #e5484d, #f08a5d); transition: width 0.7s var(--e-out); }
.sc-bar.vitali i { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #fff)); box-shadow: 0 0 18px -4px var(--primary); }
.sc-save { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: grid; gap: 2px; }
.sc-save b { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.3rem); font-weight: 600; color: var(--success); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sc-save span { font-size: 0.82rem; color: var(--text-secondary); }
@media (min-width: 761px) {
  .story.is-pinned .story-step { grid-template-columns: minmax(0, 430px) auto; justify-content: center; column-gap: clamp(60px, 9vw, 150px); }
  .story-ghost span { left: 62%; }
}
@media (max-width: 760px) { .story-cards .float-chip { width: max-content; max-width: 168px; } .story-cards .float-chip strong { font-size: 0.74rem; } .story-cards .float-chip div > span { font-size: 0.66rem; } }

/* --- Header language menu (2026-10-10) ------------------------------------ */
.lang-pick { position: relative; }
.lang-btn {
  height: 44px; padding: 0 12px 0 11px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; background: var(--elevated); border: 1px solid var(--border);
  color: var(--text-secondary); font: 700 0.8rem/1 var(--sans); letter-spacing: 0.06em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--primary); border-color: var(--primary); }
.lang-btn svg { width: 18px; height: 18px; }
.lang-pop { left: auto; right: 0; transform: translateY(-6px); min-width: 196px; }
.lang-pop.open { transform: translateY(0); }
[dir="rtl"] .lang-pop { right: auto; left: 0; }
.lang-pop a b { width: 28px; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; }
.lang-pop a[aria-current="true"] { color: var(--text); background: var(--elevated); }
.lang-pop a[aria-current="true"] b { color: var(--primary); }
@media (max-width: 420px) { .lang-btn span { display: none; } .lang-btn { width: 44px; padding: 0; justify-content: center; } }

/* =========================================================================
   REDESIGN (2026-10-11): away from the template look
   One accent is not an identity, so there is a second colour (amber, from the app's streak flame). Light
   stays on the app screens; everything else is matte. Corners are tighter, fewer things sit in boxes, and
   the type has a deliberate sans beside Fraunces.
   ========================================================================= */
html[data-theme] {
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --accent-2: #f2a541;
  --shadow-glow: 0 0 0 transparent;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
}
html[data-theme="light"] { --accent-2: #8b581b; }
body { font-family: var(--sans); letter-spacing: -0.003em; }

/* No glow: no ambient light, no glowing buttons or cards */
.ambient, .hero2-glow, .scroll-progress, .pulse-div { display: none !important; }
.btn-primary, .btn-primary:hover { box-shadow: none; }
.price-card.featured { box-shadow: none; }
.store-badge.recommended { box-shadow: none; }
.badge-hint { display: none; }

/* Fewer labels, fewer centred blocks */
.eyebrow { display: none; }
.section-head { text-align: left; margin-inline: 0; max-width: 760px; }
.section-head .section-sub { margin-inline: 0; }
#pricing .section-head { text-align: center; margin-inline: auto; }
#pricing .section-head .section-sub { margin-inline: auto; }

/* Fewer boxes: facts, lists and the pricing questions sit on a rule, not in cards */
.fact, .why-list > div, .pfaq { background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 18px 0 0; box-shadow: none; }
.facts { gap: 28px; }

/* Icons: only where they carry meaning */
.nav-menu a svg { display: none; }
.coach2-list .ck { background: none; width: auto; height: auto; color: var(--accent-2); }
.coach2-list .ck svg { width: 17px; height: 17px; }

/* The second colour, used sparingly */
.price-badge { background: var(--accent-2); color: #1a1206; letter-spacing: 0.06em; }
html[data-theme="light"] .price-badge { color: #fff; }
.story-k { color: var(--accent-2); }

/* The story without the extras: no step counters, no giant ghost words */
.story-num, .story-ghost { display: none !important; }

/* Hero: one colour, a plain sentence under it */
.hero2 h1 { letter-spacing: -0.03em; }
.hero2-sub { max-width: 620px; margin-inline: auto; }

/* Placeholders (owner's photo, screen recording, reviews). Visible on the preview, refused on a live deploy. */
.placeholder-box {
  display: grid; place-content: center; gap: 8px; text-align: center; padding: 28px;
  border: 1.5px dashed color-mix(in srgb, var(--accent-2) 70%, transparent);
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--accent-2) 6%, transparent) 14px 28px);
  color: var(--text);
}
.placeholder-box span { font-family: var(--serif); font-size: 1.25rem; }
.placeholder-box small { color: var(--text-muted); max-width: 34ch; margin-inline: auto; line-height: 1.5; }
.text-link { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* The real app (screen recording slot) */
.real2 { padding-block: clamp(80px, 11vw, 140px); }
.real2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(32px, 6vw, 90px); align-items: center; }
.real2-video { aspect-ratio: 9 / 19.5; width: 100%; max-width: 360px; justify-self: end; border-radius: 34px; }
@media (max-width: 820px) { .real2-grid { grid-template-columns: 1fr; } .real2-video { justify-self: center; max-width: 280px; } }

/* Everything it tracks, as a plain typographic list */
.everything2 { padding-block: clamp(80px, 10vw, 130px); }
.everything2-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.tracker-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.tracker-cols h3 { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-2); margin-bottom: 12px; }
.tracker-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tracker-cols li { padding: 9px 0; border-top: 1px solid var(--border); color: var(--text); font-size: 1rem; }
@media (max-width: 900px) { .everything2-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tracker-cols { grid-template-columns: 1fr 1fr; } .tracker-cols > div:last-child { grid-column: 1 / -1; } }

/* Why I made VITALi */
.why2 { padding-block: clamp(80px, 11vw, 140px); }
.why2-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.why2-photo { aspect-ratio: 4 / 5; }
.why2-text { display: grid; gap: 16px; margin-top: 22px; font-size: 1.1rem; line-height: 1.7; color: var(--text-secondary); max-width: 60ch; }
.why2-text p:first-child { color: var(--text); }
.why2-sign { color: var(--text-muted); font-size: 1rem; }
.why2-sign strong { color: var(--text); font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
@media (max-width: 820px) { .why2-grid { grid-template-columns: 1fr; } .why2-photo { max-width: 340px; } }

/* Testimonials while they are placeholders */
#quotes[data-placeholder] .quote-card { border-style: dashed; border-color: color-mix(in srgb, var(--accent-2) 70%, transparent); }

/* FAQ: title on the left, questions on the right */
.faq2-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.faq2-grid .section-head { position: sticky; top: 110px; }
.faq2-grid .faq-list { margin: 0; max-width: none; }
@media (max-width: 900px) { .faq2-grid { grid-template-columns: 1fr; } .faq2-grid .section-head { position: static; } }

/* Closing sections on pages without the homepage's phone need their own bottom space */
.final2:not(:has(.final2-phone)) { padding-bottom: clamp(80px, 10vw, 130px); }
.lang-menu-ic { display: inline-flex; color: var(--text-muted); }
.lang-menu-ic svg { width: 16px; height: 16px; }
.real2-copy .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.story.is-pinned .story-dots { gap: 2px; }
.story-dot { display: grid; place-items: center; min-height: 44px; min-width: 22px; padding: 0 4px; background: none; border: 0; cursor: pointer; }
.story-dot:hover i:not(.on) { background: color-mix(in srgb, var(--text) 45%, transparent); }
.story-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 999px; }

/* Why we made VITALi: four single-purpose apps, and the one that replaces them */
.why2-visual { display: grid; justify-items: center; gap: 18px; padding: clamp(24px, 4vw, 44px) 0; }
.w4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 380px); }
.w4-app {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card);
  color: var(--text-muted); font-size: 0.95rem; font-weight: 500;
  text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent);
}
.w4-app::before { content: ""; width: 26px; height: 26px; flex: none; border-radius: 7px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.w4-into { width: 22px; height: 44px; color: var(--text-muted); }
.w4-one { display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--card); font-family: var(--serif); font-size: 1.6rem; font-weight: 600; }
.w4-one img { width: 56px; height: 56px; border-radius: 14px; }
.w4-one .i { color: var(--primary); }
/* On arrival the four apps settle in one by one, then the one app lands */
html.motion .why2-visual .w4-app { opacity: 0; translate: 0 10px; transition: opacity 0.5s var(--e-out), translate 0.5s var(--e-out); }
html.motion .why2-visual .w4-into, html.motion .why2-visual .w4-one { opacity: 0; translate: 0 -8px; transition: opacity 0.6s var(--e-out) 0.65s, translate 0.6s var(--e-out) 0.65s; }
html.motion .why2-visual.is-in .w4-app { opacity: 1; translate: 0 0; }
html.motion .why2-visual.is-in .w4-app:nth-child(2) { transition-delay: 0.08s; }
html.motion .why2-visual.is-in .w4-app:nth-child(3) { transition-delay: 0.16s; }
html.motion .why2-visual.is-in .w4-app:nth-child(4) { transition-delay: 0.24s; }
html.motion .why2-visual.is-in .w4-into, html.motion .why2-visual.is-in .w4-one { opacity: 1; translate: 0 0; }
@media (max-width: 820px) { .why2-visual { order: 2; } }

/* The calculator's way in from the homepage, and its heading on the comparison page */
.pricing-stack { text-align: center; margin-top: 26px; color: var(--text-secondary); }
.stack-head { margin-top: clamp(56px, 7vw, 96px); scroll-margin-top: 100px; }
.stack-head + .stackcalc { margin-top: 24px; }

/* The background scenes run on every section, quietly */
.backdrop { opacity: 0.6; }