/* Donna — waitlist landing page (DON-116)
 *
 * Every rule in this file is scoped under `body.waitlist`, which only index.html carries.
 * style.css is shared with privacy.html and is deliberately NOT modified: keeping the
 * waitlist rules in their own file makes "privacy.html renders unchanged" structural
 * rather than a convention someone has to remember. Tokens still come from style.css's
 * :root, so there is exactly one home for the brand colours.
 *
 * Type: the wireframe is drawn in SF Pro Display; the rest of the site uses Fraunces +
 * Karla. Those are incompatible directions and the design doesn't resolve it, so this page
 * uses a system stack — it renders actual SF Pro on Apple devices (where the wireframe
 * lives and where most traffic will come from), costs zero requests, and avoids the fact
 * that SF Pro isn't licensed for webfont self-hosting. privacy.html keeps Fraunces/Karla.
 *
 * Gradient angles: Figma reports a different angle per instance (97.83°–106.57° across the
 * six form-card states alone) because the frames were resized. Those are artifacts, not
 * intent — reproducing them would make the card's gradient visibly rotate on every state
 * change. One angle per surface, held constant, defined below.
 */

.waitlist {
  /* Tokens the shared :root doesn't have yet. Scoped here because nothing else uses them. */
  --wl-attention: #ff7575;      /* invalid border + error panel fill */
  --wl-green-deep: #48791d;     /* dark end of the founding-strip gradient */
  --wl-blue-deep: #436a93;      /* dark end of the "Did you mean" button gradient */
  --wl-placeholder: #8a8a8a;

  /* Brand gradient: Primary -> Secondary at the measured stops. Angle varies by surface. */
  --wl-grad: var(--blue) 20.832%, var(--mauve) 80.208%;

  --wl-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wl-col: 1200px;   /* centred content column */
  --wl-pad: 24px;     /* side padding (the artboard's 10px is canvas, not layout) */

  font-family: var(--wl-sans);
  line-height: 1.4;
  position: relative;   /* containing block for the absolutely-positioned nav */
}

/* ---------- nav ---------- */
/* Sits over the hero rather than above it; the hero's top padding clears it. */
.waitlist .wl-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 100px;
  padding: 10px var(--wl-pad);
}
.waitlist .wl-nav-inner {
  max-width: var(--wl-col);
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.waitlist .wl-logo { display: flex; align-items: center; }
.waitlist .wl-logo img { display: block; width: 131px; height: 32px; }
.waitlist .wl-nav-links { display: flex; gap: 35px; }
.waitlist .wl-nav-links a {
  /* style.css's `nav a` still matches these links and sets margin-left: 24px, which stacks
     on the flex gap above — 35px designed, 59px rendered. Scoping our own rules isn't
     enough; a shared element selector wins any property we don't declare. */
  margin-left: 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.8px;
  transition: color 0.2s;
}
.waitlist .wl-nav-links a:hover { color: var(--blue); }

/* ---------- hero ---------- */
.waitlist .wl-hero {
  background: #fff;
  padding: 150px var(--wl-pad) 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;
}

/* Three grid children — mockup, h1, card — so the mobile stack is a template swap rather
   than a DOM reorder. The mockup spans both rows and centres against them, which is what
   the design measures (mockup y=179 against a 509-tall column at y=150). */
.waitlist .wl-hero-row {
  max-width: var(--wl-col);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 580px;
  grid-template-areas:
    "mockup h1"
    "mockup card";
  column-gap: 100px;
  row-gap: 50px;
  align-items: center;
  justify-content: center;
}
.waitlist .wl-mockup { grid-area: mockup; align-self: center; padding: 10px; }
.waitlist .wl-mockup img { display: block; width: 235px; height: 431px; }

.waitlist .wl-h1 {
  grid-area: h1;
  align-self: end;
  margin: 0;
  font-size: clamp(26px, 6.5vw, 34px);
  font-weight: 300;
  line-height: 1.2;
  color: #000;
  text-align: left;
}
.waitlist .wl-accent {
  font-weight: 900;
  background-image: linear-gradient(131deg, var(--wl-grad));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- form card ---------- */
.waitlist .wl-card-wrap {
  grid-area: card;
  align-self: start;
  justify-self: center;
  width: 500px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.waitlist .wl-card {
  width: 100%;
  padding: 25px;
  border-radius: 20px;
  background: linear-gradient(101deg, var(--wl-grad));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.waitlist .wl-card-title {
  margin: 0;
  font-size: clamp(20px, 4vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bg);
  text-align: center;
}

.waitlist .wl-field { width: 100%; }
.waitlist .wl-input {
  display: block;
  width: 100%;
  height: 70px;
  padding: 10px 20px;
  border: 0;
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  /* Never let this fall below 16px — iOS Safari zooms the viewport on focus below that. */
  font-size: clamp(18px, 4.6vw, 24px);
  font-weight: 400;
}
.waitlist .wl-input::placeholder { color: var(--wl-placeholder); opacity: 1; }
.waitlist .wl-input:focus-visible { outline: 3px solid var(--bg); outline-offset: 2px; }

/* Attention panel — tucks flush under the input, deliberately narrower than it. */
.waitlist .wl-panel {
  display: none;
  width: 420px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  border-radius: 0 0 10px 10px;
  background: var(--wl-attention);
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.waitlist .wl-panel-msg {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}
.waitlist .wl-suggest {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--blue) 20%, var(--wl-blue-deep) 80%);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.waitlist .wl-suggest[hidden] { display: none; }

/* Turnstile is interaction-only, so this collapses to nothing until a challenge fires. */
.waitlist .wl-turnstile:not(:empty) { margin-top: 12px; }

.waitlist .wl-submit {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--blue);
  font-family: inherit;
  font-size: clamp(16px, 3.4vw, 19px);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.waitlist .wl-submit:hover:not(:disabled) { background: #fff; }
.waitlist .wl-submit:disabled { background: #fff; color: var(--ink-soft); cursor: default; }
.waitlist .wl-submit-busy,
.waitlist .wl-submit-pending { display: none; }

.waitlist .wl-trust {
  margin: 0;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--surface);
  text-align: center;
}

.waitlist .wl-done { display: none; flex-direction: column; gap: 30px; width: 100%; }
.waitlist .wl-done-lead,
.waitlist .wl-done-note,
.waitlist .wl-dupe {
  margin: 0;
  font-size: 18px;
  line-height: 25px;
  color: var(--bg);
  text-align: center;
}
.waitlist .wl-done-lead { font-weight: 700; }
.waitlist .wl-done-note { font-weight: 600; }
.waitlist .wl-dupe { font-weight: 700; }
.waitlist .wl-dupe a { color: var(--bg); }

/* Founding strip — hugs its own content, tucked under the card. */
.waitlist .wl-strip {
  padding: 15px 25px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(90deg, var(--green) 20%, var(--wl-green-deep) 80%);
  font-size: clamp(15px, 3.2vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bg);
  text-align: center;
}

/* ---------- form card: the six states ----------
   One switch (`data-state` on .wl-card-wrap) drives all of them, so a state can never be
   half-applied. Default state = the base rules above; each block below is a delta.
   Turnstile readiness is a second, independent switch (`data-turnstile`), just below. */

/* Submitting: disabled button swaps its label. The button element is genuinely
   `disabled` in JS too — this is only the label swap. */
.waitlist .wl-card-wrap[data-state="submitting"] .wl-submit-idle { display: none; }
.waitlist .wl-card-wrap[data-state="submitting"] .wl-submit-busy { display: inline; }

/* Turnstile readiness (`data-turnstile` on .wl-card-wrap: pending | ready | failed). Its own
   axis rather than a seventh state, because a token can be missing underneath the default,
   invalid or error card. Only `pending` has a look, and it is a label swap on top of the
   existing :disabled treatment. `failed` keeps the idle label and lets the failure card carry
   the explanation. The last rule lets `submitting` outrank pending, so the two disabled
   labels can never both show. */
.waitlist .wl-card-wrap[data-turnstile="pending"] .wl-submit-idle { display: none; }
.waitlist .wl-card-wrap[data-turnstile="pending"] .wl-submit-pending { display: inline; }
.waitlist .wl-card-wrap[data-state="submitting"] .wl-submit-pending { display: none; }

/* Invalid email: red border on the field, panel attached beneath it. */
.waitlist .wl-card-wrap[data-state="invalid"] .wl-input {
  border: 6px solid var(--wl-attention);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.waitlist .wl-card-wrap[data-state="invalid"] .wl-panel { display: flex; }

/* Server / network failure: same shape, no typo button, no gap, solid-white submit. */
.waitlist .wl-card-wrap[data-state="error"] .wl-input {
  border: 6px solid var(--wl-attention);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.waitlist .wl-card-wrap[data-state="error"] .wl-panel { display: flex; gap: 0; }
.waitlist .wl-card-wrap[data-state="error"] .wl-submit { background: #fff; }

/* signedUp + duplicate: the card flips in place — the title changes and the input row is
   replaced. No redirect, no /thanks page. */
.waitlist .wl-title-done { display: none; }
.waitlist .wl-card-wrap[data-state="success"] .wl-title-open,
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-title-open { display: none; }
.waitlist .wl-card-wrap[data-state="success"] .wl-title-done,
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-title-done { display: inline; }

.waitlist .wl-card-wrap[data-state="success"] .wl-field,
.waitlist .wl-card-wrap[data-state="success"] .wl-submit,
.waitlist .wl-card-wrap[data-state="success"] .wl-trust,
.waitlist .wl-card-wrap[data-state="success"] .wl-strip,
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-field,
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-submit,
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-trust,
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-strip { display: none; }

.waitlist .wl-card-wrap[data-state="success"] .wl-card,
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-card { border-radius: 20px; }
.waitlist .wl-card-wrap[data-state="success"] .wl-done,
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-done { display: flex; }
.waitlist .wl-card-wrap[data-state="success"] .wl-dupe { display: none; }
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-done-lead,
.waitlist .wl-card-wrap[data-state="duplicate"] .wl-done-note { display: none; }

/* ---------- lede ---------- */
.waitlist .wl-lede-wrap { padding: 50px var(--wl-pad) 0; }
.waitlist .wl-lede {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 0;
  font-size: clamp(19px, 4vw, 28px);
  font-weight: 300;
  line-height: 1.5;
  color: #000;
  text-align: center;
}
.waitlist .wl-ul { text-decoration: underline; }

/* ---------- how donna works ---------- */
.waitlist .wl-works { padding: 50px var(--wl-pad) 0; }
.waitlist .wl-works-title {
  margin: 0;
  font-size: clamp(24px, 4.5vw, 33px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000;
  text-align: center;
}
.waitlist .wl-works-founder {
  max-width: 1180px;
  margin: 0 auto;
  font-size: clamp(17px, 3vw, 23px);
  font-weight: 300;
  line-height: 1.74;
  color: #000;
  text-align: center;
}

/* The three phones ship as one flattened export, so there is no stacking to reproduce —
   width and centring are the whole rule. 530.5px is the group's measured width in Figma;
   the export is exactly 2x that (1061x770), so it lands on a retina display at 1:1. */
.waitlist .wl-shots-wrap { padding: 50px 0; }
.waitlist .wl-shots {
  display: block;
  width: min(530.5px, 100%);
  height: auto;
  margin: 0 auto;
}

/* ---------- step cards ---------- */
.waitlist .wl-steps {
  max-width: var(--wl-col);
  margin: 0 auto;
  padding: 30px 20px 20px;
  border-radius: 30px;
  background: linear-gradient(113deg, var(--wl-grad));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}
.waitlist .wl-step {
  width: 270px;
  /* min-height, not height: card 3's label wraps to two lines and overflows the drawn
     300px box by ~24px, which Figma clips. Different font metrics would clip it here too. */
  min-height: 300px;
  padding: 20px;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.waitlist .wl-step-head { width: 100%; height: 50px; display: flex; align-items: center; }
.waitlist .wl-step-num {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  background: linear-gradient(97deg, var(--wl-grad));
  color: var(--bg);
  font-size: 23px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.waitlist .wl-step-icon {
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sized per icon, never with one blanket rule: icon 1 is a flattened composite that is
   deliberately larger than icons 2-3 and fills its box. */
.waitlist .wl-icon-lg { display: block; width: 130px; height: 128.57px; }
.waitlist .wl-icon-sm { display: block; width: 80px; height: 80px; }
.waitlist .wl-step-label {
  /* Figma measures this text block at 213px, but that's a hug-width around SF Pro's
     metrics, not a constraint. Held at 213 the wider system fallback wraps card 1 to two
     lines, which the design draws on one; 230 is the card's actual inner width, so it
     reproduces the drawn line breaks (1 and 2 on one line, 3 on two) instead of the
     drawn box. */
  max-width: 230px;
  margin: 0;
  padding: 20px 0 10px;
  font-size: 23px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: #000;
  text-align: center;
}

/* ---------- footer ---------- */
.waitlist .wl-footer {
  border-top: 0;
  padding: 60px var(--wl-pad) 50px;
  color: var(--ink-soft);
  text-align: center;
}
.waitlist .wl-footer p { margin: 0; }
.waitlist .wl-footer-links { font-size: 16px; font-weight: 500; letter-spacing: 0.8px; }
/* margin-right: 0 neutralises style.css's `footer a`, whose 20px lands on every link —
   including a trailing one after Contact, which throws this centred line 10px off centre. */
.waitlist .wl-footer-links a { margin-right: 0; color: var(--ink-soft); text-decoration: none; transition: color 0.2s; }
.waitlist .wl-footer-links a:hover { color: var(--blue); }
.waitlist .wl-footer-links span { margin: 0 10px; }
.waitlist .wl-footer-copy { margin-top: 10px; font-size: 14px; }

/* ---------- responsive ----------
   No mobile frame exists in Figma (it's DON-159, still in backlog), so everything below is
   derived from the DON-113 workshop rules: the hero's two columns stack, the mockup drops
   BELOW the form so a phone image can't push the signup box down, the nav collapses to the
   logo (Privacy/Contact already live in the footer), and the email field plus Submit stay
   above the fold with room for Safari's chrome. Expect this to be revised against DON-159. */
@media (max-width: 1040px) {
  .waitlist .wl-hero-row {
    grid-template-columns: minmax(0, 580px);
    grid-template-areas:
      "h1"
      "card"
      "mockup";
    justify-content: center;
    row-gap: 30px;
  }
  .waitlist .wl-mockup { justify-self: center; padding-top: 20px; }
  .waitlist .wl-h1 { align-self: auto; }
}

@media (max-width: 700px) {
  .waitlist .wl-nav { height: 80px; padding: 10px var(--wl-pad); }
  .waitlist .wl-nav-inner { height: 60px; }
  .waitlist .wl-nav-links { display: none; }

  .waitlist .wl-hero {
    padding: 100px 20px 60px;
    /* the drawn 100px radius eats a narrow layout */
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
  }
  .waitlist .wl-card { padding: 20px; gap: 22px; }
  .waitlist .wl-input { height: 60px; padding: 10px 16px; }
  .waitlist .wl-submit { height: 48px; }
  .waitlist .wl-trust { padding: 0; font-size: 15px; }
  .waitlist .wl-done-lead,
  .waitlist .wl-done-note,
  .waitlist .wl-dupe { font-size: 17px; line-height: 24px; }

  .waitlist .wl-lede-wrap { padding-top: 20px; }
  .waitlist .wl-lede { padding: 20px 0; }
  .waitlist .wl-works { padding-top: 30px; }
  .waitlist .wl-shots-wrap { padding: 30px 0; }

  .waitlist .wl-steps { padding: 25px 15px; gap: 25px; border-radius: 24px; }
  .waitlist .wl-step { width: 100%; max-width: 320px; min-height: 0; }
  .waitlist .wl-step-label { font-size: 20px; padding: 15px 0 5px; }

  .waitlist .wl-footer { padding: 40px var(--wl-pad); }
}

@media (prefers-reduced-motion: reduce) {
  .waitlist * { transition: none !important; }
}