/* =========================================================
   TEDDY'S PASTA — Waitlist landing page
   Brand tokens taken directly from the brand book:
   Candycorn palette · Luckiest Guy · Barlow Semi Condensed
   ========================================================= */

:root{
  /* Candycorn palette (from PDF) */
  --cream:  #F7F7F7;
  --peach:  #FDBC9A;
  --orange: #FB7922;
  --yellow: #FFE133;
  /* Support tones derived from the artwork */
  --orange-deep: #E5650F;
  --ink: #221F1A;
  --white: #FFFFFF;

  --font-display: 'Luckiest Guy', 'Arial Black', cursive;
  --font-body: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;

  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 10px 30px rgba(34, 31, 26, 0.12);
  --container: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ margin:0; padding:0; }

body{
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- Brand squiggle wallpaper (from PDF wallpaper page) ---------- */
.squiggle-bg{
  background-color: var(--peach);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23FB7922' stroke-width='7' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M-20 60 q60 -50 110 0 t110 0 q50 40 -10 70 q-70 30 -110 -10 t-100 -10'/%3E%3Cpath d='M180 180 q70 -40 120 10 q40 50 -20 80 q-60 30 -100 -20 q-30 -40 0 -70'/%3E%3Cpath d='M40 220 q50 -30 80 10 q30 40 -10 70 q-50 30 -80 -10 q-20 -40 10 -70'/%3E%3Cpath d='M250 20 q40 -20 60 10 q20 30 -10 50 q-40 20 -60 -10 q-15 -30 10 -50'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 340px 340px;
}

/* ---------- Type helpers ---------- */
.impact-label{
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
}

.eyebrow{
  display:inline-block;
  background: var(--yellow);
  color: var(--ink);
  padding: 6px 14px;
  border-radius: 4px;
  margin: 0 0 18px;
  box-shadow: 0 3px 0 rgba(34,31,26,0.18);
}
.eyebrow--light{ background: var(--yellow); }

.section-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--orange);
  margin: 0 0 18px;
  text-shadow: 0 3px 0 rgba(34,31,26,0.10);
}
.section-title--light{ color: var(--cream); text-shadow: 0 3px 0 rgba(34,31,26,0.25); }

.hl{
  background: var(--yellow);
  padding: 0 0.18em;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.center{ text-align:center; }
.center .eyebrow{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align:center;
  color: var(--cream);
  background: var(--orange);
  border: none;
  border-radius: 999px;
  padding: 16px 34px 12px; /* Luckiest Guy sits high; compensate */
  cursor: pointer;
  box-shadow: 0 5px 0 var(--orange-deep), var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 var(--orange-deep), var(--shadow); }
.btn:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--orange-deep); }
.btn:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }

.btn--big{ width:100%; font-size: 1.3rem; padding: 18px 30px 13px; }
.btn--small{ font-size: 0.85rem; padding: 11px 18px 8px; box-shadow: 0 3px 0 var(--orange-deep); }

/* ---------- Top bar ---------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 3px solid var(--orange);
}
.topbar__inner{
  max-width: var(--container);
  margin-inline:auto;
  padding: 10px 20px;
  display:flex;
  align-items:center;
  gap: 14px;
}
.topbar__brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.topbar__mascot{ width: 30px; }
.topbar__wordmark{
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--orange);
  line-height: 1;
  padding-top: 5px;
}
.topbar__tag{
  background: var(--yellow);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 0.65rem;
}
.topbar .btn{ margin-left:auto; white-space:nowrap; }

@media (max-width: 560px){
  .topbar__tag{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 56px 0 120px;
}
.hero__grid{
  display:grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px){
  .hero{ padding: 72px 0 150px; }
  .hero__grid{ grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
}

.hero__lockup{ width: 110px; margin-bottom: 6px; }
.mascot--hero{ animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 90%; }

.hero__headline{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 7vw, 4.6rem);
  line-height: 1.0;
  color: var(--orange);
  margin: 0 0 18px;
  text-shadow: 0 4px 0 rgba(34,31,26,0.12);
}
.hero__sub{
  font-size: 1.22rem;
  font-weight: 600;
  max-width: 32ch;
  margin: 0 0 20px;
}
.hero__points{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
  font-weight: 700;
}
.hero__points li{ display:flex; align-items:center; gap:10px; }
.hero__points li::before{
  content:"";
  flex: 0 0 14px;
  width:14px; height:14px;
  border-radius:50%;
  background: var(--yellow);
  border: 3px solid var(--orange);
}

/* hero photo */
.hero__photo{
  margin: 26px 0 0;
  max-width: 480px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 var(--orange);
  overflow: hidden;
  transform: rotate(-1.5deg);
}
.hero__photo img{ width:100%; height:auto; }
.hero__photo figcaption{
  background: var(--yellow);
  padding: 10px 14px;
  text-align:center;
  font-size: 0.66rem;
}

/* form card */
.form-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--orange);
  padding: 28px 26px;
}
.form-card--hero{ box-shadow: 10px 10px 0 var(--orange); }
.form-card__kicker{
  display:inline-block;
  background: var(--yellow);
  padding: 5px 12px;
  border-radius: 4px;
  margin: 0 0 14px;
}
.form-card__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--orange);
  margin: 0 0 8px;
}
.form-card__title--sm{ font-size: 1.5rem; }
.form-card__sub{ margin: 0 0 18px; font-size: 1.05rem; }
.form-card__sub strong{ background: var(--yellow); padding: 0 4px; border-radius: 4px; }

.signup{ display:flex; flex-direction:column; gap: 14px; }
.signup__row{ display:grid; gap:14px; }
@media (min-width: 640px){
  .signup__row{ grid-template-columns: 1fr 1.4fr; }
}

.field{ display:flex; flex-direction:column; gap:6px; }
.field__label{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}
.field input{
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 13px 16px;
  border-radius: 12px;
  border: 2.5px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  width: 100%;
}
.field input::placeholder{ color: #9b948a; font-weight: 400; }
.field input:focus{
  outline: none;
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(251,121,34,0.25);
}
.field input.is-invalid{ border-color: #C43E1D; background: #FFF3EF; }

.signup__fineprint{
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #6f675c;
}
.signup__msg{ margin:0; font-weight: 700; min-height: 1.2em; }
.signup__msg.is-error{ color: #C43E1D; }
.signup__msg.is-success{ color: #3E6B2E; }

/* success state */
.signup.is-done .field,
.signup.is-done .btn,
.signup.is-done .signup__row,
.signup.is-done .signup__fineprint{ display:none; }
.signup__success{
  text-align:center;
  padding: 10px 4px;
}
.signup__success h4{
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--orange);
  font-size: 1.6rem;
  margin: 0 0 6px;
}
.signup__success p{ margin:0; font-weight:600; }

/* ---------- What ---------- */
.what{ background: var(--cream); padding: 90px 0 70px; }
.what__grid{
  display:grid; gap: 44px; align-items:center;
}
@media (min-width: 860px){
  .what__grid{ grid-template-columns: 0.8fr 1.2fr; }
}
.photo-frame{
  margin: 0;
  width: min(380px, 92%);
  margin-inline: auto;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 var(--peach);
  overflow:hidden;
  transform: rotate(1.5deg);
}
.photo-frame img{ width: 100%; height: auto; }
.photo-frame figcaption{
  background: var(--ink);
  color: var(--cream);
  text-align:center;
  padding: 11px 14px;
  font-size: 0.66rem;
}

.what__copy p{ max-width: 52ch; }
.what__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px; }
.chip{
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 7px 16px 6px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

/* ---------- How it works ---------- */
.how{ padding: 90px 0; }
.steps{
  list-style:none;
  margin: 36px 0;
  padding:0;
  display:grid;
  gap: 22px;
}
@media (min-width: 640px){ .steps{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .steps{ grid-template-columns: repeat(4, 1fr); } }

.step{
  position:relative;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 34px 20px 22px;
  text-align:center;
  box-shadow: 6px 6px 0 var(--orange);
  transition: transform 0.2s ease;
}
.step:hover{ transform: translateY(-4px) rotate(-0.5deg); }
.step__num{
  position:absolute;
  top: -16px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  width: 38px; height: 38px;
  line-height: 42px;
  font-size: 1.1rem;
}
.step__icon{ display:block; width: 84px; margin: 0 auto 10px; }
.step__title{
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--orange);
  font-size: 1.25rem;
  margin: 0 0 6px;
}
.step__text{ margin:0; font-size: 0.98rem; }
.how .center{ margin-top: 34px; }

/* ---------- Why ---------- */
.why{ background: var(--cream); padding: 90px 0; }
.benefits{
  list-style:none;
  margin: 36px 0 0;
  padding:0;
  display:grid;
  gap: 18px;
}
@media (min-width: 640px){ .benefits{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .benefits{ grid-template-columns: repeat(3,1fr); } }

.benefit{
  background: var(--white);
  border-radius: var(--radius);
  border: 3px solid var(--peach);
  padding: 22px 22px 18px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.benefit:hover{ border-color: var(--orange); transform: translateY(-3px); }
.benefit__dot{
  display:inline-block;
  color: var(--orange);
  font-size: 1.4rem;
  line-height:1;
  margin-bottom: 8px;
}
.benefit h3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.18rem;
  color: var(--ink);
  margin: 0 0 6px;
}
.benefit p{ margin:0; font-size: 0.98rem; }

/* ---------- Gallery ---------- */
.gallery{ padding: 90px 0; }
.gallery__grid{
  margin-top: 36px;
  display:grid;
  gap: 20px;
}
@media (min-width: 640px){ .gallery__grid{ grid-template-columns: repeat(2,1fr); } }

.tile{
  margin:0;
  border-radius: var(--radius-lg);
  border: 3px solid var(--ink);
  overflow:hidden;
  background: var(--white);
  display:flex;
  flex-direction:column;
  box-shadow: 6px 6px 0 rgba(34,31,26,0.18);
  transition: transform 0.2s ease;
}
.tile:hover{ transform: translateY(-4px); }
.tile__img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  display:block;
}
@media (min-width: 640px){ .tile__img{ height: 340px; } }
.tile__cap{
  background: var(--ink);
  color: var(--cream);
  padding: 12px 16px;
  font-size: 0.68rem;
  text-align:center;
  margin: 0;
}

/* ---------- Coming soon ---------- */
.soon{
  background: var(--orange);
  padding: 90px 0;
}
.soon__grid{
  display:grid; gap: 40px; align-items:center;
}
@media (min-width: 900px){ .soon__grid{ grid-template-columns: 1.1fr 0.9fr; } }
.soon__copy{ color: var(--cream); }
.soon__text{ font-size: 1.15rem; max-width: 46ch; }
.soon__text strong{ background: var(--yellow); color: var(--ink); padding: 0 5px; border-radius: 4px; }
.soon__addr{ margin-top: 22px; opacity: 0.9; font-size: 0.72rem; }
.soon .form-card{ box-shadow: 8px 8px 0 var(--yellow); }

/* ---------- Final CTA ---------- */
.final{ padding: 100px 0 110px; }
.final__inner{
  max-width: 680px;
  text-align:center;
}
.final__mascot{ width: 120px; margin: 0 auto 10px; }
.mascot--final{ animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.final__headline{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 5.2rem);
  line-height: 0.98;
  color: var(--orange);
  margin: 0 0 14px;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(34,31,26,0.12);
}
.final__sub{ font-size: 1.25rem; font-weight: 600; margin: 0 0 30px; }
.form-card--final{ text-align:left; }

/* ---------- Footer ---------- */
.footer{
  background: var(--ink);
  color: var(--cream);
  padding: 44px 0 90px; /* leave room for sticky CTA on mobile */
  text-align:center;
}
.footer__brand{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--orange);
  margin: 0 0 10px;
}
.footer__tag{
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.62rem;
  padding: 4px 10px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 8px;
}
.footer__meta{ margin: 0 0 8px; font-size: 0.95rem; }
.footer__legal{ margin:0; font-size: 0.8rem; opacity: 0.65; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(247,247,247,0.96);
  border-top: 3px solid var(--orange);
  transform: translateY(110%);
  transition: transform 0.3s ease;
  z-index: 60;
}
.sticky-cta.is-visible{ transform: translateY(0); }
.sticky-cta__btn{ font-size: 1.05rem; padding: 14px 20px 10px; }
@media (min-width: 900px){
  .sticky-cta{ display:none; }
  .footer{ padding-bottom: 44px; }
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-in{ opacity: 1; transform: none; }

/* ---------- Pasta confetti ---------- */
.confetti{
  position: fixed;
  top: -30px;
  width: 14px; height: 26px;
  border-radius: 7px;
  z-index: 99;
  pointer-events: none;
  animation: confettiFall linear forwards;
}

/* ---------- Animations ---------- */
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-9px) rotate(2deg); }
}
@keyframes confettiFall{
  to{ transform: translateY(110vh) rotate(540deg); opacity: 0.9; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal{ opacity: 1; transform: none; }
}