/* Snap lander (experiment, 11/1), QUARANTINED: see app/snap_lander.py.
   One full-screen section per product line; the page snaps section to section, each
   section rotates sideways through its packs, and the colours follow the pack in view.
   A pack screen has three attention areas, top to bottom on phones and left/right on
   desktop: (1) the pack with real cards behind it, (2) the panel: name, price, what's
   inside, the buy button, (3) the live hit feed along the foot.
   Everything here is scoped under .sl-page / .sl-*. */

/* registered so the theme glides between packs instead of jumping */
@property --bg   { syntax: "<color>"; inherits: true; initial-value: #07080c; }
@property --halo { syntax: "<color>"; inherits: true; initial-value: #1c2440; }
@property --acc  { syntax: "<color>"; inherits: true; initial-value: #9ed4ff; }
@property --acc2 { syntax: "<color>"; inherits: true; initial-value: #e9cd97; }

:root {
  --sl-nav: calc(env(safe-area-inset-top) + 68px);
  --sl-ease: cubic-bezier(.2, .9, .25, 1);
  --sl-text: #f4f5f9;
  --sl-dim: rgba(244, 245, 249, .64);
  --sl-line: rgba(255, 255, 255, .09);
}

html:has(.sl-page) {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: #07080c;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.sl-page) { scroll-behavior: auto; }
}

.sl-page {
  margin: 0;
  color: var(--sl-text);
  background: #07080c;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.sl-page *, .sl-page *::before, .sl-page *::after { box-sizing: border-box; }

/* the nav floats over the sections (each section leaves room for it) */
.sl-page .vb-bar {
  position: fixed;
  inset: 0 0 auto 0;
  background: color-mix(in srgb, #05060a 55%, transparent);
}

/* ------------------------------------------------------------------ sections */

.sl-sec {
  --sl-t: 800ms;
  position: relative;
  height: 100svh;
  min-height: 600px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);  /* the hit feed's long strip must not widen the section */
  padding-top: var(--sl-nav);
  isolation: isolate;
  /* a clean wash: the pack's colour at the top, falling to near-black */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--halo) 70%, var(--bg)) 0%, var(--bg) 55%, color-mix(in srgb, var(--bg) 70%, #000) 100%);
  transition: --bg var(--sl-t) var(--sl-ease), --halo var(--sl-t) var(--sl-ease),
              --acc var(--sl-t) var(--sl-ease), --acc2 var(--sl-t) var(--sl-ease);
}

/* halftone dots in the pack's colour (the site's look), strongest bottom-right */
.sl-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--acc) 1px, transparent 1.7px);
  background-size: 10px 10px;
  opacity: .13;
  -webkit-mask-image: linear-gradient(160deg, transparent 35%, #000 100%);
          mask-image: linear-gradient(160deg, transparent 35%, #000 100%);
}

/* ---------------------------------------------------------- header + tabs */

.sl-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 0;
}
.sl-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--acc);
}
.sl-tabs {
  display: inline-flex;
  max-width: 100%;
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--sl-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.sl-tabs::-webkit-scrollbar { display: none; }
.sl-tab {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--sl-dim);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease, background 300ms ease;
}
.sl-tab[aria-selected="true"] { color: #0a0a0d; background: var(--acc); }

/* ------------------------------------------------- the sideways pack track */

.sl-track {
  display: flex;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.sl-track::-webkit-scrollbar { display: none; }

.sl-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);  /* never wider than the screen, whatever is inside */
  padding: 0 16px;
}

/* ------------------------------------------------ attention 1: the hero */

.sl-hero {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}
.sl-hero > * { grid-area: 1 / 1; }

.sl-pack {
  position: relative;
  z-index: 2;
  height: min(100cqh - 16px, 560px, (100cqw - 8px) * 360 / 201);
  aspect-ratio: 201 / 360;
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 500ms var(--sl-ease);
  animation: sl-float 6s ease-in-out infinite;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6));
}
.sl-pack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
/* a slow holo sheen across the foil, cut to the pack's shape */
.sl-pack::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%) 0 0 / 260% 100%;
  -webkit-mask: var(--art) center / contain no-repeat;
          mask: var(--art) center / contain no-repeat;
  mix-blend-mode: soft-light;
  animation: sl-sheen 5.5s ease-in-out infinite;
}
@keyframes sl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sl-sheen { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }

/* real cards fanned out either side of the pack (pos -1/+1 nearest, -2/+2 further out) */
.sl-fan {
  --d1: min(27cqh, 22cqw);
  --d2: min(46cqh, 34cqw);
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.sl-fan img {
  grid-area: 1 / 1;
  z-index: calc(10 - var(--ai));
  height: min(68cqh, 400px);
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 3.5% / 2.5%;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14);
  transform: translateX(calc(var(--i) * var(--d1))) rotate(calc(var(--i) * 8deg)) translateY(4cqh);
  transition: transform 700ms var(--sl-ease), opacity 500ms ease;
}
.sl-fan img:nth-child(n+3) {
  transform: translateX(calc(var(--i) / 2 * var(--d2))) rotate(calc(var(--i) * 7deg)) translateY(9cqh) scale(.86);
  filter: brightness(.82);
}
.sl-fan.is-slabs img { aspect-ratio: 3 / 5; object-fit: contain; background: rgba(0, 0, 0, .35); border-radius: 8px; }

/* entering a section, or rotating to a pack: the cards spread from behind the pack */
.sl-sec:not(.is-in) .sl-fan img,
.sl-slide:not(.is-active) .sl-fan img { transform: none; opacity: 0; }
.sl-sec .sl-pack img { transition: opacity 600ms ease, translate 800ms var(--sl-ease); }
.sl-sec:not(.is-in) .sl-pack img { opacity: 0; translate: 0 30px; }

/* ------------------------------------------- attention 2: the panel */

.sl-panel {
  width: 100%;
  max-width: 520px;
  justify-self: center;
  display: grid;
  gap: 10px;
  padding: 4px 0 6px;
}
.sl-titlebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.sl-name {
  margin: 0;
  font-size: clamp(26px, 7vw, 46px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
}
.sl-tagline { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--sl-dim); }
.sl-price {
  flex: 0 0 auto;
  font-size: clamp(22px, 6vw, 36px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--acc);
  white-space: nowrap;
}
.sl-claim {
  margin: 0;
  justify-self: start;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #0a0a0d;
  background: var(--acc2);
}

/* what's inside */
.sl-inside {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--sl-line);
}
.sl-inside h3 {
  margin: 0 0 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sl-dim);
}
.sl-tier {
  display: grid;
  grid-template-columns: 70px 92px minmax(0, 1fr) 104px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.sl-tier-name { font-weight: 800; color: var(--c); }
.sl-tier-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.sl-tier-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sl-tier-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.sl-tier-odds { text-align: right; font-size: 12px; color: var(--sl-dim); font-variant-numeric: tabular-nums; }

.sl-stops { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-stop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 6px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--sl-line);
}
.sl-stop b {
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10.5px;
  color: #0a0a0d;
  background: var(--acc);
}
.sl-inside-note { margin: 2px 0 0; font-size: 12px; color: var(--sl-dim); }

.sl-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; counter-reset: step; }
.sl-steps li { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; font-size: 13px; counter-increment: step; }
.sl-steps li::before {
  content: counter(step);
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  color: #0a0a0d;
  background: var(--acc);
}
.sl-steps b { font-weight: 800; }
.sl-steps span { color: var(--sl-dim); font-size: 12px; }

.sl-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; }
.sl-row-txt { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.sl-row-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-row-txt small { flex: 0 0 auto; font-size: 11px; color: var(--sl-dim); }
.sl-grail {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  color: #0a0a0d;
  background: var(--acc2);
}
.sl-row-val { font-weight: 900; color: var(--acc); font-variant-numeric: tabular-nums; }

/* buy */
.sl-cta { display: flex; gap: 8px; }
.sl-buy {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 16px;
  color: #0a0a0d;
  font-weight: 900;
  font-size: 18px;
  text-decoration: none;
  background: linear-gradient(120deg, var(--acc) 0%, var(--acc2) 100%);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--acc) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 160ms ease, box-shadow 200ms ease;
}
.sl-buy b { padding: 4px 10px; border-radius: 10px; font-size: 16px; background: rgba(0, 0, 0, .14); }
.sl-buy:hover { transform: translateY(-1px); }
.sl-buy:active { transform: translateY(1px) scale(.99); }
.sl-buy.is-off { justify-content: center; opacity: .55; filter: grayscale(.6); }
.sl-sim {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  color: var(--sl-text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent);
  background: rgba(0, 0, 0, .25);
}
.sl-bonus { margin: -2px 0 0; font-size: 12px; font-weight: 700; color: var(--acc2); text-align: center; }
.sl-bonus small { color: var(--sl-dim); font-weight: 600; }

/* panel copy follows the pack in, a beat behind */
.sl-sec .sl-panel > * { transition: opacity 500ms ease, translate 600ms var(--sl-ease); }
.sl-sec:not(.is-in) .sl-panel > * { opacity: 0; translate: 0 12px; }
.sl-sec.is-in .sl-panel > :nth-child(2) { transition-delay: 50ms; }
.sl-sec.is-in .sl-panel > :nth-child(3) { transition-delay: 100ms; }
.sl-sec.is-in .sl-panel > :nth-child(n+4) { transition-delay: 150ms; }

/* ------------------------------------- attention 3: the live hit feed */

.sl-foot {
  display: grid;
  gap: 4px;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 6px);
}
.sl-feed {
  display: flex;
  align-items: center;
  border-block: 1px solid var(--sl-line);
  background: rgba(0, 0, 0, .3);
}
.sl-feed-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 16px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid var(--sl-line);
}
.sl-feed-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d6a;
  animation: sl-live 1.8s ease-out infinite;
}
@keyframes sl-live { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 106, .6); } 100% { box-shadow: 0 0 0 8px rgba(255, 77, 106, 0); } }
.sl-feed-window {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent);
}
.sl-feed-run {
  display: flex;
  width: max-content;
  transition: transform 700ms var(--sl-ease);
}
.sl-tick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 22px 6px 14px; white-space: nowrap; border-right: 1px solid var(--sl-line); }
.sl-tick img { width: 28px; height: 39px; object-fit: cover; border-radius: 3px; }
.sl-tick-txt { display: grid; line-height: 1.15; }
.sl-tick-txt strong { font-size: 13px; }
.sl-tick-txt small { font-size: 10.5px; color: var(--sl-dim); }
.sl-tick b { font-size: 14px; color: var(--acc); }

.sl-next {
  justify-self: center;
  appearance: none;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sl-dim);
  cursor: pointer;
}
.sl-next svg { width: 16px; fill: currentColor; animation: sl-nudge 2.2s ease-in-out infinite; }
@keyframes sl-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }

/* ------------------------------------------------------- arrows (desktop) */

.sl-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background 200ms ease, opacity 200ms ease;
}
.sl-arrow svg { width: 24px; fill: var(--sl-text); }
.sl-arrow:hover { background: color-mix(in srgb, var(--acc) 30%, rgba(0, 0, 0, .35)); }
.sl-arrow[disabled] { opacity: .25; cursor: default; }
.sl-arrow--prev { left: 24px; }
.sl-arrow--next { right: 24px; }

/* ------------------------------------------------------------- the pager */

.sl-pager {
  position: fixed;
  right: 10px;
  top: 50%;
  translate: 0 -50%;
  z-index: 60;
  display: grid;
  gap: 10px;
}
.sl-pager button {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: transparent;
  cursor: pointer;
  transition: background 250ms ease, transform 250ms ease;
}
.sl-pager button.is-current { background: #fff; transform: scale(1.25); }
.sl-pager span {
  position: absolute;
  right: 18px;
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--sl-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.sl-pager button:hover span { opacity: .85; }

/* ------------------------------------- reviews (the homepage's player) */

.sl-reviews-sec {
  min-height: 100svh;
  padding-top: var(--sl-nav);
  display: grid;
  align-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: radial-gradient(80% 60% at 50% 40%, #121729 0%, #07080c 70%);
}
.sl-reviews-sec .vb-reviews { margin-top: 0; }
.sl-reviews-sec .vb-story { height: calc(100svh - var(--sl-nav) - 30px); min-height: 520px; }

/* ------------------------------------------------------------ phones */

@media (max-width: 759px) {
  .sl-pager { right: 4px; gap: 8px; }
  .sl-pager button { width: 7px; height: 7px; }
  .sl-tier { grid-template-columns: 62px 84px 1fr 92px; gap: 8px; font-size: 12.5px; }
  .sl-tier-odds { font-size: 11.5px; }
}
/* short screens (in-app browsers): the claim chip and the bar go before the pack shrinks */
@media (max-width: 759px) and (max-height: 720px) {
  .sl-claim { display: none; }
  .sl-tier { grid-template-columns: 62px 1fr auto; }
  .sl-tier-bar { display: none; }
  .sl-inside { gap: 4px; padding: 8px 12px; }
  .sl-tagline { display: none; }
}

/* ------------------------------------------------------------ desktop */

@media (min-width: 760px) {
  .sl-head { padding-top: 18px; }
  .sl-slide {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, 500px);
    align-items: center;
    gap: 4vw;
    padding: 0 max(96px, calc(50vw - 620px));
  }
  .sl-hero { height: 100%; }
  .sl-panel {
    max-width: none;
    gap: 14px;
    padding: 28px;
    border-radius: 24px;
    background: rgba(0, 0, 0, .36);
    border: 1px solid var(--sl-line);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  }
  .sl-tagline { font-size: 16px; }
  .sl-inside { padding: 14px 16px; gap: 9px; }
  .sl-arrow { display: grid; }
  .sl-foot { padding-bottom: 10px; }
  .sl-feed-tag { padding: 0 18px 0 28px; font-size: 11.5px; }
  .sl-tick { padding: 8px 26px 8px 18px; }
  .sl-tick img { width: 32px; height: 45px; }
  .sl-tick-txt strong { font-size: 14px; }
  .sl-tick b { font-size: 15px; }
}

/* =====================================================================
   v3 (11/1): product patterns, the live Discord bubble, trust line,
   desktop polish, FAQ and the closing band
   ===================================================================== */

/* ---------------------------------------------- patterns behind the pack */

.sl-slide { position: relative; }
.sl-hero, .sl-panel { position: relative; z-index: 1; }
.sl-motif {
  --mx: 50%;
  --my: 32%;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 60% at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
}
/* one pattern on every pack (Nick 11/1: the Ascended one, still, only the colours change):
   electric shards cutting across, in the pack's accents */
.sl-motif::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 47%, color-mix(in srgb, var(--acc) 20%, transparent) 47% 49%, transparent 49%),
    linear-gradient(118deg, transparent 52.5%, color-mix(in srgb, var(--acc2) 16%, transparent) 52.5% 53.3%, transparent 53.3%),
    repeating-linear-gradient(118deg, transparent 0 46px, color-mix(in srgb, var(--acc) 11%, transparent) 46px 48px),
    repeating-linear-gradient(28deg, transparent 0 120px, color-mix(in srgb, var(--acc2) 6%, transparent) 120px 121px);
  transition: opacity 400ms ease;
}


/* ------------------------------------- the live Discord review bubble */

/* .sl-page prefix: outranks the copied homepage bubble rules (reviews.css loads after this file) */
.sl-page .sl-live {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 2px;
  width: auto;
  max-width: min(62%, 250px);
  padding: .45rem .6rem .5rem;
  border-radius: 14px 14px 14px 4px;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 350ms ease, translate 450ms var(--sl-ease);
}
.sl-page .sl-live.is-on { opacity: 1; translate: 0 0; }
.sl-page .sl-live { cursor: pointer; }
.sl-live .vb-story-head { gap: .5rem; }
.sl-live .vb-story-avatar { width: 22px; height: 22px; }
.sl-live .vb-story-id strong { font-size: .78rem; }
.sl-live .vb-story-id span { font-size: .66rem; }
.sl-live-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: .62rem; font-weight: 700; color: #b9c0ff; }
.sl-live-tag svg { width: 12px; height: 12px; fill: #5865F2; }
.sl-live-text {
  margin: .25rem 0 0;
  font-size: .82rem;
  line-height: 1.35;
  color: #dbdee1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.35em;
}

/* ---------------------------------------------------------- trust line */

.sl-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--sl-dim);
}
.sl-trust li { display: inline-flex; align-items: center; gap: 5px; }
.sl-trust li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--acc) 85%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8.2 9 4' fill='none' stroke='%230a0a0d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.sl-trust b { color: var(--sl-text); font-weight: 800; }

/* --------------------------------------------- FAQ, close, legal */

.sl-end {
  position: relative;
  scroll-snap-align: start;
  min-height: 100svh;
  padding: calc(var(--sl-nav) + 36px) 20px calc(env(safe-area-inset-bottom) + 28px);
  display: grid;
  align-content: start;
  gap: 56px;
  background:
    radial-gradient(60% 40% at 50% 0%, #141a2e 0%, transparent 70%),
    #07080c;
}
.sl-faq { width: 100%; max-width: 1040px; margin: 0 auto; display: grid; gap: 24px; }
.sl-faq-head { display: grid; gap: 8px; justify-items: start; }
.sl-faq-head .sl-eyebrow { color: var(--vb-gold, #e9cd97); }
.sl-faq-head h2 { margin: 0; font-size: clamp(30px, 7vw, 52px); font-weight: 900; letter-spacing: -.025em; line-height: 1; }
.sl-faq-head p { margin: 0; color: var(--sl-dim); font-size: 15px; }
.sl-faq-head a { color: #b9c0ff; font-weight: 700; }
.sl-faq-list { display: grid; gap: 10px; align-items: start; }
.sl-q {
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--sl-line);
  transition: background 250ms ease, border-color 250ms ease;
}
.sl-q[open] { background: rgba(255, 255, 255, .06); border-color: rgba(233, 205, 151, .35); }
.sl-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 800;
}
.sl-q summary::-webkit-details-marker { display: none; }
.sl-q summary i {
  position: relative;
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
}
.sl-q summary i::before, .sl-q summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.6px;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate 250ms var(--sl-ease);
}
.sl-q summary i::after { rotate: 90deg; }
.sl-q[open] summary i::after { rotate: 0deg; }
.sl-q p { margin: 0; padding: 0 18px 18px; color: var(--sl-dim); line-height: 1.6; font-size: 14.5px; }

.sl-close { width: 100%; max-width: 1040px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; text-align: center; }
.sl-close h2 { margin: 0; font-size: clamp(30px, 7vw, 52px); font-weight: 900; letter-spacing: -.025em; }
.sl-close-row { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sl-close-tile {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  text-align: left;
  text-decoration: none;
  color: var(--sl-text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--halo) 80%, transparent), var(--bg));
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease;
}
.sl-close-tile:hover { transform: translateY(-2px); border-color: var(--acc); }
.sl-close-tile img { width: 54px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.sl-close-txt { display: grid; gap: 2px; min-width: 0; }
.sl-close-txt small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.sl-close-txt b { font-size: 16px; font-weight: 900; }
.sl-close-txt em { font-style: normal; font-weight: 900; color: var(--acc2); }
.sl-top {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: var(--sl-text);
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sl-legal { width: 100%; max-width: 1040px; margin: 0 auto; display: grid; gap: 8px; padding-top: 22px; border-top: 1px solid var(--sl-line); font-size: 12px; color: var(--sl-dim); }
.sl-legal nav { display: flex; gap: 16px; }
.sl-legal a { color: var(--sl-dim); }

/* ------------------------------------------------------- phones (v3) */

@media (max-width: 759px) {
  .sl-fan img:nth-child(n+3) { display: none; }   /* two cards on a phone */
  .sl-trust { display: none; }                      /* room goes to the pack */
  .sl-live-text { -webkit-line-clamp: 2; font-size: .76rem; }
  .sl-live-tag { display: none; }
}

/* ------------------------------------------------------ desktop (v3) */

@media (min-width: 760px) {
  .sl-motif { --mx: 31%; --my: 50%; }
  .sl-eyebrow { font-size: 13px; }
  .sl-tab { padding: 10px 20px; font-size: 15px; }
  .sl-name { font-size: clamp(40px, 3.6vw, 58px); }
  .sl-price { font-size: clamp(32px, 2.8vw, 44px); }
  .sl-tagline { font-size: 17px; }
  .sl-buy { min-height: 64px; font-size: 20px; border-radius: 18px; }
  .sl-sim { min-height: 64px; border-radius: 18px; padding: 0 22px; }
  .sl-tier { font-size: 14px; }
  .sl-trust { justify-content: flex-start; font-size: 12.5px; }
  .sl-bonus { text-align: left; }
  .sl-page .sl-live { padding: .75rem .9rem .8rem; }
  .sl-live .vb-story-avatar { width: 28px; height: 28px; }
  .sl-live .vb-story-id strong { font-size: .88rem; }
  .sl-live-text { font-size: .95rem; }
  .sl-faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-close-row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* =====================================================================
   v4 (11/2, Nick's notes): calmer first screen. Phones: name + price, a
   "Pack details" pill (the details open in a cut-glass window), one wide
   "Rip This Pack" button with two claims under it. Desktop: the details
   stay in the panel, the review bubble moves beside the pack.
   ===================================================================== */

.sl-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title   title"
    "details sim"
    "buy     buy"
    "claims  claims"
    "bonus   bonus";
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
}
.sl-titlebar { grid-area: title; }
.sl-inside, .sl-trust { display: none; }
.sl-details { grid-area: details; }
.sl-sim { grid-area: sim; }
.sl-buy { grid-area: buy; }
.sl-claims { grid-area: claims; }
.sl-bonus { grid-area: bonus; }
.sl-tagline { display: none; }

/* Pack details: the homepage's pill under the pack */
.sl-details {
  justify-self: start;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #eef5ff;
  background: rgba(0, 0, 0, .42);
  border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--acc) 20%, transparent);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sl-details span { font-size: 15px; line-height: 1; transition: transform .18s ease; }
.sl-details:hover span { transform: translateX(3px); }
.sl-details:active { transform: scale(.97); }

/* try it free: a quiet link, never beside the buy button */
.sl-page .sl-sim {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  min-height: 0;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--sl-dim);
  text-decoration: none;
}
.sl-page .sl-sim:hover { color: var(--sl-text); }

/* the buy button: full width, nothing either side; a slow holo sweep across it */
.sl-page .sl-buy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  border-radius: 18px;
  font-size: 19px;
  letter-spacing: -.005em;
  box-shadow:
    0 12px 34px color-mix(in srgb, var(--acc) 34%, transparent),
    0 0 0 1px color-mix(in srgb, var(--acc2) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.sl-page .sl-buy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 62%) 0 0 / 250% 100%;
  animation: sl-buy-sweep 4.2s ease-in-out infinite;
}
@keyframes sl-buy-sweep { 0%, 35% { background-position: 130% 0; } 75%, 100% { background-position: -30% 0; } }
.sl-buy-label { font-weight: 900; }
.sl-page .sl-buy.is-off::after { display: none; }

/* two claims under the button, the homepage's own */
.sl-claims {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: -2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--sl-dim);
}
.sl-claims li { display: inline-flex; align-items: center; gap: 6px; }
.sl-claims li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--acc) 85%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8.2 9 4' fill='none' stroke='%230a0a0d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
/* Nick 11/11: the "1.9× More SIRs" claims stand out: brighter, the number big in the pack's colour */
.sl-claims--x { gap: 4px 18px; font-size: 13.5px; font-weight: 800; color: var(--sl-text); }
.sl-claims--x li::before { display: none; }
.sl-claim-x {
  font-size: 1.32em;
  font-weight: 900;
  letter-spacing: -.01em;
  color: color-mix(in srgb, var(--acc) 70%, #fff);
  text-shadow: 0 0 14px color-mix(in srgb, var(--acc) 45%, transparent);
  font-variant-numeric: tabular-nums;
}
.sl-claims--x .sl-claims-vs { flex-basis: 100%; justify-content: center; margin-top: -2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-dim); }
.sl-claims--x .sl-claims-vs::before { display: none; }
.sl-bonus { margin: -4px 0 0; }

/* the run's stopping rarities, short: the code, the name small under it */
.sl-inside-lead { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--sl-text); }
.sl-stop { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; }
.sl-stop span { font-size: 10.5px; font-weight: 700; color: var(--sl-dim); }

/* the reviews pill, beside the live review bubble */
.sl-reviews-pill {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 4px;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 6px 11px;
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--sl-text);
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.sl-reviews-pill:hover { border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
.sl-stars { color: #ffd36b; font-size: 10px; letter-spacing: 1px; }
.sl-reviews-pill svg { width: 13px; fill: currentColor; opacity: .7; }

/* ---------------------------------------------- the glass window (phones) */

.sl-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 14px calc(env(safe-area-inset-bottom) + 18px);
}
.sl-sheet[hidden] { display: none; }
.sl-sheet-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 10, .3); }
.sl-sheet-panel {
  position: relative;
  width: min(92vw, 420px);
  max-height: min(80svh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(158deg,
    rgba(255, 255, 255, .11), rgba(255, 255, 255, .035) 34%,
    color-mix(in srgb, var(--acc) 7%, transparent) 78%, rgba(255, 255, 255, .05));
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .55), 0 0 46px color-mix(in srgb, var(--acc) 12%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .06);
  animation: sl-glass-in .4s var(--sl-ease);
}
.sl-sheet-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}
@keyframes sl-glass-in { from { transform: translateY(18px) scale(.96); opacity: 0; } }
.sl-sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  cursor: pointer;
}
.sl-sheet-body { overflow-y: auto; padding: 22px 20px 16px; display: grid; gap: 14px; }
.sl-sheet-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 34px; }
.sl-sheet-title b { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.sl-sheet-title em { font-style: normal; font-size: 20px; font-weight: 900; color: var(--acc); }
.sl-sheet-lede { margin: -8px 0 0; font-size: 14px; color: var(--sl-dim); }
.sl-sheet .sl-inside { display: grid; background: rgba(0, 0, 0, .28); }
.sl-sheet .sl-trust { display: flex; justify-content: flex-start; }
.sl-sheet .sl-tier { grid-template-columns: 62px 80px 1fr 86px; gap: 8px; font-size: 12.5px; }
.sl-sheet .sl-tier-bar { display: block; }
.sl-sheet-foot { padding: 12px 20px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sl-sheet-foot:empty { display: none; }

/* while the glass is up: the page's words fade back, the pack stays */
.sl-panel, .sl-head, .sl-foot, .sl-live, .sl-reviews-pill, .sl-pager, .sl-page .vb-bar { transition: opacity .35s ease; }
html.sl-glass { overflow: hidden; }
html.sl-glass .sl-panel, html.sl-glass .sl-head, html.sl-glass .sl-foot, html.sl-glass .sl-page .sl-live,
html.sl-glass .sl-reviews-pill, html.sl-glass .sl-pager, html.sl-glass .sl-page .vb-bar,
html.sl-glass .sl-fan, html.sl-glass .sl-arrow { opacity: 0 !important; pointer-events: none; }
html.sl-glass .sl-pack { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)) brightness(.8); }

/* ------------------------------------------------------- phones (v4) */

@media (max-width: 759px) {
  .sl-name { font-size: clamp(26px, 8vw, 38px); }
  .sl-price { font-size: clamp(24px, 7vw, 34px); }
  .sl-panel { padding-bottom: 4px; }
  /* the pack gets the room: a touch larger, the cards a touch wider */
  .sl-pack { height: min(100cqh - 6px, 600px, (100cqw - 8px) * 360 / 201); }
  .sl-fan { --d1: min(31cqh, 27cqw); }
}
@media (max-width: 759px) {
  .sl-page .sl-live { max-width: min(58%, 240px); }
  .sl-reviews-pill { padding: 5px 9px; font-size: 11px; }
  .sl-stars { font-size: 9px; }
}
@media (max-width: 759px) and (max-height: 700px) {
  .sl-claims { display: none; }
}

/* ------------------------------------------------------ desktop (v4) */

@media (min-width: 760px) {
  .sl-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "inside" "buy" "claims" "bonus" "sim" "trust";
    row-gap: 14px;
  }
  .sl-tagline { display: block; }
  .sl-details { display: none; }
  .sl-inside { grid-area: inside; display: grid; }
  .sl-trust { grid-area: trust; display: flex; justify-content: center; }
  .sl-page .sl-sim { justify-self: center; padding: 0; }
  .sl-page .sl-buy { min-height: 66px; font-size: 21px; border-radius: 20px; }
  .sl-claims { font-size: 13px; }
  .sl-claims--x { font-size: 15px; }
  .sl-bonus { text-align: center; }
  /* the live review sits beside the pack now, not in the panel */
  .sl-page .sl-live { left: 2%; bottom: 6%; max-width: min(46%, 300px); }
  .sl-reviews-pill { right: 2%; bottom: 6%; font-size: 12.5px; padding: 8px 13px; }
  .sl-sheet { display: none !important; }
}

/* =====================================================================
   v5 (11/2, Nick: "too busy, my eyes don't know where to look"; "an
   awesome, Holofoil-branded Rip This Pack button"). One focal point (the
   pack), one action (the button). Everything else steps back.
   ===================================================================== */

@property --sl-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ------------------------------------------------- the Holofoil button
   A dark glass face inside a holofoil rim that slowly turns, like light
   moving round a foil pack; the H mark, the label, the price. A soft holo
   glow pools under it; a sheen crosses the face now and then. */
.sl-page .sl-buy {
  --rim: conic-gradient(from var(--sl-spin), #3ee6ff, #7c5cff, #ff5ce1, #ffd35c, #9dffd2, #3ee6ff);
  position: relative;
  overflow: visible;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 0 18px 0 16px;
  border: 2px solid transparent;
  border-radius: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.01em;
  text-decoration: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 16%, #161a28) 0%, #0c0e17 62%, color-mix(in srgb, var(--acc) 8%, #0a0b12) 100%) padding-box,
    var(--rim) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -10px 24px rgba(0, 0, 0, .35),
    0 14px 30px rgba(0, 0, 0, .45);
  animation: sl-spin 6s linear infinite;
  transition: transform .14s ease, filter .2s ease;
}
@keyframes sl-spin { to { --sl-spin: 360deg; } }
/* the glow: the same foil, blurred, breathing under the button */
.sl-page .sl-buy::before {
  content: "";
  position: absolute;
  inset: 8px 6% -6px;
  z-index: -1;
  border-radius: 24px;
  background: var(--rim);
  filter: blur(18px);
  opacity: .42;
  /* it breathes but no longer turns: a turning blur was re-blurred every frame for as long as the
     page was open, one of the things heating phones (11/5); the rim above still turns */
  animation: sl-breathe 3.2s ease-in-out infinite;
}
@keyframes sl-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .55; } }
/* the sheen across the face, clipped to it */
.sl-page .sl-buy::after {
  inset: 0;
  z-index: 0;
  border-radius: 18px;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 47%, rgba(255, 255, 255, .02) 56%, transparent 64%) 0 0 / 260% 100%;
  animation: sl-buy-sweep 4.6s ease-in-out infinite;
}
.sl-buy > * { position: relative; z-index: 1; }
.sl-buy-mark { width: 26px; height: 26px; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(126, 220, 255, .55)); }
.sl-buy-label {
  font-weight: 900;
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #d9f6ff 50%, #fff 60%, #fff 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: sl-buy-sweep 4.6s ease-in-out infinite;
}
.sl-page .sl-buy .sl-buy-price {
  margin-left: auto;
  padding: 6px 11px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #0a0a0d;
  background: linear-gradient(120deg, var(--acc), var(--acc2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.sl-buy:has(.sl-buy-price) .sl-buy-label { margin-right: auto; }
/* the first-purchase bonus: a small tab on the button's top edge */
.sl-buy-bonus {
  position: absolute !important;
  top: -11px;
  left: 50%;
  translate: -50% 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0a0a0d;
  background: linear-gradient(100deg, #3ee6ff, #c9a6ff 50%, #ffd35c);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.sl-page .sl-buy:hover { filter: brightness(1.08); }
.sl-page .sl-buy:active { transform: scale(.98); filter: brightness(1.18); }
.sl-page .sl-buy.is-off { justify-content: center; background: #15171f; border-color: rgba(255,255,255,.1); animation: none; }
.sl-page .sl-buy.is-off::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sl-page .sl-buy, .sl-page .sl-buy::before, .sl-page .sl-buy::after, .sl-buy-label { animation: none; }
}
.sl-bonus { display: none; }
.sl-live-stars { display: none; }

/* ------------------------------------------------------- phones (v5) */
@media (max-width: 759px) {
  /* name + a quiet "Details" on one line; the price lives in the button */
  .sl-panel {
    grid-template-areas: "title details" "buy buy" "claims claims";
    row-gap: 14px;
    padding: 2px 2px 8px;
  }
  .sl-titlebar .sl-price { display: none; }
  .sl-name { font-size: clamp(24px, 7vw, 32px); }
  .sl-page .sl-sim { display: none; }
  .sl-details {
    justify-self: end;
    padding: 6px 2px;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 11px;
    letter-spacing: .16em;
    color: color-mix(in srgb, var(--acc) 80%, #fff);
  }
  .sl-claims { gap: 4px 14px; font-size: 11px; opacity: .75; }
  .sl-claims li::before { width: 10px; height: 10px; }

  /* the cards step back: smaller, lower, dimmer; the pack is the one thing to see */
  .sl-fan { --d1: min(27cqh, 25cqw); }
  .sl-fan img { height: min(54cqh, 330px); filter: brightness(.62) saturate(.85); }
  .sl-fan img { transform: translateX(calc(var(--i) * var(--d1))) rotate(calc(var(--i) * 9deg)) translateY(8cqh); }

  /* the review: a small note at the pack's foot, stars inside, tap for all reviews */
  .sl-reviews-pill { display: none; }
  .sl-page .sl-live { left: 0; bottom: 0; max-width: min(56%, 230px); padding: .4rem .55rem .45rem; border-radius: 12px 12px 12px 4px; }
  .sl-live .vb-story-avatar { width: 18px; height: 18px; }
  .sl-live .vb-story-id span { display: none; }
  .sl-live-stars { display: inline; margin-left: auto; color: #ffd36b; font-size: 9px; letter-spacing: 1px; }
  .sl-live-text { -webkit-line-clamp: 2; font-size: .74rem; }

  /* the window's foot: the button, then try it free under it */
  .sl-sheet-foot { display: grid; gap: 10px; padding-top: 18px; }
  .sl-sheet-foot .sl-sim { display: inline-flex; justify-self: center; }
}
@media (max-width: 759px) and (max-height: 700px) {
  .sl-claims { display: none; }
}

/* desktop: the title keeps its price; the button carries it too */
@media (min-width: 760px) {
  .sl-page .sl-buy { min-height: 70px; font-size: 21px; padding: 0 20px 0 18px; }
  .sl-buy-mark { width: 28px; height: 28px; }
}

/* =====================================================================
   v6 (11/2): no stars, no Reviews pill (the review itself leads down);
   the price only in the button; the pack opens its details on phones;
   the live review in the scene's own glass instead of a grey Discord card.
   ===================================================================== */
.sl-titlebar .sl-price { display: none; }
.sl-live-stars { display: none !important; }
@media (max-width: 759px) { .sl-pack { cursor: pointer; } }

/* the review: tinted glass like the details window, a quote under the pack */
.sl-page .sl-live {
  background: linear-gradient(158deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 40%, color-mix(in srgb, var(--acc) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--acc) 28%, rgba(255, 255, 255, .12));
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.sl-live-tag { display: none; }
@media (max-width: 759px) {
  .sl-page .sl-live {
    left: 50%;
    bottom: 2px;
    width: max-content;
    max-width: 84%;
    translate: -50% 8px;
    padding: .45rem .8rem .5rem;
    border-radius: 14px;
    text-align: center;
  }
  .sl-page .sl-live.is-on { translate: -50% 0; }
  .sl-live .vb-story-head { justify-content: center; gap: .4rem; }
  .sl-live .vb-story-avatar { width: 16px; height: 16px; }
  .sl-live .vb-story-id strong { font-size: .72rem; opacity: .8; }
  .sl-live-text { margin-top: .15rem; font-size: .8rem; -webkit-line-clamp: 2; }
}

/* desktop (v6): the review lives in the panel under the button, nothing beside the pack */
.sl-live--panel { display: none; }
@media (min-width: 760px) {
  .sl-hero .sl-live { display: none !important; }
  .sl-panel { grid-template-areas: "title" "inside" "buy" "claims" "live" "sim" "trust"; }
  .sl-page .sl-live--panel {
    grid-area: live;
    display: block;
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    padding: .7rem .9rem .75rem;
    border-radius: 14px;
  }
  .sl-live--panel[hidden] { display: block; visibility: hidden; }
  .sl-live--panel .vb-story-avatar { width: 22px; height: 22px; }
  .sl-live--panel .sl-live-text { -webkit-line-clamp: 2; font-size: .9rem; }
}

/* ---------------- slab packs (v6): the fanned slabs are drawn as real slabs:
   a frosted case, our holo-edged label (set, name, grader, grade), the card
   in its well. Same fan positions as the cards. */
.sl-fan .sl-slab {
  grid-area: 1 / 1;
  z-index: calc(10 - var(--ai));
  position: relative;
  height: min(72cqh, 440px);
  aspect-ratio: .6;
  border-radius: 3.2% / 1.9%;
  container-type: inline-size;
  background:
    linear-gradient(118deg, rgba(255,255,255,.08) 28%, rgba(255,255,255,.26) 44%, rgba(255,255,255,.06) 60%),
    linear-gradient(180deg, rgba(228,234,242,.42), rgba(206,214,226,.32) 50%, rgba(220,227,238,.38));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 0 18px rgba(255,255,255,.2),
              0 16px 30px rgba(0,0,0,.6);
  transform: translateX(calc(var(--i) * var(--d1))) rotate(calc(var(--i) * 8deg)) translateY(4cqh);
  transition: transform 700ms var(--sl-ease), opacity 500ms ease;
}
.sl-fan .sl-slab:nth-child(n+3) {
  transform: translateX(calc(var(--i) / 2 * var(--d2))) rotate(calc(var(--i) * 7deg)) translateY(9cqh) scale(.86);
  filter: brightness(.82);
}
.sl-sec:not(.is-in) .sl-fan .sl-slab,
.sl-slide:not(.is-active) .sl-fan .sl-slab { transform: none; opacity: 0; }
.sl-slab-label {
  position: absolute;
  left: 5.5%; right: 5.5%; top: 3%; height: 17%;
  padding: 1.6cqw;
  border-radius: 3px;
  background: linear-gradient(120deg, #5be0ff, #7b9bff 28%, #c98bff 52%, #ff8fd4 72%, #ffd17a);
  display: flex;
}
.sl-slab-label::before {
  content: "";
  position: absolute;
  inset: 1.6cqw;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffffff, #eef1f6);
}
.sl-slab-txt, .sl-slab-grade { position: relative; z-index: 1; }
.sl-slab-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: .8cqw;
  padding: 0 2cqw 0 4.5cqw;
  color: #10131c;
  line-height: 1.05;
}
/* the grading company in its own colour: PSA red, CGC blue, TAG black */
.sl-slab-co { font-size: 7.4cqw; font-weight: 900; letter-spacing: .06em; color: #10131c; }
.sl-slab-co[data-grader="psa"] { color: #c8102e; }
.sl-slab-co[data-grader="cgc"] { color: #0057b8; }
.sl-slab-co[data-grader="tag"] { color: #111111; }
.sl-slab-txt strong { font-size: 6cqw; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-slab-grade {
  flex: 0 0 auto;
  display: grid;
  align-content: center;
  justify-items: end;
  padding-right: 4.5cqw;
  line-height: 1;
}
.sl-slab-grade b { font-size: 14cqw; font-weight: 900; letter-spacing: -.03em; color: #10131c; }
.sl-slab-well {
  position: absolute;
  left: 7%; right: 7%; top: 24%; bottom: 3%;
  border-radius: 2px;
  background: rgba(8,12,22,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  display: grid;
  place-items: center;
  padding: 2.5%;
}
.sl-slab-well img { width: 100%; height: 100%; object-fit: contain; border-radius: 3.5% / 2.5%; }
.sl-slab::after {
  /* the moulded divider between label and card */
  content: "";
  position: absolute;
  left: 4%; right: 4%; top: 21.6%; height: 1.1%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.16));
}
@media (max-width: 759px) {
  .sl-fan .sl-slab:nth-child(n+3) { display: none; }
  .sl-fan .sl-slab { height: min(58cqh, 350px); filter: brightness(.7) saturate(.9); }
}
/* the card inside a slab is not a fanned card: none of the fan's rules reach it */
.sl-page .sl-fan .sl-slab-well img,
.sl-page .sl-slide:not(.is-active) .sl-fan .sl-slab-well img,
.sl-page .sl-sec:not(.is-in) .sl-fan .sl-slab-well img {
  grid-area: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
  opacity: 1;
  filter: none;
  box-shadow: none;
  display: block;
}

/* "there's more below": a soft glow in the pack's colour at the foot of every screen
   that has another under it, breathing slowly, with a light that drifts down through it */
.sl-sec::after,
.sl-reviews-sec::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) - 40px);
  z-index: 2;
  width: min(80vw, 560px);
  height: 84px;
  translate: -50% 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc, #9ed4ff) 70%, #fff) 0%,
              color-mix(in srgb, var(--acc, #9ed4ff) 35%, transparent) 45%, transparent 100%);
  filter: blur(6px);
  opacity: .35;
  animation: sl-more 3.4s ease-in-out infinite;
}
.sl-reviews-sec { position: relative; }
@keyframes sl-more {
  0%, 100% { opacity: .35; transform: translateY(6px) scaleX(.88); }
  50%      { opacity: .85; transform: translateY(0) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-sec::after, .sl-reviews-sec::after { animation: none; opacity: .3; }
}

/* v7 (11/2, Nick: the button's inside was busy): a calm face. The holo rim turns and
   the glow breathes; inside is one still, deep surface and plain white type. */
.sl-page .sl-buy {
  background:
    linear-gradient(180deg, #171a24 0%, #0e1018 100%) padding-box,
    var(--rim) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 14px 30px rgba(0, 0, 0, .45);
}
.sl-page .sl-buy::after { display: none; }
.sl-page .sl-buy .sl-buy-label { background: none; color: #fff; animation: none; }
/* the glow belongs UNDER the button: no own stacking context, so the blurred rim
   paints beneath the face instead of over it */
.sl-page .sl-buy { isolation: auto; }

/* v8 (11/2, Nick: hover in/out "stage glitches"). The hover used to filter/transform the
   button, which gives it its own stacking context for the hover only, so the glow under
   it jumped on top of the face and back. Now the layers never change:
     the button (always isolated) paints the holo rim;
     ::before  = the glow, beneath everything;
     ::after   = the dark face, above the glow, inside the rim;
     content   = above both.
   Hover is a smooth lift and the glow swelling; nothing is filtered. */
.sl-page .sl-buy {
  isolation: isolate;
  background: var(--rim) border-box;
  transition: transform .28s var(--sl-ease);
}
.sl-page .sl-buy::before {
  z-index: -2;
  transition: scale .35s var(--sl-ease);
}
.sl-page .sl-buy::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 18px;
  background: linear-gradient(180deg, #171a24 0%, #0e1018 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  animation: none;
}
.sl-page .sl-buy:hover,
.sl-page .sl-buy:active { filter: none; }
@media (hover: hover) and (pointer: fine) {
  .sl-page .sl-buy:hover { transform: translateY(-2px); }
  .sl-page .sl-buy:hover::before { scale: 1.06 1.25; }
}
.sl-page .sl-buy:active { transform: translateY(0) scale(.985); transition-duration: .1s; }
.sl-page .sl-buy.is-off { background: #15171f; }
.sl-page .sl-buy.is-off::after { background: #15171f; }

/* v9 (11/2): Pack details, bigger and open. The hits line leads ("1–3 EX+ cards every
   pack"); the tiers sit straight on the glass (phones) with room to breathe. */
.sl-inside--tiers .sl-inside-lead {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--sl-text);
}
.sl-sheet .sl-inside {
  padding: 2px 0 0;
  gap: 12px;
  background: none;
  border: 0;
  border-radius: 0;
}
.sl-sheet .sl-inside h3 { font-size: 11px; }
.sl-sheet .sl-inside--tiers .sl-inside-lead { font-size: 20px; margin-top: -4px; }
.sl-sheet .sl-tier {
  grid-template-columns: 78px auto minmax(40px, 1fr) auto;
  gap: 12px;
  font-size: 16px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.sl-sheet .sl-tier-bar { height: 7px; }
.sl-sheet .sl-tier-odds { font-size: 14px; color: var(--sl-text); font-weight: 700; }
.sl-sheet .sl-stop { font-size: 14px; padding: 8px 12px; }
.sl-sheet .sl-stop b { font-size: 12px; }
.sl-sheet .sl-inside-note { font-size: 13px; }
.sl-sheet .sl-row { font-size: 15px; padding: 4px 0; }
.sl-sheet .sl-steps li { font-size: 15px; }
.sl-sheet .sl-steps span { font-size: 13px; }

/* v10 (11/2, Nick: nine things to resolve on a phone is an assault). Phones get five:
   the toggle, the pack (tap = details), the button with its price, ONE quiet line
   (the lead claim + Details), the live hits. The name goes (the toggle and the pack
   art both say it); the review is an occasional moment (snap.js), not a fixture. */
@media (max-width: 759px) {
  .sl-titlebar { display: none; }
  .sl-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "buy buy" "claims details";
    row-gap: 12px;
    padding-top: 10px;
  }
  .sl-claims { justify-content: flex-start; margin: 0; opacity: .7; }
  .sl-claims li:nth-child(n+2) { display: none; }
  .sl-details { padding: 2px 0; font-size: 10.5px; opacity: .85; }
  .sl-sec::after { opacity: .5; }
}
@media (max-width: 759px) and (max-height: 700px) {
  .sl-claims { display: flex; }
}
/* the label and the price never wrap; a long price ("from $12.37") shrinks the label's room, not its line */
.sl-page .sl-buy .sl-buy-label, .sl-page .sl-buy .sl-buy-price { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 380px) { .sl-page .sl-buy { font-size: 18px; gap: 10px; } .sl-page .sl-buy .sl-buy-price { font-size: 15px; } }

/* v11 (11/2): on phones the hit feed is dual purpose: it opens on a review quote (typed
   out, Discord-blue tag), then crossfades into the live hits. No review over the pack. */
.sl-feed-window { position: relative; }
.sl-feed-review, .sl-tag-rev { display: none; }
@media (max-width: 759px) {
  .sl-hero .sl-live { display: none !important; }
  .sl-feed-review {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
    cursor: pointer;
  }
  .sl-feed-review img { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; }
  .sl-feed-review p {
    margin: 0;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.3;
    color: #dbdee1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sl-feed-review b { margin-right: 6px; font-weight: 800; color: #fff; }
  .sl-feed-run { transition: transform 700ms var(--sl-ease), opacity .45s ease; }
  .sl-feed.is-review .sl-feed-review { opacity: 1; pointer-events: auto; }
  .sl-feed.is-review .sl-feed-run { opacity: 0; }
  .sl-feed.is-review .sl-tag-live { display: none; }
  .sl-feed.is-review .sl-tag-rev { display: inline; color: #b9c0ff; }
  .sl-feed.is-review .sl-feed-tag i { background: #5865F2; animation: none; }
}
@media (max-width: 759px) {
  .sl-feed-review p { flex: 1 1 0; white-space: normal; overflow-wrap: anywhere; }
  .sl-feed.is-review .sl-feed-window { -webkit-mask-image: none; mask-image: none; }
}
/* the feed strip is the screen's width, not its ticker's (it measured 5,400px wide) */
.sl-foot { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sl-feed { min-width: 0; max-width: 100%; }

/* =====================================================================
   v12 (11/2, Nick: the motion needs to be much better). The hit feed:
   - the ticker DRIFTS continuously (no card-by-card jumps), soft fades at both ends,
     running only on the screen in view, holding for a review and on hover;
   - phones: a review arrives first (avatar + name rise in, the words fade in one by
     one), then the strip FLIPS: the review lifts out as the live hits rise in, and the
     label rolls from "Reviews" to "Live hits", its dot easing from Discord blue to red.
   ===================================================================== */
.sl-feed-window {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 88%, transparent 100%);
}
.sl-page .sl-feed-run {
  transform: none;
  animation: sl-drift calc(var(--n, 12) * 3.6s) linear infinite;
  animation-play-state: paused;
  transition: translate .6s cubic-bezier(.3, .8, .2, 1), opacity .45s ease;
}
@keyframes sl-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sl-sec.is-view .sl-feed-run { animation-play-state: running; }
.sl-sec.is-view .sl-feed.is-review .sl-feed-run,
.sl-sec.is-view .sl-feed.is-leaving .sl-feed-run { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .sl-sec.is-view .sl-feed:hover .sl-feed-run { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .sl-page .sl-feed-run { animation: none; } }

/* the label: two words stacked in one slot, rolling between them */
.sl-tag-flip { position: relative; display: inline-grid; overflow: hidden; height: 1.25em; line-height: 1.25em; }
.sl-tag-flip > span { grid-area: 1 / 1; transition: translate .55s cubic-bezier(.3, .8, .2, 1), opacity .4s ease; }
.sl-page .sl-tag-rev { display: inline; translate: 0 110%; opacity: 0; color: #b9c0ff; }
.sl-page .sl-tag-live { display: inline; }
.sl-feed-tag i { transition: background-color .6s ease; }

@media (max-width: 759px) {
  /* review layer: waits below, rises in, lifts out */
  .sl-page .sl-feed-review {
    opacity: 0;
    translate: 0 60%;
    transition: translate .6s cubic-bezier(.3, .8, .2, 1), opacity .45s ease;
  }
  .sl-page .sl-feed.is-review .sl-feed-review { opacity: 1; translate: 0 0; pointer-events: auto; }
  .sl-page .sl-feed.is-leaving .sl-feed-review { opacity: 0; translate: 0 -60%; }
  /* the hits wait below while the review reads, then rise in */
  .sl-page .sl-feed.is-review .sl-feed-run { opacity: 0; translate: 0 60%; }
  /* the words: one after another */
  .sl-feed-review p span {
    display: inline;
    opacity: 0;
    transition: opacity .35s ease;
    transition-delay: calc(250ms + var(--w) * 55ms);
  }
  .sl-feed.is-review .sl-feed-review p span { opacity: 1; }
  .sl-feed-review img, .sl-feed-review b { transition: opacity .4s ease .1s; }
  /* the label rolls; the dot eases blue <-> red */
  .sl-page .sl-feed.is-review .sl-tag-live { display: inline; translate: 0 -110%; opacity: 0; }
  .sl-page .sl-feed.is-review .sl-tag-rev { display: inline; translate: 0 0; opacity: 1; }
  .sl-feed.is-review .sl-feed-tag i { background-color: #5865F2; }
}

/* =====================================================================
   v13 (11/3, Nick): phones read top to bottom: the pack, the one claim + Details,
   then Rip This Pack under them (the bonus tab on its top edge needs the gap).
   ===================================================================== */
@media (max-width: 759px) {
  .sl-panel {
    grid-template-areas: "claims details" "buy buy";
    row-gap: 18px;
    padding: 6px 0 10px;
  }
  .sl-claims, .sl-details { align-self: center; }
}
@media (max-width: 759px) {
  /* a slimmer button and tighter rows: the height goes back to the pack */
  .sl-page .sl-panel .sl-buy { min-height: 58px; border-radius: 18px; }
  .sl-page .sl-panel .sl-buy::after { border-radius: 16px; }
  .sl-panel { row-gap: 16px; padding: 2px 0 8px; }
}
@media (max-width: 759px) and (max-height: 700px) {
  .sl-page .sl-panel .sl-buy { min-height: 54px; font-size: 18px; }
  .sl-panel { row-gap: 15px; padding-bottom: 6px; }
}

/* =====================================================================
   v14 (11/3, Nick):
   - the nav: one plain "Bal: $9.59" (no card inside a card) and a thinner bar (site-wide since 11/3, vb-nav.css);
   - phones: the cards behind the pack as bright as on desktop;
   - the pack's colours as a splash behind the pack, not the whole screen washed in it.
   ===================================================================== */
:root { --sl-nav: calc(env(safe-area-inset-top) + 58px); }
.sl-page .vb-bar { height: var(--sl-nav); }   /* the thin bar itself now lives in css/vb-nav.css, site-wide */

/* phones: the fanned cards at full colour, like desktop (they used to sit at 62%) */
@media (max-width: 759px) {
  .sl-page .sl-fan img { filter: none; }
  .sl-page .sl-fan .sl-slab { filter: none; }
}

/* the colour: a neutral night page, the pack's hue only as a glow behind the pack,
   plus its accent dots and shards (which already carry it) */
.sl-sec {
  --gx: 50%;
  --gy: 46%;
  background:
    radial-gradient(ellipse 85% 50% at var(--gx) var(--gy), color-mix(in srgb, var(--halo) 70%, var(--acc) 30%) 0%, color-mix(in srgb, var(--halo) 75%, transparent) 40%, transparent 78%),
    linear-gradient(180deg, #0d0e13 0%, #08090c 60%, #050608 100%);
}
@media (min-width: 760px) {
  .sl-sec { --gx: 31%; --gy: 52%; }
}
.sl-dots { opacity: .09; }

/* =====================================================================
   v15 (11/3, Nick): Slide to Sim, the homepage's pull-tab (vb.css .vb-sim-slider),
   just above the pack, under the pack toggle. On phones the set's name at the top
   of each section goes: the pack itself says it.
   ===================================================================== */
@media (max-width: 759px) {
  .sl-head .sl-eyebrow { display: none; }
  .sl-head { padding-top: 10px; }
}
.sl-slide:has(.sl-simrow) { grid-template-rows: auto minmax(0, 1fr) auto; }
.sl-simrow {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  height: 40px;
  margin-bottom: -12px;   /* the tab rests on the pack's top edge */
  padding-top: 6px;
}
/* the panel's "or try it free" link: the slider is the way to try it now */
.sl-slide:has(.sl-simslide) .sl-panel .sl-sim { display: none !important; }

.sl-simslide {
  --pad: 3px;
  --tab-w: 38px;
  --p: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(232px, 64vw);
  height: 34px;
  padding: 0;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent);
  background: linear-gradient(180deg, rgba(13, 20, 36, .84), rgba(7, 10, 20, .9));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(6, 19, 47, .4), 0 0 14px color-mix(in srgb, var(--acc) 22%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 18px rgba(0, 0, 0, .45);
  color: #f2f7ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 8px color-mix(in srgb, var(--acc) 55%, transparent);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
.sl-simslide.is-grab { cursor: grabbing; }
.sl-simslide:focus { outline: none; }
.sl-simslide:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.sl-ss-label {
  position: relative;
  z-index: 1;
  padding-left: calc(var(--tab-w) + 4px);
  opacity: calc(1 - var(--p) * 1.9);
  transition: opacity .2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sl-simslide.is-done .sl-ss-label,
.sl-simslide.is-result .sl-ss-label { opacity: 1; padding: 0 12px; letter-spacing: .06em; }
.sl-simslide.is-result .sl-ss-tab { opacity: 0; }
.sl-ss-tab {
  position: absolute;
  z-index: 2;
  top: var(--pad);
  bottom: var(--pad);
  left: calc(var(--pad) + 4px + var(--p) * (100% - var(--tab-w) - var(--pad) * 2 - 8px));
  width: var(--tab-w);
}
.sl-ss-tab svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(160, 210, 255, .35)); }
.sl-ss-chev { fill: none; stroke: #0b0f1c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* the tear it leaves: a fine zigzag of holo light up to the tab */
.sl-ss-seam {
  position: absolute;
  top: 50%;
  left: calc(var(--pad) + 8px);
  height: 6px;
  margin-top: -3px;
  width: calc(var(--p) * (100% - var(--tab-w) - var(--pad) * 2 - 8px) + var(--tab-w) / 2);
  background: linear-gradient(90deg, #8ee9ff, #c9a6ff 35%, #ffd9a8 65%, #9dffd2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 4.5 2 1.5 4 4.5 6 1.5 8 4.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") left center / 8px 6px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 4.5 2 1.5 4 4.5 6 1.5 8 4.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") left center / 8px 6px repeat-x;
  opacity: calc(var(--p) * 1.6);
}
.sl-simslide:not(.is-grab) .sl-ss-tab { transition: left .34s cubic-bezier(.3, 1.35, .5, 1), opacity .25s ease; }
.sl-simslide:not(.is-grab) .sl-ss-seam { transition: width .34s cubic-bezier(.3, 1.35, .5, 1), opacity .2s ease; }
/* resting: the tab leans forward now and then, "slide me" */
.sl-slide.is-active .sl-simslide:not(.is-grab):not(.is-done):not(.is-nudge):not(.is-result) .sl-ss-tab { animation: sl-ss-tug 3.2s 1s infinite; }
@keyframes sl-ss-tug {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  22% { transform: translateX(5px); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  47%, 100% { transform: translateX(0); }
}
.sl-simslide.is-nudge .sl-ss-tab { animation: sl-ss-nudge .9s; }
@keyframes sl-ss-nudge {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  38% { transform: translateX(14px); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  100% { transform: translateX(0); }
}
.sl-simslide.is-done .sl-ss-tab, .sl-simslide.is-done .sl-ss-seam { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sl-ss-tab { animation: none !important; } }
/* the slider and the toggle fade with the rest while the details glass is up */
html.sl-glass .sl-simrow { opacity: 0; pointer-events: none; }
.sl-simrow { transition: opacity .35s ease; }

/* desktop: the slider over the pack's column, on its top edge; the panel spans beside both */
@media (min-width: 760px) {
  .sl-slide:has(.sl-simrow) {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "sim panel" "hero panel";
    row-gap: 0;
  }
  .sl-slide:has(.sl-simrow) .sl-simrow { grid-area: sim; height: 46px; margin-bottom: -14px; }
  .sl-slide:has(.sl-simrow) .sl-hero { grid-area: hero; }
  .sl-slide:has(.sl-simrow) .sl-panel { grid-area: panel; align-self: center; }
  .sl-simslide { --tab-w: 44px; width: 260px; height: 38px; font-size: 11px; }
}

/* ?sim=slider on desktop: the pull-tab just beneath the pack, not above it */
@media (min-width: 760px) {
  .sl-slide:has(.sl-simrow) { grid-template-areas: "hero panel" "sim panel"; grid-template-rows: minmax(0, 1fr) auto; }
  .sl-slide:has(.sl-simrow) .sl-simrow { margin: -18px 0 10px; height: 46px; }
}

/* v17 (11/3, Nick): phones, the pack a touch smaller (~92%) */
@media (max-width: 759px) {
  .sl-pack { height: calc(min(100cqh - 6px, 600px, (100cqw - 8px) * 360 / 201) * .92); }
}

/* =====================================================================
   v18 (11/3, Nick: the Pack details window "feels forced"): a proper bottom sheet.
   It rises from the foot of the screen, a solid deep surface with the pack's colour
   as a soft light along its top edge and a grab handle. The set's name, the pack's
   name, one plain line about it. The headline promise. The tiers as clean rows:
   a little metallic coin, the name, the value, and the odds big enough to read at a
   glance. One quiet trust line. The button carries the price.
   ===================================================================== */
@media (max-width: 759px) {
  .sl-sheet { place-items: end center; padding: 0; }
  .sl-sheet-backdrop { background: rgba(2, 3, 6, .62); animation: sl-sheet-fade .3s ease; }
  @keyframes sl-sheet-fade { from { opacity: 0; } }
  .sl-sheet-panel {
    width: 100%;
    max-height: min(86svh, 720px);
    border-radius: 26px 26px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background:
      radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--acc) 16%, transparent) 0%, transparent 60%),
      linear-gradient(180deg, #14161e 0%, #0c0d12 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, .55);
    animation: sl-sheet-up .42s cubic-bezier(.2, .9, .25, 1);
  }
  @keyframes sl-sheet-up { from { transform: translateY(100%); } }
  /* the pack's colour as a soft light along the top edge */
  .sl-sheet-panel::before {
    inset: 0 0 auto;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 85%, #fff) 50%, transparent);
    opacity: .7;
  }
  .sl-sheet-close {
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 0;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
  }
  .sl-sheet-body { padding: 12px 24px 8px; gap: 0; }
  .sl-sheet-grip { justify-self: center; width: 38px; height: 4px; margin-bottom: 18px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
  .sl-sheet-set {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--acc) 80%, #fff);
  }
  .sl-sheet-title { padding: 6px 44px 0 0; }
  .sl-sheet-title b { font-size: 30px; line-height: 1.05; letter-spacing: -.025em; }
  .sl-sheet-lede { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: rgba(244, 245, 249, .62); }

  /* the promise, then the tiers */
  .sl-sheet .sl-inside { margin-top: 22px; padding: 0; gap: 0; background: none; border: 0; }
  .sl-sheet .sl-inside h3 { display: none; }
  .sl-sheet .sl-inside--tiers .sl-inside-lead,
  .sl-sheet .sl-inside-lead {
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--acc) 10%, rgba(255, 255, 255, .03));
    border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
  }
  .sl-sheet .sl-tier {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "name val odds";
    align-items: center;
    gap: 14px;
    padding: 15px 2px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 16px;
  }
  .sl-sheet .sl-tier:first-of-type { border-top: 0; }
  .sl-sheet .sl-tier-bar { display: none; }
  /* the tier's name with a little metallic coin in its colour */
  .sl-sheet .sl-tier-name {
    grid-area: name;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 84px;
    font-size: 16px;
    font-weight: 800;
    color: var(--c);
  }
  .sl-sheet .sl-tier-name::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    background:
      radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 12%, transparent 34%),
      radial-gradient(circle at 50% 50%, var(--c) 0 55%, color-mix(in srgb, var(--c) 55%, #000) 100%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 0 12px color-mix(in srgb, var(--c) 35%, transparent);
  }
  .sl-sheet .sl-tier-val { grid-area: val; font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sl-sheet .sl-tier-odds {
    grid-area: odds;
    justify-self: end;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* one quiet trust line */
  .sl-sheet .sl-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 18px 0 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 12.5px;
    color: rgba(244, 245, 249, .55);
  }
  .sl-sheet .sl-trust b { color: rgba(244, 245, 249, .9); }

  /* the button: full width, carrying the price */
  .sl-sheet-foot { padding: 14px 20px calc(env(safe-area-inset-bottom) + 16px); border-top: 0; }
  .sl-sheet-foot .sl-buy { width: 100%; }
}
@media (max-width: 759px) {
  /* only the promise ("1–2 EX+ cards every pack") gets the box; a list's lead is a small label */
  .sl-sheet .sl-inside:not(.sl-inside--tiers) .sl-inside-lead {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(244, 245, 249, .5);
  }
  .sl-sheet .sl-row { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
  .sl-sheet .sl-row:first-of-type { border-top: 0; }
  .sl-sheet-foot { justify-items: stretch; }
  /* the panel's "grid-area: buy" made an extra implicit column in this grid: reset it */
  .sl-sheet-foot .sl-buy { grid-area: auto; width: 100%; max-width: none; margin: 0; justify-self: stretch; }
}
@media (max-width: 759px) {
  /* one column, one button: the free sim is the tear on the pack itself */
  .sl-sheet-foot { grid-template-columns: minmax(0, 1fr); }
  .sl-sheet-foot .sl-sim { display: none !important; }
}

/* flash toasts ("signed in", a deposit's result): the old homepage's, this page has no styles.css */
.flash-stack {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 70px);
  left: 50%;
  z-index: 1200;
  width: min(32rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  display: grid;
  gap: .6rem;
  margin: 0;
  pointer-events: none;
}
.flash {
  padding: .95rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(158, 212, 255, .18);
  background: rgba(16, 22, 38, .94);
  color: #e8eef7;
  font-weight: 600;
  box-shadow: 0 18px 42px rgba(3, 8, 20, .5);
  animation: flash-in 320ms ease both;
}
.flash.success { border-color: rgba(74, 211, 155, .4); }
.flash.error { border-color: rgba(255, 122, 136, .45); }
.flash.is-gone { opacity: 0; transition: opacity 500ms ease; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------------- slab packs (11/4): every slab in the bag. The pack (phones and desktop),
   Details, or "See all" open the window with the whole bag as a grid of slabs. */
.sl-inside-all {
  justify-self: start;
  margin-top: 4px;
  padding: 6px 0 0;
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--acc) 75%, #fff);
  cursor: pointer;
}
.sl-inside-all span { font-size: 15px; margin-left: 2px; }
.sl-inside-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.sl-pack[data-sl-pack-details] { cursor: pointer; }
.sl-sheet--slabs .sl-sheet-panel { width: min(94vw, 720px); max-height: min(88svh, 820px); }
.sl-allslabs { display: grid; gap: 12px; margin-top: 6px; }
.sl-allslabs-lead {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 245, 249, .55);
}
.sl-allslabs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
.sl-aslab { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; line-height: 1.25; }
.sl-aslab-img {
  aspect-ratio: .716;
  display: grid;
  place-items: center;
  padding: 6%;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(228,234,242,.2), rgba(206,214,226,.1));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  margin-bottom: 4px;
}
.sl-aslab-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.sl-aslab.is-grail .sl-aslab-img { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 80%, #fff), 0 0 18px color-mix(in srgb, var(--acc) 30%, transparent); }
.sl-aslab-grade { font-weight: 800; color: rgba(244, 245, 249, .85); }
.sl-aslab-grade b { font-weight: 900; letter-spacing: .04em; color: #e9ecf3; }
.sl-aslab-grade b[data-grader="psa"] { color: #ff4d64; }
.sl-aslab-grade b[data-grader="cgc"] { color: #4f9bff; }
.sl-aslab-grade b[data-grader="tag"] { color: #f4f5f9; }
.sl-aslab-name { font-weight: 700; color: rgba(244, 245, 249, .92); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* the set matters: its own quiet line under the name, never cut to nothing */
.sl-aslab-set { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: rgba(244, 245, 249, .5); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* values line up along the row whatever the name/set lengths */
.sl-aslab-val { margin-top: auto; padding-top: 2px; font-weight: 900; color: var(--sl-text, #fff); }
.sl-aslab-val em { font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--acc) 80%, #fff); margin-left: 4px; }
@media (max-width: 759px) {
  .sl-allslabs { margin-top: 20px; }
  .sl-allslabs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .sl-aslab { font-size: 11.5px; }
  .sl-aslab-set { font-size: 10.5px; }
}
/* desktop hides the phone window; the slab bag's window opens everywhere */
.sl-sheet.sl-sheet--slabs:not([hidden]) { display: grid !important; }
/* the desktop panel's named areas (trust) don't apply inside the window: one column */
.sl-sheet--slabs .sl-sheet-body > * { grid-area: auto; }
.sl-sheet--slabs .sl-sheet-grip { display: none; }
.sl-sheet--slabs .sl-sheet-set {
  font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--acc) 80%, #fff);
}
.sl-sheet--slabs .sl-trust { justify-content: flex-start; margin-top: 6px; opacity: .85; }

/* ---- 11/4: each grader's own label (Nick: "PSA more PSA-like, CGC more CGC-like... superb").
   PSA: white label in a red frame, red wordmark. CGC: deep navy, white type (Pristine: gold).
   TAG: black, white type, a silver hairline. BGS: silver (Black Label: black and gold).
   Every label gets the grade word over the number and a soft gloss. */
.sl-slab-label { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 6px rgba(0,0,0,.25); overflow: hidden; }
.sl-slab-label::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 54%),
              linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%);
}
.sl-slab-txt { gap: .5cqw; }
.sl-slab-label .sl-slab-co { font-size: 8cqw; font-weight: 900; letter-spacing: .02em; line-height: .95; font-style: normal; }
.sl-slab-txt strong { font-size: 5.4cqw; font-weight: 800; letter-spacing: .01em; }
.sl-slab-grade { gap: .4cqw; justify-items: end; }
.sl-slab-grade small { font-size: 3.3cqw; font-weight: 900; letter-spacing: .12em; line-height: 1; white-space: nowrap; }
.sl-slab-grade b { font-size: 13cqw; line-height: .85; font-variant-numeric: tabular-nums; }

/* PSA (11/4, Nick: "white and pearl... real premium label feel"): a lacquered red frame with a
   fine highlight; inside, a pearl white panel (soft pink / blue / mint iridescence over a fine
   engraved line pattern), set a hair below the frame; the wordmark and type pressed into it. */
.sl-slab-label[data-grader="psa"] {
  background: linear-gradient(180deg, #ff6276 0%, #d71733 18%, #b10d27 62%, #82071a 100%);
  box-shadow: inset 0 .35cqw 0 rgba(255,255,255,.38), inset 0 -.35cqw 0 rgba(60,0,8,.35), 0 2px 6px rgba(0,0,0,.28);
}
.sl-slab-label[data-grader="psa"]::before {
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(255,205,226,.55), rgba(255,205,226,0) 60%),
    radial-gradient(90% 160% at 100% 100%, rgba(186,220,255,.6), rgba(186,220,255,0) 60%),
    radial-gradient(60% 140% at 62% -10%, rgba(206,255,236,.5), rgba(206,255,236,0) 65%),
    repeating-linear-gradient(118deg, rgba(150,140,170,0) 0 .8cqw, rgba(150,140,170,.07) .8cqw 1cqw),
    linear-gradient(180deg, #ffffff 0%, #f6f4f9 55%, #ece9f1 100%);
  box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.95), inset 0 .5cqw 1.1cqw rgba(110,70,95,.16), 0 0 0 .22cqw rgba(90,4,16,.55);
}
.sl-slab-label[data-grader="psa"] .sl-slab-co {
  color: #c8102e; font-style: italic; letter-spacing: -.01em; font-size: 9cqw;
  text-shadow: 0 .25cqw 0 rgba(255,255,255,.9), 0 -.15cqw 0 rgba(110,0,18,.25);
}
.sl-slab-label[data-grader="psa"] .sl-slab-txt strong {
  color: #1b1d24; text-transform: uppercase; font-size: 4.8cqw; letter-spacing: .05em;
  text-shadow: 0 .25cqw 0 rgba(255,255,255,.85);
}
.sl-slab-label[data-grader="psa"] .sl-slab-grade small { color: #c8102e; letter-spacing: .16em; text-shadow: 0 .2cqw 0 rgba(255,255,255,.85); }
/* (no filter or clipped gradient here: either gives the number its own layer, and in the turning
   case a layer can paint through to the other side, as the back's hologram once did) */
.sl-slab-label[data-grader="psa"] .sl-slab-grade b { color: #121419; text-shadow: 0 .3cqw 0 rgba(255,255,255,.95), 0 -.12cqw 0 rgba(0,0,0,.18); }
/* the pearl catches the light: the label's gloss runs a little pink-to-blue on PSA */
.sl-slab-label[data-grader="psa"]::after {
  background: linear-gradient(115deg, rgba(255,255,255,0) 28%, rgba(255,226,240,.32) 38%, rgba(255,255,255,.42) 44%, rgba(214,234,255,.32) 50%, rgba(255,255,255,0) 60%),
              linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%);
}

/* CGC */
.sl-slab-label[data-grader="cgc"] { background: linear-gradient(180deg, #4d86d9, #1d4c9c); }
.sl-slab-label[data-grader="cgc"]::before { background: linear-gradient(170deg, #1b4a96 0%, #0f3070 55%, #0a2456 100%); }
.sl-slab-label[data-grader="cgc"] .sl-slab-co { color: #ffffff; letter-spacing: .1em; }
.sl-slab-label[data-grader="cgc"] .sl-slab-txt strong { color: rgba(236,243,255,.92); }
.sl-slab-label[data-grader="cgc"] .sl-slab-grade small { color: #9fc3ff; }
.sl-slab-label[data-grader="cgc"] .sl-slab-grade b { color: #ffffff; }
.sl-slab-label[data-grader="cgc"][data-perfect] { background: linear-gradient(120deg, #fff3c4, #d9ad3c 35%, #fbe7a1 60%, #b98b22); }
.sl-slab-label[data-grader="cgc"][data-perfect]::before { background: linear-gradient(170deg, #12306a, #0a2152 60%, #081a42); }
.sl-slab-label[data-grader="cgc"][data-perfect] .sl-slab-grade small { color: #f2cf6b; }
.sl-slab-label[data-grader="cgc"][data-perfect] .sl-slab-grade b {
  background: linear-gradient(180deg, #fff6d2, #e9c25a 55%, #c8962a); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* TAG */
.sl-slab-label[data-grader="tag"] { background: linear-gradient(180deg, #3a3d44, #121316); }
.sl-slab-label[data-grader="tag"]::before { background: linear-gradient(180deg, #17181b, #070708); box-shadow: inset 0 0 0 .5cqw rgba(214,219,228,.28); }
.sl-slab-label[data-grader="tag"] .sl-slab-co { color: #ffffff; letter-spacing: .26em; font-size: 7cqw; }
.sl-slab-label[data-grader="tag"] .sl-slab-txt strong { color: rgba(244,245,249,.85); }
.sl-slab-label[data-grader="tag"] .sl-slab-grade small { color: rgba(244,245,249,.6); }
.sl-slab-label[data-grader="tag"] .sl-slab-grade b { color: #ffffff; }

/* BGS */
.sl-slab-label[data-grader="bgs"] { background: linear-gradient(120deg, #f4f6f9, #9aa3b2 40%, #eef1f5 65%, #8890a0); }
.sl-slab-label[data-grader="bgs"]::before { background: linear-gradient(180deg, #e9ecf1, #c9ced8); }
.sl-slab-label[data-grader="bgs"] .sl-slab-co { color: #1d2230; letter-spacing: .08em; }
.sl-slab-label[data-grader="bgs"] .sl-slab-txt strong, .sl-slab-label[data-grader="bgs"] .sl-slab-grade small, .sl-slab-label[data-grader="bgs"] .sl-slab-grade b { color: #1d2230; }
.sl-slab-label[data-grader="bgs"][data-perfect] { background: linear-gradient(120deg, #f6e3a6, #b88a2c 45%, #f2d98c 70%, #9b7222); }
.sl-slab-label[data-grader="bgs"][data-perfect]::before { background: linear-gradient(180deg, #141414, #050505); }
.sl-slab-label[data-grader="bgs"][data-perfect] .sl-slab-co,
.sl-slab-label[data-grader="bgs"][data-perfect] .sl-slab-txt strong,
.sl-slab-label[data-grader="bgs"][data-perfect] .sl-slab-grade small,
.sl-slab-label[data-grader="bgs"][data-perfect] .sl-slab-grade b { color: #e8c766; }

/* only the pack you're looking at floats, and only the hit feed in view drifts: an animation
   keeps its element on its own GPU layer even while paused, and the lander had 12 floating packs
   and 3 feeds composited at once on a phone (11/5, iPhone tab crashes) */
[data-sl-slide]:not(.is-active) .sl-pack { animation: none; }
.sl-sec:not(.is-view) .sl-feed-run { animation: none; }
/* everything decorative holds still where you aren't looking: the sections off screen and the
   pack slides beside the one you're on (the lander ran ~100 infinite animations at once, every
   Rip button's spinning border included, and kept phones hot; 11/5) */
.sl-sec:not(.is-view) *, .sl-sec:not(.is-view) *::before, .sl-sec:not(.is-view) *::after,
[data-sl-slide]:not(.is-active) *, [data-sl-slide]:not(.is-active) *::before, [data-sl-slide]:not(.is-active) *::after {
  animation-play-state: paused !important;
}