/* ==========================================================================
   The $0 Startup Challenge — splash page
   Youth Entrepreneur Startup (Y.E.S.), 501(c)(3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --navy-deep:       #0F2540;
  --navy:            #1E3A5F;
  --gold:            #F6A81C;
  --gold-hover:      #ffbb33;
  --gold-shadow:     #c07f08;
  --cyan:            #2FD9EA;
  --cyan-hover:      #7ee7f2;
  --cream:           #F8FAFC;
  --gold-tint:       #FEF3DC;
  --ink:             #0F172A;
  --body-light:      #33445c;
  --muted-navy:      #9fb3c8;
  --faint-navy:      #5b7191;
  --subhead-navy:    #dbe6f2;
  --border-light:    #e2e8f0;
  --muted-light:     #64748b;

  --display: 'Bowlby One', Archivo, sans-serif;
  --ui:      Archivo, system-ui, sans-serif;
  --body:    Nunito, system-ui, sans-serif;

  --ease:    cubic-bezier(.22, 1, .36, 1);
  --section-pad: 72px 24px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy-deep);
  font-family: var(--body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-hover); }

img { max-width: 100%; }

input, select, button, textarea { font-family: var(--body); }
input, select { background: #FFFFFF; color-scheme: light; }

ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

/* Dot-grid overlay used on the navy sections */
.dotgrid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(47, 217, 234, .14) 1px, transparent 1.4px);
  background-size: 26px 26px;
  pointer-events: none;
}
.dotgrid--faint {
  background-image: radial-gradient(rgba(47, 217, 234, .1) 1px, transparent 1.4px);
}

/* --------------------------------------------------------------------------
   Gold CTA — the brand's signature chunky button
   -------------------------------------------------------------------------- */
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--ui);
  border: none;
  border-radius: 999px;
  text-align: center;
  cursor: pointer;
  transition: transform .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease);
}
.btn-gold:hover { background: var(--gold-hover); color: var(--navy-deep); }
.btn-gold:focus-visible {
  outline: 3px solid var(--navy-deep);
  outline-offset: 3px;
}

.btn-gold--hero {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  padding: 20px 44px;
  box-shadow: 0 6px 0 var(--gold-shadow), 0 0 28px rgba(246, 168, 28, .35);
}
.btn-gold--hero:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--gold-shadow), 0 0 28px rgba(246, 168, 28, .35);
}

.btn-gold--submit {
  width: 100%;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  padding: 19px 24px;
  margin-top: 4px;
  box-shadow: 0 6px 0 var(--gold-shadow);
}
.btn-gold--submit:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--gold-shadow);
}

.btn-gold--sticky {
  display: block;
  width: 100%;
  max-width: 480px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  padding: 16px 24px;
  box-shadow: 0 4px 0 var(--gold-shadow);
}
.btn-gold--sticky:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--gold-shadow);
}

/* --------------------------------------------------------------------------
   A · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, #0F2540 0%, #1E3A5F 100%);
  color: var(--cream);
  overflow: hidden;
}
.hero__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 40%, var(--cyan) 60%, transparent);
  opacity: .6;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px 72px;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
}

.logo-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.logo-card__badge { height: 72px; width: auto; display: block; }

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(47, 217, 234, .5);
  color: var(--cyan);
  border-radius: 999px;
  padding: 8px 18px;
  font: 700 12px/1 var(--ui);
  letter-spacing: .14em;
  animation: glowPulse 3.2s ease-in-out infinite;
}

.hero__h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 8.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hero__tagline {
  font: 800 clamp(20px, 4.6vw, 32px)/1.25 var(--ui);
  color: var(--gold);
  min-height: 1.3em;
}
.caret {
  display: inline-block;
  width: 3px;
  height: .95em;
  background: var(--cyan);
  margin-left: 4px;
  vertical-align: -.12em;
  box-shadow: 0 0 10px rgba(47, 217, 234, .8);
  animation: caretBlink 1s step-end infinite;
}

.hero__subhead {
  max-width: 560px;
  font: 600 clamp(16px, 3.6vw, 19px)/1.55 var(--body);
  color: var(--subhead-navy);
  text-wrap: pretty;
}

.hero__trust {
  font: 700 13px/1 var(--ui);
  letter-spacing: .1em;
  color: var(--cyan);
  text-transform: uppercase;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.hero__microcopy {
  font: 600 13px/1.4 var(--body);
  color: var(--muted-navy);
}

@keyframes caretBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(47, 217, 234, .25) }
  50%      { box-shadow: 0 0 30px rgba(47, 217, 234, .5) }
}

/* --------------------------------------------------------------------------
   B · The Weekend
   -------------------------------------------------------------------------- */
.weekend { background: var(--cream); padding: var(--section-pad); }
.weekend__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.weekend__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.day-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 2px 10px rgba(15, 37, 64, .07);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eyebrow {
  font: 700 12px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow--cyan { color: var(--cyan); }
.eyebrow--gold { color: var(--gold); }

.day-card__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  color: var(--navy-deep);
}
.day-card__p {
  font: 600 16px/1.6 var(--body);
  color: var(--body-light);
  text-wrap: pretty;
}

.weekend__strip {
  background: var(--navy);
  color: var(--cream);
  border-radius: 999px;
  padding: 14px 26px;
  text-align: center;
  font: 700 15px/1.4 var(--ui);
}

/* --------------------------------------------------------------------------
   C · What You Leave With
   -------------------------------------------------------------------------- */
.leave {
  position: relative;
  background: var(--navy);
  color: var(--cream);
  padding: var(--section-pad);
  overflow: hidden;
}
.leave__inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.leave__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 5.5vw, 38px);
  line-height: 1.1;
}
.checklist { display: flex; flex-direction: column; gap: 14px; }
.checklist__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(15, 37, 64, .55);
  border: 1px solid rgba(47, 217, 234, .25);
  border-radius: 12px;
  padding: 16px 20px;
}
.checklist__mark { color: var(--gold); font: 800 18px/1.4 var(--ui); }
.checklist__text { font: 600 17px/1.5 var(--body); }

/* --------------------------------------------------------------------------
   D · Prizes
   -------------------------------------------------------------------------- */
.prizes { background: var(--gold-tint); padding: var(--section-pad); }
.prizes__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.prizes__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 5.5vw, 38px);
  line-height: 1.1;
  color: var(--navy-deep);
}
.prizes__p {
  font: 600 17px/1.6 var(--body);
  color: var(--body-light);
  text-wrap: pretty;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.chip {
  background: var(--gold);
  color: var(--navy-deep);
  font: 800 14px/1 var(--ui);
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--gold-shadow);
}
.prizes__closer {
  font: 700 16px/1.5 var(--ui);
  color: var(--navy-deep);
}

/* --------------------------------------------------------------------------
   E · For Parents
   -------------------------------------------------------------------------- */
.parents { background: var(--cream); padding: var(--section-pad); }
.parents__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.parents__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 5.5vw, 36px);
  line-height: 1.12;
  color: var(--navy-deep);
}
.qa {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 6px rgba(15, 37, 64, .05);
}
.qa__q { font: 700 17px/1.35 var(--ui); color: var(--navy); }
.qa__a {
  font: 600 15.5px/1.6 var(--body);
  color: var(--body-light);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   F · Proof
   -------------------------------------------------------------------------- */
.proof { background: var(--navy-deep); color: var(--cream); padding: var(--section-pad); }
.proof__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.proof__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 5.5vw, 38px);
  line-height: 1.1;
  text-align: center;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  text-align: center;
}
.stat {
  border: 1px solid rgba(47, 217, 234, .3);
  border-radius: 14px;
  padding: 22px 16px;
}
.stat__num { font-family: var(--display); font-size: 32px; color: var(--gold); }
.stat__label {
  font: 700 13px/1.4 var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-navy);
}
.stat__phrase {
  font-family: var(--display);
  font-size: 26px;
  color: var(--cyan);
  line-height: 1.2;
  padding-top: 4px;
}

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.photos img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.quote-placeholder {
  margin: 0;
  border: 2px dashed rgba(47, 217, 234, .4);
  border-radius: 14px;
  padding: 24px;
  font: 600 15px/1.5 var(--body);
  font-style: italic;
  color: var(--muted-navy);
}

/* --------------------------------------------------------------------------
   G · Final CTA + form
   -------------------------------------------------------------------------- */
.signup { background: var(--gold); padding: 72px 24px 56px; }
.signup__inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.signup__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.08;
  color: var(--navy-deep);
  text-wrap: balance;
}
.form-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 32px 28px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(15, 37, 64, .25);
  text-align: left;
}
#kartra-form-slot {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#claim-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#claim-form[hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font: 700 13px/1 var(--ui);
  color: var(--navy);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.field__input {
  border: 2px solid var(--border-light);
  border-radius: 10px;
  padding: 15px 16px;
  font: 600 16px/1 var(--body);
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
select.field__input { padding: 15px 12px; line-height: 1.2; }
.field__input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(47, 217, 234, .25);
}
.field__input:user-invalid {
  border-color: #d9534f;
}

/* Parent/guardian approval — required to claim a seat */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  padding: 2px 0;
}
.consent__box {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.consent__box:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.consent__text {
  font: 600 14.5px/1.45 var(--body);
  color: var(--body-light);
}

.form-micro {
  text-align: center;
  font: 600 13px/1.5 var(--body);
  color: var(--muted-light);
}

.success {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 8px;
}
.success[hidden] { display: none; }
.success__h { font-family: var(--display); font-size: 28px; color: var(--navy); }
.success__p { font: 600 16px/1.6 var(--body); color: var(--body-light); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy-deep);
  color: var(--muted-navy);
  /* extra bottom padding clears the sticky bar */
  padding: 48px 24px 110px;
}
.footer__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.footer__logos {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.footer__logos img:first-child { height: 64px; width: auto; display: block; }
.footer__logos img:last-child  { height: 20px; width: auto; display: block; }
.footer__legal { font: 600 13px/1.6 var(--body); }
.footer__meta  { font: 600 12px/1.5 var(--body); color: var(--faint-navy); }

/* --------------------------------------------------------------------------
   Sticky mobile CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(15, 37, 64, .96);
  border-top: 1px solid rgba(47, 217, 234, .35);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .4);

  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.sticky-cta.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

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