/* =====================================================
   Sail & Seek — design tokens
   Sky gradient still comes from the logo art for the hero.
   Everything else (navy, teal, coral, gold) is the app's
   real shipped brand palette — flat colors, not gradients,
   matching how the app itself is built.
===================================================== */
:root{
  /* sky gradient — still pulled from the logo art for the hero specifically */
  --sky-deep:  #0B78FF;
  --sky-mid:   #3FA0FA;
  --sky-light: #9FE4FD;

  /* everything below matches the app's real COLORS/DIFFICULTY_COLORS exactly */
  --navy:        #0a1f3d;
  --navy-light:  #122a52;
  --navy-border: #1e3f70;
  --teal:        #00c9a7;
  --coral:       #ff6b6b;
  --coral-dark:  #e2504f;
  --gold:        #f4a324;
  --gold-dark:   #cf8612;
  --white:       #ffffff;
  --blue-muted:  #8aafd4;
  --blue-subtle: #5d7a9a;
  --blue-text:   #a8c4e0;

  --foam: #F5FAFF;
  --ink: var(--navy);
  --ink-soft: var(--blue-subtle);

  --font-display: 'Baloo 2', sans-serif;
  --font-body: 'Nunito Sans', -apple-system, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --max: 1140px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--foam);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--font-display); color: var(--ink); margin:0; }
p{ margin:0; line-height:1.6; }
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; }

.skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{
  left:12px; top:12px;
  background: var(--white); color: var(--ink);
  padding: 8px 14px; border-radius: 8px; z-index:200;
}

/* =====================================================
   Buttons
===================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 999px;
  cursor:pointer;
  border: 2px solid transparent;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn:focus-visible{ outline: 3px solid var(--white); outline-offset: 2px; }

.btn--coral{
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(232,69,63,.35);
}
.btn--coral:hover{ filter: brightness(1.05); }

.btn--gold{
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 4px 0 var(--gold-dark);
}
.btn--gold:hover{ filter: brightness(1.05); }

.btn--ghost-light{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.85);
  color: var(--white);
  backdrop-filter: blur(2px);
}
.btn--ghost-light:hover{ background: rgba(255,255,255,.22); }

.btn--small{ padding: 9px 18px; font-size:.85rem; }

.btn--teal{
  background: var(--teal);
  color: var(--navy);
  box-shadow: 0 4px 0 #00a888;
}
.btn--teal:hover{ filter: brightness(1.05); }

.btn[disabled], .btn:disabled{ opacity:.55; cursor:not-allowed; }

/* =====================================================
   Nav
===================================================== */
.nav{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  background: rgba(245,250,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(11,120,255,.12);
}
.nav__brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color: var(--ink);
}
.nav__brand img{ border-radius: 8px; }

.nav__toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width: 36px; height:36px;
  background:none; border:none; cursor:pointer;
  padding:0;
}
.nav__toggle span{ display:block; height:2px; background: var(--ink); border-radius:2px; }

.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a:not(.btn){
  font-weight:600;
  font-size:.95rem;
  color: var(--ink-soft);
}
.nav__links a:not(.btn):hover{ color: var(--sky-deep); }

@media (max-width: 760px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    background: var(--foam);
    flex-direction:column; align-items:flex-start;
    gap:16px;
    padding: 20px 24px 28px;
    border-bottom: 1px solid rgba(11,120,255,.12);
    display:none;
  }
  .nav__links.is-open{ display:flex; }
}

/* =====================================================
   Hero
===================================================== */
.hero{
  position:relative;
  background: linear-gradient(165deg, var(--sky-deep) 0%, var(--sky-mid) 55%, var(--sky-light) 100%);
  padding: 64px 24px 100px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  overflow:hidden;
}
.hero__inner{
  max-width: 620px;
  display:flex; flex-direction:column; align-items:center;
  gap: 22px;
}
.hero__logo{
  width: min(320px, 80vw);
  height:auto;
  filter: drop-shadow(0 18px 30px rgba(10,42,67,.28));
}
.hero__subhead{
  color: var(--white);
  font-size: 1.15rem;
  font-weight:600;
  max-width: 480px;
  text-shadow: 0 2px 10px rgba(10,42,67,.25);
}
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:4px; }

.hero__scroll-cue{
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform: translate(-50%,0); } 50%{ transform: translate(-50%,8px); } }

/* =====================================================
   Lens motif — echoes the magnifying glass in the logo.
   Used for step badges and the scroll cue.
===================================================== */
.lens{
  position:relative;
  width:64px; height:64px;
  border-radius:50%;
  background: var(--white);
  border: 5px solid var(--gold);
  box-shadow: 0 6px 14px rgba(10,42,67,.18);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.lens::after{
  /* handle */
  content:"";
  position:absolute;
  width:18px; height:6px;
  background: var(--gold);
  border-radius:3px;
  right:-12px; bottom:-6px;
  transform: rotate(45deg);
}
.lens--sm{ width:40px; height:40px; border-width:4px; }
.lens--sm::after{ width:12px; height:4px; right:-8px; bottom:-3px; }
.step__num{
  font-family: var(--font-display);
  font-size:1.4rem;
  font-weight:700;
  color: var(--sky-deep);
}

/* =====================================================
   Section scaffolding
===================================================== */
.section{ padding: 72px 24px; max-width: var(--max); margin:0 auto; }
.section--foam{ background: var(--white); max-width:none; }
.section--foam > *{ max-width: var(--max); margin-left:auto; margin-right:auto; }
.section--sea{ background: var(--navy); max-width:none; color: var(--white); }
.section--sea > *{ max-width: var(--max); margin-left:auto; margin-right:auto; }

.section__head{ text-align:center; max-width: 620px; margin: 0 auto 44px; }
.eyebrow{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .8rem;
  color: var(--coral);
  margin: 0 0 8px;
}
.eyebrow--light{ color: var(--teal); }
.section__head h2{ font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom:10px; }
.section__sub{ color: var(--ink-soft); }

/* =====================================================
   How it works — steps
===================================================== */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.step{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.step h3{ font-size:1.05rem; }
.step p{ color: var(--ink-soft); font-size:.92rem; }

@media (max-width: 880px){
  .steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  .steps{ grid-template-columns: 1fr; }
}

/* =====================================================
   Hunts grid
===================================================== */
.data-note{
  text-align:center;
  font-size:.82rem;
  color: var(--ink-soft);
  background: rgba(11,120,255,.08);
  border: 1px dashed rgba(11,120,255,.3);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  max-width: 560px;
  margin: 0 auto 32px;
}
.data-note code{ background: rgba(11,120,255,.12); padding:1px 6px; border-radius:4px; }

.section__head--sub{ margin: 36px auto 28px; }
.section__head--sub h2{ font-size: 1.3rem; }

.ship-picker{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  max-width: 560px; margin: 0 auto 28px;
}
.ship-picker .field{ flex:1; min-width: 200px; }
.ship-picker select{
  width:100%;
  padding: 12px 14px;
  border: 2px solid rgba(11,120,255,.18);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--navy);
}
.ship-picker select:disabled{ opacity:.5; cursor:not-allowed; }
.ship-picker select:focus-visible{ outline: 3px solid var(--gold); }

.ship-breadcrumb{
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap;
  font-size:.9rem;
  color: var(--ink-soft);
  margin: 0 auto 28px;
  text-align:center;
}
.ship-breadcrumb strong{ color: var(--navy); }
.ship-breadcrumb button{
  background:none; border:none;
  color: var(--coral);
  font-weight:700;
  font-size:.85rem;
  cursor:pointer;
  text-decoration: underline;
}

.hunts-empty{
  text-align:center;
  color: var(--ink-soft);
  background: rgba(11,120,255,.05);
  border-radius: var(--radius-sm);
  padding: 28px;
  max-width: 480px;
  margin: 0 auto;
}

.hunt-context{
  max-width: 680px; margin: 0 auto 28px;
  background: rgba(244,163,36,.12);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  text-align:center;
  font-size:.92rem;
  color: var(--navy);
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap;
}
.hunt-context strong{ color: var(--navy); }
.hunt-context button{
  background:none; border:none;
  color: var(--coral);
  font-weight:700; font-size:.85rem;
  cursor:pointer; text-decoration:underline;
}

.hunt-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 920px){ .hunt-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .hunt-grid{ grid-template-columns: 1fr; } }

.hunt-card{
  background: var(--foam);
  border: 1px solid rgba(11,120,255,.12);
  border-radius: var(--radius);
  padding: 22px;
  display:flex; flex-direction:column; gap:12px;
  position:relative;
}
.hunt-card__top{ display:flex; align-items:center; gap:14px; }
.hunt-card__icon{
  width:48px; height:48px; border-radius:50%;
  background: var(--white);
  border: 2px solid var(--navy-border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
}
.hunt-card__title{ font-size:1.1rem; }
.hunt-card__difficulty{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color: var(--white);
  padding: 3px 9px;
  border-radius: 999px;
  margin-top:4px;
}
.hunt-card__desc{ color: var(--ink-soft); font-size:.92rem; flex:1; }
.hunt-card__meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:.78rem; color: var(--ink-soft);
}
.hunt-card__footer{
  display:flex; align-items:center; gap:8px;
  margin-top:6px;
  padding-top:14px;
  border-top: 1px solid rgba(11,120,255,.12);
  font-size:.84rem;
  color: var(--blue-subtle);
}
.hunt-card__select{ width:100%; margin-top:4px; }
.hunt-card--selected{ border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.hunt-card--inactive{ opacity:.65; }
.hunt-card__badge{
  position:absolute; top:14px; right:14px;
  background: var(--coral); color:#fff;
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  padding: 3px 9px; border-radius:999px;
}

/* =====================================================
   App CTA
===================================================== */
.app-cta{ padding: 8px 0 16px; }
.app-cta__copy{ max-width: 560px; margin: 0 auto; text-align:center; }
.app-cta h2{ color: var(--white); margin: 6px 0 14px; }
.app-cta p:not(.eyebrow):not(.store-note){ color: var(--blue-text); }

.store-buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin: 22px 0 12px; }
.store-btn{
  display:flex; align-items:center; gap:10px;
  background: var(--white);
  color: var(--navy);
  border-radius: 12px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight:700;
}
.store-btn__glyph{ display:flex; }
.store-btn__text{ display:flex; flex-direction:column; text-align:left; line-height:1.2; }
.store-btn__text small{ font-family: var(--font-body); font-weight:600; font-size:.68rem; opacity:.65; }
.store-note{ font-size:.78rem; color: var(--blue-muted); }
.store-note code{ background: rgba(255,255,255,.12); padding:1px 6px; border-radius:4px; }

/* =====================================================
   Packages — pricing tiers (Stripe Payment Link buttons)
===================================================== */
.package-group{ margin-bottom: 36px; }
.package-group:last-child{ margin-bottom:0; }
.package-group__label{
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--blue-subtle);
  text-align:center;
  margin: 0 0 18px;
}
.package-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.package-grid--solo{ grid-template-columns: minmax(0,320px); justify-content:center; }
@media (max-width: 920px){ .package-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .package-grid{ grid-template-columns: 1fr; } }

.package-card{
  background: var(--white);
  border: 2px solid rgba(11,120,255,.12);
  border-radius: var(--radius);
  padding: 24px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  position:relative;
}
.package-card--popular{ border-color: var(--gold); }
.package-card__ribbon{
  position:absolute; top:-12px; left:50%; transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px;
  padding: 4px 12px; border-radius:999px;
}
.package-card__emoji{ font-size:1.8rem; }
.package-card__label{ font-size:1.15rem; }
.package-card__players{
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color: var(--teal);
}
.package-card__desc{ color: var(--ink-soft); font-size:.9rem; }
.package-card__price{ font-family: var(--font-display); font-size:1.6rem; color: var(--navy); margin-top:4px; }
.package-card__buy{ width:100%; margin-top:6px; }

/* =====================================================
   FAQ
===================================================== */
.faq-list{ max-width: 680px; margin: 0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item{ border: 1px solid rgba(11,120,255,.15); border-radius: var(--radius-sm); overflow:hidden; }
.faq-item__q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  background: var(--white);
  border:none; cursor:pointer;
  text-align:left;
  font-family: var(--font-display);
  font-weight:600;
  font-size:1rem;
  color: var(--ink);
  padding: 16px 18px;
}
.faq-item__icon{
  font-size:1.2rem; color: var(--sky-deep);
  transition: transform 200ms ease;
  flex-shrink:0;
}
.faq-item__q[aria-expanded="true"] .faq-item__icon{ transform: rotate(45deg); }
.faq-item__a{
  max-height:0;
  overflow:hidden;
  transition: max-height 240ms ease;
  background: var(--foam);
}
.faq-item__a p{ padding: 0 18px 16px; color: var(--ink-soft); font-size:.94rem; }
.faq-item.is-open .faq-item__a{ max-height: 240px; }

/* =====================================================
   Footer
===================================================== */
.footer{ background: var(--navy); color: var(--blue-text); padding: 40px 24px 26px; }
.footer__top{
  max-width: var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--navy-border);
}
.footer__brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; color:#fff; }
.footer__brand img{ border-radius:8px; }
.footer__links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer__links a{ font-size:.9rem; color: var(--blue-muted); }
.footer__links a:hover{ color:#fff; }
.footer__legal{ max-width: var(--max); margin: 18px auto 0; font-size:.78rem; text-align:center; color: var(--blue-muted); }

/* =====================================================
   Toast
===================================================== */
.toast{
  position:fixed; left:50%; bottom: 26px;
  transform: translateX(-50%) translateY(12px);
  background: var(--navy);
  color: var(--white);
  font-weight:600;
  font-size:.88rem;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  opacity:0; pointer-events:none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 100;
  max-width: 90%;
  text-align:center;
}
.toast.is-visible{ opacity:1; transform: translateX(-50%) translateY(0); }

/* =====================================================
   Misc
===================================================== */
.is-hidden{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}