/* ---------- Tokens (from the Zulu waitlist design) ----------
   Mobile is the original single-column card. From 768px the bands go full-bleed;
   from 960px the hero splits into copy + live demo.
   Mint #4BF0B0 fills only: primary CTAs, the demo's send button, progress, step numbers. */
:root {
  --surface: #faf9f5;
  --card: #ffffff;
  --band: #f0eee6;
  --ink: #141413;
  --muted: #57564f;
  --faint: #6f6e66; /* design used #84837a (3.6:1); darkened to pass AA on --surface */
  --line: #e0ded4;
  --hair: #f0eee6;
  --accent: #4bf0b0;
  --accent-hover: #3ee3a3;
  --accent-ink: #0b1f18;
  --accent-text: #0e9e68; /* large text only (3.4:1 on white) */
  --accent-deep: #0a7a50; /* small text on white or the mint tint */
  --accent-tint: rgba(75, 240, 176, 0.16);
  --danger: #e2574c;
  --error: #b3261e;

  --font: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1120px;
  --gutter: 16px;
  --radius: 18px;
  --radius-sm: 12px;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p { margin: 0; }
ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
svg { display: block; flex: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.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;
}

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.7; cursor: progress; }

/* ---------- Nav + hero ---------- */
/* The design's hero glow, moved up so it runs behind the nav too */
.top { background: radial-gradient(120% 60% at 50% -10%, #f2f1eb 0%, var(--surface) 60%); overflow-x: clip; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
  font-weight: 700; font-size: 17px; letter-spacing: 0.01em;
}
/* The logo SVG has built-in padding; pull it back so the mint square lines up with the gutter */
.brand .logo { margin-left: -3px; }

.hero { padding: 8px 0 40px; }
.hero-grid { display: grid; gap: 24px; text-align: center; }

h1 {
  font-size: 36px; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em;
  text-wrap: balance;
}
.lede { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* On phones the waitlist is right below the demo; the hero CTA only earns its place on desktop */
.hero-actions { display: none; }
.hero-note { color: var(--muted); font-size: 14px; }

.hero-demo { position: relative; display: grid; width: 100%; max-width: 440px; margin: 0 auto; }
.hero-demo > .demo { grid-area: 1 / 1; align-self: start; min-width: 0; }
/* script.js adds an invisible copy of the finished card. On desktop it holds the column at full
   height, so the headline and the sections below stay still while the real card grows */
.demo-ghost { display: none; visibility: hidden; }

/* ---------- Demo card ---------- */
.demo-card {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 16px 36px rgba(90, 88, 78, 0.12);
  text-align: left;
}

.d-ask { display: flex; align-items: center; gap: 10px; }
/* Placeholder and query share one cell, so swapping them never changes the height */
.d-input { flex: 1; min-width: 0; display: grid; font-size: 14px; line-height: 1.4; }
.d-input > * { grid-area: 1 / 1; align-self: center; }
.d-placeholder { color: var(--faint); visibility: hidden; }
.d-query { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-card.is-empty .d-placeholder { visibility: visible; }
.demo-card.is-empty .d-query { visibility: hidden; }
.d-cursor {
  display: none;
  width: 2px; height: 13px; margin-left: 2px; vertical-align: -2px;
  background: var(--accent-text);
  animation: z-pulse 0.9s infinite;
}
.demo-card.is-typing .d-cursor { display: inline-block; }

.d-send {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent);
}

/* The card starts as just the search box and opens up as each row arrives:
   a row (and the savings line) eases its height from 0fr to 1fr, then its content fades in */
.d-row, .d-extra {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.d-row.is-on, .d-best.is-done .d-extra { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, 0.12s; }
.d-clip { min-height: 0; overflow: hidden; }
.d-body { display: grid; border-top: 1px solid var(--hair); }
.demo-card.no-anim, .demo-card.no-anim * { transition: none !important; }
/* Working and resolved states share one cell, so resolving never changes the height */
.d-working, .d-resolved { grid-area: 1 / 1; align-self: center; transition: opacity 0.35s ease, visibility 0.35s; }
.d-row:not(.is-done) .d-resolved,
.d-row.is-done .d-working { opacity: 0; visibility: hidden; }

.d-muted { color: var(--muted); font-size: 12.5px; }

.d-listed .d-body { margin-top: 10px; padding: 14px 0 12px; }
.d-bar { display: block; height: 4px; margin-top: 9px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.d-bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--accent); }
.d-listed.is-on .d-bar i { width: 100%; transition: width 0.85s ease-out; }
.d-split { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.d-split b { font-size: 15.5px; font-weight: 700; }

.d-retailers .d-body { padding: 12px 0; }
.d-inline { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.d-inline b { font-weight: 600; }
.d-pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: z-pulse 1.1s infinite; }
.d-check { color: var(--accent-deep); }
.d-count { font-variant-numeric: tabular-nums; }

.d-best .d-body { padding: 16px 0 2px; text-align: center; }
.d-label { color: var(--faint); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.d-price {
  margin-top: 4px;
  color: var(--accent-text); font-size: 30px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.d-was { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.d-pill {
  display: inline-block; margin-top: 10px; padding: 5px 11px;
  border-radius: 99px; background: var(--accent-tint);
  color: var(--accent-deep); font-size: 11px; font-weight: 700;
}


@keyframes z-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- Waitlist ---------- */
.waitlist {
  padding: 46px 0 52px;
  border-top: 1px solid var(--line);
  background: var(--band);
}
.waitlist-inner { max-width: calc(560px + 2 * var(--gutter)); text-align: center; }
.waitlist h2 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.waitlist .sub { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.form { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }

/* 16px keeps iOS Safari from zooming into the field on focus */
.field {
  width: 100%; min-height: 50px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 4px rgba(75, 240, 176, 0.35); }

.form .btn { width: 100%; min-height: 50px; }
/* Off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: 6px; color: var(--muted); font-size: 13px; }
.form.is-error .form-msg { color: var(--error); font-weight: 600; }
.form.is-error .field[aria-invalid="true"] { border-color: var(--error); }
.form.is-error .field[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.14); }
.form.is-error { animation: z-shake 0.32s ease; }
@keyframes z-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.joined {
  margin-top: 22px; padding: 26px 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 16px 36px rgba(90, 88, 78, 0.1);
  outline: none;
}
.joined-check {
  display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0 auto;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
}
.joined-title { margin-top: 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.joined-text { margin-top: 6px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.joined-text b { color: var(--ink); }

/* ---------- How it works ---------- */
.how { padding: 32px 0 36px; border-top: 1px solid var(--line); }
.eyebrow {
  color: var(--faint); text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
}
/* Three steps side by side at every width, numbers on one line */
.steps {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; max-width: 920px; margin: 22px auto 0;
}
/* A thin rail joins the numbers (first to last column centre); each number masks it with a ring of page colour */
.steps::before {
  content: ""; position: absolute; top: 14px; left: calc((100% - 24px) / 6); right: calc((100% - 24px) / 6);
  height: 1px; background: var(--line);
}
.step { text-align: center; }
.step-n {
  position: relative; display: grid; place-items: center;
  width: 28px; height: 28px; margin: 0 auto;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 800;
  box-shadow: 0 0 0 6px var(--surface);
}
.step h3 { margin-top: 12px; font-size: 13.5px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.step p { margin: 4px auto 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; text-wrap: balance; }

/* ---------- Footer ---------- */
.footer { padding: 26px 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.brand-sm { gap: 9px; font-size: 13.5px; }
.footer-tag { color: var(--faint); font-size: 12px; }

/* ---------- Tablet and up ---------- */
@media (min-width: 768px) {
  .nav { height: 84px; }

  .hero { padding: 24px 0 72px; }
  h1 { font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; }
  .lede { max-width: 32ch; margin: 18px auto 0; font-size: 18px; text-wrap: balance; }
  .hero-grid { gap: 40px; }
  .hero-demo { max-width: 460px; }
  .demo-card {
    z-index: 1; padding: 22px;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(20, 20, 19, 0.04), 0 32px 64px -24px rgba(90, 88, 78, 0.32);
  }
  .d-input { font-size: 16px; }
  .d-cursor { height: 15px; }
  .d-send { width: 44px; height: 44px; }
  .d-muted, .d-inline { font-size: 14px; }
  .d-listed .d-body { margin-top: 14px; padding: 18px 0 16px; }
  .d-retailers .d-body { padding: 16px 0; }
  .d-split b { font-size: 17px; }
  .d-best .d-body { padding: 22px 0 4px; }
  .d-label { font-size: 11.5px; }
  .d-price { font-size: 44px; letter-spacing: -0.02em; }
  .d-was { font-size: 13px; }
  .d-pill { padding: 6px 13px; font-size: 12px; }

  .waitlist { padding: 88px 0 96px; }
  .waitlist h2 { font-size: 40px; font-weight: 800; letter-spacing: -0.025em; }
  .waitlist .sub { margin-top: 14px; font-size: 17px; }
  .form { gap: 10px; margin-top: 36px; }
  .form .btn, .field { min-height: 54px; }
  .form-msg { margin-top: 8px; font-size: 14px; }
  .joined { max-width: 520px; margin: 36px auto 0; padding: 32px; }

  .how { padding: 80px 0 88px; }
  .eyebrow { font-size: 12px; }
  .steps { gap: 32px; margin-top: 44px; }
  .steps::before { top: 18px; left: calc((100% - 64px) / 6); right: calc((100% - 64px) / 6); }
  .step-n { width: 36px; height: 36px; font-size: 14px; box-shadow: 0 0 0 10px var(--surface); }
  .step h3 { margin-top: 20px; font-size: 17px; }
  .step p { max-width: 24ch; margin-top: 6px; font-size: 15px; }

  .footer { padding: 32px 0; }
  .footer-inner { flex-direction: row; justify-content: space-between; }
  .footer-tag { font-size: 13px; }
}

@media (min-width: 900px) {
  .waitlist-inner { max-width: calc(880px + 2 * var(--gutter)); }
  .form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; }
  .form .btn { width: auto; padding: 0 24px; }
  .form-msg { grid-column: 1 / -1; }
}

/* ---------- Desktop: copy left, live demo right ---------- */
@media (min-width: 960px) {
  .hero { padding: 40px 0 88px; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
    text-align: left;
  }
  h1 { font-size: clamp(52px, 5vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
  .lede { max-width: 28ch; margin: 24px 0 0; font-size: 20px; }
  .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 36px; }
  .hero-actions .btn { min-height: 54px; padding: 0 26px; font-size: 16px; }

  .hero-demo { max-width: none; margin: 0; }
  .demo-ghost { display: block; }
  /* Soft mint glow behind the card; it sits on the real card's wrapper so it grows with the card */
  .demo { position: relative; }
  .demo::before {
    content: ""; position: absolute; inset: -14% -12%; z-index: 0;
    background: radial-gradient(closest-side, rgba(75, 240, 176, 0.3), rgba(75, 240, 176, 0) 75%);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}