/* Shared charcoal glass; solid mineral podium lit from above. */
#taste-stage {
  --frost-face:linear-gradient(145deg,#64676f38,#575b641a 72%);
  --frost-edge:#989ca566;
  --frost-side:linear-gradient(165deg,#464c55,#2c323c);
  --frost-ink:#dde0e6;
  --podium-top:#ded8ce;--podium-edge:#fffaf0;
  --podium-face:#bdb4a5;--podium-base:#8f8575;
  --category-reveal:0;
  --spotlight-reveal:0;
}
#taste-stage .taste-stage-intro {transform-origin:50% 100%;}
#taste-stage .taste-card-points {justify-items:center;text-align:center!important;}
#taste-stage .taste-card-points li {width:fit-content;max-width:100%;margin-inline:auto;text-align:center!important;}
#taste-stage .taste-stage-tabs {
  opacity:var(--category-reveal,0)!important;
  visibility:visible;
  clip-path:none;
  scale:none;
}
/* Translate to the plinth centre before scaling, so the centre stays fixed. */
#taste-stage .taste-lane--pick .taste-stage-tabs {
  left:50%;top:50%;position:absolute;
  transform-origin:50% 50%;
  transform:translate(-50%,-50%) scale(var(--category-reveal,0));
}
#taste-stage.is-mobile-story .taste-lane--pick .taste-stage-tabs {
  left:50%;top:50%;position:absolute;
  transform-origin:50% 50%;
  transform:translate(-50%,-50%) scale(1);
  opacity:1!important;
  visibility:visible!important;
}
#taste-stage.is-desktop-story .taste-stage-hold,
#taste-stage.is-tj-pinned .taste-stage-hold {display:block;}
@media(min-width:861px) {
  #taste-stage.is-desktop-story,
  #taste-stage.is-tj-pinned {height:auto;}
  #taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
    height:18px;clip-path:polygon(0 100%,100% 100%,calc(100% - 16px) 0,16px 0);
    background:linear-gradient(180deg,var(--podium-top),var(--podium-edge) 88%,var(--podium-top))!important;
  }
  #taste-stage .taste-card-motion {margin-bottom:16px!important;}
  #taste-stage .taste-lanes::before {
    background:url('assets/ui/limestone.svg'),
      linear-gradient(90deg,#0000000d,transparent 28%,#00000025 30.8%,transparent 31.2% 67%,#ffffff0d 69%,#00000020 69.3%,transparent 72%),
      linear-gradient(180deg,var(--podium-face),var(--podium-base));
    background-size:144px 144px,100% 100%,100% 100%;
    box-shadow:inset 0 -2px #322a244d;
  }
  #taste-stage .taste-plinth {filter:drop-shadow(0 3px 2px #00000030);}
  #taste-stage .taste-lanes::after {bottom:-26px;height:48px;background:radial-gradient(ellipse,#302a245c,transparent 72%);}
}
@media(max-width:860px) {
  #taste-stage .taste-stage-shell {box-sizing:border-box;min-width:0;max-width:100%;}
  #taste-stage .taste-card {box-sizing:border-box;min-width:0;}
  #taste-stage .taste-stage-intro .eyebrow {font-size:.7rem!important;}
  #taste-stage .taste-stage-intro h2 {font-size:clamp(2.7rem,12vw,3.4rem)!important;line-height:1.04;}
  #taste-stage .taste-story-nav {display:none!important;}
  #taste-stage:not(.is-mobile-story) .taste-card-shot,
  #taste-stage:not(.is-mobile-story) .taste-lane--diy .taste-card-shot,
  #taste-stage:not(.is-mobile-story) .taste-lane--agency .taste-card-shot {
    max-height:none!important;
    min-height:280px;
    aspect-ratio:4/5!important;
    flex:none;
  }
  #taste-stage:not(.is-mobile-story) .taste-card--pick .taste-card-shot,
  #taste-stage:not(.is-mobile-story) .taste-lane--pick .taste-card-shot {
    max-height:none!important;
    min-height:320px;
    aspect-ratio:4/5!important;
    flex:none;
  }
  #packs .packs-head {display:flex;flex-direction:column;align-items:stretch;min-width:0;}
  #packs .packs-head-copy {width:100%;min-width:0;max-width:100%;}
  #packs .packs-head-copy h2 {width:100%;white-space:normal;overflow-wrap:normal;font-size:40px;}
}
@media(max-width:860px) and (min-height:620px) {
  #taste-stage.is-mobile-story {--title-reveal:1;--spotlight-reveal:1;--category-reveal:1;}
  #taste-stage.is-mobile-story .taste-stage-shell {width:auto;margin-inline:0;height:calc(100svh - 128px);grid-template-rows:auto minmax(0,1fr);padding-top:4px;}
  #taste-stage.is-mobile-story .taste-story-nav {display:none!important;}
  #taste-stage.is-mobile-story .taste-stage-intro h2 {font-size:clamp(2.7rem,12.5vw,3.4rem)!important;}
  #taste-stage.is-mobile-story .taste-stage-intro .eyebrow {font-size:.7rem!important;}
  #taste-stage.is-mobile-story .taste-stage-intro,
  #taste-stage.is-mobile-story .taste-stage-intro > * {
    opacity:1!important;transform:none!important;
  }
  #taste-stage.is-mobile-story .taste-planes {display:block!important;inset:20px 0 90px;opacity:.65;overflow:hidden;}
  #taste-stage.is-mobile-story .taste-lane--pick .taste-plinth {width:auto!important;left:0;right:0;}
  #taste-stage.is-mobile-story .taste-lane--pick .taste-plinth-cap {height:14px;clip-path:polygon(0 100%,100% 100%,calc(100% - 12px) 0,12px 0);}
  #taste-stage.is-mobile-story .taste-lane--pick .taste-plinth-rise {box-sizing:border-box;width:100%;border-radius:0 0 4px 4px;}
  #taste-stage.is-mobile-story .taste-card--diy,
  #taste-stage.is-mobile-story .taste-card--agency {background:var(--frost-side)!important;}
  #taste-stage.is-mobile-story .taste-card-points,
  #taste-stage.is-mobile-story .taste-card--pick .taste-card-points {font-size:clamp(.72rem,3.1vw,.88rem)!important;line-height:1.32;gap:.35em;}
  #taste-stage.is-mobile-story .taste-card-shot {
    min-height:60px!important;max-height:none!important;flex:1 1 auto!important;aspect-ratio:auto!important;
  }
  #taste-stage.is-mobile-story .taste-card {gap:8px!important;}
  #taste-stage.is-mobile-story .taste-lane--pick .taste-stage-tabs {
    max-width:calc(100% - 16px);
    opacity:1!important;
    transform:translate(-50%,-50%) scale(1)!important;
  }
  #taste-stage.is-mobile-story[data-story-step="diy"] .taste-lane--pick .taste-card-motion {top:0;left:9%;right:9%;z-index:1;}
  #taste-stage.is-mobile-story[data-story-step="diy"] .taste-lane--agency .taste-card-motion {top:var(--peek);left:4.5%;right:4.5%;z-index:2;}
  #taste-stage.is-mobile-story[data-story-step="agency"] .taste-lane--agency .taste-card-motion {animation:compare-side-arrive .95s cubic-bezier(.22,1,.36,1);}
  #taste-stage.is-mobile-story[data-story-step="pick"] .taste-lane--pick .taste-card-motion {animation:compare-drop-arrive 1.1s cubic-bezier(.22,1,.36,1);}
}
@keyframes compare-side-arrive {from{transform:translateX(65px);}to{transform:translateX(0);}}
@keyframes compare-drop-arrive {0%{transform:translateY(-90px);}75%{transform:translateY(4px);}100%{transform:translateY(0);}}
@media(prefers-reduced-motion:reduce) {
  #taste-stage .taste-stage-intro {opacity:1!important;transform:none!important;}
  #taste-stage .taste-stage-tabs {opacity:1!important;clip-path:none!important;}
}
@media(max-width:860px) {
  #packs.packs-outcomes .packs-head {display:flex;flex-direction:column;align-items:stretch;gap:20px;}
  #packs.packs-outcomes .packs-head-copy {display:block;flex:none;width:100%;min-width:0;max-width:100%;}
}
/* Front elevation: shallow top planes, square inner joins, and contact
   shadows give the centre block depth without exposed side wedges. */
#taste-stage .taste-card--pick,
#taste-stage .taste-card--pick:hover,
#taste-stage.is-mobile-story .taste-card--pick {
  background:linear-gradient(155deg,#102b4b 0%,#07172d 48%,#040e20 100%)!important;
  color:#f1f5fc;
  border-color:#b5d5ff55!important;
  box-shadow:inset 0 1px #dceaff45,inset 0 -1px #01071399,
    0 3px 6px #00071466,0 18px 26px -14px #000613aa!important;
}
#taste-stage .taste-card--pick .taste-card-label,
#taste-stage .taste-card--pick .taste-card-points {color:#eef4ff!important;}
#taste-stage .taste-card--pick .taste-card-vs {color:#a9c4e8!important;}
@media(min-width:861px) {
  #taste-stage .taste-lane--diy {--plinth-h:52px;}
  #taste-stage .taste-lane--agency {--plinth-h:68px;}
  #taste-stage .taste-lane--pick {--plinth-h:98px;position:relative;top:12px;z-index:3;}
  #taste-stage .taste-lanes::before {display:none;}
  #taste-stage .taste-plinth {opacity:var(--podium-reveal,1);filter:none;}
  #taste-stage .taste-plinth-rise,
  #taste-stage .taste-lane--pick .taste-plinth-rise {
    position:relative;height:var(--plinth-h);min-height:var(--plinth-h);
    background:url('assets/ui/limestone.svg'),linear-gradient(105deg,var(--podium-face),var(--podium-base))!important;
    background-size:144px 144px,100% 100%!important;
    box-shadow:inset 0 1px #ffffff45,inset 0 -1px #00000066,0 4px 5px -3px #00000066!important;
  }
  #taste-stage .taste-lane--pick .taste-plinth-rise {
    box-shadow:inset 0 1px #ffffff66,inset 0 -1px #00000088,
      -12px 4px 14px -9px #00000080,12px 4px 14px -9px #00000080,0 15px 18px -12px #00000099!important;
  }
  #taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
    height:18px;
    background:linear-gradient(180deg,var(--podium-top),var(--podium-edge) 92%,var(--podium-top))!important;
  }
  #taste-stage .taste-lane--pick .taste-plinth-cap {
    height:24px;clip-path:polygon(0 100%,100% 100%,calc(100% - 16px) 0,16px 0);
  }
  #taste-stage .taste-lane--pick .taste-card-motion {margin-bottom:22px!important;}
  /* Wings continue behind the centre: only the two outside corners recede. */
  #taste-stage .taste-lane--diy .taste-plinth-cap {
    clip-path:polygon(0 100%,100% 100%,100% 0,16px 0);
  }
  #taste-stage .taste-lane--agency .taste-plinth-cap {
    clip-path:polygon(0 100%,100% 100%,calc(100% - 16px) 0,0 0);
  }
  #taste-stage .taste-lane--pick .taste-plinth::before,
  #taste-stage .taste-lane--pick .taste-plinth::after {content:none;display:none;}
  #taste-stage .taste-lane--pick .taste-card-shot {filter:none!important;}
  #taste-stage .taste-card-shot,
  #taste-stage .taste-lane--diy .taste-card-shot,
  #taste-stage .taste-lane--agency .taste-card-shot,
  #taste-stage .taste-card--pick .taste-card-shot,
  #taste-stage .taste-lane--pick .taste-card-shot {
    height:auto!important;
    aspect-ratio:4/5;
    min-height:0;
    flex:none;
  }
  #taste-stage .taste-lane--diy .taste-card-shot,
  #taste-stage .taste-lane--agency .taste-card-shot {
    max-height:236px!important;
  }
  #taste-stage .taste-card--pick .taste-card-shot,
  #taste-stage .taste-lane--pick .taste-card-shot {
    max-height:288px!important;
  }
}
@media(max-width:860px) and (min-height:620px) {
  #taste-stage.is-mobile-story {--plinth-stack:60px;}
  #taste-stage.is-mobile-story .taste-lane--pick .taste-plinth-rise {height:46px;min-height:46px;}
}
@keyframes compare-drop-arrive {0%{transform:translateY(-52px);}75%{transform:translateY(3px);}100%{transform:translateY(0);}}

/* Night spotlight follows the title rather than lighting an empty stage. */
html[data-skin="nocturne"] #taste-stage .taste-stage-shell::after {opacity:var(--spotlight-reveal,1);}
@media(max-width:860px) and (min-height:620px) {
  #taste-stage.is-mobile-story .taste-stage-shell::after,
  html[data-skin="nocturne"] #taste-stage.is-mobile-story .taste-stage-shell::after {
    opacity:.55!important;transition:none!important;
  }
}
@media(prefers-reduced-motion:reduce) {
  html[data-skin="nocturne"] #taste-stage .taste-stage-shell::after {opacity:1;transition:none;}
}

/* Desktop: land in document flow first. Sticky + modest hold only after
   the title is visible (is-tj-pinned). Fit eyebrow → podium in one screen. */
@media (min-width: 861px) {
  #taste-stage.taste-stage.is-pending .taste-card-motion,
  #taste-stage.taste-stage.is-pending .taste-card-motion .taste-card,
  #taste-stage.taste-stage.is-pending .taste-stage-led,
  #taste-stage.taste-stage.is-pending .taste-led-path,
  #taste-stage.taste-stage.is-pending .taste-stage-intro > * {
    opacity: 0 !important;
    visibility: hidden;
  }

  #taste-stage.taste-stage {
    overflow: visible;
    box-sizing: border-box;
    scroll-margin-top: var(--header, 72px);
    padding-block: clamp(18px, 2.2vw, 32px);
    min-height: 0;
  }
  /* Always-on pin + one-viewport hold. Toggling these late yanks the page. */
  #taste-stage .taste-stage-shell {
    position: sticky !important;
    top: var(--header, 72px) !important;
  }
  #taste-stage .taste-stage-hold {
    display: block;
    height: 100vh !important;
    pointer-events: none;
  }
  #taste-stage .taste-stage-intro {
    margin-bottom: clamp(22px, 2.6vw, 36px) !important;
  }
  #taste-stage .taste-stage-intro .eyebrow {
    margin-bottom: 10px !important;
    font-size: 0.84rem !important;
  }
  #taste-stage .taste-stage-intro h2 {
    font-size: clamp(3.05rem, 4.6vw, 4.4rem) !important;
    line-height: 1.04;
  }
  #taste-stage .taste-stage-arena {
    min-height: 0 !important;
    padding: 10px 0 16px !important;
  }
  #taste-stage .taste-lanes {
    padding-top: 22px !important;
  }
  #taste-stage .taste-card {
    gap: 8px;
    padding: 10px 10px 12px;
  }
  #taste-stage .taste-card--pick {
    gap: 10px;
    padding: 12px 12px 14px;
  }
  #taste-stage .taste-card-shot,
  #taste-stage .taste-lane--diy .taste-card-shot,
  #taste-stage .taste-lane--agency .taste-card-shot {
    max-height: 204px !important;
    height: auto !important;
  }
  #taste-stage .taste-card--pick .taste-card-shot,
  #taste-stage .taste-lane--pick .taste-card-shot {
    max-height: 248px !important;
    height: auto !important;
  }
  #taste-stage .taste-lane--diy { --plinth-h: 40px; }
  #taste-stage .taste-lane--agency { --plinth-h: 54px; }
  #taste-stage .taste-lane--pick { --plinth-h: 76px; top: 0; }
  #taste-stage .taste-card-motion { margin-bottom: 10px !important; }
  #taste-stage .taste-lane--pick .taste-card-motion { margin-bottom: 12px !important; }
  #taste-stage .taste-card-points { font-size: clamp(0.72rem, 0.8vw, 0.84rem); }
  #taste-stage .taste-card--pick .taste-card-points { font-size: clamp(0.76rem, 0.86vw, 0.9rem); }
  #taste-stage .taste-lanes::after { bottom: -16px; height: 36px; }

  @media (hover: hover) and (pointer: fine) {
    #taste-stage.is-settled .taste-plane {
      transform: perspective(1100px) rotateX(var(--plane-tilt-x, 0deg)) rotateY(var(--plane-tilt-y, 0deg)) translate3d(0, var(--plane-lift, 0px), 0);
      transition: transform 220ms ease-out;
    }
  }
}

@media (min-width: 861px) and (max-height: 820px) {
  #taste-stage.taste-stage { padding-block: 14px; }
  #taste-stage .taste-stage-intro { margin-bottom: clamp(14px, 1.6vw, 22px) !important; }
  #taste-stage .taste-stage-intro h2 { font-size: clamp(2.85rem, 4.1vw, 3.8rem) !important; }
  #taste-stage .taste-stage-intro .eyebrow { margin-bottom: 8px !important; font-size: 0.8rem !important; }
  #taste-stage .taste-lanes { padding-top: 16px !important; }
  #taste-stage .taste-lane--diy .taste-card-shot,
  #taste-stage .taste-lane--agency .taste-card-shot {
    max-height: 182px !important;
  }
  #taste-stage .taste-card--pick .taste-card-shot,
  #taste-stage .taste-lane--pick .taste-card-shot {
    max-height: 220px !important;
  }
  #taste-stage .taste-lane--diy { --plinth-h: 34px; }
  #taste-stage .taste-lane--agency { --plinth-h: 46px; }
  #taste-stage .taste-lane--pick { --plinth-h: 68px; }
}

/* Last-wins desktop type + half-tilt planes. More specific than studio-polish / lighting. */
@media (min-width: 861px) {
  html #taste-stage.taste-stage .taste-stage-intro .eyebrow {
    font-size: 0.84rem !important;
    letter-spacing: 0.2em;
  }
  html #taste-stage.taste-stage .taste-stage-intro h2 {
    font-size: clamp(3.05rem, 4.6vw, 4.4rem) !important;
    line-height: 1.04 !important;
  }
  html #taste-stage.taste-stage .taste-stage-intro {
    margin-bottom: clamp(22px, 2.6vw, 36px) !important;
  }
  html #taste-stage.taste-stage .taste-lanes {
    padding-top: 28px !important;
  }
}

@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  html #taste-stage.taste-stage.is-settled .taste-plane {
    transform: perspective(1100px)
      rotateX(var(--plane-tilt-x, 0deg))
      rotateY(var(--plane-tilt-y, 0deg))
      translate3d(0, var(--plane-lift, 0px), 0)
      scale(var(--plane-scale, 1)) !important;
    transition: transform 220ms ease-out;
  }
}

/* Last-wins: keep the desktop podium scale if earlier TJ sheets reset arena. */
@media (min-width: 861px) {
  html #taste-stage.taste-stage:not(.is-mobile-story) .taste-stage-arena {
    transform: scale(0.9);
    transform-origin: top center;
  }
}