/* ============================================================
   Build — marketing site styles
   Light theme, electric-blue accent. Tokens mirror constants/theme.ts.
   Shared by index.html, privacy.html, terms.html, support.html.
   ============================================================ */

:root {
  --bg: #ffffff;
  --surface: #f6f8fb;
  --surface-elevated: #ffffff;
  --surface-high: #eef1f5;
  --border: #e7eaee;
  --border-strong: #d6dae0;

  --accent: #0d7bff;
  --accent-light: #0a5fcc; /* darker so it stays legible on white */
  --accent-soft: rgba(13, 123, 255, 0.1);
  --accent-soft-strong: rgba(13, 123, 255, 0.16);

  --text-primary: #0a0c10;
  --text-secondary: #545b65;
  --text-muted: #8b919b;

  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.12);

  /* Soft shadows for depth on a light background */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04),
    0 4px 16px -8px rgba(16, 24, 40, 0.08);
  --shadow-float: 0 12px 36px -12px rgba(16, 24, 40, 0.18);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --maxw: 1120px;
  --gutter: 24px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
    'Helvetica Neue', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Offset anchor jumps so section headings clear the 68px sticky nav. */
  scroll-padding-top: 84px;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ---------- Layout helpers ---------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 96px 0;
  position: relative;
}

@media (max-width: 720px) {
  .section {
    padding: 64px 0;
  }
  /* Voice & Import are a heading + swipeable phone — keep the trio (heading,
     phone, dots) compact enough to land on a single screen. */
  .section:has(.feature.is-stepper) {
    padding: 36px 0;
  }
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin: 0 0 14px;
}

h1,
h2,
h3 {
  letter-spacing: -1px;
  line-height: 1.08;
  margin: 0;
}

h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
}

p {
  line-height: 1.6;
}

.lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-secondary);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.4px;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a {
  font-size: 15px;
  color: var(--text-secondary);
  transition: color 120ms ease;
}

.nav-links a:hover {
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .nav-links .nav-link {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background 140ms ease,
    transform 60ms ease,
    border-color 140ms ease;
}

.btn-accent {
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
}

.btn-accent:hover {
  background: var(--accent-light);
}

.btn-accent:active {
  transform: scale(0.98);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  padding: 12px 20px;
}

.btn-ghost:hover {
  border-color: var(--text-secondary);
}

/* Hero secondary CTA: a crisp white card-button that holds its own next to the
   solid black App Store badge — soft elevation instead of a dated gray outline. */
.hero .cta-row .btn-ghost {
  align-self: stretch;
  background: #fff;
  border: 0; /* no hairline outline — the soft shadow carries it */
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.06),
    0 8px 20px -10px rgba(16, 24, 40, 0.16);
}

.hero .cta-row .btn-ghost:hover {
  background: #fff;
  border-color: rgba(16, 24, 40, 0.14);
  box-shadow:
    0 2px 4px rgba(16, 24, 40, 0.08),
    0 12px 26px -10px rgba(16, 24, 40, 0.22);
  transform: translateY(-1px);
}

.hero .cta-row .btn-ghost svg {
  flex: none;
  color: var(--accent);
}

/* App Store badge (CSS-built, no external image) */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  padding: 11px 20px 11px 18px;
  border-radius: var(--radius-md);
  transition: transform 60ms ease, opacity 140ms ease;
}

.appstore:hover {
  opacity: 0.9;
}

.appstore:active {
  transform: scale(0.98);
}

.appstore svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.appstore .as-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.appstore .as-small {
  font-size: 11px;
  font-weight: 500;
}

.appstore .as-big {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

/* Compact App Store badge used in the nav */
.appstore-nav {
  padding: 7px 14px 7px 12px;
  border-radius: 12px;
  gap: 9px;
  box-shadow: 0 2px 10px -2px rgba(16, 24, 40, 0.28);
}

/* Override the gray nav-link color so the badge text stays crisp white */
.nav-links a.appstore-nav,
.nav-links a.appstore-nav:hover,
.nav-links a.btn-accent,
.nav-links a.btn-accent:hover {
  color: #fff;
}

.appstore-nav svg {
  width: 20px;
  height: 20px;
}

.appstore-nav .as-small {
  font-size: 9px;
}

.appstore-nav .as-big {
  font-size: 14px;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 72px 0 40px;
  overflow: hidden;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    /* Extra room so the bubble (which floats above the phone) clears the CTAs. */
    gap: 88px;
  }
  .hero .cta-row {
    justify-content: center;
  }
}

.hero h1 {
  font-size: clamp(40px, 7vw, 68px);
  font-weight: 800;
  letter-spacing: -2px;
  margin: 0 0 20px;
}

.hero h1 .accent {
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lead {
  max-width: 520px;
  margin: 0 0 32px;
}

@media (max-width: 900px) {
  .hero .lead {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Phone mockup ---------- */

.phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.phone {
  position: relative;
  width: 290px;
  background: #050506;
  border: 1px solid var(--border-strong);
  border-radius: 46px;
  padding: 10px;
  /* Just the metal bezel rim — no ground/drop shadow. */
  box-shadow: 0 0 0 2px #1a1c20;
  /* Only scroll vertically here so horizontal swipes go to our JS, not the
     in-app browser's back/dismiss gesture (Snapchat, Instagram, Messenger…). */
  touch-action: pan-y;
}

.phone .screen {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622; /* match the screenshot exactly: no crop, no letterbox */
  border-radius: 38px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone .screen img,
.phone .screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero phone sits above the floating callout bubble. */
.hero .phone {
  z-index: 1;
}

/* Apple Watch mockup */
.watch-wrap {
  display: flex;
  justify-content: center;
}

/* Section watch: larger + deeper float so it holds the column like the phone.
   Scoped to .watch-wrap so the small hero-overlay watch is untouched. */
.watch-wrap .watch {
  width: 240px;
  border-radius: 64px;
  box-shadow:
    0 0 0 2px #1a1c20,
    0 40px 76px -26px rgba(16, 24, 40, 0.42),
    0 16px 36px -18px rgba(16, 24, 40, 0.22);
}

.watch {
  position: relative;
  width: 206px;
  aspect-ratio: 1 / 1.2;
  background: #050506;
  border: 1px solid var(--border-strong);
  border-radius: 58px;
  padding: 12px;
  box-shadow:
    0 0 0 2px #1a1c20,
    0 24px 48px -20px rgba(16, 24, 40, 0.32),
    0 8px 20px -12px rgba(16, 24, 40, 0.18);
  /* See .phone: keep horizontal swipes for our JS, not the in-app browser. */
  touch-action: pan-y;
}

.watch .screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 46px;
  overflow: hidden;
  /* Pure black so the watch screenshots (black bg) sit seamlessly, with any
     letterbox from object-fit:contain invisible. */
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.watch .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop only: the watch screenshots carry more black above the title than
   below the hint, so the content reads low in the frame. Nudge it up to sit
   centered. The screen bg is #000, matching the shots, so the strip revealed
   at the bottom is seamless. Mobile is left exactly as it is. */
@media (min-width: 901px) {
  .watch .screen img {
    transform: translateY(-9%);
  }
}

/* Digital crown nub + side button */
.watch .crown {
  position: absolute;
  right: -5px;
  top: 32%;
  width: 6px;
  height: 34px;
  background: linear-gradient(180deg, #3a3e46, #23262c);
  border-radius: 4px;
}

.watch .crown::after {
  content: '';
  position: absolute;
  left: 0;
  top: 44px;
  width: 6px;
  height: 26px;
  background: #2a2d33;
  border-radius: 4px;
}

/* Dynamic-island */
.phone .island {
  display: none; /* screenshots already include the real Dynamic Island */
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 24px;
  background: #050506;
  border-radius: 999px;
  z-index: 2;
}

/* Floating callout chips around the hero phone */
.chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border: 1px solid rgba(16, 24, 40, 0.05);
  border-radius: 16px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  box-shadow:
    0 12px 32px -10px rgba(16, 24, 40, 0.22),
    0 3px 8px -3px rgba(16, 24, 40, 0.08);
  white-space: nowrap;
}

.chip .ico {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  flex: none;
}

/* Mic chip: solid blue circle + white mic, like the in-app mic button */
.chip-mic .ico {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
}

/* The mic callout is a speech bubble: a little tail points at the phone so it
   reads as "this is what you said", not a loose floating label. */
/* The whole bubble — body + tail — is ONE SVG path behind the content, so there
   is no seam anywhere. It stretches to the chip box; the drop-shadow lives on
   the path so the shadow traces the exact silhouette, tail included. */
.bubble-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  fill: #ffffff;
  filter:
    drop-shadow(0 12px 24px rgba(16, 24, 40, 0.20))
    drop-shadow(0 2px 5px rgba(16, 24, 40, 0.10));
}

/* Two tail variants share the bubble body: the side-pointing tail on desktop
   (bubble sits left of the phone), the down-pointing tail on mobile (bubble
   sits above the phone). Only one is shown per breakpoint. */
.bubble-bg-down {
  display: none;
}

/* Entrance: the bubble fades up shortly after load. */
@keyframes chipFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chip-1 {
  top: 14%;
  left: -120px;
  opacity: 0;
  /* The .bubble-bg SVG paints the shape + shadow; the chip is just a transparent
     positioning box. Extra right padding keeps the text clear of the tail. */
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 12px 42px 12px 16px;
  isolation: isolate;
  animation: chipFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

/* Respect users who ask for less motion: show the bubble, no animation. */
@media (prefers-reduced-motion: reduce) {
  .chip-1 {
    animation: none;
    opacity: 1;
  }
}

/* Once the hero stacks (one column) the phone is centered with no side gutter,
   so the side-pointing bubble would cover it. Move the bubble above the phone
   and swap to the downward tail so it points at the phone instead. */
@media (max-width: 900px) {
  .chip-1 {
    top: -42px;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    /* Extra bottom padding keeps the text clear of the downward tail. */
    padding: 11px 18px 24px;
  }
  .chip-1 .bubble-bg-side {
    display: none;
  }
  .chip-1 .bubble-bg-down {
    display: block;
  }
}

@media (max-width: 380px) {
  .phone {
    width: 250px;
  }
}

/* ---------- Feature rows (alternating) ---------- */

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

.feature.reverse .feature-media {
  order: 2;
}

.feature.reverse .feature-text {
  order: 1;
}

@media (max-width: 900px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  /* Stepper features on mobile: heading/eyebrow above the phone, and drop the
     text stepper — the swipe + dots + on-phone bubbles tell the story instead.
     Tighten everything so heading + phone + dots fit on one screen. */
  .feature.is-stepper {
    /* Match the watch section's heading->device gap (h2 margin-bottom: 30px). */
    gap: 30px;
  }
  .feature.is-stepper .feature-text {
    order: -1;
  }
  .feature.is-stepper .eyebrow {
    margin-bottom: 8px;
  }
  .feature.is-stepper .feature-text h2 {
    margin-bottom: 0;
  }
  /* The four section headlines all share ONE size on mobile: the largest that
     keeps the longest of them ("Bring your whole program with you.") on a
     single line. Scales with the viewport so it fits down to small phones. */
  .oneline {
    white-space: nowrap;
    font-size: clamp(16px, 5.4vw, 32px);
  }
  .feature.is-stepper .stepper {
    display: none;
  }
  .feature .cta-row {
    justify-content: center;
  }
}

/* Devices float on clean white — no panel, no hairline */
.feature-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Mobile swipe gallery: dots + one-time hint sit under the phone. On desktop
   the text stepper is the control, so this is hidden. Injected by JS into
   every [data-stepper] feature's .feature-media. */
.swipe-nav {
  display: none;
}

@media (max-width: 900px) {
  .swipe-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    margin-top: 20px;
  }
  .dots {
    display: flex;
    gap: 8px;
  }
  .dots .dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--border-strong);
    cursor: pointer;
    transition: width 220ms ease, background 220ms ease;
  }
  .dots .dot.is-active {
    width: 22px;
    background: var(--accent);
  }
  .swipe-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    transition: opacity 300ms ease;
  }
  /* Accent arrows draw the eye and signal it's swipeable. */
  .swipe-hint svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
  }
  /* Fade the hint away once the user has swiped or tapped through. */
  .feature.swiped .swipe-hint {
    opacity: 0;
  }
}

.feature-text h2 {
  margin-bottom: 18px;
}

.feature-text .lead {
  max-width: 460px;
}

@media (max-width: 900px) {
  .feature-text .lead {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Interactive feature stepper ---------- */

.stepper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  max-width: 480px;
}

@media (max-width: 900px) {
  .stepper {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

.step {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--border);
  padding: 14px 0 14px 20px;
  cursor: pointer;
  transition: border-color 180ms ease;
}

.step .step-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-muted);
  transition: color 180ms ease;
}

.step:hover .step-title {
  color: var(--text-secondary);
}

.step.is-active {
  border-left-color: var(--accent);
}

.step.is-active .step-title {
  color: var(--text-primary);
}

/* Stacked phone screens that crossfade as steps change */
.step-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms ease;
}

.step-screen.is-active {
  opacity: 1;
  visibility: visible;
}

.step-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Watch screenshots: show the whole screen (incl. the bottom caption) instead
   of cropping it — they all render at the same scale on the black background. */
.watch .step-screen img {
  object-fit: contain;
}

/* Per-step callout bubbles on the phone — MOBILE ONLY (desktop uses the text
   stepper). Positioned with inline top/left % on the phone; --tail sets the
   tail's horizontal offset. Hidden on desktop. */
.feat-bubble {
  display: none;
}

@media (max-width: 900px) {
  .feat-bubble {
    display: block;
    position: absolute;
    z-index: 4;
    transform: translate(-50%, 0);
    background: #fff;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    white-space: nowrap;
    padding: 12px 18px;
    border-radius: 17px;
    border: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow:
      0 34px 66px -10px rgba(0, 0, 0, 0.62),
      0 14px 30px -6px rgba(0, 0, 0, 0.5),
      0 4px 10px -2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease, visibility 280ms ease;
    pointer-events: none;
  }
  .feat-bubble.is-active {
    opacity: 1;
    visibility: visible;
  }
  /* Soft rounded down-tail (rotated square with a curved corner, not a sharp
     triangle), positioned horizontally via --tail. Sits behind the text (but
     above the bubble's white bg) so its overlapping half never covers letters. */
  .feat-bubble::after {
    content: '';
    position: absolute;
    left: var(--tail, 50%);
    bottom: -5px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 0 0 6px 0;
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
  }
  /* Up-pointing tail: aims at a target above the bubble. */
  .feat-bubble.tail-up::after {
    bottom: auto;
    top: -5px;
    border-radius: 6px 0 0 0;
  }
  /* Slightly larger bubble. */
  .feat-bubble.is-lg {
    font-size: 17px;
    padding: 14px 22px;
  }
  /* Plain label (no speech tail) with a trailing icon — e.g. "tracked for you". */
  .feat-bubble.is-plain {
    font-size: 17px;
    padding: 13px 20px;
  }
  .feat-bubble.is-plain::after {
    display: none;
  }
  .feat-bubble .check {
    vertical-align: -3px;
    margin-left: 7px;
  }
}

/* ---------- Feature grid ---------- */

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.section-head .lead {
  margin-top: 16px;
}

/* Secondary feature tiles (Apple Health, Plate calculator) — compact and
   centered below the screenshot strip, not full-width empty gray boxes. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 620px;
  margin: 48px auto 0;
  align-items: stretch;
}

@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    gap: 36px;
  }
}

/* Faux-UI tile: just the floating white card + label, no gray panel and no
   outer hairline — same treatment as the screenshots. */
.card {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* flex:1 makes both shot areas equal height (cards stretch to the taller one),
   so the shorter Apple Health card centers vertically against the Plate
   calculator card while both labels stay aligned at the bottom. */
.card .card-shot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* The floating white UI card shared by every tile. */
.tile-card {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 38px -14px rgba(16, 24, 40, 0.36),
    0 4px 10px -4px rgba(16, 24, 40, 0.12);
  padding: 16px;
}

/* --- Apple Health tile --- */
.health-top {
  display: flex;
  align-items: center;
  gap: 11px;
}
.health-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.health-logo svg {
  width: 21px;
  height: 21px;
}
.health-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.health-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.health-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.health-check {
  width: 19px;
  height: 19px;
  flex: none;
}
.health-stats {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}
.health-stats > div {
  display: flex;
  flex-direction: column;
}
.health-stats b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}
.health-stats span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* --- Plate calculator tile --- */
.plate-weight {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
}
.plate-weight b {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text-primary);
}
.plate-weight span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.plate-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 72px;
  margin-top: 8px;
}
.bar-stub {
  width: 30px;
  height: 9px;
  border-radius: 5px;
  background: var(--text-muted);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.collar {
  width: 6px;
  height: 26px;
  border-radius: 2px;
  background: var(--text-secondary);
  margin-right: 2px;
  flex: none;
}
.plate {
  border-radius: 4px;
  background: var(--accent);
  flex: none;
}
.plate-cap {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 8px;
}

/* --- Feature rows: text + screenshot pairs, two per row ---
   Text on the outer edges, the two portrait screenshots paired in the middle.
   No dividers — whitespace separates the rows. */
.ftr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  /* Center so the shorter screenshot in a row (e.g. Profile) sits vertically
     centered against the taller one (e.g. History). */
  align-items: center;
  padding: 36px 0;
}

.ftr {
  display: flex;
  align-items: center;
  gap: 28px;
}

.ftr.reverse {
  flex-direction: row-reverse;
}

.ftr-text {
  flex: 1;
  min-width: 0;
}

.ftr.reverse .ftr-text {
  text-align: right;
}

.ftr-text h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.ftr-text p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.ftr-shot {
  flex: none;
  width: 208px;
}

.ftr-shot img {
  width: 100%;
  display: block;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 22px 44px -18px rgba(16, 24, 40, 0.34),
    0 6px 14px -6px rgba(16, 24, 40, 0.12);
}

@media (max-width: 860px) {
  /* Stack to one feature per row with even spacing throughout (no more
     36/72/36 rhythm from the two row containers). */
  .features {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }
  .ftr-row {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 0;
  }
  /* Keep text + screenshot balanced — a comfortable centered column instead
     of a wide text block next to a small shot. */
  .ftr {
    max-width: 470px;
    margin: 0 auto;
  }
}

@media (max-width: 520px) {
  /* Screenshot first, title + line captioned below — so the section header
     isn't followed by another stack of headings; each image anchors its
     feature and breaks up the text. */
  .ftr,
  .ftr.reverse {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .ftr.reverse .ftr-text {
    text-align: center;
  }
  .ftr-text {
    max-width: 360px;
  }
  /* Smaller than the section title so the hierarchy is clear. */
  .ftr-text h3 {
    font-size: 18px;
  }
  /* Bigger, viewport-scaled screenshots so they read on a phone. */
  .ftr-shot {
    width: min(72vw, 270px);
  }
}

.card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.4px;
  text-align: center;
}

/* ---------- CTA band ---------- */

.cta-band {
  position: relative;
  text-align: center;
  padding: 16px 0;
}

.cta-band h2 {
  margin-bottom: 16px;
}

.cta-band .lead {
  max-width: 480px;
  margin: 0 auto 28px;
}

.cta-band .cta-row {
  justify-content: center;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 56px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.footer .brand {
  font-size: 17px;
}

.footer-tag {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 280px;
}

.footer-links {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.footer-col a {
  display: block;
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  transition: color 120ms ease;
}

.footer-col a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Doc pages (privacy / terms / support) ---------- */

.doc {
  max-width: 760px;
  margin: 0 auto;
  /* Top/bottom only — keep the .container's horizontal gutter so the text
     doesn't hug the screen edge on mobile. */
  padding-top: 64px;
  padding-bottom: 40px;
}

.doc h1 {
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 10px;
}

.doc .updated {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 40px;
}

.doc h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 44px 0 14px;
}

.doc h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 10px;
}

.doc p,
.doc li {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

.doc a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc strong {
  color: var(--text-primary);
}

.doc ul {
  padding-left: 22px;
}

.doc li {
  margin-bottom: 8px;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}

.doc th,
.doc td {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.doc th {
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 600;
}

.doc .faq-q {
  color: var(--text-primary);
  font-weight: 600;
  margin-top: 24px;
}