/* ============================================
   Ativiza — home scenes
   Scroll-driven effects live under `.motion` (set in <head> when JS runs and
   the visitor hasn't asked for reduced motion). scroll.js writes --p (0→1)
   on every [data-scene]; the CSS below derives each effect from it using
   transform and opacity only. Without `.motion`, every scene shows its final
   state as an ordinary page.
   ============================================ */

:root {
  --ink: #27418e;
  --margin-red: rgba(205, 84, 84, 0.42);
  --rule: rgba(6, 78, 59, 0.14);
  --bezel-dark: #1b211f;
}

.display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.8vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  max-width: 17ch;
  text-wrap: balance;
}

/* ---------- Phone frame (CSS only) ---------- */
.phone {
  --phone-h: 38rem;
  --bezel: calc(var(--phone-h) * 0.016);
  --radius: calc(var(--phone-h) * 0.075);
  position: relative;
  flex-shrink: 0;
  height: var(--phone-h);
  width: calc((var(--phone-h) - 2 * var(--bezel)) * 0.4603 + 2 * var(--bezel));
  margin: 0;
  padding: var(--bezel);
  border-radius: var(--radius);
  background: linear-gradient(150deg, #3a4441 0%, var(--bezel-dark) 38%, var(--bezel-dark) 70%, #353f3c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 6px rgba(0, 32, 28, 0.12),
    0 40px 80px -30px rgba(0, 32, 28, 0.45),
    0 80px 140px -60px rgba(3, 46, 35, 0.4);
}
.phone::after {
  content: '';
  position: absolute;
  top: calc(var(--bezel) + var(--phone-h) * 0.013);
  left: 50%;
  width: 27%;
  height: calc(var(--phone-h) * 0.034);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0c100f;
}
.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius) - var(--bezel));
  background: var(--brand);
}
.phone-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ============================================
   1. Hero — the notebook, the app and the web panel in one scene
   ============================================ */
.hero {
  position: relative;
  overflow: clip;
  background: var(--white);
}
.hero-stage {
  display: grid;
  gap: var(--space-12);
  max-width: 84rem;
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--space-12)) var(--gutter) var(--space-16);
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 36rem;
}
.hero-eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--focus);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 5.4vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--text);
}
.hero-title span { display: block; }
.hero-title-accent { color: var(--focus); }
.hero-lead {
  max-width: 32rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-hero-primary { background: var(--brand); color: var(--white); }
.btn-hero-primary:hover { background: var(--night); }
.btn-hero-secondary { background: var(--white); color: var(--text); border: 1.5px solid var(--line-strong); }
.btn-hero-secondary:hover { border-color: var(--brand); }
.hero-store {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--brand);
  text-underline-offset: 3px;
}
.hero-store::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(167, 226, 3, 0.55);
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.hero-trust li { display: flex; align-items: center; gap: 0.5rem; }
.hero-trust svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--brand); }

/* The scene: notebook behind, web panel in the middle, phone in front */
.hero-scene {
  position: relative;
  height: clamp(22rem, 78vw, 30rem);
}
.hero-band {
  position: absolute;
  top: 12%;
  bottom: -20%;
  left: 22%;
  right: -60vw;
  background: linear-gradient(140deg, var(--brand-soft) 0%, var(--brand) 45%, var(--night) 100%);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 2rem 0 0 0;
}
.notebook {
  --rule-h: 1.6rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 72%;
  overflow: hidden;
  border-radius: 0.375rem 0.375rem 0.625rem 0.625rem;
  transform: rotate(-5deg);
}
.notebook-paper {
  position: absolute;
  inset: 0;
  border-radius: 0.375rem 0.375rem 0.625rem 0.625rem;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 2.25rem, var(--margin-red) 2.25rem, var(--margin-red) calc(2.25rem + 1.5px), transparent calc(2.25rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--rule-h) - 1px), var(--rule) calc(var(--rule-h) - 1px), var(--rule) var(--rule-h));
  box-shadow:
    0 1px 0 rgba(0, 32, 28, 0.04),
    0 2px 4px rgba(0, 32, 28, 0.06),
    0 24px 48px -24px rgba(0, 32, 28, 0.3);
}
.notes {
  position: relative;
  margin: 0;
  padding: var(--rule-h) 1rem calc(var(--rule-h) * 2.5) 2.9rem;
  list-style: none;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: var(--rule-h);
  color: var(--ink);
  white-space: nowrap;
}
.note { display: block; }
.note-ink { position: relative; top: 0.28rem; display: inline-block; }
.note-heading { font-weight: 600; font-size: 1.15em; }
.note-heading .note-ink { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.note-strike { position: relative; text-decoration: none; }
.note-strike::after {
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 55%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transform: rotate(-4deg);
}

.laptop {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 24%;
  width: 82%;
}
.laptop-screen {
  overflow: hidden;
  padding: 0.45rem;
  border-radius: 0.9rem 0.9rem 0.25rem 0.25rem;
  background: var(--bezel-dark);
  box-shadow: 0 40px 80px -30px rgba(0, 32, 28, 0.55);
}
.laptop-bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.35rem;
  padding: 0 0.6rem;
  border-radius: 0.45rem 0.45rem 0 0;
  background: #e8ede7;
  font-size: 0.6rem;
  color: var(--text-muted);
}
.laptop-bar i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #c9d2cb; }
.laptop-bar span { margin-left: 0.5rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--white); }
.laptop-screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  border-radius: 0 0 0.3rem 0.3rem;
}
.laptop-base {
  height: 0.75rem;
  margin: 0 -7%;
  border-radius: 0 0 1rem 1rem;
  background: linear-gradient(180deg, #e3e8e4 0%, #b7c0bb 100%);
  box-shadow: 0 18px 30px -16px rgba(0, 32, 28, 0.5);
}

.hero-phone {
  --phone-h: clamp(15rem, 44vw, 19rem);
  position: absolute;
  z-index: 3;
  left: 4%;
  bottom: 0;
  transform: rotate(-3deg);
}

@media (min-width: 900px) {
  .hero-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    column-gap: var(--space-12);
    min-height: min(100svh, 56rem);
    padding-top: calc(var(--header-h) + var(--space-16));
  }
  .hero-scene { height: clamp(32rem, 44vw, 40rem); }
  .hero-band { top: -30%; bottom: -40%; left: 16%; }
  .notebook { --rule-h: 2.1rem; width: 64%; left: -4%; top: 2%; }
  .notes { font-size: 1.4rem; padding-left: 3.4rem; }
  .notebook-paper {
    background-image:
      linear-gradient(90deg, transparent 2.75rem, var(--margin-red) 2.75rem, var(--margin-red) calc(2.75rem + 1.5px), transparent calc(2.75rem + 1.5px)),
      repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--rule-h) - 1px), var(--rule) calc(var(--rule-h) - 1px), var(--rule) var(--rule-h));
  }
  .laptop { top: 22%; width: 84%; right: -2%; }
  .laptop-bar { height: 1.7rem; font-size: 0.75rem; }
  .hero-phone { --phone-h: clamp(22rem, 30vw, 28rem); left: 2%; bottom: -2%; }
}

/* Page-load entrance (only with .motion: JS on and no reduced-motion request) */
.motion .hero-copy > * { animation: hero-rise 0.9s var(--ease-out) both; }
.motion .hero-copy > :nth-child(2) { animation-delay: 0.06s; }
.motion .hero-copy > :nth-child(3) { animation-delay: 0.12s; }
.motion .hero-copy > :nth-child(n + 4) { animation-delay: 0.18s; }
.motion .hero-band { animation: band-in 1.1s var(--ease-out) both; }
.motion .notebook { animation: paper-in 1s var(--ease-out) 0.15s both; }
.motion .laptop { animation: hero-rise 1s var(--ease-out) 0.35s both; }
.motion .hero-phone { animation: phone-in 1s var(--ease-out) 0.55s both; }
.motion .note-ink {
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: ink-write 0.8s var(--ease-in-out) both;
}
.motion .note:nth-child(1) .note-ink { animation-delay: 0.7s; }
.motion .note:nth-child(2) .note-ink { animation-delay: 1s; }
.motion .note:nth-child(3) .note-ink { animation-delay: 1.3s; }
.motion .note:nth-child(4) .note-ink { animation-delay: 1.6s; }
.motion .note:nth-child(5) .note-ink { animation-delay: 1.9s; }
.motion .note-strike::after {
  transform-origin: left center;
  animation: strike 0.35s var(--ease-out) 2.3s both;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(1.25rem); }
}
@keyframes band-in {
  from { opacity: 0; transform: translateX(3rem); }
}
@keyframes paper-in {
  from { opacity: 0; transform: translateY(2rem) rotate(-9deg); }
  to { transform: rotate(-5deg); }
}
@keyframes phone-in {
  from { opacity: 0; transform: translateY(3rem) rotate(2deg); }
  to { transform: rotate(-3deg); }
}
@keyframes ink-write {
  to { clip-path: inset(-0.4em -0.4em -0.4em -0.2em); }
}
@keyframes strike {
  from { transform: rotate(-4deg) scaleX(0); }
  to { transform: rotate(-4deg) scaleX(1); }
}

/* ============================================
   2. Showcase — pinned phone, five screens
   ============================================ */
.showcase {
  background: var(--white);
  padding-top: var(--space-24);
  overflow: clip;
}
.show-intro { padding-bottom: var(--space-12); }
.show-grid { display: grid; gap: var(--space-12); }
.show-copy { position: relative; }
.chapters { display: grid; gap: var(--space-20); }
.chapter { display: grid; gap: var(--space-3); }
.chapter-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-wrap: balance;
}
.chapter-desc {
  max-width: 30rem;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}
.chapter-shot {
  --phone-h: min(36rem, 130vw);
  margin-top: var(--space-6);
  justify-self: center;
}
.show-device,
.show-rail { display: none; }
.show-track { padding-bottom: var(--space-24); }

@media (min-width: 900px) {
  .chapter { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr; column-gap: var(--space-16); }
  .chapter-title { grid-row: 2; }
  .chapter-desc { grid-row: 3; }
  .chapter-shot { grid-row: 1 / -1; grid-column: 2; margin-top: 0; }
  html:not(.motion) .chapters { max-width: 62rem; margin-inline: auto; }
}

/* Showcase, animated */
.motion .show-track { height: 520vh; padding-bottom: 0; }
.motion .show-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.motion .chapter-shot { display: none; }
.motion .show-device { display: flex; justify-content: center; }
.motion .show-device .phone {
  --phone-h: min(80svh, 48rem);
  transform:
    translateY(calc((0.5 - var(--p, 0)) * 5svh))
    rotate(calc((var(--p, 0) - 0.5) * -3deg));
}
.motion .screen {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out);
}
.motion .screen.is-active { opacity: 1; transform: none; }
.motion .show-rail {
  display: block;
  position: absolute;
  overflow: hidden;
  background: var(--line);
  border-radius: 2px;
}
.motion .show-rail-fill {
  position: absolute;
  inset: 0;
  background: var(--brand);
}
.motion .chapter {
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

@media (min-width: 900px) {
  .motion .show-grid {
    grid-template-columns: minmax(0, 30rem) auto;
    justify-content: center;
    align-items: center;
    column-gap: clamp(4rem, 9vw, 9rem);
  }
  .motion .show-copy { padding-left: var(--space-8); }
  .motion .chapter-title { font-size: clamp(1.375rem, 1.9vw, 1.75rem); max-width: none; }
  .motion .chapter-desc { font-size: var(--text-base); }
  .motion .show-rail { left: 0; top: 0; bottom: 0; width: 2px; }
  .motion .show-rail-fill { transform-origin: top; transform: scaleY(var(--p, 0)); }
  .motion .chapters { gap: var(--space-6); }
  .motion .chapter { display: block; opacity: 0.25; transform: translateX(-0.5rem); }
  .motion .chapter.is-active { opacity: 1; transform: none; }
  .motion .chapter-desc { margin-top: var(--space-2); }
}

@media (max-width: 899px) {
  .motion .show-intro { padding-bottom: 0; }
  .motion .show-stage { align-items: stretch; }
  .motion .show-grid {
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-5);
    padding-top: calc(var(--header-h) + var(--space-6));
    padding-bottom: var(--space-5);
  }
  .motion .show-copy { padding-top: var(--space-4); }
  .motion .show-rail { left: 0; right: 0; top: 0; height: 2px; }
  .motion .show-rail-fill { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .motion .chapters { gap: 0; }
  .motion .chapter { grid-area: 1 / 1; opacity: 0; transform: translateY(0.75rem); }
  .motion .chapter.is-active { opacity: 1; transform: none; }
  .motion .chapter-title { font-size: 1.375rem; }
  .motion .chapter-desc { font-size: var(--text-base); }
  .motion .show-device { align-items: center; min-height: 0; }
  .motion .show-device .phone { --phone-h: min(60svh, 34rem); }
}

/* ============================================
   3. The right sum — scroll moves the day
   ============================================ */
.math {
  background: var(--night);
  color: var(--on-night);
  overflow: clip;
}
.math-stage { padding: var(--space-24) 0; }
.math-grid {
  display: grid;
  gap: var(--space-10);
}
/* Grid items default to min-width: auto; the nowrap amounts would otherwise widen the ruler past narrow screens. */
.math-grid > * { min-width: 0; }
.math-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 5.8vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--white);
}
.math-title span { display: block; }
.math-title span:first-child { white-space: nowrap; }
.math-lead {
  margin-top: var(--space-6);
  max-width: 32rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--on-night-muted);
  text-wrap: pretty;
}
.ruler {
  width: 100%;
  max-width: 38rem;
  padding: var(--space-6);
  border-radius: 1.5rem;
  background: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(167, 226, 3, 0.14), 0 40px 80px -40px rgba(0, 0, 0, 0.5);
}
.ruler-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.ruler-day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.ruler-period { font-size: var(--text-sm); color: var(--on-night-muted); }
.ruler-bars {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 3.25rem;
  margin: var(--space-5) 0 var(--space-6);
}
.ruler-bars span {
  height: 55%;
  border-radius: 3px;
  background: rgba(167, 226, 3, 0.16);
  transform-origin: 50% 100%;
  transition: background-color 0.2s, transform 0.25s var(--ease-out);
}
.ruler-bars span.on { background: var(--lime); }
.ruler-bars span.now { transform: scaleY(1.8); }
.ruler-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.result + .result {
  padding-left: var(--space-4);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.result-label { font-size: var(--text-sm); color: var(--on-night-muted); }
.result-value {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.result-used .result-value { color: var(--lime); }
.result-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--on-night-muted);
}
.ruler-saving {
  display: inline-flex;
  margin-top: var(--space-5);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(167, 226, 3, 0.14);
  color: var(--lime);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.math-note {
  max-width: 38rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--on-night-muted);
}

@media (min-width: 1000px) {
  .math-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: 'head ruler' 'head note';
    column-gap: var(--space-16);
    row-gap: var(--space-6);
    align-items: center;
  }
  .math-head { grid-area: head; }
  .ruler { grid-area: ruler; justify-self: end; align-self: end; }
  .math-note { grid-area: note; justify-self: end; align-self: start; }
}

/* Math, animated */
.motion .math-track {
  height: 340vh;
  --in: clamp(0, var(--p, 0) / 0.1, 1);
}
.motion .math-stage {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--space-4)) 0 var(--space-6);
}
.motion .math-title {
  transform-origin: 0 100%;
  transform: scale(calc(1.14 - var(--in) * 0.14));
  opacity: calc(0.35 + var(--in) * 0.65);
}
.motion .ruler {
  transform: translateY(calc((1 - var(--in)) * 3rem));
  opacity: calc(0.2 + var(--in) * 0.8);
}

@media (max-width: 599px) {
  .math-title { font-size: clamp(2.25rem, 12vw, 3.5rem); }
  .math-lead { margin-top: var(--space-3); font-size: var(--text-base); }
  .ruler { padding: var(--space-5) var(--space-4); border-radius: 1.25rem; }
  .ruler-bars { height: 2.75rem; margin: var(--space-4) 0 var(--space-4); gap: 2px; }
  /* Results stack: label and amount on one line, hint underneath */
  .ruler-results { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-top: var(--space-4); }
  .result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-3);
  }
  .result + .result {
    padding: var(--space-3) 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .result-value { grid-column: 2; grid-row: 1; margin-top: 0; font-size: clamp(1.125rem, 6.2vw, 1.625rem); }
  .result-hint { grid-column: 1 / -1; margin-top: var(--space-1); }
  .ruler-saving { margin-top: var(--space-4); }
  .motion .math-grid { gap: var(--space-6); }
  .motion .math-note { display: none; }
}

/* ============================================
   4. Day to day — rows slide in from alternate sides
   ============================================ */
.daily {
  background: var(--surface);
  padding: var(--space-24) 0;
  overflow: clip;
}
.daily-list {
  margin-top: var(--space-12);
  border-top: 1px solid var(--line);
}
.daily-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--line);
}
.daily-icon {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.65rem;
  border-radius: 0.875rem;
  background: var(--brand);
  color: var(--lime);
}
.daily-row h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.daily-row p {
  grid-column: 1 / -1;
  max-width: 34rem;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}
@media (min-width: 900px) {
  .daily-row {
    grid-template-columns: 3.5rem minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-10) 0;
  }
  .daily-row p { grid-column: 3; }
}

.motion .daily-row {
  --e: clamp(0, (var(--p, 0) - 0.04) / 0.3, 1);
  opacity: calc(0.12 + var(--e) * 0.88);
  transform: translateX(calc((1 - var(--e)) * 9vw * var(--dir, 1)));
}
.motion .daily-row .daily-icon {
  transform: scale(calc(0.6 + var(--e) * 0.4)) rotate(calc((1 - var(--e)) * -25deg));
}

/* ============================================
   5. Privacy — words light up as you read
   ============================================ */
.privacy {
  background: var(--white);
  padding: var(--space-32) 0;
}
.highlight {
  max-width: 60rem;
  margin-top: var(--space-10);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.3vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: pretty;
}
.motion .highlight .w {
  color: rgba(0, 32, 28, 0.16);
  transition: color 0.35s var(--ease-out);
}
.motion .highlight .w.on { color: var(--text); }
.privacy-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin-top: var(--space-10);
}
.privacy-links a {
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--duration);
}
.privacy-links a:hover { text-decoration-color: var(--lime); }

/* ============================================
   6. Launch
   ============================================ */
/* Plans: the free month first */
.plans {
  background: var(--surface);
  padding: var(--space-24) 0;
}
.plans-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.plans-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-5);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--night);
  font-size: var(--text-sm);
  font-weight: 700;
}
.plans .display-2 { max-width: 16ch; }
.plans-lead {
  max-width: 38rem;
  margin-top: var(--space-5);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-12);
  text-align: left;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.plan-featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-card); }
.plan-top {
  position: absolute;
  top: -0.75rem;
  right: var(--space-5);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.plan-free {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(167, 226, 3, 0.28);
  color: var(--brand);
  font-size: var(--text-sm);
  font-weight: 700;
}
.plan-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.plan-tag { min-height: 2.9em; font-size: var(--text-sm); line-height: 1.45; color: var(--text-muted); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; color: var(--text-muted); font-size: var(--text-sm); }
.plan-price strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.plan-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: var(--space-2) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.plan-features li { display: flex; align-items: flex-start; gap: 0.6rem; }
.plan-features svg { flex-shrink: 0; margin-top: 0.05rem; color: var(--focus); }
.plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin-top: auto;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.plan-cta:hover { background: var(--brand-soft); transform: translateY(-2px); }
.plan-featured .plan-cta { background: var(--lime); color: var(--night); }
.plan-featured .plan-cta:hover { background: var(--lime); box-shadow: 0 14px 30px -12px rgba(167, 226, 3, 0.7); }
.plans-note {
  max-width: 44rem;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-soft);
}
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-6) var(--space-8);
  width: 100%;
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--line);
  text-align: left;
}
.faq dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; }
.faq dd { margin: var(--space-2) 0 0; font-size: var(--text-base); line-height: 1.55; color: var(--text-muted); }

.launch {
  background: var(--brand);
  color: var(--white);
  padding: var(--space-32) 0;
  overflow: clip;
}
.launch-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.launch-title {
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6.6vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.launch-lead {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.store {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 10.5rem;
  padding: 0.6rem 1.25rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.875rem;
  text-align: left;
}
/* The store where the app is out: a link, in lime. */
a.store {
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.store-live { border-color: var(--lime); background: rgba(167, 226, 3, 0.1); }
.store-live:hover { transform: translateY(-2px); background: rgba(167, 226, 3, 0.18); }
.store-live .store-soon { color: var(--lime); }
.launch-secondary {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.74);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.launch-secondary:hover { color: #fff; }
.store-soon { font-size: 0.75rem; color: rgba(255, 255, 255, 0.64); }
.store-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.btn-lime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  margin-top: var(--space-4);
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--night);
  font-weight: 700;
  text-align: center;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.btn-lime:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(167, 226, 3, 0.7);
}
.btn-lime:active { transform: none; }
.launch :focus-visible { outline-color: var(--lime); }

.motion .launch-inner {
  --e: clamp(0, (var(--p, 0) - 0.05) / 0.4, 1);
  transform: translateY(calc((1 - var(--e)) * 4rem)) scale(calc(0.92 + var(--e) * 0.08));
  opacity: calc(0.15 + var(--e) * 0.85);
}