/* ===================================================================
   QuoteE — Landing Page Styles
   Dark emerald theme. Vanilla CSS, mobile-first. No frameworks.
   Tokens & specs per landing/DESIGN.md.
   =================================================================== */

/* ----------------------------- Tokens ----------------------------- */
:root {
  /* surfaces */
  --bg-deep: #050609;
  --bg-base: #0E1318;
  --bg-base-alt: #0F141A;
  --surface: #17202A;
  --surface-raised: #1B2430;
  --surface-hover: #202C39;

  /* emerald */
  --emerald: #0FA775;
  --emerald-deep: #0EA372;
  --emerald-bright: #13C28C;
  --emerald-glow: #1FD79A;
  --emerald-hairline: rgba(31, 215, 154, .18);
  --emerald-hairline-strong: rgba(31, 215, 154, .34);
  --emerald-wash: rgba(15, 167, 117, .10);

  /* text */
  --text-hi: #FFFFFF;
  --text-body: #9AA6B2;
  /* lightened from #6B7884 → clears WCAG AA 4.5:1 on --surface-raised, not just on --bg-base */
  --text-dim: #8893A0;
  --on-emerald: #0A0E12;

  /* utility */
  --pending: #F5A623;
  --divider: rgba(255, 255, 255, .06);
  --focus-ring: #1FD79A;

  /* type */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(3rem, 6.5vw, 5rem);
  --fs-h2: clamp(2rem, 4vw, 3rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --measure: 62ch;
  --measure-lead: 52ch;

  /* spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-8: 48px;  --s-10: 64px;
  --s-12: 96px; --s-16: 128px;

  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* shadows */
  --shadow-card: 0 1px 0 rgba(255,255,255,.02), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-float: 0 40px 80px -32px rgba(0,0,0,.8), 0 8px 24px -8px rgba(0,0,0,.6);

  --container: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* motion */
  --ease-out: cubic-bezier(.16, .84, .3, 1); /* smooth deceleration, never bouncy */
  --dur-reveal: 560ms;
  --dur-stagger-step: 70ms; /* delay between cascading siblings */
}

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

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

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--emerald-bright); text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; color: var(--text-hi); }

/* ------------------------- Focus / a11y --------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -64px;
  z-index: 200;
  background: var(--emerald);
  color: var(--on-emerald);
  font-weight: 600;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* ----------------------------- Layout ----------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--s-6); }
}

.section { padding-block: var(--s-10); position: relative; }
@media (min-width: 768px) {
  .section { padding-block: var(--s-16); }
}
.section--alt { background: var(--bg-base-alt); }
.section--deep { background: var(--bg-deep); }

/* ----------------------------- Type ------------------------------- */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-body);
  max-width: var(--measure-lead);
  margin: 0;
}
.lead--center { margin-inline: auto; text-align: center; max-width: 60ch; }

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-body);
  background: var(--emerald-wash);
  border: 1px solid var(--emerald-hairline);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-5);
}
.eyebrow--center { justify-content: center; }
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald-glow);
  box-shadow: 0 0 8px var(--emerald-glow);
  flex: none;
}

/* emerald accent rule under H2 */
.accent-rule {
  display: block;
  width: 64px; height: 2px;
  margin: var(--s-4) 0 var(--s-5);
  background: linear-gradient(90deg, var(--emerald-glow), transparent);
  border-radius: 2px;
}
.accent-rule--center { margin-inline: auto; }

.section__head { margin-bottom: var(--s-10); }
.section__head--center { text-align: center; max-width: 760px; margin-inline: auto; }
.section__head--center .h2 { margin-inline: auto; }

/* ---------------------------- Wordmark ---------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  font-size: 22px;
  line-height: 1;
}
.wordmark__e { color: var(--emerald-bright); }
.wordmark--sm { font-size: 18px; }

/* ----------------------------- Nav -------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 19, 24, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.nav[data-scrolled] {
  border-bottom-color: var(--divider);
  background: rgba(14, 19, 24, .85);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--s-4);
}
.nav__links {
  display: none;
  gap: var(--s-6);
  margin-left: auto;
  margin-right: var(--s-6);
}
.nav__links a {
  color: var(--text-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color 160ms var(--ease);
}
.nav__links a:hover { color: var(--text-hi); }
@media (min-width: 880px) {
  .nav__links { display: flex; }
}

/* --------------------------- Buttons ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-5);
  cursor: pointer;
  transition: transform 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
}
.btn--emerald {
  background: var(--emerald);
  color: var(--on-emerald);
  border: none;
}
.btn--emerald:hover {
  background: var(--emerald-deep);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--emerald-wash);
}
.btn--emerald:active { transform: translateY(0); }
.nav__cta { flex: none; }

/* ----------------------- App Store badge -------------------------- */
.appstore {
  display: inline-block;
  border-radius: var(--r-md);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.appstore__inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px;
  background: #fff;
  color: #000;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Diagonal light sweep across the primary hero badge. Invisible at rest
   (off-screen left); JS adds .sheen-play to fire a single sweep. */
.appstore__sheen {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, .65) 50%,
    rgba(255, 255, 255, 0) 65%,
    transparent 100%
  );
  transform: translateX(-180%) skewX(-12deg);
  opacity: 0;
}
.appstore__logo { width: 26px; height: 26px; fill: #000; flex: none; }
.appstore__text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.appstore__small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
}
.appstore__big {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.appstore:hover, .appstore:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 0 32px -4px rgba(31, 215, 154, .45);
}
.appstore--sm .appstore__inner { height: 40px; padding: 0 12px; gap: 7px; }
.appstore--sm .appstore__logo { width: 19px; height: 19px; }
.appstore--sm .appstore__small { font-size: 9px; }
.appstore--sm .appstore__big { font-size: 15px; }

.section__cta { display: flex; justify-content: center; margin-top: var(--s-8); }
/* inline CTA inside a feature copy column: left-aligned, tighter top gap */
.section__cta--inline { justify-content: flex-start; margin-top: var(--s-6); }

/* --------------------------- Microline ---------------------------- */
.microline {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: var(--s-5) 0 0;
}
.microline--center { justify-content: center; margin-top: var(--s-5); }
.microline__lock {
  width: 15px; height: 15px;
  fill: none; stroke: var(--emerald-bright); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* =================== SOCIAL-PROOF SLOT (reserved) ================
   Reserved, toggle-ready proof element placed next to the install CTA.
   The [data-proof] attribute on .proof decides which child shows:
     data-proof="standin" -> honest early-adopter line (live today)
     data-proof="rating"  -> real "X.X on the App Store" badge (flip on later)
   Pure CSS swap, no JS. Default = stand-in visible, badge hidden. */
.proof { margin-top: var(--s-5); }
.proof--center { display: flex; justify-content: center; }

/* Visibility toggle driven entirely by the data-attribute. */
.proof[data-proof="standin"] .proof__badge { display: none; }
.proof[data-proof="rating"]  .proof__standin { display: none; }

/* ---- Stand-in (live today): understated early-adopter invitation ---- */
.proof__standin {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-body);
}
.proof__pip {
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--emerald-glow);
  box-shadow: 0 0 0 4px var(--emerald-wash);
  flex: none;
}

/* ---- Real rating badge (enabled later via data-proof="rating") ---- */
.proof__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;            /* touch target */
  padding: var(--s-1) var(--s-3);
  margin-left: calc(var(--s-3) * -1);  /* optical: align text edge with CTA */
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-body);
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.proof__badge:hover { color: var(--text-hi); background: var(--emerald-wash); }
.proof__badge:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.proof__badge strong { color: var(--text-hi); font-weight: 700; }
.proof__rating { white-space: nowrap; }
.proof__stars {
  display: inline-flex;
  flex: none;
}
.proof__stars svg {
  width: 16px; height: 16px;
  fill: var(--emerald-bright);
}

/* ============================== HERO ============================== */
.hero { position: relative; overflow: hidden; }
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
  align-items: center;
  padding-block: var(--s-10) var(--s-12);
  position: relative;
  z-index: 1;
}
@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 52% 48%;
    min-height: min(88vh, 860px);
    padding-block: var(--s-12);
  }
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 78% 42%, rgba(31, 215, 154, .20), transparent 70%);
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 959px) {
  .hero__glow { background: radial-gradient(70% 40% at 50% 80%, rgba(31, 215, 154, .18), transparent 70%); }
}
.hero__h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--s-5);
  /* each sentence is now its own block line, so widen the measure to keep
     short sentences from wrapping; balance tidies any line that still wraps */
  max-width: 20ch;
  text-wrap: balance;
}
/* Each sentence on its own line so the stagger-in reads as a crafted cascade.
   Block display is the resting state for everyone (no motion dependency). */
.hero__h1-line { display: block; }
.hero__sub { max-width: var(--measure-lead); }
.hero__cta { margin-top: var(--s-8); }
.hero__device { display: flex; justify-content: center; }
@media (min-width: 960px) {
  .hero__device { justify-content: flex-end; }
}

/* ============================= PHONE ============================== */
.phone {
  position: relative;
  width: 300px;
  max-width: 78vw;
  border-radius: 44px;
  padding: 10px;
  background: linear-gradient(145deg, #2A323C, #11161C);
  box-shadow: var(--shadow-float);
}
.phone--hero { width: 320px; }
.phone--small { width: 240px; }
.phone__screen {
  position: relative;
  /* nests cleanly inside the 44px frame minus 10px padding (≈34px); source
     screenshots are square-cornered, so CSS does all the rounding — no sliver. */
  border-radius: 34px;
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--emerald-hairline),
              inset 0 1px 0 rgba(255, 255, 255, .06);
}
.phone__screen img { width: 100%; height: auto; display: block; }
.phone--lit .phone__screen {
  box-shadow: inset 0 0 0 1px var(--emerald-hairline-strong),
              inset 0 1px 0 rgba(255, 255, 255, .08),
              0 0 40px -8px rgba(31, 215, 154, .35);
}

/* Satellite/photographic screens: faint top-down dark gradient so bright aerial
   imagery sits IN the dark page instead of punching out of it. Keeps the emerald
   drag-points as the focal point, not the lawn. */
.phone__screen--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 9, .28) 0%, rgba(5, 6, 9, 0) 26%, rgba(5, 6, 9, 0) 72%, rgba(5, 6, 9, .30) 100%);
}

/* White customer-facing preview (quote-preview): tame the blow-out against the
   near-black page with a soft inner shadow + light scrim so it recedes and the
   dark quotes.png leads. NEVER give this screen the emerald lit treatment. */
.phone__screen--light::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(5, 6, 9, .10);
  box-shadow: inset 0 0 28px -6px rgba(5, 6, 9, .55);
}

/* =========================== MEASURE ============================== */
.diptych {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--s-10);
}
@media (min-width: 768px) {
  .diptych {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
  }
  /* layered composition: back phone recedes (smaller, dropped, dimmer),
     front phone clearly leads as the hero of the pair. */
  .diptych__phone--back {
    transform: translateY(34px) scale(.92);
    transform-origin: top center;
    opacity: .82;
    z-index: 1;
  }
  .diptych__phone--front { margin-left: -52px; z-index: 2; }
}
.diptych__phone { display: flex; flex-direction: column; align-items: center; }
.diptych__cap {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: center;
  max-width: 26ch;
}
.diptych__cap--note strong { color: var(--emerald-bright); }

/* Live count-up payoff number ("It prices itself"). Base HTML carries the
   final "$781.49" so Reduce Motion / no-JS shows the correct value, static.
   tabular-nums keeps the glyph advance fixed so the width never jitters as
   digits tick up. JS only resets to $0.00 and tweens when motion is allowed. */
.diptych__tally {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* inline diptych used in "get paid" feature device column */
.diptych--inline { margin-top: 0; gap: 0; }
@media (min-width: 768px) {
  /* dark, lit quotes.png leads (front); white customer preview recedes (back) */
  .diptych--inline .diptych__phone--back .phone { width: 232px; }
  .diptych--inline .diptych__phone--front .phone { width: 256px; }
  .diptych--inline .diptych__phone--front { margin-left: -52px; }
}

/* flow step row */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-10);
}
.flow__step {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-body);
}
.flow__step--accent { color: var(--emerald-bright); }
.flow__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--emerald-hairline);
  font-size: 12px; font-weight: 700;
  color: var(--emerald-bright);
}
.flow__arrow { color: var(--emerald); font-size: 18px; }

/* ---- Measure draw-on trace overlay ----
   Sits on top of measure-refine.png, registered to the boundary baked into
   the image (viewBox = 640×1387 intrinsic px; preserveAspectRatio matches the
   img's natural-aspect, full-bleed object-fit so it tracks at every breakpoint).
   HIDDEN BY DEFAULT: with Reduce Motion ON or JS off, the overlay never shows
   and the page is exactly the static screenshot. JS unhides + plays it once. */
.measure-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* default/fallback state: invisible, no animation, no flash */
  opacity: 0;
  visibility: hidden;
}
.measure-trace__fill {
  fill: var(--emerald);
  opacity: 0;
}
.measure-trace__path {
  fill: none;
  stroke: var(--emerald-bright);
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* bold emerald glow so the slow draw clearly reads as "scanning" the roof */
  filter: drop-shadow(0 0 10px rgba(31, 215, 154, .65));
}
.measure-trace__points circle {
  fill: var(--emerald-bright);
  stroke: rgba(5, 6, 9, .55);
  stroke-width: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  /* JS adds .is-drawing once #measure scrolls into view (one-shot) */
  .measure-trace.is-drawing {
    visibility: visible;
    opacity: 1;
    will-change: opacity;
  }

  /* 1 · the boundary draws on via dashoffset. --trace-len is the polygon
     perimeter, measured + set inline by JS so the dash math is exact. */
  .measure-trace.is-drawing .measure-trace__path {
    stroke-dasharray: var(--trace-len);
    stroke-dashoffset: var(--trace-len);
    /* slow, linear "pen" sweep so the boundary is clearly watchable */
    animation: trace-draw 2600ms linear forwards;
    will-change: stroke-dashoffset;
  }

  /* 3 · area fill fades in as the (now slower) path nears completion */
  .measure-trace.is-drawing .measure-trace__fill {
    animation: trace-fill 900ms var(--ease-out) 1800ms forwards;
  }

  /* 2 · points drop/pop in sequence; per-point delay set inline by JS */
  .measure-trace.is-drawing .measure-trace__points circle {
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: trace-point 320ms var(--ease-out) forwards;
    animation-delay: var(--pt-delay, 0ms);
    will-change: transform, opacity;
  }

  /* once the whole sequence has settled, JS adds .trace-done to drop will-change */
  .measure-trace.trace-done,
  .measure-trace.trace-done .measure-trace__path,
  .measure-trace.trace-done .measure-trace__points circle { will-change: auto; }
}

@keyframes trace-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes trace-fill {
  to { opacity: .10; }
}
@keyframes trace-point {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* =========================== FEATURE ROW =========================== */
.feature__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 960px) {
  .feature__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12);
  }
  /* reverse swaps columns on desktop; mobile keeps text-first */
  .feature__row--reverse .feature__copy { order: 2; }
  .feature__row--reverse .feature__device { order: 1; }
}
.feature__device { display: flex; justify-content: center; }
.feature__device--small { align-items: center; }
.feature--quiet { padding-block: var(--s-12); }

.feature__subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-hi);
  margin: var(--s-6) 0 var(--s-3);
}

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  border: 1px solid var(--divider);
  color: var(--text-body);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.chip--active {
  background: var(--emerald);
  color: var(--on-emerald);
  border-color: transparent;
  font-weight: 600;
}
.chip--ghost {
  background: transparent;
  border-color: var(--emerald-hairline);
  color: var(--emerald-bright);
}

/* checklist */
.checklist { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }
.checklist li {
  display: flex;
  gap: var(--s-3);
  color: var(--text-body);
  max-width: var(--measure);
}
.check {
  width: 22px; height: 22px; flex: none;
  margin-top: 2px;
  fill: none; stroke: var(--emerald-bright); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* payments row */
.payments {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.payments__label { color: var(--text-dim); }
.payments__logo {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-hi);
  opacity: .85;
  letter-spacing: -0.01em;
}
.payments__sep { color: var(--text-dim); }

/* ============================ PRIVACY ============================= */
.privacy__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.privacy__inner .h2 { margin-inline: auto; }
.privacy__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--emerald-wash);
  border: 1px solid var(--emerald-hairline);
  margin-bottom: var(--s-5);
}
.privacy__icon svg {
  width: 36px; height: 36px;
  fill: none; stroke: var(--emerald-bright); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-8) 0 var(--s-6);
}
.trust-strip li {
  position: relative;
  color: var(--text-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding-left: var(--s-5);
}
.trust-strip li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-glow);
  box-shadow: 0 0 8px var(--emerald-glow);
}
.maker { color: var(--text-body); font-size: var(--fs-sm); margin: 0; }
.maker strong { color: var(--text-hi); }
.maker__ver { color: var(--text-dim); margin-left: var(--s-3); }

/* ============================== FAQ ============================== */
.faq__list {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--emerald-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.faq__item[open] {
  border-color: var(--emerald-hairline-strong);
  background: var(--surface-hover);
}
.faq__item:hover { border-color: var(--emerald-hairline-strong); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  list-style: none;
  cursor: pointer;
  padding: var(--s-5) var(--s-6);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-hi);
}
/* remove the native marker (Safari/Chrome) */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__icon {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: var(--emerald-bright);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms var(--ease);
}
.faq__item[open] .faq__icon { transform: rotate(180deg); }

.faq__q:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: var(--r-lg);
}

.faq__a {
  padding: 0 var(--s-6) var(--s-5);
  color: var(--text-body);
}
.faq__a p {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.faq__a a { color: var(--emerald-bright); }
.faq__a a:hover { text-decoration: underline; }

/* Subtle open/close transition — gated behind reduced-motion.
   Uses grid-rows trick so the panel animates height without a fixed value. */
@media (prefers-reduced-motion: no-preference) {
  .faq__item::details-content {
    overflow: hidden;
    block-size: 0;
    opacity: 0;
    transition: block-size 240ms var(--ease), opacity 200ms var(--ease), content-visibility 240ms allow-discrete;
    transition-behavior: allow-discrete;
  }
  .faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* =========================== FINAL CTA =========================== */
.final-cta__inner { text-align: center; max-width: 680px; margin-inline: auto; }
.final-cta__inner .h2 { margin-inline: auto; }

/* ============================= FOOTER ============================ */
.footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--divider);
  padding-block: var(--s-8);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.footer__brand { display: flex; flex-direction: column; gap: var(--s-3); }
.footer__copy { color: var(--text-dim); font-size: var(--fs-xs); margin: 0; }
.footer__chip {
  align-self: flex-start;
  background: var(--surface-raised);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
}
.footer__links { display: flex; gap: var(--s-6); }
.footer__links a {
  color: var(--text-body);
  font-size: var(--fs-sm);
  transition: color 160ms var(--ease);
}
.footer__links a:hover { color: var(--text-hi); }

/* ======================= MOBILE STICKY CTA ====================== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  background: rgba(14, 19, 24, .85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--emerald-hairline);
}
.sticky-cta[hidden] { display: none; }
.sticky-cta__brand { display: flex; flex-direction: column; gap: 2px; }
.sticky-cta__tag { font-size: var(--fs-xs); color: var(--text-dim); }
@media (min-width: 720px) {
  .sticky-cta { display: none !important; }
}

/* ============================== MOTION =========================== */
/* Default = final visible state. JS adds the "from" state classes only when
   motion is allowed. With reduced-motion ON or JS off, every element below
   renders at its final, fully-visible position — nothing here applies. */
@media (prefers-reduced-motion: no-preference) {

  /* ---- Section scroll reveals (slightly more travel than before) ---- */
  [data-reveal].pre-reveal {
    opacity: 0;
    transform: translateY(24px);
  }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
  }

  /* ---- Hero headline + copy stagger-in on load ---- */
  /* JS adds .pre-stagger to the container; each [data-stagger] child starts
     offset, then .stagger-in releases them with a per-index delay (set inline). */
  [data-hero-stagger].pre-stagger [data-stagger],
  [data-stagger-group].pre-stagger [data-stagger] {
    opacity: 0;
    transform: translateY(14px);
  }
  [data-hero-stagger].stagger-in [data-stagger],
  [data-stagger-group].stagger-in [data-stagger] {
    opacity: 1;
    transform: none;
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
    transition-delay: var(--stagger-delay, 0ms);
  }

  /* ---- Parallax drift (transform set inline by rAF handler) ----
     will-change is added only while a scene is on screen (JS toggles
     [data-parallax-active]) and removed once it scrolls away, so we never
     leave layers permanently promoted. */
  [data-parallax-active] [data-parallax-layer] { will-change: transform; }

  /* ---- Hero glow: opacity pulse + slow positional drift ---- */
  .hero__glow.pulse {
    animation: glow-pulse 6s ease-in-out infinite,
               glow-drift 18s ease-in-out infinite;
  }

  /* ---- Nav shrink-on-scroll ---- */
  .nav { transition: border-color 200ms var(--ease), background 200ms var(--ease),
                     padding 240ms var(--ease-out); }
  .nav[data-condensed] .nav__inner { height: 52px; }
  .nav[data-condensed] .wordmark--nav { font-size: 19px; }
  .nav__inner { transition: height 240ms var(--ease-out); }
  .wordmark--nav { transition: font-size 240ms var(--ease-out); }

  /* ---- App Store badge sheen (one-shot, fired by JS) ---- */
  .appstore__sheen.sheen-play {
    animation: badge-sheen 1100ms var(--ease-out) forwards;
  }

  .sticky-cta.slide-in {
    animation: slide-up 220ms var(--ease);
  }
}

@keyframes glow-pulse {
  0%, 100% { opacity: .85; }
  50% { opacity: 1.15; }
}
/* large-period positional drift so the hero light feels alive, not static */
@keyframes glow-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(-2.5%, 1.8%, 0); }
  66%      { transform: translate3d(2%, -1.5%, 0); }
}
@keyframes badge-sheen {
  0%   { opacity: 0; transform: translateX(-180%) skewX(-12deg); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(260%) skewX(-12deg); }
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .appstore:hover, .appstore:focus-visible { transform: none; }
  .btn--emerald:hover { transform: none; }
}