:root {
  --ink: #251504;
  --coral: #e85032;
  --teal: #157d79;
  --muted: #6d655b;
  --cream: #fbf6ee;
  --paper: #fffcf5;
  --peach: #f7ddcc;
  --line: #ded4c3;
  --deep: #174c48;
  --mint: #e7f3ea;
  --gold: #f8d36d;
  --sage: #d9e8dd;
  --note: #c9ded0;
  --shadow: #b8884a;
  --display: "M PLUS Rounded 1c", "Trebuchet MS", sans-serif;
  --text: Rubik, "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, .wordmark {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.18;
}

h1 {
  margin: 18px 0 0;
  font-size: clamp(46px, 5vw, 70px);
}

h1 span { color: var(--coral); }

h2 {
  margin: 12px 0 0;
  font-size: clamp(34px, 3.4vw, 44px);
}

h3 { margin: 0; font-size: 20px; letter-spacing: 0; line-height: 1.25; }

p { margin: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.lede { color: var(--muted); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(#ff8a62 0%, #f15a38 42%, #e23d22 100%);
  color: #fffaed;
  font-family: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: 0 7px 0 var(--shadow), 0 10px 16px rgba(180, 80, 30, 0.18);
  cursor: pointer;
}

.button:hover { transform: translateY(1px); box-shadow: 0 6px 0 var(--shadow), 0 8px 14px rgba(180, 80, 30, 0.16); }

.button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

.button--lg { min-width: 248px; min-height: 70px; }

.button:disabled { cursor: default; opacity: 0.8; transform: none; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 108px;
  padding: 18px 88px;
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 5;
}

.wordmark {
  margin: 0;
  color: var(--coral);
  font-size: 30px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.wordmark span { color: var(--teal); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  color: var(--ink);
  font-size: 15px;
}

.menu {
  display: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 15px var(--text);
  cursor: pointer;
}

.hero {
  display: grid;
  grid-template-columns: minmax(280px, 530px) minmax(280px, 1fr);
  gap: 36px;
  align-items: center;
  padding: 48px 88px 64px;
}

.invite { display: flex; flex-direction: column; gap: 26px; }

.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

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

.ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  color: var(--teal);
  font-size: 14px;
}

.spark { color: var(--coral); font-size: 12px; }

.hero-art { justify-self: end; width: min(100%, 680px); }

.ribbon {
  display: flex;
  justify-content: space-evenly;
  gap: 24px;
  padding: 25px 48px;
  background: var(--deep);
  color: #fffcf5;
}

.ribbon p {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0;
  white-space: nowrap;
}

.ribbon span { color: var(--gold); font-family: var(--text); font-size: 22px; }

.explore, .faq, .split, .closing, .footer { padding: 88px; }

.chapter, .faq {
  display: flex;
  gap: 80px;
  align-items: flex-end;
}

.chapter > div, .faq-intro { flex: 0 0 560px; }

.chapter .lede, .faq-intro .lede { flex: 1; }

.topics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.topic {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 330px;
  padding: 24px;
  border-radius: 28px;
}

.topic img { align-self: center; }

.topic h3 { font-size: 20px; }

.topic p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.topic--nature { background: #ddece2; }
.topic--animals { background: #f7ddcc; }
.topic--science { background: #dbebee; }
.topic--imagine { background: #e6dff3; }

.split {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1.1fr);
  gap: 48px;
  align-items: center;
}

.story { display: flex; flex-direction: column; gap: 24px; max-width: 560px; }

.notes, .ideas { display: flex; flex-direction: column; gap: 25px; margin: 8px 0 0; padding: 0; list-style: none; }

.notes li, .ideas li { display: flex; gap: 16px; align-items: flex-start; }

.notes h3, .ideas h3 { font-family: var(--text); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 26px; }

.notes p, .ideas p { color: var(--muted); font-size: 15px; line-height: 1.6; }

.symbol {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--peach);
}

.stage, .stage-shot { width: 100%; }

.stage--pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
}

.stage--pair img { width: min(46%, 360px); }

.counting { background: var(--mint); }

.prompt {
  padding: 22px;
  border-radius: 20px;
  background: var(--note);
  color: var(--deep);
  font-size: 15px;
  line-height: 1.6;
}

.grownups { background: var(--deep); color: var(--paper); }

.grownups .lede, .grownups .ideas p { color: var(--sage); }

.grownups .ideas h3 { color: var(--paper); font-size: 17px; }

.eyebrow--gold, .ideas span { color: var(--gold); }

.ideas span { font-size: 24px; line-height: 1; }

.faq { align-items: flex-start; }

.faq-intro { max-width: 360px; }

.answers { flex: 1; }

.answers article {
  padding: 23px 0;
  border-top: 1px solid var(--line);
}

.answers h3 { font-family: var(--text); font-size: 18px; font-weight: 600; letter-spacing: 0; }

.answers p { margin-top: 10px; color: var(--muted); font-size: 15px; }

.closing {
  display: grid;
  grid-template-columns: minmax(280px, 580px) minmax(280px, 1fr);
  gap: 90px;
  align-items: center;
  background: var(--peach);
}

.closing-copy { display: flex; flex-direction: column; gap: 20px; }

.closing h2 { font-size: clamp(36px, 3.5vw, 48px); }

.waitlist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 32px;
  border-radius: 28px;
  background: var(--paper);
}

.waitlist h3 { font-size: 24px; }

.waitlist label { font-size: 14px; font-weight: 600; }

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 58px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.field input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 15px var(--text);
}

.field input::placeholder { color: var(--muted); }

.micro, .form-error, .form-success { color: var(--muted); font-size: 12px; line-height: 1.6; }

.form-error { color: var(--coral); }

.form-success { color: var(--deep); font-size: 15px; font-weight: 600; }

.waitlist.is-done .field,
.waitlist.is-done .button,
.waitlist.is-done .micro { display: none; }

.footer { padding-top: 40px; padding-bottom: 30px; }

.footer-top, .footer-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.tagline { margin-top: 8px; color: var(--muted); font-size: 14px; }

.footer nav { display: flex; gap: 36px; font-size: 14px; }

.footer-note {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.footer-note p:last-child { color: var(--teal); }

@media (max-width: 1100px) {
  .nav, .hero, .explore, .faq, .split, .closing, .footer { padding-left: 32px; padding-right: 32px; }
  .chapter, .faq, .closing { display: block; }
  .chapter .lede, .faq-intro .lede { margin-top: 16px; }
  .topics { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .story { max-width: none; }
  .ribbon { flex-wrap: wrap; justify-content: center; }
  .ribbon p { white-space: normal; }
}

@media (max-width: 760px) {
  .menu { display: inline-flex; }
  .nav { min-height: 76px; padding-top: 12px; padding-bottom: 12px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 8px 32px 24px;
    background: var(--cream);
  }
  .nav-links.is-open { display: flex; }
  .hero { grid-template-columns: 1fr; padding-top: 24px; }
  .hero-art { justify-self: center; }
  .topics { grid-template-columns: 1fr; }
  .stage--pair { flex-direction: column; align-items: center; }
  .stage--pair img { width: min(100%, 340px); }
  .footer-top, .footer-note, .footer nav { align-items: flex-start; flex-direction: column; gap: 12px; }
}