/* ═══════════════════════════════════════════════════════════════════
   White Rabbit Hole · Magic Hat
   Same tokens as the homepage, a calm scrolling page instead of the stage
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --orange:#E6530B;
  --ink:#2A1D14;
  --white:#FFFDF8;
  --bg:#1A120C;
  --card:#241811;
  --line:rgba(255,253,248,.14);
  --f-display:"Playfair Display",Georgia,serif;
  --f-body:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,84px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);color:var(--white);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0;padding:0;font-weight:400}
ul{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* nav */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);background:rgba(26,18,12,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav img{height:40px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:clamp(18px,3vw,44px);font-size:14px}
.nav__links a{opacity:.85;transition:opacity .3s}
.nav__links a:hover{opacity:1}
.pill{padding:9px 20px;border-radius:999px;background:var(--orange);opacity:1!important}

/* type */
.eyebrow{font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;opacity:.85}
.display{font-family:var(--f-display);text-transform:uppercase;line-height:1.02;font-size:clamp(40px,7vw,112px)}
.display em{font-style:italic;text-transform:none;color:var(--orange)}
.h2{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(28px,4vw,56px);line-height:1.05}
.h2 em{font-style:italic;text-transform:none;color:var(--orange)}
.lede{font-size:clamp(16px,1.3vw,20px);max-width:46ch;opacity:.92}

section{padding:clamp(56px,9vw,128px) var(--pad)}
.hero{padding-top:clamp(72px,12vw,168px);padding-bottom:clamp(48px,7vw,96px);
  background:radial-gradient(120% 90% at 85% 0%,rgba(230,83,11,.22) 0%,rgba(26,18,12,0) 60%)}
.hero .display{margin:18px 0 26px;max-width:12ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:15px 26px;border-radius:999px;
  background:var(--white);color:var(--ink);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:transform .4s var(--ease),background .3s}
.btn::before{content:"✦";color:var(--orange)}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn--ghost{background:transparent;color:var(--white);border:1px solid var(--line)}
.btn--ghost:hover{background:rgba(255,253,248,.08)}

/* packs */
.packs__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pack{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  transition:transform .5s var(--ease),border-color .3s}
.pack:hover{transform:translateY(-6px);border-color:rgba(230,83,11,.6)}
.pack__art{aspect-ratio:4/3;display:grid;place-items:center;font-family:var(--f-display);font-size:clamp(56px,6vw,96px);color:var(--white);
  background:linear-gradient(135deg,#B13A04 0%,var(--orange) 55%,#FF9A5C 100%)}
.pack:nth-child(2) .pack__art{background:linear-gradient(135deg,#3A2418 0%,#7A3A12 55%,var(--orange) 100%)}
.pack:nth-child(3) .pack__art{background:linear-gradient(135deg,#FF9A5C 0%,var(--orange) 45%,#5A2208 100%)}
.pack__body{display:flex;flex-direction:column;gap:14px;padding:26px;flex:1}
.pack__kind{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.pack h3{font-family:var(--f-display);font-size:clamp(24px,2.2vw,32px);line-height:1.1}
.pack p{opacity:.88;font-size:15.5px}
.pack ul{display:grid;gap:8px;font-size:14.5px;opacity:.9;margin-top:4px}
.pack li{padding-left:22px;position:relative}
.pack li::before{content:"✦";position:absolute;left:0;color:var(--orange);font-size:.85em;top:.15em}
.pack__foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.price{font-family:var(--f-display);font-size:28px}
.price small{font-family:var(--f-body);font-size:13px;opacity:.7}

.bundle{margin-top:22px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;
  border:1px solid rgba(230,83,11,.55);border-radius:20px;padding:clamp(24px,3.5vw,48px);
  background:linear-gradient(120deg,rgba(230,83,11,.16),rgba(36,24,17,0) 70%)}
.bundle__side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.badge{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid var(--orange);color:var(--orange);font-size:12px;letter-spacing:.18em;text-transform:uppercase}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.step{border-top:1px solid var(--line);padding-top:20px}
.step b{display:block;font-family:var(--f-display);font-size:44px;color:var(--orange);font-weight:400;line-height:1}
.step h3{font-family:var(--f-display);font-size:24px;margin:12px 0 8px}
.step p{opacity:.88;max-width:34ch}

/* faq */
.faq{max-width:860px}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--orange);font-size:24px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:12px;opacity:.88;max-width:62ch}

footer{padding:48px var(--pad) 64px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;opacity:.85}
footer a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .grid,.steps{grid-template-columns:1fr}
  .bundle{grid-template-columns:1fr}
  .nav__links a:not(.pill){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pack,.btn{transition:none}
}