/* =========================================================================
   ShinyHits landing — loaded on "/" only.

   The page is built from the things collectors actually handle: a hand of
   shiny cards, a booster to rip, a binder page, a set checklist. "Shiny" is a material here, not a colour: foil is
   a rainbow band plus glitter plus a glare that all follow the pointer (or
   the phone's tilt), layered with blend modes over real card art — never a
   flat gradient laid over a box.
   ========================================================================= */

@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --int { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  /* the four-point sparkle from the games' shiny animation */
  --sh-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12C16.4 12.9 12.9 16.4 12 24C11.1 16.4 7.6 12.9 0 12C7.6 11.1 11.1 7.6 12 0Z'/%3E%3C/svg%3E");
  --sh-ice: #bfe8f7;
  --sh-up: #ffb45e;
  --sh-down: #5de3b0;
  --sh-card-r: 4.6% / 3.35%;
  --sh-bg: #16171b;
  --sh-bg-2: #1d1f24;
  /* iridescent, pastel-weighted so it reads as foil on dark grey rather than as a
     rainbow; used for text, stickers and the progress fills */
  --sh-irid: linear-gradient(100deg, #f4fbff 0%, #bfe9ff 16%, #f2ccff 32%, #fff1b8 48%, #b6ffe4 64%, #d3eef8 80%, #f4fbff 100%);
  --sh-sticker: repeating-linear-gradient(128deg, rgba(255, 255, 255, 0.4) 0 1.5px, transparent 1.5px 4.5px),
                linear-gradient(112deg, #fbfdff 0%, #cdefff 18%, #f5d8ff 38%, #fff2c2 56%, #caffea 76%, #eef8ff 100%);
}

/* The landing manages its own widths so full-bleed bands never overflow the
   viewport (the old .bleed trick pushed ~130px of sideways scroll). */
.mkt-main { width: 100%; max-width: none; padding: 0; }
.sh-page { overflow-x: clip; background: linear-gradient(180deg, transparent 0, var(--sh-bg) 46rem, var(--sh-bg)); }
.sh-wrap { width: min(78rem, 100% - 2.5rem); margin-inline: auto; }
.sh-page a { text-decoration: none; }
.sh-page img { max-width: 100%; }

/* ------------------------------------------------------------------ type */
.sh-h1 {
  margin: 1rem 0 1.15rem; font-weight: 900; line-height: 0.9; letter-spacing: -0.048em;
  font-size: clamp(2.9rem, 5.3vw, 4.9rem); max-width: 14ch; text-wrap: balance;
}
.sh-h2 {
  margin: 0.75rem 0 0.9rem; font-weight: 900; line-height: 0.95; letter-spacing: -0.042em;
  font-size: clamp(2.1rem, 4.4vw, 3.7rem); text-wrap: balance;
}
.sh-h2-xl { font-size: clamp(2.5rem, 5.6vw, 4.9rem); }
.sh-sub, .sh-lede { color: var(--ink-dim); line-height: 1.6; margin: 0; max-width: 38rem; }
.sh-sub { font-size: clamp(1rem, 1.25vw, 1.1rem); }
.sh-lede { font-size: clamp(1.02rem, 1.35vw, 1.16rem); max-width: 34rem; }
.sh-sub a { color: var(--sh-ice); }
.sh-no {
  display: inline-flex; align-items: center; gap: 0.55em; color: var(--muted);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.sh-no i { font-style: normal; color: var(--sh-ice); letter-spacing: 0.02em; }
.sh-no-secret i { color: #ffd76a; text-shadow: 0 0 12px rgba(255, 215, 106, 0.6); }
.sh-head-center { text-align: center; }
.sh-head-center .sh-sub { margin-inline: auto; }

/* Foil lettering: pastel iridescence with a specular band that travels across
   it, the way light catches the border of a holo card.

   Every moving part runs on the compositor (these used to animate
   background-position, which repainted the heading every frame and, with the
   rest of the page's foil, saturated the main thread). landing.js gives each
   phrase data-text and an <i class="sh-sheen">:
     ::before          the same words in the gradient's far colours, fading
                       in and out, so the iridescence shifts
     .sh-sheen         a soft band (masked) that sweeps across the phrase...
     .sh-sheen::before ...carrying a white copy of the words that slides back
                       by exactly as much, so its glyphs stay on the real ones
   The phrase is an inline-block so the copies wrap exactly like it; the taller
   line box keeps descenders inside the painted area and the negative margin
   hands the height back, so the heading's lines don't move. */
.sh-foiltext {
  position: relative; display: inline-block; line-height: 1.25; margin-block: -0.16em;
  background: var(--sh-irid); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sh-foiltext[data-text]::before, .sh-sheen::before {
  position: absolute; left: 0; top: 0; width: 100%; pointer-events: none;
}
/* the copies are generated content, so they can't be selected; the "/ ''"
   keeps the phrase from being read out twice */
.sh-sheen::before { content: attr(data-text); }
.sh-foiltext[data-text]::before {
  content: attr(data-text) / "";
  background: var(--sh-irid) 100% 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  opacity: 0; animation: sh-textfoil-hue 7s var(--ease) infinite;
}
.sh-sheen {
  position: absolute; inset: 0; pointer-events: none; font-style: normal;
  -webkit-mask: linear-gradient(100deg, transparent 29%, #000 50%, transparent 71%) no-repeat;
          mask: linear-gradient(100deg, transparent 29%, #000 50%, transparent 71%) no-repeat;
  transform: translateX(-117%); animation: sh-sheen 7s var(--ease) infinite;
}
.sh-sheen::before {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.95);
  transform: translateX(117%); animation: sh-sheen-copy 7s var(--ease) infinite;
}
/* the h1 sets its lines tighter (0.9), so its phrase hands back a little more */
.sh-h1 .sh-foiltext { margin-block: -0.175em; }
/* translateZ in the opacity and filter keyframes below changes nothing on
   screen; it keeps the animation on the compositor even where Chrome has
   culled the element's paint (see brand-ice in style.css) */
@keyframes sh-textfoil-hue { 0% { opacity: 0; transform: translateZ(0); } 45%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateZ(0.001px); } }
@keyframes sh-sheen { 0% { transform: translateX(-117%); } 45%, 100% { transform: translateX(107%); } }
@keyframes sh-sheen-copy { 0% { transform: translateX(117%); } 45%, 100% { transform: translateX(-107%); } }

/* ---------------------------------------------------------------- buttons */
.sh-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.sh-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  height: 3.15rem; padding: 0 1.45rem; border-radius: 999px; border: 0; overflow: hidden;
  font: inherit; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.sh-btn small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.sh-btn:hover { transform: translateY(-2px); }
/* magnetic: landing.js pulls a foil button toward a mouse that comes near */
.sh-btn-foil { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sh-btn:active { transform: translateY(0) scale(0.97); }
.sh-btn-lg { height: 3.5rem; padding: 0 1.8rem; font-size: 1.06rem; }
.sh-btn-foil {
  color: #101115; background: var(--sh-irid); background-size: 180% 100%; isolation: isolate;
  box-shadow: 0 12px 34px -12px rgba(199, 233, 247, 0.75);
}
/* The foil drifts by sliding a wider copy of it (compositor-only) rather than
   by animating background-position. The button's top highlight and bottom
   shade ride on the copy: they are horizontal lines, so sliding them sideways
   changes nothing, and on the button itself they would sit under the copy. */
.sh-btn-foil::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 180%;
  background: var(--sh-irid); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
  animation: sh-btnfoil 8s ease-in-out infinite;
}
.sh-btn-foil::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-120%); animation: sh-glint 4.5s ease-in-out infinite 1.2s;
}
.sh-btn-line { color: var(--ink); background: rgba(211, 238, 248, 0.05); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.24); }
.sh-btn-line:hover { box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.5); }
@keyframes sh-btnfoil { 0%, 100% { transform: none; } 50% { transform: translateX(-44.44%); } }
@keyframes sh-glint { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

/* =============================================================== foil ===
   Structure (hero, binder, pulled cards, finale):
     [data-sh-foil]  → writes --mx --my (light position) --rx --ry (tilt) --int
       .sh-face | .sh-pocket-card   isolation boundary
         img
         .sh-foil   rainbow bands + glitter, color-dodge
         .sh-glare  soft light at the pointer, overlay                     */
[data-sh-foil] { --rx: 0deg; --ry: 0deg; }
.sh-face, .sh-pocket-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--sh-card-r);
  background: #141519;
}
.sh-face img, .sh-pocket-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 600 / 825; object-fit: cover;
  -webkit-user-select: none; user-select: none;
}
.sh-foil, .sh-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.sh-foil {
  background-image:
    url("img/sh-glitter.webp"),
    repeating-linear-gradient(112deg,
      hsl(350 95% 72%) 0%, hsl(40 100% 70%) 4.5%, hsl(80 95% 70%) 9%, hsl(165 95% 70%) 13.5%,
      hsl(200 100% 72%) 18%, hsl(265 95% 76%) 22.5%, hsl(350 95% 72%) 27%);
  background-size: 160px 160px, 320% 320%;
  background-position: calc(var(--mx) * 0.7) calc(var(--my) * 0.7), var(--mx) var(--my);
  background-blend-mode: screen;
  mix-blend-mode: color-dodge;
  filter: brightness(0.62) contrast(1.35) saturate(1.15);
  opacity: calc(0.14 + var(--int) * 0.5);
  transition: opacity 0.45s;
}
.sh-glare {
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.85) 6%, rgba(255, 255, 255, 0.35) 22%, rgba(0, 0, 0, 0.4) 88%);
  mix-blend-mode: overlay;
  opacity: calc(var(--int) * 0.7);
  transition: opacity 0.45s;
}
/* No pointer (phones, or nobody hovering): the light drifts on its own so the
   foil still moves the way a card does in your hand.

   The drift runs on the compositor. It used to animate --mx/--my/--int, which
   repainted the blended foil and glare of every drifting card on every frame;
   now, while a card is idle, oversized copies of the rainbow, the glitter and
   the glare slide underneath the card's clip (transform) and the layers'
   strength breathes (opacity). The three stops are the ones the variables
   took — 18% 24% at 0.5, 82% 38% at 0.78, 52% 84% at 0.58 — converted: a 320%
   background at x% sits at -0.6875x of its own size; the glitter at 0.7x of
   (card - 160px); the glare is a fixed circle whose radius follows what its
   farthest-corner gradient had at each stop (scale). A pointer or the phone's
   tilt drops .sh-idle and the variable-driven layers above take over.
   The delay is a variable, not an inline animation-delay: an inline delay
   would also apply to any other animation the element picks up later (the
   pack's tear) and make it finish before it starts. */
.sh-idle .sh-foil, .sh-idle .sh-glare { background: none; overflow: hidden; }
.sh-idle .sh-foil { animation: sh-drift-foil 9s ease-in-out var(--sh-dd, 0s) infinite; }
.sh-pack-body.sh-idle .sh-foil { animation-name: sh-drift-foil-pack; }
.sh-idle .sh-glare { animation: sh-drift-glare 9s ease-in-out var(--sh-dd, 0s) infinite; }
.sh-idle .sh-foil::before, .sh-idle .sh-foil::after, .sh-idle .sh-glare::before {
  content: ""; position: absolute; left: 0; top: 0; animation: 9s ease-in-out var(--sh-dd, 0s) infinite;
}
.sh-idle .sh-foil::before {
  width: 320%; height: 320%; animation-name: sh-drift-rainbow;
  background: repeating-linear-gradient(112deg,
      hsl(350 95% 72%) 0%, hsl(40 100% 70%) 4.5%, hsl(80 95% 70%) 9%, hsl(165 95% 70%) 13.5%,
      hsl(200 100% 72%) 18%, hsl(265 95% 76%) 22.5%, hsl(350 95% 72%) 27%);
}
.sh-idle .sh-foil::after {
  right: -160px; bottom: -160px; left: -160px; top: -160px; animation-name: sh-drift-glitter;
  background: url("img/sh-glitter.webp") 0 0 / 160px 160px; mix-blend-mode: screen;
}
.sh-idle .sh-glare::before {
  width: 400%; aspect-ratio: 1; animation-name: sh-drift-glare-pos;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.85) 3.8%, rgba(255, 255, 255, 0.35) 14%, rgba(0, 0, 0, 0.4) 55.9%);
}
/* Lit: a pointer, a drag or the phone's tilt holds the light. It used to
   move by repainting the blended layers (background-position and a glare
   gradient at --mx/--my): ~750 ms of main thread a second at 4x CPU while a
   mouse moved over the hand. Now it uses the idle drift's oversized layers,
   placed by landing.js through --lx/--ly (where the light is, 0..1), --li
   (how strongly it catches) and --ls (the glare's size: its old
   farthest-corner radius), so moving the light is a transform and the
   strength an opacity, and nothing repaints. The conversions are the ones
   the drift keyframes were derived with (above). Cards only wear it while
   lit; at rest they're the plain painted layers again. */
.sh-lit .sh-foil, .sh-lit .sh-glare { background: none; overflow: hidden; will-change: opacity; }
.sh-lit .sh-foil { opacity: calc(0.14 + var(--li, 0) * 0.5); }
.sh-lit .sh-glare { opacity: calc(var(--li, 0) * 0.7); }
.sh-pack-body.sh-lit .sh-foil { opacity: calc(0.28 + var(--li, 0) * 0.4); }
.sh-lit .sh-foil::before, .sh-lit .sh-foil::after, .sh-lit .sh-glare::before {
  content: ""; position: absolute; left: 0; top: 0; will-change: transform;
}
.sh-lit .sh-foil::before {
  width: 320%; height: 320%;
  background: repeating-linear-gradient(112deg,
      hsl(350 95% 72%) 0%, hsl(40 100% 70%) 4.5%, hsl(80 95% 70%) 9%, hsl(165 95% 70%) 13.5%,
      hsl(200 100% 72%) 18%, hsl(265 95% 76%) 22.5%, hsl(350 95% 72%) 27%);
  transform: translate(calc(var(--lx, 0.5) * -68.75%), calc(var(--ly, 0.5) * -68.75%));
}
.sh-lit .sh-foil::after {
  right: -160px; bottom: -160px; left: -160px; top: -160px; mix-blend-mode: screen;
  background: url("img/sh-glitter.webp") 0 0 / 160px 160px;
  transform: translate(calc((100% - 480px) * 0.7 * var(--lx, 0.5)), calc((100% - 480px) * 0.7 * var(--ly, 0.5)));
}
.sh-lit .sh-glare::before {
  width: 400%; aspect-ratio: 1;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.85) 3.8%, rgba(255, 255, 255, 0.35) 14%, rgba(0, 0, 0, 0.4) 55.9%);
  transform: translate(calc(var(--lx, 0.5) * 25% - 50%), calc(var(--ly, 0.5) * 34.375% - 50%)) scale(var(--ls, 0.83));
}
@keyframes sh-drift-foil { 0% { opacity: 0.39; transform: translateZ(0); } 33% { opacity: 0.53; } 66% { opacity: 0.43; } 100% { opacity: 0.39; transform: translateZ(0.001px); } }
@keyframes sh-drift-foil-pack { 0% { opacity: 0.48; transform: translateZ(0); } 33% { opacity: 0.592; } 66% { opacity: 0.512; } 100% { opacity: 0.48; transform: translateZ(0.001px); } }
@keyframes sh-drift-glare { 0% { opacity: 0.35; transform: translateZ(0); } 33% { opacity: 0.546; } 66% { opacity: 0.406; } 100% { opacity: 0.35; transform: translateZ(0.001px); } }
@keyframes sh-drift-rainbow {
  0%, 100% { transform: translate(-12.38%, -16.5%); }
  33% { transform: translate(-56.38%, -26.13%); }
  66% { transform: translate(-35.75%, -57.75%); }
}
@keyframes sh-drift-glitter {
  0%, 100% { transform: translate(calc((100% - 480px) * 0.126), calc((100% - 480px) * 0.168)); }
  33% { transform: translate(calc((100% - 480px) * 0.574), calc((100% - 480px) * 0.266)); }
  66% { transform: translate(calc((100% - 480px) * 0.364), calc((100% - 480px) * 0.588)); }
}
@keyframes sh-drift-glare-pos {
  0%, 100% { transform: translate(-45.5%, -41.75%) scale(1.046); }
  33% { transform: translate(-29.5%, -36.94%) scale(0.932); }
  66% { transform: translate(-37%, -21.13%) scale(0.998); }
}

/* card back — ShinyHits' own, not the game's */
.sh-flip { position: relative; transform-style: preserve-3d; }
.sh-back, .sh-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sh-back {
  position: absolute; inset: 0; border-radius: var(--sh-card-r); transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, rgba(175, 230, 255, 0.5) 0 8%, rgba(199, 233, 247, 0.16) 9% 17%, transparent 18%),
    repeating-conic-gradient(from 6deg at 50% 50%, rgba(199, 233, 247, 0.09) 0 5deg, transparent 5deg 15deg),
    radial-gradient(130% 95% at 50% 50%, #404450 0%, #24262d 55%, #15171b 100%);
  box-shadow: inset 0 0 0 5px #1a1b20, inset 0 0 0 7px rgba(196, 224, 255, 0.55),
              inset 0 0 0 12px #1a1b20, 0 24px 44px -20px rgba(0, 0, 0, 0.75);
}
.sh-back::before {
  /* the ShinyHits card mark, as on the logo */
  content: ""; position: absolute; left: 50%; top: 45%; width: 56%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("brand/mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(191, 232, 247, 0.55));
}
.sh-back::after {
  content: "ShinyHits"; position: absolute; left: 0; right: 0; bottom: 13%; text-align: center;
  font-weight: 900; letter-spacing: -0.03em; font-size: clamp(0.7rem, 1.3vw, 1.05rem);
  background: linear-gradient(90deg, #f2f6fc 30%, #bfe8f7 58%, #cec6f6 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the shiny burst: stars thrown out in a ring, as when a shiny appears */
.sh-burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 30; }
.sh-burst::before {
  content: ""; position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%;
  border: 2px solid rgba(220, 244, 255, 0.9); opacity: 0; transform: scale(0.2);
}
.sh-burst i {
  position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; opacity: 0;
  background: linear-gradient(135deg, #fff, #d2f1ff 45%, #fff3c4);
  -webkit-mask: var(--sh-spark) center / contain no-repeat; mask: var(--sh-spark) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
  --r: clamp(120px, 15vw, 210px);
}
.sh-burst i:nth-child(even) { width: 18px; height: 18px; left: -9px; top: -9px; --r: clamp(80px, 10vw, 140px); }
.sh-burst.go::before { animation: sh-ring 0.9s ease-out both; }
.sh-burst.go i { animation: sh-star 1.15s cubic-bezier(0.18, 0.75, 0.25, 1) both; animation-delay: calc(var(--k) * 22ms); }
@keyframes sh-ring { 0% { opacity: 0.95; transform: scale(0.15); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes sh-star {
  0% { opacity: 0; transform: rotate(calc(var(--k) * 25.7deg)) translateY(0) scale(0.2) rotate(0deg); }
  18% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--k) * 25.7deg)) translateY(calc(var(--r) * -1)) scale(1) rotate(-90deg); }
}

/* ================================================================== hero */
.sh-hero { position: relative; padding-block: clamp(2.2rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }
.sh-hero::before {
  /* a display-case spotlight on the cards, nothing more */
  content: ""; position: absolute; inset: -8rem 0 0 36%; pointer-events: none;
  background: radial-gradient(closest-side at 58% 48%, rgba(199, 233, 247, 0.16), rgba(199, 233, 247, 0.05) 55%, transparent 100%);
}
.sh-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }

.sh-live {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--ink-dim);
  background: rgba(93, 227, 176, 0.07); box-shadow: inset 0 0 0 1px rgba(93, 227, 176, 0.22);
}
/* the ping is a disc behind the dot growing and fading (it animated box-shadow) */
.sh-live-dot { position: relative; flex: none; width: 8px; height: 8px; }
.sh-live-dot::before, .sh-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.sh-live-dot::before { background: rgba(93, 227, 176, 0.55); opacity: 0; animation: sh-ping 2.2s ease-out infinite; }
.sh-live-dot::after { background: var(--sh-down); }
@keyframes sh-ping { 0% { transform: none; opacity: 1; } 80%, 100% { transform: scale(3.25); opacity: 0; } }

/* search: the first thing a collector does, so it is the hero's main control */
.sh-search {
  position: relative; display: flex; align-items: center; gap: 0.65rem; max-width: 34rem; height: 3.7rem;
  margin-top: 1.7rem; padding: 0 0.45rem 0 1.1rem; border-radius: 18px;
  background: rgba(23, 24, 28, 0.88);
  box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.24), 0 22px 44px -22px rgba(0, 0, 0, 0.8);
  transition: box-shadow 0.2s;
}
.sh-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--sh-ice), 0 0 0 5px rgba(199, 233, 247, 0.14), 0 22px 44px -22px rgba(0, 0, 0, 0.8); }
.sh-search-ico { width: 20px; height: 20px; flex: none; color: var(--muted); }
.sh-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink);
  font: inherit; font-size: 1.05rem; -webkit-appearance: none; appearance: none;
}
.sh-search input::placeholder { color: var(--faint); }
.sh-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sh-search-go {
  flex: none; height: 2.8rem; padding: 0 1.05rem; border: 0; border-radius: 13px; cursor: pointer;
  font: inherit; font-weight: 800; color: #101115; background: var(--sh-ice);
}
.sh-suggest {
  position: absolute; z-index: 60; top: calc(100% + 0.5rem); left: 0; right: 0;
  max-height: min(26rem, 60vh); overflow: auto; padding: 0.4rem; border-radius: 16px;
  background: #1c1d22; box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.2), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
}
.sh-sg {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  padding: 0.45rem 0.6rem; border-radius: 11px; color: var(--ink);
}
.sh-sg img { width: 36px; height: 50px; border-radius: 3px; object-fit: cover; background: #22242b; }
.sh-sg b { display: block; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-sg small { display: block; color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-sg-p { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
/* the three markets, stacked: the one the page quotes in ink, the others dim */
.sh-sg-m { display: grid; justify-items: end; gap: 0.05rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.25; }
.sh-sg-m span { display: flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; }
.sh-sg-m small { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; color: var(--faint); }
.sh-sg-m .on { color: var(--ink); font-weight: 900; font-size: 0.9rem; }
.sh-sg-m .on small { color: var(--sh-ice); }
.sh-sg-m .none { color: var(--faint); }
.sh-sg-lang { font-style: normal; font-size: 0.6rem; font-weight: 800; margin-left: 0.3rem; padding: 0.05rem 0.35rem; border-radius: 999px; color: var(--sh-ice); box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.4); vertical-align: 1px; }
.sh-sg-p small { font-weight: 600; font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; }
.sh-sg:hover, .sh-sg.on { background: rgba(199, 233, 247, 0.1); }
.sh-sg-empty { padding: 0.9rem; color: var(--muted); font-size: 0.9rem; }
.sh-try { margin: 0.85rem 0 0; color: var(--muted); font-size: 0.86rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.sh-try a {
  color: var(--ink-dim); padding: 0.22rem 0.62rem; border-radius: 999px; font-weight: 600;
  background: rgba(211, 238, 248, 0.06); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.14);
}
.sh-try a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.4); }

/* ------------------------------------------------------------ card wall
   Five columns of chase cards on a tilted wall, each scrolling its own loop
   (every column holds its cards twice, so -50% is a seamless turn), up and
   down in turn at their own speeds; transform only, on the compositor. The
   wall fades out on all four sides (one mask across, one nested inside
   it down), so it never stops in a hard line.
   landing.js lights one card at a time (.on) and fills the strip. */
.sh-wall { position: relative; height: clamp(440px, 40vw, 560px); }
.sh-wall-view { position: absolute; inset: -6% -10%; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(to right, transparent, #000 26%, #000 82%, transparent); mask: linear-gradient(to right, transparent, #000 26%, #000 82%, transparent); }
.sh-wall-fade { height: 100%; -webkit-mask: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); }
.sh-wall-tilt { display: flex; justify-content: center; gap: 12px; height: 100%; transform: perspective(1200px) rotateX(18deg) rotateZ(-11deg) scale(1.12); }
.sh-wcol { flex: none; width: clamp(88px, 8.6vw, 128px); animation: sh-wall-up 40s linear infinite; }
.sh-wcol:nth-child(2) { animation-name: sh-wall-down; animation-duration: 46s; }
.sh-wcol:nth-child(3) { animation-duration: 34s; }
.sh-wcol:nth-child(4) { animation-name: sh-wall-down; animation-duration: 50s; }
.sh-wcol:nth-child(5) { animation-duration: 42s; }
.sh-wcol.hot { position: relative; z-index: 2; }
@keyframes sh-wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes sh-wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.sh-wt { margin-bottom: 12px; aspect-ratio: 245 / 337; border-radius: 4.6% / 3.4%; overflow: hidden; background: #16171b;
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 0.35s; }
.sh-wt img { width: 100%; height: 100%; object-fit: cover; }
/* the lit card: a white rim and a glow, tilting a little under the light */
.sh-wt.on { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 30px -4px rgba(242, 204, 255, 0.9), 0 20px 30px -14px rgba(0, 0, 0, 0.9);
  transform: perspective(700px) scale(1.07); animation: sh-wt-tilt 3.9s ease-in-out infinite; }
@keyframes sh-wt-tilt {
  0%, 100% { transform: perspective(700px) rotateX(9deg) rotateY(-16deg) scale(1.07); }
  30% { transform: perspective(700px) rotateX(-4deg) rotateY(-2deg) scale(1.07); }
  55% { transform: perspective(700px) rotateX(-11deg) rotateY(15deg) scale(1.07); }
  80% { transform: perspective(700px) rotateX(3deg) rotateY(8deg) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .sh-wt.on { animation: none; } }
/* the strip: the lit card's name and its three prices, the NL price on the foil sticker */
.sh-strip { position: absolute; left: 50%; bottom: 3%; z-index: 3; display: grid; justify-items: center; gap: 7px; width: max-content; max-width: 100%;
  padding: 10px 14px 12px; border-radius: 18px; background: rgba(22, 23, 27, 0.95);
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.95); transform: translateX(-50%); transition: opacity 0.2s; }
.sh-strip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0.5;
  background: var(--sh-rainbow); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sh-strip.swap { opacity: 0; }
.sh-strip-nm { margin: 0; text-align: center; line-height: 1.2; }
.sh-strip-nm b { display: block; font-size: 0.9rem; font-weight: 900; }
.sh-strip-nm small { font-size: 0.7rem; color: var(--muted); }
.sh-strip-p { margin: 0; display: flex; gap: 6px; }
.sh-strip-p span { display: grid; gap: 1px; padding: 0.3rem 0.6rem 0.36rem; border-radius: 10px; text-align: center; background: #20232a;
  box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.16); }
.sh-strip-p small { font-size: 0.52rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sh-strip-p b { font-size: 0.95rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em; }
.sh-strip-p .nl { color: #101115; background: var(--sh-sticker); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.7); transform: rotate(-3deg) scale(1.06); }
.sh-strip-p .nl small { color: #48516a; }
@media (max-width: 640px) {
  .sh-wall { height: 400px; }
  .sh-wall-view { inset: -4% -6%; }
  .sh-wcol { width: 27vw; }
  .sh-wcol:nth-child(n+4) { display: none; }
  /* three columns instead of five: they run faster, so as many new cards pass */
  .sh-wcol:nth-child(1) { animation-duration: 24s; }
  .sh-wcol:nth-child(2) { animation-duration: 28s; }
  .sh-wcol:nth-child(3) { animation-duration: 21s; }
  .sh-strip-p b { font-size: 0.82rem; }
  .sh-strip-p span { padding: 0.28rem 0.45rem 0.32rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-wcol { animation: none; }
  .sh-wt.on { transform: none; }
  .sh-strip { transition: none; }
}

.sh-tilt { transform: perspective(1100px) rotateX(var(--ry)) rotateY(var(--rx)); transform-style: preserve-3d; transition: transform 0.6s var(--ease); }
.sh-tilt.live { transition: transform 0.08s linear; }
/* iridescent pills drift by sliding a 200%-wide copy of their foil (x only) */
@keyframes sh-foilslide { 0%, 100% { transform: none; } 50% { transform: translateX(-50%); } }
.sh-twinkle {
  position: absolute; z-index: 8; width: var(--s); height: var(--s); pointer-events: none;
  background: linear-gradient(135deg, #fff, #cdeeff 50%, #fff3c4);
  -webkit-mask: var(--sh-spark) center / contain no-repeat; mask: var(--sh-spark) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(200, 238, 255, 0.9));
  animation: sh-twinkle 3.6s ease-in-out infinite;
}
@keyframes sh-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.45) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(45deg); }
  70% { opacity: 0.4; transform: scale(0.75) rotate(70deg); }
}

/* ================================================================ ticker */
.sh-ticker {
  position: relative; display: flex; align-items: stretch; overflow: hidden;
  width: min(78rem, 100% - 2.5rem); margin: 0.6rem auto 0; border-radius: 18px;
  background: linear-gradient(90deg, rgba(28, 30, 35, 0.9), rgba(22, 24, 28, 0.8));
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -30px rgba(0, 0, 0, 0.9);
}
.sh-ticker-head {
  flex: none; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; margin: 0;
  padding: 0.7rem clamp(1rem, 2.4vw, 1.6rem); border-right: 1px solid var(--line);
  font-size: 0.72rem; color: var(--muted); line-height: 1.3;
}
.sh-ticker-head b { color: var(--ink); font-size: 0.95rem; letter-spacing: -0.01em; }
.sh-ticker-view { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sh-ticker-track { display: flex; width: max-content; animation: sh-marquee 70s linear infinite; }
.sh-ticker:hover .sh-ticker-track, .sh-ticker:focus-within .sh-ticker-track { animation-play-state: paused; }
.sh-ticker-list { display: flex; margin: 0; padding: 0; list-style: none; }
@keyframes sh-marquee { to { transform: translateX(-50%); } }
.sh-tick {
  display: flex; align-items: center; gap: 0.7rem; height: 100%; padding: 0.65rem 1.35rem;
  border-right: 1px solid var(--line); color: var(--ink); white-space: nowrap;
}
.sh-tick:hover { background: rgba(199, 233, 247, 0.06); }
.sh-tick img { width: 27px; height: 37px; border-radius: 3px; object-fit: cover; background: #22242b; }
.sh-tick-name { display: grid; font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
.sh-tick-name small { font-weight: 500; font-size: 0.72rem; color: var(--muted); }
.sh-tick-price { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.sh-tick-d { font-weight: 800; font-size: 0.8rem; font-variant-numeric: tabular-nums; padding: 0.15rem 0.45rem; border-radius: 6px; }
.sh-tick-d.up { color: var(--sh-down); background: rgba(93, 227, 176, 0.1); }
.sh-tick-d.down { color: #ff8b8b; background: rgba(255, 139, 139, 0.1); }

/* ============================================================== sections */
.sh-sec { position: relative; padding-block: clamp(3.8rem, 7.5vw, 6.2rem); }
.sh-head { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }

/* ------------------------------------------------------------ rip a pack */
.sh-rip {
  /* no band of its own: a hard-edged background read as a stripe at both edges */
  background: radial-gradient(60rem 30rem at 50% 12%, rgba(199, 233, 247, 0.07), transparent 70%);
}
.sh-rip::after {
  /* a playmat: faint card zones on the table the pack is opened over */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(circle at 1px 1px, rgba(211, 238, 248, 0.12) 1px, transparent 1.5px) 0 0 / 26px 26px;
  -webkit-mask: radial-gradient(70% 60% at 50% 55%, #000, transparent); mask: radial-gradient(70% 60% at 50% 55%, #000, transparent);
}
.sh-rip-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; max-width: 64rem; margin-inline: auto; }
.sh-rip-stage { position: relative; min-height: 34rem; display: grid; place-items: center; }
.sh-pack-wrap { display: grid; justify-items: center; gap: 1.2rem; }
.sh-rip-hint { margin: 0; color: var(--muted); font-size: 0.86rem; }
.sh-rip-hint svg { width: 14px; height: 14px; color: var(--sh-ice); vertical-align: -2px; }

.sh-pack {
  --pw: clamp(210px, 21vw, 280px);
  position: relative; display: block; width: var(--pw); aspect-ratio: 0.58; padding: 0; border: 0;
  background: none; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 34px 38px rgba(0, 0, 0, 0.6));
  animation: sh-hover 4.5s ease-in-out infinite;
}
.sh-pack:focus-visible { outline: 2px solid var(--sh-ice); outline-offset: 8px; border-radius: 6px; }
@keyframes sh-hover { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.sh-pack-top, .sh-pack-body, .sh-pack-bottom { position: absolute; left: 0; right: 0; display: block; }
.sh-pack-top { top: 0; height: 11%; z-index: 3; }
.sh-pack-body { top: 11%; bottom: 6%; overflow: hidden; isolation: isolate; background: #17181c; }
.sh-pack-bottom { bottom: 0; height: 6.2%; }
.sh-crimp {
  position: absolute; left: 0; right: 0; display: block;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0 1.5px, rgba(81, 91, 113, 0.45) 1.5px 3.5px),
    linear-gradient(180deg, #f5f9ff, #bbc1ce 55%, #7f89a2);
}
.sh-pack-top .sh-crimp {
  top: 0; height: 62%;
  -webkit-mask: conic-gradient(from 135deg at top, #000 90deg, #0000 0) 0 0 / 9px 5px repeat-x, linear-gradient(#000 0 0) 0 5px / 100% 100% no-repeat;
          mask: conic-gradient(from 135deg at top, #000 90deg, #0000 0) 0 0 / 9px 5px repeat-x, linear-gradient(#000 0 0) 0 5px / 100% 100% no-repeat;
}
.sh-pack-top::after {
  /* the strip between the crimp and the tear line */
  content: ""; position: absolute; left: 0; right: 0; top: 62%; bottom: 0;
  background: linear-gradient(90deg, #2f323b, #484d5a 50%, #2f323b);
}
.sh-pack-bottom .sh-crimp {
  top: 0; bottom: 0;
  -webkit-mask: conic-gradient(from -45deg at bottom, #000 90deg, #0000 0) 0 100% / 9px 5px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 5px) no-repeat;
          mask: conic-gradient(from -45deg at bottom, #000 90deg, #0000 0) 0 100% / 9px 5px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 5px) no-repeat;
}
.sh-tearline {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 2px; display: block;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 6px, transparent 6px 11px);
}
.sh-tearline::before {
  /* notch where a thumb starts the tear */
  content: ""; position: absolute; left: -1px; top: -6px; border: 7px solid transparent; border-left-color: #121316;
}
.sh-tearline::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 4px; width: var(--rip, 0%);
  background: linear-gradient(90deg, #fff, var(--sh-ice)); box-shadow: 0 0 12px rgba(199, 233, 247, 0.9);
  border-radius: 2px;
}
.sh-pack-art {
  position: absolute; inset: 0; display: block;
  background-size: 270% auto; background-position: 50% 36%; background-repeat: no-repeat;
  filter: saturate(1.15) contrast(1.05);
}
.sh-pack-body .sh-foil { opacity: calc(0.28 + var(--int) * 0.4); }
.sh-pack-shade {
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.45)),
    linear-gradient(180deg, rgba(9, 10, 12, 0.35) 0%, transparent 16%, transparent 38%, rgba(9, 10, 12, 0.9) 64%, #090a0c 82%);
}
.sh-pack-logo { position: absolute; left: 8%; right: 8%; bottom: 13%; width: 84%; height: 22%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8)); }
.sh-pack-meta {
  position: absolute; left: 0; right: 0; bottom: 5%; text-align: center; display: block;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(220, 238, 255, 0.72);
}
.sh-pack.torn { animation: none; cursor: default; }
.sh-pack.torn .sh-pack-top { animation: sh-tearoff 0.75s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; }
.sh-pack.torn .sh-pack-body, .sh-pack.torn .sh-pack-bottom { animation: sh-packout 0.55s 0.45s ease-in forwards; }
@keyframes sh-tearoff { to { transform: translate(24%, -190%) rotate(16deg); opacity: 0; } }
@keyframes sh-packout { to { transform: translateY(45%); opacity: 0; } }

.sh-pc { position: relative; perspective: 900px; }
.sh-pc .sh-flip { opacity: 0; transform: translateY(-40px) rotateY(180deg); transition: transform 0.65s var(--ease), opacity 0.3s; }
.sh-pc.dealt .sh-flip { opacity: 1; transform: rotateY(180deg); }
.sh-pc.up .sh-flip { transform: rotateY(0deg); }
.sh-pc .sh-face { box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.85); }
.sh-pc.rev .sh-foil { opacity: calc(0.4 + var(--int) * 0.45); }
.sh-pc-price {
  display: block; margin-top: 0.5rem; text-align: center; font-weight: 800; font-size: 0.86rem;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.3s 0.35s; line-height: 1.25;
}
.sh-pc-price small { display: block; font-size: 0.64rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }
.sh-pc.up .sh-pc-price { opacity: 1; }
.sh-pc.hit { cursor: pointer; }
/* the hit glows while it waits for its tap: two overlays fading in and out
   (the ring and the halo), not an animated box-shadow */
.sh-pc.hit::before, .sh-pc.hit::after {
  content: ""; position: absolute; pointer-events: none; border-radius: var(--sh-card-r); opacity: 0;
}
.sh-pc.hit::before { inset: 0; box-shadow: 0 0 50px 4px rgba(199, 233, 247, 0.7); }
.sh-pc.hit::after { inset: 5px; border: 2px solid rgba(236, 248, 255, 0.95); }
.sh-pc.hit.armed:not(.up)::before, .sh-pc.hit.armed:not(.up)::after { animation: sh-glow 1.5s ease-in-out infinite; }
.sh-pc.hit.up .sh-face { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 48px -6px rgba(199, 233, 247, 0.7), 0 30px 50px -20px rgba(0, 0, 0, 0.9); }
.sh-pc.hit .sh-pc-price { font-size: 1.25rem; }
.sh-pc-cue {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none;
  padding: 0.4rem 0.8rem; border-radius: 999px; background: rgba(16, 17, 21, 0.8); color: #fff; white-space: nowrap;
  font-size: 0.78rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(199, 233, 247, 0.5);
}
.sh-pc.up .sh-pc-cue { display: none; }
@keyframes sh-glow { 0% { opacity: 0; transform: translateZ(0); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateZ(0.001px); } }

.sh-rip-sum { max-width: 26rem; text-align: center; }
.sh-rip-sum .sh-rip-actions { justify-content: center; }
.sh-rip-total { margin: 0; display: grid; gap: 0.2rem; }
.sh-rip-total span { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; }
.sh-rip-total b { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sh-rip-note { margin: 0.35rem 0 0; color: var(--ink-dim); font-size: 0.95rem; }
.sh-rip-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }

.sh-chase {
  border-radius: 22px; padding: clamp(1.1rem, 2vw, 1.5rem);
  background: linear-gradient(180deg, rgba(40, 43, 50, 0.6), rgba(23, 25, 29, 0.45));
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, 0.8);
}
.sh-chase h3 { margin: 0; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.02em; }
.sh-chase-sub { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.84rem; }
.sh-chase-list { list-style: none; margin: 1rem 0 0.8rem; padding: 0; display: grid; gap: 0.3rem; }
.sh-chase-list a {
  display: grid; grid-template-columns: 1.2rem 42px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem;
  padding: 0.45rem 0.55rem; border-radius: 12px; color: var(--ink); transition: background 0.2s, box-shadow 0.3s;
}
.sh-chase-list a:hover { background: rgba(199, 233, 247, 0.07); }
.sh-chase-list a.pulled { background: rgba(199, 233, 247, 0.12); box-shadow: inset 0 0 0 1px rgba(199, 233, 247, 0.55); }
.sh-chase-rank { color: var(--faint); font-weight: 800; font-size: 0.8rem; text-align: center; }
.sh-chase-list img { width: 42px; height: 58px; border-radius: 3px; object-fit: cover; background: #22242b; }
.sh-chase-name b { display: block; font-size: 0.93rem; line-height: 1.2; }
.sh-chase-name small { display: block; color: var(--muted); font-size: 0.74rem; margin-top: 0.1rem; }
.sh-chase-p { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.98rem; }
.sh-chase-p small { display: block; font-size: 0.6rem; font-weight: 700; color: var(--muted); letter-spacing: 0.07em; text-transform: uppercase; }
.sh-fine { margin: 0; color: var(--faint); font-size: 0.78rem; }

/* ---------------------------------------------------------------- binder */
.sh-bind { background: linear-gradient(180deg, var(--sh-bg), var(--sh-bg-2) 50%, var(--sh-bg)); }
.sh-bind-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.sh-binder {
  position: relative; max-width: 34rem; justify-self: center; width: 100%;
  padding: clamp(0.9rem, 1.8vw, 1.3rem) clamp(0.9rem, 1.8vw, 1.3rem) clamp(0.9rem, 1.8vw, 1.3rem) clamp(2.5rem, 4.4vw, 3.4rem);
  border-radius: 14px 22px 22px 14px;
  background: linear-gradient(150deg, #262930, #181a1e 60%, #141518);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 16px 0 22px -14px rgba(0, 0, 0, 0.7), 0 44px 80px -34px rgba(0, 0, 0, 0.9);
  transform: rotate(-1.5deg);
}
.sh-rings { position: absolute; left: clamp(0.65rem, 1.3vw, 0.95rem); top: 0; bottom: 3.4rem; display: flex; flex-direction: column; justify-content: space-around; }
.sh-rings i {
  display: block; width: clamp(15px, 1.7vw, 21px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #caced8 28%, #66728d 68%, #363a44);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}
.sh-pockets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.45rem, 1vw, 0.7rem); }
.sh-pocket {
  position: relative; display: block; padding: 5.5% 5.5% 6%; border-radius: 5px;
  background: rgba(211, 238, 248, 0.05); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.13);
}
.sh-pocket::before { content: ""; position: absolute; z-index: 3; left: 7%; right: 7%; top: 3.3%; height: 1px; background: rgba(255, 255, 255, 0.2); }
.sh-pocket::after {
  content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(122deg, transparent 18%, rgba(255, 255, 255, 0.15) 30%, transparent 42%, transparent 62%, rgba(255, 255, 255, 0.07) 72%, transparent 82%);
}
.sh-pocket-card { display: block; opacity: 0; transform: translateY(-34%) rotate(-5deg); transition: transform 0.75s var(--ease), opacity 0.45s; transition-delay: calc(var(--i) * 90ms); }
.sh-binder.in .sh-pocket-card { opacity: 1; transform: none; }
.sh-pocket:hover .sh-pocket-card { transform: translateY(-3%); transition-delay: 0s; }
.sh-pocket-price {
  position: absolute; z-index: 4; left: 50%; bottom: -0.5rem; transform: translateX(-50%) rotate(-2deg);
  padding: 0.1rem 0.42rem; border-radius: 5px; white-space: nowrap; font-size: 0.7rem; font-weight: 900;
  font-variant-numeric: tabular-nums; color: #15161a; background: var(--sh-sticker); background-size: 220% 220%;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.8); opacity: 0; transition: opacity 0.4s; transition-delay: calc(0.55s + var(--i) * 90ms);
}
.sh-binder.in .sh-pocket-price { opacity: 1; }
.sh-binder-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.35rem 0 0; padding-top: 0.9rem; border-top: 1px dashed rgba(255, 255, 255, 0.13); }
.sh-binder-total span { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; }
.sh-binder-total b { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sh-feats { margin: 1.8rem 0 0; display: grid; gap: 0; }
.sh-feats > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--line); }
.sh-feats > div:last-child { border-bottom: 1px solid var(--line); }
.sh-feats dt { font-weight: 800; }
.sh-feats dd { margin: 0; color: var(--ink-dim); line-height: 1.55; }
.sh-feats-ico > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
.sh-feats-ico dt { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; }
.sh-feats-ico dt svg { width: 20px; height: 20px; color: var(--sh-ice); flex: none; }
.sh-feats-ico dd { padding-left: 1.85rem; }

/* ------------------------------------------------------------- checklist */
.sh-check-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: 2rem; align-items: end; margin-bottom: 1.9rem; }
.sh-check .sh-head { margin-bottom: 0; }
.sh-meter { border-radius: 20px; padding: 1.15rem 1.35rem 1.3rem; background: linear-gradient(180deg, rgba(40, 43, 50, 0.6), rgba(23, 25, 29, 0.4)); box-shadow: inset 0 0 0 1px var(--line); }
.sh-meter p { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sh-meter-owned { justify-content: flex-start !important; gap: 0.15rem !important; }
.sh-meter-owned b { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sh-meter-owned span { color: var(--muted); font-weight: 700; }
.sh-meter-cost { margin-top: 0.35rem !important; }
.sh-meter-cost span { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; }
.sh-meter-cost b { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sh-meter-bar { display: block; height: 8px; margin-top: 0.9rem; border-radius: 999px; overflow: hidden; background: #26282f; }
.sh-meter-bar i { position: relative; overflow: hidden; display: block; height: 100%; width: 0; border-radius: inherit; background: var(--sh-irid); background-size: 200% 100%; transition: width 0.6s var(--ease); }
.sh-meter-bar i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 200%; background: var(--sh-irid); animation: sh-foilslide 5s ease-in-out infinite; }
.sh-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(58px, 6.4vw, 78px), 1fr)); gap: clamp(0.35rem, 0.8vw, 0.55rem); }
.sh-ck {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 5px; overflow: hidden;
  background: #17191d; cursor: pointer; aspect-ratio: 245 / 337; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.18); transition: transform 0.25s var(--ease);
}
.sh-ck img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.42); opacity: 0.6; transition: filter 0.45s, opacity 0.45s; }
/* An owned card glitters and catches a sheen. Glitter and sheen are two
   layers sliding on the compositor (they were one background-position
   animation, repainted every frame for every owned card). */
.sh-ck::before, .sh-ck::after {
  content: ""; position: absolute; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge;
  transition: opacity 0.4s;
}
.sh-ck::before { left: -90px; top: -90px; right: 0; bottom: 0; background: url("img/sh-glitter.webp") 0 0 / 90px 90px; }
.sh-ck::after { left: 0; top: 0; bottom: 0; width: 300%; background: linear-gradient(115deg, transparent 30%, rgba(170, 225, 255, 0.55) 50%, transparent 70%); transform: translateX(-66.67%); }
.sh-ck.own img { filter: none; opacity: 1; }
.sh-ck.own::before, .sh-ck.own::after { opacity: 0.55; }
.sh-ck.own::before { animation: sh-ckglitter 5s linear infinite; }
.sh-ck.own::after { animation: sh-cksheen 5s linear infinite; }
.sh-ck:not(.own) { box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.28); outline: 1px dashed rgba(211, 238, 248, 0.25); outline-offset: -4px; }
.sh-ck:hover { transform: translateY(-3px); }
.sh-ck:focus-visible { outline: 2px solid var(--sh-ice); outline-offset: 2px; }
.sh-ck-no { position: absolute; z-index: 2; right: 3px; bottom: 3px; padding: 0 0.28rem; border-radius: 3px; font-size: 0.6rem; font-weight: 800; background: rgba(9, 10, 12, 0.72); color: #dfefff; font-variant-numeric: tabular-nums; }
.sh-ck.pop { animation: sh-pop 0.45s var(--ease); }
@keyframes sh-ckglitter { to { transform: translate(90px, 90px); } }
@keyframes sh-cksheen { from { transform: translateX(-66.67%); } to { transform: translateX(133.33%); } }
@keyframes sh-pop { 40% { transform: scale(1.12); } }

/* --------------------------------------------------------- in your pocket */
.sh-carry { background: linear-gradient(180deg, var(--sh-bg), var(--sh-bg-2) 50%, var(--sh-bg)); }
.sh-carry-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.sh-phone {
  position: relative; width: clamp(236px, 22vw, 290px); aspect-ratio: 9 / 19; padding: 9px; border-radius: 46px;
  background: linear-gradient(150deg, #454a57, #1a1b20 42%, #32353f);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 60px 90px -40px rgba(0, 0, 0, 0.95);
  transform: rotate(-3deg);
}
.sh-phone-screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: #060607; }
.sh-phone-island { position: absolute; z-index: 6; top: 10px; left: 50%; width: 31%; height: 22px; transform: translateX(-50%); border-radius: 20px; background: #000; }
/* Scan & add, as the app draws it: camera on a neutral dark feed with the
   ice frame and the scan line, the status line, the matches, a toast. */
.sh-phone-scan { transform: rotate(-3deg); }
.sh-cam {
  position: relative; flex: none; margin: 8px 10px 0; aspect-ratio: 1 / 1.02; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(40% 30% at 22% 18%, rgba(191, 232, 247, 0.1), transparent 70%),
    radial-gradient(35% 28% at 82% 84%, rgba(206, 198, 246, 0.1), transparent 70%),
    radial-gradient(90% 80% at 50% 45%, #2a2c33, #16171b 70%, #0f1013);
}
.sh-cam::after { content: ""; position: absolute; inset: 7%; border: 2px solid rgba(191, 232, 247, 0.7); border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.25); pointer-events: none; }
.sh-cam-card { position: relative; width: 56%; height: auto; transform: translateY(-5%) rotate(-4deg); border-radius: 4%; box-shadow: 0 18px 26px -12px rgba(0, 0, 0, 0.95); }
.sh-cam-frame { position: absolute; left: 16%; right: 16%; top: 7%; height: 72%; z-index: 2; animation: sh-frame 2.6s ease-in-out infinite; }
.sh-cam-frame i { position: absolute; width: 22%; height: 14%; border: 3px solid #fff; border-radius: 3px; filter: drop-shadow(0 0 6px rgba(191, 232, 247, 0.9)); }
.sh-cam-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.sh-cam-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.sh-cam-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.sh-cam-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
@keyframes sh-frame { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.97); } }
/* The line's box spans its whole travel (10% to 76% of the camera) and the
   line is drawn at the box's top, so moving the box down by its own height
   is a transform — it animated "top", a layout property, every frame. */
.sh-cam-line { position: absolute; z-index: 2; left: 18%; right: 18%; top: 10%; height: 66%; pointer-events: none; animation: sh-scan 2.6s ease-in-out infinite; }
.sh-cam-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--sh-ice), transparent); box-shadow: 0 0 14px 2px rgba(191, 232, 247, 0.7); }
@keyframes sh-scan { 0%, 100% { transform: none; } 50% { transform: translateY(100%); } }
.sh-cam-shot {
  position: absolute; z-index: 3; bottom: 6%; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; color: #101115; background: var(--sh-irid); background-size: 200% 100%;
}
.sh-cam-shot svg { width: 11px; height: 11px; }
.sh-scan-status { margin: 8px 12px 4px; font-size: 8.5px; line-height: 1.35; color: var(--muted); }
.sh-scan-status b { color: var(--ink); }
.sh-scan-hits { display: grid; gap: 4px; padding: 0 10px; }
.sh-scan-hit { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.sh-scan-hit img { width: 22px; height: auto; border-radius: 2px; }
.sh-scan-name { display: grid; min-width: 0; }
.sh-scan-name b, .sh-scan-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-scan-name b { font-size: 9px; }
.sh-scan-name small { font-size: 7.5px; color: var(--muted); }
.sh-scan-p { font-size: 8.5px; font-weight: 800; color: var(--ice-soft); font-variant-numeric: tabular-nums; }
.sh-scan-btn { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 999px; font-size: 8px; font-weight: 800; color: #101115; background: var(--sh-ice); }
.sh-scan-btn.done { color: var(--pos); background: rgba(86, 192, 138, 0.14); }
.sh-scan-btn svg { width: 9px; height: 9px; }
.sh-scan-toast {
  display: flex; align-items: center; gap: 5px; margin: 7px 10px 0; padding: 6px 9px; border-radius: 10px; font-size: 8px; font-weight: 700;
  background: #24262d; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: sh-toast 5.2s ease-in-out infinite;
}
.sh-scan-toast svg { width: 10px; height: 10px; color: var(--pos); }
@keyframes sh-toast { 0%, 45% { opacity: 0; transform: translateY(6px); } 55%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sh-phone-scan .sh-tabs { margin-top: auto; }

/* ------------------------------------------------------------------- faq */
.sh-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sh-faq-list details { border-top: 1px solid var(--line); }
.sh-faq-list details:last-child { border-bottom: 1px solid var(--line); }
.sh-faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0;
  cursor: pointer; list-style: none; font-weight: 800; font-size: clamp(1rem, 1.35vw, 1.13rem); letter-spacing: -0.01em;
}
.sh-faq-list summary::-webkit-details-marker { display: none; }
.sh-faq-list summary::after {
  content: ""; flex: none; width: 15px; height: 15px; background: var(--muted);
  -webkit-mask: var(--sh-spark) center / contain no-repeat; mask: var(--sh-spark) center / contain no-repeat;
  transition: transform 0.35s var(--ease), background 0.35s;
}
.sh-faq-list details[open] summary::after { transform: rotate(45deg) scale(1.2); background: var(--sh-ice); }
.sh-faq-list summary:hover { color: #fff; }
.sh-faq-list p { margin: 0 0 1.25rem; color: var(--ink-dim); line-height: 1.65; max-width: 44rem; }

/* ------------------------------------------------ 009/008: secret rare */
.sh-final { position: relative; padding-block: clamp(4.5rem, 10vw, 8rem); background: radial-gradient(50rem 26rem at 28% 50%, rgba(199, 233, 247, 0.1), transparent 70%); }
.sh-final-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.sh-final-card { position: relative; width: clamp(200px, 21vw, 290px); cursor: pointer; }
.sh-final-card .sh-flip { transform: rotateY(180deg); transition: transform 1.1s var(--ease); }
.sh-final-card.in .sh-flip { transform: rotateY(0deg); }
.sh-final-card .sh-face { box-shadow: 0 40px 70px -28px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(199, 233, 247, 0.5); }
.sh-final-card .sh-burst { left: 50%; top: 50%; }

/* ============================================================ responsive */
/* ======================================================== every screen ===
   iPhone · browser · Android on one stage. Real chrome on each (status bars,
   island vs punch-hole, tab bars, gesture bar, traffic lights) because a
   screen without it reads as a cropped web page. */
.sh-devices { background: radial-gradient(60rem 26rem at 50% 62%, rgba(191, 232, 247, 0.07), transparent 70%); }
.sh-stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end;
  gap: clamp(1rem, 2.4vw, 2.2rem); max-width: 70rem; margin: 0 auto;
}
.sh-dev { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.sh-dev figcaption { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--ink); }
.sh-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.sh-chip-live { color: #101115; background: var(--sh-irid); background-size: 200% 100%; box-shadow: none; overflow: hidden; isolation: isolate; }
.sh-chip-live::before, .sh-platforms .live small::before, .sh-wish-badge::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 200%;
  background: var(--sh-irid); animation: sh-foilslide 6s ease-in-out infinite;
}
.sh-chip-live i { width: 6px; height: 6px; border-radius: 50%; background: #101115; }

.sh-dev .sh-phone { width: clamp(200px, 17vw, 238px); transform: none; }
.sh-dev-ios .sh-phone { transform: rotate(-4deg) translateY(-0.6rem); }
.sh-dev-android .sh-phone { transform: rotate(4deg) translateY(-0.6rem); border-radius: 34px; padding: 7px; }
.sh-phone-android .sh-phone-screen { border-radius: 28px; }
.sh-app { display: flex; flex-direction: column; background: #0d0e11; color: var(--ink); font-size: 10px; line-height: 1.25; }
.sh-app svg { width: 1.6em; height: 1.6em; }
.sh-status { display: flex; justify-content: space-between; align-items: center; padding: 13px 20px 4px 24px; font-size: 10.5px; }
.sh-status-a { padding: 10px 16px 4px; font-size: 9.5px; }
.sh-status-r { display: flex; gap: 4px; align-items: center; }
.sh-status-r i { display: block; background: var(--ink); opacity: 0.9; }
.sh-sig { width: 13px; height: 8px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.sh-wifi { width: 11px; height: 8px; border-radius: 11px 11px 0 0; clip-path: polygon(50% 100%, 0 20%, 100% 20%); }
.sh-batt { width: 18px; height: 8.5px; border-radius: 2.5px; }
.sh-punch { position: absolute; z-index: 6; top: 9px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #000; box-shadow: 0 0 0 1.5px #1c1d22; }
.sh-home-bar { position: absolute; bottom: 6px; left: 50%; width: 36%; height: 4px; margin-left: -18%; border-radius: 4px; background: rgba(255, 255, 255, 0.55); }

.sh-app-top { display: grid; gap: 2px; padding: 12px 16px 10px; }
.sh-app-top small { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sh-app-top b { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sh-app-sub { color: var(--sh-ice); font-weight: 700; }
.sh-app-list { list-style: none; margin: 0; padding: 0 10px; display: grid; gap: 6px; flex: 1; }
.sh-app-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); }
.sh-app-list img { width: 26px; height: auto; border-radius: 2px; }
.sh-app-list span { display: grid; min-width: 0; }
.sh-app-list b, .sh-app-list small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-app-list small { color: var(--muted); font-size: 8.5px; }
.sh-app-list em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }

.sh-tabs {
  display: flex; justify-content: space-around; align-items: center; padding: 8px 6px 20px; margin-top: 8px;
  background: rgba(22, 23, 27, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.sh-tabs > span { display: grid; justify-items: center; gap: 2px; color: var(--faint); font-size: 8px; }
.sh-tabs > span.on { color: var(--sh-ice); }
.sh-tab-scan { width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #101115 !important; background: var(--sh-irid); background-size: 200% 100%; }
.sh-tabs-m3 > span.on svg { box-sizing: content-box; padding: 3px 12px; border-radius: 999px; background: rgba(191, 232, 247, 0.16); }

.sh-a-card { flex: 1; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 14px 0; text-align: center; }
.sh-a-art { width: 64%; margin-bottom: 6px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.7)); }
.sh-a-name { font-size: 13px; font-weight: 900; letter-spacing: -0.02em; }
.sh-a-set { color: var(--muted); font-size: 8.5px; }
.sh-a-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 6px; }
.sh-a-prices span { display: grid; gap: 1px; padding: 7px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); text-align: left; }
.sh-a-prices small { font-size: 7px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sh-a-prices b { font-size: 10.5px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-a-prices .sh-a-local { background: rgba(191, 232, 247, 0.12); box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.3); }
.sh-a-prices .sh-a-local b { color: var(--sh-ice); }
.sh-a-fab { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 8px 14px; border-radius: 14px; font-weight: 800; color: #101115; background: var(--sh-ice); }

.sh-browser {
  width: 100%; border-radius: 14px; overflow: hidden; background: #0d0e11;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.sh-browser-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #1a1b20; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); }
.sh-dots { display: flex; gap: 6px; }
.sh-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.sh-dots i:nth-child(2) { background: #febc2e; }
.sh-dots i:nth-child(3) { background: #28c840; }
.sh-url { flex: 1; max-width: 22rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; border-radius: 8px; font-size: 11.5px; color: var(--muted); background: rgba(255, 255, 255, 0.06); }
.sh-url svg { width: 11px; height: 11px; }
.sh-browser-body { flex-direction: row; font-size: 11px; aspect-ratio: 16 / 10.4; }
.sh-web-side { display: grid; align-content: start; gap: 3px; width: 23%; padding: 14px 10px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); }
.sh-web-side > span { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px; color: var(--muted); white-space: nowrap; }
.sh-web-side > span.on { color: var(--ink); background: rgba(191, 232, 247, 0.1); }
.sh-web-side > span.on svg { color: var(--sh-ice); }
.sh-web-side .sh-web-brand { gap: 0;  margin-bottom: 8px; color: var(--ink); font-weight: 900; font-size: 12.5px; }
.sh-web-brand img { margin-right: 6px; }
.sh-web-add { display: grid; place-items: center; aspect-ratio: 245 / 337; border-radius: 4px; color: var(--faint); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
.sh-web-brand b { background: linear-gradient(100deg, #bfe8f7, #cec6f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-web-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.sh-web-head { display: flex; justify-content: space-between; align-items: flex-end; }
.sh-web-head > span:first-child { display: grid; }
.sh-web-head small { color: var(--muted); }
.sh-web-head b { font-size: clamp(16px, 2vw, 26px); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sh-web-pill { padding: 4px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--sh-ice); box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.35); }
.sh-web-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-content: start; }
.sh-web-card { display: grid; gap: 4px; }
.sh-web-card img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.9); }
.sh-web-card em { font-style: normal; font-weight: 800; font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* ================================================================ shine ===
   Platforms under the hero CTAs, the logo in each phone's app bar, OS
   glyphs on the device captions, and a sparkle that catches the foil word
   of every heading. */
.sh-platforms { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin: 1.3rem 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--muted); }
.sh-platforms li { display: inline-flex; align-items: center; gap: 0.4rem; }
.sh-platforms .ico { width: 1.05rem; height: 1.05rem; }
.sh-platforms small { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.sh-platforms .live { color: var(--ink); }
.sh-platforms .live small {
  position: relative; display: inline-block; overflow: hidden; isolation: isolate; line-height: 1.3;
  color: #101115; padding: 0.08rem 0.4rem; border-radius: 999px; background: var(--sh-irid); background-size: 200% 100%;
}

.sh-dev figcaption .sh-os { width: 1.15rem; height: 1.15rem; color: var(--ink); }

.sh-appbar { display: flex; align-items: center; gap: 6px; padding: 6px 16px 0; }
.sh-appbar img { width: 18px; height: 18px; }
.sh-appbar b { flex: 1; font-size: 11.5px; font-weight: 900; letter-spacing: -0.02em; }
.sh-appbar b i { font-style: normal; background: linear-gradient(100deg, #bfe8f7, #cec6f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-appbar > svg { width: 14px; height: 14px; color: var(--muted); }
.sh-appbar-a { padding: 4px 12px 0; }
.sh-appbar-a .sh-back-ico { transform: rotate(-90deg); margin-right: 2px; }

.sh-h2 .sh-foiltext { position: relative; }
.sh-h2 .sh-foiltext::after {
  content: ""; position: absolute; right: -0.34em; top: 0.02em; width: 0.3em; height: 0.3em;
  background: #fff; -webkit-mask: var(--sh-spark) center / contain no-repeat; mask: var(--sh-spark) center / contain no-repeat;
  filter: drop-shadow(0 0 0.12em rgba(191, 232, 247, 0.95));
  animation: twinkle 3.4s ease-in-out infinite; pointer-events: none;
}
.sh-sec:nth-of-type(odd) .sh-h2 .sh-foiltext::after { animation-delay: -1.3s; }
@media (prefers-reduced-motion: reduce) { .sh-h2 .sh-foiltext::after { animation: none; } }

/* ============================================================ rainbow ===
   More of the foil: rainbow sparkles scattered
   at each section's edges, a rainbow hairline between sections, rainbow
   rims on the panels, rainbow card numbers and icons. */
:root { --sh-rainbow: linear-gradient(90deg, #ff9fc4, #ffe08a 20%, #8fe9a6 40%, #9fe3f5 60%, #cec6f6 80%, #ff9fc4); }
.sh-tw-rb { background: var(--sh-rainbow); background-size: 200% 100%; filter: drop-shadow(0 0 7px rgba(255, 190, 230, 0.55)); }
.sh-sec > .sh-twinkle { z-index: 0; }
.sh-sec > .sh-wrap { position: relative; z-index: 1; }

/* The rainbow flows by turning its hue rather than by sliding the gradient:
   the gradient spans the whole hue circle, so a full turn reads just like the
   colours travelling along the line, and a filter animation stays on the
   compositor (background-position repainted every frame). */
.sh-sec::before, .sh-final::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(64rem, 86%); height: 1px; transform: translateX(-50%);
  background: var(--sh-rainbow); background-size: 200% 100%; opacity: 0.75; height: 1.5px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  animation: sh-rbhue-centred 9s linear infinite;
}
@keyframes sh-rbhue { from { transform: translateZ(0); } to { filter: hue-rotate(360deg); transform: translateZ(0.001px); } }
@keyframes sh-rbhue-centred { from { transform: translateX(-50%) translateZ(0); } to { filter: hue-rotate(360deg); transform: translateX(-50%) translateZ(0.001px); } }

.sh-chase, .sh-browser, .sh-meter { position: relative; }
.sh-chase::after, .sh-browser::after, .sh-meter::after, .sh-ticker::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--sh-rainbow); background-size: 200% 100%; opacity: 0.65;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sh-rbhue 9s linear infinite;
}
.sh-browser::after { z-index: 3; opacity: 0.4; }

.sh-no i { display: inline-block; background: var(--sh-rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sh-rbhue 9s linear infinite; }
.sh-faq-list summary::after { background: linear-gradient(135deg, #ff9fc4, #ffe08a 30%, #8fe9a6 55%, #9fe3f5 75%, #cec6f6); opacity: 0.85; }
.sh-faq-list details[open] summary::after { background: linear-gradient(135deg, #ff9fc4, #ffe08a 30%, #8fe9a6 55%, #9fe3f5 75%, #cec6f6); opacity: 1; }
.sh-chip { box-shadow: none; position: relative; }
.sh-chip::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--sh-rainbow); opacity: 0.6;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sh-chip-live::after { display: none; }

.sh-btn-spark { width: 0.95em; height: 0.95em; margin-right: 0.1em; animation: twinkle 3s ease-in-out infinite; }

@media (max-width: 640px) {
  .sh-sec > .sh-twinkle:nth-of-type(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-sec::before, .sh-final::before, .sh-chase::after, .sh-browser::after, .sh-meter::after, .sh-ticker::after, .sh-no i, .sh-btn-spark { animation: none; }
}

/* ------------------------------------------------------- scan your pulls */
.sh-rip-stage > * { grid-area: 1 / 1; }
.sh-deal { width: 100%; display: grid; justify-items: center; gap: 1.4rem; padding-bottom: 3.4rem; }
.sh-deal[hidden], .sh-rip-sum[hidden], .sh-rip-hint[hidden] { display: none; }
.sh-deal-row { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.4rem, 1.2vw, 0.85rem); }
.sh-hitspot { position: relative; width: clamp(170px, 16vw, 215px); }
.sh-hitspot .sh-burst { left: 50%; top: 42%; }
.sh-hitspot .sh-pc-cue { opacity: 0; transition: opacity 0.3s; top: auto; bottom: -2.9rem; transform: translateX(-50%); }
.sh-pc.hit { cursor: default; }
/* the five are dealt face up, straight into place: no face-down pass */
.sh-pc.face .sh-flip { transform: translateY(-34px) scale(0.92); transition: transform 0.4s var(--ease), opacity 0.25s; }
.sh-pc.face.dealt .sh-flip { transform: none; }
.sh-pc.face .sh-pc-price { transition: opacity 0.25s 0.15s; }
.sh-pc.face:not(.dealt) .sh-pc-price { opacity: 0; }
/* Fade the hit in on its wrapper, not on .sh-flip: opacity below 1 on a
   preserve-3d element flattens it, and the face shows through the back
   until the fade ends — the "cards flash, then hide" glitch. */
.sh-pc.hit { opacity: 0; transform: translateY(-34px); transition: opacity 0.3s, transform 0.45s var(--ease); }
.sh-pc.hit.dealt { opacity: 1; transform: none; }
.sh-pc.hit .sh-flip { opacity: 1; transform: rotateY(180deg); }
.sh-pc.hit.up .sh-flip { transform: rotateY(0deg); }
.sh-pc.face.scanned .sh-flip { opacity: 0.14; transition: opacity 0.2s; }
.sh-pc.hit.armed { cursor: pointer; }
.sh-pc.hit.armed .sh-pc-cue { opacity: 1; }
/* the spot a card left for the phone keeps a ghost */
.sh-pc .sh-flip, .sh-pc .sh-pc-price { transition: transform 0.65s var(--ease), opacity 0.3s; }
.sh-pc.scanned .sh-flip { opacity: 0.14; }
.sh-pc.scanned .sh-pc-price { opacity: 0.35; }
.sh-pc-done {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%) scale(0.8); opacity: 0; z-index: 3; pointer-events: none;
  padding: 0.22rem 0.5rem; border-radius: 999px; white-space: nowrap; font-size: 0.66rem; font-weight: 800;
  color: var(--pos); background: rgba(86, 192, 138, 0.14); box-shadow: inset 0 0 0 1px rgba(86, 192, 138, 0.4);
  transition: opacity 0.3s 0.25s, transform 0.3s 0.25s;
}
.sh-pc.scanned .sh-pc-done { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sh-pc.hit.scanned .sh-pc-cue, .sh-pc.hit.scanned .sh-pc-done { display: none; }
.sh-pc.hit.scanned { opacity: 0.14; }
.sh-fly { position: absolute; z-index: 40; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.sh-fly img { display: block; width: 100%; height: auto; border-radius: 4.6% / 3.35%; box-shadow: 0 22px 34px -14px rgba(0, 0, 0, 0.9); }
.sh-fly.shiny::after {
  content: ""; position: absolute; inset: 0; border-radius: 4.6% / 3.35%; mix-blend-mode: color-dodge; opacity: 0.45;
  background: repeating-linear-gradient(112deg, hsl(350 95% 72%) 0%, hsl(40 100% 70%) 4.5%, hsl(80 95% 70%) 9%, hsl(165 95% 70%) 13.5%, hsl(200 100% 72%) 18%, hsl(265 95% 76%) 22.5%, hsl(350 95% 72%) 27%);
  background-size: 300% 300%; animation: sh-rbhue 3s linear infinite;
}

.sh-phone-rip { width: clamp(236px, 18vw, 258px); transform: none; }
.sh-phone-rip .sh-cam { aspect-ratio: 1 / 0.84; }
.sh-phone-rip .sh-cam-line { animation-duration: 2.2s; }
.sh-cam.reading .sh-cam-line { animation-duration: 0.5s; }
.sh-cam.reading .sh-cam-frame { animation-duration: 0.5s; }
.sh-cam::after { transition: border-color 0.2s, box-shadow 0.2s; }
.sh-cam.read::after { border-color: var(--pos); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.25), inset 0 0 22px rgba(86, 192, 138, 0.45); }
.sh-spin { display: inline-block; width: 8px; height: 8px; margin-right: 3px; vertical-align: -1px; border: 1.5px solid rgba(255, 255, 255, 0.2); border-top-color: var(--sh-ice); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sh-phone-rip .sh-scan-status { min-height: 2.7em; }
.sh-phone-rip .sh-scan-hits { flex: 1; min-height: 0; overflow: hidden; align-content: start; }
.sh-scan-hit { transition: opacity 0.35s, transform 0.35s var(--ease); }
.sh-scan-hit.sh-scan-new { opacity: 0; transform: translateY(-10px); }
.sh-scan-hit.is-hit { position: relative; background: rgba(191, 232, 247, 0.06); }
.sh-scan-hit.is-hit::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--sh-rainbow);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sh-scan-empty { margin: 6px 0 0; padding: 16px 8px; text-align: center; font-size: 8.5px; color: var(--faint); border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 10px; }
.sh-scan-sum {
  display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6px; padding: 9px 14px 20px;
  background: rgba(22, 23, 27, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.sh-scan-sum small { display: block; font-size: 7.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sh-scan-sum b { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sh-scan-sum em { font-style: normal; font-size: 8.5px; color: var(--muted); }
.sh-rip-fine { margin-top: 1.6rem; text-align: center; }

/* ---- In your pocket: the wishlist */
.sh-phone-wish { transform: rotate(-3deg); }
.sh-phone-wish .sh-tabs { margin-top: auto; }
.sh-wish { display: grid; gap: 5px; padding: 0 10px; }
.sh-wish-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 6px 7px; border-radius: 11px; background: rgba(255, 255, 255, 0.045); }
.sh-wish-row img { grid-row: 1 / 3; width: 24px; height: auto; border-radius: 2px; }
.sh-wish-row .sh-scan-name { grid-column: 2; }
.sh-wish-p { grid-column: 3; grid-row: 1; display: grid; justify-items: end; }
.sh-wish-p b { font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sh-wish-p small { font-size: 7px; color: var(--muted); }
.sh-wish-row em { grid-column: 2 / 4; grid-row: 2; justify-self: start; margin-top: 3px; font-style: normal; font-size: 7px; font-weight: 800; letter-spacing: 0.04em; }
.sh-wish-gap { color: var(--faint); }
.sh-wish-badge { position: relative; overflow: hidden; isolation: isolate; padding: 2px 6px; border-radius: 999px; color: #101115; background: var(--sh-irid); background-size: 200% 100%; }
.sh-wish-row.hit { position: relative; background: rgba(191, 232, 247, 0.07); }
.sh-wish-row.hit::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--sh-rainbow);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sh-wish-alert svg { color: var(--sh-ice) !important; }

/* ---------------------------------------------------------- attract loop
   While the pack waits: a fingertip swipes the tear line and the tear opens
   behind it, light and sparkles leak from the seam, and a callout bounces
   above it. [data-sh-rip].tease switches it on; the
   first hover, touch or focus on the pack switches it off. */
.sh-pack-wrap { position: relative; padding-top: 3.4rem; }
.sh-tease { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: none; }
.tease .sh-tease { display: block; }
.sh-tease-rip {
  position: absolute; left: 0; top: calc(11% - 2px); height: 4px; width: 52%; border-radius: 2px;
  background: linear-gradient(90deg, #fff, var(--sh-ice)); box-shadow: 0 0 14px rgba(191, 232, 247, 0.95);
  transform: scaleX(0); transform-origin: 0 50%;
  animation: sh-tease-rip 3.4s cubic-bezier(.4, 0, .3, 1) infinite;
}
.sh-tease-finger {
  position: absolute; left: 3%; top: 11%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 30%, rgba(191, 232, 247, 0.55) 45%, transparent 70%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 22px 6px rgba(191, 232, 247, 0.6);
  animation: sh-tease-finger 3.4s cubic-bezier(.4, 0, .3, 1) infinite;
}
.sh-tease-leak {
  position: absolute; left: 6%; right: 6%; top: 11%; height: 46px; margin-top: -23px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.85), rgba(191, 232, 247, 0.35) 45%, transparent 72%);
  mix-blend-mode: screen; animation: sh-tease-leak 3.4s ease-in-out infinite;
}
.sh-tease-spark {
  position: absolute; top: 11%; width: 17px; height: 17px; margin: -8px 0 0 -8px; opacity: 0;
  background: var(--sh-rainbow); background-size: 300% 100%;
  -webkit-mask: var(--sh-spark) center / contain no-repeat; mask: var(--sh-spark) center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
  animation: sh-tease-spark 2.2s ease-out infinite;
}
@keyframes sh-tease-finger {
  0% { transform: translateX(0) scale(0.4); opacity: 0; }
  10% { transform: translateX(0) scale(1); opacity: 1; }
  52% { opacity: 1; }
  58% { transform: translateX(var(--sh-reach, 150px)) scale(1); opacity: 0.9; }
  68%, 100% { transform: translateX(var(--sh-reach, 150px)) scale(0.5); opacity: 0; }
}
@keyframes sh-tease-rip {
  0%, 10% { transform: scaleX(0); opacity: 1; }
  58% { transform: none; opacity: 1; }
  74% { transform: none; opacity: 0.9; }
  90%, 100% { transform: none; opacity: 0; }
}
@keyframes sh-tease-leak { 0%, 20% { opacity: 0.15; transform: scaleX(0.5); } 60% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0.15; transform: scaleX(0.6); } }
@keyframes sh-tease-spark {
  0% { opacity: 0; transform: translateY(0) scale(0.3) rotate(0deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-78px) scale(1.25) rotate(90deg); }
}
.sh-callout {
  position: absolute; left: 50%; top: 0; z-index: 6; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: 999px; white-space: nowrap; font-weight: 800; font-size: 0.9rem; color: #101115;
  background: var(--sh-irid); background-size: 200% 100%;
  box-shadow: 0 14px 30px -12px rgba(191, 232, 247, 0.7), inset 0 1px 0 #fff;
  transform: translateX(-50%); animation: sh-callout 1.7s ease-in-out infinite, sh-callout-foil 6s ease-in-out infinite;
  transition: opacity 0.3s;
}
/* The callout's tip hangs outside the pill, so the pill can't clip a sliding
   copy of its foil; the foil shimmers by turning its hue instead. */
@keyframes sh-callout-foil { 0%, 100% { filter: none; } 50% { filter: hue-rotate(-40deg); } }
.sh-callout::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px;
  background: #e8f4fb; transform: rotate(45deg); border-radius: 2px;
}
.sh-callout svg { width: 1em; height: 1em; }
@keyframes sh-callout { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-7px); } }
[data-sh-rip]:not(.tease) .sh-callout { opacity: 0; }
.hovering .sh-tease-finger, .hovering .sh-tease-rip { visibility: hidden; }
.sh-pack-wrap[hidden] .sh-callout { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sh-tease { display: none !important; }
  .sh-callout { animation: none; }
}

@media (max-width: 1080px) {
  .sh-rip-grid { justify-items: center; }
  .sh-phone-rip { width: min(66vw, 290px); }
  .sh-stage { grid-template-columns: 1fr 1fr; justify-items: center; }
  .sh-dev-web { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .sh-hero-grid, .sh-bind-grid, .sh-faq-grid, .sh-check-head { grid-template-columns: minmax(0, 1fr); }
  .sh-hero-copy { text-align: left; }
  .sh-rip-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-chase { max-width: 40rem; width: 100%; margin-inline: auto; }
  .sh-bind-copy { order: -1; }
  .sh-carry-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .sh-carry-copy { justify-self: stretch; }
  .sh-final-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .sh-final-copy .sh-sub { margin-inline: auto; }
  .sh-final-copy .sh-ctas { justify-content: center; }
}
@media (max-width: 640px) {
  .sh-stage { gap: 1.6rem 0.8rem; }
  .sh-dev .sh-phone { width: 41vw; }
  .sh-app { font-size: 8.5px; }
  .sh-app-top b { font-size: 18px; }
  .sh-app-list li:nth-child(n+5) { display: none; }
  .sh-a-prices { grid-template-columns: 1fr; }
  .sh-a-prices span:nth-child(n+2) { display: none; }
  .sh-web-side { display: none; }
  .sh-browser-body { aspect-ratio: auto; }
  .sh-web-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sh-web-card:nth-child(n+5), .sh-web-add { display: none; }
  .sh-dev figcaption { flex-direction: column; gap: 0.3rem; }
  .sh-wrap { width: min(78rem, 100% - 2rem); }
  .sh-hero { padding-top: 1.4rem; }
  .sh-h1 { max-width: 9ch; }
  .sh-search { height: 3.4rem; border-radius: 16px; }
  .sh-search-go { padding: 0 0.8rem; }
  .sh-ticker { flex-direction: column; }
  .sh-ticker-head { flex-direction: row; align-items: baseline; gap: 0.6rem; border-right: 0; border-bottom: 1px solid var(--line); padding-block: 0.55rem; }
  .sh-ticker-head b { white-space: nowrap; }
  .sh-ticker-head > span:last-child { display: none; }
  .sh-rip-stage { min-height: 26rem; }
  .sh-pc-price { font-size: 0.7rem; }
  .sh-pc-price small { display: none; }
  .sh-hitspot { width: 52vw; }
  .sh-rip-sum { text-align: center; }
  .sh-rip-actions { justify-content: center; }
  .sh-feats > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .sh-checklist { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sh-phone { width: 64vw; }
  .sh-btn { height: 3rem; padding: 0 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-pack, .sh-ticker-track, .sh-foiltext::before, .sh-sheen, .sh-sheen::before, .sh-btn-foil::before, .sh-btn-foil::after,
  .sh-cam-line, .sh-cam-frame, .sh-scan-toast, .sh-meter-bar i::before,
  .sh-ck.own::before, .sh-ck.own::after, .sh-live-dot::before, .sh-twinkle, .sh-chip-live::before, .sh-platforms .live small::before,
  .sh-wish-badge::before, .sh-pc.hit::before, .sh-pc.hit::after, .sh-callout { animation: none !important; }
  .sh-sheen { display: none; }
  .sh-scan-toast { opacity: 1; transform: none; }
  .sh-pocket-card, .sh-pocket-price { opacity: 1; transform: none; transition: none; }
  .sh-final-card .sh-flip { transform: none; }
  .sh-ticker-view { overflow-x: auto; }
}

/* ===================================================== 002/009 inside ===
   The whole app in six pillars. The tabs sit on a glass rail; the panels
   share one grid cell of the stage and cross-fade, sliding the way you
   travel (--fx-dir, set by landing.js). Only opacity and transform move.
   An inactive panel is visibility:hidden, which takes its links out of the
   tab order and stops its animations; its art still lazy-loads, so a panel
   is ready by the time it's shown. Each preview is a container: its type is
   sized in cqi, so the whole composition scales with the stage like a
   screenshot would, from a 1600px desktop down to a 375px phone. */
.sh-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sh-fx { background: radial-gradient(64rem 34rem at 50% 58%, rgba(191, 232, 247, 0.075), transparent 70%); }
.sh-fx .sh-head { margin-bottom: clamp(1.4rem, 3vw, 2.1rem); }
.fx { position: relative; }

/* ---- the rail */
.fx-rail {
  position: relative; z-index: 2; display: flex; gap: 0.3rem; width: max-content; max-width: 100%;
  margin: 0 auto clamp(1rem, 2.2vw, 1.5rem); padding: 0.35rem; border-radius: 999px;
  background: rgba(30, 32, 37, 0.78); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.fx-rail::-webkit-scrollbar { display: none; }
.fx:not(.js) .fx-rail, .fx:not(.js) .fx-swipe { display: none; }
.fx-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 0.55rem; height: 3rem;
  padding: 0 1.15rem 0 0.45rem; border: 0; border-radius: 999px; overflow: hidden; isolation: isolate;
  font: inherit; font-weight: 750; font-size: 0.93rem; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--muted); background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fx-tab:hover { color: var(--ink); background: rgba(211, 238, 248, 0.05); }
.fx-tab:focus-visible { outline: 2px solid var(--sh-ice); outline-offset: -2px; }
.fx-tab-ico {
  flex: none; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: rgba(211, 238, 248, 0.07); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.1);
}
.fx-tab-ico .ico { width: 1.05rem; height: 1.05rem; }
.fx-tab[aria-selected="true"] { color: #101115; background: none; }
/* the chosen tab is a foil pill: an oversized copy of the foil slides under
   it (transform), the same trick as the "live" chips */
.fx-tab[aria-selected="true"]::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 200%;
  background: var(--sh-irid); animation: sh-foilslide 6s ease-in-out infinite;
}
.fx-tab[aria-selected="true"]::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, 0.08); }
.fx-tab[aria-selected="true"] .fx-tab-ico { background: #141519; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.6); }
/* auto-advance: the chosen tab's bar fills while the explorer waits to move
   on. landing.js drives it with a transform transition it can stop dead and
   pick up again; a paused CSS animation would have kept Chrome drawing
   main-thread frames for as long as the page stayed open. */
.fx-tab-bar { position: absolute; left: 3rem; right: 1.15rem; bottom: 0.42rem; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; background: rgba(16, 17, 21, 0.16); transition: opacity 0.3s; }
.fx-tab-bar i { display: block; height: 100%; background: rgba(16, 17, 21, 0.72); transform: scaleX(0); transform-origin: 0 50%; }
.fx.is-auto .fx-tab[aria-selected="true"] .fx-tab-bar { opacity: 1; }

/* ---- the stage */
.fx-stage {
  position: relative; display: grid; border-radius: 30px; touch-action: pan-y;
  background: linear-gradient(180deg, rgba(40, 43, 50, 0.62), rgba(22, 24, 28, 0.55));
  box-shadow: inset 0 0 0 1px var(--line), 0 60px 110px -60px rgba(0, 0, 0, 0.95);
}
.fx-stage::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--sh-rainbow); opacity: 0.5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sh-rbhue 9s linear infinite;
}
.fx-panel { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); min-width: 0; }
.fx:not(.js) .fx-panel + .fx-panel { border-top: 1px solid var(--line); }
/* A panel is on (shown), out (fading away, for 0.65 s) or gone
   (visibility:hidden, set by landing.js after the fade). Everything that
   moves on a switch is opacity or transform, so a switch runs on the
   compositor: a transition of anything else (a colour, visibility, an SVG
   stroke) needs a main-thread frame, and every main-thread frame restyles
   every animation on the page (measured ~13 such frames a switch before). */
.fx.js .fx-panel {
  grid-area: 1 / 1; opacity: 0; pointer-events: none; transform: translate3d(calc(var(--fx-dir, 1) * 36px), 0, 0);
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
/* (a hidden element can't animate on the compositor, so a gone panel never transitions:
   its offset still follows --fx-dir, silently) */
.fx.js .fx-panel.is-gone { visibility: hidden; transition: none; }
.fx.js .fx-panel.is-out { transform: translate3d(calc(var(--fx-dir, 1) * -36px), 0, 0); }
.fx.js .fx-panel.is-on { opacity: 1; pointer-events: auto; transform: none; }
.fx.js .fx-panel.is-drag { transition: none; }
/* Panels that are neither shown nor fading run no animations at all.
   Paused was not enough: a paused animation in a hidden subtree can't go to
   the compositor, and Chrome then drew a main-thread frame ~20 times a
   second for the whole page (0 -> ~370 paints/s). They start again when
   the panel is shown. */
.fx.js .fx-panel:not(.is-on):not(.is-out) *, .fx.js .fx-panel:not(.is-on):not(.is-out) *::before, .fx.js .fx-panel:not(.is-on):not(.is-out) *::after { animation: none !important; }

.fx-view {
  position: relative; min-width: 0; min-height: clamp(26rem, 38vw, 34rem); overflow: hidden; container-type: inline-size;
  border-radius: 30px 0 0 30px; isolation: isolate;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(191, 232, 247, 0.12), rgba(206, 198, 246, 0.04) 55%, transparent 80%),
    linear-gradient(160deg, rgba(20, 21, 25, 0.9), rgba(14, 15, 18, 0.92));
  box-shadow: inset -1px 0 0 var(--line);
}
.fx-view::before {
  /* the playmat under the cards */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background: radial-gradient(circle at 1px 1px, rgba(211, 238, 248, 0.13) 1px, transparent 1.5px) 0 0 / 24px 24px;
  -webkit-mask: radial-gradient(75% 70% at 50% 50%, #000, transparent); mask: radial-gradient(75% 70% at 50% 50%, #000, transparent);
}
.fx-glyph { position: absolute; inset: 0; display: grid; place-items: center; }
.fx-glyph .ico { width: 32%; height: auto; aspect-ratio: 1; opacity: 0.85; }

/* ---- the words */
.fx-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.6rem); }
.fx-kicker { margin: 0; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.fx-h { margin: 0.6rem 0 0.7rem; font-size: clamp(1.75rem, 2.5vw, 2.4rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.038em; text-wrap: balance; }
.fx-h .sh-foiltext { margin-block: -0.12em; }
.fx-lede { margin: 0; color: var(--ink-dim); line-height: 1.58; font-size: clamp(0.95rem, 1.1vw, 1.03rem); max-width: 34rem; }
.fx-list { list-style: none; margin: 1.1rem 0 1.4rem; padding: 0; display: grid; gap: 0.1rem; }
.fx-item {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 1rem; align-items: center; gap: 0.75rem;
  padding: 0.52rem 0.65rem 0.52rem 0.4rem; margin-inline: -0.4rem; border-radius: 14px; color: var(--ink);
  transition: background-color 0.2s;
}
.fx-item > .ico { width: 2.1rem; height: 2.1rem; padding: 0.48rem; border-radius: 11px; background: rgba(211, 238, 248, 0.06); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.1); }
.fx-item b { display: block; font-size: 0.97rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.fx-item small { display: block; color: var(--muted); font-size: 0.83rem; line-height: 1.4; margin-top: 0.08rem; }
.fx-go { display: grid; place-items: center; color: var(--faint); transition: transform 0.25s var(--ease), color 0.2s; }
.fx-go .ico { width: 0.95rem; height: 0.95rem; transform: rotate(90deg); }
.fx-item:hover, .fx-item:focus-visible { background: rgba(211, 238, 248, 0.065); }
.fx-item:hover .fx-go, .fx-item:focus-visible .fx-go { color: var(--sh-ice); transform: translateX(3px); }
.fx-item:focus-visible { outline: 2px solid var(--sh-ice); outline-offset: -2px; }
.fx-cta { align-self: flex-start; }
.fx-swipe { display: none; }

/* ===================================== previews: shared pieces */
.fx-view .sh-face { box-shadow: 0 30px 50px -22px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.fx-chips { position: absolute; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; justify-items: start; }
.fx-chips li {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.8rem 0.42rem 0.6rem; border-radius: 999px;
  font-size: clamp(0.66rem, 1.9cqi, 0.8rem); font-weight: 800; color: var(--ink); white-space: nowrap;
  background: rgba(30, 32, 37, 0.92); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.16), 0 14px 28px -14px rgba(0, 0, 0, 0.9);
}
.fx-chips .ico { width: 1.05em; height: 1.05em; }
.fx-chip-sm { display: inline-block; padding: 0.08em 0.5em; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--ink-dim); font-weight: 700; }
/* the pieces fade in with their panel, a beat behind the words. No
   stagger: every transition that ends at its own moment costs a
   main-thread frame to wind up, and each such frame restyles every
   animation on the page. A panel on its way out keeps them. */
.fx.js .fx-panel:not(.is-on):not(.is-out) .fx-in { opacity: 0; }
.fx.js .fx-panel.is-on .fx-in { transition: opacity 0.5s var(--ease) 0.1s; }

/* ------------------------------------------ track & value: the report */
.fx-report { position: absolute; inset: 0; }
.fx-paper {
  position: absolute; left: 6%; top: 10%; width: 64%; padding: 4.2cqi 4.6cqi 3.4cqi; border-radius: 2.4cqi;
  color: #15161a; background: linear-gradient(180deg, #fbfcfe, #f1f4f8); font-size: 2cqi;
  box-shadow: 0 50px 80px -34px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: rotate(-2.4deg);
}
.fx-paper-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 3cqi; padding-bottom: 2.4cqi; border-bottom: 0.45cqi solid #15161a; }
.fx-paper-brand { display: inline-flex; align-items: center; gap: 1.1cqi; font-weight: 900; font-size: 3.1cqi; letter-spacing: -0.03em; }
.fx-paper-brand img { width: 4.6cqi; height: 4.6cqi; padding: 0.7cqi; border-radius: 1.2cqi; background: #15161a; }
.fx-paper-brand b { color: #2f6f89; font-weight: 900; }
.fx-paper-title { display: grid; justify-items: end; text-align: right; }
.fx-paper-title b { font-size: 2.9cqi; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.fx-paper-title small { font-size: 1.75cqi; color: #5b6272; margin-top: 0.4cqi; }
.fx-paper-stats { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.8cqi; margin: 2.8cqi 0 2.2cqi; }
.fx-paper-stats > span { display: grid; gap: 0.3cqi; padding: 1.8cqi 2.2cqi; border-radius: 1.6cqi; background: #e9edf3; }
.fx-paper-stats .fx-ps-main { background: linear-gradient(120deg, #def2fb, #ece8fd); }
.fx-paper-stats small { font-size: 1.55cqi; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #5b6272; }
.fx-paper-stats b { font-size: 5.3cqi; font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fx-paper-stats em { font-style: normal; font-size: 1.6cqi; color: #5b6272; }
.fx-paper-rows { width: 100%; border-collapse: collapse; font-size: 1.95cqi; font-variant-numeric: tabular-nums; }
.fx-paper-rows thead th, .fx-paper-rows tbody td { background: none; border-bottom: 0; }
.fx-paper-rows tbody tr:hover td { background: none; }
.fx-paper-rows th { padding: 0 0 1cqi; text-align: left; position: static; font-family: inherit; white-space: nowrap; font-size: 1.45cqi; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #5b6272; }
.fx-paper-rows td { padding: 0.95cqi 0; border-top: 1px solid #dde2ea; vertical-align: middle; font-size: inherit; }
.fx-paper-rows .num { text-align: right; font-weight: 900; }
.fx-paper-rows td b { display: block; font-weight: 800; line-height: 1.2; }
.fx-paper-rows td small { display: block; font-size: 1.55cqi; color: #6a7182; }
.fx-pr-img { width: 5.5cqi; }
.fx-pr-img img { display: block; width: 3.7cqi; height: auto; border-radius: 0.35cqi; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.fx-pr-src { color: #5b6272; font-size: 1.6cqi; white-space: nowrap; padding-inline: 1.5cqi !important; }
.fx-paper-more { margin: 1.3cqi 0 0; font-size: 1.6cqi; color: #6a7182; }
.fx-seal {
  position: absolute; left: 75%; top: 57%; width: 17cqi; aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; transform: rotate(-14deg);
  background: conic-gradient(from 20deg, #ffd3e6, #fff1b8, #c9ffe4, #cdefff, #e4dcff, #ffd3e6);
  box-shadow: inset 0 0 0 0.5cqi rgba(255, 255, 255, 0.75), 0 20px 34px -14px rgba(0, 0, 0, 0.85);
}
.fx-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-seal text { font: 900 9.6px/1 var(--font); letter-spacing: 1.1px; fill: #2a2d36; }
.fx-seal img { width: 34%; height: auto; padding: 5%; border-radius: 22%; background: #15161a; }
.fx-seal::after {
  content: ""; position: absolute; inset: -30% -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.75) 50%, transparent 58%);
  transform: translateX(-60%); animation: fx-seal-glint 5.5s ease-in-out infinite 1s;
}
@keyframes fx-seal-glint { 0% { transform: translateX(-60%); } 35%, 100% { transform: translateX(60%); } }
.fx-report .fx-chips { right: 3.5%; top: 31%; }
.fx-report .fx-chips li:nth-child(2) { margin-left: 3cqi; }
.fx-report .fx-chips li:nth-child(3) { margin-left: 1cqi; }

/* ------------------------------------- prices you can trust: receipts */
.fx-rc { position: absolute; inset: 0; }
.fx-rc-art { position: absolute; left: 5%; top: 14%; width: 33%; margin: 0; transform: rotate(-5deg); }
.fx-rc-art figcaption { margin-top: 2cqi; text-align: center; font-size: clamp(0.62rem, 1.8cqi, 0.78rem); color: var(--muted); line-height: 1.35; transform: rotate(5deg); }
.fx-rc-art figcaption b { display: block; color: var(--ink); font-size: 1.15em; }
.fx-rc-panel {
  position: absolute; right: 5%; top: 7%; width: 58%; padding: 2.8cqi 3cqi 2.4cqi; border-radius: 3cqi;
  background: linear-gradient(180deg, #1f2126, #18191d); font-size: clamp(0.6rem, 1.95cqi, 0.86rem);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 70px -34px rgba(0, 0, 0, 0.95);
}
.fx-rc-head { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; margin-bottom: 1.8cqi; }
.fx-rc-head b { font-size: 1.3em; font-weight: 900; letter-spacing: -0.02em; }
.fx-conf { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em 0.65em 0.3em 0.5em; border-radius: 999px; font-weight: 800; white-space: nowrap; color: #5de3b0; background: rgba(93, 227, 176, 0.09); box-shadow: inset 0 0 0 1px rgba(93, 227, 176, 0.3); }
.fx-conf.is-medium { color: #e8c07a; background: rgba(232, 192, 122, 0.09); box-shadow: inset 0 0 0 1px rgba(232, 192, 122, 0.3); }
.fx-conf.is-low { color: #f0a58f; background: rgba(240, 165, 143, 0.09); box-shadow: inset 0 0 0 1px rgba(240, 165, 143, 0.3); }
.fx-conf .ico { width: 1.1em; height: 1.1em; }
.fx-conf i { display: inline-flex; gap: 0.16em; margin-left: 0.15em; }
.fx-conf s { display: block; width: 0.34em; height: 0.8em; border-radius: 0.1em; background: currentColor; opacity: 0.25; }
.fx-conf s.on { opacity: 1; }
.fx-rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2cqi; }
.fx-rc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3em 1em; padding: 1.5cqi 1.8cqi; border-radius: 2cqi; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.fx-rc-key { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 800; }
.fx-rc-key i { width: 0.95em; height: 0.2em; border-radius: 2px; background: #3c95cf; }
.fx-rc-row.is-us .fx-rc-key i { background: #d1628c; }
.fx-rc-row.is-nl .fx-rc-key i { background: #c4862c; }
.fx-rc-val { text-align: right; font-size: 1.28em; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fx-rc-val small { display: block; font-size: 0.62em; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.fx-rc-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35em 0.6em; align-items: center; color: var(--muted); font-size: 0.86em; }
.fx-rc-why { margin: 1.6cqi 0 0; display: flex; flex-wrap: wrap; gap: 0.4em 1em; color: var(--ink-dim); font-size: 0.86em; }
.fx-rc-why span { display: inline-flex; align-items: center; gap: 0.3em; }
.fx-rc-why .ico { width: 1em; height: 1em; color: #5de3b0; }
.fx-idx {
  position: absolute; right: 5%; bottom: 5%; width: 50%; padding: 2.2cqi 2.6cqi 2cqi; border-radius: 3cqi; font-size: clamp(0.58rem, 1.8cqi, 0.8rem);
  background: #181a1e; box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.14), 0 36px 60px -28px rgba(0, 0, 0, 0.95);
}
.fx-idx::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--sh-rainbow); opacity: 0.55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fx-idx-k { display: flex; align-items: center; gap: 0.45em; margin: 0; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82em; color: var(--muted); }
.fx-idx-k .ico { width: 1.25em; height: 1.25em; }
.fx-idx-v { display: flex; align-items: baseline; gap: 0.6em; margin: 0.35em 0 0.2em; }
.fx-idx-v b { font-size: 2.5em; font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.fx-idx-v em, .fx-idx-fam em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-idx .up { color: #5de3b0; }
.fx-idx .down { color: #ff8b8b; }
.fx-spark { display: block; width: 100%; height: 11cqi; overflow: visible; }
/* the line draws itself: a cover in the card's colour shrinks off it to the right */
.fx-spark-box { position: relative; display: block; overflow: hidden; }
.fx-spark-box::after { content: ""; position: absolute; inset: -2px 0 0; background: #181a1e; transform: scaleX(0); transform-origin: 100% 50%; }
.fx.js .fx-panel:not(.is-on):not(.is-out) .fx-spark-box::after { transform: none; }
.fx.js .fx-panel.is-on .fx-spark-box::after { transition: transform 1.5s var(--ease) 0.3s; }
.fx-idx { --pad: 2.6cqi; }
.fx-spark-dot { position: absolute; width: 0.7em; height: 0.7em; margin: -0.35em 0 0 -0.35em; border-radius: 50%; background: #cec6f6; box-shadow: 0 0 0 0.3em rgba(206, 198, 246, 0.25); display: none; }
.fx-idx-fam { list-style: none; margin: 0.6em 0 0; padding: 0.55em 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.25em; }
.fx-idx-fam li { display: grid; grid-template-columns: minmax(0, 1fr) auto 4em; gap: 0.6em; align-items: baseline; }
.fx-idx-fam span { color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-idx-fam b { font-variant-numeric: tabular-nums; }
.fx-idx-fam em { text-align: right; }

/* ----------------------------------- complete everything: the Living Dex */
.fx-dex { position: absolute; inset: 0; padding: 6cqi 5.5cqi; display: grid; grid-template-columns: minmax(0, 1fr) 22cqi; grid-template-rows: auto auto; gap: 3.4cqi 4cqi; align-content: center; }
.fx-dex-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.4cqi; font-size: clamp(0.62rem, 2cqi, 0.9rem); }
.fx-ring { position: relative; flex: none; width: 3.9em; height: 3.9em; display: grid; place-items: center; }
.fx-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fx-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 4.5; }
.fx-ring .fx-ring-v { stroke: url(#sh-ico-rb); stroke-linecap: round; stroke-dasharray: calc(var(--p) * 100) 100; }
.fx-ring b { font-size: 1.25em; font-weight: 900; }
.fx-dex-t { display: grid; }
.fx-dex-t small, .fx-dex-fin small { font-size: 0.8em; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.fx-dex-t b { font-size: 1.45em; font-weight: 900; letter-spacing: -0.02em; }
.fx-dex-fin { display: grid; justify-items: end; margin-left: auto; text-align: right; }
.fx-dex-fin b { font-size: 1.45em; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fx-dex-fin em { font-style: normal; color: var(--muted); font-size: 0.85em; }
.fx-dex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5cqi; align-content: start; }
.fx-dx-in {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 0 0 1.2cqi; border: 0; border-radius: 2.2cqi; overflow: hidden;
  font: inherit; text-align: left; color: var(--ink); background: #17181c; box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.12);
  font-size: clamp(0.55rem, 1.75cqi, 0.8rem); -webkit-tap-highlight-color: transparent;
}
button.fx-dx-in { cursor: pointer; }
button.fx-dx-in:focus-visible { outline: 2px solid var(--sh-ice); outline-offset: 2px; }
.fx-dx-art { position: relative; display: block; aspect-ratio: 3 / 1.72; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 42%, rgba(191, 232, 247, 0.16), transparent 62%), #15161a; }
/* the illustration window of the card (7-93% across, 11-52% down), as /dex crops it */
.fx-dx-art img { position: absolute; left: -12%; top: -28.1%; width: 124%; height: auto; max-width: none; transition: filter 0.5s var(--ease), transform 0.5s var(--ease), opacity 0.5s; }
.fx-dx-no { padding: 0.9cqi 1.3cqi 0; font-size: 0.8em; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.fx-dx-name { padding: 0 1.3cqi; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-dx-sub { padding: 0 1.3cqi; font-size: 0.86em; font-weight: 700; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-dx-sub small { color: var(--muted); font-weight: 600; }
.fx-dx.is-caught .fx-dx-in { box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.45), 0 14px 30px -22px rgba(191, 232, 247, 0.6); }
.fx-dx.is-caught .fx-dx-no { color: var(--sh-ice); }
.fx-dx.is-caught .fx-dx-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 159, 196, 0.4) 40%, rgba(255, 224, 138, 0.4) 46%, rgba(143, 233, 166, 0.4) 52%, rgba(159, 227, 245, 0.45) 58%, transparent 68%);
  mix-blend-mode: color-dodge; transform: translateX(-80%); animation: fx-dx-sheen 7s ease-in-out infinite; animation-delay: calc(var(--k) * 0.35s);
}
@keyframes fx-dx-sheen { 0%, 62% { transform: translateX(-80%); } 88%, 100% { transform: translateX(80%); } }
/* missing: "Who's that Pokémon?" — the art as a shadow on an ice spotlight */
.fx-dx.is-missing .fx-dx-art { background: radial-gradient(circle at 50% 45%, rgba(191, 232, 247, 0.36), rgba(206, 198, 246, 0.12) 45%, #121317 75%); }
.fx-dx.is-missing .fx-dx-art img { filter: grayscale(1) brightness(0.55) contrast(2.6) sepia(0.5) hue-rotate(170deg) saturate(1.4); opacity: 0.88; }
.fx-dx.is-missing .fx-dx-art::before {
  content: "?"; position: absolute; z-index: 2; right: 5%; bottom: -2%; font-weight: 900; font-size: 5.2cqi; line-height: 1;
  color: transparent; background: var(--sh-irid); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); transition: opacity 0.3s;
}
.fx-dx.is-missing .fx-dx-in { outline: 1px dashed rgba(211, 238, 248, 0.25); outline-offset: -4px; }
.fx-dx.is-missing .fx-dx-in[aria-pressed="true"] .fx-dx-art img { filter: none; opacity: 1; transform: scale(1.04); }
.fx-dx.is-missing .fx-dx-in[aria-pressed="true"] .fx-dx-art::before { opacity: 0; }
@media (hover: hover) {
  .fx-dx.is-missing .fx-dx-in:hover .fx-dx-art img { filter: none; opacity: 1; transform: scale(1.04); }
  .fx-dx.is-missing .fx-dx-in:hover .fx-dx-art::before { opacity: 0; }
}
.fx-ph { align-self: center; display: grid; justify-items: center; gap: 2cqi; }
.fx-ph-card {
  display: grid; align-content: center; justify-items: center; gap: 0.35em; width: 100%; aspect-ratio: 63 / 88; border-radius: 1.4cqi;
  font-size: clamp(0.55rem, 1.7cqi, 0.78rem); text-align: center; color: #2a2d36; transform: rotate(4deg);
  background: repeating-linear-gradient(135deg, #f6f8fb 0 6px, #eef1f5 6px 12px);
  outline: 1.5px dashed #9aa3b5; outline-offset: -1.2cqi; box-shadow: 0 26px 40px -20px rgba(0, 0, 0, 0.9);
}
.fx-ph-card b { font-size: 2.2em; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.fx-ph-card span { font-weight: 800; }
.fx-ph-card small { color: #5b6272; }
.fx-ph-cap { display: inline-flex; align-items: center; gap: 0.4em; font-size: clamp(0.55rem, 1.5cqi, 0.72rem); color: var(--muted); text-align: center; white-space: nowrap; }
.fx-ph-cap .ico { width: 1.1em; height: 1.1em; flex: none; }

/* --------------------------------------------- play & trade: the meter */
.fx-trade { position: absolute; inset: 0; padding: 5.5cqi 5cqi 4.5cqi; display: grid; grid-template-columns: minmax(0, 1fr) 36cqi minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; gap: 5cqi 1cqi; font-size: clamp(0.6rem, 1.9cqi, 0.86rem); }
.fx-tr-side { display: grid; justify-items: center; gap: 0.35em; text-align: center; min-width: 0; }
.fx-tr-side > small { font-size: 0.82em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fx-tr-side > b { font-size: 1.6em; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fx-tr-side > span { color: var(--muted); font-size: 0.9em; line-height: 1.3; }
.fx-tr-cards { position: relative; display: grid; width: 78%; margin: 0.6em 0; }
.fx-tr-cards img { grid-area: 1 / 1; display: block; width: 100%; height: auto; border-radius: 4.6% / 3.35%; box-shadow: 0 26px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.is-give .fx-tr-cards img { transform: rotate(-6deg); }
.is-get .fx-tr-cards img { transform: rotate(6deg); }
.is-get .fx-tr-cards.n2 img:first-child { transform: rotate(-3deg) translateX(-14%); }
.is-get .fx-tr-cards.n2 img:last-child { transform: rotate(9deg) translateX(14%) translateY(4%); }
.fx-tr-mid { display: grid; justify-items: center; gap: 0.3em; text-align: center; }
.fx-gauge { display: block; width: 100%; height: auto; overflow: visible; }
.fx-gauge-mid { stroke: var(--ink); stroke-width: 2; opacity: 0.6; }
/* the needle is an HTML bar over the SVG dial (an SVG element's transform
   can't be animated on the compositor): the dial's viewBox is 220 x 124 with
   the pivot at 110,110 and a 76-long needle, hence the percentages */
.fx-gauge-box { position: relative; display: block; width: 100%; }
.fx-needle {
  position: absolute; left: 49.2%; bottom: 11.3%; width: 1.6%; height: 61.3%; border-radius: 99px; background: #f2f6fc;
  transform-origin: 50% 100%; transform: rotate(var(--a));
}
.fx-needle::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 456%; aspect-ratio: 1; border-radius: 50%;
  background: #f2f6fc; box-shadow: 0 0 0 0.3cqi #1c1d22; transform: translate(-50%, 50%);
}
.fx.js .fx-panel:not(.is-on):not(.is-out) .fx-needle { transform: rotate(-80deg); }
.fx.js .fx-panel.is-on .fx-needle { transition: transform 1.1s cubic-bezier(0.34, 1.5, 0.64, 1) 0.25s; }
.fx-tr-call { display: inline-flex; align-items: center; gap: 0.4em; margin: 0.4em 0 0; padding: 0.35em 0.9em; border-radius: 999px; font-weight: 900; font-size: 1.05em; color: #101115; background: var(--sh-irid); box-shadow: 0 10px 24px -12px rgba(191, 232, 247, 0.7); }
.fx-tr-call .ico { width: 1em; height: 1em; }
.fx-tr-call:not(.is-fair) { color: var(--ink); background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.fx-tr-diff { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-tr-diff small { color: var(--muted); font-weight: 600; }
.fx-tr-mk { grid-column: 1 / -1; width: 100%; border-collapse: separate; border-spacing: 0; padding: 1.4cqi 2cqi; border-radius: 2.4cqi; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); font-variant-numeric: tabular-nums; }
.fx-tr-mk caption { caption-side: top; text-align: left; padding: 0 0 0.6em; font-size: 0.82em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fx-tr-mk { font-size: inherit; }
.fx-tr-mk th, .fx-tr-mk td { padding: 0.35em 0.5em; text-align: left; white-space: nowrap; border: 0; background: none !important; }
.fx-tr-mk th { font-weight: 800; }
.fx-tr-mk .num { text-align: right; font-weight: 800; }
.fx-tr-verdict { color: var(--muted); font-weight: 700; }
.fx-tr-mk tr.is-fair .fx-tr-verdict { color: #5de3b0; }
.fx-tr-bal { width: 34%; }
.fx-tr-bal span { position: relative; display: block; height: 0.5em; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.fx-tr-bal span::before { content: ""; position: absolute; left: 50%; top: -0.2em; bottom: -0.2em; width: 1px; background: rgba(255, 255, 255, 0.35); }
.fx-tr-bal i { position: absolute; top: 50%; left: 50%; width: 0.8em; height: 0.8em; margin: -0.4em 0 0 -0.4em; border-radius: 50%; background: #f2f6fc; box-shadow: 0 0 0 0.2em rgba(191, 232, 247, 0.25); transform: translateX(calc(var(--b) * 5.5em)); }
.fx-tr-mk tr.is-fair .fx-tr-bal i { background: #5de3b0; box-shadow: 0 0 0 0.2em rgba(93, 227, 176, 0.25); }

/* ------------------------------------------ collector tools: Rip or keep? */
.fx-ev { position: absolute; inset: 0; padding: 6cqi 7cqi 6cqi 5cqi; display: grid; grid-template-columns: minmax(0, 1fr) 26cqi; align-items: center; gap: 5cqi; }
.fx-ev-card { position: relative; padding: 3cqi 3.2cqi; border-radius: 3cqi; font-size: clamp(0.58rem, 1.85cqi, 0.84rem); background: linear-gradient(180deg, #1f2126, #18191d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 70px -34px rgba(0, 0, 0, 0.95); }
.fx-ev-head { display: flex; align-items: center; gap: 2cqi; margin-bottom: 2cqi; }
.fx-ev-logo { width: 17cqi; height: 7cqi; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
.fx-ev-head span { display: grid; min-width: 0; }
.fx-ev-head b { font-size: 1.4em; font-weight: 900; letter-spacing: -0.02em; }
.fx-ev-head small { color: var(--muted); font-size: 0.9em; }
.fx-ev-body { display: grid; grid-template-columns: 23cqi minmax(0, 1fr); align-items: center; gap: 2.6cqi; }
.fx-donut { position: relative; }
.fx-donut svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.fx-donut circle { fill: none; stroke-width: 13; }
.fx-donut-bg { stroke: rgba(255, 255, 255, 0.06); }
.fx-seg { stroke-dasharray: var(--len) 100; stroke-dashoffset: calc(var(--off) * -1); }
/* the ring spins into place (a transform: the segments themselves don't move) */
.fx.js .fx-panel:not(.is-on):not(.is-out) .fx-donut svg { opacity: 0; transform: rotate(-250deg) scale(0.8); }
.fx.js .fx-panel.is-on .fx-donut svg { transition: transform 1.1s var(--ease) 0.15s, opacity 0.5s 0.15s; }
.fx-donut-c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.fx-donut-c small { font-size: 0.72em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); max-width: 11em; line-height: 1.2; }
.fx-donut-c b { font-size: 1.85em; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fx-donut-c em { font-style: normal; color: var(--ink-dim); font-weight: 700; font-size: 0.85em; }
.fx-ev-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }
.fx-ev-legend li { display: grid; grid-template-columns: 0.75em minmax(0, 1fr) auto; align-items: center; gap: 0.6em; }
.fx-ev-legend i { width: 0.75em; height: 0.75em; border-radius: 3px; background: var(--c); }
.fx-ev-legend span { font-weight: 700; line-height: 1.25; }
.fx-ev-legend small { display: block; color: var(--muted); font-weight: 600; font-size: 0.85em; }
.fx-ev-legend b { font-variant-numeric: tabular-nums; font-weight: 900; }
.fx-ev-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqi; margin-top: 2.2cqi; }
.fx-ev-stats span { display: grid; padding: 1.3cqi 1.8cqi; border-radius: 1.8cqi; background: rgba(255, 255, 255, 0.04); }
.fx-ev-stats small { font-size: 0.78em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fx-ev-stats b { font-size: 1.35em; font-weight: 900; letter-spacing: -0.02em; }
.fx-ev-note, .fx-ev-verdict { display: flex; align-items: center; gap: 0.5em; margin: 1.8cqi 0 0; color: var(--muted); font-size: 0.9em; line-height: 1.4; }
.fx-ev-note .ico, .fx-ev-verdict .ico { width: 1.1em; height: 1.1em; flex: none; }
.fx-ev-verdict { justify-content: space-between; padding: 0.7em 0.8em 0.7em 1em; border-radius: 1.8cqi; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.14); }
.fx-ev-verdict > span { display: grid; }
.fx-ev-verdict small { font-size: 0.78em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fx-ev-verdict b { font-size: 1.35em; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-ev-verdict strong { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.45em 0.85em; border-radius: 999px; font-weight: 900; font-size: 1.05em; color: #101115; background: var(--sh-irid); box-shadow: 0 10px 22px -12px rgba(191, 232, 247, 0.8); white-space: nowrap; }
.fx-ev-chase { position: relative; height: 100%; min-height: 52cqi; }
.fx-ev-chase figure { position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%) rotate(calc(var(--i) * 7deg)) translateX(calc(var(--i) * 6%)); transform-origin: 50% 130%; }
.fx-ev-chase figure:nth-child(1) { z-index: 3; }
.fx-ev-chase img { display: block; width: 100%; height: auto; border-radius: 4.6% / 3.35%; box-shadow: 0 26px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.fx-ev-chase figcaption {
  position: absolute; left: 50%; bottom: -3cqi; transform: translateX(-50%) rotate(-3deg); display: grid; justify-items: center; white-space: nowrap;
  padding: 0.35em 0.75em; border-radius: 8px; color: #101115; line-height: 1.15; font-size: clamp(0.55rem, 1.7cqi, 0.8rem);
  background: var(--sh-sticker); outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -1px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.8);
}
.fx-ev-chase figcaption b { font-size: 1.25em; font-weight: 900; letter-spacing: -0.02em; }
.fx-ev-chase figcaption small { font-size: 0.78em; font-weight: 800; letter-spacing: 0.04em; color: #4c5468; }
.fx-ev-chase figure:not(:first-child) figcaption { display: none; }

/* ----------------------------------------------- your story: Wrapped */
.fx-story { position: absolute; inset: 0; }
.fx-wr {
  position: absolute; left: 48%; top: 50%; width: 41cqi; aspect-ratio: 9 / 16; transform: translate(-50%, -50%) rotate(-2deg);
  display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 3cqi 3.2cqi; border-radius: 4.5cqi; overflow: hidden; isolation: isolate;
  text-align: center; font-size: clamp(0.5rem, 1.75cqi, 0.8rem);
  background: radial-gradient(90% 55% at 50% 38%, rgba(255, 159, 196, 0.22), transparent 70%), linear-gradient(180deg, #1a1b20 0%, #111216 60%, #0d0e11 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 60px 90px -40px rgba(0, 0, 0, 0.95);
}
.fx-wr-bars { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.3em; width: 100%; }
.fx-wr-bars i { height: 0.25em; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.fx-wr-bars i.done { background: rgba(255, 255, 255, 0.85); }
.fx-wr-bars i.now { background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0.18) 45%); }
.fx-wr-top { display: flex; align-items: center; gap: 0.4em; align-self: flex-start; margin: 0.7em 0 0.4em; font-weight: 900; letter-spacing: -0.02em; font-size: 1.1em; }
.fx-wr-top img { width: 1.4em; height: 1.4em; }
.fx-wr-top b { background: linear-gradient(100deg, #bfe8f7, #cec6f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-wr-top em { font-style: normal; font-weight: 600; color: var(--muted); }
.fx-wr-no { font-size: 0.8em; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); }
.fx-wr-no i { font-style: normal; color: #ff9fc4; }
.fx-wr-kick { font-size: 0.9em; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.fx-wr-card { position: relative; width: 68%; margin: 0.8em 0 1em; transform: rotate(4deg); }
.fx-wr-sticker {
  position: absolute; right: -14%; bottom: 8%; padding: 0.35em 0.7em; border-radius: 7px; transform: rotate(-8deg);
  font-weight: 900; font-size: 1.25em; letter-spacing: -0.02em; color: #101115; font-variant-numeric: tabular-nums;
  background: var(--sh-sticker); outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -1px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.8);
}
.fx-wr-name { font-size: 1.6em; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.fx-wr-set { color: var(--ink-dim); }
.fx-wr-foot { margin-top: auto; color: var(--muted); font-size: 0.82em; line-height: 1.35; }
.fx-lvl { position: absolute; left: 7%; bottom: 10%; display: grid; justify-items: center; gap: 1.6cqi; }
.fx-lvl-card {
  display: grid; justify-items: center; align-content: center; gap: 0.15em; width: 17cqi; aspect-ratio: 63 / 88; border-radius: 1.4cqi; transform: rotate(-9deg);
  font-size: clamp(0.5rem, 1.5cqi, 0.72rem); color: #101115; text-align: center; overflow: hidden; isolation: isolate; position: relative;
  background: linear-gradient(135deg, #e6f7fd, #9fdcf2 45%, #f2fbff 70%, #8fd3ee);
  box-shadow: inset 0 0 0 0.5cqi rgba(255, 255, 255, 0.7), 0 26px 40px -18px rgba(0, 0, 0, 0.9);
}
.fx-lvl-card small { font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.9em; }
.fx-lvl-card span { font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 0.8em; }
.fx-lvl-card b { font-size: 4.4em; font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; }
.fx-lvl-card::after {
  content: ""; position: absolute; inset: -20% -80%; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.7) 50%, transparent 60%);
  transform: translateX(-55%); animation: fx-seal-glint 6s ease-in-out infinite 2s;
}
.fx-lvl-cap { display: inline-flex; align-items: center; gap: 0.4em; font-size: clamp(0.55rem, 1.6cqi, 0.76rem); font-weight: 800; color: var(--ink-dim); white-space: nowrap; }
.fx-lvl-cap .ico { width: 1.15em; height: 1.15em; }
.fx-chips-story { right: 3.5%; top: 50%; transform: translateY(-50%); }
.fx-chips-story li:nth-child(2) { margin-left: 2cqi; }

/* sections far off screen rest (landing.js adds .sh-rest) */
.sh-rest, .sh-rest::before, .sh-rest::after, .sh-rest *, .sh-rest *::before, .sh-rest *::after { animation: none !important; }

/* ===================================================== 008/009 roadmap ===
   A vertical timeline: each quarter is a row, the spine runs down the
   left through a node per quarter. Every row draws its own stretch of
   spine to the next node, solid rainbow up to the quarter we're in and
   dashed into the future, so it follows the data without measuring
   anything. The quarter we're in wears the "You are here" pin. */
.sh-road { background: radial-gradient(60rem 28rem at 30% 30%, rgba(191, 232, 247, 0.06), transparent 70%); }
.rm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2rem 3rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.rm-head .sh-head { margin-bottom: 0; }
.rm-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rm-chip {
  position: relative; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.62rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.rm-chip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.rm-chip.is-live { color: #0e1512; background: #5de3b0; box-shadow: none; }
.rm-chip.is-progress { color: #ffe08a; background: rgba(255, 224, 138, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.45); }
.rm-chip.is-progress::before { animation: rm-blink 1.8s ease-in-out infinite; }
@keyframes rm-blink { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 0.35; transform: scale(0.7); } }
.rm-chip.is-planned { color: var(--sh-ice); box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.35); }

.rm-track { list-style: none; margin: 0; padding: 0; display: grid; }
.rm-q { position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.2rem 2.4rem; padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }
/* the stretch of spine from this quarter's node down to the next one */
.rm-q::before {
  content: ""; position: absolute; left: 0.62rem; top: 1.35rem; bottom: -0.35rem; width: 3px; border-radius: 3px;
  background: repeating-linear-gradient(180deg, rgba(211, 238, 248, 0.32) 0 7px, transparent 7px 14px);
}
.rm-q.is-past::before, .rm-q.is-now::before {
  background: linear-gradient(180deg, #ff9fc4, #ffe08a 25%, #8fe9a6 50%, #9fe3f5 75%, #cec6f6);
  box-shadow: 0 0 14px rgba(255, 190, 230, 0.3);
}
.rm-q.is-now::before { -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.rm-q:last-child::before { -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%); }
.rm-when { position: relative; padding-left: 2.6rem; }
.rm-node { position: absolute; left: 0; top: 0.35rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #1b1c21; box-shadow: inset 0 0 0 3px rgba(211, 238, 248, 0.42); }
.rm-q.is-past .rm-node { background: #5de3b0; box-shadow: none; }
.rm-q.is-now .rm-node { background: conic-gradient(#ff9fc4, #ffe08a, #8fe9a6, #9fe3f5, #cec6f6, #ff9fc4); box-shadow: 0 0 0 4px var(--sh-bg), 0 0 22px rgba(255, 190, 230, 0.55); }
.rm-q.is-now .rm-node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 224, 238, 0.7); animation: rm-ping 2.4s ease-out infinite; }
@keyframes rm-ping { 0% { transform: scale(0.8); opacity: 1; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.rm-label { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; }
.rm-q.is-next .rm-label { color: var(--ink-dim); }
.rm-title { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.92rem; }
.rm-here {
  position: relative; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 900; white-space: nowrap; color: #101115; background: var(--sh-irid);
  box-shadow: 0 10px 24px -12px rgba(191, 232, 247, 0.8); overflow: hidden; isolation: isolate;
}
.rm-here::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 200%; background: var(--sh-irid); animation: sh-foilslide 6s ease-in-out infinite; }
.rm-here .ico { width: 0.9em; height: 0.9em; }
.rm-body { min-width: 0; display: grid; gap: 1rem; }
.rm-live {
  position: relative; padding: 1.15rem 1.25rem 1.2rem; border-radius: 22px;
  background: linear-gradient(180deg, rgba(38, 41, 48, 0.62), rgba(22, 24, 28, 0.5)); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(0, 0, 0, 0.9);
}
.rm-q.is-now .rm-live::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--sh-rainbow); opacity: 0.65;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sh-rbhue 9s linear infinite;
}
.rm-sub { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.85rem; font-size: 0.84rem; color: var(--muted); font-weight: 700; }
.rm-shipped { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.55rem 1.4rem; }
.rm-shipped li { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr); gap: 0.5rem; align-items: start; font-size: 0.9rem; line-height: 1.4; color: var(--ink-dim); }
.rm-shipped .ico { width: 1.05rem; height: 1.05rem; margin-top: 0.12rem; color: #5de3b0; }
.rm-shipped a { color: var(--ink-dim); text-decoration: underline; text-decoration-color: rgba(211, 238, 248, 0.14); text-underline-offset: 3px; }
.rm-shipped a:hover { color: var(--ink); text-decoration-color: var(--sh-ice); }
/* the first six releases show; the rest wait behind a pill, so the roadmap isn't a wall of text */
.rm-more { margin-top: 0.7rem; }
.rm-more > .rm-shipped { margin-top: 0.55rem; }
.rm-more summary {
  display: inline-flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer; margin-left: 1.55rem;
  padding: 0.38rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line);
}
.rm-more summary::-webkit-details-marker { display: none; }
.rm-more summary:hover { box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.4); }
.rm-more summary .ico { width: 0.9rem; height: 0.9rem; color: #5de3b0; }
.rm-more[open] > summary { display: none; }
.rm-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 0.8rem; }
.rm-items.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rm-item {
  display: flex; flex-direction: column; gap: 0.45rem; padding: 0.95rem 1rem 1.05rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(38, 41, 48, 0.55), rgba(24, 26, 30, 0.45)); box-shadow: inset 0 0 0 1px var(--line);
}
.rm-item.is-progress { background: linear-gradient(180deg, rgba(58, 52, 34, 0.35), rgba(26, 26, 28, 0.5)); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.16); }
.rm-item-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.15rem; }
.rm-item-top .rm-vote-f, .rm-item-top > .rm-vote { margin-left: auto; }
.rm-ico { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 11px; background: rgba(211, 238, 248, 0.06); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.12); }
.rm-ico .ico { width: 1.1rem; height: 1.1rem; }
.rm-item-t { font-size: 1rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.rm-item-x { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.rm-vote-f { margin: 0; }
.rm-vote {
  display: inline-flex; align-items: center; gap: 0.3rem; height: 1.9rem; padding: 0 0.7rem 0 0.55rem; border: 0; border-radius: 999px;
  font: inherit; font-size: 0.78rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink-dim); cursor: pointer; white-space: nowrap;
  background: rgba(211, 238, 248, 0.06); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.2); transition: background-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.rm-vote .ico { width: 0.95rem; height: 0.95rem; }
.rm-vote:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.5); transform: translateY(-1px); }
.rm-vote:focus-visible { outline: 2px solid var(--sh-ice); outline-offset: 2px; }
.rm-vote.on { color: #101115; background: var(--sh-irid); box-shadow: 0 8px 18px -10px rgba(191, 232, 247, 0.8); }
.rm-vote.pop { animation: sh-pop 0.45s var(--ease); }
.rm-vote[disabled] { opacity: 0.6; cursor: progress; }
.rm-note { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0; padding-left: 2.6rem; color: var(--muted); font-size: 0.9rem; }
.rm-note .ico { width: 1rem; height: 1rem; flex: none; }

/* ============================================ explorer + roadmap: sizes */
@media (max-width: 1080px) {
  .rm-q { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .rm-body, .rm-note { padding-left: 2.6rem; }
  .fx-panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .fx-copy { padding-inline: 1.4rem 1.6rem; }
  .fx-h { font-size: 1.65rem; }
  .fx-dex { grid-template-columns: minmax(0, 1fr); }
  .fx-ph { display: none; }
  .fx-rail { justify-content: flex-start; margin-inline: -1.25rem; width: auto; max-width: none; padding-inline: 1.25rem; border-radius: 0; background: none; box-shadow: none;
    -webkit-mask: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent); mask: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent); }
  .fx-tab { background: rgba(30, 32, 37, 0.78); box-shadow: inset 0 0 0 1px var(--line); }
  .fx-tab[aria-selected="true"] { box-shadow: none; }
}
/* a phone: the preview on top, the words under it, and every preview
   recomposed for a tall, narrow stage */
@media (max-width: 700px) {
  .fx-rail { margin-inline: -1rem; padding-inline: 1rem; }
  .fx-panel { grid-template-columns: minmax(0, 1fr); }
  .fx-stage { border-radius: 24px; }
  .fx-view { min-height: 0; aspect-ratio: 0.8; border-radius: 24px 24px 0 0; box-shadow: inset 0 -1px 0 var(--line); }
  .fx-copy { justify-content: flex-start; padding: 1.3rem 1.15rem 1.4rem; }
  .fx-h { font-size: 1.7rem; }
  .fx-item small { font-size: 0.8rem; }
  .fx-swipe { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0; color: var(--faint); font-size: 0.78rem; }
  .fx-swipe .ico { width: 0.9rem; height: 0.9rem; }
  .fx-paper { left: 5%; top: 5%; width: 90%; }
  .fx-seal { left: auto; top: auto; right: 5%; bottom: 5%; width: 24cqi; }
  .fx-report .fx-chips { display: none; }
  .fx-rc-art { left: 4%; top: 4%; width: 40%; }
  .fx-rc-art figcaption { display: none; }
  .fx-rc-panel { right: 4%; top: 6%; width: 58%; padding: 2.6cqi; }
  .fx-rc-meta span:nth-child(n+3), .fx-rc-why { display: none; }
  .fx-idx { left: 4%; right: 4%; width: auto; bottom: 4%; }
  .fx-idx-fam { display: none; }
  .fx-spark { height: 14cqi; }
  .fx-dex { grid-template-columns: minmax(0, 1fr); padding: 5cqi 4.5cqi; gap: 3cqi; }
  .fx-wide { display: none; }
  .fx-dex-fin small::first-letter { text-transform: uppercase; }
  .fx-ph { display: none; }
  .fx-trade { grid-template-columns: minmax(0, 1fr) 30cqi minmax(0, 1fr); padding: 6cqi 4cqi; gap: 6cqi 1.5cqi; }
  .fx-tr-cards { width: 92%; margin: 0.4em 0; }
  .fx-tr-side > span { display: none; }
  .fx-tr-diff small { display: block; }
  .fx-tr-bal { display: none; }
  .fx-ev { grid-template-columns: minmax(0, 1fr); padding: 5cqi 4.5cqi; align-content: center; }
  .fx-ev-chase { display: none; }
  .fx-ev-body { grid-template-columns: 34cqi minmax(0, 1fr); }
  .fx-wr { width: 56cqi; left: 58%; }
  .fx-lvl { left: 4%; bottom: 8%; }
  .fx-lvl-card { width: 24cqi; }
  .fx-chips-story { display: none; }
}
@media (max-width: 640px) {
  .rm-shipped, .rm-items, .rm-items.n4 { grid-template-columns: minmax(0, 1fr); }
  .rm-live { padding: 1rem 1rem 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fx.js .fx-panel { transition: none; transform: none; }
  .fx.js .fx-panel.is-on .fx-in, .fx.js .fx-panel.is-on .fx-spark-box::after, .fx.js .fx-panel.is-on .fx-donut svg, .fx.js .fx-panel.is-on .fx-needle { transition: none; }
  .fx-tab[aria-selected="true"]::before, .fx-stage::after, .fx-seal::after, .fx-lvl-card::after, .fx-dx.is-caught .fx-dx-art::after,
  .rm-q.is-now .rm-node::after, .rm-q.is-now .rm-live::after, .rm-here::before, .rm-chip.is-progress::before { animation: none !important; }
}

/* ============================================================= on scroll ===
   A few things move with the page as it scrolls, driven by the scroll
   position itself (animation-timeline), so the compositor runs them and
   they cost nothing while the page stands still:
     - the card wall sinks back as the hero scrolls away (depth)
     - the roadmap's spine fills quarter by quarter, each node lighting as
       the line reaches it
   A browser without scroll timelines shows them all finished. */
@supports (animation-timeline: view()) {
  .sh-wall { --sh-sink: 16%; animation: sh-sv-hand linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes sh-sv-hand { from { translate: 0 0; } to { translate: 0 var(--sh-sink); } }
  /* on a phone the ticker sits right under the wall: sink less */
  @media (max-width: 1080px) { .sh-wall { --sh-sink: 6%; } }
  /* the explorer's stage tilts up to face you as it arrives, like a
     screen lifted off the table */
  .fx-stage { animation: sh-sv-stage linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  @keyframes sh-sv-stage { from { transform: perspective(1600px) rotateX(18deg) scale(0.93); opacity: 0.55; } to { transform: none; opacity: 1; } }
  /* the three screens rise at their own speeds */
  .sh-dev { animation: sh-sv-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  .sh-dev-web { animation-name: sh-sv-rise-web; }
  @keyframes sh-sv-rise { from { translate: 0 110px; } to { translate: 0 0; } }
  @keyframes sh-sv-rise-web { from { translate: 0 50px; } to { translate: 0 0; } }
  .rm-q { view-timeline: --sh-rmq block; }
  .rm-q::before {
    transform-origin: 50% 0; animation: sh-sv-spine linear both; animation-timeline: --sh-rmq; animation-range: cover 20% cover 55%;
  }
  @keyframes sh-sv-spine { from { transform: scaleY(0); } to { transform: none; } }
  /* each node lights on its own way up the screen (a quarter can be taller
     than a phone, so the row's own progress would light it too late) */
  .rm-q .rm-node { animation: sh-sv-node linear both; animation-timeline: view(); animation-range: cover 12% cover 32%; }
  @keyframes sh-sv-node { from { transform: scale(0.35); opacity: 0.25; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .sh-wall, .rm-q::before, .rm-q .rm-node, .fx-stage, .sh-dev { animation: none !important; }
}

/* ================================================================ sparks ===
   One fixed layer of four-point sparkles, reused: they shed off a foil card
   under a moving mouse, pop out of a pressed call to action, and rain down
   for anyone who finds the secret (landing.js). Each is a Web Animation of
   transform and opacity, so the compositor flies it; the layer is empty
   and still the rest of the time. */
.sh-sparks { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; contain: strict; }
.sh-sparks i {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; opacity: 0;
  background: linear-gradient(135deg, #fff, #d2f1ff 45%, #fff3c4);
  -webkit-mask: var(--sh-spark) center / contain no-repeat; mask: var(--sh-spark) center / contain no-repeat;
}
/* the glow sits on a wrapper-free drop shadow of the layer's own children:
   a thin dark edge so a sparkle reads over white card borders, then ice */
.sh-sparks i { filter: drop-shadow(0 0 1px rgba(16, 24, 48, 0.55)) drop-shadow(0 0 5px rgba(191, 232, 247, 0.9)); }
.sh-sparks i.rb { background: linear-gradient(135deg, #ff9fc4, #ffe08a 30%, #8fe9a6 55%, #9fe3f5 75%, #cec6f6); }
.sh-sparks i.big { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.sh-toast {
  position: fixed; z-index: 91; left: 50%; top: 1.2rem; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.2rem; border-radius: 999px; font-weight: 900; color: #101115; background: var(--sh-irid);
  box-shadow: 0 18px 40px -14px rgba(191, 232, 247, 0.8), inset 0 1px 0 #fff; pointer-events: none;
  transform: translate(-50%, -140%); transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sh-toast.in { transform: translate(-50%, 0); }
.sh-toast .ico { width: 1.05em; height: 1.05em; }
.sh-no-secret { cursor: default; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .sh-toast { transition: none; } }

/* ================================================================== lean ===
   Big card objects lean toward a mouse over them (landing.js sets the
   individual `rotate` property about an axis in the screen's plane, so it
   composes with each one's own transform); the parent gives the depth. */
.sh-bind-grid { perspective: 1400px; }
.sh-binder { transition: rotate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* ================================================ previews of the new round ===
   X-ray, Art Twins, a trade circle, Zoom with Collector DNA and delivered-to-
   you prices: laid out like the other previews (absolute, cqi-sized, faded in
   with their panel). Nothing here animates on its own; the Zoom lens eases
   out on a tap (a transform). */
/* ---- prices: delivered to you */
.fx-dv {
  position: absolute; right: 5%; bottom: 5%; width: 50%; padding: 2.1cqi 2.4cqi 1.6cqi; border-radius: 3cqi; font-size: clamp(0.58rem, 1.8cqi, 0.8rem);
  background: #181a1e; box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.14), 0 36px 60px -28px rgba(0, 0, 0, 0.95);
}
.fx-dv-k { display: flex; align-items: center; gap: 0.45em; margin: 0 0 0.6em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82em; color: var(--muted); }
.fx-dv-k .ico { width: 1.25em; height: 1.25em; }
.fx-dv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.8em; align-items: center; padding: 0.55em 0.7em; border-radius: 1.6cqi; }
.fx-dv-row + .fx-dv-row { margin-top: 0.3em; }
.fx-dv-m { display: grid; min-width: 0; }
.fx-dv-m b { font-weight: 800; }
.fx-dv-m small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-dv-t { font-size: 1.3em; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; }
.fx-dv-best, .fx-dv-more { grid-column: 2; justify-self: end; font-style: normal; font-weight: 800; font-size: 0.82em; font-variant-numeric: tabular-nums; }
.fx-dv-more { color: var(--muted); }
.fx-dv-best { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.1em 0.55em; border-radius: 999px; color: #101115; background: var(--sh-irid); }
.fx-dv-best .ico { width: 0.9em; height: 0.9em; }
.fx-dv-row.is-best { background: rgba(191, 232, 247, 0.08); box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.32); }

/* ---- complete: Art Twins */
.fx-tw { position: absolute; inset: 0; padding: 5cqi 5cqi 4cqi; display: grid; grid-template-rows: auto 1fr auto auto; gap: 2.2cqi; font-size: clamp(0.58rem, 1.8cqi, 0.82rem); }
.fx-tw-k { display: flex; align-items: center; gap: 0.5em; margin: 0; font-weight: 800; color: var(--ink-dim); }
.fx-tw-k .ico { width: 1.3em; height: 1.3em; flex: none; }
.fx-tw-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.4cqi; align-items: start; }
.fx-tw-c { position: relative; margin: 0; transform: rotate(calc((var(--i) - 1) * 2.5deg)); }
.fx-tw-c .sh-face { box-shadow: 0 26px 44px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.fx-tw-c:not(.is-low) .sh-face img { filter: saturate(0.8) brightness(0.86); }
.fx-tw-c.is-low .sh-face { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 50px -8px rgba(191, 232, 247, 0.75), 0 30px 50px -22px rgba(0, 0, 0, 0.9); }
.fx-tw-c figcaption { display: grid; justify-items: center; gap: 0.1em; margin-top: 1.6cqi; text-align: center; line-height: 1.2; }
.fx-tw-c figcaption b { font-weight: 800; }
.fx-tw-c figcaption small { color: var(--muted); }
.fx-tw-p { margin-top: 0.35em; padding: 0.25em 0.6em; border-radius: 7px; font-weight: 900; font-size: 1.15em; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.06); }
.fx-tw-p small { display: block; font-size: 0.62em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fx-tw-c.is-low .fx-tw-p { color: #101115; background: var(--sh-sticker); outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -1px; }
.fx-tw-c.is-low .fx-tw-p small { color: #4c5468; }
.fx-tw-badge { position: absolute; left: 50%; top: -0.9em; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.3em; padding: 0.25em 0.65em; border-radius: 999px; white-space: nowrap; font-weight: 900; color: #101115; background: var(--sh-irid); box-shadow: 0 10px 22px -10px rgba(191, 232, 247, 0.8); }
.fx-tw-badge .ico { width: 0.9em; height: 0.9em; }
.fx-tw-sum { margin: 0; color: var(--ink-dim); line-height: 1.45; }
.fx-tw-sum b { color: var(--ink); }
.fx-chips-tw { position: static; display: flex; flex-wrap: wrap; }

/* ---- trade: a three-way circle */
.fx-ci { position: absolute; inset: 0; font-size: clamp(0.56rem, 1.75cqi, 0.8rem); }
.fx-ci-ring { position: absolute; left: 50%; top: 50%; width: 64cqi; height: 64cqi; margin: -32cqi 0 0 -32cqi; overflow: visible; }
.fx-ci-c { position: absolute; width: 15cqi; margin: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
.fx-ci-c img { display: block; width: 100%; height: auto; border-radius: 4.6% / 3.35%; box-shadow: 0 20px 32px -14px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.fx-ci-c figcaption { position: absolute; left: 50%; bottom: -0.8em; transform: translateX(-50%) rotate(-3deg); padding: 0.2em 0.55em; border-radius: 6px; white-space: nowrap; font-weight: 900; font-variant-numeric: tabular-nums; color: #101115; background: var(--sh-sticker); outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -1px; }
.fx-ci-c.is-0 { left: 50%; top: 14%; --r: -4deg; }
.fx-ci-c.is-1 { left: 80.5%; top: 70%; --r: 5deg; }
.fx-ci-c.is-2 { left: 19.5%; top: 70%; --r: -6deg; }
.fx-ci-who { position: absolute; display: grid; justify-items: center; gap: 0.15em; transform: translate(-50%, -50%); text-align: center; font-weight: 800; white-space: nowrap; }
.fx-ci-who i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; font-style: normal; font-weight: 900; color: #101115; background: var(--sh-irid); box-shadow: 0 8px 18px -8px rgba(191, 232, 247, 0.8); }
.fx-ci-who small { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-ci-who.is-0 { left: 19%; top: 30%; }
.fx-ci-who.is-1 { left: 81%; top: 30%; }
.fx-ci-who.is-2 { left: 50%; top: 88%; }
.fx-ci-mid { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); margin: 0; display: grid; justify-items: center; gap: 0.3em; text-align: center; line-height: 1.3; }
.fx-ci-mid b { font-size: 1.5em; font-weight: 900; letter-spacing: -0.02em; }
.fx-ci-mid small { color: var(--muted); }

/* ---- tools: X-ray */
.fx-xr { position: absolute; inset: 0; padding: 4.5cqi 5cqi; display: grid; grid-template-columns: minmax(0, 1fr) 30cqi; grid-template-rows: 1fr auto; gap: 2.5cqi 4cqi; align-items: center; font-size: clamp(0.56rem, 1.75cqi, 0.8rem); }
.fx-xr-cam { grid-row: 1 / 3; align-self: center; padding: 1.6cqi; border-radius: 3.4cqi; background: #0b0c0f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 70px -30px rgba(0, 0, 0, 0.95); }
.fx-xr-bar { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 0.3em 0.4em 0.8em; font-weight: 800; }
.fx-xr-bar span { display: inline-flex; align-items: center; gap: 0.4em; }
.fx-xr-bar .ico { width: 1.2em; height: 1.2em; color: var(--sh-ice); }
.fx-xr-bar b { color: #5de3b0; }
.fx-xr-page {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqi; padding: 1.8cqi; border-radius: 1.6cqi;
  background: linear-gradient(150deg, #2a2d34, #17191d); transform: perspective(900px) rotateX(9deg) rotate(-1.5deg); transform-origin: 50% 60%;
}
.fx-xr-c { position: relative; display: block; border-radius: 4%; outline: 2px solid rgba(191, 232, 247, 0.9); outline-offset: 2px; box-shadow: 0 0 16px rgba(191, 232, 247, 0.35); }
.fx-xr-c img { display: block; width: 100%; height: auto; border-radius: 4.6% / 3.35%; }
.fx-xr-c em { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); padding: 0.1em 0.45em; border-radius: 5px; white-space: nowrap; font-style: normal; font-weight: 900; font-size: 0.9em; font-variant-numeric: tabular-nums; color: #101115; background: rgba(236, 248, 255, 0.95); }
.fx-xr-c.is-wish { outline-color: #ffe08a; box-shadow: 0 0 18px rgba(255, 224, 138, 0.5); }
.fx-xr-c i { position: absolute; right: -0.6em; top: -0.6em; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; color: #101115; background: #ffe08a; }
.fx-xr-c i .ico { width: 1.05em; height: 1.05em; }
.fx-xr-sum { display: flex; align-items: center; gap: 0.6em 1em; flex-wrap: wrap; padding: 1.1em 0.4em 0.2em; }
.fx-xr-sum > span:first-child { display: grid; margin-right: auto; }
.fx-xr-sum small { color: var(--muted); font-weight: 700; }
.fx-xr-sum b { font-size: 1.6em; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fx-xr-wish { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 800; color: #ffe08a; }
.fx-xr-add { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.45em 0.9em; border-radius: 999px; font-weight: 900; color: #101115; background: var(--sh-ice); }
.fx-xr-wish .ico, .fx-xr-add .ico { width: 1.05em; height: 1.05em; }
.fx-xr-note { grid-column: 2; margin: 0; color: var(--muted); line-height: 1.45; align-self: end; }
.fx-chips-xr { position: static; grid-column: 2; grid-row: 1; align-self: center; }

/* ---- play & show: Zoom and Collector DNA */
.fx-pl { position: absolute; inset: 0; padding: 5cqi; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 3cqi 4cqi; align-items: center; font-size: clamp(0.58rem, 1.8cqi, 0.82rem); }
.fx-zm { display: grid; gap: 1.2cqi; padding: 2.2cqi; border-radius: 3cqi; background: #181a1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 70px -34px rgba(0, 0, 0, 0.95); }
.fx-zm-k { display: flex; align-items: center; gap: 0.45em; margin: 0; font-weight: 900; }
.fx-zm-k small { margin-left: auto; font-weight: 700; color: var(--muted); }
.fx-zm-k .ico { width: 1.25em; height: 1.25em; }
.fx-zm-lens { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 2.4cqi; overflow: hidden; background: #0d0e11; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fx-zm-lens img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform-origin: 52% 30%; transform: scale(3.4); transition: transform 0.9s var(--ease); }
.fx-zm-lens[aria-pressed="true"] img { transform: translateY(-14%) scale(1); }
.fx-zm-lens:focus-visible { outline: 2px solid var(--sh-ice); outline-offset: 2px; }
.fx-zm-q { margin: 0; display: grid; font-weight: 800; }
.fx-zm-q > span { grid-area: 1 / 1; transition: opacity 0.3s; }
.fx-zm-q small { display: block; font-weight: 600; color: var(--muted); }
.fx-zm-ans { opacity: 0; }
.fx-zm-lens[aria-pressed="true"] ~ .fx-zm-q .fx-zm-ans { opacity: 1; }
.fx-zm-lens[aria-pressed="true"] ~ .fx-zm-q .fx-zm-ask { opacity: 0; }
.fx-zm-dots { display: flex; gap: 0.35em; }
.fx-zm-dots i { flex: 1; height: 0.3em; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.fx-zm-dots i.on { background: var(--sh-ice); }
.fx-dna { display: grid; gap: 0.7em; padding: 2.6cqi 2.8cqi; border-radius: 3cqi; background: linear-gradient(180deg, #1f2126, #18191d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 70px -34px rgba(0, 0, 0, 0.95); }
.fx-dna-k { display: flex; align-items: center; gap: 0.45em; margin: 0; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82em; color: var(--muted); }
.fx-dna-k .ico { width: 1.3em; height: 1.3em; }
.fx-dna-p { font-size: 1.75em; font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; }
.fx-dna-bar { display: flex; height: 1.1em; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.fx-dna-bar i { flex: var(--w) 0 0; background: var(--c); }
.fx-dna-leg { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; color: var(--ink-dim); font-weight: 700; font-size: 0.9em; }
.fx-dna-leg span { display: inline-flex; align-items: center; gap: 0.35em; }
.fx-dna-leg i { width: 0.7em; height: 0.7em; border-radius: 3px; background: var(--c); }
.fx-dna-s { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78em; color: var(--muted); }
.fx-dna-a { margin: -0.3em 0 0; padding-left: 1.3em; display: grid; gap: 0.15em; font-weight: 700; }
.fx-dna-foot { color: var(--muted); line-height: 1.4; }
.fx-chips-pl { position: static; grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; }
@media (max-width: 700px) {
  .fx-dv { left: 4%; right: 4%; width: auto; bottom: 4%; }
  .fx-dv-row:nth-child(n+4) { display: none; }
  .fx-tw { padding: 5cqi 4.5cqi 4cqi; }
  .fx-chips-tw { display: none; }
  .fx-ci-ring { width: 70cqi; height: 70cqi; margin: -35cqi 0 0 -35cqi; }
  .fx-ci-c { width: 19cqi; }
  .fx-xr { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 3cqi 4cqi; justify-items: center; }
  .fx-xr-cam { grid-row: auto; width: 72cqi; padding: 1.4cqi; }
  .fx-xr-page { gap: 1.1cqi; padding: 1.4cqi; }
  .fx-xr-sum { padding-top: 0.8em; gap: 0.4em 0.8em; }
  .fx-xr-sum b { font-size: 1.35em; }
  .fx-xr-note { display: none; }
  .fx-chips-xr { display: none; }
  .fx-pl { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); padding: 4cqi; gap: 3cqi; }
  .fx-chips-pl, .fx-dna-a, .fx-dna-s, .fx-dna-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-zm-lens img, .fx-zm-q > span { transition: none; } }

/* ============================================================= more shine ===
   A few more rainbow touches: the binder page's and the checklist's totals
   in foil lettering whose colours travel (a hue turn, on the compositor),
   the open question's rainbow edge, and a rainbow hairline over the footer. */
.sh-binder-total b, .sh-meter-cost b {
  display: inline-block; background: var(--sh-irid); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: sh-rbhue 9s linear infinite;
}
.sh-faq-list details { position: relative; }
.sh-faq-list details::before {
  content: ""; position: absolute; left: -0.9rem; top: 1rem; bottom: 1.1rem; width: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, #ff9fc4, #ffe08a 26%, #8fe9a6 50%, #9fe3f5 74%, #cec6f6);
  box-shadow: 0 0 10px rgba(255, 190, 230, 0.45); opacity: 0; transform: scaleY(0.4); transform-origin: 50% 0;
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
}
.sh-faq-list details[open]::before { opacity: 1; transform: none; }
@media (max-width: 720px) { .sh-faq-list details::before { left: -0.55rem; } }
.mkt-foot { position: relative; }
.mkt-foot::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: min(64rem, 86%); height: 1.5px; pointer-events: none;
  background: var(--sh-rainbow); opacity: 0.6; transform: translateX(-50%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  animation: sh-rbhue-centred 9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sh-binder-total b, .sh-meter-cost b, .mkt-foot::before { animation: none; }
  .sh-faq-list details::before { transition: none; }
}

/* ======================================================== even more shine ===
   A rainbow layer through the whole page:
     .sh-aurora    soft rainbow light pooled down the page, behind every
                   section (the banded sections turned translucent for it)
     .sh-progress  a rainbow bar along the top that fills as you scroll
                   (a scroll timeline: the compositor draws it)
   plus a rainbow hairline under the header, rainbow underlines on its links,
   foil section numbers, rainbow glyphs and rims on the feature lists, the
   explorer, the checklist, the binder pockets, the roadmap and the buttons,
   the hero search in a flowing rainbow rim, and rainbow light pooled under
   every screen. */
.sh-page { position: relative; isolation: isolate; }
.sh-aurora {
  position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(44rem 30rem at 6% 7%, rgba(255, 159, 196, 0.144), transparent 70%),
    radial-gradient(48rem 32rem at 96% 14%, rgba(159, 227, 245, 0.144), transparent 70%),
    radial-gradient(46rem 30rem at 4% 24%, rgba(206, 198, 246, 0.144), transparent 70%),
    radial-gradient(46rem 30rem at 94% 33%, rgba(255, 224, 138, 0.112), transparent 70%),
    radial-gradient(48rem 32rem at 8% 43%, rgba(143, 233, 166, 0.112), transparent 70%),
    radial-gradient(48rem 32rem at 92% 52%, rgba(255, 159, 196, 0.128), transparent 70%),
    radial-gradient(46rem 30rem at 6% 62%, rgba(159, 227, 245, 0.128), transparent 70%),
    radial-gradient(48rem 32rem at 94% 71%, rgba(206, 198, 246, 0.144), transparent 70%),
    radial-gradient(46rem 30rem at 8% 81%, rgba(255, 224, 138, 0.112), transparent 70%),
    radial-gradient(50rem 34rem at 90% 91%, rgba(143, 233, 166, 0.112), transparent 70%),
    radial-gradient(50rem 34rem at 30% 99%, rgba(255, 159, 196, 0.128), transparent 70%);
}
.sh-bind, .sh-carry { background: linear-gradient(180deg, transparent, rgba(29, 31, 36, 0.55) 50%, transparent); }

.sh-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .sh-progress {
    display: block; position: fixed; z-index: 70; left: 0; top: 0; width: 100%; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, #ff9fc4, #ffe08a 25%, #8fe9a6 50%, #9fe3f5 75%, #cec6f6);
    box-shadow: 0 0 12px rgba(255, 190, 230, 0.55); transform-origin: 0 50%; transform: scaleX(0);
    animation: sh-progress linear both; animation-timeline: scroll(root);
  }
  @keyframes sh-progress { to { transform: scaleX(1); } }
}

/* the header: a rainbow hairline, and rainbow underlines on its links */
.mkt-head { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent, rgba(255, 159, 196, 0.5) 15%, rgba(255, 224, 138, 0.45) 35%, rgba(143, 233, 166, 0.45) 55%, rgba(159, 227, 245, 0.5) 75%, rgba(206, 198, 246, 0.5) 90%, transparent);
  background-size: 100% 1px; background-position: left bottom; background-repeat: no-repeat; }
.mkt-head nav a:not(.btn) { position: relative; }
.mkt-head nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.3rem; height: 2px; border-radius: 2px; pointer-events: none;
  background: var(--sh-rainbow); transform: scaleX(0); transition: transform 0.3s var(--ease);
}
.mkt-head nav a:not(.btn):hover::after, .mkt-head nav a:not(.btn):focus-visible::after { transform: none; }

/* section numbers in foil */
.sh-no { background: linear-gradient(90deg, #dff3fb, #f2ccff 45%, #fff1b8 75%, #bfe9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sh-no i { -webkit-text-fill-color: transparent; }

/* feature lists: rainbow glyphs, foil terms, a rainbow edge on the row under the mouse */
.sh-feats > div { position: relative; }
.sh-feats > div::before {
  content: ""; position: absolute; left: -0.9rem; top: 0.95rem; bottom: 0.95rem; width: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, #ff9fc4, #ffe08a 26%, #8fe9a6 50%, #9fe3f5 74%, #cec6f6); box-shadow: 0 0 10px rgba(255, 190, 230, 0.5);
  opacity: 0; transform: scaleY(0.3); transition: opacity 0.25s, transform 0.35s var(--ease);
}
.sh-feats > div:hover::before { opacity: 1; transform: none; }
.sh-feats dt { background: linear-gradient(90deg, #ffffff, #dff3fb 40%, #f2ccff 75%, #fff1b8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }
.sh-feats-ico dt svg, .fx-item > .ico, .fx-tab-ico .ico, .rm-ico .ico, .rm-ico svg {
  --ico-stroke: url(#sh-ico-rb); --ico-fill: url(#sh-ico-rb); filter: drop-shadow(0 0 5px rgba(255, 190, 230, 0.35));
}
@media (max-width: 720px) { .sh-feats > div::before { left: -0.55rem; } }

/* the explorer's glyph squircles in a rainbow rim */
.fx-item > .ico { box-shadow: inset 0 0 0 1px rgba(255, 190, 230, 0.28), 0 0 18px -8px rgba(206, 198, 246, 0.6); background: linear-gradient(150deg, rgba(255, 159, 196, 0.1), rgba(159, 227, 245, 0.08) 50%, rgba(206, 198, 246, 0.12)); }

/* rainbow rims: the checklist's cards, the binder's pockets, the roadmap, the line buttons */
.rm-item, .sh-btn-line { position: relative; }
.rm-item::after, .sh-btn-line::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--sh-rainbow); opacity: 0.38; transition: opacity 0.3s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sh-btn-line { box-shadow: none; }
.sh-btn-line::after { opacity: 0.7; }
.sh-btn-line:hover::after, .rm-item:hover::after { opacity: 1; }
.sh-checklist { --ck-rim: linear-gradient(135deg, rgba(255, 159, 196, 0.7), rgba(255, 224, 138, 0.6), rgba(143, 233, 166, 0.6), rgba(159, 227, 245, 0.7), rgba(206, 198, 246, 0.7)); }
.sh-ck { box-shadow: none; border: 1px solid transparent; background: linear-gradient(#17191d, #17191d) padding-box, var(--ck-rim) border-box; }
.sh-pocket { box-shadow: inset 0 0 0 1px rgba(255, 190, 230, 0.2), 0 0 22px -12px rgba(206, 198, 246, 0.5); }

/* the hero search in a flowing rainbow rim */
.sh-search { box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.8), 0 0 40px -18px rgba(255, 190, 230, 0.35); }
.sh-search::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--sh-rainbow); opacity: 0.85;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sh-rbhue 9s linear infinite;
}

/* the hero's suggestion chips and the status chip in rainbow rims */
.sh-try a { position: relative; box-shadow: none; }
.sh-try a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--sh-rainbow); opacity: 0.55; transition: opacity 0.25s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sh-try a:hover { box-shadow: none; }
.sh-try a:hover::after { opacity: 1; }

/* headings in chrome: the plain words fade from white into ice and
   lavender, so the rainbow phrase in each still stands out against them */
.sh-h1, .sh-h2 {
  background-image: linear-gradient(180deg, #ffffff 15%, #d4ecff 62%, #ddd2ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* the lines are set tighter than the glyphs (0.9): padding lets the
     painted area reach the ascenders and descenders, the margin hands it back */
  padding-block: 0.12em 0.2em;
}
.sh-h1 { margin: calc(1rem - 0.12em) 0 calc(1.15rem - 0.2em); }
.sh-h2 { margin: calc(0.75rem - 0.12em) 0 calc(0.9rem - 0.2em); }
.fx h3, .fx-h, .rm-title, .rm-item-t, .sh-faq-list summary {
  background-image: linear-gradient(100deg, #ffffff, #d9efff 45%, #efd9ff 80%, #fff0cc);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* rainbow light pooled under every screen */
.sh-dev { position: relative; }
.sh-dev::before {
  content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: 1.2rem; height: 5rem; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side at 30% 50%, rgba(255, 159, 196, 0.35), transparent),
              radial-gradient(closest-side at 50% 50%, rgba(159, 227, 245, 0.35), transparent),
              radial-gradient(closest-side at 70% 50%, rgba(206, 198, 246, 0.35), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .sh-progress, .sh-search::after { animation: none; }
  .sh-feats > div::before, .mkt-head nav a:not(.btn)::after, .rm-item::after, .sh-btn-line::after { transition: none; }
}

/* ---- less to read (2026-09-26): the feature lists under the binder and
   the pocket phone are tags now, the explorer's tools are names only (the
   old one-liner is their tooltip) in two columns */
.sh-tags { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.sh-tags li {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem 0.55rem 0.8rem; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; color: var(--ink);
  background: rgba(211, 238, 248, 0.06);
}
.sh-tags li::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--sh-rainbow); opacity: 0.45;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sh-tags .ico { width: 18px; height: 18px; flex: none; }
.sh-tags-col { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.sh-tags-col li { font-size: 1.05rem; padding: 0.7rem 1.15rem 0.7rem 0.95rem; }
.sh-tags-col .ico { width: 20px; height: 20px; }
.fx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.6rem; margin-top: 1.3rem; }
.fx-item b { font-size: 0.93rem; }
@media (max-width: 720px) {
  .sh-tags li { font-size: 0.88rem; padding: 0.45rem 0.8rem 0.45rem 0.7rem; }
  .sh-tags-col li { font-size: 0.98rem; }
  .fx-list { grid-template-columns: minmax(0, 1fr); }
}