/* ═══════════════════════════════════════════════════════════
   Fitji beta landing page
   Design tokens per LANDING_BRIEF.md, beige/green/white/neutral only.

   Core principle for this design system:
   ELEVATION = INTERACTIVITY. Actionable things (buttons, nav CTA)
   are raised with shadow, an icon, and motion. Content panels stay
   flat with a hairline border so a button never reads as a card.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Palette (approved tokens only) ── */
  --fitji-bg-dark: #0e1614;
  --fitji-bg-green: #163329;

  --fitji-green: #3d6b5c;
  --fitji-green-deep: #2f5648;
  --fitji-green-soft: #e6eee9;
  --fitji-green-muted: #6f9185;

  --fitji-beige: #f8f3ec;
  --fitji-beige-warm: #f0ebe3;
  --fitji-surface: #ffffff;
  --fitji-surface-soft: #f3ede7;

  --fitji-text-dark: #1c2b2a;
  --fitji-text-soft: #4a5a58;
  --fitji-text-on-dark: #f8f3ec;
  --fitji-muted-on-dark: #c9d5cf;
  --fitji-border: #e4ddd5;

  /* Hairline borders used on dark sections */
  --hairline: rgba(201, 213, 207, 0.12);
  --hairline-strong: rgba(201, 213, 207, 0.2);

  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'Nunito Sans', 'DM Sans', system-ui, sans-serif;

  /* ── Elevation is reserved for interactive elements ── */
  --btn-shadow: 0 10px 24px -8px rgba(14, 22, 20, 0.55), 0 2px 6px rgba(14, 22, 20, 0.25);
  --btn-shadow-hover: 0 18px 36px -10px rgba(14, 22, 20, 0.6), 0 3px 8px rgba(14, 22, 20, 0.3);
  --panel-shadow: 0 1px 2px rgba(14, 22, 20, 0.18);

  --radius-panel: 26px;
  --radius-btn: 16px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1120px;
}

/* ═══════════════ Base ═══════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fitji-text-on-dark);
  background: var(--fitji-bg-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

:focus-visible {
  outline: 3px solid var(--fitji-green-muted);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--fitji-beige);
  color: var(--fitji-green);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}
.container.narrow { max-width: 740px; }

/* ═══════════════ Navigation ═══════════════ */
/* Fixed (out of flow, so toggling causes no layout shift). Hidden at the very
   top of the page; JS adds .is-visible once the user scrolls past a threshold. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(14, 22, 20, 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), visibility 0.3s;
}
.nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Anchored sections clear the revealed nav so their headings are not hidden */
:where(#get-the-beta, #how-it-works, #beta, #feedback) { scroll-margin-top: 88px; }
.nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
/* App icon mark (cleaned capybara icon, transparent rounded corners) */
.nav-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(14, 22, 20, 0.4);
}
.nav-logo-word {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--fitji-muted-on-dark);
  padding: 9px 14px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover {
  color: var(--fitji-text-on-dark);
  background: rgba(230, 238, 233, 0.08);
}

/* Nav CTA — elevated pill, clearly a control */
.btn-nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--fitji-beige);
  color: var(--fitji-green);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--btn-shadow);
  transition: transform 0.16s var(--ease-spring), box-shadow 0.18s, background 0.18s;
}
.btn-nav:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); background: var(--fitji-surface); }
.btn-nav:active { transform: translateY(0) scale(0.97); }

@media (min-width: 780px) { .nav-links { display: flex; } }

/* ═══════════════ Hero ═══════════════ */
.hero {
  position: relative;
  padding: 60px 0 80px;
}
/* Warm radial glow behind the hero — depth without new colors */
.hero::before {
  content: "";
  position: absolute;
  inset: -120px 0 auto 0;
  height: 620px;
  background:
    radial-gradient(760px 420px at 28% 8%, rgba(61, 107, 92, 0.4), transparent 68%),
    radial-gradient(620px 360px at 88% 0%, rgba(111, 145, 133, 0.22), transparent 66%);
  pointer-events: none;
  z-index: -1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

.hero-copy { text-align: center; }

.hero-logo {
  width: fit-content;
  margin: 0 auto 26px;
}
/* Official Fitji app icon as the hero brand mark. Stays static: no float, bob,
   or parallax (drop-shadow follows the icon's rounded transparent corners). */
.hero-logo-mark {
  width: 88px;
  height: 88px;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(14, 22, 20, 0.5));
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fitji-green-muted);
  background: rgba(230, 238, 233, 0.06);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 22px;
}

.hero-headline {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(40px, 7.5vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.headline-accent {
  background: linear-gradient(180deg, var(--fitji-beige), var(--fitji-green-muted));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fitji-green-muted);
}

.hero-description {
  max-width: 33em;
  margin: 0 auto 34px;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--fitji-muted-on-dark);
}

/* ── Platform beta buttons — the primary action ── */
.beta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
.beta-actions.centered { align-items: center; }

.btn-platform {
  --arrow-shift: 0px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--radius-btn);
  background: var(--fitji-surface);
  color: var(--fitji-green);
  text-decoration: none;
  box-shadow: var(--btn-shadow);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: transform 0.18s var(--ease-spring), box-shadow 0.2s, background 0.2s;
}
.btn-platform:hover {
  transform: translateY(-3px);
  box-shadow: var(--btn-shadow-hover);
  --arrow-shift: 4px;
}
.btn-platform:active { transform: translateY(-1px) scale(0.985); box-shadow: var(--btn-shadow); }
.btn-platform:focus-visible { outline-color: var(--fitji-beige); }

/* Leading platform icon sits in a green chip — a strong "this is an action" signifier */
.btn-platform__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--fitji-green-soft);
  color: var(--fitji-green);
}
.btn-platform__icon svg { width: 24px; height: 24px; fill: currentColor; }

.btn-platform__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.28;
  margin-right: auto;
  text-align: left;
}
.btn-platform__label { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.btn-platform__helper { font-size: 13px; font-weight: 500; color: var(--fitji-text-soft); }

.btn-platform__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--fitji-green-muted);
  transform: translateX(var(--arrow-shift));
  transition: transform 0.2s var(--ease-out);
}
.btn-platform__arrow svg { width: 22px; height: 22px; }

.beta-helper-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fitji-muted-on-dark);
  margin-top: 20px;
}
.beta-helper-text.centered { justify-content: center; width: 100%; }
.beta-helper-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fitji-green-muted);
  box-shadow: 0 0 0 0 rgba(111, 145, 133, 0.6);
  animation: pulseDot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@media (min-width: 520px) {
  .beta-actions { flex-direction: row; max-width: 580px; }
  .beta-actions.centered { flex-wrap: wrap; justify-content: center; }
  .btn-platform { flex: 1; min-width: 240px; }
}

/* ── Origin story — a flat aside, not a button ── */
.origin {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 580px;
  margin: 40px auto 0;
  padding: 20px 22px;
  border-radius: var(--radius-panel);
  background: rgba(240, 235, 227, 0.07);
  border: 1px solid var(--hairline-strong);
  text-align: left;
}
.origin-pacer {
  position: relative;
  width: 52px;
  height: 56px;
  flex-shrink: 0;
}
.origin-pacer__char { position: absolute; inset: 0; display: block; }
.origin-pacer__char svg { width: 100%; height: 100%; }
.origin-pacer__prints {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 4px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 15% 50%, var(--fitji-green-muted) 34%, transparent 36%),
    radial-gradient(circle at 50% 50%, var(--fitji-green-muted) 34%, transparent 36%),
    radial-gradient(circle at 85% 50%, var(--fitji-green-muted) 34%, transparent 36%);
  opacity: 0.5;
}
.origin-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fitji-green-muted);
  margin-bottom: 6px;
}
.origin-copy p { font-size: 15px; line-height: 1.62; color: var(--fitji-muted-on-dark); }
.origin-copy p + p { margin-top: 0.75em; }

/* ═══════════════ Hero visual (phone) ═══════════════ */
.hero-visual { display: none; }

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .hero-copy { text-align: left; }
  .hero-logo { margin: 0 0 28px; }
  .hero-description { margin-left: 0; }
  .beta-actions, .beta-actions.centered { margin-left: 0; justify-content: flex-start; }
  .beta-helper-text.centered, .beta-helper-text { justify-content: flex-start; }
  .origin { margin-left: 0; }
  .hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
}

.phone {
  position: relative;
  width: 300px;
  border-radius: 42px;
  background: linear-gradient(160deg, #1b3a30, #0f221c);
  padding: 12px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--hairline-strong);
  animation: phoneFloat 6s ease-in-out infinite;
}
.phone__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 22px;
  background: #0f221c;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.phone__screen {
  border-radius: 32px;
  background: var(--fitji-beige-warm);
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.phone__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 4px;
}
.phone__time { font-size: 12px; font-weight: 700; color: var(--fitji-text-dark); }
.phone__signal {
  width: 26px; height: 10px;
  border-radius: 3px;
  background: var(--fitji-green-muted);
  opacity: 0.5;
}
.phone__greeting { display: flex; align-items: center; gap: 10px; }
.phone__avatar {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--fitji-surface);
  display: grid; place-items: center;
  box-shadow: var(--panel-shadow);
}
.phone__avatar svg { width: 28px; height: 28px; }
.phone__greeting-text { display: flex; flex-direction: column; line-height: 1.2; }
.phone__greeting-text b { font-family: var(--font-heading); font-size: 14px; color: var(--fitji-text-dark); }
.phone__greeting-text i { font-style: normal; font-size: 12px; color: var(--fitji-text-soft); }

.phone__ring-card {
  position: relative;
  background: var(--fitji-surface);
  border-radius: 20px;
  padding: 16px;
  display: grid;
  place-items: center;
  box-shadow: var(--panel-shadow);
}
.phone__ring { width: 132px; height: 132px; }
.phone__ring-fill {
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
}
.phone__ring-card.in .phone__ring-fill {
  transition: stroke-dashoffset 1.6s var(--ease-out) 0.2s;
  stroke-dashoffset: 92; /* ~68% */
}
.phone__ring-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.phone__ring-center b { font-family: var(--font-heading); font-weight: 900; font-size: 26px; color: var(--fitji-text-dark); }
.phone__ring-center i { font-style: normal; font-size: 11px; color: var(--fitji-text-soft); margin-top: 2px; }

.phone__section-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fitji-text-soft);
  padding: 0 2px;
}
.phone__mission {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fitji-surface);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--panel-shadow);
}
.phone__mission-dot {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--fitji-green-soft);
  flex-shrink: 0;
}
.phone__mission-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.phone__mission-row { display: flex; align-items: center; justify-content: space-between; }
.phone__mission-row i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--fitji-text-dark); }
.phone__mission-row b { font-size: 11px; font-weight: 700; color: var(--fitji-green); }

.phone__bar {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: rgba(28, 43, 42, 0.09);
  overflow: hidden;
}
.phone__bar.sm { height: 6px; }
.phone__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--fitji-green);
}
.phone__screen.in .phone__bar-fill {
  width: var(--to);
  transition: width 1.1s var(--ease-out) 0.4s;
}

.phone__egg-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fitji-green-soft);
  border-radius: 16px;
  padding: 12px;
}
.phone__egg { width: 38px; flex-shrink: 0; }
.phone__egg-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.phone__egg-text b { font-family: var(--font-heading); font-size: 13px; color: var(--fitji-green-deep); }

/* Floating chips around the phone */
.float-chip {
  position: absolute;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--fitji-beige);
  color: var(--fitji-green);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--btn-shadow);
  white-space: nowrap;
}
.float-chip--a { top: 12%; right: 2%; animation: floatChip 5s ease-in-out infinite; }
.float-chip--b { bottom: 16%; left: 0%; animation: floatChip 5.6s ease-in-out infinite 0.6s; }

/* ═══════════════ Section scaffolding ═══════════════ */
.section { padding: 84px 0; }
.beta-section { padding-top: 48px; }

.section-head { margin-bottom: 12px; }
.section-head.centered { text-align: center; }
.section-head.centered .section-kicker { margin-left: auto; margin-right: auto; }

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fitji-green-muted);
  margin-bottom: 14px;
}
.section-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--fitji-green-muted);
}

.section-headline {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(27px, 4.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.015em;
}
.section-headline.centered { text-align: center; }

.section-body {
  font-size: 17px;
  color: var(--fitji-muted-on-dark);
  max-width: 44em;
  margin-top: 16px;
}
.section-body.centered { text-align: center; margin-left: auto; margin-right: auto; }

/* ── Beta notice ── */
.notice {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  padding: 24px 26px;
  border-radius: var(--radius-panel);
  background: var(--fitji-beige);
  color: var(--fitji-text-soft);
  border: 1px solid var(--fitji-border);
  box-shadow: var(--panel-shadow);
}
.notice__mark {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--fitji-surface-soft);
  display: grid; place-items: center;
}
.notice__mark svg { width: 30px; height: 30px; }
.notice__body p { font-size: 16px; }
.notice__body strong { color: var(--fitji-green); }
.notice__feedback {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--fitji-border);
}

/* ═══════════════ How it works — numbered steps ═══════════════ */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 40px;
  counter-reset: step;
}
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--radius-panel);
  background: var(--fitji-beige);
  color: var(--fitji-text-dark);
  border: 1px solid var(--fitji-border);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}
.step__num {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 15px;
  color: var(--fitji-green-muted);
  opacity: 0.55;
  letter-spacing: 0.05em;
}
.step__art {
  height: 84px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 18px;
  background: var(--fitji-surface-soft);
}
.step__art svg { width: 120px; height: 76px; }
.step__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 21px;
  margin-bottom: 6px;
}
.step__body { font-size: 15px; line-height: 1.6; color: var(--fitji-text-soft); }

/* ═══════════════ Why Fitji ═══════════════ */
.why-section {
  background: var(--fitji-bg-green);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}
.benefit-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fitji-text-on-dark);
}
.benefit-tick {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(230, 238, 233, 0.1);
  border: 1px solid var(--hairline-strong);
  position: relative;
}
.benefit-tick::after {
  content: "";
  position: absolute;
  left: 9px; top: 6px;
  width: 6px; height: 11px;
  border: solid var(--fitji-green-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media (min-width: 620px) {
  .benefit-list { flex-direction: row; flex-wrap: wrap; gap: 12px 26px; }
}

/* ═══════════════ App preview ═══════════════ */
.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 40px;
}
@media (min-width: 640px) { .preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .preview-grid { grid-template-columns: repeat(3, 1fr); } }

/* Mobile: turn the app preview panels into a snap carousel you can swipe.
   Cards snap to center with the next one peeking, hinting it scrolls. */
@media (max-width: 639px) {
  .preview-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
    /* Bleed to the screen edges, then re-pad so the first/last cards align */
    margin-inline: -22px;
    padding: 6px 22px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .preview-grid::-webkit-scrollbar { display: none; }
  .preview-grid > .preview {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }
  /* Cards live in a horizontal scroller, so the vertical reveal observer
     would hide peeking/off-screen cards. Keep them fully rendered here.
     (transition:none is required: a running reveal transition otherwise
     wins the cascade and pins opacity at 0.) */
  .preview-grid > .preview.reveal { opacity: 1; transform: none; transition: none; }
  .preview-grid > .preview .preview__fill { width: var(--to); }
}

.panel {
  padding: 18px 18px 24px;
  border-radius: var(--radius-panel);
  background: var(--fitji-beige);
  color: var(--fitji-text-dark);
  border: 1px solid var(--fitji-border);
  box-shadow: var(--panel-shadow);
}
/* Preview cards: flex column so the screen fills equal-height cards and
   the three titles line up without the content overflowing. */
.preview { display: flex; flex-direction: column; }
.panel__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  margin: 16px 0 6px;
}
.panel__body { font-size: 15px; line-height: 1.6; color: var(--fitji-text-soft); }

.preview__screen {
  border-radius: 18px;
  background: var(--fitji-surface);
  border: 1px solid var(--fitji-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 0 auto; /* fill equal-height cards so the three titles align */
  min-height: 176px;
}
.preview__row { display: flex; align-items: center; gap: 8px; }
.preview__chip-dot {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--fitji-green-soft);
  flex-shrink: 0;
}
.preview__chip-dot.round { border-radius: 50%; }
.skel { display: block; height: 8px; border-radius: 99px; background: var(--fitji-surface-soft); }
.w30 { width: 30%; } .w40 { width: 40%; } .w60 { width: 60%; }

.preview__block {
  border-radius: 14px;
  background: var(--fitji-surface-soft);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preview__block--row { flex-direction: row; align-items: center; gap: 10px; }
.preview__label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fitji-text-soft);
}
.preview__track {
  height: 8px;
  border-radius: 99px;
  background: rgba(28, 43, 42, 0.08);
  overflow: hidden;
}
.preview__fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--fitji-green); }
.preview.in .preview__fill { width: var(--to); transition: width 1s var(--ease-out) 0.15s; }

.preview__egg { width: 34px; flex-shrink: 0; }
.preview__col { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.preview__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preview__item {
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--fitji-surface-soft);
  border: 1px solid var(--fitji-border);
}
.preview__item.alt { background: var(--fitji-green-soft); }

.preview__pill {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--fitji-green-soft);
  color: var(--fitji-green);
  font-size: 12px;
  font-weight: 600;
}
.preview__vote-row { display: flex; align-items: center; gap: 10px; }
.preview__vote {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--fitji-green);
  color: var(--fitji-beige);
  font-size: 12px;
  font-weight: 700;
}
.preview__vote-row .skel { flex: 1; background: rgba(28, 43, 42, 0.08); }

/* ═══════════════ Feedback ═══════════════ */
.feedback-section {
  background: var(--fitji-bg-green);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pullquote {
  margin-top: 26px;
  padding: 20px 24px;
  border-left: 3px solid var(--fitji-green-muted);
  border-radius: 0 16px 16px 0;
  background: rgba(230, 238, 233, 0.06);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.4;
  color: var(--fitji-text-on-dark);
}

/* ═══════════════ Final CTA ═══════════════ */
.cta-section { padding-bottom: 96px; }
.cta-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 44px;
  border-radius: 34px;
  text-align: center;
  background:
    radial-gradient(600px 300px at 50% -40px, rgba(61, 107, 92, 0.5), transparent 70%),
    var(--fitji-bg-green);
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
}
/* overflow:visible lets the egg's idle bob render above the SVG box without
   clipping (the SVG viewport clips by default). The card keeps enough top
   padding that the lifted egg never reaches the card edge. */
.cta-egg { display: inline-block; width: 64px; height: 70px; margin-bottom: 8px; overflow: visible; }
.cta-egg svg { overflow: visible; }
.cta-card .beta-actions { margin-top: 30px; }
.cta-card .beta-helper-text { margin-top: 20px; }

/* ═══════════════ Footer ═══════════════ */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 48px 0 36px;
}
.footer-inner { display: flex; flex-direction: column; gap: 28px; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
/* Wrapper is transparent on desktop (links/sleeper stay direct flex items,
   spread out as before). On mobile it groups them onto one line together. */
.footer-nav { display: contents; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-right: auto;
}
@media (max-width: 640px) {
  .footer-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-right: auto;
    min-width: 0;
  }
  .footer-nav .footer-links { margin-right: 0; flex-wrap: nowrap; min-width: 0; }
  .footer-nav .footer-links a { padding-left: 9px; padding-right: 9px; }
  .footer-sleeper { width: 50px; }
}
.footer-links a {
  text-decoration: none;
  font-size: 15px;
  color: var(--fitji-muted-on-dark);
  padding: 7px 12px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.footer-links a:hover { color: var(--fitji-text-on-dark); background: rgba(230, 238, 233, 0.08); }
.footer-sleeper { width: 64px; flex-shrink: 0; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.footer-credit { font-size: 15px; font-weight: 600; color: var(--fitji-text-on-dark); }
.footer-meta { font-size: 14px; color: var(--fitji-muted-on-dark); }

/* ═══════════════ Toast ═══════════════ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 440px);
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--fitji-beige);
  color: var(--fitji-text-dark);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6);
  animation: toastIn 0.28s var(--ease-spring) both;
}
.toast[hidden] { display: none; }
.toast__icon { width: 30px; height: 30px; flex-shrink: 0; }
.toast p { font-size: 14px; font-weight: 500; line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════
   Animations — cozy, brand-fit, decorative only
   ═══════════════════════════════════════════════════════════ */

/* Hero + CTA egg: idle bob, with a periodic blink and pre-hatch shiver */
[data-egg] .egg-body { animation: eggBob 3.6s ease-in-out infinite; transform-origin: 50% 80%; }
[data-egg] .egg-shadow { animation: eggShadow 3.6s ease-in-out infinite; transform-origin: 50% 50%; }
[data-egg] .egg-eyes { animation: blink 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
[data-egg] .egg-body { animation: eggBob 3.6s ease-in-out infinite, eggShiver 7s ease-in-out infinite; }

@keyframes eggBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(0deg); }
}
@keyframes eggShiver {
  0%, 84%, 100% { rotate: 0deg; }
  88% { rotate: -5deg; }
  92% { rotate: 5deg; }
  96% { rotate: -3deg; }
}
@keyframes eggShadow {
  0%, 100% { transform: scaleX(1); opacity: 0.4; }
  50%      { transform: scaleX(0.84); opacity: 0.28; }
}
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(0.12); }
}

/* Pacing character in the origin story: walk back and forth + footstep flicker */
[data-pacer] .origin-pacer__char { animation: pace 4.6s ease-in-out infinite; }
[data-pacer] .pacer-body { animation: paceBob 0.9s ease-in-out infinite; transform-origin: 50% 80%; }
[data-pacer] .foot-l { animation: footL 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
[data-pacer] .foot-r { animation: footR 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
[data-pacer] .origin-pacer__prints { animation: prints 4.6s ease-in-out infinite; }

@keyframes pace {
  0%, 44%   { transform: translateX(0) scaleX(1); }
  50%       { transform: translateX(4px) scaleX(-1); }
  94%, 100% { transform: translateX(0) scaleX(-1); }
}
@keyframes paceBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes footL {
  0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(22deg); }
}
@keyframes footR {
  0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-22deg); }
}
@keyframes prints {
  0%, 100% { opacity: 0.15; } 50% { opacity: 0.6; }
}

/* Phone hero: gentle float + floating chips + mini egg wobble + crack glow */
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-0.6deg); }
}
@keyframes floatChip {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
[data-egg-mini] svg { animation: miniWobble 2.8s ease-in-out infinite; transform-origin: 50% 85%; }
.phone__egg-crack { animation: crackGlow 2.8s ease-in-out infinite; }
@keyframes miniWobble {
  0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); }
}
@keyframes crackGlow {
  0%, 100% { opacity: 0.35; } 50% { opacity: 1; }
}

/* How-it-works micro-motion (plays while the card is in view) */
/* Nurture: companion breathes, heart drifts up and fades */
.step.in .nurture-buddy { animation: buddyBreathe 3s ease-in-out infinite; transform-origin: 40px 46px; }
.nurture-heart { opacity: 0; }
.step.in .nurture-heart { animation: heartFloat 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
/* Play: ball bounces, sparkles twinkle */
.step.in .play-ball { animation: hop 1.3s ease-in-out infinite; transform-origin: 40px 43px; }
.play-sparks .spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.step.in .play-sparks .spark { animation: twinkle 1.9s ease-in-out infinite; }
.step.in .play-sparks .spark--b { animation-delay: 0.65s; }
@keyframes buddyBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes heartFloat {
  0%   { opacity: 0; transform: translateY(5px) scale(0.6); }
  25%  { opacity: 1; }
  55%  { transform: translateY(-3px) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.9); }
}
@keyframes hop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-9px); } }
@keyframes twinkle { 0%,100% { opacity: 0.25; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }

/* Move card: footprints light up one after another along the path (walking).
   Opacity-only so each print keeps its baked SVG rotation. */
.walk-prints .fp { opacity: 0; }
.step.in .walk-prints .fp { animation: footstep 3s ease-in-out infinite; }
.step.in .walk-prints .fp:nth-child(1) { animation-delay: 0s; }
.step.in .walk-prints .fp:nth-child(2) { animation-delay: 0.28s; }
.step.in .walk-prints .fp:nth-child(3) { animation-delay: 0.56s; }
.step.in .walk-prints .fp:nth-child(4) { animation-delay: 0.84s; }
.step.in .walk-prints .fp:nth-child(5) { animation-delay: 1.12s; }
.step.in .walk-prints .fp:nth-child(6) { animation-delay: 1.4s; }
.step.in .walk-prints .fp:nth-child(7) { animation-delay: 1.68s; }
@keyframes footstep {
  0%        { opacity: 0; }
  10%       { opacity: 1; }
  55%       { opacity: 1; }
  75%, 100% { opacity: 0; }
}

/* Footer sleeper: slow breathe + drifting Zs */
.footer-sleeper .sleeper-body { animation: buddyBreathe 4s ease-in-out infinite; transform-origin: 34px 40px; }
.footer-sleeper .sleeper-z { animation: zDrift 3.2s ease-in-out infinite; }
@keyframes zDrift {
  0%   { opacity: 0; transform: translateY(4px); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* Helper "live" dot */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 145, 133, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(111, 145, 133, 0); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 14px) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ── Scroll reveal (staggered within a group) ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.steps .reveal:nth-child(2), .preview-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.steps .reveal:nth-child(3), .preview-grid .reveal:nth-child(3) { transition-delay: 0.16s; }

/* ═══════════════════════════════════════════════════════════
   Scroll-driven enhancements (progressive)

   These use native CSS scroll-driven animations (animation-timeline).
   Where the browser does not support them they simply do nothing and
   the page stays fully usable. Everything here is gated behind
   prefers-reduced-motion: no-preference, so reduced-motion users get
   the static layout with no scrubbing or parallax.
   ═══════════════════════════════════════════════════════════ */

/* Thin reading-progress bar pinned to the top of the viewport */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--fitji-green-muted), var(--fitji-beige));
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Progress bar scrubs with the document scroll position */
    .scroll-progress {
      animation: scrollProgress linear both;
      animation-timeline: scroll(root block);
    }

    /* Hero parallax: the phone drifts up and the glow settles as you
       scroll past the hero, giving depth without a heavy library. */
    .hero-visual {
      animation: parallaxRise linear both;
      animation-timeline: scroll(root);
      animation-range: 0 78vh;
    }
    .hero::before {
      animation: parallaxGlow linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    /* Origin-story character drifts gently as the aside enters view */
    .origin-pacer {
      animation: parallaxPacer linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 48%;
    }

    /* Final CTA egg eases into focus as its card scrolls into view */
    .cta-egg {
      animation: eggFocusIn linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
  }
}

@keyframes scrollProgress { to { transform: scaleX(1); } }
@keyframes parallaxRise { to { transform: translateY(-42px); } }
@keyframes parallaxGlow { to { transform: translateY(80px); opacity: 0.25; } }
@keyframes parallaxPacer { from { transform: translateY(14px); } to { transform: translateY(-8px); } }
@keyframes eggFocusIn {
  from { opacity: 0; transform: translateY(26px) scale(0.82); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════ Reduced motion ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .phone__ring-fill { stroke-dashoffset: 92; }
  .phone__bar-fill, .preview__fill { width: var(--to); }
  /* Never leave the CTA egg stuck invisible if scrubbing is off */
  .cta-egg { opacity: 1; transform: none; }
  /* Move card: show the full footprint trail statically instead of animating */
  .walk-prints .fp { opacity: 1 !important; }
  /* Show the new card art statically (no float/twinkle) under reduced motion */
  .nurture-heart, .play-sparks .spark { opacity: 1 !important; transform: none !important; }
}