/* ============================================================
   Stoop landing — direction C: warm bone-sandwich with one
   dark act in the middle. Inter Display everywhere; Fraunces
   appears once, in the quote section.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { border: none; background: none; font: inherit; cursor: pointer; color: inherit; }

:root {
  --bone: #F7F1E8;
  --bone-soft: #FAF6EF;
  --bone-deep: #EFE6D5;
  --charcoal: #1A1A1A;
  --charcoal-soft: #232220;
  --charcoal-warm: #2A2620;
  --coral: #E55A3A;
  --coral-soft: #F0805F;
  --ink: #1A1A1A;
  --ink-muted: #6E6155;
  --ink-on-dark: #F7F1E8;
  --ink-on-dark-muted: #948A7E;
  --line: rgba(26, 26, 26, 0.10);
  --line-soft: rgba(26, 26, 26, 0.06);
  --line-on-dark: rgba(247, 241, 232, 0.10);

  --container-max: 1180px;
  --pad-x: clamp(22px, 5vw, 56px);
  --section-y: clamp(96px, 13vw, 180px);
  --radius-card: 22px;
  --radius-btn: 14px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

body {
  font-family: var(--font-sans);
  background: var(--bone);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.025em;
}
h1 {
  font-size: clamp(46px, 7.4vw, 104px);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.028em;
}
h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow--on-dark { color: var(--ink-on-dark-muted); }

.coral-word { color: var(--coral); }

.section-lede {
  font-size: clamp(16px, 1.25vw, 19px);
  color: var(--ink-muted);
  max-width: 50ch;
  line-height: 1.55;
}

/* ============================================================
   Layout
   ============================================================ */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
section { padding-block: var(--section-y); }

.section-head { margin-bottom: clamp(48px, 6vw, 80px); }
.section-head .eyebrow { margin-bottom: 20px; }
.section-head h2 { margin-bottom: 22px; max-width: 16ch; }
.section-head--centered {
  text-align: center;
  margin-inline: auto;
}
.section-head--centered h2 { margin-inline: auto; }
.section-head--centered .section-lede { margin-inline: auto; }

/* ============================================================
   Topbar
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 241, 232, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand--on-dark { color: var(--ink-on-dark); }
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.04em;
}
.brand-dot { color: var(--coral); }
.brand-word { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.topbar-nav > a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color .15s ease;
}
.topbar-nav > a:hover { color: var(--ink); }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding-block: clamp(64px, 9vw, 130px) clamp(72px, 10vw, 140px);
}
.hero-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hero-text .eyebrow { margin-bottom: 28px; }
.hero h1 {
  margin-bottom: 30px;
  max-width: 15ch;
}
.lede {
  font-size: clamp(17px, 1.32vw, 20px);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
  margin-bottom: 36px;
}
.lede--on-dark { color: var(--ink-on-dark-muted); }

.hero-fineprint {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 48ch;
  line-height: 1.5;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-coral {
  background: var(--coral);
  color: #fff;
  padding: 18px 28px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 28px -8px rgba(229,90,58,0.45);
}
.btn-coral:hover {
  transform: translateY(-1px);
  background: var(--coral-soft);
  box-shadow: 0 16px 36px -8px rgba(229,90,58,0.55);
}

/* ============================================================
   UI Card (screenshot treatment — no fake phone frame)
   ============================================================ */

.card-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.card-stage::before {
  content: "";
  position: absolute;
  inset: 8% -8% -8% 8%;
  background: radial-gradient(ellipse at center, rgba(229,90,58,0.10) 0%, transparent 60%);
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.card-stage--dark::before {
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(229,90,58,0.22) 0%, transparent 65%);
}
.ui-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  border-radius: 38px;
  box-shadow:
    0 1px 2px rgba(26,26,26,0.06),
    0 24px 50px -20px rgba(26,26,26,0.28),
    0 60px 120px -40px rgba(229,90,58,0.10);
}
.ui-card--hero { max-width: 320px; }
.ui-card--dark {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.4),
    0 30px 60px -20px rgba(0,0,0,0.7),
    0 80px 140px -40px rgba(229,90,58,0.4);
}

/* ============================================================
   Trust strip
   ============================================================ */

.trust-strip {
  background: var(--bone-deep);
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.trust-strip p {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}

/* ============================================================
   How it works
   ============================================================ */

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.how-card {
  padding: clamp(28px, 2.4vw, 38px);
  background: var(--bone-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.how-card:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: 0 18px 40px -20px rgba(26,26,26,0.18);
}
.how-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--coral);
  margin-bottom: 26px;
}
.how-card h3 { margin-bottom: 14px; }
.how-card p {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.6;
}
.how-card p + p { margin-top: 12px; }
.how-tag {
  margin-top: auto;
  padding-top: 22px;
  font-size: 12.5px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink) !important;
  border-top: 1px solid var(--line-soft);
}

/* ============================================================
   Dark section (AI Engine + Final CTA + Footer)
   ============================================================ */

.dark-section {
  background: var(--charcoal);
  color: var(--ink-on-dark);
}

.ai-engine { position: relative; overflow: hidden; }
.ai-engine::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(229,90,58,0.16) 0%, transparent 60%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.ai-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.ai-text .eyebrow { margin-bottom: 24px; }
.ai-text h2 { margin-bottom: 28px; max-width: 18ch; }
.ai-text .lede { color: var(--ink-on-dark-muted); margin-bottom: 36px; max-width: 46ch; }

.ai-bullets {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ai-bullets li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-on-dark);
  padding-left: 22px;
  position: relative;
}
.ai-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.ai-bullets strong { font-weight: 700; }
.ai-bullets em { font-style: italic; color: var(--coral-soft); font-weight: 500; }

/* ============================================================
   Journal section
   ============================================================ */

.journal-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.journal-text .eyebrow { margin-bottom: 24px; }
.journal-text h2 { margin-bottom: 24px; max-width: 14ch; }
.journal-text .section-lede { margin-bottom: 32px; }

.inline-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.inline-list li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.inline-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.inline-list strong { font-weight: 700; color: var(--ink); }

/* ============================================================
   Quote section (the only Fraunces moment)
   ============================================================ */

.quote-section {
  background: var(--bone-deep);
  text-align: center;
}
.big-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 auto 32px;
  color: var(--ink);
}
.quote-attr {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================================================
   Pricing
   ============================================================ */

.pricing-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 900px;
  margin-inline: auto;
}
.pricing-row--single {
  display: block;
  max-width: 600px;
  margin-inline: auto;
}
.price-block {
  padding: clamp(28px, 2.4vw, 40px);
  background: var(--bone-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
}
.price-block--featured {
  background: var(--charcoal);
  color: var(--ink-on-dark);
  border-color: var(--coral);
  position: relative;
}
.price-block--featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--coral);
  border-radius: var(--radius-card);
  pointer-events: none;
  box-shadow: 0 0 0 4px rgba(229,90,58,0.08);
}
.price-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 22px;
}
.price-block--featured .price-label { color: var(--coral); }
.price-headline {
  font-family: var(--font-sans);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin-bottom: 6px;
}
.price-headline span {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.price-block--featured .price-headline span { color: var(--ink-on-dark-muted); }
.price-or {
  font-size: 13.5px;
  color: var(--ink-on-dark-muted);
  margin-bottom: 24px;
  font-weight: 500;
}
.price-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.price-block--featured .price-list { border-top-color: var(--line-on-dark); }
.price-list li {
  font-size: 14.5px;
  color: var(--ink-muted);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.price-block--featured .price-list li { color: var(--ink-on-dark-muted); }
.price-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--coral);
  border-bottom: 1.5px solid var(--coral);
  transform: rotate(-45deg);
}

/* ============================================================
   Privacy manifesto
   ============================================================ */

.privacy-manifesto { background: var(--bone-deep); }
.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
.manifesto-grid h3 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: -0.012em;
}
.manifesto-grid p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ============================================================
   Final CTA
   ============================================================ */

.dark-section--short { padding-block: clamp(70px, 9vw, 120px); }
.final-cta { text-align: center; }
.final-cta h2 {
  margin-bottom: 18px;
  max-width: 14ch;
  margin-inline: auto;
}
.final-cta p {
  font-size: 17px;
  color: var(--ink-on-dark-muted);
  margin-bottom: 36px;
  max-width: 44ch;
  margin-inline: auto;
  line-height: 1.5;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  padding-block: clamp(64px, 8vw, 100px) clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line-on-dark);
  background: var(--charcoal);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.footer-brand .brand {
  margin-bottom: 18px;
  color: var(--ink-on-dark);
}
.footer-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-on-dark);
  margin-bottom: 14px;
  max-width: 26ch;
  line-height: 1.45;
}
.footer-meta {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-on-dark-muted);
  text-transform: uppercase;
  font-weight: 500;
}
.footer-h {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-on-dark-muted);
  margin-bottom: 18px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  font-size: 14px;
  color: var(--ink-on-dark);
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--coral); }

/* ============================================================
   Language dropdown (sits in topbar — opens downward, light card)
   ============================================================ */

.lang-dropdown { position: relative; }
.lang-btn {
  font-size: 14px;
  color: var(--ink-muted);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,0.5);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lang-btn:hover {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255,255,255,0.85);
}
.lang-caret {
  font-size: 9px;
  opacity: 0.6;
  transition: transform .2s ease;
}
.lang-btn[aria-expanded="true"] .lang-caret {
  transform: rotate(180deg);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 18px 44px -12px rgba(26,26,26,0.22);
}
.lang-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-menu li { list-style: none; margin: 0; padding: 0; }
.lang-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.lang-menu a:hover {
  background: var(--bone-deep);
  color: var(--coral);
}

/* ============================================================
   Reveal animation (only used on .ai-visual .ui-card)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity .9s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform .9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
  .topbar-nav { gap: 14px; }
  .topbar-nav > a { display: none; }

  .hero-inner,
  .ai-grid,
  .journal-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .hero h1, .ai-text h2, .journal-text h2 { max-width: 100%; }
  .hero-visual, .ai-visual, .journal-visual {
    grid-row: 1;
  }
  .hero-text, .ai-text, .journal-text {
    grid-row: 2;
  }

  .how-grid { grid-template-columns: 1fr; gap: 16px; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 32px; }
  .pricing-row { grid-template-columns: 1fr; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 8px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .topbar-inner { padding: 12px var(--pad-x); }
  .brand-word { display: none; }

  .hero { padding-block: 52px 64px; }
  .lede { font-size: 16.5px; }

  .ui-card { max-width: 280px; }

  .trust-strip p { font-size: 12px; line-height: 1.7; }

  .footer-grid { grid-template-columns: 1fr; }

  .price-block { padding: 24px; }
  .how-card { padding: 24px; }
}

/* ============================================================
   Spotlight (14-day verdict)
   ============================================================ */

.spotlight-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.spotlight-text .eyebrow { margin-bottom: 24px; }
.spotlight-text h2 { margin-bottom: 24px; max-width: 14ch; }
.spotlight-text .section-lede { margin-bottom: 32px; }

/* ============================================================
   FAQ accordion (native <details>)
   ============================================================ */

.faq { background: var(--bone-deep); }
.faq-list {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item { list-style: none; border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item details { padding: 0; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ""; }
.faq-q {
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.35;
}
.faq-item summary:hover .faq-q { color: var(--coral); }
.faq-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-muted);
  position: relative;
  transition: border-color .2s ease, transform .25s ease;
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--ink-muted);
  border-radius: 1px;
  transition: background .2s ease, transform .25s ease;
}
.faq-toggle::before {
  top: 50%;
  left: 4px;
  right: 4px;
  height: 1.5px;
  transform: translateY(-50%);
}
.faq-toggle::after {
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 1.5px;
  transform: translateX(-50%);
}
.faq-item details[open] .faq-toggle { border-color: var(--coral); }
.faq-item details[open] .faq-toggle::before,
.faq-item details[open] .faq-toggle::after { background: var(--coral); }
.faq-item details[open] .faq-toggle::after { transform: translateX(-50%) scaleY(0); }
.faq-a {
  padding: 0 4px 26px;
  max-width: 70ch;
}
.faq-a p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ============================================================
   Waitlist form (hero + final-cta)
   ============================================================ */

.waitlist-form {
  margin-bottom: 22px;
  width: 100%;
  max-width: 480px;
}
.waitlist-form--dark {
  margin-inline: auto;
}
.waitlist-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.waitlist-form--dark .waitlist-label { color: var(--ink-on-dark-muted); }

.waitlist-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.waitlist-form--dark .waitlist-row {
  background: rgba(247,241,232,0.04);
  border-color: rgba(247,241,232,0.16);
}
.waitlist-row:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(229,90,58,0.10);
}

.waitlist-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
}
.waitlist-form--dark .waitlist-input { color: var(--ink-on-dark); }
.waitlist-input::placeholder { color: var(--ink-muted); opacity: 0.7; }
.waitlist-form--dark .waitlist-input::placeholder { color: var(--ink-on-dark-muted); opacity: 0.7; }

.waitlist-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.waitlist-submit {
  padding: 12px 22px;
  font-size: 15px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: none;
}
.waitlist-submit:hover { box-shadow: 0 8px 22px -8px rgba(229,90,58,0.5); }

.waitlist-status {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.45;
  min-height: 1em;
}
.waitlist-form--dark .waitlist-status { color: var(--ink-on-dark-muted); }
.waitlist-form.is-success .waitlist-status { color: var(--coral); font-weight: 600; }
.waitlist-form.is-error .waitlist-status { color: #C73E1D; font-weight: 600; }
.waitlist-form--dark.is-error .waitlist-status { color: var(--coral); font-weight: 600; }
.waitlist-form.is-loading .waitlist-submit { opacity: 0.6; pointer-events: none; }
.waitlist-form.is-success .waitlist-row { opacity: 0.5; }

/* ============================================================
   Hero CTA row — Coming soon App Store badge + ghost link
   ============================================================ */

.hero-cta-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.app-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 22px;
  background: var(--charcoal);
  color: var(--ink-on-dark);
  border-radius: var(--radius-btn);
  border: 1px solid var(--charcoal);
  line-height: 1.1;
  transition: transform .18s ease, box-shadow .18s ease;
}
.app-badge--dark {
  border: 1px solid var(--coral);
}
.app-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(26,26,26,0.32);
}
.app-badge-mini {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}
.app-badge-main {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ghost-link {
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 4px;
  transition: color .15s ease;
}
.ghost-link:hover { color: var(--coral); }
.dark-section .ghost-link { color: var(--ink-on-dark-muted); }
.dark-section .ghost-link:hover { color: var(--coral); }

/* ============================================================
   Pricing — annual savings annotation
   ============================================================ */

.price-save {
  color: var(--coral);
  font-weight: 700;
  letter-spacing: 0;
}

/* ============================================================
   Responsive — new components
   ============================================================ */

@media (max-width: 960px) {
  .spotlight-grid { grid-template-columns: 1fr; gap: 56px; }
  .spotlight-text h2 { max-width: 100%; }
  .spotlight-visual { grid-row: 1; }
  .spotlight-text { grid-row: 2; }
}

@media (max-width: 560px) {
  .waitlist-row { flex-direction: column; padding: 4px; gap: 4px; }
  .waitlist-input { padding: 14px; }
  .waitlist-submit { width: 100%; padding: 14px 20px; border-radius: 12px; }

  .faq-q { font-size: 16px; }
  .faq-a p { font-size: 14.5px; }
  .faq-item summary { padding: 18px 4px; gap: 16px; }
}

/* ============================================================
   Legal pages (privacy / terms, all 6 locales).
   These pages were authored with a different class vocabulary
   than index.html, so we alias the legacy class names onto the
   existing landing styles and add the body-typography rules
   that the dense legal prose needs.
   ============================================================ */

/* Topbar — legal pages put .brand + .topnav directly under .topbar,
   without the .topbar-inner wrapper that index.html uses. */
.topbar:has(> .topnav) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Centred content with a full-width sticky background:
     pad-inline grows on wide screens so the brand+nav stay within
     the same 1180-px gutter that index.html's .topbar-inner uses. */
  padding-block: 14px;
  padding-inline: max(var(--pad-x), calc((100vw - var(--container-max)) / 2));
}
.topbar:has(> .topnav) > .brand,
.topbar:has(> .topnav) > .topnav {
  flex-shrink: 0;
}

.brand-mark .dot { color: var(--coral); }
.brand-wordmark { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }

.topnav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.topnav > a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color .15s ease;
}
.topnav > a:hover,
.topnav > a[aria-current="page"] { color: var(--ink); }

.lang-switch { position: relative; }

/* Legal section layout. */
.section-legal {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(56px, 9vw, 120px) var(--pad-x) clamp(80px, 10vw, 140px);
}
.section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.section-title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.legal-meta {
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}

.legal-prose {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
}
.legal-prose > * + * { margin-top: 18px; }
.legal-prose h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin-top: 40px;
  margin-bottom: 8px;
}
.legal-prose h3:first-child { margin-top: 0; }
.legal-prose .lede-legal {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.legal-prose a {
  color: var(--coral);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.legal-prose a:hover { color: var(--coral-soft); }
.legal-prose strong { font-weight: 700; }
.legal-prose em { font-style: italic; }

.legal-prose ul,
.legal-prose ol,
.legal-prose .legal-list {
  padding-left: 22px;
  margin-top: 14px;
}
.legal-prose ul { list-style: disc; }
.legal-prose ol,
.legal-prose .legal-list { list-style: decimal; }
.legal-prose li { margin-top: 8px; }
.legal-prose li::marker { color: var(--ink-muted); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 15.5px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.legal-table thead th {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom-color: var(--line);
}

/* Footer aliases — legal pages omit .dark-section on .footer
   and use .footer-tagline / .footer-links instead of .footer-tag /
   .footer-col. Also no .container wrapper around .footer-grid. */
.footer:not(.dark-section) {
  color: var(--ink-on-dark);
}
.footer:not(.dark-section) .footer-grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.footer-brand .brand-mark { color: var(--ink-on-dark); margin-bottom: 14px; }
.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-on-dark);
  margin-bottom: 14px;
  max-width: 26ch;
  line-height: 1.45;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links h4 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-on-dark-muted);
  margin-bottom: 8px;
}
.footer-links a {
  font-size: 14px;
  color: var(--ink-on-dark);
  transition: color .15s ease;
}
.footer-links a:hover { color: var(--coral); }

@media (max-width: 960px) {
  .topnav { gap: 14px; }
  .topnav > a { display: none; }
  .topnav > .lang-switch { display: block; }

  .footer:not(.dark-section) .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }
  .footer:not(.dark-section) .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .section-legal { padding-block: 48px 64px; }
  .legal-prose { font-size: 16px; }
  .legal-prose .lede-legal { font-size: 17px; }
  .legal-table { font-size: 14.5px; }
  .legal-table th, .legal-table td { padding: 10px 8px; }

  .footer:not(.dark-section) .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Dark mode — scoped to legal pages only.
   The landing page (`/`) keeps its warm bone palette regardless
   of system preference; only privacy / terms react to dark mode,
   which is what the iOS app's in-app WebView opens. The scoping
   selector `body:has(.section-legal)` matches both `/privacy`
   and `/terms` (and every locale-prefixed variant) without
   needing any HTML changes.

   WKWebView reads `prefers-color-scheme` from its trait
   collection. The iOS app forces that collection via
   `overrideUserInterfaceStyle` so the page tracks the app's
   own appearance setting (System / Light / Dark), not the
   device's.
   ============================================================ */

/* Dark mode is opt-in via `<html data-theme="dark">`, NOT via
   `prefers-color-scheme`. The iOS app injects that attribute through
   WKUserScript so the in-app WebView tracks the app's appearance.
   Plain web visitors never get the attribute, so the landing pages
   AND the legal pages stay in the warm bone palette regardless of
   their system preference. This avoids two earlier pitfalls:
   (a) `color-scheme: light dark` made browsers in dark mode flip
   the legal pages we wanted to keep light, and (b) WKWebView's
   `overrideUserInterfaceStyle` doesn't always propagate to the
   CSS engine reliably after the document has loaded. */

html[data-theme="dark"] body:has(.section-legal) {
  --bone:         #15141A;
  --bone-soft:    #1E1D24;
  --bone-deep:    #0F0E12;
  --ink:          #F7F1E8;
  --ink-muted:    #948A7E;
  --line:         rgba(247, 241, 232, 0.12);
  --line-soft:    rgba(247, 241, 232, 0.06);
  color-scheme: dark;
}
html[data-theme="dark"] body:has(.section-legal) .topbar {
  background: rgba(21, 20, 26, 0.85);
  border-bottom-color: var(--line-soft);
}
html[data-theme="dark"] body:has(.section-legal) .lang-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-soft);
  color: var(--ink-muted);
}
html[data-theme="dark"] body:has(.section-legal) .lang-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--line);
}
html[data-theme="dark"] body:has(.section-legal) .lang-menu {
  background: #1E1D24;
  border-color: var(--line);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] body:has(.section-legal) .lang-menu a {
  color: var(--ink);
}
html[data-theme="dark"] body:has(.section-legal) .lang-menu a:hover {
  background: rgba(247, 241, 232, 0.06);
  color: var(--coral-soft);
}
html[data-theme="dark"] body:has(.section-legal) .legal-meta,
html[data-theme="dark"] body:has(.section-legal) .legal-prose .lede-legal,
html[data-theme="dark"] body:has(.section-legal) .legal-prose li::marker {
  color: var(--ink-muted);
}
html[data-theme="dark"] body:has(.section-legal) .legal-prose a {
  color: var(--coral-soft);
}
html[data-theme="dark"] body:has(.section-legal) .legal-prose a:hover {
  color: var(--coral);
}
html[data-theme="dark"] body:has(.section-legal) .legal-table thead th {
  color: var(--ink-muted);
}
html[data-theme="dark"] body:has(.section-legal) .footer:not(.dark-section) {
  border-top-color: rgba(247, 241, 232, 0.08);
}