/* ============================================================
   Migraine Sentry — Marketing Site
   Tokens lifted from the Aura Design System (colors_and_type.css)
   Dark mode only. 4pt grid. Glassmorphic surfaces. Teal accent.
   Typography: native system stack (no webfont) — keeps the Apple feel
   and keeps the privacy promise (no third-party font requests).
   ============================================================ */

:root {
  --bg-1: #0F1419;
  --bg-2: #1A2332;
  --bg-3: #243447;
  --footer-bg: #0A0E14;
  --edu-bg: #131922;

  --fg-1: #F5F5F7;
  --fg-2: #A8B2C1;
  --fg-3: #6B7B8F;

  --teal: #4DD0E1;
  --teal-press: #3BBBD4;
  --purple: #9C7CF4;
  --amber: #FFB74D;
  --coral: #FF6B6B;

  --metric-sleep: #9C7CF4;
  --metric-cardiac: #FF8A9A;
  --metric-pressure: #6CB6FF;
  --metric-activity: #6DD58C;
  --metric-weather: #FFB74D;

  --risk-moderate-wash: rgba(255, 183, 77, 0.16);
  --risk-high-wash: rgba(255, 107, 107, 0.18);

  --surface-card: rgba(255, 255, 255, 0.06);
  --surface-card-hi: rgba(255, 255, 255, 0.10);
  --surface-glass: rgba(255, 255, 255, 0.04);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-card-hi: rgba(255, 255, 255, 0.18);
  --divider: rgba(255, 255, 255, 0.08);

  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.30);
  --shadow-hero: 0 24px 64px rgba(0, 0, 0, 0.45);
  --inner-card: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;

  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;

  --maxw: 1200px;
}

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

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* ---- Layout helpers --------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 104px 0; position: relative; }
@media (max-width: 768px) { .section { padding: 72px 0; } }

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 16px;
}
.sec-head { max-width: 760px; }
.sec-head.center { margin: 0 auto; text-align: center; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; }
.sec-title { font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--fg-1); }
.sec-sub { font-size: 18px; color: var(--fg-2); margin: 18px 0 0; line-height: 1.5; }
.sec-head.center .sec-sub { margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .sec-title { font-size: 28px; } .sec-sub { font-size: 16px; } }

/* ---- Glass cards ------------------------------------------ */
.glass {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), var(--inner-card);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.glass-hero {
  background: var(--surface-card-hi);
  border: 1px solid var(--border-card-hi);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-hero), var(--inner-card);
}

/* ---- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  border-radius: var(--r-full); padding: 14px 26px; cursor: pointer;
  border: 1px solid transparent; transition: transform .18s ease, filter .18s ease, background .18s ease;
  min-height: 48px;
}
.btn:hover { transform: scale(1.02); filter: brightness(1.06); }
.btn-solid { background: var(--teal); color: #06222a; }
.btn-ghost { background: transparent; color: var(--teal); border-color: rgba(77,208,225,0.5); }
.btn-ghost:hover { background: rgba(77,208,225,0.08); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* App Store badge (drawn, placeholder link) */
.appstore {
  display: inline-flex; align-items: center; gap: 11px;
  background: #000; border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px; padding: 9px 18px; min-height: 54px; cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.appstore:hover { transform: scale(1.02); border-color: rgba(255,255,255,0.4); }
.appstore svg { width: 26px; height: 26px; fill: #fff; }
.appstore .as-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.appstore .as-sm { font-size: 11px; color: #cfd3da; }
.appstore .as-lg { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }
@media (prefers-reduced-motion: reduce) { .appstore:hover { transform: none; } }

/* ---- Nav -------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav.show {
  background: rgba(15,20,25,0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--divider);
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--fg-1); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--fg-2); font-size: 15px; transition: color .15s ease; }
.nav-links a:hover { color: var(--fg-1); }
.nav .btn { padding: 10px 22px; min-height: 42px; font-size: 15px; }

/* ---- Mobile menu ---------------------------------------- */
.nav-toggle {
  display: none; /* shown at ≤860px */
  width: 44px; height: 44px; margin: -6px -8px -6px 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center; color: var(--fg-1);
  -webkit-tap-highlight-color: transparent;
}
.nt-bars { position: relative; width: 22px; height: 16px; }
.nt-bars span {
  position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nt-bars span:nth-child(1) { top: 0; }
.nt-bars span:nth-child(2) { top: 7px; }
.nt-bars span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nt-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nt-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nt-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
  background: rgba(13,17,22,0.985);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--divider);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  visibility: hidden;
}
.mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.mobile-menu a:not(.btn) {
  color: var(--fg-1); font-family: var(--font-display); font-size: 18px; font-weight: 600;
  padding: 15px 4px; border-bottom: 1px solid var(--divider);
}
.mobile-menu a:not(.btn):active { color: var(--teal); }
.mobile-menu .mm-cta { margin-top: 16px; justify-content: center; width: 100%; min-height: 50px; font-size: 16px; }
.mobile-scrim {
  position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,0.45);
  opacity: 0; transition: opacity .22s ease;
}
.mobile-scrim.open { opacity: 1; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  /* solid bar backdrop as soon as the menu is open, even at the top */
  .nav.menu-open {
    background: rgba(15,20,25,0.94);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}
@media (min-width: 861px) {
  .mobile-menu, .mobile-scrim { display: none !important; }
}

/* ---- Reveal animation ------------------------------------- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   SECTION 1 — Hero
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: 120px 0 80px;
  background:
    radial-gradient(120% 90% at 70% 40%, rgba(77,208,225,0.07), transparent 55%),
    radial-gradient(140% 120% at 50% 0%, #1A2332, #0F1419 70%);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
}
.hero-eyebrow { color: var(--teal); }
.hero h1 {
  font-size: 54px; font-weight: 700; line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 22px; max-width: 13ch;
}
.hero-sub { font-size: 20px; color: var(--fg-2); max-width: 560px; margin: 0 0 34px; line-height: 1.45; }
.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }

/* floating background metric chips */
.float-chips { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fchip {
  position: absolute; padding: 10px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-3);
  display: flex; align-items: center; gap: 8px;
  opacity: 0; animation: chipIn .9s ease forwards;
}
.fchip .dot { width: 7px; height: 7px; border-radius: 50%; }
@keyframes chipIn { to { opacity: 1; } }
/* right-side chips overlap the phone on mid-width screens — hide before the phone reaches them */
@media (max-width: 1320px) { .fchip.r { display: none; } }
/* the lower-left Sleep chip crowds the hero paragraph on laptops (~14") — keep it only on wide screens */
@media (max-width: 1600px) { .fchip.fc-wide { display: none; } }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .hero h1 { max-width: none; margin-inline: auto; font-size: 42px; }
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-eyebrow, .hero .eyebrow { }
  .float-chips { display: none; }
}
@media (max-width: 520px) { .hero h1 { font-size: 34px; } .hero-sub { font-size: 17px; } }

/* phone float */
.phone-float { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .phone-float, .fchip { animation: none; opacity: 1; } }

/* ============================================================
   iPhone mockup frame
   ============================================================ */
.phone {
  position: relative; width: 300px; flex: none;
  border-radius: 46px; padding: 11px;
  background: linear-gradient(155deg, #2a3340, #11161d);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 2px rgba(0,0,0,0.4);
}
.phone-screen {
  position: relative; border-radius: 36px; overflow: hidden;
  background: var(--bg-1); aspect-ratio: 300 / 640;
  display: flex; flex-direction: column;
}
.island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 26px; background: #000; border-radius: 14px; z-index: 20;
}
.statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 22px 4px; font-family: var(--font-display); z-index: 10;
}
.statusbar .sb-time { font-size: 13px; font-weight: 600; }
.statusbar .sb-ic { display: flex; align-items: center; gap: 5px; color: var(--fg-1); }
.statusbar .sb-ic svg { width: 16px; height: 12px; fill: currentColor; }
.phone-body { flex: 1; overflow: hidden; padding: 4px 14px 14px; }
.phone-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin: 6px 2px 14px; letter-spacing: -0.01em; }

/* phone angled variant for feature blocks */
.phone-angle { transform: rotate(-5deg); }
.phone-angle-r { transform: rotate(5deg); }
@media (max-width: 768px) { .phone-angle, .phone-angle-r { transform: none; } }

/* mini app components inside phone */
.mini-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--r-md); padding: 14px; }
.mini-eyebrow { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--teal); }
.risk-pill { font-family: var(--font-display); font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-full); }
.risk-pill.moderate { background: var(--amber); color: #2a1c00; }
.risk-pill.high { background: var(--coral); color: #2a0000; }

.signal-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--divider); }
.signal-row:first-of-type { border-top: none; }
.sig-chip { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.sig-chip svg { width: 17px; height: 17px; }
.sig-main { flex: 1; min-width: 0; }
.sig-label { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.sig-val { font-size: 11px; color: var(--fg-2); margin-top: 1px; }
.sig-delta { font-size: 11px; font-weight: 600; }

/* trigger rows */
.trig-row { padding: 8px 11px; border-radius: var(--r-sm); background: var(--surface-card); border: 1px solid var(--border-card); margin-bottom: 6px; }
.trig-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.trig-rank { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); width: 16px; }
.trig-name { font-size: 13px; font-weight: 600; flex: 1; }
.trig-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: 0.4px; }
.badge-strong { background: rgba(77,208,225,0.16); color: var(--teal); }
.badge-moderate { background: rgba(255,183,77,0.16); color: var(--amber); }
.badge-explore { background: rgba(168,178,193,0.14); color: var(--fg-2); }
.trig-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.trig-bar > span { display: block; height: 100%; background: var(--teal); border-radius: 3px; }
.trig-meta { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.cdot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.cdot.off { background: rgba(255,255,255,0.16); }
.trig-score { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }

/* nudge cards */
.nudge { display: flex; gap: 11px; padding: 13px; border-radius: var(--r-md); background: var(--surface-card); border: 1px solid var(--border-card); position: relative; }
.nudge.coral { border-left: 3px solid var(--coral); }
.nudge.amber { border-left: 3px solid var(--amber); }
.nudge-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.nudge-ic svg { width: 18px; height: 18px; }
.nudge h5 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin: 0 0 3px; }
.nudge p { font-size: 12px; color: var(--fg-2); margin: 0; line-height: 1.4; }
.nudge .ago { font-size: 10px; color: var(--fg-3); margin-top: 7px; font-family: var(--font-mono); }
.nudge .x { position: absolute; top: 10px; right: 10px; color: var(--fg-3); width: 14px; height: 14px; }

/* sleep ring (peeking) */
.ring-card { display: flex; align-items: center; gap: 13px; }
.ring { width: 52px; height: 52px; flex: none; }
.ring-info .rl { font-size: 12px; color: var(--fg-2); }
.ring-info .rv { font-family: var(--font-display); font-size: 18px; font-weight: 700; }

/* ============================================================
   SECTION 2 — How It Works  (connected step flow on a rail)
   ============================================================ */
.how-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 56px; position: relative; }
/* dashed teal rail connecting the step nodes */
.how-grid::before {
  content: ""; position: absolute; left: 9%; right: 9%; top: 26px; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, rgba(77,208,225,0.55) 0 7px, transparent 7px 15px);
}
.step { position: relative; padding: 0 6px; text-align: center; background: none; border: none; box-shadow: none; }
.step-node {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 24px; position: relative; z-index: 2;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 21px;
  color: var(--teal); background: var(--bg-1); border: 2px solid rgba(77,208,225,0.55);
  box-shadow: 0 0 0 7px var(--bg-1), 0 0 26px rgba(77,208,225,0.28);
}
.step-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(77,208,225,0.10); display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; }
.step-ic svg { width: 23px; height: 23px; stroke: var(--teal); }
.step h3 { font-size: 18px; font-weight: 700; margin: 0 0 9px; letter-spacing: -0.01em; }
.step p { font-size: 14px; color: var(--fg-2); margin: 0 auto; line-height: 1.5; max-width: 30ch; }
@media (max-width: 960px) {
  .how-grid { grid-template-columns: 1fr; gap: 0; padding-left: 6px; }
  .how-grid::before { left: 26px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(77,208,225,0.55) 0 7px, transparent 7px 15px); }
  .step { text-align: left; display: grid; grid-template-columns: 54px 1fr; column-gap: 22px; padding: 0 0 38px; }
  .step:last-child { padding-bottom: 0; }
  .step-node { margin: 0; }
  .step-ic { grid-column: 2; margin: 2px 0 14px; }
  .step h3, .step p { grid-column: 2; }
  .step p { margin: 0; max-width: none; }
}

/* ============================================================
   SECTION 3 — Feature showcase
   ============================================================ */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin: 0 auto; }
.feat + .feat { margin-top: 110px; }
/* Blocks alternate via source order (media,text / text,media); no order overrides needed on desktop. */
.feat-media { display: flex; justify-content: center; position: relative; }
.feat-media .phone { width: 280px; }
.feat-text h3 { font-size: 28px; font-weight: 700; margin: 14px 0 16px; line-height: 1.12; }
.feat-text p { font-size: 17px; color: var(--fg-2); margin: 0 0 22px; line-height: 1.55; }
.feat-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.feat-bullets li { display: flex; gap: 11px; font-size: 15px; color: var(--fg-2); align-items: flex-start; }
.feat-bullets .ck { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--teal); }
@media (max-width: 860px) {
  .feat, .feat.reverse { grid-template-columns: 1fr; gap: 36px; }
  .feat .feat-text, .feat.reverse .feat-text { order: 2; text-align: left; }
  .feat .feat-media, .feat.reverse .feat-media { order: 1; }
  .feat + .feat { margin-top: 72px; }
}

/* ---- Clinical report page (light) ------------------------- */
.report-page {
  width: 366px; flex: none; background: #FBFCFE; color: #1A1D26;
  border-radius: 5px; padding: 34px 32px 44px; box-shadow: 0 34px 74px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.22);
  font-family: var(--font-body); transform: rotate(-2.2deg);
  aspect-ratio: 1 / 1.414; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
}
@media (max-width: 768px) { .report-page { transform: none; } }
.rp-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #E4E8F0; }
.rp-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #1A1D26; }
.rp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.rp-mark { width: 30px; height: 30px; flex: none; }
.rp-title { font-size: 12px; color: #8E95A5; }
.rp-period { display: flex; justify-content: space-between; font-size: 9px; color: #8E95A5; margin: 9px 0 13px; }
.rp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.rp-stat { background: #F1F4F9; border-radius: 9px; padding: 9px 6px; text-align: center; }
.rp-stat-v { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #1A1D26; }
.rp-stat-l { font-size: 8px; color: #8E95A5; margin-top: 2px; }
.rp-midas { display: flex; align-items: center; justify-content: space-between; background: rgba(255,107,107,0.10); border: 1px solid rgba(255,107,107,0.25); border-radius: 11px; padding: 13px 15px; margin: 13px 0; }
.rp-midas-label { font-size: 10px; color: #8E95A5; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.rp-midas-grade { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #C0392B; margin: 3px 0 6px; }
.rp-chip { font-size: 9px; background: #fff; border: 1px solid #E4E8F0; color: #5C6477; padding: 3px 8px; border-radius: 20px; }
.rp-midas-score { font-family: var(--font-display); font-weight: 800; font-size: 38px; color: #C0392B; line-height: 1; }
.rp-chart-l { font-size: 10px; color: #8E95A5; font-weight: 600; margin-bottom: 8px; }
.rp-bars { display: flex; align-items: flex-end; gap: 8px; height: 56px; padding: 0 4px; }
.rp-bars span { flex: 1; background: var(--teal); border-radius: 3px 3px 0 0; opacity: 0.85; }
.rp-foot { display: flex; justify-content: space-between; font-size: 8px; color: #A6ADBB; margin-top: 14px; padding-top: 10px; border-top: 1px solid #E4E8F0; }

/* ============================================================
   SECTION 4 — Education
   ============================================================ */
.edu { background: var(--edu-bg); }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 860px) { .cards-3 { grid-template-columns: 1fr; } }

/* Understanding migraines — asymmetric bento (one feature + two small) */
.edu-bento { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 44px; align-items: stretch; }
.edu-feature { grid-row: 1 / span 2; padding: 38px 36px; display: flex; flex-direction: column; }
.edu-feature h3 { font-size: 28px; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.015em; }
.edu-feature p { font-size: 16px; color: var(--fg-2); line-height: 1.6; margin: 0; }

/* prodrome-window timeline chart — fills the feature card with meaning */
.prodrome-viz { margin: 28px 0 0; }
.pv-chart { position: relative; height: 132px; }
.pv-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pv-band { fill: rgba(77,208,225,0.07); }
.pv-grid { stroke: rgba(255,255,255,0.10); stroke-width: 1; stroke-dasharray: 3 4; }
.pv-line { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; }
.pv-area { fill: url(#pvFade); }
.pv-onset { stroke: var(--coral); stroke-width: 2; }
.pv-dot { fill: var(--coral); }
.pv-axis { display: flex; justify-content: space-between; margin-top: 9px; }
.pv-axis span { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.02em; }
.pv-axis span.hot { color: var(--coral); }
.pv-cap { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--fg-2); }
.pv-cap .swatch { width: 22px; height: 3px; border-radius: 2px; background: var(--teal); flex: none; }

.edu-bigstat { margin-top: auto; padding-top: 28px; display: flex; align-items: baseline; gap: 16px; }
.edu-bigstat .n { font-family: var(--font-display); font-weight: 800; font-size: 60px; line-height: 0.9; letter-spacing: -0.035em; flex: none;
  background: linear-gradient(180deg,#eafdff,#4DD0E1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.edu-bigstat .l { font-size: 14px; color: var(--fg-2); line-height: 1.4; }
.edu-small { padding: 26px 28px; }
.edu-small h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.edu-small p { font-size: 14.5px; color: var(--fg-2); line-height: 1.55; margin: 0; }
.edu-small .stat-callout { margin-top: 14px; padding-top: 13px; }
@media (max-width: 860px) { .edu-bento { grid-template-columns: 1fr; } .edu-feature { grid-row: auto; padding: 30px 26px; } }

.edu-card { padding: 28px 26px; }
.edu-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(77,208,225,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.edu-ic svg { width: 23px; height: 23px; stroke: var(--teal); }
.edu-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 11px; }
.edu-card p { font-size: 15px; color: var(--fg-2); margin: 0; line-height: 1.55; }
.stat-callout { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); font-size: 13px; color: var(--fg-3); }
.stat-callout.teal { color: var(--teal); }
.stat-callout b { font-family: var(--font-display); }

/* ============================================================
   SECTION 5 — Science
   ============================================================ */
/* The science — ruled evidence list (data rows, not cards) */
.evidence { margin-top: 48px; border-top: 1px solid var(--divider); }
.ev-lead { margin: 44px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--divider); color: var(--fg-2); font-size: 15px; }
.ev-row { display: grid; grid-template-columns: 210px 1fr 150px; gap: 30px; align-items: center;
  padding: 23px 10px; border-bottom: 1px solid var(--divider); transition: background .2s ease; }
.ev-row:hover { background: rgba(77,208,225,0.035); }
.ev-term { display: flex; align-items: center; gap: 14px; }
.ev-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(77,208,225,0.12); display: grid; place-items: center; flex: none; }
.ev-ic svg { width: 21px; height: 21px; stroke: var(--teal); }
.ev-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.ev-desc { font-size: 15px; color: var(--fg-2); line-height: 1.5; }
.ev-src { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); text-align: right; line-height: 1.5; }
@media (max-width: 820px) {
  .ev-row { grid-template-columns: 1fr; gap: 9px; padding: 20px 4px; }
  .ev-src { text-align: left; }
}
.sci-foot { text-align: center; margin-top: 40px; }
.link-teal { color: var(--teal); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.link-teal:hover { gap: 9px; transition: gap .15s ease; }

/* ============================================================
   SECTION 6 — Audience + social proof
   ============================================================ */
/* Who it's for — large numbered persona rows (editorial, divided) */
.persona-list { margin-top: 44px; }
.persona { display: grid; grid-template-columns: 88px 1fr; gap: 30px; align-items: start; padding: 34px 0; border-top: 1px solid var(--divider); }
.persona:last-child { border-bottom: 1px solid var(--divider); }
.persona-no { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -0.03em; color: rgba(77,208,225,0.4); }
.persona-body h3 { font-size: 23px; font-weight: 700; margin: 0 0 9px; }
.persona-body p { font-size: 16px; color: var(--fg-2); margin: 0; max-width: 76ch; line-height: 1.6; }
@media (max-width: 600px) { .persona { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; } .persona-no { font-size: 38px; } }
.testi-wrap { margin-top: 56px; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; } }
.testi { padding: 26px 24px; }
.stars { display: flex; gap: 3px; margin-bottom: 14px; }
.stars svg { width: 16px; height: 16px; fill: var(--teal); }
.testi q { display: block; font-size: 17px; font-style: italic; color: var(--fg-1); line-height: 1.5; quotes: none; }
.testi-who { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(140deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--border-card); flex: none; }
.testi-name { font-size: 15px; font-weight: 700; }
.testi-desc { font-size: 13px; color: var(--fg-2); }
.testi-note { text-align: center; margin-top: 28px; font-size: 14px; color: var(--fg-3); }

/* ============================================================
   SECTION 7 — Comparison
   ============================================================ */
.compare { margin-top: 44px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-card); }
.crow { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: stretch; }
.crow > div { padding: 18px 22px; }
.crow.head { background: rgba(255,255,255,0.03); }
.crow.head > div { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.crow.head .c-us { color: var(--teal); }
.crow.head .c-them { color: var(--fg-3); }
.crow:not(.head) { border-top: 1px solid var(--divider); transition: background .15s ease; }
.crow:not(.head):hover { background: rgba(255,255,255,0.025); }
.c-feat { font-weight: 600; font-size: 15px; }
.c-us { background: rgba(77,208,225,0.05); font-size: 14px; color: var(--fg-1); display: flex; gap: 9px; align-items: flex-start; }
.c-them { font-size: 14px; color: var(--fg-3); display: flex; gap: 9px; align-items: flex-start; }
.c-us .mk { color: var(--teal); flex: none; margin-top: 1px; }
.c-them .mk { color: var(--fg-3); flex: none; margin-top: 1px; }
.c-us .mk svg, .c-them .mk svg { width: 17px; height: 17px; }
.compare .crow:last-child .c-us { border-bottom-right-radius: 0; }
@media (max-width: 768px) {
  .compare { border: none; display: flex; flex-direction: column; gap: 14px; }
  .crow.head { display: none; }
  .crow:not(.head) { display: block; border: 1px solid var(--border-card); border-radius: var(--r-md); background: var(--surface-card); }
  .crow > div { padding: 14px 18px; }
  .c-feat { font-family: var(--font-display); font-size: 16px; border-bottom: 1px solid var(--divider); }
  .c-us::before { content: "Migraine Sentry"; display: block; font-size: 11px; color: var(--teal); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; width: 100%; }
  .c-us { flex-wrap: wrap; background: rgba(77,208,225,0.05); }
  .c-them::before { content: "Typical apps"; display: block; font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; width: 100%; }
  .c-them { flex-wrap: wrap; }
}

/* ============================================================
   SECTION 8 — Pricing
   ============================================================ */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 880px; margin: 44px auto 0; align-items: stretch; }
@media (max-width: 768px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { padding: 32px 30px; display: flex; flex-direction: column; }
.price-card.featured { position: relative; }
.price-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.price-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.pill { font-family: var(--font-display); font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: 0.5px; }
.pill.forever { background: rgba(255,255,255,0.08); color: var(--fg-2); }
.pill.rec { background: var(--teal); color: #06222a; position: absolute; top: 22px; right: 26px; }
.price-amt { display: flex; align-items: baseline; gap: 7px; margin: 8px 0 2px; }
.price-amt .big { font-family: var(--font-display); font-size: 38px; font-weight: 800; color: var(--teal); letter-spacing: -0.02em; }
.price-amt .per { font-size: 16px; color: var(--fg-2); }
.price-alt { font-size: 13px; color: var(--fg-3); margin: 0 0 8px; }
.price-feats { list-style: none; padding: 0; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.price-feats li { display: flex; gap: 10px; font-size: 15px; color: var(--fg-2); align-items: flex-start; }
.price-feats .ck { flex: none; width: 18px; height: 18px; color: var(--teal); margin-top: 1px; }
.price-card .btn { width: 100%; justify-content: center; }
.price-fine { font-size: 13px; color: var(--fg-3); text-align: center; margin: 10px 0 0; }
.price-foot { text-align: center; margin-top: 28px; color: var(--fg-2); font-size: 15px; }

/* ============================================================
   SECTION 9 — Privacy
   ============================================================ */
.priv { background: linear-gradient(180deg, rgba(77,208,225,0.04), transparent 40%); }
.priv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .priv-grid { grid-template-columns: 1fr; gap: 40px; } }
.priv-points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 16px; }
.priv-points li { display: flex; gap: 13px; align-items: center; font-size: 16px; color: var(--fg-1); }
.priv-ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(77,208,225,0.12); display: flex; align-items: center; justify-content: center; flex: none; }
.priv-ic svg { width: 20px; height: 20px; stroke: var(--teal); }
.priv-diagram { padding: 40px 32px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.device-box { border: 1.5px solid rgba(77,208,225,0.4); border-radius: var(--r-lg); padding: 28px 24px 18px; position: relative; width: 100%; }
.device-box .db-label { position: absolute; top: -11px; left: 22px; background: var(--edu-bg); padding: 0 10px; font-size: 12px; color: var(--teal); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.5px; }
.flow { display: flex; align-items: center; justify-content: center; gap: 14px; }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.flow-node .fn-ic { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-card); display: flex; align-items: center; justify-content: center; }
.flow-node .fn-ic svg { width: 28px; height: 28px; stroke: var(--teal); }
.flow-node .fn-l { font-size: 11px; color: var(--fg-2); }
.flow-arrow { color: var(--teal); width: 22px; height: 22px; flex: none; }
.no-cloud { display: flex; align-items: center; gap: 9px; color: var(--fg-3); font-size: 13px; }
.no-cloud svg { width: 30px; height: 30px; stroke: var(--fg-3); }

/* ============================================================
   SECTION 10 — FAQ
   ============================================================ */
.faq { max-width: 720px; margin: 40px auto 0; }
.faq-item { border-bottom: 1px solid var(--divider); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  padding: 22px 4px; color: var(--fg-1); font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
}
.faq-item.open .faq-q { color: var(--teal); }
.faq-toggle { flex: none; width: 24px; height: 24px; position: relative; }
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  top: 50%; left: 50%; transition: transform .2s ease;
}
.faq-toggle::before { width: 14px; height: 2px; transform: translate(-50%,-50%); }
.faq-toggle::after { width: 2px; height: 14px; transform: translate(-50%,-50%); }
.faq-q { color: var(--fg-1); }
.faq-toggle { color: var(--fg-2); }
.faq-item.open .faq-toggle { color: var(--teal); }
.faq-item.open .faq-toggle::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.faq-a-inner { padding: 0 4px 22px; color: var(--fg-2); font-size: 16px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }

/* ============================================================
   SECTION 11 — Footer
   ============================================================ */
.footer { background: var(--footer-bg); padding: 88px 0 40px; border-top: 1px solid var(--divider); }
.foot-cta { text-align: center; max-width: 600px; margin: 0 auto 64px; }
.foot-cta h2 { font-size: 30px; font-weight: 700; margin: 0 0 12px; }
.foot-cta p { color: var(--fg-2); font-size: 16px; margin: 0 0 26px; }
.foot-cta .appstore { margin: 0 auto; }
.foot-links { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; }
.foot-links a { color: var(--fg-2); font-size: 15px; }
.foot-links a:hover { color: var(--fg-1); }
.foot-social { display: flex; justify-content: center; gap: 16px; margin-bottom: 30px; }
.foot-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-card); display: flex; align-items: center; justify-content: center; color: var(--fg-2); transition: color .15s, border-color .15s; }
.foot-social a:hover { color: var(--teal); border-color: rgba(77,208,225,0.4); }
.foot-social svg { width: 18px; height: 18px; fill: currentColor; }
.foot-legal { text-align: center; max-width: 600px; margin: 0 auto; color: var(--fg-3); font-size: 13px; line-height: 1.6; }
.foot-copy { text-align: center; color: var(--fg-3); font-size: 13px; margin-top: 18px; }
.foot-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 40px; }
.foot-brand img { width: 28px; height: 28px; }
.foot-brand span { font-family: var(--font-display); font-weight: 700; font-size: 17px; }

/* ============================================================
   Legal page shell
   ============================================================ */
.legal { max-width: 760px; margin: 0 auto; padding: 140px 24px 80px; }
.legal h1 { font-size: 38px; font-weight: 700; margin: 0 0 8px; }
.legal .updated { color: var(--fg-3); font-size: 14px; margin: 0 0 40px; }
.legal h2 { font-size: 22px; font-weight: 700; margin: 36px 0 12px; }
.legal p, .legal li { color: var(--fg-2); font-size: 16px; line-height: 1.6; }
.legal .placeholder { padding: 18px 20px; border-radius: var(--r-md); background: var(--surface-card); border: 1px dashed var(--border-card); color: var(--fg-3); font-family: var(--font-mono); font-size: 13px; }
.legal-back { display: inline-flex; align-items: center; gap: 7px; color: var(--teal); font-size: 15px; margin-top: 48px; }

/* ============================================================
   Sub-page shell — nav offset, breadcrumb, page header
   ============================================================ */
.subnav { position: sticky; }
.page { max-width: var(--maxw); margin: 0 auto; padding: 128px 24px 88px; }
.page-narrow { max-width: 820px; }
.crumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--fg-3); margin: 0 0 26px; flex-wrap: wrap; }
.crumb a { color: var(--fg-2); }
.crumb a:hover { color: var(--teal); }
.crumb svg { width: 14px; height: 14px; opacity: 0.5; flex: none; }
.crumb .here { color: var(--fg-2); }
.page-head { max-width: 720px; }
.page-head .eyebrow { }
.page-head h1 { font-size: 42px; font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 16px; }
.page-head p { font-size: 18px; color: var(--fg-2); line-height: 1.55; margin: 0; }
@media (max-width: 560px) { .page-head h1 { font-size: 32px; } .page { padding-top: 104px; } }

/* ============================================================
   Help center — grouped article cards
   ============================================================ */
.help-cat { margin-top: 56px; }
.help-cat-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.help-cat-head h2 { font-size: 15px; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-1); }
.help-cat-head .count { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .help-grid { grid-template-columns: 1fr; } }
.help-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease; }
.help-card:hover { transform: translateY(-4px); border-color: rgba(77,208,225,0.35); box-shadow: var(--shadow-card), 0 0 0 1px rgba(77,208,225,0.12), 0 18px 44px rgba(0,0,0,0.4); }
.help-card .hc-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(77,208,225,0.12); display: grid; place-items: center; margin-bottom: 6px; }
.help-card .hc-ic svg { width: 21px; height: 21px; stroke: var(--teal); }
.help-card h3 { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.25; }
.help-card p { font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.5; }
.help-card .hc-go { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--teal); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.help-card .hc-go svg { width: 14px; height: 14px; transition: transform .15s ease; }
.help-card:hover .hc-go svg { transform: translateX(3px); }
.help-hero-search { margin-top: 30px; display: flex; align-items: center; gap: 11px; max-width: 520px; padding: 14px 18px; border-radius: var(--r-full); background: var(--surface-card); border: 1px solid var(--border-card); color: var(--fg-3); font-size: 15px; }
.help-hero-search svg { width: 19px; height: 19px; stroke: var(--fg-3); flex: none; }

/* ============================================================
   Article template
   ============================================================ */
.article { max-width: 720px; }
.article-meta { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; font-size: 13.5px; color: var(--fg-3); }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-3); }
.article-body { margin-top: 40px; }
.article-body > * + * { margin-top: 20px; }
.article-body p, .article-body li { font-size: 17px; line-height: 1.7; color: var(--fg-2); }
.article-body h2 { font-size: 24px; font-weight: 700; color: var(--fg-1); margin-top: 44px; letter-spacing: -0.01em; }
.article-body h3 { font-size: 19px; font-weight: 700; color: var(--fg-1); margin-top: 30px; }
.article-body strong { color: var(--fg-1); font-weight: 600; }
.article-body ul, .article-body ol { padding-left: 22px; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.article-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(77,208,225,0.4); }
.article-body a:hover { text-decoration-color: var(--teal); }
.note { display: grid; grid-template-columns: 22px 1fr; gap: 13px; padding: 18px 20px; border-radius: var(--r-md); background: var(--surface-card); border: 1px solid var(--border-card); border-left: 3px solid var(--teal); }
.note.warn { border-left-color: var(--amber); }
.note.warn .note-ic { color: var(--amber); }
.note .note-ic { color: var(--teal); width: 22px; height: 22px; margin-top: 1px; }
.note .note-body { font-size: 15px; color: var(--fg-2); line-height: 1.6; }
.note .note-body strong { color: var(--fg-1); }
.a-table { width: 100%; border-collapse: collapse; margin-top: 8px; border: 1px solid var(--border-card); border-radius: var(--r-md); overflow: hidden; }
.a-table th, .a-table td { text-align: left; padding: 13px 16px; font-size: 14.5px; border-bottom: 1px solid var(--divider); }
.a-table th { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-2); background: rgba(255,255,255,0.03); }
.a-table td { color: var(--fg-2); }
.a-table tr:last-child td { border-bottom: none; }
.a-table td:first-child { color: var(--fg-1); font-weight: 500; }
.stuck { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 28px 30px; flex-wrap: wrap; }
.stuck h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.stuck p { font-size: 15px; color: var(--fg-2); margin: 0; }
.stuck .btn { flex: none; }
.article-nav { margin-top: 40px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--divider); padding-top: 24px; }
.article-nav a { font-size: 14px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 8px; }
.article-nav a:hover { color: var(--teal); }
.article-nav svg { width: 16px; height: 16px; }

/* ============================================================
   404
   ============================================================ */
.nf { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 120px 24px 80px; position: relative; overflow: hidden; }
.nf-inner { position: relative; z-index: 2; max-width: 460px; }
.nf-code { font-family: var(--font-display); font-weight: 800; font-size: 96px; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(180deg, #eafdff, #4DD0E1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf h1 { font-size: 28px; font-weight: 700; margin: 14px 0 12px; }
.nf p { font-size: 17px; color: var(--fg-2); margin: 0 0 30px; }

/* ============================================================
   ████  2026 ENHANCEMENT LAYER  ████
   Atmosphere, micro-interactions, signature moments.
   Overrides selected base rules above.
   ============================================================ */

/* ---- Site-wide grain + base atmosphere -------------------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035; mix-blend-mode: overlay;
}
/* keep real content above the grain */
.hero, .section, .footer, .legal { position: relative; z-index: 2; }
.nav { z-index: 100; }

/* ---- Kicker / eyebrow — glowing teal dot ------------------ */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 10px 1px rgba(77,208,225,0.8);
  flex: none;
}
.sec-head.center .eyebrow { justify-content: center; }

/* ---- Display headings: optical tightening + gradient accent */
.sec-title, .hero h1 { text-wrap: balance; }
.grad-word {
  background: linear-gradient(100deg, var(--teal), #aef1f8 55%, var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Buttons — depth + teal glow -------------------------- */
.btn-solid {
  background: linear-gradient(180deg, #5fd9e9, #3bbbd4);
  color: #042027; box-shadow: 0 8px 24px rgba(77,208,225,0.30), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-solid:hover { box-shadow: 0 12px 32px rgba(77,208,225,0.42), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-ghost {
  background: rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(77,208,225,0.45);
}

/* ---- Nav — clean full-width bar; gains a glass backdrop + hairline on scroll --- */
.nav { transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.nav-inner { transition: height .3s ease; }
/* scrolled: subtle translucent glass, thin bottom hairline — stays edge-to-edge */
#nav.show {
  background: rgba(13,17,23,0.68);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 1px 24px rgba(0,0,0,0.28);
}
#nav.show .nav-inner { height: 60px; }
.nav .brand img { width: 34px; height: 34px; }
.nav .brand-name { font-size: 18px; }
.nav-links a { position: relative; padding: 6px 2px; font-size: 16px; }
.nav-links a.active { color: var(--fg-1); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--teal); border-radius: 2px; box-shadow: 0 0 8px rgba(77,208,225,0.7);
}

/* ---- Hero — layered ambient field ------------------------- */
.hero { background: radial-gradient(140% 120% at 50% -10%, #1a2535, #0F1419 62%); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(77,208,225,0.18), transparent) 72% 32% / 620px 620px no-repeat,
    radial-gradient(closest-side, rgba(156,124,244,0.14), transparent) 22% 78% / 540px 540px no-repeat;
  animation: auroraDrift 16s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(120% 90% at 60% 35%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 60% 35%, #000 0%, transparent 70%);
  opacity: 0.5;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-26px,18px,0) scale(1.08); }
}
.hero-grid { position: relative; z-index: 3; }
/* hero h1 sizing lives in the .hero block above (54 / 42 ≤980 / 34 ≤520, -0.02em) —
   the earlier duplicate that forced 44/35 was removed to match the type spec. */

/* glow halo + floor behind hero phone */
.hero-visual::before {
  content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77,208,225,0.22), transparent 70%);
  z-index: 0; filter: blur(10px);
}
.hero-visual .phone { position: relative; z-index: 2; }

/* ---- Generic card hover (lift + teal edge glow) ----------- */
.edu-card, .testi, .price-card {
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.edu-card:hover, .testi:hover {
  transform: translateY(-5px);
  border-color: rgba(77,208,225,0.35);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(77,208,225,0.12), 0 18px 50px rgba(0,0,0,0.4);
}
.price-card:hover { transform: translateY(-4px); }

/* feature phones — floor glow */
.feat-media { position: relative; }
.feat-media::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77,208,225,0.14), transparent 72%);
  z-index: 0; pointer-events: none;
}
.feat-media .phone, .feat-media .report-page { position: relative; z-index: 1; }

/* ---- Section number tag on feature text ------------------- */
.feat-text .eyebrow { font-size: 12px; }

/* ---- Richer scroll reveal --------------------------------- */
.reveal { transform: translateY(18px); filter: blur(6px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.reveal.in { transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .reveal { filter: none; } }

/* ============================================================
   Stats band (after hero)
   ============================================================ */
.stats-band { border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); background: rgba(255,255,255,0.015); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat-item { padding: 46px 28px; text-align: center; position: relative; }
.stat-item + .stat-item::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--divider); }
.stat-num {
  font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #eafdff, #4DD0E1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: 15px; color: var(--fg-2); margin-top: 12px; }
.stat-label b { color: var(--fg-1); font-weight: 600; }
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { padding: 30px 20px; }
  .stat-item + .stat-item::before { left: 22%; right: 22%; top: 0; bottom: auto; width: auto; height: 1px; }
  .stat-num { font-size: 44px; }
}

/* ============================================================
   Signal marquee strip
   ============================================================ */
.marquee-band { padding: 36px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); overflow: hidden; }
.marquee-lead { text-align: center; font-size: 13px; color: var(--fg-3); letter-spacing: 1px; text-transform: uppercase; margin: 0 0 22px; font-family: var(--font-display); }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 12px; padding-right: 12px; flex: none; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.sig-chip-lg {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 16px; border-radius: var(--r-full);
  background: var(--surface-card); border: 1px solid var(--border-card);
  font-size: 14px; color: var(--fg-2); font-weight: 500;
}
.sig-chip-lg .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Feature-block divider hairline ----------------------- */
.feat + .feat { position: relative; }

/* ---- Insights phone — compact so all 6 trigger rows fit --- */
.phone-insights { width: 296px; }
.phone-insights .phone-title { font-size: 22px; margin: 2px 2px 9px; }
.phone-insights .phone-body { padding-top: 2px; padding-bottom: 6px; }
.phone-insights .tg-tabs { margin-bottom: 10px; }
.phone-insights .tg-head { margin-bottom: 4px; }
.phone-insights .tg-group { margin: 9px 0 5px; }
.phone-insights .tg-row { padding: 6px 0; }

/* ============================================================
   ████  REAL-APP SCREEN MOCKUPS (match Aura app designs)  ████
   ============================================================ */

/* ---- Forecast card (Today tab — action-led, Direction B/D) - */
.fc-card { background: var(--surface-card-hi); border: 1px solid var(--border-card-hi); border-radius: 22px; padding: 18px; }
.fc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fc-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-1); }
.tier-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: var(--r-full); font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.tier-pill .sd { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tier-pill.moderate { background: rgba(255,183,77,0.12); border: 1px solid rgba(255,183,77,0.24); color: var(--amber); }
.tier-pill.moderate .sd { background: var(--amber); }
.fc-headline { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--fg-1); }
.fc-summary { font-size: 13.5px; color: var(--fg-2); line-height: 1.45; margin-top: 8px; }
.fc-actions { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.fc-action { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.fc-action .chip { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.fc-action .chip svg { width: 18px; height: 18px; }
.fc-action .t { font-size: 14.5px; color: var(--fg-1); font-weight: 500; line-height: 1.3; }
.fc-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 11px; }
.fc-basedon { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); font-size: 13px; }
.fc-basedon svg { width: 15px; height: 15px; color: var(--fg-3); }
.fc-days { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 12.5px; }
.fc-days svg { width: 14px; height: 14px; flex: none; }

/* peek mini metric cards under the forecast */
.peek { display: flex; gap: 12px; margin-top: 14px; -webkit-mask-image: linear-gradient(180deg,#000 32%,transparent 96%); mask-image: linear-gradient(180deg,#000 32%,transparent 96%); }
.peek-card { flex: 1; background: var(--surface-glass); border: 1px solid var(--border-card); border-radius: 20px; padding: 13px 15px; }
.peek-card .ph { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.peek-card .pn { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--fg-2); }
.peek-card .sd { width: 6px; height: 6px; border-radius: 50%; }
.peek-card .pv { font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -0.02em; color: var(--fg-1); }
.peek-card .pu { font-size: 11px; color: var(--fg-2); margin-left: 3px; }

/* ---- Triggers (Insights tab — tiered ranking) ------------- */
.tg-tabs { display: flex; gap: 6px; margin: 0 0 14px; }
.tg-tab { font-size: 12px; font-weight: 600; font-family: var(--font-display); padding: 6px 12px; border-radius: var(--r-full); color: var(--fg-2); }
.tg-tab.on { background: rgba(255,255,255,0.08); color: var(--fg-1); border: 1px solid var(--border-card); }
.tg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tg-head .ic { width: 32px; height: 32px; border-radius: 10px; background: rgba(77,208,225,0.12); color: var(--teal); display: grid; place-items: center; flex: none; }
.tg-head .ic svg { width: 17px; height: 17px; }
.tg-head .tt { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-1); }
.tg-head .ts { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.tg-group { display: flex; align-items: center; gap: 7px; margin: 13px 0 7px; }
.tg-group .sd { width: 7px; height: 7px; border-radius: 50%; }
.tg-group .gl { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tg-group .gc { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; color: var(--fg-3); }
.tg-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.tg-row + .tg-row { border-top: 1px solid var(--divider); }
.tg-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,0.05); }
.tg-ic svg { width: 16px; height: 16px; }
.tg-main { flex: 1; min-width: 0; }
.tg-nrow { display: flex; align-items: center; gap: 8px; }
.tg-name { font-size: 13.5px; font-weight: 600; color: var(--fg-1); flex: 1; }
.tg-score { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.tg-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); margin-top: 6px; overflow: hidden; }
.tg-bar > span { display: block; height: 100%; border-radius: 3px; }
.tg-sub { font-size: 11px; color: var(--fg-3); margin-top: 5px; }
.tg-chev { color: var(--fg-3); flex: none; width: 15px; height: 15px; }
.tier-strong { color: var(--coral); }
.tier-strong-bg { background: rgba(255,107,107,0.14); color: var(--coral); }
.tier-strong-fill { background: var(--coral); }
.tier-mod { color: var(--amber); }
.tier-mod-bg { background: rgba(255,183,77,0.14); color: var(--amber); }
.tier-mod-fill { background: var(--amber); }

/* ---- Signal nudge tray (Today tab — "N signals…") --------- */
.ns-tray { border-radius: 18px; background: var(--surface-glass); border: 1px solid var(--border-card); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.ns-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.ns-dots { display: flex; }
.ns-dots .sd { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--bg-1); }
.ns-dots .sd + .sd { margin-left: -3px; }
.ns-title { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.ns-chev { color: var(--fg-3); width: 14px; height: 14px; }
.ns-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; }
.ns-row + .ns-row { border-top: 1px solid var(--divider); }
.ns-ic { width: 30px; height: 30px; border-radius: 11px; display: grid; place-items: center; flex: none; margin-top: 1px; }
.ns-ic svg { width: 17px; height: 17px; }
.ns-main { flex: 1; min-width: 0; }
.ns-trow { display: flex; align-items: baseline; gap: 8px; }
.ns-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.ns-ago { font-size: 11px; color: var(--fg-3); font-family: var(--font-display); font-weight: 600; flex: none; }
.ns-advice { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; }
.ns-advice svg { flex: none; margin-top: 2px; width: 13px; height: 13px; }
.ns-advice .a { font-size: 12.5px; color: var(--fg-1); font-weight: 500; line-height: 1.32; }
.ns-x { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--border-card); color: var(--fg-3); display: grid; place-items: center; flex: none; }
.ns-x svg { width: 12px; height: 12px; }

/* slim forecast header above the nudge tray (Block 3) */
.fc-slim { background: var(--surface-card-hi); border: 1px solid var(--border-card-hi); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-slim .h { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg-1); }

/* ---- Clinical report v2 ----------------------------------- */
.rp-patient { font-size: 8.5px; color: #5C6477; margin: 6px 0 13px; }
.rp-patient b { color: #1A1D26; }
.rp-stat-sub { font-size: 7px; color: #A6ADBB; margin-top: 2px; }
.rp-moh { background: rgba(255,183,77,0.10); border: 1px solid rgba(255,183,77,0.24); border-radius: 11px; padding: 12px 13px; margin: 13px 0 0; }
.rp-moh-head { display: flex; align-items: center; gap: 7px; }
.rp-moh-head svg { width: 14px; height: 14px; color: #B26B00; flex: none; }
.rp-moh-title { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: #9A5A00; }
.rp-moh-body { font-size: 9px; color: #5C6477; line-height: 1.45; margin-top: 5px; }
.rp-moh-body b { color: #1A1D26; }
.rp-moh-foot { font-size: 8px; color: #A6ADBB; margin-top: 6px; }
.rp-class { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid #E4E8F0; }
.rp-class .cl { font-size: 9px; color: #8E95A5; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.rp-class .cv { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #1A1D26; }
.rp-class .cv .d { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.rp-sec-title { display: flex; align-items: center; justify-content: space-between; margin: 15px 0 9px; }
.rp-sec-title .st { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #1A1D26; }
.rp-sec-title .sn { font-size: 8px; color: #A6ADBB; }
.rp-dis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rp-dcard { background: #F4F6FA; border-radius: 10px; padding: 11px 12px; display: flex; gap: 10px; align-items: flex-start; }
.rp-dscore { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: #1A1D26; line-height: 1; }
.rp-dname { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: #1A1D26; }
.rp-dgrade { font-size: 9px; color: #9A5A00; font-weight: 600; margin: 2px 0 5px; }
.rp-dmeta { font-size: 7.5px; color: #8E95A5; line-height: 1.35; }
.rp-dchip { display: inline-block; font-size: 7.5px; background: #fff; border: 1px solid #E4E8F0; color: #5C6477; padding: 2px 6px; border-radius: 20px; margin-top: 5px; }

/* ============================================================
   ████  2026 REDESIGN LAYER — locked section inventory  ████
   Hero dot-radar · AI panel · science tiles · format-tolerant
   pricing · editorial + Watch device mockups.
   ============================================================ */

/* ---- Hero dot-radar signal pulse (echoes the brand mark) --- */
.hero-radar { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; pointer-events: none; }
.hero-radar .rr {
  position: absolute; border-radius: 50%; border: 1px solid rgba(77,208,225,0.14);
  box-shadow: inset 0 0 40px rgba(77,208,225,0.04);
}
.hero-radar .rr.r1 { width: 300px; height: 300px; }
.hero-radar .rr.r2 { width: 470px; height: 470px; border-color: rgba(77,208,225,0.10); }
.hero-radar .rr.r3 { width: 660px; height: 660px; border-color: rgba(77,208,225,0.06); }
.hero-radar .rr.dotted { border-style: dashed; border-color: rgba(77,208,225,0.12); }
.hero-radar .pulse {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(77,208,225,0.34); opacity: 0;
  animation: radarPulse 5.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.hero-radar .pulse.p2 { animation-delay: 1.8s; }
.hero-radar .pulse.p3 { animation-delay: 3.6s; }
.hero-radar .core {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d6faff, var(--teal));
  box-shadow: 0 0 22px 4px rgba(77,208,225,0.55);
}
@keyframes radarPulse {
  0%   { transform: scale(0.5); opacity: 0; }
  12%  { opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-radar .pulse { animation: none; display: none; } }
@media (max-width: 980px) { .hero-radar { opacity: 0.55; } }

/* ---- Feature panel: section-tinted media glow ------------- */
.feat[data-tint="teal"] .feat-media::before { background: radial-gradient(closest-side, rgba(77,208,225,0.16), transparent 72%); }
.feat[data-tint="purple"] .feat-media::before { background: radial-gradient(closest-side, rgba(156,124,244,0.16), transparent 72%); }
.feat[data-tint="amber"] .feat-media::before { background: radial-gradient(closest-side, rgba(255,183,77,0.14), transparent 72%); }
.feat[data-tint="coral"] .feat-media::before { background: radial-gradient(closest-side, rgba(255,107,107,0.13), transparent 72%); }

/* ---- Editorial insight mockup ("What we've learned") ------ */
.ed-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); }
.ed-chip .sd { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 8px rgba(156,124,244,0.8); }
.ed-take { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.24; letter-spacing: -0.015em; color: var(--fg-1); margin: 12px 0 0; }
.ed-take em { color: var(--purple); font-style: normal; }
.ed-rule { height: 1px; background: var(--divider); margin: 15px 0; }
.ed-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; }
.ed-metric + .ed-metric { border-top: 1px solid var(--divider); }
.ed-metric .ml { font-size: 12.5px; color: var(--fg-2); }
.ed-metric .mv { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-1); font-weight: 600; }
.ed-metric .mv.up { color: var(--coral); }
.ed-foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 11.5px; color: var(--fg-3); }
.ed-foot svg { width: 13px; height: 13px; flex: none; }

/* ---- Apple Watch + iPhone pairing mockup ----------------- */
.pair { position: relative; display: flex; align-items: flex-end; gap: 0; }
.watch {
  position: relative; z-index: 3; width: 132px; flex: none; margin-right: -34px; margin-bottom: 40px;
  border-radius: 38px; padding: 8px; background: linear-gradient(155deg, #2a3340, #10151c);
  box-shadow: 0 26px 54px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
.watch::before, .watch::after { content: ""; position: absolute; right: -4px; width: 5px; border-radius: 3px; background: linear-gradient(180deg,#3a4452,#1a212a); }
.watch::before { top: 34px; height: 26px; }
.watch::after { top: 66px; height: 16px; }
.watch-screen { border-radius: 30px; background: #000; aspect-ratio: 132 / 160; padding: 12px 13px; display: flex; flex-direction: column; overflow: hidden; }
.watch-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); }
.watch-top .wt { font-size: 11px; color: var(--fg-3); font-weight: 600; }
.watch-top .wtime { font-size: 13px; color: var(--teal); font-weight: 700; }
.watch-tier { margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px; border-radius: var(--r-full); font-family: var(--font-display); font-weight: 700; font-size: 12px; background: rgba(255,183,77,0.16); color: var(--amber); }
.watch-tier .sd { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.watch-head { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--fg-1); margin-top: 9px; }
.watch-sub { font-size: 10px; color: var(--fg-2); line-height: 1.32; margin-top: 5px; }
.watch-metrics { margin-top: auto; display: flex; gap: 10px; padding-top: 8px; }
.watch-metrics .wm { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-3); display: flex; align-items: center; gap: 4px; }
.watch-metrics .wm .sd { width: 5px; height: 5px; border-radius: 50%; }
.pair .phone { width: 236px; }
@media (max-width: 480px) { .watch { width: 108px; margin-right: -26px; margin-bottom: 30px; } .pair .phone { width: 200px; } }

/* ============================================================
   AI PANEL — the differentiator moment (purple/teal wash)
   ============================================================ */
.ai-panel { position: relative; overflow: hidden; }
.ai-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(156,124,244,0.16), transparent 70%) 18% 30% / 720px 720px no-repeat,
    radial-gradient(closest-side, rgba(77,208,225,0.12), transparent 70%) 88% 82% / 620px 620px no-repeat;
}
.ai-wrap { position: relative; z-index: 2; }
.ai-shell {
  background: linear-gradient(150deg, rgba(156,124,244,0.10), rgba(77,208,225,0.06) 60%, rgba(255,255,255,0.02));
  border: 1px solid rgba(156,124,244,0.28);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-hero), var(--inner-card);
  padding: 52px 48px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center;
}
.ai-shell .eyebrow { color: var(--purple); }
.ai-shell .eyebrow::before { background: var(--purple); box-shadow: 0 0 10px 1px rgba(156,124,244,0.8); }
.ai-title { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; }
.ai-title em { font-style: normal; background: linear-gradient(100deg, var(--purple), #c9b6ff 55%, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-lede { font-size: 17px; color: var(--fg-2); line-height: 1.55; margin: 0 0 26px; max-width: 46ch; }
.ai-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ai-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.ai-step .n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--purple); background: rgba(156,124,244,0.14); border: 1px solid rgba(156,124,244,0.3); flex: none; }
.ai-step h4 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 3px 0 3px; }
.ai-step p { font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.5; }

/* on-device diagram inside a phone outline */
.ai-diagram { display: flex; justify-content: center; }
.ai-device { width: 300px; border-radius: 40px; padding: 22px 20px; background: rgba(11,15,19,0.6); border: 1px solid rgba(156,124,244,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 70px rgba(0,0,0,0.45); position: relative; }
.ai-device .db-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--bg-1); padding: 2px 12px; border-radius: var(--r-full); border: 1px solid rgba(156,124,244,0.3); font-size: 10.5px; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); white-space: nowrap; }
.ai-node { border-radius: 16px; padding: 14px 15px; border: 1px solid var(--border-card); background: var(--surface-card); }
.ai-node .nl { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.ai-node .nv { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg-1); margin-top: 3px; }
.ai-node.signals { border-color: rgba(77,208,225,0.3); }
.ai-node.signals .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ai-node.signals .chips span { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-2); background: rgba(255,255,255,0.05); border: 1px solid var(--border-card); border-radius: var(--r-full); padding: 3px 8px; }
.ai-node.forecast { border-color: rgba(156,124,244,0.4); background: linear-gradient(140deg, rgba(156,124,244,0.14), rgba(77,208,225,0.06)); }
.ai-node.forecast .tier-pill { margin-top: 8px; }
.ai-arrow { display: grid; place-items: center; padding: 7px 0; color: var(--purple); }
.ai-arrow svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .ai-shell { grid-template-columns: 1fr; gap: 38px; padding: 38px 26px; }
  .ai-diagram { order: -1; }
}

/* ============================================================
   SCIENCE — 3 concept tiles above the evidence rows
   ============================================================ */
.sci-tiles { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; margin-top: 48px; align-items: stretch; }
.sci-tile { padding: 30px 28px; display: flex; flex-direction: column; }
.sci-tile.feature { grid-row: span 1; }
.sci-tile .edu-ic { margin-bottom: 18px; }
.sci-tile h3 { font-size: 20px; font-weight: 700; margin: 0 0 11px; letter-spacing: -0.01em; }
.sci-tile.feature h3 { font-size: 24px; }
.sci-tile p { font-size: 14.5px; color: var(--fg-2); margin: 0; line-height: 1.55; }
.sci-tile .stat-callout { margin-top: auto; }
@media (max-width: 900px) { .sci-tiles { grid-template-columns: 1fr; } }

/* ---- Evidence rows: hedged sources ------------------------ */
.evidence.tight { margin-top: 40px; }

/* ============================================================
   PRICING — format-tolerant price element
   ============================================================ */
.price-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 4px; min-height: 44px; }
.price-value {
  font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.02em;
  color: var(--teal); line-height: 1.05; overflow-wrap: anywhere;
}
.price-value.free { color: var(--fg-1); }
.price-note { font-size: 13.5px; color: var(--fg-3); margin: 0 0 6px; line-height: 1.4; }
.price-note b { color: var(--fg-2); font-weight: 600; }

/* ============================================================
   Final CTA band
   ============================================================ */
.final-cta { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(77,208,225,0.05), transparent 60%); border-top: 1px solid var(--divider); }
.final-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(77,208,225,0.14), transparent 70%) 50% 0% / 900px 520px no-repeat;
}
.final-inner { position: relative; z-index: 2; text-align: center; max-width: 640px; margin: 0 auto; }
.final-inner h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 16px; }
.final-inner .lede { font-size: 18px; color: var(--fg-2); margin: 0 0 30px; }
.final-cta .appstore { margin: 0 auto; }
.final-sub { font-size: 13.5px; color: var(--fg-3); margin-top: 18px; }
@media (max-width: 520px) { .final-inner h2 { font-size: 30px; } }

/* ---- Footer: help + disclaimer always present ------------- */
.foot-nav { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; }
.foot-nav a { color: var(--fg-2); font-size: 15px; }
.foot-nav a:hover { color: var(--fg-1); }

/* ---- Static <details> FAQ (renders + works with JS off) --- */
details.faq-item > summary { list-style: none; cursor: pointer; }
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item .faq-a { max-height: none; overflow: visible; }
details.faq-item[open] > summary { color: var(--teal); }
details.faq-item[open] .faq-toggle { color: var(--teal); }
details.faq-item[open] .faq-toggle::after { transform: translate(-50%,-50%) scaleY(0); }

/* ---- Apple Watch — one-tap log face ----------------------- */
.watch-log { margin: 12px auto 2px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #042027; background: linear-gradient(180deg, #5fd9e9, #3bbbd4); box-shadow: 0 8px 20px rgba(77,208,225,0.4), inset 0 1px 0 rgba(255,255,255,0.45); }
.watch-log svg { width: 26px; height: 26px; }
.watch-head.center, .watch-sub.center { text-align: center; }
.watch-checkin { margin-top: auto; padding-top: 10px; text-align: center; font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--teal); display: flex; align-items: center; justify-content: center; gap: 4px; }
.watch-checkin svg { width: 11px; height: 11px; }

/* ---- Science disclaimer + FAQ more link ------------------- */
.sci-disclaimer { max-width: 760px; margin: 34px auto 0; text-align: center; font-size: 13px; color: var(--fg-3); line-height: 1.6; }
.faq-more { text-align: center; margin-top: 34px; font-size: 15px; color: var(--fg-3); }
.faq-more .link-teal { margin-left: 4px; }

/* ============================================================
   ████  JULY-2026 REVISION LAYER  ████
   Ratings strip · cropped signal card · editorial quote-card ·
   feature sub-lines · diary-vs contrast · AI proof column.
   ============================================================ */

/* ---- Dormant ratings strip (content-drop at launch) ------- */
.ratings-strip { border-bottom: 1px solid var(--divider); background: rgba(255,255,255,0.012); position: relative; z-index: 2; }
.ratings-inner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 24px; flex-wrap: wrap; }
.rs-stars { display: flex; gap: 4px; }
.rs-stars svg { width: 18px; height: 18px; fill: none; stroke: var(--fg-3); stroke-width: 1.4; }
.ratings-strip[data-state="live"] .rs-stars svg { fill: var(--teal); stroke: var(--teal); }
.rs-text { font-size: 14.5px; color: var(--fg-2); margin: 0; }
.rs-text b { color: var(--fg-1); font-weight: 600; }
.rs-badge { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-full); background: rgba(255,255,255,0.06); border: 1px solid var(--border-card); color: var(--fg-3); }
.ratings-strip[data-state="live"] .rs-badge { display: none; }

/* ---- Testimonials (dormant until real quotes exist) -------- */
.testi-band[hidden] { display: none; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testi { margin: 0; padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.testi blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--fg-1); }
.testi blockquote::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: 0.6; margin-bottom: 10px; color: var(--teal); opacity: 0.7; }
.testi figcaption { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.ti-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--teal); background: rgba(77,208,225,0.12); border: 1px solid rgba(77,208,225,0.25); }
.ti-who { font-size: 13px; color: var(--fg-3); }
@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
@media (max-width: 560px) { .ratings-inner { gap: 11px; } .rs-text { font-size: 13.5px; text-align: center; } }

/* ---- Panel 03 — cropped signal card (no bezel) ------------ */
.signal-crop { position: relative; z-index: 1; width: 350px; max-width: 100%; }
.sc-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px 2px; }
.sc-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 9px rgba(255,183,77,0.85); }
.signal-crop .ns-tray { box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.06); }
@media (max-width: 860px) { .signal-crop { width: 100%; max-width: 380px; margin: 0 auto; } }

/* ---- Panel 04 — floating editorial quote-card ------------- */
.quote-card {
  position: relative; z-index: 1; width: 410px; max-width: 100%;
  background: linear-gradient(150deg, rgba(156,124,244,0.12), rgba(255,255,255,0.02) 70%);
  border: 1px solid rgba(156,124,244,0.30); border-radius: var(--r-xl);
  padding: 32px 34px 26px; box-shadow: var(--shadow-hero), var(--inner-card);
}
.quote-card .qc-mark { position: absolute; top: 6px; right: 24px; font-family: Georgia, "Times New Roman", serif; font-size: 96px; line-height: 1; color: rgba(156,124,244,0.22); pointer-events: none; }
.quote-card .ed-chip { position: relative; }
.qc-quote { font-family: var(--font-display); font-size: 25px; font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; color: var(--fg-1); margin: 16px 0 0; border: 0; padding: 0; quotes: none; }
.qc-quote em { font-style: normal; color: var(--purple); }
.qc-metrics { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--divider); }
.qc-cap { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 11.5px; color: var(--fg-3); }
.qc-cap svg { width: 13px; height: 13px; flex: none; }
@media (max-width: 860px) { .quote-card { width: 100%; max-width: 460px; margin: 0 auto; } }

/* Learned card — mirrors the shipped Insights "What we've learned" tile */
.learned-card { width: min(460px, 100%); margin: 0 auto; padding: 22px 24px 14px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(156,124,244,0.14), rgba(156,124,244,0.04));
  border: 1px solid rgba(156,124,244,0.25); }
.lc-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--purple); }
.lc-tile { flex: none; width: 34px; height: 34px; border-radius: 11px; background: rgba(156,124,244,0.12); border: 1px solid rgba(156,124,244,0.2); display: grid; place-items: center; color: var(--purple); }
.lc-tile svg { width: 16px; height: 16px; }
.lc-headline { margin: 13px 0 0; font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.012em; line-height: 1.32; color: var(--fg-1); }
.lc-headline em { font-style: normal; color: var(--coral); }
.lc-div { height: 1px; background: rgba(156,124,244,0.18); margin-top: 14px; }
.lc-rows { list-style: none; margin: 5px 0 0; padding: 0; }
.lc-rows li { display: flex; align-items: flex-start; gap: 11px; padding: 8px 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }
.lc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; }
.lc-chev { flex: none; width: 13px; height: 13px; color: var(--fg-3); margin-top: 4px; margin-left: auto; }
.lc-cap { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11px; color: var(--fg-3); }
.lc-cap svg { width: 12px; height: 12px; flex: none; }

/* ---- Feature sub-line (collapsed bullets, panels 03/04/06) - */
.feat-subline { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--fg-1); font-weight: 500; line-height: 1.5; margin: 0; }
.feat-subline .ck { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--teal); }

/* ---- Science: "A diary asks you. A sentry watches." ------- */
.diary-vs h3 { font-size: 20px; font-weight: 700; margin: 0 0 14px; letter-spacing: -0.01em; }
.diary-vs .dv-grid { display: grid; grid-template-columns: 1fr; margin-top: 4px; border: 1px solid var(--border-card); border-radius: var(--r-md); overflow: hidden; }
.dv-row { padding: 20px 22px; }
.dv-row.them { background: rgba(255,255,255,0.02); }
.dv-row.us { background: rgba(77,208,225,0.06); border-top: 1px solid var(--border-card); }
.dv-row .dv-lead { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 7px; color: var(--fg-1); }
.dv-row.them .dv-lead { color: var(--fg-2); }
.dv-tag { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-right: 9px; }
.dv-row.them .dv-tag { color: var(--fg-3); }
.dv-row.us .dv-tag { color: var(--teal); }
.dv-desc { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; margin: 0; }

/* ---- AI panel — privacy proof column under the diagram ---- */
.ai-diagram { flex-direction: column; align-items: center; gap: 22px; }
.ai-proof { list-style: none; padding: 0; margin: 0; width: 300px; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ai-proof li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-1); line-height: 1.28; }
.ai-proof .priv-ic { width: 32px; height: 32px; flex: none; }
.ai-proof .priv-ic svg { width: 17px; height: 17px; }
@media (max-width: 480px) { .ai-proof { grid-template-columns: 1fr; } }

/* ============================================================
   ████  ROUND-5 LAYER  ████
   Two-watch pair · AI pipeline accents + flow pulse ·
   marquee reduced-motion fallback.
   ============================================================ */

/* ---- Section 06 — two Apple Watch bezels ------------------ */
.watch-pair { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 26px; }
.watch-pair .watch { margin: 0; width: 156px; }
.watch-pair .watch-idle { transform: rotate(-3deg); }
.watch-pair .watch-active { transform: rotate(3deg); }
.watch-top .wt.on { color: var(--coral); }
.watch-idle .watch-log { margin-top: 12px; }
.watch-since { font-size: 10px; color: var(--fg-3); text-align: center; margin-top: 3px; }
.watch-timer { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--teal); text-align: center; margin: 12px 0 0; }
.watch-end { margin-top: auto; align-self: stretch; text-align: center; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: #2a0000; background: linear-gradient(180deg,#ff8a8a,#ff5a5a); border: none; border-radius: var(--r-full); padding: 8px 0; cursor: pointer; }
.watch-sync { margin-top: 9px; display: flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--font-display); font-size: 9px; font-weight: 600; color: var(--teal); }
.watch-sync .sd { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.watch-idle .watch-sync { margin-top: auto; padding-top: 10px; }

/* Watch glance v2 — mirrors the shipped watch app (risk-halo hero + tap pair) */
.wg-time { text-align: right; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: #fff; }
.wg-eyebrow { text-align: center; font-family: var(--font-display); font-size: 7.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.wg-eyebrow { margin-top: 8px; }
.wg-level { text-align: center; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--amber); text-shadow: 0 0 16px rgba(255,183,77,0.55), 0 0 38px rgba(255,183,77,0.22); margin-top: 2px; }
.wg-sub { text-align: center; font-size: 9.5px; color: var(--fg-2); line-height: 1.3; margin-top: 3px; }
.wg-cta { margin-top: auto; align-self: stretch; text-align: center; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: #042027; background: linear-gradient(180deg, #5fd9e9, #3bbbd4); border-radius: var(--r-full); padding: 8px 0; }
.wg-cta.end { color: #fff; background: linear-gradient(180deg, #ff7a70, #f4564a); }
.wg-status { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; font-family: var(--font-display); font-size: 6.8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--fg-2); }
.wg-status .sd { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 8px var(--coral); }
.wg-timer { text-align: center; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin-top: 7px; }
.wg-since { text-align: center; font-size: 9px; color: var(--fg-3); margin-top: 3px; }
@media (max-width: 480px) {
  .watch .watch-screen { padding: 10px 11px; }
  .wg-level { font-size: 20px; }
  .wg-sub { font-size: 8.5px; line-height: 1.25; margin-top: 2px; }
  .wg-eyebrow { margin-top: 4px; font-size: 6.8px; letter-spacing: 0.1em; white-space: nowrap; }
  .wg-status { margin-top: 7px; }
  .wg-timer { font-size: 18px; margin-top: 5px; }
  .wg-cta { font-size: 10.5px; padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) { .watch-pair .watch-idle, .watch-pair .watch-active { transform: none; } }
@media (max-width: 480px) { .watch-pair { gap: 14px; } .watch-pair .watch { width: 130px; } }
@media (max-width: 360px) { .watch-pair { flex-direction: column; } }

/* ---- AI pipeline — per-stage accents + downward flow ------ */
.ai-node.signals { border-color: rgba(77,208,225,0.35); }
.ai-node.signals .nl { color: var(--teal); }
.ai-node.baseline .nl { color: var(--fg-3); }
.ai-node.forecast { border-color: rgba(255,183,77,0.34); background: linear-gradient(140deg, var(--risk-moderate-wash), rgba(255,255,255,0.02)); }
.ai-node.forecast .nl { color: var(--amber); }
.ai-node.signals .chips .more { color: var(--teal); background: rgba(77,208,225,0.12); border-color: rgba(77,208,225,0.32); font-weight: 700; }

/* ---- Marquee — more chip + reduced-motion static wrap ----- */
.marquee-track .more { color: var(--teal); border-color: rgba(77,208,225,0.32); background: rgba(77,208,225,0.10); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .marquee-track.dup { display: none; }
}

/* ---- Mobile hero (≤768px) — Claude Design "mobile-hero" patch, merged 2026-07-12.
   Desktop (>768px) intentionally untouched. Product peek: top of the Today
   screen crops at the hero's bottom edge so the forecast card is above the
   fold on phones. ------------------------------------------------------- */

/* Hero buttons: same radius AND same size at every breakpoint (Kieran). */
.hero-cta .btn-ghost { border-radius: 12px; }
.hero-cta .appstore, .hero-cta .btn-ghost {
  height: 54px; min-height: 0; box-sizing: border-box;
  padding-top: 0; padding-bottom: 0; align-items: center;
  min-width: 186px; justify-content: center;
}
/* Optical compensation: an outlined shape reads slightly larger than a
   filled one at identical pixels — trim the ghost 2px so the pair LOOKS
   equal (boxes verified identical before this). */
.hero-cta .btn-ghost { height: 52px; min-width: 182px; }

/* The two subheadline lengths: full line on desktop, 2-line cut on phones. */
.hero-sub .sub-short { display: none; }

@media (max-width: 768px) {
  /* 1 · Reclaim dead space: release the 100vh flex lock,
        halve the nav → eyebrow gap, end the hero at the crop line */
  .hero { min-height: 0; display: block; padding: 88px 0 0; }
  .hero-grid { gap: 0; }
  /* the radar's core dot sits behind the copy on mobile — rings only */
  .hero-radar .core { display: none; }

  /* 2 · Type: H1 untouched (brand line); sub takes the 2-line cut */
  .hero h1 { margin-bottom: 14px; }
  .hero-sub { font-size: 16px; line-height: 1.45; max-width: 32ch; margin: 0 auto 22px; }
  .hero-sub .sub-full { display: none; }
  .hero-sub .sub-short { display: inline; }

  /* 3 · Lighter CTA moment: badge + ghost share one row.
        Badge box model preserved (flips to a real link at launch). */
  .hero-cta { gap: 10px; }
  .hero-cta .appstore, .hero-cta .btn-ghost { height: 46px; min-width: 150px; }
  .hero-cta .btn-ghost { height: 44px; min-width: 146px; }
  .hero-cta .appstore { padding: 0 14px; gap: 8px; min-height: 0; }
  .hero-cta .appstore svg { width: 20px; height: 20px; }
  .hero-cta .appstore .as-lg { font-size: 15px; }
  .hero-cta .btn-ghost { padding: 0 14px; font-size: 13.5px; min-height: 0; }

  /* 4 · Product peek: top ~52% of the Today screen, glowing, cropped
        at the hero's bottom edge — the forecast card lands inside. */
  .hero-visual { height: 300px; margin-top: 26px; align-items: flex-start; overflow: hidden; }
  .hero-visual::before { width: 320px; height: 320px; }
  .hero-visual .phone { width: 280px; }
}

/* SE-class widths — nothing clips at 320px */
@media (max-width: 360px) {
  .hero-visual { height: 266px; }
  .hero-visual .phone { width: 244px; }
}

/* Entrance: one slow rise on load. Finite (replaces the infinite floaty
   loop on mobile), reduced-motion-gated, zero flashing. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero-visual .phone { animation: heroPeekRise .9s cubic-bezier(.2,.7,.2,1) .12s both; }
}
@keyframes heroPeekRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}