/* ---------- Variables ---------- */
/* Every colour on the site comes from this block. The palette holds raw values;
   the roles below say where each one is used. To re-theme, override the roles. */
:root {
  /* Palette. Navy is sampled from the logo (median body tone). */
  --navy: #0A254F;
  --offwhite: #F6F7F9;
  --slate: #4F5B70;       /* 6.4:1 on offwhite, AA for small text */
  --slate-60: #6B7891;
  --slate-30: #C5CBD6;
  --slate-15: #E1E5EC;
  --mist: #A9B4C8;        /* 7.2:1 on navy */
  --mist-light: #C6CEDB;
  --navy-rule: #4A5E80;
  --red: #B3261E;

  /* Light sections (page, nav, hero, how it works, footer) */
  --color-bg: var(--offwhite);
  --color-text: var(--navy);
  --color-text-muted: var(--slate);
  --color-border: var(--slate-30);       /* inputs, toggle divider */
  --color-hairline: var(--slate-15);     /* hero rings, FAQ rules */
  --color-icon-accent: var(--slate-60);  /* wave line in step icons */
  --color-badge-bg: var(--slate-15);
  --color-badge-text: var(--navy);
  --color-error: var(--red);

  /* Buttons, active toggle, focus rings, icons */
  --color-accent: var(--navy);
  --color-on-accent: var(--offwhite);
  --color-accent-soft: var(--slate-15);  /* selected-but-secondary fill */

  /* Dark sections (stat, hard truth, value prop) */
  --color-dark-bg: var(--navy);
  --color-on-dark: var(--offwhite);
  --color-on-dark-muted: var(--mist);
  --color-on-dark-soft: var(--mist-light);
  --color-on-dark-rule: var(--navy-rule);
  /* Photo overlay tint (navy), as an "r, g, b" triple for use inside rgba() */
  --color-overlay-rgb: 10, 37, 79;

  /* Type scale for serif headings and display lines */
  --fs-display: clamp(48px, 8vw, 88px);  /* hero */
  --fs-h2: clamp(32px, 5vw, 52px);       /* every section heading */
  --fs-h3: clamp(28px, 4vw, 40px);       /* stat numbers */
  --fs-lead: clamp(20px, 3vw, 28px);     /* value list, truth closer */
  --fs-h4: clamp(22px, 2.5vw, 24px);     /* step titles, FAQ questions */

  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

ul { list-style: none; }

input, button { font-family: inherit; font-size: inherit; }

/* ---------- Layout helpers ---------- */
.section {
  width: 100%;
  padding: 120px 24px;
}

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.eyebrow-light { color: var(--color-text-muted); }

/* ---------- Nav ---------- */
.nav {
  width: 100%;
  padding: 32px 24px;
  background: var(--color-bg);
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.logo {
  display: inline-block;
  vertical-align: middle;
}

/* Height drives the size; width follows the image's aspect ratio. */
.logo img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
}

.logo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 60px;
}

.hero-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 140vw);
  height: min(900px, 140vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ring {
  fill: none;
  stroke: var(--color-hairline);
  stroke-width: 1;
}

.ring-2 { stroke: var(--color-hairline); }
.ring-3 { stroke: var(--color-hairline); }
.ring-4 { stroke: var(--color-hairline); }

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.hero .display {
  font-size: var(--fs-display);
  margin-bottom: 24px;
}

.subhead {
  font-size: 18px;
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 auto 40px;
}

/* ---------- Waitlist form ---------- */
.waitlist-form {
  display: flex;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
}

.waitlist-form input {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
}

.waitlist-form input::placeholder {
  color: var(--color-text-muted);
}

.waitlist-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.waitlist-form button {
  padding: 16px 28px;
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.waitlist-form button:hover { opacity: 0.85; }

.waitlist-form button:disabled {
  opacity: 0.5;
  cursor: default;
}

.waitlist-gotcha { display: none; }

/* ---------- Hero sign-up toggle ---------- */
.signup-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.signup-tab {
  position: relative;
  padding: 10px 20px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.signup-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Selected tab gets a soft tint, not a solid fill, so the solid
   "Join the waitlist" button stays the only primary action. */
.signup-tab[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.signup-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.signup-divider {
  width: 1px;
  height: 24px; /* ~60% of the pill height */
  background: var(--color-border);
}

/* Sits on the Reserve pill's top-right corner, clear of the label. */
.signup-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -60%);
  padding: 2px 7px;
  border: 1px solid var(--color-bg);
  border-radius: 999px;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.reserve-note {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.waitlist-form[hidden] { display: none; }

.reserve-button {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.reserve-button:hover { opacity: 0.85; }

.reserve-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.reserve-fine {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 12px;
}

.waitlist-error,
.waitlist-success {
  font-size: 15px;
  text-align: center;
}

.waitlist-error {
  color: var(--color-error);
  margin-top: 12px;
}

.waitlist-success {
  color: var(--color-text);
  padding: 16px 0;
}

/* ---------- Dark sections ---------- */
.stat {
  background: var(--color-dark-bg);
  color: var(--color-on-dark);
}

/* ---------- Stat section ---------- */
.stat {
  text-align: center;
}

.stat-headline {
  font-size: var(--fs-h2);
  color: var(--color-on-dark);
  max-width: 760px;
  margin: 0 auto 20px;
  line-height: 1.15;
}

.stat-source {
  font-size: 13px;
  color: var(--color-on-dark-muted);
  margin-bottom: 80px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  max-width: 900px;
  margin: 0 auto;
}

.stat-item-number {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--color-on-dark);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 12px;
}

.stat-item-label {
  font-size: 14px;
  color: var(--color-on-dark-muted);
  max-width: 220px;
  margin: 0 auto;
}

/* ---------- Hard truth ---------- */
.truth {
  text-align: center;
  color: var(--color-on-dark);
  background-color: var(--color-dark-bg);
  background-image:
    linear-gradient(rgba(var(--color-overlay-rgb), 0.55), rgba(var(--color-overlay-rgb), 0.55)),
    url("images/hard-truth.jpg");
  background-size: cover;
  /* Anchored left so any trimming comes off the right edge. */
  background-position: left center;
  background-repeat: no-repeat;
  /* Most of the screen, but not all of it. */
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.truth-content {
  max-width: 820px;
  margin: 0 auto;
}

.truth-eyebrow {
  color: var(--color-on-dark-muted);
}

.truth-headline {
  font-size: var(--fs-h2);
  color: var(--color-on-dark);
  line-height: 1.15;
  margin-bottom: 24px;
}

.truth-support {
  font-size: 18px;
  color: var(--color-on-dark-soft);
  max-width: 560px;
  margin: 0 auto;
}

.truth-closer {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--color-on-dark);
  margin-top: 56px;
}

/* ---------- How it works ---------- */
.how-it-works {
  max-width: 1120px;
  margin: 0 auto;
}

.section-head {
  max-width: 560px;
  margin: 0 auto 80px;
  text-align: center;
}

.how-it-works .display {
  font-size: var(--fs-h2);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.step {
  text-align: left;
}

.step-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
}

.icon-stroke {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-wave {
  stroke: var(--color-icon-accent);
}

.icon-fill {
  fill: var(--color-accent);
  stroke: none;
}

.step-number {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.step-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h4);
  margin-bottom: 12px;
}

.step-text {
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 320px;
}

/* ---------- Value prop ---------- */
.value {
  text-align: center;
  color: var(--color-on-dark);
  background-color: var(--color-dark-bg);
  background-image:
    linear-gradient(75deg, rgba(var(--color-overlay-rgb), 0.45), rgba(var(--color-overlay-rgb), 0.82)),
    url("images/star-trail.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.value-content {
  max-width: 820px;
  margin: 0 auto;
}

.value .display {
  font-size: var(--fs-h2);
  max-width: 820px;
  margin: 0 auto 56px;
}

.value-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.value-list li {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  color: var(--color-on-dark);
  position: relative;
  padding-bottom: 16px;
}

.value-list li:not(:last-child) {
  border-bottom: 1px solid var(--color-on-dark-rule);
}

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding-bottom: 80px;
}

.footer-headline {
  font-size: var(--fs-h2);
  margin-bottom: 40px;
}

.faq {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: left;
  border-top: 1px solid var(--color-hairline);
}

.faq-item {
  border-bottom: 1px solid var(--color-hairline);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item p {
  font-size: 16px;
  color: var(--color-text-muted);
  max-width: 600px;
  padding-bottom: 24px;
}

.copyright {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .step {
    text-align: center;
  }

  .step-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .step-text {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 80px 20px;
  }

  .hero {
    min-height: 88vh;
  }

  .logo img {
    height: 34px;
  }

  .waitlist-form {
    flex-direction: column;
  }

  .waitlist-form button {
    width: 100%;
  }

  .signup-toggle {
    display: flex;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .signup-tab {
    flex: 1;
    padding: 10px 12px;
  }

  /* Full-width pills leave no corner to perch on, so the badge sits
     centred just above the Reserve pill instead of over its border. */
  .signup-badge {
    top: auto;
    right: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(50%);
  }

  .section-head {
    margin-bottom: 56px;
  }

  .stat-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}