/* Tyson brand palette: Knockout ink, Championship red, Victory gold.
   Dark surfaces follow the October 31 direction; photography stays untouched. */
:root{
  color-scheme:dark;
  --bg:#181418;
  --panel:#211b20;
  --inset:#110e11;
  --raised:#2b2228;
  --ink:#f4e7d5;
  --muted:#c0b2b7;
  --line:#443239;
  --red:#cf132c;
  --gold:#ffce45;
}
body{background:var(--bg);color:var(--ink)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--gold)}
header{background:var(--inset);color:var(--ink)}
.announcement{background:var(--red);color:var(--ink)}
.nav.active{color:var(--gold)}
.mobile-nav{background:var(--panel);color:var(--muted)}
.mobile-nav button.active{background:#cf132c20;color:var(--gold)}
.primary{background:var(--red);color:var(--ink);box-shadow:0 5px 20px #cf132c18}
.primary:hover{background:#ac1025}
.secondary{color:var(--ink);border-color:#8d6b60;background:#18141855}
.secondary:hover{background:var(--raised)}
.header-demo-badge{color:var(--gold)}
.hero{background:var(--bg);color:var(--ink)}
.hero-copy{background:linear-gradient(90deg,#181418 55%,#18141800)}
.hero .eyebrow{color:var(--gold)}
.hero p{color:var(--ink)}
.hero .primary{background:var(--gold);color:#181418;box-shadow:0 5px 25px #ffce4515}
.hero .primary:hover{background:#edb92b}
.hero .secondary{color:var(--ink);background:#18141880;border-color:#a58770}
.hero-notes{color:#d1bbb4}
.hero-photo-shade{background:linear-gradient(90deg,#181418 0%,transparent 40%),linear-gradient(0deg,#181418,transparent 38%)}
.hero-bottom{background:#110e11b8;border-color:#ffce4533;color:#dec8a7}
.hero-pack-lockup>span{color:var(--ink)}
.eyebrow{color:var(--gold)}
.category,.search,select{background:var(--panel);color:var(--ink);border-color:var(--line)}
.category:hover{border-color:#a06a52;background:var(--raised)}
.category.active{background:var(--red);border-color:var(--red);color:var(--ink)}
.search input{color:var(--ink)}
.search input::placeholder,.profile-form input::placeholder{color:var(--muted);opacity:1}
.pack-card{background:var(--panel);border-color:var(--line);box-shadow:0 8px 24px #0002}
.pack-card:hover{border-color:#9f6e42;box-shadow:0 14px 34px #0005}
.pack-visual{background:radial-gradient(ellipse at 50% 88%,#cf132c30,transparent 72%),var(--inset);border-bottom:1px solid #ffce451c}
.tag{background:#2b2228ed;color:#e1c599;border:1px solid #6b4a36}
.tag.hot{background:var(--red);color:var(--ink);border-color:var(--red)}
.odds-button{color:#dac4aa}
.odds-button:hover{color:var(--gold)}
.pack-info .eyebrow,.top-hit span{color:var(--muted)}
.top-hit strong{color:var(--gold)}
.pack-open{background:var(--red);color:var(--ink)}
.pack-open:hover{background:#ac1025}
.catalog-caption,.product-disclaimer{color:var(--muted)}
.showcase-tile{border-top-color:#936f35}
.showcase-category{color:var(--gold)}
.tyson-welcome{background:var(--inset);color:var(--ink);border:1px solid var(--line)}
.welcome-photo:after{background:linear-gradient(90deg,transparent 80%,#110e11)}
.welcome-copy .eyebrow,.welcome-categories i{color:var(--gold)}
.welcome-copy p,.welcome-categories{color:var(--muted)}
.signature{background:radial-gradient(ellipse at 88% 58%,#9b102844,transparent 55%),linear-gradient(115deg,#24191f,#110e11);border-color:#805d30}
.signature p,.drop-stats span,.drop-copy>small{color:var(--muted)}
.drop-stats strong{color:var(--gold)}
.text-button{color:var(--gold)}
.story-card{background:var(--panel);border-color:var(--line)}
.story-copy h3>span{background:var(--red);color:var(--ink)}
.story-copy>p{color:var(--muted)}
.odds-feature,.vault-illustration,.choice-illustration{background:var(--inset);border-bottom:1px solid var(--line)}
.odds-preview{background:var(--panel);border-color:#725339}
.odds-heading>span,.odds-preview-row small,.odds-preview>p,.vault-preview-head>span{color:var(--muted)}
.odds-bar{background:#46343d}
.tear-illustration{background:radial-gradient(ellipse,#4d1825,var(--inset));color:var(--ink)}
.swipe-hint{color:#d1bbb4}
#vault-preview-items>div{background:var(--panel);border:1px solid var(--line)}
#vault-preview-items small{color:var(--muted)}
.choice-options button{background:var(--panel);border-color:#725339;color:var(--ink)}
.choice-options small,.choice-options b,.choice-label{color:var(--muted)}
.choice-icon{color:var(--gold)}
.rank-illustration{background:linear-gradient(120deg,#181418,#4e1320);color:var(--ink)}
.rank-crown,.rank-preview i{color:var(--gold)}
.rank-preview>small,.rank-preview>p,.rank-note{color:#dac6b2}
.browser-banner{background:linear-gradient(120deg,#110e11,#2c131c);color:var(--ink);border:1px solid var(--line)}
.browser-copy .eyebrow,.browser-copy em{color:var(--gold)}
.browser-copy p,.browser-note{color:var(--muted)}
.phone-preview{background:var(--bg);color:var(--ink);border-color:#080608}
.phone-browser{background:var(--raised);color:var(--muted)}
.phone-nav{border-color:var(--line)}
.phone-cta{background:var(--red);color:var(--ink)}
.faq>div>p,.faq details p{color:var(--muted)}
summary:after{color:var(--gold)}
.empty,.collection-item,.tier{background:var(--panel);border-color:var(--line)}
.empty p,.collection-item>p,.tier p{color:var(--muted)}
.collection-item>small{color:var(--gold)}
.step-icon,.tier>span{color:#c5a56c}
.progress-card{background:linear-gradient(115deg,#3b1320,#211b20);color:var(--ink);border:1px solid #75422f}
.progress-card p{color:var(--muted)}
.tier.unlocked{background:linear-gradient(135deg,#3b2c1c,#211b20);border-color:#ad8241}
.tier.unlocked>span,.tier small{color:var(--gold)}
.vault-footer{background:var(--inset);color:var(--ink);border-top:1px solid #cf132c66}
.footer-links-panel h3{color:var(--gold)}
.footer-brand-panel>span,.footer-links-panel button,.footer-payment,.footer-bottom{color:var(--muted)}
.footer-links-panel button:hover{color:var(--gold)}
.footer-payment>span,.footer-signature>span{color:#e6ca96}
.footer-signature{background:radial-gradient(ellipse at center,#cf132c18,transparent 66%)}
dialog{background:var(--bg);color:var(--ink);border-color:#805d30}
dialog::backdrop{background:#080608dc}
.close{background:var(--red);color:var(--ink)}
.modal-layout p,.odds-table th,.inside-products p,.reveal-stage>p,.profile-form p,.fulfillment-preview p{color:var(--muted)}
.modal-art{background:radial-gradient(#cf132c26,transparent 70%)}
.modal-note{color:var(--muted)!important}
.inside-products>article,.profile-form input{background:var(--panel);color:var(--ink);border-color:var(--line)}
.preview-flow>div{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.preview-flow span{color:var(--gold)}
#toast{background:var(--panel);color:var(--ink);border:1px solid #805d30}
@media(max-width:700px){
  .hero-copy{background:none}
  /* Keep the top fade above Tyson's head; never shade the portrait. */
  .hero-photo-shade{background:linear-gradient(90deg,#181418,transparent 30%),linear-gradient(0deg,#181418,transparent 45%),linear-gradient(#181418,transparent 6px)}
  .welcome-photo:after{background:linear-gradient(0deg,#110e11,transparent 30%)}
}

/* A compact navigation deck with custom metallic brand icons. */
@media(max-width:700px){
  .mobile-nav{
    position:relative;
    height:82px;
    padding:7px 12px 8px;
    gap:7px;
    background:radial-gradient(ellipse at 14% 0,#63112333,transparent 60%),linear-gradient(#171216,#0c090c);
    border-top:1px solid #6c412d;
    border-bottom:1px solid #72522b;
    box-shadow:0 7px 18px #0003,inset 0 1px #ffce450a;
    z-index:4;
  }
  .mobile-nav:after{
    content:'';position:absolute;bottom:-1px;left:18%;right:18%;height:1px;
    background:linear-gradient(90deg,transparent,#e1b55d,transparent);pointer-events:none;
  }
  .mobile-nav button{
    position:relative;min-width:0;min-height:64px;padding:3px 3px 7px;
    border:1px solid #61432b55;border-radius:10px;
    background:linear-gradient(150deg,#31232980,#151015 65%);
    box-shadow:inset 0 1px #ffdf9909,0 3px 7px #0003;
    gap:1px;color:#d9c6ab;overflow:hidden;
    transition:border-color .18s,background .18s,transform .18s;
  }
  .mobile-nav button:active{transform:translateY(1px)}
  .mobile-nav button .nav-icon{
    width:39px;height:39px;display:flex;align-items:center;justify-content:center;
    line-height:1;filter:drop-shadow(0 3px 3px #0009);transition:transform .18s;
  }
  .mobile-nav .nav-icon img{width:39px;height:39px;display:block}
  .mobile-nav button .nav-label{
    font-size:11px;font-weight:700;line-height:1.35;letter-spacing:.1px;
    position:relative;z-index:1;
  }
  .mobile-nav button.active{
    color:#ffe29a;border-color:#d6a34a;
    background:radial-gradient(ellipse at 50% 8%,#ec294c55,transparent 80%),linear-gradient(145deg,#8c1428,#3e0b18);
    box-shadow:inset 0 1px #ffe19d66,inset 0 -1px #180508,0 3px 12px #cf132c26;
  }
  .mobile-nav button.active:after{
    content:'';position:absolute;bottom:0;left:28%;right:28%;height:2px;
    border-radius:2px;background:#ffce45;box-shadow:0 -1px 8px #ffce4560;
  }
  .mobile-nav button.active .nav-icon{transform:translateY(-1px)}
  .mobile-nav button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
}
@media(max-width:370px){
  .mobile-nav{padding-inline:9px;gap:5px}
  .mobile-nav button .nav-label{font-size:10px;letter-spacing:0}
}

/* The pack shares the photograph's coordinate system, rather than the viewport. */
.hero-pack-lockup{inset:0;display:block;pointer-events:none}
.hero-pack-scene{position:absolute;width:1672px;height:941px;transform-origin:0 0;visibility:hidden}
.hero-pack-scene.positioned{visibility:visible}
.hero-pack-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#hero-pack{
  position:absolute;left:1005px;top:325px;width:180px;height:248px;
  transform-origin:50% 100%;
  transform:perspective(1200px) rotate(12deg) rotateY(-14deg) rotateX(7deg);
  filter:drop-shadow(7px 14px 10px #0007) drop-shadow(-2px -1px 1px #ffda8070);
}
#hero-pack .pack-art{width:180px;height:248px;transform:none;box-shadow:inset 6px 0 12px #ffffff24,inset -7px 0 14px #0008}
#hero-pack .pack-art>img{height:126px;width:94%}
#hero-pack .pack-art b{font-size:16px;letter-spacing:1.4px}
#hero-pack .pack-art small{font-size:8px;letter-spacing:3px}
#hero-pack .pack-rule{margin:12px 0}
#hero-pack .pack-art:before,#hero-pack .pack-art:after{height:14px}
.hero-pack-lockup>.hero-pack-caption{position:absolute;right:38px;bottom:67px;font-size:18px;line-height:1.5;letter-spacing:2px;text-align:right}
.hero-pack-caption small{font-size:8px;letter-spacing:1.5px}
@media(max-width:1000px){
  .hero-pack-lockup>.hero-pack-caption{right:20px;font-size:14px}
  .hero-pack-caption small{font-size:6px}
}
@media(max-width:700px){
  .hero-pack-lockup>.hero-pack-caption{right:18px;bottom:60px;font-size:12px;letter-spacing:1.5px}
  .hero-pack-caption small{font-size:5px;letter-spacing:1px}
}
@media(max-width:370px){
  .hero-actions{width:140px}
  .hero-actions button{font-size:11px;padding:11px;gap:8px}
  .hero-notes{max-width:135px}
}
@media(max-width:350px){
  .hero-actions{width:120px}
  .hero-notes{max-width:120px}
}