@font-face{font-family:Anton;src:url(fonts/anton-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin.woff2) format("woff2");font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#FFFDF7;color:#231709;font-family:Archivo,system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
.topbar{background:#231709;color:#FFFDF7;text-align:center;font-size:13px;letter-spacing:.12em;padding:10px 12px}
.site-head{position:sticky;top:0;z-index:20;background:#F6EFE2;border-bottom:1px solid #E5DCC8;display:flex;align-items:center;gap:24px;padding:14px 32px}
.wordmark{font-family:Anton,system-ui,sans-serif;font-size:26px;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.mainnav{display:flex;gap:22px;margin-left:8px}
.mainnav a{text-decoration:none;font-size:15px;padding:10px 2px}
.tools{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:14px}
.tools span{padding:10px 0}
.demo-pill{border:1.5px solid #B8291D;color:#B8291D;border-radius:999px;padding:6px 12px;font-size:12px;letter-spacing:.1em}
main section{padding:80px 5vw}
main section[id]{scroll-margin-top:140px}
h2{font-family:Anton,system-ui,sans-serif;font-size:clamp(40px,5vw,64px);letter-spacing:.02em;margin:0 0 28px;text-transform:uppercase}
/* HERO — massive condensed type, packs layered over it (static, no scroll motion) */
.hero{position:relative;overflow:hidden;padding-top:64px;padding-bottom:64px}
.hero-type{font-family:Anton,system-ui,sans-serif;font-size:clamp(64px,13vw,176px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;margin:0;max-width:1100px}
.hero-type span{display:block}
.hero-packs{position:absolute;right:5vw;top:64px;width:38%;max-width:520px}
.hero-packs .pack-main{width:100%;border-radius:16px}
.hero-packs .pack-small{position:absolute;width:38%;border-radius:12px;border:4px solid #FFFDF7}
.hero-packs .pack-a{left:-12%;bottom:-8%}
.hero-packs .pack-b{right:-6%;bottom:-14%}
.hero-sub{font-size:20px;margin:28px 0 0;max-width:560px}
.hero-ctas{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}
.cta{display:inline-block;text-decoration:none;padding:15px 26px;border-radius:999px;font-size:16px;min-height:48px;line-height:18px}
.cta-solid{background:#B8291D;color:#FFFDF7}
.cta-ghost{border:1.5px solid #231709}
/* FEATURE */
.feature{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:#F6EFE2}
.tile{background:#FFFDF7;border:1px solid #E5DCC8;border-radius:12px;padding:22px}
.tile b{display:block;font-size:18px;margin-bottom:6px}
.tile span{font-size:14px;opacity:.75}
/* BESTSELLERS */
.slider-wrap{position:relative}
.slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.card{flex:0 0 280px;scroll-snap-align:start;border:1px solid #E5DCC8;border-radius:16px;padding:16px;background:#fff;transition:background .15s,border-color .15s}
.card[aria-pressed="true"]{background:color-mix(in srgb,var(--tint, #E59A0C) 16%, #FFFDF7);border-color:var(--tint, #E59A0C)}
.card img{width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover}
.card h3{font-size:18px;margin:14px 0 4px}
.card .meta{font-size:13px;opacity:.7;margin:0 0 8px}
.card .price{font-size:18px;margin:0 0 12px}
.card .price s{opacity:.55;font-size:14px}
.add{background:#231709;color:#FFFDF7;border:0;border-radius:999px;padding:12px 20px;font-size:15px;min-height:44px}
.add:disabled{opacity:.5;cursor:default}
.slide-btn{position:absolute;top:38%;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid #E5DCC8;background:#FFFDF7;font-size:26px;line-height:1}
.slide-btn.prev{left:-8px}
.slide-btn.next{right:-8px}
.note{font-size:13px;opacity:.7;margin-top:16px}
/* BUILDER */
.builder{background:#F6EFE2}
.builder-sub{font-size:17px;margin:-12px 0 24px;max-width:640px}
.tiers{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.tier{border:1.5px solid #231709;background:transparent;border-radius:12px;padding:14px 22px;font-size:16px;min-height:48px}
.tier.on{background:#231709;color:#FFFDF7}
.tier em{display:block;font-size:12px;opacity:.7;font-style:normal}
.pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:820px}
.pick-grid button{border:1px solid #CFC4A8;background:#FFFDF7;border-radius:10px;padding:14px;font-size:15px;min-height:48px;text-align:left}
.pick-grid button.picked{background:#231709;color:#FFFDF7}
.box-state{font-size:17px;margin-top:24px}
.reset{margin-left:12px;border:1.5px solid #231709;background:transparent;border-radius:999px;padding:10px 18px;font-size:14px;min-height:44px}
/* GIFTING */
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gift{border:1px solid #E5DCC8;border-radius:16px;padding:16px;background:#fff}
.gift img{width:100%;aspect-ratio:4/3;border-radius:10px;object-fit:cover}
.gift h3{font-size:18px;margin:14px 0 4px}
.gift .meta{font-size:13px;opacity:.7;margin:0 0 8px}
.gift .price{font-size:18px;margin:0 0 12px}
.gift .price s{opacity:.55;font-size:14px}
.demo-tag{font-size:11px;letter-spacing:.1em;color:#B8291D;border:1px solid #B8291D;border-radius:999px;padding:2px 8px;vertical-align:middle}
.ph{background:#E5E5E5;color:#777;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:10px;font-size:13px;letter-spacing:.12em;text-align:center;padding:12px}
/* STORIES */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ch img{width:100%;aspect-ratio:4/3;border-radius:12px;object-fit:cover}
.ch h3{font-size:20px;margin:14px 0 6px}
.ch p{font-size:15px;line-height:1.5;margin:0;opacity:.85}
/* USAGE */
.usage{background:#F6EFE2}
.pairs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pair{background:#FFFDF7;border:1px solid #E5DCC8;border-radius:12px;padding:20px}
.pair b{display:block;font-size:17px;margin-bottom:6px}
.pair span{font-size:14px;opacity:.75}
/* SPOTLIGHT */
.spot{display:flex;gap:28px;align-items:flex-start;max-width:900px}
.spot img{width:320px;border-radius:16px}
.spot h3{font-size:26px;margin:0 0 10px}
.spot p{font-size:16px;line-height:1.55;margin:0 0 10px}
/* PROOF */
.proof{background:#231709;color:#FFFDF7;text-align:center}
.proof p{font-size:20px;margin:0;line-height:1.5}
/* FOOTER */
.foot{background:#16130F;color:#FFFDF7;padding:56px 5vw 40px}
.foot-word{font-family:Anton,system-ui,sans-serif;font-size:clamp(32px,5vw,56px);letter-spacing:.03em}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}
.foot-cols h4{font-size:13px;letter-spacing:.14em;margin:0 0 8px;opacity:.7}
.foot-cols p{font-size:15px;margin:0}
.demo-note{font-size:13px;opacity:.7;max-width:720px;line-height:1.5}
.credit{font-size:13px;letter-spacing:.12em;margin-top:16px}
.credit a{color:#FFFDF7}
@media(max-width:900px){
  .site-head{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .mainnav{order:3;width:100%;gap:16px;margin-left:0}
  .mainnav a{padding:8px 0}
  .tools{font-size:13px;gap:12px}
  main section{padding:48px 16px}
  .hero-packs{position:static;width:100%;max-width:none;margin-top:28px}
  .hero-packs .pack-small{width:32%}
  .hero-packs .pack-a{left:4%;bottom:-10%}
  .hero-packs .pack-b{right:4%;bottom:-10%}
  .hero-sub{font-size:18px}
  .feature{grid-template-columns:1fr 1fr}
  .card{flex-basis:240px}
  .pick-grid{grid-template-columns:1fr 1fr}
  .gift-grid,.chapters{grid-template-columns:1fr}
  .pairs{grid-template-columns:1fr 1fr}
  .spot{flex-direction:column}
  .spot img{width:100%}
  .foot-cols{grid-template-columns:1fr}
}