/* ───────────────────────────────────────────────────────────
 * Geek Tools To-Do — landing page styles
 *
 * Visual goals:
 *  • Match the app's dark palette so sign-up → app feels seamless.
 *  • Mobile-first responsive; everything reflows at 760px.
 *  • Static + tiny: no framework, no icon font, all SVG inline,
 *    one external CSS file, minimal JS.
 * ─────────────────────────────────────────────────────────── */

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

:root {
  /* Surfaces (darker = further back) */
  --bg:           #0a0d14;
  --surface-1:   #0f1117;
  --surface-2:   #14161f;
  --surface-3:   #1a1d2a;
  --border:      #1e2130;
  --border-2:    #2d3148;

  /* Text */
  --text:        #e2e8f0;
  --text-dim:    #94a3b8;
  --text-dimmer: #64748b;

  /* Accents — same family as the app's ambient orbs */
  --blue:    #3b82f6;
  --purple:  #a78bfa;
  --orange:  #fb923c;
  /* Brand green — matches the topbar logo, the brand-wordmark "Task"
   * (#22C55E), and the streak calendar's completed cells. Used by all
   * checkbox fills (static .app-check.checked and the animated multi-tick
   * + hero-row cascades) so the whole site speaks one green. */
  --green:   #22C55E;
  --cyan:    #22d3ee;
  --pink:    #f472b6;
  --amber:   #f59e0b;
  --red:     #f87171;

  /* Layout */
  --max-w:        1180px;
  --max-w-narrow: 760px;
  --radius:       14px;
  --radius-sm:    8px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

img, svg { max-width: 100%; display: block; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-narrow { max-width: var(--max-w-narrow); }

/* ─────────── Buttons ─────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: translateY(1px); }

/* Primary CTA — green gradient matches the GeekTask brand icon
 * (lime → emerald, same family as the rounded tile in the favicon).
 * Shadow tinted the same hue so the lift feels intentional, not
 * leftover from the pre-rebrand blue/purple palette. */
.btn-primary {
  background: linear-gradient(135deg, #4ADE80, #16A34A);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(34,197,94,0.32);
}
.btn-primary:hover {
  box-shadow: 0 10px 30px rgba(34,197,94,0.42);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn-ghost:hover { background: var(--surface-2); border-color: #3d4360; }

.btn-lg { padding: 0.85rem 1.4rem; font-size: 1rem; border-radius: 12px; }
.btn-xl { padding: 1rem 1.8rem; font-size: 1.08rem; border-radius: 14px; }
.btn-block { width: 100%; }

/* ─────────── Top nav ─────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,13,20,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* Scrolled state: bump the frosted bg from 0.78 → 0.92 opacity, add a
 * subtle inset top hairline + a soft drop shadow. The current frame
 * (no shadow, no inset) reads as "still on hero"; the scrolled frame
 * reads as "elevated above the content". Driven by JS adding .scrolled
 * once window.scrollY > 6. */
.nav.scrolled {
  background: rgba(10,13,20,0.92);
  border-bottom-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 24px rgba(0,0,0,0.35);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; letter-spacing: 0.2px;
  color: var(--text);
}
/* Matches the task.html topbar dimensions for visual consistency: 26px
   icon + 1.1rem text + a 3px down-shift to compensate for the shadow
   that lives in the lower portion of app_logo.svg's viewBox (otherwise
   the visible tile reads as sitting too high next to the text). */
.brand-mark {
  width: 26px; height: 26px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  transform: translateY(3px);
}
.brand-name { font-size: 1.1rem; letter-spacing: 0.15px; }
/* "GeekTask" wordmark — two-tone, two words stick together (no space
   in markup) so it reads as a single visual unit next to the icon.
   "Geek" inherits the brand text color; "Task" picks up the icon green. */
.brand-wordmark-geek { color: var(--text); }
.brand-wordmark-task { color: #22C55E; }

.nav-links {
  display: flex; align-items: center; gap: 1.6rem;
  margin-left: 1rem;
}
.nav-links a {
  color: var(--text-dim);
  font-size: 0.9rem; font-weight: 500;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--text); }

.nav-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 0.55rem;
}

/* Language switcher */
.lang-wrap { position: relative; }
.lang-btn {
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 0.9rem;
  border-radius: 10px;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.88rem; font-weight: 600;
  /* Match .btn's natural rendered height (~47.2px) directly so the
   * lang pill / Sign-in / Get-started trio share an exact height. */
  height: 47.2px;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-btn:hover { background: var(--surface-3); color: var(--text); }
.lang-btn svg { width: 14px; height: 14px; }
.lang-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 160px;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 4px;
  z-index: 60;
}
.lang-menu.show { display: block; }
.lang-menu button {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.55rem 0.7rem;
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; border-radius: 6px;
  font-size: 0.86rem; text-align: left;
  transition: background 0.12s, color 0.12s;
}
.lang-menu button:hover { background: var(--surface-2); color: var(--text); }
.lang-menu button.active { color: var(--text); background: var(--surface-2); }
.lang-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 18px;
  background: var(--surface-3); color: var(--text-dim);
  border-radius: 4px;
  font-size: 0.66rem; font-weight: 700;
  flex-shrink: 0;
}

/* ─────────── Hero ─────────── */
.hero {
  position: relative;
  padding: 4rem 0 5rem;
  overflow: hidden;
}
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.orb-a { width: 460px; height: 460px; background: var(--blue);   opacity: 0.22; top: -160px; left: -120px; }
.orb-b { width: 540px; height: 540px; background: var(--purple); opacity: 0.20; bottom: -220px; right: -200px; }
.orb-c { width: 600px; height: 600px; background: var(--blue);   opacity: 0.18; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.hero-copy { max-width: 580px; }
/* Eyebrow pill — green-tinted to match the brand. Same green family
 * as the trust-dots below it so the eye reads a single brand thread
 * down the hero. */
.hero-eyebrow {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.28);
  color: #86EFAC;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 1.2rem;
}
.hero-headline {
  font-size: clamp(2.4rem, 4.8vw, 3.8rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}
.hero-headline span { display: block; }
/* Headline gradient — green family with a cyan accent for visual
 * interest. Stays in the GeekTask brand neighbourhood instead of the
 * old blue→purple→pink which read as a different product. */
.grad-text {
  background: linear-gradient(90deg, #4ADE80 0%, #14B8A6 55%, #22D3EE 110%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: 1.13rem;
  color: var(--text-dim);
  margin-bottom: 1.8rem;
  max-width: 540px;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-bottom: 2rem;
}
.hero-trust {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 1rem 1.3rem;
  font-size: 0.88rem; color: var(--text-dim);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.trust-dot {
  width: 6px; height: 6px;
  background: var(--green); border-radius: 50%;
  box-shadow: 0 0 6px rgba(16,185,129,0.55);
}

/* ── App preview (faux browser frame with a mini app inside) ── */
.hero-visual {
  position: relative;
  z-index: 1;
  perspective: 1400px;
}
.app-frame {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
  overflow: hidden;
  /* No rotation — earlier versions had a subtle 0.5° playful tilt but
   * it read as a visual bug on wide screens (mockup looking lopsided),
   * not as a stylistic touch. Keep it perpendicular so the browser-chrome
   * dots and URL bar look intentional. */
}
.app-frame-bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.app-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.app-dot-r { background: #ef4444; }
.app-dot-y { background: #f59e0b; }
.app-dot-g { background: #10b981; }
.app-frame-url {
  margin-left: 0.6rem;
  flex: 1;
  font-size: 0.74rem; color: var(--text-dimmer);
  background: var(--surface-2);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  text-align: center;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
}
.app-frame-body { padding: 1.1rem; }

.app-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.9rem;
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.app-streak {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--orange);
  font-size: 0.72rem; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  background: rgba(251,146,60,0.10);
  border: 1px solid rgba(251,146,60,0.25);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.app-streak svg { width: 12px; height: 12px; }

.app-task {
  display: flex; align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.app-task:last-of-type { margin-bottom: 0; }

.app-check {
  width: 20px; height: 20px;
  border: 1.5px solid #475569;
  border-radius: 5px;
  flex-shrink: 0;
  position: relative;
}
.app-check.checked {
  background: var(--green);
  border-color: var(--green);
}
.app-check.checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/70% no-repeat;
}
.app-check.sm { width: 14px; height: 14px; border-radius: 3px; border-width: 1.2px; }
.app-check.sm.checked::after { background-size: 76%; }
.app-checks { display: flex; gap: 4px; flex-shrink: 0; }

.app-title {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-title.strike { color: var(--text-dim); text-decoration: line-through; }
.app-times {
  color: var(--text-dimmer);
  font-weight: 600;
  font-size: 0.82rem;
}

.app-pill {
  flex-shrink: 0;
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: rgba(96,165,250,0.10);
  color: #93c5fd;
  border: 1px solid rgba(96,165,250,0.20);
}
.app-pill.warn {
  background: rgba(251,191,36,0.10);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.22);
}

/* Motivation pill — 4 tier variants cross-fade through the 8 s hero
 * cycle. Stack uses fixed height + absolutely-positioned children so
 * the layout doesn't bounce as the pill content changes. Each tier's
 * colour palette matches the actual product (see .motivation.tier-*
 * in task.html) so users feel the same micro-celebration on the live
 * app that they previewed on the landing. */
.app-motivation-stack {
  position: relative;
  margin-top: 0.9rem;
  height: 38px;
}
.app-motivation {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid;
  border-radius: 10px;
  font-size: 0.85rem;
  opacity: 0;            /* visibility driven by per-tier keyframes */
}
.app-emoji { font-size: 1.05rem; }
/* Tier palettes (mirror task.html's .motivation.tier-go / -first / -half / -done). */
.app-motivation.mot-go {
  background: rgba(96,165,250,0.10);
  border-color: rgba(96,165,250,0.25);
  color: #93c5fd;
}
.app-motivation.mot-first {
  background: rgba(34,211,238,0.12);
  border-color: rgba(34,211,238,0.32);
  color: #67e8f9;
}
.app-motivation.mot-half {
  background: rgba(167,139,250,0.12);
  border-color: rgba(167,139,250,0.32);
  color: #c4b5fd;
}
/* "Day crushed!" celebration — green→gold gradient + a soft ambient
 * glow. Same treatment the live app's .motivation.tier-done uses
 * when the user actually finishes their day. */
.app-motivation.mot-done {
  background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(251,191,36,0.18));
  border-color: rgba(74,222,128,0.40);
  color: #4ade80;
  box-shadow: 0 0 18px rgba(74,222,128,0.18);
}

/* Per-tier visibility schedules — all on the SAME 8 s cycle as the
 * task ticks above. Each pill is fully visible for ~25-30% of cycle
 * with brief cross-fade windows so transitions feel smooth. */
.app-motivation.mot-go    { animation: mot-show-go    8s ease-in-out infinite; }
.app-motivation.mot-first { animation: mot-show-first 8s ease-in-out infinite; }
.app-motivation.mot-half  { animation: mot-show-half  8s ease-in-out infinite; }
.app-motivation.mot-done  { animation: mot-show-done  8s ease-in-out infinite; }

@keyframes mot-show-go {
  /* 0-12%: visible (idle, "let's go"); fades out as Make bed ticks at 15% */
  0%, 12%   { opacity: 1; }
  17%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes mot-show-first {
  /* Make bed done (15%) → Take medicine fully done (45%) */
  0%, 12%   { opacity: 0; }
  17%, 42%  { opacity: 1; }
  47%, 100% { opacity: 0; }
}
@keyframes mot-show-half {
  /* 2/4 done (45%) → 3/4 done (60%) → just before 4/4 (75%) */
  0%, 42%   { opacity: 0; }
  47%, 72%  { opacity: 1; }
  77%, 100% { opacity: 0; }
}
@keyframes mot-show-done {
  /* All 4 done at 75% — held visible until 92%, then resets. */
  0%, 72%   { opacity: 0; }
  77%, 92%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* Demo "ticking" animation — one task in the hero preview ticks itself
 * every 6 seconds to show the product in motion. Pure CSS, no JS,
 * cheap to render. The catch-all prefers-reduced-motion rule at the
 * bottom of this file kills the animation for users who've opted out
 * of motion in their OS / browser preferences.
 *
 * Single 8 s cycle ticks all 4 tasks sequentially, then fades back to
 * empty for the next loop. Each row has its own keyframe schedule keyed
 * to one shared wall clock so they reset together — never a "broken"
 * state where some rows are mid-animation and others not.
 *
 *    %    s     Event
 *   ---  ---   -------
 *    0   0.0   idle (all empty)
 *   15   1.2   Make bed ticks + strikes
 *   30   2.4   Take medicine #1 ticks
 *   45   3.6   Take medicine #2 ticks + row 2 title strikes (both done)
 *   60   4.8   Read 30 minutes ticks + strikes
 *   75   6.0   Call Mom ticks + strikes              ← ALL DONE
 *   75-90      hold the "all done" celebration state
 *   90-100     fade everything back to empty for the next iteration */

/* Shared check glyph (white tick SVG) — one ::after rule covers all
 * 5 hero checkboxes (4 rows × 1 + 1 extra for the 2nd medicine box).
 * Per-element animations below drive opacity/scale. */
.hero-check-bed::after,
.hero-check-med1::after,
.hero-check-med2::after,
.hero-check-read::after,
.hero-check-call::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 65% no-repeat;
  opacity: 0;
  transform: scale(0.5);
}
/* Smaller checks in the multi-tick row use a larger glyph-to-box ratio
 * (matches the static .app-check.sm.checked::after rule above). */
.hero-check-med1::after,
.hero-check-med2::after { background-size: 76%; }

/* Per-row animation bindings. */
.hero-check-bed         { animation: hero-tick-bed   8s ease-in-out infinite; }
.hero-check-bed::after  { animation: hero-mark-bed   8s ease-in-out infinite; }
.hero-check-med1        { animation: hero-tick-med1  8s ease-in-out infinite; }
.hero-check-med1::after { animation: hero-mark-med1  8s ease-in-out infinite; }
.hero-check-med2        { animation: hero-tick-med2  8s ease-in-out infinite; }
.hero-check-med2::after { animation: hero-mark-med2  8s ease-in-out infinite; }
.hero-check-read        { animation: hero-tick-read  8s ease-in-out infinite; }
.hero-check-read::after { animation: hero-mark-read  8s ease-in-out infinite; }
.hero-check-call        { animation: hero-tick-call  8s ease-in-out infinite; }
.hero-check-call::after { animation: hero-mark-call  8s ease-in-out infinite; }

.hero-title-bed  { animation: hero-strike-bed  8s ease-in-out infinite; }
.hero-title-med  { animation: hero-strike-med  8s ease-in-out infinite; }
.hero-title-read { animation: hero-strike-read 8s ease-in-out infinite; }
.hero-title-call { animation: hero-strike-call 8s ease-in-out infinite; }

/* ── Make bed: ticks at 15% ── */
@keyframes hero-tick-bed {
  0%, 11%   { background: transparent;  border-color: #475569;       }
  15%, 90%  { background: var(--green); border-color: var(--green);  }
  100%      { background: transparent;  border-color: #475569;       }
}
@keyframes hero-mark-bed {
  0%, 11%   { opacity: 0; transform: scale(0.5); }
  15%, 90%  { opacity: 1; transform: scale(1);   }
  100%      { opacity: 0; transform: scale(0.5); }
}
@keyframes hero-strike-bed {
  0%, 11%   { opacity: 1;    text-decoration: none;         }
  15%, 90%  { opacity: 0.55; text-decoration: line-through; }
  100%      { opacity: 1;    text-decoration: none;         }
}

/* ── Take medicine #1: ticks at 30% ── */
@keyframes hero-tick-med1 {
  0%, 26%   { background: transparent;  border-color: #475569;       }
  30%, 90%  { background: var(--green); border-color: var(--green);  }
  100%      { background: transparent;  border-color: #475569;       }
}
@keyframes hero-mark-med1 {
  0%, 26%   { opacity: 0; transform: scale(0.5); }
  30%, 90%  { opacity: 1; transform: scale(1);   }
  100%      { opacity: 0; transform: scale(0.5); }
}

/* ── Take medicine #2: ticks at 45% (also when row title strikes) ── */
@keyframes hero-tick-med2 {
  0%, 41%   { background: transparent;  border-color: #475569;       }
  45%, 90%  { background: var(--green); border-color: var(--green);  }
  100%      { background: transparent;  border-color: #475569;       }
}
@keyframes hero-mark-med2 {
  0%, 41%   { opacity: 0; transform: scale(0.5); }
  45%, 90%  { opacity: 1; transform: scale(1);   }
  100%      { opacity: 0; transform: scale(0.5); }
}
@keyframes hero-strike-med {
  /* Strike only AFTER both checks land (so the title doesn't strike
   * while only #1 is ticked — multi-tick tasks aren't "done" until all
   * boxes are checked). */
  0%, 41%   { opacity: 1;    text-decoration: none;         }
  45%, 90%  { opacity: 0.55; text-decoration: line-through; }
  100%      { opacity: 1;    text-decoration: none;         }
}

/* ── Read 30 minutes: ticks at 60% ── */
@keyframes hero-tick-read {
  0%, 56%   { background: transparent;  border-color: #475569;       }
  60%, 90%  { background: var(--green); border-color: var(--green);  }
  100%      { background: transparent;  border-color: #475569;       }
}
@keyframes hero-mark-read {
  0%, 56%   { opacity: 0; transform: scale(0.5); }
  60%, 90%  { opacity: 1; transform: scale(1);   }
  100%      { opacity: 0; transform: scale(0.5); }
}
@keyframes hero-strike-read {
  0%, 56%   { opacity: 1;    text-decoration: none;         }
  60%, 90%  { opacity: 0.55; text-decoration: line-through; }
  100%      { opacity: 1;    text-decoration: none;         }
}

/* ── Call Mom: ticks at 75% (ALL DONE!) ── */
@keyframes hero-tick-call {
  0%, 71%   { background: transparent;  border-color: #475569;       }
  75%, 90%  { background: var(--green); border-color: var(--green);  }
  100%      { background: transparent;  border-color: #475569;       }
}
@keyframes hero-mark-call {
  0%, 71%   { opacity: 0; transform: scale(0.5); }
  75%, 90%  { opacity: 1; transform: scale(1);   }
  100%      { opacity: 0; transform: scale(0.5); }
}
@keyframes hero-strike-call {
  0%, 71%   { opacity: 1;    text-decoration: none;         }
  75%, 90%  { opacity: 0.55; text-decoration: line-through; }
  100%      { opacity: 1;    text-decoration: none;         }
}

/* ─────────── Sections ─────────── */
.section { padding: 5rem 0; position: relative; }
.section-tint { background: var(--surface-1); }

.section-head {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 680px;
  margin-left: auto; margin-right: auto;
}
.section-eyebrow {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: rgba(167,139,250,0.10);
  border: 1px solid rgba(167,139,250,0.22);
  color: #c4b5fd;
  border-radius: 999px;
  font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 0.9rem;
}
.section-title {
  font-size: clamp(1.8rem, 3.4vw, 2.55rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 0.7rem;
}
.section-sub {
  font-size: 1.05rem;
  color: var(--text-dim);
}

/* ─────────── Features grid ─────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
.feature {
  padding: 1.6rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.18s ease, border-color 0.18s, background 0.18s;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: var(--border-2);
  background: var(--surface-3);
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.feature-icon svg { width: 22px; height: 22px; }
/* Sync's icon needs more horizontal room than 44px for its three
 * devices — widen the container to fit a 64×44 SVG comfortably. */
.feature-icon.icon-wide { width: 100px; }
.feature-icon.icon-wide svg { width: 84px; height: 44px; }
.icon-orange { background: rgba(251,146,60,0.12);  color: var(--orange); }
.icon-blue   { background: rgba(59,130,246,0.12);  color: #93c5fd; }
.icon-purple { background: rgba(167,139,250,0.12); color: #c4b5fd; }
.icon-green  { background: rgba(16,185,129,0.12);  color: #6ee7b7; }
.icon-cyan   { background: rgba(34,211,238,0.12);  color: #67e8f9; }
/* Amber variant for the active-reminder bell — matches the golden bell
 * the product itself shows when a reminder is armed (see task.html's
 * .bell-icon.bell-on amber state). Distinct enough from .icon-orange
 * (which is more red-tinted for the flame) that the two cards don't
 * read as the same colour. */
.icon-amber  { background: rgba(245,158,11,0.12);  color: #fbbf24; }

/* ─────────── Download section ───────────
 * Four platform cards. Windows is live (a real .exe download); macOS /
 * iOS / Android show an "On the way" badge. The CTA/badge is pinned to
 * the card bottom (margin-top:auto) so all four align regardless of how
 * much copy each card carries. */
.download-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
}
.download-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.9rem 1.3rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.18s ease, border-color 0.18s, background 0.18s;
}
.download-card.is-ready:hover {
  transform: translateY(-3px);
  border-color: var(--border-2);
  background: var(--surface-3);
}
/* Coming-soon cards read as present-but-not-yet — dimmed, no hover lift. */
.download-card.is-soon { opacity: 0.7; }
.download-os-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3);
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.download-os-icon svg { width: 28px; height: 28px; }
/* The live platform gets the brand-green icon treatment to draw the eye. */
.download-card.is-ready .download-os-icon {
  background: rgba(34,197,94,0.12);
  color: #6ee7b7;
}
.download-os-name { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.download-os-meta {
  font-size: 0.82rem; color: var(--text-dimmer);
  margin-top: 0.3rem; min-height: 1.1em;
}
/* Every card carries exactly one meta line (Windows shows the version, the
 * others a non-breaking space), so the rows below it line up without
 * margin-top:auto — a fixed gap keeps the CTA/badge clear of the meta. */
.download-cta.btn { width: 100%; margin-top: 1.4rem; }
.download-soon {
  margin-top: 1.4rem;
  display: inline-block;
  padding: 0.55rem 1rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-dim);
  background: var(--surface-1);
  border: 1px dashed var(--border-2);
  border-radius: 999px;
}
/* Small reassurance under the Windows button — the .exe is unsigned for now,
 * so Chrome/SmartScreen show an "unknown publisher" prompt on first run. */
.download-hint {
  margin-top: 0.8rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-dimmer);
  max-width: 15rem;
}
.download-note {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.88rem;
  color: var(--text-dim);
}
/* "web app" link inside the note — brand-green so it reads as the clickable
 * escape hatch when no native build exists for the visitor's platform. */
.download-note a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.download-note a:hover { color: #4ade80; }

/* ─────────── Feature-icon micro-animations ───────────
 * Each card's icon gets a thematic subtle motion so the grid reads as
 * alive, not as 6 flat badges. All are pure CSS; the catch-all
 * prefers-reduced-motion rule near the end of this file kills them
 * for users who've opted out of motion. */

/* 1. Streaks — five day-cells fill left-to-right with the actual
 * product's green gradient, while the flame at the right grows brighter
 * + slightly larger as each cell fills. Loop resets in lock-step (all
 * cells go empty together) so we never get a "broken" partial state.
 * The flame-flicker keyframes are kept in case .icon-orange is reused
 * by another card later. */
@keyframes flame-flicker {
  0%   { transform: scale(1, 1)        skewX(0);     }
  50%  { transform: scale(1.04, 1.10)  skewX(-2deg); }
  100% { transform: scale(1.02, 1.06)  skewX(1.5deg);}
}
.icon-orange svg {
  transform-origin: 50% 95%;          /* anchor at the flame's base */
  animation: flame-flicker 1.4s ease-in-out infinite alternate;
}
/* Streaks card layout — the badge itself reads as a small calendar
 * page (two orange binding-hole dots near the top) so the visual
 * metaphor matches the feature. Inside: 4 day-cells + an X/Y counter.
 * Cells appear PROGRESSIVELY (one new day per state) and tick green
 * one by one; the counter on the right shows the running tally.
 *   8-state narrative on an 8 s cycle (1 s per state):
 *      0/1 → 1/1 → 1/2 → 2/2 → 2/3 → 3/3 → 3/4 → 4/4
 *   reading as "completed days / streak target". The denominator
 *   grows because each "day" adds a new cell; the numerator catches
 *   up when that day's task gets done. */
.feature-icon.icon-streak {
  width: 128px;
  justify-content: center;
  /* Top padding clears the header strip; bottom padding keeps cells
   * just above the badge's bottom edge. */
  padding: 13px 8px 5px;
  position: relative;
  overflow: visible;             /* let the binding rings poke ABOVE */
  /* No extra margin-top — the .feature article already has 1.6 rem of
   * top padding, which is far more than the 7 px the rings extend
   * above the badge. The badge box itself stays aligned with the
   * other 5 feature-card icons. */
}
/* Two binding rings sticking UP from the top edge of the badge —
 * little vertical orange rounded-rect tabs, instantly readable as a
 * wall-calendar's binding loops. Sized + positioned to look like the
 * top of a flip calendar. */
.feature-icon.icon-streak::before,
.feature-icon.icon-streak::after {
  content: '';
  position: absolute;
  top: -7px;
  width: 4px;
  height: 11px;
  background: var(--orange);
  border-radius: 2px;
  opacity: 0.9;
  z-index: 2;                    /* over the header strip below */
}
.feature-icon.icon-streak::before { left: 26px; }
.feature-icon.icon-streak::after  { right: 26px; }
/* Calendar header strip — a darker orange band across the top of the
 * badge that mimics the "month title" area on a wall calendar. Sits
 * BENEATH the binding rings (rings are z-index 2, this is default
 * stacking). Rounded top corners match the badge's own corner radius. */
.streak-cal-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 11px;
  background: rgba(251,146,60,0.30);
  border-radius: 10px 10px 0 0;
}
.streak-demo {
  display: flex; align-items: center; gap: 8px;
}
.streak-cells {
  display: inline-flex; gap: 3px;
}
.streak-cell {
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1.2px solid #475569;
  background: transparent;
  position: relative;
  opacity: 0;             /* default hidden; per-cell animation fades in */
}
.streak-cell::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/72% no-repeat;
  opacity: 0;
  transform: scale(0.5);
}
/* X/Y counter — a vertical scroller with 8 stops, one per state. */
.streak-counter {
  width: 28px;
  height: 16px;
  overflow: hidden;
  position: relative;
}
.streak-counter-inner {
  display: flex;
  flex-direction: column;
  animation: streak-counter-cycle 8s infinite;
}
.streak-counter-inner > span {
  height: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
/* Per-cell schedules sharing one 8 s wall-clock cycle, each timed so
 * that at the cycle moment the counter shows "X/N", the corresponding
 * cells (1..N) are visible and the first X of them are green. */
.streak-cell:nth-child(1)        { animation: streak-cell-1 8s ease-in-out infinite; }
.streak-cell:nth-child(1)::after { animation: streak-mark-1 8s ease-in-out infinite; }
.streak-cell:nth-child(2)        { animation: streak-cell-2 8s ease-in-out infinite; }
.streak-cell:nth-child(2)::after { animation: streak-mark-2 8s ease-in-out infinite; }
.streak-cell:nth-child(3)        { animation: streak-cell-3 8s ease-in-out infinite; }
.streak-cell:nth-child(3)::after { animation: streak-mark-3 8s ease-in-out infinite; }
.streak-cell:nth-child(4)        { animation: streak-cell-4 8s ease-in-out infinite; }
.streak-cell:nth-child(4)::after { animation: streak-mark-4 8s ease-in-out infinite; }

/* Cell 1: visible empty by 6%, ticks green at 14% (state "1/1"),
 *         stays green to 92%, fades out 96-100% for clean loop. */
@keyframes streak-cell-1 {
  0%,  3%   { opacity: 0; background: transparent; border-color: #475569; }
  6%, 11%   { opacity: 1; background: transparent; border-color: #475569; }
  14%, 92%  { opacity: 1; background: linear-gradient(135deg, #4ADE80, #15803D); border-color: transparent; }
  96%, 100% { opacity: 0; background: transparent; border-color: #475569; }
}
@keyframes streak-mark-1 {
  0%, 11%   { opacity: 0; transform: scale(0.5); }
  14%, 92%  { opacity: 1; transform: scale(1);   }
  96%, 100% { opacity: 0; transform: scale(0.5); }
}
/* Cell 2: appears empty at 25% (state "1/2"), ticks green at 39%
 *         (state "2/2"), stays green to 92%. */
@keyframes streak-cell-2 {
  0%, 22%   { opacity: 0; background: transparent; border-color: #475569; }
  25%, 36%  { opacity: 1; background: transparent; border-color: #475569; }
  39%, 92%  { opacity: 1; background: linear-gradient(135deg, #4ADE80, #15803D); border-color: transparent; }
  96%, 100% { opacity: 0; background: transparent; border-color: #475569; }
}
@keyframes streak-mark-2 {
  0%, 36%   { opacity: 0; transform: scale(0.5); }
  39%, 92%  { opacity: 1; transform: scale(1);   }
  96%, 100% { opacity: 0; transform: scale(0.5); }
}
/* Cell 3: appears empty at 50% (state "2/3"), ticks green at 64%
 *         (state "3/3"), stays green to 92%. */
@keyframes streak-cell-3 {
  0%, 47%   { opacity: 0; background: transparent; border-color: #475569; }
  50%, 61%  { opacity: 1; background: transparent; border-color: #475569; }
  64%, 92%  { opacity: 1; background: linear-gradient(135deg, #4ADE80, #15803D); border-color: transparent; }
  96%, 100% { opacity: 0; background: transparent; border-color: #475569; }
}
@keyframes streak-mark-3 {
  0%, 61%   { opacity: 0; transform: scale(0.5); }
  64%, 92%  { opacity: 1; transform: scale(1);   }
  96%, 100% { opacity: 0; transform: scale(0.5); }
}
/* Cell 4: appears empty at 75% (state "3/4"), ticks green at 89%
 *         (state "4/4"), brief celebration window before reset. */
@keyframes streak-cell-4 {
  0%, 72%   { opacity: 0; background: transparent; border-color: #475569; }
  75%, 86%  { opacity: 1; background: transparent; border-color: #475569; }
  89%, 94%  { opacity: 1; background: linear-gradient(135deg, #4ADE80, #15803D); border-color: transparent; }
  98%, 100% { opacity: 0; background: transparent; border-color: #475569; }
}
@keyframes streak-mark-4 {
  0%, 86%   { opacity: 0; transform: scale(0.5); }
  89%, 94%  { opacity: 1; transform: scale(1);   }
  98%, 100% { opacity: 0; transform: scale(0.5); }
}
/* Counter scroller — 8 stops × 12.5% each. Each stop dwells ~10%
 * (cell ticks happen DURING the next state's transition window),
 * transition ~2.5%. */
@keyframes streak-counter-cycle {
  0%,    10%   { transform: translateY(0);     }
  12.5%, 22%   { transform: translateY(-16px); }
  25%,   35%   { transform: translateY(-32px); }
  37.5%, 47%   { transform: translateY(-48px); }
  50%,   60%   { transform: translateY(-64px); }
  62.5%, 72%   { transform: translateY(-80px); }
  75%,   85%   { transform: translateY(-96px); }
  87.5%, 100%  { transform: translateY(-112px); }
}

/* 2. Multi-tick — a row of 4 product-style checkboxes that tick on
 * one-by-one. Each box matches the actual .app-check pixel-for-pixel
 * (same rounded corners, same green fill, same white check stroke
 * SVG), so the marketing card and the app share the exact same affordance.
 *
 * The four boxes share one 5s keyframe but each gets its own
 * animation-delay (+0.5s per box). Net effect: a left-to-right wave of
 * ticks, then a rest period with all four checked, then a wave of
 * resets in the same order. Reads as a habit being completed
 * throughout the day. */
/* Wider than the default icon area so the row [boxes · title · ×N]
 * fits without truncation. justify-content centres the row inside
 * the badge. */
.feature-icon.icon-checks {
  /* "Take medicine × 2" needs more horizontal room than the previous
   * label. Sized so the row fills the badge with proper visual weight
   * instead of floating in the middle — first cut was 168px but left
   * obvious dead space on both flanks. */
  width: 196px;
  justify-content: center;
  padding: 0 8px;
}
.multitick-demo {
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
/* The 2 checkboxes live in their own flex container so they stay
 * tight against each other while the parent gap separates them from
 * the task title. */
.mt-checks {
  display: inline-flex; gap: 4px;
}
.mt-task {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.mt-count {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 500;
}
/* Single wrapper for title + count so the strike renders as one line. */
.mt-title {
  display: inline-flex;
  align-items: baseline;
  animation: mt-strike-done 5s ease-in-out infinite;
}
/* Strike comes ON exactly when check 2 turns green and goes OFF when
 * both checks clear simultaneously — aligned to the new per-check
 * keyframes (check 1 green 15-85%, check 2 green 40-85%; both-green
 * overlap = 40-85%). Same dim-while-done treatment as the hero
 * mockup's demo-fade-title so the two animations read as one design
 * language. */
@keyframes mt-strike-done {
  0%, 35%   { opacity: 1;    text-decoration: none;          }
  40%, 85%  { opacity: 0.55; text-decoration: line-through;  }
  90%, 100% { opacity: 1;    text-decoration: none;          }
}
.mt-check {
  /* Larger than the actual product's .app-check.sm (14px) — the demo
   * card has plenty of horizontal room and the bigger boxes read
   * better at glance distance on the landing. */
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.4px solid #475569;
  background: transparent;
  position: relative;
  /* animation is set per :nth-child below — see comment block before
   * the @keyframes block for why we don't use a shared animation +
   * animation-delay. */
}
.mt-check::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/70% no-repeat;
  opacity: 0;
  transform: scale(0.5);
  /* animation set per :nth-child below */
}
/* Per-check schedules (NOT shared-animation + animation-delay). The
 * earlier delay-based approach gave each check its own independent
 * timeline, which let check 1 un-tick at 3.6 s while check 2 stayed
 * green until 4.6 s — a one-second window where ONLY the second box
 * was ticked. That's a state the real product never produces (boxes
 * are filled left-to-right), so it read as broken.
 *
 * Now both checks share one 5 s wall-clock cycle:
 *   0–15 %  both empty (idle baseline)
 *   15 %    check 1 ticks
 *   15–40 % only check 1 ticked
 *   40 %    check 2 ticks
 *   40–85 % BOTH ticked → text strikes through (mt-strike-done)
 *   85–100% both un-tick simultaneously, reset to empty for the next loop */
.mt-check:nth-child(1)        { animation: mt-tick-1 5s ease-in-out infinite; }
.mt-check:nth-child(1)::after { animation: mt-mark-1 5s ease-in-out infinite; }
.mt-check:nth-child(2)        { animation: mt-tick-2 5s ease-in-out infinite; }
.mt-check:nth-child(2)::after { animation: mt-mark-2 5s ease-in-out infinite; }
@keyframes mt-tick-1 {
  0%,  10%   { background: transparent;  border-color: #475569;       }
  15%, 85%   { background: var(--green); border-color: var(--green);  }
  90%, 100%  { background: transparent;  border-color: #475569;       }
}
@keyframes mt-tick-2 {
  0%,  35%   { background: transparent;  border-color: #475569;       }
  40%, 85%   { background: var(--green); border-color: var(--green);  }
  90%, 100%  { background: transparent;  border-color: #475569;       }
}
@keyframes mt-mark-1 {
  0%,  10%   { opacity: 0; transform: scale(0.5); }
  15%, 85%   { opacity: 1; transform: scale(1);   }
  90%, 100%  { opacity: 0; transform: scale(0.5); }
}
@keyframes mt-mark-2 {
  0%,  35%   { opacity: 0; transform: scale(0.5); }
  40%, 85%   { opacity: 1; transform: scale(1);   }
  90%, 100%  { opacity: 0; transform: scale(0.5); }
}

/* 3. Schedule — a small calendar icon sits next to a vertical pill
 * roller that cycles through the four schedule types the actual
 * product supports (TODAY · TOMORROW · MAR 15 · EVERY DAY). Each
 * pill's color treatment matches the live product's task-row pills
 * (.app-pill / .app-pill.warn) — when a user clicks through to the
 * app, the schedule pills on their tasks look immediately familiar.
 *
 * Layout: the icon container becomes a flex row [calendar · pill
 * window]. The pill window has overflow:hidden so only one pill is
 * visible at a time. The inner column stacks 5 pills (4 schedule
 * types + a duplicate of the first); a keyframe translates it upward
 * through each row, dwelling ~80% of each slice and gliding ~20%.
 * The 5th row exists so the final translateY position and the restart
 * position display the SAME visual — animation loop invisible. */
@keyframes calendar-bob {
  0%, 100% { transform: translateY(0);   }
  50%      { transform: translateY(-1.5px); }
}
/* Default purple-card SVG keeps the gentle bob, but the scheduling
 * card opts out (it has its own coordinated animation). The
 * .icon-schedule .schedule-calendar override below wins on
 * specificity. */
.icon-purple svg {
  animation: calendar-bob 3s ease-in-out infinite;
}
.feature-icon.icon-schedule {
  width: 144px;
  justify-content: center;
  padding: 0 8px;
}
.schedule-demo {
  display: flex; align-items: center; gap: 8px;
}
.schedule-calendar {
  width: 22px; height: 22px;
  flex-shrink: 0;
}
/* Calendar stays still in this card — the rolling pill is doing
 * the storytelling. */
.icon-schedule .schedule-calendar { animation: none; }
.schedule-roller {
  width: 96px;
  height: 26px;
  overflow: hidden;
  position: relative;
}
.schedule-roller-inner {
  display: flex;
  flex-direction: column;
  animation: schedule-cycle 12s infinite;
}
.schedule-pill {
  height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-radius: 6px;
  border: 1px solid;
  padding: 0 0.5rem;
  /* default blue/info — same palette as the product's stock pill */
  background: rgba(96,165,250,0.10);
  color: #93c5fd;
  border-color: rgba(96,165,250,0.20);
}
.schedule-pill.pill-warn {
  background: rgba(251,191,36,0.10);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.22);
}
.schedule-pill.pill-cyan {
  background: rgba(34,211,238,0.10);
  color: #67e8f9;
  border-color: rgba(34,211,238,0.22);
}
/* 5 stops × 100/5 = 20% each. Dwell ~16%, transition ~4%. */
@keyframes schedule-cycle {
  0%,   16%  { transform: translateY(0);     }
  20%,  36%  { transform: translateY(-26px); }
  40%,  56%  { transform: translateY(-52px); }
  60%,  76%  { transform: translateY(-78px); }
  80%, 100%  { transform: translateY(-104px); }
}

/* 4. Languages — vertical roller through all 6 supported languages,
 * styled like the in-app language switcher dropdown (square badge with
 * 1-2 char abbreviation + the local autonym alongside it).
 *
 * Layout: the icon container becomes a fixed-height window that masks
 * everything except one row. The inner <div> stacks seven rows (six
 * languages + a duplicate of the first); a keyframe animation translates
 * it upward through each row, dwelling ~80% of each slice and gliding
 * ~20%. The 7th row exists so the final translateY position and the
 * restart position display the same visual — the animation loop is
 * invisible. Without the duplicate the cycle would visibly snap from
 * Korean (-130px) back up to English (0px). */
.feature-icon.icon-lang {
  /* Wider than the default 44×44 to fit "Português" alongside the
   * badge without truncation. Left-aligned content so the badge
   * always sits in the same spot regardless of name length.
   * Asymmetric padding (12 left / 4 right) gives the badge proper
   * breathing room from the left edge — the first cut sat it 4 px
   * from the wall which felt cramped — without growing the right-side
   * dead space (longer autonyms like "Português" hit close to the
   * right edge, shorter ones like "EN/English" leave a clean trailing
   * area for the next row to slide into during the roller cycle). */
  width: 112px;
  justify-content: flex-start;
  padding: 0 4px 0 12px;
}
.lang-roller {
  width: 100%;
  height: 26px;
  overflow: hidden;
  position: relative;
}
.lang-roller-inner {
  display: flex;
  flex-direction: column;
  animation: lang-cycle 14s infinite;
}
.lang-item {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.lang-abv {
  width: 22px;
  height: 22px;
  background: rgba(16,185,129,0.18);
  color: #6ee7b7;
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.lang-name {
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
/* 7 stops × 2s each = 14s loop. Each stop's dwell ≈ 1.6s, transition
 * between stops ≈ 0.4s. Percentages = (stop_index × 100/7) for the END
 * of each dwell, and (stop_index × 100/7 + 2.86%) for the START of the
 * next dwell — so each language gets a clear pause before sliding. */
@keyframes lang-cycle {
  0%,     11.43% { transform: translateY(0);     }
  14.29%, 25.71% { transform: translateY(-26px); }
  28.57%, 40%    { transform: translateY(-52px); }
  42.86%, 54.29% { transform: translateY(-78px); }
  57.14%, 68.57% { transform: translateY(-104px);}
  71.43%, 82.86% { transform: translateY(-130px);}
  85.71%, 100%   { transform: translateY(-156px);}
}

/* 5. Sync — dots flow between the three devices. The left dot flows
 * phone → laptop; the right dot flows laptop → tablet. Staggered
 * starts so it doesn't look like a single line moving in lockstep. */
@keyframes sync-flow-l {
  0%   { transform: translateX(0); opacity: 0;   }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(-13px); opacity: 0; }
}
@keyframes sync-flow-r {
  0%   { transform: translateX(0); opacity: 0;   }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(13px); opacity: 0; }
}
.sync-dot-l { animation: sync-flow-l 2.2s ease-in-out infinite;        }
.sync-dot-r { animation: sync-flow-r 2.2s ease-in-out infinite 0.55s;  }

/* 6. Smart reminders — bell rings like the real product chime.
 *
 *   - The bell BODY (the .bell-body <g>) tilts left/right rapidly during
 *     the "ring" window, then rests for the rest of the cycle. Pivot is
 *     the bell's top so the swing reads as a hanging bell, not a
 *     spinning shape.
 *   - The two soundwave arcs (.bell-wave-l / -r) fade in only during the
 *     ring window so the bell looks silent in between rings — matches
 *     the "three rings, exactly when you need it" copy.
 *   - The whole icon gets a subtle drop-shadow during ringing for a
 *     glow-on-chime effect. */
@keyframes bell-ring {
  /* Rest position with a brief settle pause */
  0%, 60%, 100% { transform: rotate(0); }
  /* Three quick oscillations between ~63% and ~92% of the cycle */
  65% { transform: rotate(-14deg); }
  72% { transform: rotate(11deg);  }
  79% { transform: rotate(-9deg);  }
  86% { transform: rotate(6deg);   }
  92% { transform: rotate(-3deg);  }
}
@keyframes bell-wave {
  0%, 60%, 100% { opacity: 0; transform: scale(0.85); }
  68%, 88%       { opacity: 0.95; transform: scale(1); }
}
@keyframes bell-glow {
  0%, 60%, 100% { filter: drop-shadow(0 0 0 rgba(245,158,11,0)); }
  68%, 88%       { filter: drop-shadow(0 0 6px rgba(245,158,11,0.6)); }
}
.icon-amber .bell-body {
  transform-origin: 12px 4px;          /* top of the bell, swings like a pendulum */
  animation: bell-ring 3.2s ease-in-out infinite;
}
.icon-amber .bell-wave {
  transform-origin: 12px 6px;
  animation: bell-wave 3.2s ease-in-out infinite;
}
.icon-amber svg {
  animation: bell-glow 3.2s ease-in-out infinite;
}

/* ─── Bell as a clickable chime preview ───
 * The amber bell card doubles as a button: click it to hear the actual
 * two-tone product chime. Visual cues that it's interactive:
 *   - cursor: pointer
 *   - subtle hover-scale on the whole tile
 *   - a small ▶ pip in the bottom-right corner (always visible, not
 *     hover-only — mobile users need it too)
 *   - focus ring for keyboard users
 * The button is positioned (relative) so the .bell-play-pip can anchor
 * absolutely to its corner. */
.bell-chime-btn {
  /* Reset native button defaults but keep all .feature-icon / .icon-amber
   * tile geometry from above. */
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  /* Slight transition for the hover feedback. The icon's children
   * (.bell-body, .bell-wave) have their own infinite ring animations
   * which keep running through transform — no conflict. */
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.bell-chime-btn:hover {
  transform: scale(1.06);
  background: rgba(245,158,11,0.20);
  box-shadow: 0 4px 14px rgba(245,158,11,0.25);
}
.bell-chime-btn:active {
  transform: scale(0.97);
}
.bell-chime-btn:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 3px;
}
/* Small ▶ play pip in the bottom-right corner — pure CSS triangle so
 * we don't pay for another SVG. White-ish on an amber disc, sized so
 * it doesn't fight the bell for attention. */
.bell-play-pip {
  position: absolute;
  right: 4px; bottom: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fbbf24;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  pointer-events: none;        /* clicks pass through to the button */
}
.bell-play-pip::after {
  /* The ▶ triangle, slightly nudged right so it reads as centred-by-eye. */
  content: '';
  display: block;
  width: 0; height: 0;
  margin-left: 1.5px;
  border-left: 5px solid #1b1306;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
/* Active-chime state: while a click-played chime is sounding, swap the
 * relaxed 3.2 s ring loop for a punchier 1.4 s shake so the bell visibly
 * "responds" to the click. Removed by JS when the audio finishes. */
.bell-chime-btn.chiming .bell-body { animation-duration: 1.4s; }
.bell-chime-btn.chiming .bell-wave { animation-duration: 1.4s; }
.bell-chime-btn.chiming svg        { animation-duration: 1.4s; }

.feature-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.feature-body {
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ─────────── How it works ─────────── */
.how-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  counter-reset: how;
}
.how-step {
  position: relative;
  padding: 2rem 1.6rem 1.6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Step badges — same green gradient + shadow as .btn-primary so the
 * "1 / 2 / 3" circles read as part of the same brand action thread. */
.how-num {
  position: absolute;
  top: -22px; left: 1.6rem;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #4ADE80, #16A34A);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 6px 18px rgba(34,197,94,0.4);
}
.how-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: 0.4rem;
}
.how-step-body {
  font-size: 0.92rem;
  color: var(--text-dim);
}

/* (Old Free/Pro pricing-grid + price-card styles removed — the current
 * pricing section uses the simpler .pricing-pills layout below.) */

/* ─────────── FAQ ─────────── */
.faq-list { display: flex; flex-direction: column; gap: 0.7rem; }
.faq-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  transition: border-color 0.18s;
}
.faq-item[open] { border-color: var(--border-2); }
.faq-item summary {
  list-style: none;
  padding: 1.1rem 1.3rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--text-dim);
  font-weight: 400;
  line-height: 1;
  transition: transform 0.18s, color 0.18s;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--text); }
.faq-item p {
  padding: 0 1.3rem 1.2rem;
  color: var(--text-dim);
  font-size: 0.94rem;
}

/* ─────────── Final CTA ─────────── */
.cta-final {
  position: relative;
  text-align: center;
  /* Asymmetric vertical padding: keep generous top to separate from FAQ
   * above, but tighten the bottom so the footer doesn't feel marooned
   * in dead space below the "Start free →" button. */
  padding: 5rem 1.5rem 3.5rem;
  overflow: hidden;
}
.cta-final > .container { position: relative; z-index: 1; }
.cta-headline {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}
.cta-sub {
  font-size: 1.08rem;
  color: var(--text-dim);
  margin-bottom: 1.8rem;
  max-width: 540px;
  margin-left: auto; margin-right: auto;
}
/* ─────────── Footer ─────────── */
.footer {
  /* Tighter padding than before — the centered stacked layout below
   * doesn't need a lot of vertical room, and the previous 2.5/3 rem
   * combo made the footer feel like a separate island floating below
   * the CTA. */
  padding: 1.6rem 0 1.8rem;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
/* Footer is centered + stacked. The earlier "brand-left, links-right,
 * copyright on its own row" layout looked awkward on a short page —
 * lots of dead horizontal space and the links felt orphaned next to
 * the brand. Stacking everything centered makes the small footer
 * read as intentional, not unfinished. */
.footer-inner {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}
.footer-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
}
/* Bullet-separated links — visual rhythm + reads as one inline group. */
.footer-links {
  display: flex; align-items: center; gap: 1.2rem;
}
.footer-links a {
  color: var(--text-dim);
  font-size: 0.85rem;
  transition: color 0.15s;
  position: relative;
}
.footer-links a:hover { color: var(--text); }
.footer-links a + a::before {
  content: '·';
  position: absolute;
  left: -0.78rem;
  color: var(--text-dimmer);
  pointer-events: none;
}
.footer-copy {
  color: var(--text-dimmer);
  font-size: 0.75rem;
  margin-top: 0.4rem;
  letter-spacing: 0.2px;
}

/* ─────────── Pricing (single-message panel, no card grid) ─────────── */
.pricing-pills {
  list-style: none; padding: 0; margin: 1.8rem auto 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem;
  max-width: 760px;
}
.pricing-pills li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 999px;
  font-size: 0.85rem; color: var(--text);
  white-space: nowrap;
}
.pricing-pills .pill-check { color: #22c55e; font-weight: 700; }
.pricing-cta {
  margin-top: 2rem; text-align: center;
}

/* ─────────── Responsive ─────────── */
@media (max-width: 980px) {
  /* Hide the in-nav anchor list on mobile — the page is short, users
   * just scroll. Sign in + Get started stay in .nav-actions on the
   * right so the primary CTAs are always reachable. */
  .nav-links { display: none; }

  .feature-grid    { grid-template-columns: repeat(2, 1fr); }
  .download-grid   { grid-template-columns: repeat(2, 1fr); }
  .how-steps       { grid-template-columns: 1fr; gap: 1.2rem; }
}

@media (max-width: 760px) {
  .nav-actions .btn-ghost { display: none; }
  .nav-actions .lang-btn span { display: none; }

  .hero { padding: 2.5rem 0 3.5rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-copy { max-width: none; }
  .hero-headline span { display: inline; }
  .hero-headline { font-size: clamp(2rem, 7vw, 2.6rem); }

  .section { padding: 3.5rem 0; }
  .section-head { margin-bottom: 2.2rem; }

  .feature-grid { grid-template-columns: 1fr; }
  .download-grid { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { margin-left: 0; }
}

/* Reduced motion: kill all animations + transitions. (The .app-frame
 * tilt override is gone — the mockup is no longer tilted by default.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}