/* =====================================================
   CHECKED™ — WAITLIST PAGE
   styles.css
   ===================================================== */

:root {
  --cream:           #F5F0E8;
  --white:           #FFFFFF;
  --black:           #0A0A0A;
  --black-mid:       rgba(10,10,10,0.45);
  --black-low:       rgba(10,10,10,0.28);
  --stroke:          1px;
  --card-radius:     8px;
  --input-radius:    5px;
  --btn-radius:      5px;
  --page-padding:    24px;
  --card-padding-v:  40px;
  --card-padding-h:  28px;

  /* ═══════════════════════════════════════
     SPACING — change these to move things
     ═══════════════════════════════════════ */

  --gap-para1-to-para2:   32px;   /* "...hoped for the best." → "Plain English." */
  --gap-para2-to-para3:   32px;   /* "Plain English." → "No law degree required." */
  --gap-para3-to-label:   auto;   /* "No law degree required." → EARLY ACCESS — auto = fills space */
  --gap-label-to-sub:     12px;   /* EARLY ACCESS → italic line */
  --gap-sub-to-form:      auto;   /* italic line → inputs — auto = fills space */
  --gap-inputs:           14px;   /* between name + email inputs */
  --gap-inputs-to-btn:    20px;   /* inputs → join button */
  --gap-btn-to-spam:      16px;   /* join button → no spam */

  --font: 'Courier Prime', monospace;
}

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

html, body {
  height: 100%;
  background: var(--cream);
  color: var(--black);
  font-family: var(--font);
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--page-padding);
}

/* ── LOGO ── */
.logo-wrap {
  width: 100%;
  max-width: 520px;
  overflow: visible;
  margin-bottom: 12px;
}

.logo {
  width: 106%;
  height: auto;
  display: block;
  margin-left: 0%;
}

/* ── CARD ──
   Column flex. Each section sits in order.
   "auto" margins absorb leftover space.
── */
.card {
  background: var(--white);
  border: var(--stroke) solid var(--black);
  border-radius: var(--card-radius);
  padding: var(--card-padding-v) var(--card-padding-h);
  width: 100%;
  max-width: 520px;
  aspect-ratio: 760 / 1160;
  display: flex;
  flex-direction: column;
}

/* ── BODY TEXT ── */
.body-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--black);
}

.body-text + .body-text.spaced:nth-child(2) { margin-top: var(--gap-para1-to-para2); }
.body-text + .body-text.spaced:nth-child(3) { margin-top: var(--gap-para2-to-para3); }

/* ── EARLY ACCESS — pushed down by gap-para3-to-label ── */
.waitlist-label {
  margin-top: var(--gap-para3-to-label);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--black);
}

/* ── ITALIC LINE — pushed down by gap-label-to-sub ── */
.waitlist-sub {
  margin-top: var(--gap-label-to-sub);
  font-size: 13px;
  font-style: italic;
  color: var(--black-mid);
  line-height: 1.5;
}

/* ── FORM — pushed down by gap-sub-to-form ── */
.section-form {
  margin-top: var(--gap-sub-to-form);
}

/* ── INPUTS ── */
.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inputs);
}

.form-fields input {
  width: 100%;
  height: 45px;
  padding: 0 16px;
  background: var(--cream);
  border: none;
  border-radius: var(--input-radius);
  outline: none;
  font-family: var(--font);
  font-size: 15px;
  font-style: italic;
  color: var(--black);
}

.form-fields input::placeholder {
  color: var(--black-mid);
  font-style: italic;
}

/* ── BUTTON ── */
.btn-wrap {
  margin-top: var(--gap-inputs-to-btn);
  display: flex;
  justify-content: flex-end;
}

.btn-join {
  padding: 11px 24px;
  background: transparent;
  border: var(--stroke) solid var(--black);
  border-radius: var(--btn-radius);
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  color: var(--black);
  letter-spacing: 0.06em;
  transition: background 0.18s ease, color 0.18s ease;
}

.btn-join:hover  { background: var(--black); color: #fff; }
.btn-join:active { background: #333; color: #fff; }

/* ── SUCCESS ── */
.form-success {
  margin-top: 10px;
  font-size: 13px;
  font-style: italic;
  color: var(--black-mid);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ── NO SPAM ── */
.privacy {
  margin-top: var(--gap-btn-to-spam);
  font-size: 11px;
  color: var(--black-low);
  line-height: 1.5;
}

/* ── FOOTER ── */
.footer {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--black-low);
  text-align: center;
  width: 100%;
  max-width: 520px;
}