@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-italic-latin.woff2') format('woff2');
}

:root {
  --midnight: #0a2748;
  --deep-navy: #123e6d;
  --primary: #2196f3;
  --primary-light: #64b5f6;
  --success: #47b36a;
  --teal: #5fc9c7;
  --teal-deep: #1ea7a3;
  --ice: #f5fafe;
  --soft-grey: #f2f5f7;
  --slate: #5f6e7a;

  --bg: var(--ice);
  --surface: #ffffff;

  --text-primary: var(--midnight);
  --text-secondary: #3f5568;
  --text-muted: #7b8fa1;

  --accent: var(--primary);
  --accent-soft: rgba(33, 150, 243, 0.08);

  --border: rgba(10, 39, 72, 0.12);
  --border-light: rgba(10, 39, 72, 0.07);

  --error: #d64265;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', var(--font-sans);

  --shadow-lg: 0 24px 60px rgba(10, 39, 72, 0.14);
  --shadow-card: 0 12px 32px rgba(10, 39, 72, 0.10);
  --shadow-btn: 0 10px 28px rgba(33, 150, 243, 0.30);
}

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

[hidden] { display: none !important; }

html, body {
  background-color: var(--bg);
  min-height: 100dvh;
  width: 100%;
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::selection { background: rgba(33, 150, 243, 0.25); }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Tighter above the title (top) than below each section's content (bottom) */
.section { padding: 32px 0 56px; position: relative; }

html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

.section-lbl {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}

.section-head {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.section-head strong {
  font-weight: 700;
  color: var(--primary);
}

.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.divider-accent {
  width: 44px; height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}
.divider-line {
  flex: 0 1 120px; height: 1px;
  background: var(--border);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 32px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(33, 150, 243, 0.4);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }


.hero {
  position: relative;
  /* Turmeric Co sizing: taller than the largest viewport so the hero fully
     covers the first screen in any browser-chrome state — the next section
     can never peek through */
  min-height: calc(100lvh + 6rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(33, 150, 243, 0.08), transparent 65%),
    var(--ice);
}

.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  background-repeat: repeat;
}

.hero-glow {
  position: absolute;
  top: -22%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 620px;
  background: radial-gradient(ellipse at center, rgba(33, 150, 243, 0.08), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.hero-main {
  position: relative;
  z-index: 1;
  /* centre the lockup + timer within the first screenful (not the taller
     hero box, which extends past the fold) */
  flex: 0 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 800px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 44px 24px 28px;
  padding-top: max(env(safe-area-inset-top), 44px);
}

/* Stacked logo lockup — icon above wordmark */
.hero-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.hero-logo {
  width: 46px;
  height: 46px;
}

.hero-wordmark {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary);
  line-height: 1;
}
.hero-wordmark span {
  font-weight: 400;
  color: var(--primary-light);
}

.hero-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin: 0 0 6px;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--midnight);
}
/* Phones: track the viewport so "…the rest of your life." holds one line */
@media (max-width: 620px) {
  .hero-headline,
  html[data-theme="dark"] .hero-headline { font-size: 4.5vw; }
}
.hero-headline span { color: var(--midnight); }

/* Campaign phrase — blue accent, same face as the rest of the headline */
.headline-highlight {
  font-style: normal;
  color: var(--primary);
}

.hero-sub-detail {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 24px;
  max-width: 560px;
}


.hero-tagline {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  max-width: 21ch;
  margin: 26px 0 0;
}

.countdown {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.cd-group {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.cd-num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--midnight);
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.cd-colon {
  font-size: 1rem;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .countdown { gap: 8px; }
  .cd-num { font-size: 1.1rem; }
}

/* Laptop/desktop: bigger lockup and tagline on the landing screen */
@media (min-width: 900px) {
  .hero .hero-logo { width: 80px; height: 80px; }
  .hero .hero-wordmark { font-size: 2.4rem; }
  .hero .hero-lockup { gap: 18px; margin-bottom: 32px; }
  .hero .hero-tagline { font-size: 1.5rem; max-width: 26ch; }
}

.waitlist-form.waitlist-inline {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  max-width: 640px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.waitlist-form.waitlist-inline .wf-input {
  flex: 1 1 180px;
  width: auto;
  min-width: 0;
  padding: 13px 16px;
  font-size: 0.9rem;
  background: var(--surface);
}
.waitlist-form.waitlist-inline .wf-input[type="email"] { flex: 1.35 1 240px; }
.waitlist-form.waitlist-inline .wf-submit {
  flex: 0 0 auto;
  width: auto;
  padding: 13px 24px;
  font-size: 0.92rem;
}
.waitlist-form.waitlist-inline .wf-err { flex-basis: 100%; }

@media (max-width: 620px) {
  .waitlist-form.waitlist-inline .wf-input,
  .waitlist-form.waitlist-inline .wf-submit {
    flex: 1 1 100%;
    width: 100%;
  }
  .wf-input,
  .waitlist-form.waitlist-inline .wf-input { font-size: 1rem; }
}

.wf-input:-webkit-autofill,
.wf-input:-webkit-autofill:hover,
.wf-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--text-primary);
}

/* Mid-page signup section (form moved out of the hero) */
.signup-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.signup-head {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.signup-head span { color: var(--primary); }
.signup-copy {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signup-copy p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.signup .waitlist-form.waitlist-inline { width: 100%; }

/* Hero photo cards (Embark-style row) */
.hero-cards {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 26px);
  padding: 8px clamp(32px, 4.5vw, 80px) 0;
  width: 100%;
  margin: 0 auto;
}

.hero-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 205px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1360px) {
  .hero-cards .hero-card:nth-child(7) { display: none; }
}
@media (max-width: 1180px) {
  .hero-cards .hero-card:nth-child(6) { display: none; }
}
@media (max-width: 1000px) {
  .hero-cards .hero-card:nth-child(5) { display: none; }
}
@media (max-width: 820px) {
  .hero-cards .hero-card:nth-child(4) { display: none; }
}
@media (max-width: 680px) {
  .hero-cards { padding: 8px 20px 0; }
}
@media (max-width: 560px) {
  /* No photo section on phones */
  .clients { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll indicator */
/* Pinned to the hero's bottom edge, out of the flow, so the logo + timer
   centre against the full viewport rather than the space above it */
.scroll-indicator {
  position: absolute;
  /* Turmeric Co value: high enough above the hero's (below-fold) bottom edge
     to stay visible whether or not the mobile address bar is showing */
  bottom: max(9rem, calc(env(safe-area-inset-bottom) + 8.5rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0 26px;
  text-decoration: none;
}
.scroll-indicator span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scroll-line {
  width: 2px;
  height: 44px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--primary), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-line { animation: none; }
}

/* Theme toggle — fixed top-right */
.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: color 0.15s ease, transform 0.2s ease;
}
.theme-toggle:hover { color: var(--primary); transform: scale(1.06); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }

/* ===== WHY — bento grid ===== */
.why {
  border-top: 1px solid var(--border-light);
  background: linear-gradient(180deg, #ffffff, transparent 55%);
}
.section-header { max-width: 640px; }

.container-bento { max-width: 1240px; }

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 20px;
}

.bento-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* let cards shrink below their content's natural width so the
     grid never overflows narrow viewports */
  min-width: 0;
}

/* Row spans — mirrors the reference layout */
.bento-copy { grid-column: span 6; }
.bento > .bento-photo:nth-of-type(2) { grid-column: span 6; }
.bento > .bento-photo:nth-of-type(3) { grid-column: span 3; }
.bento > .bento-stat:nth-of-type(4) { grid-column: span 5; }
.bento > .bento-stat:nth-of-type(5) { grid-column: span 4; }
.bento > .bento-stat:nth-of-type(6) { grid-column: span 4; }
.bento > .bento-photo:nth-of-type(7) { grid-column: span 5; }
.bento > .bento-stat:nth-of-type(8) { grid-column: span 3; }

/* Copy card */
.bento-copy {
  background: var(--midnight);
  color: #ffffff;
  padding: 40px 44px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bento-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 14px;
}
.bento-head {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 16px;
}
.bento-body {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(245, 250, 254, 0.82);
  margin: 0;
}

/* Photo cards */
.bento-photo { position: relative; }
/* Portrait video card — locked to the clip's own aspect so the full
   frame is always visible, never cropped */
.bento-photo.bento-portrait {
  aspect-ratio: 1166 / 1282;
  align-self: start;
}
.bento-photo.bento-square {
  aspect-ratio: 1168 / 884;
  align-self: start;
}
.bento-photo.bento-wide {
  aspect-ratio: 1280 / 718;
  align-self: start;
}
.bento-photo img,
.bento-photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stat cards */
.bento-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 30px;
  min-height: 220px;
}
.stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.stat-lbl {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.stat-light {
  background: #e7f1fb;
  color: var(--midnight);
}
.stat-light .stat-num { color: var(--deep-navy); }
.stat-icon {
  width: 26px;
  height: 26px;
  color: var(--primary);
  align-self: flex-end;
}

.stat-solid {
  background: var(--deep-navy);
  color: #ffffff;
}
.stat-solid .stat-num { color: #ffffff; }
.stat-solid .stat-lbl { color: rgba(245, 250, 254, 0.88); }

/* "Any ACL injury" card — sentence-length headline, not a big number */
.stat-any .stat-num {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Phone: full-width photos with stat cards paired two-up between them,
   reordered so each pair is one light + one solid */
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 14px; }
  .bento-copy,
  .bento > .bento-photo:nth-of-type(2),
  .bento > .bento-photo:nth-of-type(3),
  .bento > .bento-photo:nth-of-type(7) { grid-column: span 2; }
  .bento > .bento-stat:nth-of-type(6),
  .bento > .bento-stat:nth-of-type(8) { grid-column: span 1; }
  .bento > .bento-stat:nth-of-type(4),
  .bento > .bento-stat:nth-of-type(5) { grid-column: span 2; }

  /* "1000s" and "10,000+" break up the videos as slim full-width bars */
  .bento > .bento-stat:nth-of-type(4),
  .bento > .bento-stat:nth-of-type(5) {
    min-height: 0;
    padding: 18px 22px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .bento > .bento-stat:nth-of-type(4) .stat-text,
  .bento > .bento-stat:nth-of-type(5) .stat-text { margin-top: 0; }
  /* 10,000+ & 24/7 pair two-up */
  .bento-copy { order: 1; padding: 32px 26px; min-height: 0; }
  .bento > .bento-photo:nth-of-type(2) { order: 2; }
  .bento > .bento-stat:nth-of-type(4) { order: 3; }
  .bento > .bento-photo:nth-of-type(3) { order: 4; }
  .bento > .bento-stat:nth-of-type(5) { order: 5; }
  .bento > .bento-photo:nth-of-type(7) { order: 6; }
  .bento > .bento-stat:nth-of-type(6) { order: 7; }
  .bento > .bento-stat:nth-of-type(8) { order: 8; }

  .bento-photo { aspect-ratio: 16 / 11; }
  .bento-stat { min-height: 220px; padding: 22px 20px; }
  .stat-num { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .stat-lbl { font-size: 0.92rem; }
}

/* Phone preview strip */
.preview-strip {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
}
@media (max-width: 720px) {
  .preview-strip { gap: 18px; }
  .preview-strip .phone-sm:last-child { display: none; }
}

/* ===== Phone shells (placeholder screenshots) ===== */
.phone {
  position: relative;
  aspect-ratio: 9 / 19;
  background: #060d18;
  border: 7px solid #17191e;
  border-radius: 42px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  flex-shrink: 0;
}
.phone-sm { width: 190px; }
.phone-lg { width: 240px; }
.phone-card { width: 200px; margin: 0 auto; }

/* iPhone-style status bar drawn by the frame */
.phone-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.phone-island {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  /* narrow enough to clear the signal icons on the 235px desktop phones */
  width: 54px; height: 19px;
  border-radius: var(--radius-full);
  background: #000000;
}
.phone-sicons { display: inline-flex; align-items: center; gap: 5px; }
.phone-sicons svg { height: 11px; width: auto; display: block; }

/* Real app screenshot filling the screen below the status bar */
.phone-shot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 34px;
  width: 100%;
  height: calc(100% - 34px);
  object-fit: cover;
  object-position: 50% 0%;
}

.phone-screen {
  position: absolute;
  inset: 0;
  padding: 34px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(33, 150, 243, 0.06), transparent 60%),
    var(--surface);
}

/* Skeleton UI atoms inside phone screens */
.ps-chip {
  width: 42%; height: 9px;
  border-radius: var(--radius-full);
  background: rgba(33, 150, 243, 0.55);
}
.ps-line {
  height: 7px;
  border-radius: var(--radius-full);
  background: rgba(10, 39, 72, 0.10);
}
.ps-line.w60 { width: 60%; }
.ps-line.w80 { width: 82%; }

.ps-card {
  min-height: 54px;
  border-radius: 12px;
  background: rgba(10, 39, 72, 0.04);
  border: 1px solid var(--border-light);
}
.ps-card-accent {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.22), rgba(33, 150, 243, 0.08));
  border-color: rgba(33, 150, 243, 0.35);
}

.ps-ring {
  width: 64px; height: 64px;
  margin: 6px auto;
  border-radius: 50%;
  border: 5px solid var(--primary);
  border-bottom-color: rgba(10, 39, 72, 0.10);
  transform: rotate(45deg);
}

.ps-rings {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 6px 0;
}
.ps-rings i {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 5px solid var(--teal);
}
.ps-rings i:last-child { border-color: rgba(10, 39, 72, 0.12); }

.ps-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 84px;
  padding: 6px 4px;
  border-radius: 12px;
  background: rgba(10, 39, 72, 0.03);
  border: 1px solid var(--border-light);
}
.ps-bars i {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
}

.ps-progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(10, 39, 72, 0.08);
  overflow: hidden;
}
.ps-progress i {
  display: block;
  height: 100%;
  width: var(--w, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #7fd8d6);
}

.ps-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ps-tiles i {
  height: 52px;
  border-radius: 12px;
  background: rgba(10, 39, 72, 0.04);
  border: 1px solid var(--border-light);
  position: relative;
}
.ps-tiles i::after {
  content: "";
  position: absolute;
  top: 10px; left: 10px;
  width: 18px; height: 18px;
  border-radius: 6px;
  background: rgba(33, 150, 243, 0.45);
}

.ps-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(10, 39, 72, 0.03);
  border: 1px solid var(--border-light);
}
.ps-check-row i {
  width: 14px; height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--success);
}
.ps-check-row .ps-line { margin: 0; }

/* ===== FEATURES — full-screen swipeable app-store cards ===== */
.features {
  border-top: 1px solid var(--border-light);
}
/* flex items default to min-width:auto and refuse to shrink below their
   content — force the container to track the viewport instead */
.features > .container {
  width: 100%;
  min-width: 0;
}

/* Horizontal snap carousel, Instagram-style: each card snaps flush to the
   left page edge with the next one peeking in from the right, and a swipe
   can never skip past a card. The phone exports are transparent PNGs
   (blue background keyed out — originals in images/phone-edits/_blue-originals),
   so each slide's CSS background IS the card colour. */
.feature-swipe {
  position: relative;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* bleed across the container's 24px side padding so cards land flush
     with the page edge; scroll-padding makes that edge the snap point */
  margin-inline: -24px;
  padding: 8px 24px 16px;
  scroll-padding-inline-start: 24px;
  scrollbar-width: none;
}
.feature-swipe::-webkit-scrollbar { display: none; }

/* Position dots — active one stretches to a pill */
.feature-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.feature-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(245, 250, 254, 0.25);
  transition: width 0.25s ease, background 0.25s ease;
  cursor: pointer;
}
.feature-dots button.is-active {
  width: 26px;
  background: var(--primary);
}

.feature-slide {
  flex: 0 0 min(82%, 380px);
  scroll-snap-align: start;
  /* every swipe settles on the very next card — no flinging past dots */
  scroll-snap-stop: always;
  background: #0ea5e9;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(4, 16, 32, 0.35);
}
/* Cards are the designer's full-bleed visuals — the CSS background only
   shows as a placeholder while the JPEG loads */

.feature-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0;
  padding: 16px 18px 8px;
  color: #ffffff;
}

.feature-shot {
  width: 100%;
  height: auto;
  display: block;
}

.feature-desc {
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  padding: 5px 18px 18px;
}

/* ===== TILLY — feature card, photo left / copy right ===== */
.tilly {
  border-top: 1px solid var(--border-light);
  background: linear-gradient(180deg, #ffffff, transparent 55%);
}

/* Italic serif eyebrow, echoing the campaign phrase */
.section-eyebrow-serif {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 8px;
}

.tilly-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.tilly-media {
  margin: 0;
  overflow: hidden;
  min-height: 440px;
}
.tilly-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}

.tilly-note-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 44px;
}
.tilly-note-body p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.tilly-tagline {
  font-weight: 600;
  color: var(--primary) !important;
}

.tilly-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: 14px;
  padding: 14px 24px;
  border-radius: 10px;
  background: var(--midnight);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tilly-cta:hover {
  background: var(--deep-navy);
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .tilly-card {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
  .tilly-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .tilly-note-body { padding: 28px 26px 30px; }
}

/* ===== REVIEWS — auto-scrolling marquee ===== */
.reviews { border-top: 1px solid var(--border-light); overflow: hidden; }

.reviews-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: -16px 0 40px;
}
.rr-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.rr-stars { display: inline-flex; gap: 3px; }
.rr-stars svg, .rc-stars svg { width: 15px; height: 15px; fill: var(--primary); }
.rr-source {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.rr-g { width: 18px; height: 18px; }

/* Full-bleed rows, faded at the edges */
.reviews-marquee {
  display: grid;
  gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.marquee-row { overflow: hidden; }
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 4px 0;
}
/* Animate only once JS has doubled the track (html.js), so the -50%
   loop is seamless; without JS the cards just sit as a static row */
html.js .marquee-track { animation: marquee 55s linear infinite; }
html.js .marquee-reverse .marquee-track { animation-direction: reverse; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .marquee-track { animation: none; }
  .marquee-row { overflow-x: auto; }
}

.review-card {
  /* a quarter of the viewport (minus gaps) so ~4 cards are always in view */
  width: max(280px, calc(25vw - 36px));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 26px 20px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.rc-stars { display: flex; gap: 3px; }
.rc-text {
  margin: 0;
  font-size: clamp(0.78rem, 0.5rem + 0.3vw, 0.92rem);
  line-height: 1.55;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-person {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rc-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
}
.rc-meta { display: flex; flex-direction: column; line-height: 1.3; }
.rc-meta strong {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}
.rc-meta span { font-size: 0.72rem; color: var(--text-muted); }

@media (max-width: 620px) {
  .review-card { width: 240px; padding: 16px 18px 14px; }
  .reviews-rating { margin-bottom: 30px; }
}

/* ===== QUOTE ===== */
.quote { padding-top: 40px; }

.quote-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 48px 44px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
@media (max-width: 560px) {
  .quote-card { padding: 44px 24px 36px; }
}

.quote-mark {
  width: 40px; height: 40px;
  color: var(--primary);
  opacity: 0.5;
  margin: 0 auto 18px;
}

.quote-card blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0 0 22px;
}

.quote-card figcaption {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary);
}

/* ===== FAQ — accordion ===== */
.faq { border-top: 1px solid var(--border-light); }

/* Wider than the standard 1080px container so the accordion spans
   most of the desktop width, Paul-Trikha-style */
.faq .container { max-width: 1480px; }

.faq-list { max-width: none; }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--primary);
  border: 1.5px solid var(--primary);
  transition: background 0.2s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #ffffff;
  border-radius: 2px;
  transition: background 0.2s ease;
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }

.faq-item[open] .faq-icon { background: transparent; }
.faq-item[open] .faq-icon::before { background: var(--primary); }
.faq-item[open] .faq-icon::after { display: none; }

.faq-item p {
  margin: 0 0 22px;
  max-width: 620px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ===== FINAL CTA ===== */
.final-cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-light);
  padding: 90px 0;
}

.final-glow {
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(33, 150, 243, 0.10), transparent 65%);
  pointer-events: none;
}

.final-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.final-head {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--midnight);
}
.final-head span { color: var(--primary); }

.final-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin: 0 0 40px;
  max-width: 520px;
}

/* ===== Waitlist form ===== */
.waitlist-form {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.wf-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wf-input::placeholder { color: var(--text-muted); }
.wf-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.18);
}
.wf-input.is-invalid { border-color: var(--error); }

/* 16px fields on phones — anything smaller makes iOS zoom in on focus */
@media (max-width: 620px) {
  .waitlist-form .wf-input { font-size: 1rem; }
}

.wf-submit { width: 100%; border-radius: 6px; }

.wf-err {
  display: none;
  font-size: 0.85rem;
  color: var(--error);
  text-align: center;
  margin: 0;
}
.wf-err.show { display: block; }

.wf-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* Success state — brand success green */
.wf-success {
  width: 100%;
  max-width: 460px;
  text-align: center;
  padding: 36px 24px;
  background: var(--surface);
  border: 1px solid rgba(71, 179, 106, 0.45);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.wf-success-check {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(71, 179, 106, 0.10);
  border: 2px solid var(--success);
  color: var(--success);
}
.wf-success-check svg { width: 26px; height: 26px; }
.wf-success h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.wf-success p { font-size: 0.92rem; color: var(--text-secondary); margin: 0; }

/* ===== FOOTER ===== */
.site-footer {
  background: var(--midnight);
  color: #ffffff;
  padding: 64px 0 40px;
  padding-bottom: max(env(safe-area-inset-bottom), 40px);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.footer-logo { width: 64px; height: 64px; }

/* Waitlist card inside the footer — glass bar on the navy background:
   heading left, fields inline right (PureSportsMedicine-style), stacking
   to a centred column as the viewport narrows */
.footer-cta {
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px 44px;
  margin-bottom: 28px;
  background: rgba(245, 250, 254, 0.05);
  border: 1px solid rgba(245, 250, 254, 0.14);
  border-radius: var(--radius-lg);
  text-align: left;
}
.fc-head {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}
.fc-head span { font-weight: 500; color: rgba(245, 250, 254, 0.6); }
.fc-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  text-align: left;
}
.fc-intro p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(245, 250, 254, 0.75);
}

/* Store badges under the footer form — navy outline style, blends with the footer */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px 9px 15px;
  background: rgba(245, 250, 254, 0.05);
  border: 1px solid rgba(245, 250, 254, 0.18);
  border-radius: 12px;
  color: #ffffff;
}
.sb-logo { width: 24px; height: 24px; }
.sb-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.sb-small {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 250, 254, 0.7);
}
.sb-big {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.footer-cta .waitlist-form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.footer-cta .wf-input {
  flex: 1 1 170px;
  width: auto;
  min-width: 0;
  background: transparent;
  border: 1px solid rgba(245, 250, 254, 0.35);
  border-radius: 6px;
  color: #ffffff;
  padding: 13px 18px;
}
.footer-cta .wf-input::placeholder { color: rgba(245, 250, 254, 0.55); }
.footer-cta .wf-input:focus {
  border-color: rgba(245, 250, 254, 0.75);
  outline: none;
  box-shadow: none;
}
.footer-cta .wf-input.is-invalid { border-color: #f0708a; }
.footer-cta .wf-input:-webkit-autofill,
.footer-cta .wf-input:-webkit-autofill:hover,
.footer-cta .wf-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #163251 inset;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
}
.footer-cta .wf-submit {
  flex: 0 0 auto;
  width: auto;
  padding: 13px 26px;
  font-size: 0.95rem;
  background: #ffffff;
  color: var(--primary);
  box-shadow: none;
}
.footer-cta .wf-submit:hover { background: var(--ice); }
.footer-cta .wf-err { flex-basis: 100%; text-align: right; color: #f0708a; }

/* Dark mode restyles .waitlist-form as a card with higher specificity —
   keep the footer form a bare row inside its single outer panel */
html[data-theme="dark"] .footer-cta .waitlist-form {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  max-width: none;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
@media (max-width: 1000px) {
  html[data-theme="dark"] .footer-cta .waitlist-form { width: 100%; justify-content: center; }
}
@media (max-width: 620px) {
  html[data-theme="dark"] .footer-cta .waitlist-form { flex-direction: column; }
}
.footer-cta .wf-success {
  flex: 1 1 auto;
  max-width: none;
  background: transparent;
  border-color: rgba(71, 179, 106, 0.55);
}
.footer-cta .wf-success h3 { color: #ffffff; }
.footer-cta .wf-success p { color: rgba(245, 250, 254, 0.75); }

@media (max-width: 1000px) {
  .footer-cta {
    flex-direction: column;
    text-align: center;
    gap: 22px;
    padding: 36px 30px;
  }
  .footer-cta .waitlist-form { width: 100%; justify-content: center; }
  .footer-cta .wf-err { text-align: center; }
}
@media (max-width: 620px) {
  .footer-cta { padding: 30px 22px; }
  .footer-cta .waitlist-form { flex-direction: column; }
  .footer-cta .wf-input,
  .footer-cta .wf-submit { width: 100%; flex: none; }
}

.footer-tag {
  font-size: 1.05rem;
  color: rgba(245, 250, 254, 0.85);
  max-width: 420px;
  margin: 0;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 28px;
}
.footer-social a {
  color: rgba(245, 250, 254, 0.85);
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { color: #ffffff; transform: translateY(-2px); }
.footer-social svg { width: 26px; height: 26px; display: block; }

.footer-line {
  width: 100%;
  max-width: 760px;
  height: 1px;
  background: rgba(245, 250, 254, 0.18);
}

.footer-legal {
  width: 100%;
  max-width: 760px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.85rem;
  color: rgba(245, 250, 254, 0.55);
}
.footer-links { display: inline-flex; gap: 24px; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--primary-light); }

/* Legal pages (terms, privacy, cookies) */
.legal-head { display: flex; justify-content: center; padding: 32px 24px 0; }
.legal-head .hero-lockup { margin-bottom: 0; text-decoration: none; }
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.legal-wrap h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.legal-updated { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 34px; }
.legal-wrap h2 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 30px 0 10px;
}
.legal-wrap p, .legal-wrap li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.legal-wrap ul { margin: 0 0 12px; padding-left: 22px; }
.legal-wrap a { color: var(--primary); }
.legal-back {
  display: inline-block;
  margin-top: 36px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
@media (max-width: 480px) {
  .footer-legal { flex-direction: column; align-items: center; gap: 10px; }
}


/* =============================================
   DARK MODE — overrides applied via html[data-theme="dark"]
   (generated from the former styles-dark.css)
   ============================================= */


html[data-theme="dark"] {
  --midnight: #0a2748;
  --deep-navy: #123e6d;
  --primary: #2196f3;
  --primary-light: #64b5f6;
  --success: #47b36a;
  --teal: #5fc9c7;
  --ice: #f5fafe;
  --soft-grey: #f2f5f7;
  --slate: #5f6e7a;
  --bg: var(--midnight);
  --bg-raised: #0e3157;
  --text-primary: var(--ice);
  --text-secondary: #b8cbe0;
  --text-muted: #7f97ad;
  --accent: var(--primary);
  --accent-bright: var(--primary-light);
  --accent-soft: rgba(33, 150, 243, 0.10);
  --border: rgba(100, 181, 246, 0.18);
  --border-light: rgba(100, 181, 246, 0.09);
  --error: #f0708a;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', var(--font-sans);
  --shadow-lg: 0 24px 60px rgba(4, 16, 32, 0.5);
  --shadow-btn: 0 10px 28px rgba(33, 150, 243, 0.32);
}

html[data-theme="dark"] ::selection {
  background: rgba(33, 150, 243, 0.35);
}

html[data-theme="dark"] .section-lbl {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: 14px;
}

html[data-theme="dark"] .section-head strong {
  font-weight: 700;
  color: var(--primary-light);
}

html[data-theme="dark"] .divider-accent {
  width: 44px; height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
}

html[data-theme="dark"] .btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(33, 150, 243, 0.42);
}

html[data-theme="dark"] .hero {
  position: relative;
  min-height: calc(100lvh + 6rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* exact match to the live waitlist page body background */
  background:
  radial-gradient(90% 55% at 50% -8%, rgba(33, 150, 243, 0.14), transparent 65%),
  #0a2748;
}

html[data-theme="dark"] .hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .hero-glow {
  /* the waitlist page has no extra glow layer — keep the hero equally dark */
  display: none;
}

html[data-theme="dark"] .hero-logo {
  width: 46px;
  height: 46px;
}

html[data-theme="dark"] .hero-wordmark {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary-light);
  line-height: 1;
}

html[data-theme="dark"] .hero-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal);
  margin: 0 0 6px;
}

html[data-theme="dark"] .hero-headline {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #ffffff;
}

html[data-theme="dark"] .hero-headline span {
  color: var(--ice);
}
html[data-theme="dark"] .headline-highlight {
  color: var(--primary-light);
}

html[data-theme="dark"] .cd-num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .waitlist-form.waitlist-inline .wf-input {
  flex: 1 1 180px;
  width: auto;
  min-width: 0;
  padding: 13px 16px;
  font-size: 0.9rem;
  background: rgba(18, 62, 109, 0.35);
}

html[data-theme="dark"] .hero-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 205px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(4, 16, 32, 0.35);
}

html[data-theme="dark"] .theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(4, 16, 32, 0.4);
  transition: color 0.15s ease, transform 0.2s ease;
}

html[data-theme="dark"] .theme-toggle:hover {
  color: var(--primary-light); transform: scale(1.06);
}

html[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

html[data-theme="dark"] .why {
  border-top: 1px solid var(--border-light);
  background: linear-gradient(180deg, rgba(18, 62, 109, 0.28), transparent 40%);
}

html[data-theme="dark"] .bento-copy {
  grid-column: span 6;
}

html[data-theme="dark"] .bento-copy {
  background: var(--deep-navy);
  color: #ffffff;
  padding: 40px 44px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html[data-theme="dark"] .stat-light {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--ice);
}

html[data-theme="dark"] .stat-light .stat-num {
  color: var(--primary-light);
}

html[data-theme="dark"] .stat-icon {
  width: 26px;
  height: 26px;
  color: var(--primary-light);
  align-self: flex-end;
}

html[data-theme="dark"] .phone-screen {
  position: absolute;
  inset: 0;
  padding: 34px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
  radial-gradient(120% 60% at 50% 0%, rgba(33, 150, 243, 0.1), transparent 60%),
  var(--bg-raised);
}

html[data-theme="dark"] .ps-chip {
  width: 42%; height: 9px;
  border-radius: var(--radius-full);
  background: rgba(100, 181, 246, 0.55);
}

html[data-theme="dark"] .ps-line {
  height: 7px;
  border-radius: var(--radius-full);
  background: rgba(245, 250, 254, 0.13);
}

html[data-theme="dark"] .ps-card {
  min-height: 54px;
  border-radius: 12px;
  background: rgba(245, 250, 254, 0.05);
  border: 1px solid var(--border-light);
}

html[data-theme="dark"] .ps-card-accent {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.32), rgba(18, 62, 109, 0.2));
  border-color: rgba(33, 150, 243, 0.4);
}

html[data-theme="dark"] .ps-ring {
  width: 64px; height: 64px;
  margin: 6px auto;
  border-radius: 50%;
  border: 5px solid var(--primary);
  border-bottom-color: rgba(245, 250, 254, 0.12);
  transform: rotate(45deg);
}

html[data-theme="dark"] .ps-rings i:last-child {
  border-color: rgba(245, 250, 254, 0.14);
}

html[data-theme="dark"] .ps-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 84px;
  padding: 6px 4px;
  border-radius: 12px;
  background: rgba(245, 250, 254, 0.04);
  border: 1px solid var(--border-light);
}

html[data-theme="dark"] .ps-progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(245, 250, 254, 0.1);
  overflow: hidden;
}

html[data-theme="dark"] .ps-tiles i {
  height: 52px;
  border-radius: 12px;
  background: rgba(245, 250, 254, 0.05);
  border: 1px solid var(--border-light);
  position: relative;
}

html[data-theme="dark"] .ps-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(245, 250, 254, 0.04);
  border: 1px solid var(--border-light);
}

html[data-theme="dark"] .tilly {
  border-top: 1px solid var(--border-light);
  background: linear-gradient(180deg, rgba(18, 62, 109, 0.28), transparent 40%);
}

html[data-theme="dark"] .section-eyebrow-serif {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--primary-light);
  margin-bottom: 8px;
}

html[data-theme="dark"] .tilly-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .tilly-tagline {
  font-weight: 600;
  color: var(--primary-light) !important;
}

html[data-theme="dark"] .tilly-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: 14px;
  padding: 14px 24px;
  border-radius: 10px;
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  transition: filter 0.2s ease, transform 0.2s ease;
}

html[data-theme="dark"] .tilly-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

html[data-theme="dark"] .quote-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 48px 44px;
  text-align: center;
  background: linear-gradient(180deg, rgba(33, 150, 243, 0.08), rgba(18, 62, 109, 0.35));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

html[data-theme="dark"] .review-card {
  background: var(--bg-raised);
  border-color: var(--border);
}
html[data-theme="dark"] .rr-word,
html[data-theme="dark"] .rc-meta strong { color: var(--text-primary); }
html[data-theme="dark"] .rr-stars svg,
html[data-theme="dark"] .rc-stars svg { fill: var(--primary-light); }

html[data-theme="dark"] .quote-mark {
  width: 40px; height: 40px;
  color: var(--primary);
  opacity: 0.6;
  margin: 0 auto 18px;
}

html[data-theme="dark"] .quote-card figcaption {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary-light);
}

html[data-theme="dark"] .final-glow {
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(33, 150, 243, 0.18), transparent 65%);
  pointer-events: none;
}

html[data-theme="dark"] .final-head {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: #ffffff;
}

html[data-theme="dark"] .final-head span {
  color: var(--primary-light);
}

html[data-theme="dark"] .waitlist-form {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(33, 150, 243, 0.07), rgba(18, 62, 109, 0.35));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}

html[data-theme="dark"] .wf-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: rgba(10, 39, 72, 0.7);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme="dark"] .wf-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.22);
}

html[data-theme="dark"] .wf-success {
  width: 100%;
  max-width: 460px;
  text-align: center;
  padding: 36px 24px;
  background: linear-gradient(180deg, rgba(71, 179, 106, 0.08), rgba(18, 62, 109, 0.35));
  border: 1px solid rgba(71, 179, 106, 0.35);
  border-radius: var(--radius-lg);
}

html[data-theme="dark"] .wf-success-check {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(71, 179, 106, 0.12);
  border: 2px solid var(--success);
  color: var(--success);
}

html[data-theme="dark"] .site-footer {
  border-top: 1px solid var(--border-light);
}

/* Manual dark-mode patches: vars only the light theme declared,
   props light sets that dark must reset, and the toggle icon swap */
html[data-theme="dark"] {
  --surface: var(--bg-raised);
  --teal-deep: var(--teal);
  --shadow-card: 0 12px 32px rgba(4, 16, 32, 0.4);
}
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .site-footer { background: var(--bg); }

/* Suppress all transitions for one frame while the theme flips */
html.theme-snap *,
html.theme-snap *::before,
html.theme-snap *::after { transition: none !important; }

/* Dark-mode responsive parity: prefixed copies of media rules whose
   selectors also have top-level dark overrides (which would otherwise
   win on specificity and break the responsive layout in dark mode) */
@media (max-width: 480px) {
  html[data-theme="dark"] .cd-num { font-size: 1.1rem; }
}
@media (max-width: 720px) {
  html[data-theme="dark"] .bento-copy, html[data-theme="dark"] .bento > .bento-photo:nth-of-type(2), html[data-theme="dark"] .bento > .bento-photo:nth-of-type(3), html[data-theme="dark"] .bento > .bento-photo:nth-of-type(7) { grid-column: span 2; }
  html[data-theme="dark"] .bento-copy { order: 1; padding: 32px 26px; min-height: 0; }
}
@media (max-width: 620px) {
}
@media (max-width: 1100px) {
  html[data-theme="dark"] .tilly-card { grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto; }
}
@media (max-width: 560px) {
  html[data-theme="dark"] .quote-card { padding: 44px 24px 36px; }
}

/* Dark mode: keep the hero form inline — the doubled-class light rule
   loses to the prefixed dark .waitlist-form override on specificity */
html[data-theme="dark"] .waitlist-form.waitlist-inline {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  max-width: 640px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* Phone inputs must render at 16px in BOTH themes — the dark-mode rules
   above re-declare smaller sizes at higher specificity, and any input
   under 16px makes iOS zoom the page on focus */
@media (max-width: 620px) {
  .wf-input,
  .waitlist-form .wf-input,
  html[data-theme="dark"] .wf-input,
  html[data-theme="dark"] .waitlist-form.waitlist-inline .wf-input {
    font-size: 1rem;
  }
}

/* Autofill: the focus ring is also a box-shadow, so it was replacing the
   1000px inset cover and letting the browser's yellow back through on
   click. Layer ring + cover together; !important beats the theme rules. */
.wf-input:-webkit-autofill,
.wf-input:-webkit-autofill:hover,
html[data-theme="dark"] .wf-input:-webkit-autofill,
html[data-theme="dark"] .wf-input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}
.wf-input:-webkit-autofill:focus,
html[data-theme="dark"] .wf-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.22),
    0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}
.footer-cta .wf-input:-webkit-autofill,
.footer-cta .wf-input:-webkit-autofill:hover,
.footer-cta .wf-input:-webkit-autofill:focus,
html[data-theme="dark"] .footer-cta .wf-input:-webkit-autofill,
html[data-theme="dark"] .footer-cta .wf-input:-webkit-autofill:hover,
html[data-theme="dark"] .footer-cta .wf-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #163251 inset !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ===== Signup success ticket (ported from the waitlist page) =====
   Shown as a dismissible overlay after signup; reopenable via the
   "View your ticket" link in each form's success state. */
.ticket-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(5, 17, 34, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes t-drop {
  from { opacity: 0; transform: translateY(-46px) rotate(-7deg) scale(0.85); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.bigticket {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: linear-gradient(170deg, #123a63, #0c2a4d);
  border: 1px solid rgba(100, 181, 246, 0.18);
  border-radius: 24px;
  padding: 26px 26px 24px;
  color: #f5fafe;
  text-align: center;
  box-shadow: 0 24px 60px rgba(4, 16, 32, 0.55);
  animation: t-drop 0.7s cubic-bezier(0.22, 1.35, 0.36, 1) both;
}
.bt-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  padding: 6px;
  color: rgba(245, 250, 254, 0.6);
}
.bt-close:hover { color: #ffffff; }
.t-slot {
  display: block;
  width: 64px;
  height: 11px;
  border-radius: 999px;
  margin: 0 auto 18px;
}
.t-slot--dark { background: rgba(4, 16, 32, 0.45); }
.bt-logo {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto 12px;
}
.bt-wordmark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #64b5f6;
  line-height: 1;
  margin-bottom: 16px;
}
.bt-wordmark span { font-weight: 400; }
.bt-countdown {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.bigticket .cd-num { color: #ffffff; }
.bigticket .cd-lbl, .bigticket .cd-colon { color: rgba(245, 250, 254, 0.55); }
.bigticket h1 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: #ffffff;
}
.t-perf {
  position: relative;
  border-top: 2px dashed rgba(100, 181, 246, 0.28);
  margin: 20px -26px 16px;
}
.t-perf::before, .t-perf::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0a2748;
}
.t-perf::before { left: -8px; }
.t-perf::after { right: -8px; }
.bt-tagline {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}
.bt-tagline span { color: #64b5f6; }
.bt-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.bt-share {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 8px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  color: #64b5f6;
  background: transparent;
  border: 1.5px solid rgba(100, 181, 246, 0.55);
  border-radius: 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bt-share:hover {
  background: rgba(100, 181, 246, 0.12);
  border-color: #64b5f6;
}
.bt-share:active { background: rgba(100, 181, 246, 0.2); }
.bt-sticker { width: 100%; margin-top: 10px; white-space: normal; line-height: 1.3; }

.sticker-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(5, 17, 34, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sticker-box {
  position: relative;
  width: 100%;
  max-width: 300px;
  background: linear-gradient(170deg, #123a63, #0c2a4d);
  border: 1px solid rgba(100, 181, 246, 0.18);
  border-radius: 24px;
  padding: 40px 20px 18px;
  color: #f5fafe;
  text-align: center;
  box-shadow: 0 24px 60px rgba(4, 16, 32, 0.55);
}
.sticker-preview {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 12px;
  -webkit-touch-callout: default;
}
.sticker-hint {
  margin: 14px 4px 4px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(245, 250, 254, 0.85);
}
.sticker-hint strong { color: #64b5f6; font-weight: 700; }

/* Confetti burst inside the overlay */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.confetti span {
  position: absolute;
  top: 38%;
  left: 50%;
  opacity: 0;
  border-radius: 2px;
  animation: cf ease-out forwards;
}
@keyframes cf {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(0); }
  30% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r1)); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--x), var(--y2)) rotate(var(--r2)); }
}

/* "View your ticket" link inside the form success states */
.wf-ticket-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wf-ticket-link:hover { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .bigticket { animation: none; }
  .confetti { display: none; }
}

.sticker-dl { display: block; margin-top: 12px; text-decoration: none; }