/* The landing page. Dark, like the tool: one canvas, one ink, one accent, and each world's own color
   only where that world is on stage. Motion is transform, opacity and clip-path only (and a dial's
   stroke, once). Nothing a visitor reads after the hero is under 13px, and the small print is never
   the dimmest grey. */

:root {
  --canvas: #05070f;
  --ground: #080b17;
  --surface: #0d1224;
  --shot: #030a18;                 /* the product's own background, behind its screenshots */
  --ink: #f2f4fb;
  --ink-soft: #aeb7d0;
  --ink-mute: #6b7594;             /* large or decorative text only: too dim for small print */
  --ink-note: #8c96b4;             /* small print: dates, footnotes, labels */
  --accent: #8ea2ff;
  --accent-ink: #060814;
  --line: rgba(160, 175, 255, .16);
  --edge: rgba(255, 255, 255, .1);
  --gain: #4ade80;                 /* green and red mean gains and losses, nothing else */
  --loss: #f87171;
  --warn: #fab219;                 /* something to check before buying */
  --world: 59, 130, 246;           /* the world whose pack was opened (landing.js sets it) */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --gutter: clamp(20px, 4vw, 56px);
  --display: "Barlow Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --text: "Barlow", "Segoe UI", system-ui, sans-serif;
  --nav-h: 68px;
  --wrap: 1280px;                  /* the widest the page's content gets */
  --top: var(--nav-h);             /* what is fixed to the top of the window: the nav, and at times a bar under it */
  --sec-pad: clamp(76px, 11vh, 136px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); scrollbar-gutter: stable; scrollbar-color: #2a3352 var(--canvas);
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--text); background: var(--canvas); color: var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* Grain: keeps the dark gradients from banding. */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
::selection { background: rgba(142, 162, 255, .35); color: #fff; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: .95; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--accent-ink);
  font-weight: 600; text-decoration: none; transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: 0 1.5rem;
  border: 1px solid transparent; border-radius: 14px; font: 600 1.0625rem/1 var(--text); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .14s var(--ease), background-color .14s, border-color .14s, box-shadow .2s var(--ease); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--ink); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 30px -14px rgba(142, 162, 255, .6); }
.btn--quiet { color: var(--ink); border-color: var(--line); background: rgba(255, 255, 255, .03); }
.btn--small { min-height: 44px; padding: 0 1rem; font-size: .9375rem; border-radius: 11px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 18px 36px -14px rgba(142, 162, 255, .85); }
  .btn--quiet:hover { border-color: rgba(160, 175, 255, .42); background: rgba(255, 255, 255, .06); }
  .btn:active { transform: scale(.97); }
}

/* ---------------------------------------------------------------- nav */
.wordmark { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font: 700 1.55rem/1 var(--display); letter-spacing: .005em; color: var(--ink); text-decoration: none; }
.wordmark em { font-style: normal; color: var(--accent); }
.wordmark-text { white-space: nowrap; }
/* The logo (assets/brand, from the logo pack): 48 px tall in the nav and the pack opening's head, 40 in the footer;
   its width from the picture (3:1). */
.wordmark-logo { display: block; width: auto; height: 48px; }
.foot .wordmark-logo { height: 40px; }
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h); display: flex; align-items: center; gap: 2rem; padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2));
  border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s, opacity .6s var(--ease), transform .6s var(--ease); }
.nav.is-stuck { background: rgba(5, 7, 15, .84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
html.arriving .nav { opacity: 0; transform: translateY(-14px); }
.nav-links { display: flex; gap: 1.75rem; margin-left: auto; }
.nav-links a, .nav-signin { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: .9375rem; transition: color .14s; }
.nav-links a:hover, .nav-signin:hover { color: var(--ink); }
.nav-links a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-short, .nav-links .nav-signin-m { display: none; }
.nav-actions { display: flex; align-items: center; gap: 1.2rem; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 20px) 0 48px; isolation: isolate; overflow: clip; }
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(52% 58% at 76% 48%, rgba(var(--world), .3), transparent 72%),
  radial-gradient(70% 60% at 10% -10%, #161e48 0%, transparent 70%),
  var(--canvas); }
.scene-glow { position: absolute; left: 76%; top: 50%; width: min(64vw, 820px); aspect-ratio: 1; margin: calc(min(64vw, 820px) / -2) 0 0 calc(min(64vw, 820px) / -2);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--world), .2), transparent 72%); opacity: .9; }
/* (still: it used to breathe, but nothing on the page moves at rest except the market tape) */
.scene-grid { position: absolute; left: -25%; right: -25%; bottom: -2%; height: 62%;
  background-image: linear-gradient(rgba(150, 170, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 170, 255, .14) 1px, transparent 1px);
  background-size: 72px 72px; transform: perspective(800px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%); mask-image: linear-gradient(to top, #000 0%, transparent 78%); }
/* Two more of the world's cards, out of focus, for depth. */
.scene-far { position: absolute; border-radius: 4.6% / 3.3%; opacity: 0; transition: opacity .8s var(--ease); }
.scene-far.is-in { opacity: var(--o); }
.scene-far--a { --o: .4; right: -3%; top: 5%; width: clamp(170px, 20vw, 320px); rotate: 17deg; filter: blur(7px) saturate(1.1);
  translate: calc(var(--mx, 0) * -26px) calc(var(--my, 0) * -18px + var(--hy, 0) * -140px); }
.scene-far--b { --o: .26; left: 44%; bottom: -16%; width: clamp(140px, 15vw, 240px); rotate: -13deg; filter: blur(11px) saturate(1.1);
  translate: calc(var(--mx, 0) * 34px) calc(var(--my, 0) * 22px + var(--hy, 0) * -220px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.hero-copy { translate: 0 calc(var(--hy, 0) * -50px); opacity: calc(1 - var(--hy, 0) * 1.25); }
.hero-title { font-size: clamp(3.3rem, 8.4vw, 8rem); font-weight: 800; line-height: .88; letter-spacing: -.018em; }
.hero-sub { margin-top: 1.5rem; max-width: 34ch; font-size: clamp(1.0625rem, 1.3vw, 1.3125rem); line-height: 1.5; color: var(--ink-soft); }
.hero-cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .85rem; }

/* The specimen: one real card under the scope, its numbers read out beside it. */
.specimen { margin: 0; justify-self: end; width: min(100%, 560px); translate: 0 calc(var(--hy, 0) * -110px); }
.specimen-stage { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); align-items: center; gap: clamp(26px, 3vw, 44px); perspective: 1100px; }
.specimen-card { position: relative; grid-column: 2; grid-row: 1; width: 100%; max-width: 330px; aspect-ratio: 718 / 1000; border-radius: 4.6% / 3.3%;
  transform: rotateX(calc(var(--ry, 3) * 1deg)) rotateY(calc(var(--rx, -13) * 1deg)); transition: transform .6s var(--ease);
  box-shadow: 0 50px 70px -34px rgba(0, 0, 0, .95), 0 0 90px -14px rgba(var(--world), .6); }
.specimen-card.is-held { transition-duration: .12s; }
.specimen-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--surface); }
.specimen-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.specimen-img.is-in { opacity: 1; }
.specimen-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(112deg, transparent 28%, rgba(255, 255, 255, .55) 46%, transparent 62%) calc(50% + var(--rx, -13) * 2.6%) 0 / 240% 100% no-repeat; }
/* The scan: a line of light down the card, once, as the numbers arrive. */
.specimen-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(to top, rgba(142, 162, 255, .95) 0 2px, rgba(142, 162, 255, .22) 2px, transparent 34%); }
.specimen.is-live .specimen-scan { animation: scan 1.25s .15s var(--ease) both; }
@keyframes scan { 0% { opacity: 0; transform: translateY(-100%); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(2%); } }
.specimen-corners i { position: absolute; width: 22px; height: 22px; border: 2px solid var(--accent); opacity: .85; }
.specimen-corners i:nth-child(1) { left: -11px; top: -11px; border-right: 0; border-bottom: 0; }
.specimen-corners i:nth-child(2) { right: -11px; top: -11px; border-left: 0; border-bottom: 0; }
.specimen-corners i:nth-child(3) { left: -11px; bottom: -11px; border-right: 0; border-top: 0; }
.specimen-corners i:nth-child(4) { right: -11px; bottom: -11px; border-left: 0; border-top: 0; }
.facts { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 3.2vh, 34px); text-align: right; }
.fact { position: relative; display: grid; gap: 3px; opacity: 0; transform: translateX(-12px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.specimen.is-live .fact { opacity: 1; transform: none; transition-delay: calc(var(--i) * 130ms + 650ms); }
/* The leader: a hairline from each number to the card. */
.fact::after { content: ""; position: absolute; left: calc(100% + 8px); top: 1.5rem; width: clamp(12px, 2vw, 28px); height: 1px;
  background: linear-gradient(90deg, rgba(142, 162, 255, .15), rgba(142, 162, 255, .9)); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease); }
.specimen.is-live .fact::after { transform: none; transition-delay: calc(var(--i) * 130ms + 850ms); }
.fact-k { font: 600 .75rem/1.2 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.fact-v { font: 700 clamp(1.9rem, 2.8vw, 2.7rem)/.95 var(--display); font-variant-numeric: tabular-nums; }
.fact--words .fact-v { font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.05; }
.fact-n { font-size: .8125rem; line-height: 1.25; color: var(--ink-soft); }
.specimen-cap { margin-top: clamp(18px, 3vh, 30px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1rem; font-size: .8125rem; color: var(--ink-note); }
.specimen-cap span:first-child { color: var(--ink-soft); }

/* ---------------------------------------------------------------- the market tape and the six games */
/* Under the hero, at the foot of the first screen on a laptop (the hero gives up the tape's height so it shows without
   a scroll; the games' row is the first thing a scroll brings): a tape of real cards and their 30-day moves, then the
   six games, still. The tape is the only thing on the page that moves at rest, and it is ONE layer slid by a transform
   animation, which the compositor runs on its own: no script, no style or layout work per frame, nothing repainted while
   it moves. Nothing on it filters, blends or blurs what is behind it; the edges fade under static overlays, not a mask.
   It stops off screen (.is-off, landing.js), under the pointer, while a key's focus is on a game, with the button
   (.is-paused) and under the pack opening; with reduced motion it stands still and scrolls by hand. */
:root { --tape-h: 80px; --games-h: 88px; --band: #070a16; }
@media (min-width: 761px) and (min-height: 700px) {
  html.has-tape .hero { min-height: calc(100svh - var(--tape-h)); }
}
.markets { position: relative; background: var(--band); border-block: 1px solid var(--line); }
.tape { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); height: var(--tape-h);
  padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); border-bottom: 1px solid var(--line); }
.tape-cap { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-content: center; column-gap: 16px; row-gap: 5px;
  padding-right: 22px; border-right: 1px solid var(--line); }
.tape-kicker { font: 700 .8125rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.tape-date { grid-row: 2; font-size: .8125rem; line-height: 1.2; color: var(--ink-note); white-space: nowrap; }
/* (beside the tape, one line each: when it was counted and the sales' last day, what the moves are, and a picture note;
    on a phone, above the tape, one paragraph with dots between) */
.tape-date > span:not(.tape-sep) { display: block; }
.tape-sep { display: none; }
.tape-pause { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, .03); color: var(--ink-soft); cursor: pointer; transition: color .14s, border-color .14s; }
.tape-pause:hover { color: var(--ink); border-color: rgba(160, 175, 255, .42); }
.tape-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tape-ico--play { fill: currentColor; stroke-width: 1.6; }
.tape-pause[aria-pressed="true"] .tape-ico--pause, .tape-pause:not([aria-pressed="true"]) .tape-ico--play { display: none; }
/* The window the tape slides through (and the one the games' row scrolls in, when it is wider than the screen), its
   edges faded by still overlays. */
.tape-view, .games-view { position: relative; min-width: 0; height: 100%; }
.tape-view::before, .tape-view::after, .games-view::before, .games-view::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 64px; pointer-events: none; }
.tape-view::before, .games-view::before { left: 0; background: linear-gradient(90deg, var(--band), rgba(7, 10, 22, 0)); }
.tape-view::after, .games-view::after { right: 0; background: linear-gradient(270deg, var(--band), rgba(7, 10, 22, 0)); }
.games-view::before { width: 24px; }
.tape-clip { height: 100%; overflow: hidden; }
/* The moving layer: the row twice, end to end, slid left by exactly one row (half its width), so it loops without a seam. */
.tape-track { display: flex; width: max-content; height: 100%; animation: tape-slide calc(var(--n, 28) * 3.4s) linear infinite; }
@keyframes tape-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* (paused, not stopped: it goes on from where it was. A key's focus on the button leaves it moving, so pressing the
    button visibly stops it) */
.tape.is-off .tape-track, .markets.is-paused .tape-track, .markets:has(.wd:focus-visible) .tape-track, html.gate-on .tape-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .tape-clip:hover .tape-track { animation-play-state: paused; }
}
/* The games' row stands still: the six side by side, in the middle of the band where they fit, and scrolled sideways by
   hand (a thin bar says so) where they don't. */
.games-clip { height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #2a3352 transparent; }
.games-track { display: flex; justify-content: center; width: max-content; min-width: 100%; height: 100%; padding-inline: 12px; }
.tape-run, .games-set { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
/* One card on the tape: its picture, its game's dot and short name, then what the price is, the price and the move
   (an arrow as well as the color, so the color is never the only sign). */
.tk { display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto; align-content: center; column-gap: 12px; row-gap: 5px;
  padding: 0 26px; border-left: 1px solid rgba(160, 175, 255, .09); color: var(--ink); text-decoration: none; }
.tk:hover { background: rgba(var(--w), .07); }
/* (square corners: a rounded corner on a picture is a clip, one more piece per picture for every frame of a scroll) */
.tk-pic { grid-row: 1 / span 2; display: block; width: 36px; height: 50px; object-fit: cover; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.tk-pic.is-missing { background: linear-gradient(160deg, rgba(var(--w), .3), #0a0e1e 75%); }
.tk-name { white-space: nowrap; font: 600 .9375rem/1.2 var(--text); }
.tk-name::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 1px;
  background: rgb(var(--w)); box-shadow: 0 0 0 3px rgba(var(--w), .18); }
.tk-nums { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.tk-basis { font: 500 .8125rem/1 var(--text); color: var(--ink-note); }
.tk-price, .tk-move { font: 700 1.1875rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tk-move i { margin-right: 3px; font-style: normal; font-size: .72em; vertical-align: .1em; }
.tk-move.is-up { color: var(--gain); }
.tk-move.is-down { color: var(--loss); }
/* A sales pace ("9.5× usual sales") is no price move: no arrow, no gain's color, in words. */
.tk-move.is-pace { color: var(--ink-soft); font: 600 .9375rem/1 var(--text); letter-spacing: 0; }
/* The six games: each one's emblem (ours, nobody's logo) and name in its own color, with its count on two lines. */
.games { position: relative; height: var(--games-h); }
.wd { display: flex; align-items: center; gap: 13px; height: 100%; padding: 0 clamp(16px, 1.7vw, 30px); color: rgb(var(--w)); text-decoration: none; }
.wd:focus-visible { outline-offset: -6px; border-radius: 14px; }
.wd-mark { flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--emblem, none) 50% 50% / 21px 21px no-repeat, radial-gradient(closest-side, rgba(var(--w), .22), rgba(var(--w), .05));
  box-shadow: inset 0 0 0 1.5px rgba(var(--w), .5); }
.wd-text { display: grid; gap: 5px; }
.wd-name { font: 800 1.9rem/.9 var(--display); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.wd-stat { font: 500 .8125rem/1.15 var(--text); color: var(--ink-soft); white-space: nowrap; }
.wd-stat > span { display: block; }
.wd:hover .wd-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* The games' own logos (CONFIG.gameLogos): 40px tall at most, each at its own width, the counts beside. */
.wd-logo { flex: none; display: block; width: auto; height: auto; max-height: 40px; max-width: 120px; object-fit: contain; transition: transform .16s var(--ease); }
.wd.has-logo:hover .wd-logo, .wd.has-logo:focus-visible .wd-logo { transform: scale(1.05); }
/* A game picked on the tape or the games row: its box in Six worlds lights up once as the page arrives at it. */
.world { scroll-margin-top: calc(var(--top) + 18px); }
.world::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2px rgba(var(--w), .95), inset 0 0 40px rgba(var(--w), .25); }
.world:target::after { animation: pointed 2.2s .35s var(--ease) both; }
@keyframes pointed { 0% { opacity: 0; } 18% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: .35; } }
@media (max-width: 760px) {
  :root { --tape-h: 70px; --games-h: 70px; }
  .tape { grid-template-columns: minmax(0, 1fr); height: auto; padding-left: 0; }
  .tape-cap { grid-template-columns: minmax(0, 1fr) auto; padding: 12px var(--gutter) 2px; border-right: 0; }
  .tape-date { white-space: normal; }
  .tape-date > span:not(.tape-sep), .tape-sep { display: inline; }
  .tape-pause { width: 44px; height: 44px; }
  .tape-view { height: var(--tape-h); }
  .tape-view::before { width: 20px; }
  .tape-view::after, .games-view::after { width: 36px; }
  /* (a phone's window is narrow: the tape goes slower, about 44px a second, so each card stays readable for longer) */
  .tape-track { animation-duration: calc(var(--n, 28) * 5.2s); }
  .tk { grid-template-columns: 32px auto; column-gap: 10px; padding: 0 18px; }
  .tk-pic { width: 32px; height: 45px; }
  .tk-name { font-size: .875rem; }
  .tk-price, .tk-move { font-size: 1.0625rem; }
  .tk-move.is-pace { font-size: .875rem; }
  .games-track { padding-inline: 4px; }
  .wd { gap: 11px; padding: 0 18px; }
  .wd-mark { width: 34px; height: 34px; background-size: 18px 18px, auto; }
  .wd-name { font-size: 1.45rem; }
  .wd-logo { max-height: 32px; max-width: 96px; }
}
/* Less motion: the tape stands still, one copy, and scrolls sideways by hand (a thin bar says it does; landing.js
   lets a key's focus onto it so the arrow keys scroll it too). */
@media (prefers-reduced-motion: reduce) {
  .tape-track { animation: none; }
  .tape-clip { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #2a3352 transparent; }
  .tape-clip:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
  .tape-view::before { width: 20px; }
  .tape-run + .tape-run { display: none; }
  .tape-pause { display: none; }
  .world:target::after { animation: none; opacity: .6; }
}

/* ---------------------------------------------------------------- the idea */
.statement { padding: clamp(110px, 18vh, 220px) 0 clamp(90px, 14vh, 170px); }
.statement-grid { display: grid; gap: clamp(28px, 5vh, 60px); }
.statement-title { font-size: clamp(2.5rem, 6.6vw, 6.2rem); line-height: .98; color: var(--ink-mute); }
.statement-title .line--now { color: var(--ink); }
/* Lines rise from behind a mask (with room for the descenders). */
.line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.js .line > span { display: inline-block; transform: translateY(108%); transition: transform .95s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .is-in .line > span { transform: none; }
.statement-body { justify-self: end; max-width: 44ch; font-size: clamp(1.125rem, 1.4vw, 1.3125rem); color: var(--ink-soft); }
.js [data-in] { opacity: 0; transform: translateY(16px); transition: opacity .62s var(--ease), transform .62s var(--ease); }
.js [data-in].is-in { opacity: 1; transform: none; }
/* The words, with the way on to the five lists under them. */
.statement-copy { justify-self: end; display: grid; justify-items: start; gap: .9rem; }
.statement-more { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 600; font-size: 1.0625rem; color: var(--accent);
  text-decoration: underline; text-decoration-color: rgba(142, 162, 255, .4); text-underline-offset: 5px; transition: color .14s, text-decoration-color .14s; }
.statement-more span { display: inline-block; transition: translate .2s var(--ease); }
/* (it is found by Tab before the reveal reaches the foot of the screen: focused, it shows at once) */
.js .statement-more:focus-visible { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .statement-more:hover { color: var(--ink); text-decoration-color: currentColor; }
  .statement-more:hover span { translate: 0 3px; }
}
/* The idea, shown (landing.js, claimScene): a real price chart, grey, then the card on top of Heating up in its game's
   color, an arrow between. As it comes into view the chart is drawn and steps back, and the card lights up. Beside the
   words on a wide screen, one panel over the other; under them on a tablet, side by side; on a phone, one over the other. */
.claim { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.claim-then, .claim-next { position: relative; display: flex; flex-direction: column; padding: 16px 18px 18px; border-radius: 18px; }
.claim-then { background: linear-gradient(165deg, rgba(26, 30, 46, .6), rgba(9, 11, 20, .92)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.claim-next { --w: var(--world); color: var(--ink); text-decoration: none; background: linear-gradient(165deg, rgba(24, 32, 66, .72), rgba(9, 12, 27, .95));
  box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 var(--edge), 0 50px 80px -60px #000; }
.claim-next::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(var(--w), .62), 0 26px 64px -30px rgba(var(--w), .8); opacity: 0; }
.claim-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.claim-k { font: 600 .8125rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-note); }
.claim-next .claim-k { color: var(--accent); }
.claim-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.claim-of { font-size: .875rem; color: var(--ink-note); }
.claim-chart { margin-top: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 100% 33.4%; }
.claim-plot { display: block; width: 100%; height: auto; overflow: visible; }
.claim-plot .claim-line { fill: none; stroke: #a3abc2; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.claim-plot .claim-area { fill: rgba(163, 171, 194, .1); }
.claim-plot .claim-dot { fill: #c9cfde; }
.claim-axis { display: flex; justify-content: space-between; gap: 1rem; margin-top: 7px; font-size: .8125rem; color: var(--ink-note); font-variant-numeric: tabular-nums; }
/* (each panel ends on its line: the chart's move, the card's place on the list; side by side, both sit at the foot) */
.claim-was { margin-top: auto; padding-top: 12px; font: 700 1.6rem/1 var(--display); letter-spacing: .005em; color: var(--ink-soft); }
.claim-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 18px; margin: 16px 0 14px; }
.claim-card .scope-corners i { width: 11px; height: 11px; }
.claim-card .scope-corners i:nth-child(1) { left: -6px; top: -6px; }
.claim-card .scope-corners i:nth-child(2) { right: -6px; top: -6px; }
.claim-card .scope-corners i:nth-child(3) { left: -6px; bottom: -6px; }
.claim-card .scope-corners i:nth-child(4) { right: -6px; bottom: -6px; }
.claim-name { display: block; font: 700 1.35rem/1.02 var(--display); }
.claim-card .meta { display: block; margin-top: .3rem; }
.claim-why { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin-top: .65rem; }
.claim-why b { font: 800 2.6rem/.9 var(--display); color: rgb(var(--w)); font-variant-numeric: tabular-nums; }
.claim-why span { font-size: .9375rem; color: var(--ink-soft); }
.claim-sold { margin-top: .35rem; font-size: .875rem; line-height: 1.4; color: var(--ink-soft); text-wrap: wrap; }
.claim-go { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(160, 175, 255, .1);
  font-weight: 600; font-size: .875rem; color: var(--accent); }
.claim-go i { font-style: normal; transition: translate .2s var(--ease); }
.claim-arrow { justify-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--accent);
  background: rgba(142, 162, 255, .08); box-shadow: inset 0 0 0 1px var(--line); }
.claim-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.claim-date { font-size: .8125rem; color: var(--ink-note); }
.claim-next:focus-visible { outline-offset: 4px; border-radius: 18px; }
/* (the arrival: the chart is drawn, the arrow comes on, then the chart steps back as the card lights up) */
.claim-plot { clip-path: inset(-6px); }
.js .claim:not(.is-in) .claim-plot { clip-path: inset(-6px 100% -6px -6px); }
.js .claim:not(.is-in) .claim-arrow { opacity: .15; transform: translateY(-6px); }
.js .claim:not(.is-in) .claim-next { opacity: .38; }
.claim-plot { transition: clip-path 1.1s var(--ease) .15s, opacity .8s var(--ease) 1.3s; }
.claim-was { transition: color .8s var(--ease) 1.3s; }
.claim-arrow { transition: opacity .45s var(--ease) 1s, transform .6s var(--ease) 1s; }
.claim-next { transition: opacity .7s var(--ease) 1.3s; }
.claim-next::after { transition: opacity .9s var(--ease) 1.4s; }
.claim.is-in .claim-plot { opacity: .5; }
.claim.is-in .claim-was { color: var(--ink-mute); }
.claim.is-in .claim-next::after { opacity: 1; }
.claim.is-in .claim-next .scope-scan { animation: scan 1.25s 1.5s var(--ease) both; }
@media (hover: hover) and (pointer: fine) {
  .claim-next { transition: opacity .7s var(--ease) 1.3s, translate .2s var(--ease); }
  .claim.is-in .claim-next:hover { translate: 0 -2px; }
  .claim-next:hover .claim-go i { translate: 3px 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* (shown as it ends: the chart already grey, the card already lit) */
  .claim-plot, .claim-was, .claim-arrow, .claim-next, .claim-next::after { transition: none; }
  .claim.is-in .claim-next .scope-scan { animation: none; }
}
@media (min-width: 761px) and (max-width: 999px) {
  .claim { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch; column-gap: 6px; row-gap: 12px; }
  .claim-arrow { align-self: center; rotate: -90deg; }
  .claim-date { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  /* Beside the four lines: the chart across from the two grey ones, the card across from the two bright ones, and the
     words under the lines. */
  /* (the figure can be the taller side: its extra height goes under the words, not between the lines and them) */
  .statement-grid { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(36px, 4vw, 72px); }
  .statement-title { grid-column: 1; grid-row: 1; }
  .claim { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; width: min(100%, 420px); }
  .statement-copy { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; }
}
@media (max-width: 760px) {
  .statement-copy { justify-self: start; }
  .claim-card { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
}

/* ================================================================ the sections after the hero
   One idea per section, with room around it. Each signal is drawn from the real rows in showcase.js
   (landing.js builds the scenes): big pictures, numbers a person can read, and what each one means. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* On the page, hidden means gone, whatever layout the thing has when shown. */
.page [hidden] { display: none !important; }
.sec { position: relative; isolation: isolate; padding: var(--sec-pad) 0; }
/* A jump from the nav lands with the section's first line clear of whatever is fixed to the top. */
.sec, .faq { scroll-margin-top: max(0px, calc(var(--top) + 20px - var(--sec-pad))); }
.sec-head { display: grid; gap: 1.15rem; max-width: 56rem; }
.sec-head--wide { max-width: 68rem; margin-bottom: clamp(36px, 6vh, 70px); }
.sec-head--wide .lede { max-width: 62ch; }
.sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.kicker { display: flex; align-items: center; gap: .8rem; margin: 0; font: 600 .8125rem/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.kicker b { padding: .34rem .52rem .28rem; border-radius: 7px; background: rgba(142, 162, 255, .16); color: var(--ink); font: 700 1.0625rem/1 var(--display); letter-spacing: .04em; }
.sec h2 { font-size: clamp(2.5rem, 5.2vw, 4.75rem); }
.nb { white-space: nowrap; }
.lede { max-width: 48ch; font-size: clamp(1.125rem, 1.4vw, 1.3125rem); line-height: 1.55; color: var(--ink-soft); }
.sec-head--center .lede { max-width: 44ch; }
.points-title { margin-top: 2.3rem; font: 600 .8125rem/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-note); }
.points { list-style: none; margin: 1.05rem 0 0; padding: 0; display: grid; gap: .95rem; max-width: 52ch; }
.points li { position: relative; padding-left: 1.55rem; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-soft); }
.points li::before { content: ""; position: absolute; left: 1px; top: .58em; width: 7px; height: 7px; border-radius: 1.5px; background: var(--accent); rotate: 45deg; }
.points b { font-weight: 600; color: var(--ink); }
.aside { margin-top: 1.7rem; max-width: 46ch; font-size: 1rem; color: var(--ink-note); }
.aside a { color: var(--accent); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- how it works */
.how { background: linear-gradient(180deg, transparent, var(--ground) 18% 82%, transparent); }
.steps { list-style: none; margin: clamp(40px, 7vh, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
/* Each step's number, name, words and exhibit sit on the same four lines across the row. */
.step { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; gap: .9rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
/* The line over the three steps is one line: it lights up as each step arrives. */
.step::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s var(--ease) .15s; }
.step.is-in::before { transform: none; }
.step-n { font: 700 1rem/1 var(--display); letter-spacing: .14em; color: var(--accent); }
.step h3 { font-size: clamp(2rem, 3.2vw, 2.9rem); }
.step > p { max-width: 36ch; color: var(--ink-soft); }
.exhibit { align-self: stretch; margin-top: .9rem; padding: 1.05rem 1.15rem; border-radius: 16px; background: linear-gradient(165deg, rgba(24, 32, 66, .62), rgba(9, 12, 27, .9)); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--edge); }
.exhibit[hidden] { display: none; }
.ex-label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-bottom: .75rem; font: 600 .8125rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-note); }
.ex-label .chip { letter-spacing: 0; text-transform: none; }
.ex-msg + .ex-label, .ex-say + .ex-label { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(160, 175, 255, .09); }
.ex-sale { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: .5rem 0; }
.ex-sale + .ex-sale { border-top: 1px solid rgba(160, 175, 255, .09); }
.ex-sale b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .9375rem; }
.ex-sale span { display: block; font-size: .8125rem; color: var(--ink-soft); }
.ex-sale strong { font: 700 1.25rem/1 var(--display); font-variant-numeric: tabular-nums; }
.ex-sum { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; }
.ex-sum p { font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.ex-sum p b { color: var(--ink); font-weight: 600; }
.ex-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(160, 175, 255, .09); font-size: .875rem; color: var(--ink-soft); }
.ex-eq b { font: 700 1.6rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ex-eq b.is-x { color: rgb(var(--w, var(--world))); }
.ex-say { font: 600 1.1875rem/1.35 var(--text); color: var(--ink); }
.ex-msg { font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.ex-msg b { display: block; color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- the numbers, with their date */
.band { padding: clamp(56px, 9vh, 110px) 0; border-block: 1px solid var(--line); background:
  radial-gradient(60% 120% at 50% 0%, rgba(var(--world), .12), transparent 70%), var(--ground); }
.band[hidden] { display: none; }
.band-grid { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 56px); }
.band-item[hidden] { display: none; }
.band-item dd { margin: 0; font: 800 clamp(2.9rem, 5.2vw, 4.6rem)/.9 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.band-item dt { margin-top: .7rem; max-width: 17ch; font-size: 1rem; line-height: 1.35; color: var(--ink-soft); }
.band-date { margin-top: clamp(26px, 4vh, 44px); font-size: .9375rem; color: var(--ink-note); }

/* ---------------------------------------------------------------- the signals: an opening, then one section each */
.signals { padding-bottom: clamp(30px, 5vh, 60px); }
.jump { margin-top: clamp(30px, 5vh, 52px); display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.jump a { display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; padding: 0 1.1rem 0 .7rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03);
  color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color .14s, background-color .14s, transform .14s var(--ease); }
.jump a span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(142, 162, 255, .16); font: 700 .9375rem/1 var(--display); color: var(--accent); }
.jump a:active { transform: scale(.97); }
.shown { max-width: 78ch; margin: 1.4rem auto 0; text-align: center; font-size: .9375rem; line-height: 1.55; color: var(--ink-note); }
/* Two of the world's cards, out of focus, drifting behind the opening as the hero's do (--sy: landing.js, each frame). */
.drift { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.drift-a { --o: .2; left: 2.5%; top: 14%; width: clamp(120px, 13vw, 210px); rotate: -14deg; filter: blur(8px) saturate(1.1); translate: 0 calc(var(--sy, 0) * -90px); }
.drift-b { --o: .15; right: 3.5%; bottom: 4%; width: clamp(110px, 12vw, 190px); rotate: 12deg; filter: blur(11px) saturate(1.1); translate: 0 calc(var(--sy, 0) * -150px); }
/* While the five pass: which signal is on screen, and a way to the others. A slim bar under the nav
   on a laptop; a rail of numbers in the margin where the screen has a margin to hold it. */
.rail5 { position: fixed; z-index: 39; inset: var(--nav-h) 0 auto 0; display: flex; justify-content: center; gap: .35rem; padding: 6px var(--gutter);
  background: rgba(5, 7, 15, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.rail5.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rail5 a { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; padding: 0 .8rem; border-radius: 999px; color: var(--ink-soft);
  font: 600 .875rem/1 var(--text); text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.rail5 a b { font: 700 .9375rem/1 var(--display); color: var(--accent); }
.rail5 a[aria-current] { background: rgba(142, 162, 255, .2); color: var(--ink); }
@media (min-width: 901px) and (max-width: 1439px) {
  /* (the bar is there only while the five signals pass: they keep their words and their landings clear of it) */
  .sig { --top: calc(var(--nav-h) + 45px); }
}
@media (min-width: 1440px) {
  .rail5 { inset: 50% auto auto max(14px, calc((100% - var(--wrap)) / 2 - 64px)); translate: 0 -50%; display: grid; gap: 8px; padding: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; transform: none; }
  .rail5 a { display: grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(5, 7, 15, .72); }
  .rail5 a b { font-size: .875rem; color: var(--ink-mute); }
  .rail5 a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rail5 a[aria-current] { border-color: transparent; background: var(--accent); }
  .rail5 a[aria-current] b { color: var(--accent-ink); }
}
/* The glow behind a section: the world's color, drifting a little against the scroll. */
.sig::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; translate: 0 calc(var(--sy, 0) * -56px);
  background: radial-gradient(42% 46% at 80% 42%, rgba(var(--world), .2), transparent 72%); }
.sig--flip::before { background: radial-gradient(42% 46% at 20% 46%, rgba(var(--world), .2), transparent 72%); }
.sig--wide::before { background: radial-gradient(56% 40% at 50% 64%, rgba(var(--world), .18), transparent 72%); }
.sig-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(32px, 5vw, 88px); }
.sig--flip .sig-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sig--flip .sig-copy { order: 2; }
/* The words stay beside the scene while it scrolls past. */
.sig-copy { position: sticky; top: calc(var(--top) + 36px); }
.sig-copy h2 { margin-top: 1.15rem; font-size: clamp(2.3rem, 4.1vw, 3.8rem); }
.sig-copy .lede { margin-top: 1.35rem; }
.sig-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(26px, 5vw, 88px); margin-bottom: clamp(36px, 6vh, 70px); }
.sig-split > :last-child { padding-top: 2.1rem; }
.sig-split h2 { margin-top: 1.15rem; font-size: clamp(2.3rem, 4.3vw, 4rem); }
.sig-split h2 + .lede { margin-top: 1.35rem; }
.sig-split .points-title { margin-top: .35rem; }
.sig-split .points { margin-top: 1.05rem; }

/* A scene: a panel drawn from real rows. --w is the color of the world its rows come from. */
.pn { --w: var(--world); position: relative; padding: clamp(20px, 2.5vw, 38px); border-radius: 22px; background: linear-gradient(165deg, rgba(24, 32, 66, .7), rgba(9, 12, 27, .95));
  box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 var(--edge), 0 70px 110px -70px #000; }
.pn + .pn { margin-top: clamp(16px, 2vw, 26px); }
.pn-top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin-bottom: 1.25rem; }
.pn-name { margin-right: .3rem; font: 700 1.55rem/1 var(--display); letter-spacing: .005em; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .7rem; border: 1px solid var(--line); border-radius: 999px; font: 500 .8125rem/1 var(--text); color: var(--ink-soft); white-space: nowrap; }
.chip--world { border-color: rgba(var(--w), .5); color: rgb(var(--w)); }
.chip--on { border-color: rgba(142, 162, 255, .5); background: rgba(142, 162, 255, .14); color: var(--ink); }
/* A red flag differs from the chips around it by shape as well as color: a faint fill and a warning sign. */
.chip--warn { border-color: rgba(250, 178, 25, .5); background: rgba(250, 178, 25, .12); color: var(--warn); white-space: normal; line-height: 1.3; }
.chip .ico { flex: none; width: 15px; height: 15px; margin: 0; stroke: currentColor; stroke-width: 2; }
.tabs { margin-left: auto; display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .04); }
.tabs button { min-height: 44px; padding: 0 .85rem; border: 0; border-radius: 10px; background: none; color: var(--ink-soft); font: 600 .875rem/1 var(--text); cursor: pointer; white-space: nowrap; transition: background-color .14s, color .14s; }
.tabs button[aria-pressed="true"] { background: rgba(142, 162, 255, .22); color: var(--ink); }
.pn-foot { margin-top: 1.3rem; max-width: 70ch; font-size: .9375rem; line-height: 1.55; color: var(--ink-note); }
.pn-foot b { color: var(--ink-soft); font-weight: 600; }
.pic { display: block; width: 100%; height: auto; aspect-ratio: 718 / 1000; object-fit: cover; border-radius: 4.6% / 3.3%; background: var(--surface);
  box-shadow: 0 12px 26px -14px #000, 0 0 0 1px rgba(255, 255, 255, .07); }
/* A picture that didn't arrive leaves a card back in the world's color, not a hole. */
.pic.is-missing { background: linear-gradient(160deg, rgba(var(--w, var(--world)), .26), #0a0e1e 70%); box-shadow: inset 0 0 0 1px var(--line), 0 12px 26px -14px #000; }
.pic.is-wide { object-fit: contain; background: #080b17; }
/* The hero's scope on a scene's lead card: brackets at its corners, and one line of light down it
   as the scene arrives. */
.scope { position: relative; }
.scope-clip { position: relative; overflow: hidden; border-radius: 4.6% / 3.3%; box-shadow: 0 16px 30px -14px #000, 0 0 46px -14px rgba(var(--w, var(--world)), .55); }
.scope-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(to top, rgba(142, 162, 255, .95) 0 2px, rgba(142, 162, 255, .22) 2px, transparent 34%); }
.js [data-anim].is-in .scope-scan { animation: scan 1.25s .3s var(--ease) both; }
.scope-corners i { position: absolute; width: 16px; height: 16px; border: 2px solid var(--accent); opacity: .85; }
.scope-corners i:nth-child(1) { left: -8px; top: -8px; border-right: 0; border-bottom: 0; }
.scope-corners i:nth-child(2) { right: -8px; top: -8px; border-left: 0; border-bottom: 0; }
.scope-corners i:nth-child(3) { left: -8px; bottom: -8px; border-right: 0; border-top: 0; }
.scope-corners i:nth-child(4) { right: -8px; bottom: -8px; border-left: 0; border-top: 0; }
.meta { font-size: .875rem; line-height: 1.35; color: var(--ink-soft); }
.tag { font: 600 .8125rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--w)); }
.up { color: var(--gain); }
.down { color: var(--loss); }

/* --- Heating up: the card on top drawn out, the next ones as rows */
.lead { display: grid; grid-template-columns: clamp(124px, 14vw, 190px) minmax(0, 1fr); align-items: start; gap: clamp(16px, 2.2vw, 30px); }
.lead > .scope { grid-row: 1 / span 2; }
.lead-head, .lead-more { grid-column: 2; min-width: 0; }
.split { margin-top: .9rem; font-size: .9375rem; color: var(--ink-soft); }
.lead h3 { margin-top: .55rem; font-size: clamp(1.6rem, 2.3vw, 2.15rem); line-height: 1; }
.lead .meta { margin-top: .4rem; }
.nums { display: flex; flex-wrap: wrap; gap: 1rem clamp(18px, 2.6vw, 42px); margin-top: 1.15rem; }
.num b { display: block; font: 700 clamp(2rem, 2.9vw, 2.8rem)/.95 var(--display); font-variant-numeric: tabular-nums; }
.num span { display: block; margin-top: .32rem; max-width: 13ch; font-size: .875rem; line-height: 1.3; color: var(--ink-soft); }
.num--x b { color: rgb(var(--w)); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 76px; margin-top: 1.25rem; padding-bottom: 1px; border-bottom: 1px solid var(--line); }
.bars i { flex: 1 1 0; min-width: 2px; height: calc(var(--v) * 100%); border-radius: 2px 2px 0 0; background: rgb(var(--w)); transform-origin: 50% 100%; }
.bars i.is-none { height: 3px; background: rgba(255, 255, 255, .13); }
.bars-cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-size: .8125rem; color: var(--ink-note); }
.lead-more > .ladder-title { margin: 1.35rem 0 0; }
.lead-more > .ladder-title + .bars { margin-top: .7rem; }
.rows { list-style: none; margin: 1.3rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1.5rem 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: .9rem 0; border-bottom: 1px solid rgba(160, 175, 255, .09); }
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row-n { text-align: center; font: 700 1.125rem/1 var(--display); color: var(--ink-mute); }
.row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; line-height: 1.3; }
.row .meta { margin-top: .15rem; }
.row-right { display: grid; justify-items: end; gap: 5px; text-align: right; }
.row-right b { font: 700 1.4rem/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-right span { font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; }
.row-right .x { padding: .3rem .6rem .24rem; border-radius: 8px; background: rgba(var(--w), .17); color: rgb(var(--w)); font-size: 1.3rem; }

/* --- Potential: one card's score taken apart, the next ones, and the record */
.pot { display: grid; grid-template-columns: clamp(170px, 19vw, 264px) minmax(0, 1fr); align-items: center; gap: clamp(22px, 3.6vw, 60px); }
.pot-card figcaption, .tile figcaption { margin-top: .85rem; }
.pot-card { margin: 0; }
.pot-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(18px, 2.4vw, 34px); }
.dial { position: relative; flex: none; width: 128px; height: 128px; }
.dial svg { display: block; width: 100%; height: 100%; rotate: -90deg; }
.dial circle { fill: none; stroke-width: 9; }
.dial .dial-track { stroke: rgba(255, 255, 255, .09); }
.dial .dial-fill { stroke: rgb(var(--w)); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: calc(327 * (1 - var(--v))); }
.dial b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 3.5rem/1 var(--display); font-variant-numeric: tabular-nums; }
.pot-say h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; }
.pot-say p { margin-top: .5rem; max-width: 40ch; color: var(--ink-soft); }
.parts { margin-top: clamp(20px, 2.6vw, 32px); display: grid; gap: 1.05rem; }
.part { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) 2.6rem; align-items: center; gap: 4px 18px; }
.part-name { font-weight: 600; }
.part-fact { grid-column: 1; font-size: .875rem; line-height: 1.35; color: var(--ink-soft); }
.part .meter { grid-column: 2; grid-row: 1 / span 2; }
.part-v { grid-column: 3; grid-row: 1 / span 2; text-align: right; font: 700 1.5rem/1 var(--display); font-variant-numeric: tabular-nums; }
.meter { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--w), .5), rgb(var(--w))); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.strip { margin-top: clamp(22px, 3vw, 38px); padding-top: clamp(18px, 2.4vw, 30px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 26px); }
.strip-title { grid-column: 1 / -1; font: 600 .8125rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-note); }
.tile { position: relative; margin: 0; }
.tile-badge { position: absolute; left: 8px; top: 8px; padding: .3rem .5rem .24rem; border-radius: 8px; background: rgba(5, 7, 15, .88); box-shadow: 0 0 0 1px rgba(var(--w), .65); font: 700 1rem/1 var(--display); }
.tile-name { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.record { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: clamp(24px, 4.4vw, 72px); }
.record h3 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.record-q { margin-top: .65rem; max-width: 40ch; font-size: 1.0625rem; color: var(--ink-soft); }
.duel { margin-top: 1.6rem; display: grid; gap: 1.3rem; }
.duel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .55rem 1rem; }
.duel-row span { font-weight: 600; }
.duel-row b { font: 800 clamp(2.4rem, 3.8vw, 3.5rem)/.85 var(--display); font-variant-numeric: tabular-nums; }
.duel-row .meter { grid-column: 1 / -1; height: 14px; }
.duel-row--all .meter i { background: rgba(255, 255, 255, .34); }
.duel-row--all b { color: var(--ink-soft); }
.record-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.record-facts li { display: grid; gap: .15rem; padding-left: 1.1rem; border-left: 2px solid rgba(142, 162, 255, .4); }
.record-facts b { font: 700 1.5rem/1.05 var(--display); }
.record-facts span { font-size: .9375rem; color: var(--ink-soft); }

/* --- Grade and flip: one card through the whole trip, then the next ones */
.flow { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 8px; }
.flow li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem .95rem .64rem; border-radius: 12px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.flow span { font-size: .9375rem; line-height: 1.3; color: var(--ink-soft); }
.flow b { font: 700 1.45rem/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ladder { margin-top: clamp(20px, 2.4vw, 30px); padding-top: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.ladder-title { margin-bottom: .2rem; font: 600 .8125rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-note); }
.rung { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr) 6.4rem; align-items: center; gap: 14px; min-height: 32px; }
.rung-g { font-weight: 600; white-space: nowrap; }
.rung-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rung-bar i { flex: none; width: calc(var(--v) * 82%); min-width: 3px; height: 20px; border-radius: 5px; background: var(--gain); transform-origin: 0 50%; }
.rung.is-loss .rung-bar i { background: var(--loss); }
.rung-bar span { font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; }
.rung-p { text-align: right; font: 700 1.35rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--gain); white-space: nowrap; }
.rung.is-loss .rung-p { color: var(--loss); }
.result { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem clamp(20px, 3vw, 48px); }
.result b { display: block; font: 800 clamp(2.5rem, 3.8vw, 3.5rem)/.85 var(--display); font-variant-numeric: tabular-nums; }
.result span { display: block; margin-top: .5rem; font-size: .9375rem; color: var(--ink-soft); }
.result div:not(:first-child) b { font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 700; }

/* --- Deals: each listing against the sales it is judged by */
.deal { display: grid; grid-template-columns: clamp(76px, 8vw, 104px) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 22px); padding: 1.15rem 0; border-bottom: 1px solid rgba(160, 175, 255, .1); }
.deal:first-of-type { padding-top: .2rem; }
.deal:last-of-type { border-bottom: 0; padding-bottom: .2rem; }
.deal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.deal-name { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; }
.deal-off { flex: none; padding: .34rem .6rem .3rem; border-radius: 8px; background: rgba(142, 162, 255, .17); color: var(--accent); font: 700 1.125rem/1 var(--display); white-space: nowrap; }
.gauge { position: relative; margin-top: .85rem; height: 12px; border-radius: 99px; overflow: hidden;
  background: repeating-linear-gradient(-55deg, rgba(142, 162, 255, .36) 0 4px, rgba(142, 162, 255, .1) 4px 8px); }
.gauge i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 99px 0 0 99px; background: #dfe4f3; transform-origin: 0 50%; }
.gauge-cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-size: .875rem; color: var(--ink-soft); }
.gauge-cap b { font: 700 1.3rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.gauge-cap span:last-child { text-align: right; }
.deal-sales { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-top: .75rem; font-size: .875rem; color: var(--ink-note); }
.deal-sales b { font: 700 1.125rem/1 var(--display); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-sales small { font: 400 .8125rem/1 var(--text); color: var(--ink-note); }
.deal-checks { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }

/* --- Spotlight: who is heating up, and their cards that have not moved */
.faces { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 10px; }
.face { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 78px; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255, 255, 255, .03); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .14s, background-color .14s; }
.face[aria-pressed="true"] { border-color: rgba(var(--w), .8); background: rgba(var(--w), .13); }
/* A card's art window, cropped to a circle: the face of the Pokémon or character. */
.face-pic { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.face-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; scale: 1.75; transform-origin: 50% 30%; }
.face b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.face span { display: block; margin-top: .15rem; font-size: .8125rem; line-height: 1.3; color: var(--ink-soft); }
.spot { margin-top: clamp(18px, 2.4vw, 30px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); align-items: start; gap: clamp(20px, 3.4vw, 56px); }
.spot-why h3 { margin-top: .6rem; font-size: clamp(2rem, 3.2vw, 3rem); }
.spot-why ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.spot-why li b { display: block; font: 700 1.9rem/1 var(--display); font-variant-numeric: tabular-nums; }
.spot-why li span { display: block; margin-top: .2rem; font-size: .9375rem; color: var(--ink-soft); }
.picks-title { margin-bottom: 1rem; font: 600 .8125rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-note); }
.picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.pick figcaption { margin-top: .85rem; }
.pick { margin: 0; }
.pick-price { display: block; margin-top: .35rem; font: 700 1.3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.pick-price small { font: 500 .8125rem/1 var(--text); color: var(--ink-soft); }
.reasons { list-style: none; margin: .65rem 0 0; padding: 0; display: grid; gap: .35rem; }
.reasons li { position: relative; padding-left: .95rem; font-size: .8125rem; line-height: 1.35; color: var(--ink-soft); }
.reasons li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--w)); }
.pick-move { display: block; margin-top: .3rem; font-weight: 600; font-size: .9375rem; }
/* A game on raw prices: its movers, and what it has and has not yet */
.raw-scene { margin-top: clamp(30px, 5vh, 56px); text-align: left; }
.rawbox { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; gap: clamp(22px, 3.6vw, 60px); }
.rawlists { display: grid; gap: 1.6rem; }
.has, .hasnt { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.has li, .hasnt li { position: relative; padding-left: 1.6rem; line-height: 1.45; color: var(--ink-soft); }
.has li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 10px; height: 5px; border-left: 2px solid rgb(var(--w)); border-bottom: 2px solid rgb(var(--w)); rotate: -45deg; }
.hasnt li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 10px; height: 2px; border-radius: 1px; background: var(--ink-mute); }

/* ---------------------------------------------------------------- insights: the briefing, the scorecard, the drivers */
.insights { background: linear-gradient(180deg, transparent, var(--ground) 14% 86%, transparent); }
.brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(16px, 2vw, 26px); }
.brief .pn + .pn { margin-top: 0; }
.finding { padding: .5rem 0 .6rem 1.25rem; border-left: 3px solid rgba(142, 162, 255, .5); }
.finding + .finding { margin-top: 1.9rem; }
.finding.is-up { border-left-color: var(--gain); }
.finding.is-down { border-left-color: var(--loss); }
.finding h3 { margin: 0; font: 600 1.3125rem/1.3 var(--text); letter-spacing: 0; text-wrap: pretty; }
.finding p { margin-top: .55rem; max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.proof { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.proof li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
.proof b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; font-size: .9375rem; line-height: 1.25; }
/* (a number is never cut short: it wraps) */
.proof span { display: block; margin-top: .3rem; font: 700 1.125rem/1.15 var(--display); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.proof span.up { color: var(--gain); }
.proof span.down { color: var(--loss); }
.score-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem 1.2rem; padding: 1rem 0; border-bottom: 1px solid rgba(160, 175, 255, .1); }
.score-row:first-of-type { padding-top: .2rem; }
.score-row:last-of-type { border-bottom: 0; }
.score-name b { display: block; font-weight: 600; font-size: 1.0625rem; }
.score-name span { display: block; margin-top: .2rem; font-size: .875rem; line-height: 1.4; color: var(--ink-soft); }
.score-nums { display: flex; align-items: baseline; gap: .7rem; }
.score-nums b { font: 700 1.7rem/1 var(--display); font-variant-numeric: tabular-nums; }
.score-nums span { font-size: .875rem; color: var(--ink-soft); white-space: nowrap; }
.verdict { justify-self: end; padding: .42rem .7rem; border: 1px solid var(--line); border-radius: 999px; font: 600 .8125rem/1 var(--text); color: var(--ink-soft); white-space: nowrap; }
.verdict.is-ahead { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.verdict.is-behind { border-color: rgba(250, 178, 25, .5); color: var(--warn); }
.drivers { grid-column: 1 / -1; }
.drv { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(22px, 4vw, 64px); }
.drv h3 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.drv p { margin-top: .7rem; max-width: 44ch; color: var(--ink-soft); }
.share-bar { display: flex; gap: 3px; height: 46px; }
.share-bar i { flex: var(--v) 1 0; min-width: 6px; border-radius: 6px; background: var(--accent); opacity: var(--o); transform-origin: 0 50%; }
.share-bar i:first-child { border-radius: 12px 6px 6px 12px; }
.share-bar i:last-child { border-radius: 6px 12px 12px 6px; }
.share-key { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; }
.share-key li { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 .5rem; }
.share-key b { font: 700 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.share-key span { font-size: .9375rem; color: var(--ink-soft); }
.share-key i { grid-column: 1 / -1; height: 3px; margin-bottom: .45rem; border-radius: 2px; background: var(--accent); opacity: var(--o); }
.drv p + p { margin-top: .9rem; }
.mults-title { margin-top: 1.6rem; font: 600 .8125rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-note); }
.mults { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* ---------------------------------------------------------------- one card, opened up */
.callouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.4rem; }
.callouts a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 46px; padding: .3rem .6rem .3rem .3rem; border-radius: 12px; color: var(--ink-soft); text-decoration: none; transition: background-color .2s, color .2s; }
.callouts li:is(.is-lit, .is-read) a { background: rgba(142, 162, 255, .12); color: var(--ink); }
.box { scroll-margin-top: calc(var(--top) + 18px); }
.callouts b, .box-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 1.0625rem/1 var(--display); }
.also { padding: 1.1rem 1.15rem 1.15rem; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.also-title { font: 600 .8125rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-note); }
.also ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .6rem; }
.also li { position: relative; padding-left: 1.15rem; font-size: .9375rem; line-height: 1.4; color: var(--ink-soft); }
.also li::before { content: ""; position: absolute; left: 1px; top: .52em; width: 6px; height: 6px; border-radius: 1.5px; background: var(--accent); rotate: 45deg; }
.also-note { margin-top: .9rem; font-size: .875rem; line-height: 1.45; color: var(--ink-note); }
.box { position: relative; min-width: 0; padding: clamp(16px, 1.7vw, 24px); border-radius: 16px; background: linear-gradient(165deg, rgba(22, 30, 62, .62), rgba(10, 14, 30, .92)); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease); }
.box.is-lit { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 44px -12px rgba(142, 162, 255, .6); }
.box-head { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: .3rem 12px; margin-bottom: 1.1rem; }
.box-head h4 { margin: 0; font: 700 1.35rem/1.05 var(--display); letter-spacing: 0; }
.box-head p { grid-column: 2; font-size: .875rem; line-height: 1.45; color: var(--ink-soft); }
.box-note { margin-top: .9rem; font-size: .875rem; line-height: 1.5; color: var(--ink-note); }
.box-note b { font-weight: 600; color: var(--ink-soft); }
/* A multiplier: to the right of the middle line it lifts the price, to the left it lowers it. */
.mult { position: relative; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .07); }
.mult::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: rgba(255, 255, 255, .3); }
.mult i { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--v) * 50%); border-radius: 0 99px 99px 0; background: rgb(var(--w)); transform-origin: 0 50%; }
.mult.is-low i { left: auto; right: 50%; border-radius: 99px 0 0 99px; background: rgba(255, 255, 255, .42); transform-origin: 100% 50%; }
/* The card window as members see it: the binder, in the app's own materials (assets/binder: the rings, from the app's
   renders), its charcoal leather and stitching drawn here, on the page's own dark ground with a glow of the world's
   colour behind it (no desk: the owner, 2026-10-19). The card in its holder on the left page with the buy box beside
   it, the rings, and the right page with its four tabs over a window its pages go by in (the window's "One list"). It
   holds one screen while the page scrolls through its story (landing.js, binderStory): the closed cover swings open,
   the pages go by, then it lets go. Under 1100px it is one page, the tabs on top, then the card with the buy box under
   it and the pages, as on a phone. Its words and colours are the window's (the world colour, Pokémon's blue; red and
   green only for losses and gains); the six numbered notes are the page's own, in its accent. */
.bw { --w: 64, 166, 255; --pg: #171c24; --pg2: #141920; --bw-ink: #eef2f7; --bw-ink2: #b9c2d0; --bw-line: rgba(255, 255, 255, .1); --bw-pad: clamp(18px, 2.2vw, 34px);
  --spine: clamp(32px, 2.8vw, 40px);
  --leather: radial-gradient(120% 50% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23l)'/></svg>"), #1d1f23;
  position: relative; display: flex; flex-direction: column; height: clamp(300px, calc(100vh - var(--top) - 40px), 940px); height: clamp(300px, calc(100svh - var(--top) - 40px), 940px);
  padding: clamp(10px, 2vh, 22px) 0 clamp(14px, 2.6vh, 30px); color: var(--bw-ink); scroll-margin-top: calc(var(--top) + 8px); }
/* (the world's glow behind the binder, held with it; never wider than the binder, or a phone could scroll sideways) */
.bw::before { content: ""; position: absolute; z-index: -1; inset: -6% 0; pointer-events: none;
  background: radial-gradient(52% 46% at 50% 56%, rgba(var(--world), .17), transparent 72%), radial-gradient(30% 26% at 50% 60%, rgba(var(--w), .08), transparent 70%); }
.bw .ico { width: 18px; height: 18px; margin: 0; flex: none; stroke: currentColor; stroke-width: 1.8; }
/* the desk: the card's name, and the window's View and Close (drawn, not working) */
.bw-head { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 2px 6px clamp(10px, 1.8vh, 18px); }
.bw-head h3 { font: 700 clamp(1.7rem, 2.4vw, 2.25rem)/1 var(--display); letter-spacing: 0; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.bw-meta { margin-top: .5rem; font: 600 .9375rem/1.3 var(--text); color: var(--bw-ink); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.bw-dot { display: inline-block; width: 8px; height: 8px; margin-right: .55rem; border-radius: 50%; background: rgb(var(--w)); vertical-align: 1px; }
.bw-acts { display: flex; flex: none; gap: 10px; }
.bw-btn, .bw-bb, .bw-tab { border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0, rgba(255, 255, 255, .045) 1.5px, rgba(255, 255, 255, .02) 45%, rgba(0, 0, 0, .14) 100%), #232a37;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 1px 0 rgba(0, 0, 0, .4), 0 8px 14px -9px rgba(0, 0, 0, .85); }
.bw-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 11px; font: 600 1rem/1 var(--text); color: var(--bw-ink); }
/* the binder: leather with its stitching, two pages and the rings between them, filling the screen's height under
   the card's name (.bw-bind: the binder and its cover, under one perspective; at most 1000px tall, in the middle) */
.bw-desk { position: relative; flex: 1 1 auto; min-height: 0; display: grid; align-items: center; }
.bw-bind { position: relative; height: min(100%, 1000px); perspective: 2800px; perspective-origin: 50% 46%; }
.bw-book { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--spine) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  padding: 18px 16px 28px; border-radius: 14px; background: var(--leather); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(0, 0, 0, .7); }
/* (its shadow on the ground and its bottom edge, under it: the book itself has a window cut in it, landing.js) */
.bw-bind::before { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; box-shadow: 0 4px 0 #101215, 0 34px 50px -26px rgba(0, 0, 0, .95); }
/* (each in its own column: while the cover opens, the card is on its inside, not in the first) */
.bw-book > .bw-left { grid-column: 1; } .bw-book > .bw-spine { grid-column: 2; } .bw-book > .bw-right { grid-column: 3; }
.bw-book::before { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(225, 230, 238, .2); border-radius: 10px; pointer-events: none; }
.bw-left, .bw-right { position: relative; z-index: 1; min-width: 0; min-height: 0; background: linear-gradient(180deg, var(--pg), var(--pg2)); }
/* (the page edges under each page, and its curl into the rings) */
.bw-left { display: grid; align-content: center; padding: clamp(14px, 2.4vh, 28px) clamp(14px, 1.5vw, 22px) clamp(16px, 2.6vh, 30px) clamp(16px, 1.8vw, 26px); border-radius: 8px 3px 3px 8px;
  box-shadow: inset -28px 0 28px -24px rgba(0, 0, 0, .8), 0 2px 0 #29303a, 0 4px 0 #1a1f26, 0 6px 0 #252b34, 0 8px 0 #171b21, 0 12px 14px -6px rgba(0, 0, 0, .7); }
.bw-right { display: flex; flex-direction: column; padding: 0; border-radius: 3px 8px 8px 3px; background: var(--pg);
  box-shadow: inset 28px 0 28px -24px rgba(0, 0, 0, .8), 0 2px 0 #29303a, 0 4px 0 #1a1f26, 0 6px 0 #252b34, 0 8px 0 #171b21, 0 12px 14px -6px rgba(0, 0, 0, .7); }
.bw-spine { position: relative; z-index: 2; background: linear-gradient(90deg, #07080a, #191c20 30%, #262a30 50%, #191c20 70%, #07080a); }
.bw-spine::before { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 10px; margin-left: -5px; border-radius: 4px;
  background: linear-gradient(90deg, #121417, #5c626b 40%, #2a2d32 62%, #0e0f12); box-shadow: 0 0 6px rgba(0, 0, 0, .8); }
/* (the rings, at the middle of the spine, over both pages: in .bw-bind, so over the cover's inside too) */
.bw-rings { position: absolute; z-index: 7; left: 50%; top: calc(50% - 5px); display: block; width: clamp(84px, 7.4vw, 108px); max-height: calc((100% - 46px) * .88); aspect-ratio: 122 / 346;
  translate: -50% -50%; pointer-events: none; background: url("assets/binder/rings.webp") 50% 50% / contain no-repeat; }
/* the left page: the card in its holder, the buy box beside it, in the middle of the page (the card as tall as the
   page lets it be: the page is a size container, landing.css's media rules below) */
.bw-stick { display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 12.4vw, 186px); align-items: center; gap: clamp(12px, 1.4vw, 22px); }
.bw-pocket { position: relative; justify-self: center; width: 100%; margin: 0; padding: clamp(9px, .9vw, 14px); border-radius: 10px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 38%, rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .24), 0 18px 30px -16px rgba(0, 0, 0, .9); }
/* (the holder's four photo corners) */
.bw-pocket::before, .bw-pocket::after, .bw-sleeve::before, .bw-sleeve::after { content: ""; position: absolute; z-index: 2; width: 30px; height: 30px; pointer-events: none;
  background: linear-gradient(135deg, rgba(196, 204, 216, .34), rgba(30, 36, 46, .82) 60%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.bw-pocket::before { left: 3px; top: 3px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bw-pocket::after { right: 3px; top: 3px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bw-sleeve { position: relative; }
.bw-sleeve::before { left: calc(clamp(9px, .9vw, 14px) * -1 + 3px); bottom: calc(clamp(9px, .9vw, 14px) * -1 + 3px); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.bw-sleeve::after { right: calc(clamp(9px, .9vw, 14px) * -1 + 3px); bottom: calc(clamp(9px, .9vw, 14px) * -1 + 3px); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.bw-sleeve .pic { box-shadow: 0 10px 22px -12px #000; }
.bw-photos { position: absolute; z-index: 3; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 999px;
  background: rgba(9, 12, 17, .84); font: 600 .875rem/1 var(--text); color: #fff; }
.bw-photos .ico { width: 15px; height: 15px; }
/* the buy box: Buy on eBay the one solid button, in the world colour; no eBay logo */
.bw-buy { display: grid; gap: 10px; }
.bw-bb { position: relative; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 26px 10px 12px; border-radius: 12px; color: var(--bw-ink); }
.bw-bb.is-shop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px 8px; padding: 12px; border: 0; color: #06101c;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, .1) 1.5px, rgba(255, 255, 255, .05) 46%, rgba(0, 0, 0, .05) 100%), rgb(var(--w));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 8px 22px -8px rgba(var(--w), .9), 0 2px 0 rgba(0, 0, 0, .3); }
.bw-bb.is-shop .bw-txt { grid-column: 1 / -1; }
.bw-bb.is-shop .bw-x { grid-row: 1; grid-column: 3; }
.bw-bb.is-none { border: 1.5px solid rgba(var(--w), .8); color: var(--bw-ink); background: #1b2230; box-shadow: none; }
.bw-ic { display: grid; place-items: center; flex: none; color: #8fc8ff; }
.is-shop .bw-ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 0, 0, .14); color: inherit; }
.bw-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bw-txt b { font: 700 1.0625rem/1.1 var(--text); }
.bw-l2 { display: flex; flex-direction: column; gap: 2px; font: 500 .9375rem/1.25 var(--text); }
.bw-l2.is-short { display: none; }
.bw-bb .bw-x { position: absolute; top: 9px; right: 9px; display: grid; opacity: .85; }
.bw-bb.is-shop .bw-x { position: static; }
.bw-x .ico { width: 13px; height: 13px; }
/* the right page: its tabs at the top (the lit one is the page in view), and under them the window its pages go by in */
.bw-tabs { position: relative; z-index: 4; flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
  padding: 12px 8px 8px; border-radius: 3px 8px 0 0; background: var(--pg); box-shadow: 0 1px 0 var(--bw-line); }
.bw-view { position: relative; flex: 1 1 auto; min-height: 0; }
.bw-flow { position: relative; padding: 0 var(--bw-pad) 34px; }
/* (the cover's shade on the right page; drawn only while it opens) */
.bw-shade { position: absolute; z-index: 5; top: 18px; bottom: 28px; left: calc(50% + var(--spine) / 2); right: 16px; pointer-events: none; opacity: 0; border-radius: 3px 8px 8px 3px;
  background: linear-gradient(90deg, rgba(4, 5, 7, .92), rgba(4, 5, 7, .6) 40%, rgba(4, 5, 7, .42)); }
.bw-tab { display: grid; place-items: center; height: 44px; border-radius: 9px 9px 2px 2px; font: 600 1rem/1 var(--text); color: var(--bw-ink); text-decoration: none;
  transition: transform .14s var(--ease), filter .14s; }
.bw-tab[aria-current="true"] { transform: translateY(-3px); border-color: transparent; color: #06101c;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .18) 1.5px, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .03) 100%), rgb(var(--w));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 16px -3px rgba(var(--w), .7); }
@media (hover: hover) and (pointer: fine) { .bw-tab:not([aria-current="true"]):hover { filter: brightness(1.3); } }
.bw-page { position: relative; padding-top: 20px; }
.bw-page + .bw-page { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--bw-line); }
.bw-page + .bw-page::before { content: ""; position: absolute; left: 0; top: -2px; width: 36px; height: 3px; border-radius: 2px; background: rgb(var(--w)); }
.bw-ph { margin: 0 0 .9rem; font: 600 clamp(1.5rem, 1.9vw, 1.8rem)/1.1 var(--text); letter-spacing: 0; color: #fff; }
.bw-ph + .bw-sub { margin-top: -.5rem; }
/* the six numbered parts: the window's own, each with the page's note on top of it */
.bw .box { padding: 0; border-radius: 12px; background: none; box-shadow: none; transition: background-color .3s, box-shadow .3s var(--ease); }
.bw .box + .box { margin-top: 30px; }
.bw .box:is(.is-lit, .is-read) { background: rgba(142, 162, 255, .05); box-shadow: 0 0 0 12px rgba(142, 162, 255, .05), 0 0 0 13.5px rgba(142, 162, 255, .7); }
/* (lit by the scroll as it passes the reading line: a quieter ring than a pointer's) */
.bw .box.is-read:not(.is-lit) { box-shadow: 0 0 0 12px rgba(142, 162, 255, .04), 0 0 0 13.5px rgba(142, 162, 255, .42); }
.bw .box-head { margin: 0 0 16px; padding: 10px 14px 11px 10px; border-radius: 12px; background: rgba(142, 162, 255, .1); box-shadow: inset 0 0 0 1px rgba(142, 162, 255, .32); }
.bw .box-head h4 { color: var(--ink); }
/* the window's words */
.bw-lbl { font: 600 .9375rem/1.3 var(--text); color: var(--bw-ink2); }
.bw-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .6rem; }
.bw-h h5 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; font: 600 1.375rem/1.15 var(--text); letter-spacing: 0; color: #fff; }
.bw-ref { font: 600 .9375rem/1.3 var(--text); color: var(--bw-ink); }
.bw-sub { margin: 0 0 1rem; font: 500 1rem/1.45 var(--text); color: var(--bw-ink); }
.bw-sub b, .bw-q .qa b, .bw-note b { font-weight: 700; color: #fff; }
.bw-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font: 600 .875rem/1.2 var(--text); color: #9ccfff; white-space: nowrap;
  background: rgba(var(--w), .12); box-shadow: inset 0 0 0 1px rgba(var(--w), .5); vertical-align: 1px; }
.bw-tag .ico { width: 13px; height: 13px; }
.bw .k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 600 .9375rem/1.2 var(--text); color: var(--bw-ink2); }
.bw .v { margin-top: .45rem; font: 700 clamp(1.8rem, 2.3vw, 2.2rem)/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.bw .v small { margin-left: .15em; font: 600 .5em/1 var(--text); color: var(--bw-ink2); }
.bw .v.is-words { font: 600 1.375rem/1.15 var(--text); }
.bw .v.up { color: var(--gain); }
.bw .v.down { color: var(--loss); }
.bw .v.up small, .bw .v.down small { color: inherit; }
.bw .f { margin-top: .45rem; font: 500 .9375rem/1.35 var(--text); color: var(--bw-ink2); }
.bw b.up { color: var(--gain); }
.bw b.down { color: var(--loss); }
/* 1, Overview: the price, its line, the other grades and four plain answers */
.bw-lead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 10px 28px; padding-bottom: 22px; border-bottom: 1px solid var(--bw-line); }
.bw-big { display: flex; align-items: flex-start; gap: 4px; margin: .3rem 0 .4rem; font: 700 clamp(3.4rem, 4.6vw, 4.5rem)/.95 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.bw-big span { margin-top: .22em; font-size: .4em; }
.bw-note { font: 500 1rem/1.3 var(--text); color: var(--bw-ink); }
.bw-spark { position: relative; height: 64px; margin-bottom: 30px; }
.bw-spark svg, .bw-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bw .bw-line { fill: none; stroke: rgb(var(--w)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bw .bw-area { stroke: none; fill: rgba(var(--w), .16); }
.bw-spark i { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; }
.bw-spark i.is-end { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: rgb(var(--w)); box-shadow: 0 0 0 3px rgba(var(--w), .25); }
.bw-grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--bw-line); }
.bw-grades > div { padding: 18px 12px 22px 0; }
.bw-grades > div + div, .bw-tiles > div + div, .bw-yards > div + div { padding-left: 20px; border-left: 1px solid var(--bw-line); }
.bw-qs { margin-top: 4px; }
.bw-q { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--bw-line); font: 500 1.0625rem/1.45 var(--text); }
.bw-q .qq { font-weight: 600; color: var(--bw-ink2); }
.bw-q .qa { color: #fff; }
/* 3, Sales: the grade switch, the price line with its sales, and the sales one by one */
.bw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0 12px; }
.bw-switch { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17); }
.bw-switch span { padding: 8px 13px; border-radius: 7px; font: 600 .9375rem/1 var(--text); color: var(--bw-ink); white-space: nowrap; }
.bw-switch span.is-on { background: #1d3550; box-shadow: inset 0 0 0 1px rgba(var(--w), .6); color: #fff; }
.bw-switch small { margin-left: 6px; font: 600 .875rem/1 var(--text); color: var(--bw-ink2); }
.bw-link { font: 600 .9375rem/1 var(--text); color: #8fc8ff; text-decoration: underline; text-underline-offset: 3px; }
.bw-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 12px; font: 600 .9375rem/1 var(--text); color: var(--bw-ink); }
.bw-legend span { display: inline-flex; align-items: center; gap: 8px; }
.bw-key-line { width: 18px; height: 3px; border-radius: 2px; background: rgb(var(--w)); }
.bw-key-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.bw-chart { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 150px auto; column-gap: 10px; margin: 18px 0 14px; }
.bw-ys { display: flex; flex-direction: column; justify-content: space-between; margin: -7px 0; font: 500 .875rem/1 var(--text); color: var(--bw-ink2); text-align: right; }
.bw-plot { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.bw-grid { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .07); }
.bw-dot2 { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--pg); }
.bw-cnote { position: absolute; white-space: nowrap; transform: translate(-50%, calc(-100% - 9px)); font: 600 .875rem/1 var(--text); color: #fff; text-shadow: 0 1px 4px var(--pg); }
.bw-cnote.is-below { transform: translate(-50%, 10px); }
.bw-endtag { position: absolute; right: 0; padding: 4px 7px; border-radius: 4px; transform: translateY(calc(-100% - 10px)); background: rgb(var(--w)); font: 700 .875rem/1 var(--text); color: #06101c; }
.bw-xs { grid-column: 2; position: relative; height: 24px; font: 500 .875rem/1 var(--text); color: var(--bw-ink2); }
.bw-xs span { position: absolute; top: 8px; transform: translateX(-50%); }
.bw-subh { display: flex; justify-content: space-between; gap: 1rem; padding: 12px 0 10px; border-bottom: 1px solid var(--bw-line); font: 600 .9375rem/1.2 var(--text); color: var(--bw-ink); }
.bw-subh span + span { color: var(--bw-ink2); }
.bw-sale { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr) auto 16px; align-items: start; gap: 4px 16px; padding: 13px 0; border-bottom: 1px solid var(--bw-line); }
.bw-sale > div:first-child b { display: block; font: 700 1rem/1.2 var(--text); color: #fff; }
.bw-sale > div:first-child span { display: block; margin-top: 3px; font: 500 .9375rem/1.3 var(--text); color: var(--bw-ink2); }
.bw-sale p { font: 500 1rem/1.4 var(--text); color: var(--bw-ink); overflow-wrap: anywhere; }
.bw-sale-p { text-align: right; }
.bw-sale-p b { font: 700 1.25rem/1.1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.bw-sale-p small { display: block; margin-top: 2px; font: 500 .875rem/1.2 var(--text); color: var(--bw-ink2); }
.bw-out { display: grid; padding-top: 3px; color: #8fc8ff; }
.bw-out .ico { width: 14px; height: 14px; }
.bw .box-note { margin-top: 14px; color: var(--ink-soft); }
/* 2, 6, 4 and 5: Grading's four */
.bw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 12px; border-top: 1px solid var(--bw-line); border-bottom: 1px solid var(--bw-line); }
.bw-tiles > div { min-width: 0; padding: 16px 12px 18px 0; }
.bw-tiles.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bw-stamp { padding: 3px 7px; border-radius: 4px; font: 700 .8125rem/1.1 var(--text); letter-spacing: .06em; color: #9ccfff; background: rgba(var(--w), .18); }
.bw-spread { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(4px, .6vw, 8px); height: 190px; margin: 6px 0 4px; }
.bw-spread > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.bw-spread b { font: 600 .875rem/1 var(--text); color: var(--bw-ink); font-variant-numeric: tabular-nums; }
.bw-spread i { width: 100%; height: calc(var(--v) * 134px); border-radius: 3px 3px 0 0; background: #4a5262; transform-origin: 50% 100%; }
.bw-spread .is-ten i { background: rgb(var(--w)); }
.bw-spread span { width: 100%; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; font: 600 .875rem/1 var(--text); color: var(--bw-ink); }
.bw-form { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px 18px; margin: 4px 0 16px; }
.bw-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; }
.bw-input, .bw-select { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 6px; background: #0f141b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font: 600 1rem/1.2 var(--text); color: #fff; }
.bw-input { min-width: 7.5rem; }
.bw-input i { font-style: normal; color: var(--bw-ink2); }
.bw-select { justify-content: space-between; margin-top: 8px; }
.bw-select::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 4px 0 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; }
.bw-mkt, .bw-hint { font: 500 .875rem/1.35 var(--text); color: var(--bw-ink2); }
.bw-hint { margin-top: 6px; }
.bw-up { margin: 4px 0 4px; font: 500 .9375rem/1.45 var(--text); color: var(--bw-ink); }
.bw-flip { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bw-flip th { padding: 10px 6px 8px; text-align: right; font: 600 .9375rem/1.2 var(--text); color: var(--bw-ink); white-space: nowrap; }
.bw-flip td { padding: 11px 6px; border-top: 1px solid var(--bw-line); text-align: right; font: 600 1rem/1.2 var(--text); color: var(--bw-ink); white-space: nowrap; }
.bw-flip :is(th, td):first-child { padding-left: 0; text-align: left; }
.bw-flip :is(th, td):last-child { padding-right: 0; }
.bw-flip td:first-child { color: #fff; }
.bw-flip td.up { color: var(--gain); }
.bw-flip td.down { color: var(--loss); }
.bw-flip .bw-barcol { width: 32%; }
.bw-pbar { position: relative; display: block; height: 8px; border-left: 1px solid rgba(255, 255, 255, .4); }
.bw-pbar i { position: absolute; left: 0; top: 0; bottom: 0; width: max(6px, calc(var(--v) * 100%)); border-radius: 0 2px 2px 0; background: var(--gain); transform-origin: 0 50%; }
.bw-pbar.is-loss i { background: var(--loss); }
.bw-be { margin-left: 8px; padding: 3px 6px; border-radius: 4px; font: 700 .8125rem/1 var(--text); letter-spacing: .05em; color: #8fc8ff; box-shadow: inset 0 0 0 1px rgba(var(--w), .6); vertical-align: 1px; }
.bw-drv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 3.4rem; align-items: center; gap: 4px 18px; padding: 8px 0; }
.bw-drv b { display: block; font: 600 1rem/1.25 var(--text); color: #fff; }
.bw-drv small { display: block; margin-top: 3px; font: 500 .875rem/1.3 var(--text); color: var(--bw-ink2); }
.bw-drv .bw-mx { margin: 0; text-align: right; font: 700 1.0625rem/1 var(--text); font-variant-numeric: tabular-nums; }
.bw-drv.is-head { padding: 6px 0 0; font: 600 .875rem/1.2 var(--text); color: var(--bw-ink2); }
.bw-scale { display: flex; justify-content: space-between; gap: 6px; }
.bw .mult { height: 8px; }
.bw .mult i { background: rgb(var(--w)); }
.bw-yards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--bw-line); border-bottom: 1px solid var(--bw-line); }
.bw-yards > div { padding: 16px 12px 16px 0; font: 500 .9375rem/1.4 var(--text); color: var(--bw-ink); }
.bw-yards .v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bw-yards .v small { margin: 0; font: 600 .9375rem/1.2 var(--text); color: var(--bw-ink); }
.bw-foot { margin-top: 12px; font: 500 .9375rem/1.5 var(--text); color: var(--bw-ink2); }
.bw-fold { margin-top: 14px; font: 600 1rem/1.3 var(--text); color: #8fc8ff; }
.bw-fold::before { content: "›"; display: inline-block; margin-right: 8px; }
/* For sale: the copies the last eBay scan found (each listing's own photo isn't drawn here) */
.bw-cheap { padding: 6px 0 14px; border-bottom: 1px solid var(--bw-line); font: 500 1rem/1.45 var(--text); color: var(--bw-ink); }
.bw-cheap b { font-weight: 700; color: #fff; }
.bw-lst { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; padding: 14px 0; border-bottom: 1px solid var(--bw-line); }
.bw-lst .t { margin-top: 4px; font: 600 1rem/1.4 var(--text); color: #fff; overflow-wrap: anywhere; }
.bw-lst-r { display: grid; align-content: start; justify-items: end; gap: 10px; }
.bw-lst-r b { font: 700 1.75rem/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.bw-mini { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; font: 600 .9375rem/1 var(--text); color: var(--bw-ink); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.bw-mini .ico { width: 13px; height: 13px; }
/* what else the window holds, under it */
.bw-also { margin-top: clamp(18px, 2vw, 26px); }
.bw-also ul { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem 1.8rem; }
@media (max-width: 1240px) {
  .bw-lead { grid-template-columns: minmax(0, 1fr); }
  .bw-spark { margin-bottom: 4px; }
  .bw-q { grid-template-columns: 132px minmax(0, 1fr); gap: 4px 16px; }
  .bw-sale { grid-template-columns: 6.8rem minmax(0, 1fr) auto 16px; gap: 4px 12px; }
  .bw-form { grid-template-columns: minmax(0, 1fr); }
  .bw-flip .bw-barcol { width: 20%; }
}
@media (min-width: 1101px) and (max-width: 1180px) {
  .bw-flip .bw-barcol { display: none; }
  .bw-yards { grid-template-columns: minmax(0, 1fr); }
  .bw-yards > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--bw-line); }
}
/* Two pages: the left page is a size container, so the card in its holder is as big as the page's height lets it be
   (its holder's padding twice, the card 718 wide to 1000 tall). */
@media (min-width: 1101px) {
  .bw-left { container-type: size; }
  .bw-pocket { max-width: calc((100cqh - clamp(9px, .9vw, 14px) * 2) * .718 + clamp(9px, .9vw, 14px) * 2); }
}
/* One page at a time, as the window on a tablet or a phone: the tabs on top, the card and the buy box under them, then
   the pages; the rings at the page's left edge, beside the card. (The window docks its buy box at the screen's foot;
   here it sits under the card, so a drawing never covers the page's own words.) Under 1100px two pages side by side
   would be too narrow to read. The page is the window here: the card and the pages go by under the tabs, above the
   binder's foot (its page edges and leather, drawn on .bw-spine, which holds the rings on a desk). */
@media (max-width: 1100px) {
  .bw { --bw-side: 12px; --bw-band: 14px; }
  .bw-book { --bw-foot: 22px; display: flex; flex-direction: column; padding: 0 var(--bw-side); overflow: hidden; overflow: clip; }
  .bw-right { display: contents; }
  .bw-tabs { order: 0; margin: 0 calc(var(--bw-side) * -1); padding: calc(var(--bw-band) + 12px) calc(var(--bw-side) + 10px) 0; border-radius: 14px 14px 0 0;
    background: var(--leather); box-shadow: none; }
  .bw-tabs::before { content: ""; position: absolute; z-index: -1; inset: var(--bw-band) var(--bw-side) 0; border-radius: 8px 8px 0 0; background: var(--pg); }
  .bw-tabs::after { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; bottom: 0; border: 1.5px dashed rgba(225, 230, 238, .2); border-bottom: 0;
    border-radius: 10px 10px 0 0; pointer-events: none; }
  .bw-left { order: 1; flex: none; padding: 18px 48px 22px; border-radius: 0; box-shadow: none; background: var(--pg); }
  .bw-left::before { content: ""; position: absolute; left: 2px; top: 30px; width: 38px; aspect-ratio: 89 / 739; pointer-events: none;
    background: url("assets/binder/rings-phone.webp") 0 0 / contain no-repeat; }
  .bw-view { order: 2; flex: none; overflow: visible; background: var(--pg); }
  .bw-flow { padding: 0 0 30px; }
  .bw-page { margin: 0; padding: 22px 24px 4px; }
  .bw-page + .bw-page { margin-top: 0; padding-top: 34px; border-top: 0; }
  .bw-page + .bw-page::before { left: 24px; top: 12px; }
  .bw-spine { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: var(--bw-foot); border-radius: 0 0 14px 14px;
    background: linear-gradient(#29303a 0 2px, #1a1f26 2px 4px, #252b34 4px 6px, #171b21 6px 8px, transparent 8px) var(--bw-side) 0 / calc(100% - var(--bw-side) * 2) 100% no-repeat, var(--leather); }
  .bw-spine::before { left: 7px; right: 7px; top: auto; bottom: 7px; width: auto; height: 12px; margin: 0; border: 1.5px dashed rgba(225, 230, 238, .2); border-top: 0;
    border-radius: 0 0 10px 10px; background: none; box-shadow: none; }
  .bw-rings { display: none; }
  .bw-shade { inset: 0; border-radius: 14px; }
  .bw-stick { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
  .bw-pocket { width: min(64%, 300px); }
  .bw-buy { width: 100%; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bw-bb, .bw-bb.is-shop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 6px; text-align: center; }
  .bw-bb.is-shop { align-items: flex-start; text-align: left; padding: 8px 12px; }
  .bw-bb.is-shop .bw-ic, .bw-bb .bw-x { display: none; }
  .bw-bb .bw-ic .ico { width: 22px; height: 22px; }
  .bw-txt b { font-size: 1rem; line-height: 1.15; }
  .bw-l2.is-long { display: none; }
  .bw-l2.is-short { display: flex; }
  .bw-spark { display: none; }
}
@media (max-width: 760px) {
  .bw { --bw-side: 8px; --bw-band: 10px; padding: 8px 0 12px; }
  .bw-head { padding: 2px 4px 10px; }
  .bw-head h3 { font-size: 1.75rem; }
  .bw-meta { font-size: .9375rem; }
  .bw-acts { gap: 8px; }
  .bw-btn { width: 44px; justify-content: center; padding: 0; }
  .bw-btn span { display: none; }
  .bw-book { --bw-foot: 18px; }
  .bw-book::before { inset: 4px; }
  .bw-tabs { gap: 4px; padding: calc(var(--bw-band) + 10px) calc(var(--bw-side) + 6px) 0; }
  .bw-tabs::after, .bw-spine::before { left: 4px; right: 4px; }
  .bw-tabs::after { top: 4px; }
  .bw-spine::before { bottom: 4px; height: 10px; }
  .bw-tab { height: 42px; font-size: .9375rem; }
  .bw-left { padding: 14px 10px 18px; }
  .bw-left::before { left: 0; top: 24px; width: 30px; }
  .bw-page { padding: 20px 12px 4px 14px; }
  .bw-page + .bw-page::before { left: 14px; }
  .bw-pocket { width: min(80%, 270px); }
  /* (Buy on eBay never narrower than its own words, as the window's docked bar keeps it: one line, then its two) */
  .bw-buy { grid-template-columns: minmax(max-content, 1.55fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
  .bw-bb, .bw-bb.is-shop { min-height: 62px; padding: 7px 5px; }
  .bw-bb.is-shop { padding: 7px 9px; }
  .bw-txt b { font-size: .9375rem; }
  .bw-l2 { font-size: .875rem; }
  .bw .box-head { padding: 9px 10px 10px 8px; }
  /* (a phone's pages have little margin: the scroll's ring sits close) */
  .bw .box.is-read:not(.is-lit) { background: none; box-shadow: 0 0 0 5px rgba(142, 162, 255, .05), 0 0 0 6.5px rgba(142, 162, 255, .42); }
  .bw-big { font-size: 3.3rem; }
  .bw .v { font-size: 1.75rem; }
  .bw-grades > div { padding: 14px 6px 16px 0; }
  .bw-grades > div + div { padding-left: 12px; }
  .bw-q { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; font-size: 1rem; }
  .bw-switch span { padding: 8px 10px; font-size: .875rem; }
  .bw-chart { grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 140px auto; column-gap: 8px; }
  .bw-sale { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .bw-sale p { grid-column: 1 / -1; grid-row: 2; font-size: .9375rem; }
  .bw-out { display: none; }
  /* (as the window on a phone: each figure a row, its name beside it) */
  .bw-tiles, .bw-tiles.is-two { grid-template-columns: minmax(0, 1fr); }
  .bw-tiles > div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); align-items: center; column-gap: 14px; padding: 14px 0; }
  .bw-tiles > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--bw-line); }
  .bw-tiles .k { grid-row: 1 / span 2; }
  .bw-tiles .v { margin-top: 0; }
  .bw-spread { height: 180px; gap: 3px; }
  .bw-spread i { height: calc(var(--v) * 125px); }
  .bw-spread b { font-size: .8125rem; }
  .bw-flip .bw-barcol { display: none; }
  .bw-yards { grid-template-columns: minmax(0, 1fr); }
  .bw-yards > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--bw-line); }
  .bw-flip th, .bw-flip td { padding-inline: 3px; font-size: .875rem; }
  .bw-flip td:first-child { white-space: normal; }
  .bw-be { display: block; width: max-content; margin: 5px 0 0; padding: 2px 4px; letter-spacing: .02em; }
  .bw-cnote { display: none; }
  .bw-drv { grid-template-columns: minmax(0, 1fr) 3.2rem; gap: 6px 12px; }
  .bw-drv .mult { grid-column: 1 / -1; grid-row: 2; }
  .bw-drv.is-head { grid-template-columns: minmax(0, 1fr); }
  .bw-drv.is-head > span:first-child, .bw-drv.is-head > span:last-child { display: none; }
  /* (a phone keeps the scan's summary and its cheapest listing, and leaves out the rest: the page is long enough) */
  .bw-lst + .bw-lst { display: none; }
  .bw-lst { gap: 10px 14px; }
  .bw-lst-r b { font-size: 1.5rem; }
  .bw-also ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .bw-buy { gap: 4px; }
  .bw-bb:not(.is-shop) { padding-inline: 3px; }
  .bw-bb:not(.is-shop) .bw-txt b { font-size: .875rem; }
}
/* ---- The story (landing.js, binderStory). The binder (.win.bw, the stage) is held one screen tall (.is-pin: sticky)
   in a track as tall as the story, and its right page is a window: a hole cut in the book (--bw-m*). The pages are not
   in the binder but in the page behind it (.bw-port, a .bw too, for the binder's words and colours), lined up with the
   window, so they go by in it as the page scrolls, as any page does: nothing moves them but the browser's own scroll.
   Above and below the book, and over the nav's strip, the stage is the page's own ground, so the pages pass out of sight
   behind it. Before them the track holds the opening (.is-anim: the "open" keyframes, bwo-*, over its first --bw-o):
   the closed cover swings open with the card on its inside, as the first page rises into the window. Where the browser
   has scroll-driven animations (.is-sda) the track is their timeline and the compositor runs them; elsewhere they are
   held still and landing.js sets them from the scroll position. With reduced motion (.is-still) the binder stands open,
   held the same way, with no cover; in a window too short to hold it (.is-stack) nothing is held, and the binder is as
   long as its pages. */
.bw-track { position: relative; overflow: clip; }
.bw-ruler { position: absolute; top: 0; left: 0; width: 0; height: var(--top); visibility: hidden; pointer-events: none; }
.bw-track > .win { z-index: 2;
  background: linear-gradient(var(--canvas) 0 0) 0 0 / 100% var(--bw-gt, 0px) no-repeat, linear-gradient(var(--canvas) 0 0) 0 100% / 100% var(--bw-gb, 0px) no-repeat;
  box-shadow: 0 calc(var(--top) * -1) 0 0 var(--canvas), 0 240px 0 0 var(--canvas); }
/* (a pointer passes through the binder's window to the pages behind it: the cut in the book is seen, not touched) */
.bw-track > .win, .bw-track > .win :is(.bw-desk, .bw-bind, .bw-book, .bw-right, .bw-view) { pointer-events: none; }
.bw-track > .win :is(.bw-head, .bw-tabs, .bw-left) { pointer-events: auto; }
.bw-track.is-pin > .win { position: sticky; top: var(--top); height: calc(100vh - var(--top)); height: calc(100svh - var(--top)); }
.bw-track.is-stack .bw-bind { height: 100%; }
.bw-track.is-stack .bw-left { align-content: start; container-type: inline-size; }
.bw-book { -webkit-mask: linear-gradient(#000 0 0) var(--bw-mx, 0px) var(--bw-my, 0px) / var(--bw-mw, 0px) var(--bw-mh, 0px) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) var(--bw-mx, 0px) var(--bw-my, 0px) / var(--bw-mw, 0px) var(--bw-mh, 0px) no-repeat exclude, linear-gradient(#000 0 0); }
/* the pages, behind the window */
.bw.bw-port { position: absolute; z-index: 1; left: var(--bw-px, 0px); top: var(--bw-py, 0px); width: var(--bw-pw, 0px); height: auto; display: block; padding: 0;
  background: var(--pg); box-shadow: inset 28px 0 28px -24px rgba(0, 0, 0, .8); scroll-margin-top: 0; }
.bw.bw-port::before { content: none; }
.bw-port > .bw-flow { margin-top: var(--bw-o, 0px); }
.js .bw-port { transition: opacity .7s var(--ease); }
.js .bw-port:not(.is-in) { opacity: 0; }
/* (the window's parts stand solid: a fast pass never finds them blank; their bars still grow as they come) */
.js .bw-port [data-anim] { opacity: 1; }
.bw-port * { scroll-margin: var(--bw-sm, 0px); }
.bw-port :is(.bw-left, #bw-overview), .bw-port :is(.bw-left, #bw-overview) * { scroll-margin: var(--bw-sm1, 0px); }
.bw-flow :is(.box, .bw-page):focus { outline: none; }
.bw-flow .box:focus-visible { box-shadow: 0 0 0 12px rgba(142, 162, 255, .05), 0 0 0 13.5px var(--accent); }
/* the closed cover: leather, its stitching, the spine's edge and the crown pressed into it; on its inside, the left page */
.bw-cover, .bw-cast { display: none; }
.bw-track.is-anim .bw-cover { display: block; position: absolute; z-index: 6; top: 0; bottom: 0; left: 50%; right: 0; pointer-events: none;
  transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.bw-cv-front, .bw-cv-back { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--leather); }
.bw-cv-front { border-radius: 4px 14px 14px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(0, 0, 0, .7), 0 4px 0 #101215, 0 34px 50px -26px rgba(0, 0, 0, .95); }
.bw-cv-front::before { content: ""; position: absolute; inset: 7px 7px 7px 22px; border: 1.5px dashed rgba(225, 230, 238, .2); border-radius: 4px 10px 10px 4px; }
.bw-cv-front::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(255, 255, 255, .07) 58%, rgba(0, 0, 0, .3)); }
.bw-cv-crown { position: absolute; left: 50%; top: 32%; width: clamp(56px, 5.6vw, 88px); aspect-ratio: 222 / 206; translate: -50% -50%;
  background: linear-gradient(180deg, #0a0b0d, #15171b 78%, #2c2f35);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='4.9 5.4 22.2 20.6'><path d='M7.6 22L4.9 10.2L8.99 13.45A2.5 2.5 0 1 0 12.11 12.79L16 5.4L19.89 12.79A2.5 2.5 0 1 0 23.01 13.45L27.1 10.2L24.4 22ZM7.6 24H24.4V26H7.6Z'/></svg>") 50% 50% / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='4.9 5.4 22.2 20.6'><path d='M7.6 22L4.9 10.2L8.99 13.45A2.5 2.5 0 1 0 12.11 12.79L16 5.4L19.89 12.79A2.5 2.5 0 1 0 23.01 13.45L27.1 10.2L24.4 22ZM7.6 24H24.4V26H7.6Z'/></svg>") 50% 50% / contain no-repeat; }
.bw-cv-rule { position: absolute; left: 50%; top: calc(32% + clamp(56px, 5.6vw, 88px) * .72); width: clamp(84px, 8vw, 128px); height: 2px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .6) 22%, rgba(0, 0, 0, .6) 78%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
/* (the name, pressed into the leather under the crown and its rule, as the crown is: tone on tone) */
.bw-cv-name { position: absolute; left: 50%; top: calc(32% + clamp(56px, 5.6vw, 88px) * .72 + clamp(14px, 1.4vw, 20px)); translate: -50% 0;
  white-space: nowrap; font: 700 clamp(15px, 1.55vw, 23px)/1 var(--display); letter-spacing: .3em; text-transform: uppercase; padding-left: .3em;
  color: #090a0c; text-shadow: 0 1px 0 rgba(255, 255, 255, .13), 0 -1px 0 rgba(0, 0, 0, .6); }
/* (the inside: its leather stops at the spine, where the rings stand, and the left page lies on it, where the book's
   own left page would be) */
.bw-cv-back { transform: rotateY(180deg); border-radius: 14px 4px 4px 14px; clip-path: inset(0 calc(var(--spine) / 2) 0 0); }
.bw-cv-back::before { content: ""; position: absolute; inset: 7px -2px 7px 7px; border: 1.5px dashed rgba(225, 230, 238, .2); border-right: 0; border-radius: 10px 0 0 10px; }
.bw-cv-back > .bw-left { position: absolute; top: 18px; bottom: 28px; left: 16px; right: calc(var(--spine) / 2); pointer-events: auto; }
.bw-cv-dim { position: absolute; z-index: 1; inset: 0; background: #000; opacity: 0; pointer-events: none; }
/* (the cover's shadow on the ground as it comes down on the left) */
.bw-track.is-anim .bw-cast { display: block; position: absolute; z-index: 5; top: 4%; bottom: -2%; right: 50%; width: 50%; opacity: 0; pointer-events: none;
  transform-origin: 100% 50%; background: radial-gradient(100% 62% at 100% 52%, rgba(0, 0, 0, .8), transparent 76%); }
/* (the world's glow lights the closed binder from behind; it goes as it opens, the open binder covering it) */
.bw-track:not(.is-anim) > .win::before { display: none; }
.bw-track.is-anim .bw-bind { animation: bwo-slide 1s linear both paused; }
.bw-track.is-anim .bw-book, .bw-track.is-anim .bw-bind::before { animation: bwo-clip 1s linear both paused; }
.bw-track.is-anim .bw-cover { animation: bwo-swing 1s linear both paused; }
.bw-track.is-anim .bw-cv-front > .bw-cv-dim { animation: bwo-dim-f 1s linear both paused; }
.bw-track.is-anim .bw-cv-back > .bw-cv-dim { animation: bwo-dim-b 1s linear both paused; }
.bw-track.is-anim .bw-cast { animation: bwo-cast 1s linear both paused; }
.bw-track.is-anim .bw-shade { animation: bwo-shade 1s linear both paused; }
.bw-track.is-anim :is(.bw-tabs, .bw-port) { animation: bwo-ink-r 1s linear both paused; }
.bw-track.is-anim .bw-rings { animation: bwo-clip 1s linear both paused, bwo-rings 1s linear both paused; }
.bw-track.is-anim > .win::before { animation: bwo-glow 1s linear both paused; }
/* Two pages: the closed binder (the cover over the right page) in the middle of the screen. It slides to its place as
   the cover lifts (by 40%), the cover swings over the spine (upright at about 45%) and lies down on the left (84%), the
   card and its buy box on its inside; the left half of the book shows from then (a closed binder is one page wide).
   The right page's tabs and its pages come up once the cover is near upright, the rings with them. */
@keyframes bwo-slide { 0% { transform: translateX(-25%); animation-timing-function: cubic-bezier(.45, .05, .35, 1); } 40%, 100% { transform: none; } }
@keyframes bwo-clip { 0%, 84% { clip-path: inset(-120px -120px -120px calc(50% + 3px)); } 84.01%, 100% { clip-path: inset(-120px); } }
@keyframes bwo-swing { 0% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  6% { transform: rotateY(-5deg); animation-timing-function: cubic-bezier(.45, .05, .35, 1); } 84%, 100% { transform: rotateY(-180deg); } }
@keyframes bwo-dim-f { 0%, 6% { opacity: 0; } 45%, 100% { opacity: .5; } }
@keyframes bwo-dim-b { 0%, 45% { opacity: .6; } 84%, 100% { opacity: 0; } }
@keyframes bwo-cast { 0%, 45% { opacity: 0; transform: scaleX(0); } 76% { opacity: .6; } 84% { opacity: .5; transform: scaleX(1); } 93%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes bwo-shade { 0% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes bwo-ink-r { 0%, 38% { opacity: .01; } 54%, 100% { opacity: 1; } }
@keyframes bwo-rings { 0%, 34% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes bwo-glow { 0%, 25% { opacity: 1; } 42%, 100% { opacity: 0; } }
/* One page: the cover is the whole page, hinged at the rings on the left; it swings open towards the screen's edge and
   is gone past upright, the page coming up as it goes: its tabs, then the card and the pages rising under them. */
@keyframes bwo-swing1 { 0% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  5% { transform: rotateY(-4deg); animation-timing-function: cubic-bezier(.4, .1, .45, 1); } 70% { transform: rotateY(-100deg); } 100% { transform: rotateY(-180deg); } }
@keyframes bwo-cover1 { 0%, 62% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes bwo-shade1 { 0% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes bwo-ink1 { 0%, 48% { opacity: .01; } 72%, 100% { opacity: 1; } }
@media (max-width: 1100px) {
  .bw-track.is-anim .bw-cover { left: 0; }
  .bw-cv-front { border-radius: 14px; }
  .bw-track.is-anim :is(.bw-bind, .bw-book, .bw-cast, .bw-tabs, .bw-rings), .bw-track.is-anim .bw-bind::before { animation: none; }
  .bw-track.is-anim .bw-cover { animation: bwo-swing1 1s linear both paused; }
  .bw-track.is-anim :is(.bw-cv-front, .bw-cv-back) { opacity: 0; animation: bwo-cover1 1s linear both paused; }
  .bw-track.is-anim .bw-shade { animation: bwo-shade1 1s linear both paused; }
  .bw-track.is-anim .bw-port { animation: bwo-ink1 1s linear both paused; }
  .bw-bind { perspective: 2200px; perspective-origin: 40% 42%; }
  /* (the pages behind the window: the tabs held at its top, then the card and its buy box, then the pages) */
  .bw.bw-port { display: flex; flex-direction: column; box-shadow: none; }
  .bw-port > .bw-tabs { order: -1; position: sticky; top: var(--bw-tt, var(--top)); margin-bottom: var(--bw-tm, 0px); }
  /* (a window too short to hold the binder keeps all of itself for the pages: the tabs go by with them) */
  .bw-track.is-stack .bw-port > .bw-tabs { position: relative; top: auto; }
  .bw-port > .bw-left { order: 1; margin-top: calc(var(--bw-o, 0px) - var(--bw-tm, 0px)); }
  .bw-port > .bw-flow { order: 2; margin-top: 0; }
}
@supports (animation-timeline: view()) {
  /* (the inset: the nav over the page's top; at the foot, what a phone's toolbar takes away from the screen's height) */
  .bw-track.is-sda { view-timeline: --bwt block; view-timeline-inset: var(--top) calc(100dvh - 100svh); }
  /* (each of these outranks the rule that set its animation, whose shorthand would put the timeline back) */
  .bw-track.is-sda :is(.bw-bind, .bw-book, .bw-cover, .bw-cover > i, .bw-cover > div, .bw-cover .bw-cv-dim, .bw-cast, .bw-shade, .bw-tabs, .bw-port, .bw-rings),
  .bw-track.is-sda .bw-bind::before, .bw-track.is-sda > .win::before {
    animation-play-state: running; animation-timeline: --bwt; animation-range: contain 0px contain var(--bw-o); }
}

/* ---------------------------------------------------------------- alerts and the buy checker */
.rules { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .7rem; max-width: 34rem; }
.rules li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; padding: .8rem 1rem .8rem .8rem; border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.rule-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(142, 162, 255, .14); }
.rule-ico .ico { width: 22px; height: 22px; margin: 0; }
.rules b { display: block; font-weight: 600; }
.rules li > div > span { display: block; margin-top: .15rem; font-size: .9375rem; line-height: 1.4; color: var(--ink-soft); }  /* the text, not the icon's box */
.msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 1rem 0; border-bottom: 1px solid rgba(160, 175, 255, .09); }
.msg:first-of-type { padding-top: .2rem; }
.msg:last-of-type { border-bottom: 0; padding-bottom: .2rem; }
.msg-who { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0c1126; box-shadow: 0 0 0 1px var(--line); color: var(--ink); }
.msg-who svg { width: 24px; height: 24px; }
/* (the name's initials, until the logo mark is chosen) */
.monogram { font: 800 1.05rem/1 var(--display); letter-spacing: .02em; }
.monogram em { font-style: normal; color: var(--accent); }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.msg-head b { font-weight: 600; }
.msg-head span { font-size: .8125rem; color: var(--ink-note); }
.msg-card { margin-top: .55rem; display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 6.4vw, 84px); align-items: start; gap: 14px; padding: .85rem 1rem; border-radius: 4px 12px 12px 4px; border-left: 3px solid rgb(var(--w)); background: rgba(255, 255, 255, .04); }
.msg-card b { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.msg-card p { margin-top: .35rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.msg-card small { display: block; margin-top: .55rem; font-size: .8125rem; color: var(--ink-note); }
.verdicts { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .75rem; }
.verdicts li { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); align-items: baseline; gap: 14px; }
.verdicts b { justify-self: start; padding: .36rem .7rem; border: 1px solid var(--line); border-radius: 999px; font: 600 .875rem/1 var(--text); white-space: nowrap; }
.verdicts span { color: var(--ink-soft); }
.shot { margin: 0; }
.shot > img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 1rem; max-width: 80ch; font-size: .9375rem; line-height: 1.55; color: var(--ink-note); }
.shot[hidden] { display: none; }
/* Auto checkout (#autocheckout): the app's screen beside the words, and the way to the plan that has it */
.autobuy-shot { align-self: center; }
.autobuy-shot > img { border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px rgba(47, 140, 255, .45); }
.auto-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin: 1.8rem 0 0; }
.auto-cta span { font-size: .9375rem; color: var(--ink-note); }
/* the 10-minute offer (landing.js offerScene): shown only while the server says the visitor's minutes run. Each
   state's words are in the page under data-offer-if (one state, or several with a space between); <html data-offer=
   "running|claimed|none"> says which show. */
[data-offer-if] { display: none; }
html[data-offer="running"] [data-offer-if~="running"], html[data-offer="claimed"] [data-offer-if~="claimed"],
html:not([data-offer="running"]):not([data-offer="claimed"]) [data-offer-if~="none"] { display: revert; }
.auto-offer { margin: 1.6rem 0 0; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid rgba(250, 204, 21, .38);
  background: linear-gradient(180deg, rgba(250, 204, 21, .09), rgba(250, 204, 21, .03)); }
.auto-offer[hidden] { display: none; }
.auto-offer-head { margin: 0; font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.auto-offer-clock { color: #facc15; font-variant-numeric: tabular-nums; }
.auto-offer-sub { margin: .35rem 0 0; font-size: .9375rem; color: var(--ink-note); }
.auto-offer + .auto-cta { margin-top: 1rem; }

/* The Chrome extension: a short strip between the Buy checker and Next Grail Bot (index.html #extension). */
.ext { padding: calc(var(--sec-pad) * .5) 0; }
.ext-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.6rem clamp(24px, 5vw, 72px);
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3.4vw, 44px); border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(47, 140, 255, .1), rgba(47, 140, 255, 0) 55%), rgba(255, 255, 255, .02); }
.ext h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: .9rem 0 0; }
.ext .lede { margin-top: .9rem; max-width: 60ch; font-size: clamp(1rem, 1.2vw, 1.125rem); }
.ext-cta { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin: 0; }
.ext-cta span { font-size: .9375rem; color: var(--ink-note); white-space: nowrap; }
@media (max-width: 760px) { .ext-box { grid-template-columns: minmax(0, 1fr); } .ext-cta span { white-space: normal; } }
/* A crop: one part of a picture (--x --y --w --h, in the picture's own px; --iw is its width), shown
   at that size or smaller, never larger. All in percentages, so it scales with its own box. */
.crop { position: relative; overflow: hidden; width: 100%; max-width: calc(var(--w) * 1px); aspect-ratio: var(--w) / var(--h); border-radius: 8px; }
.crop img { position: absolute; left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); width: calc(var(--iw) / var(--w) * 100%); max-width: none; height: auto; }
.checkshot { --iw: 1342; }
/* (the box is the color of the screenshot's own rows, so the crops and the box read as one surface) */
.checkcut { padding: clamp(14px, 2vw, 30px); border-radius: 18px; background: #021122; box-shadow: 0 0 0 1px rgba(160, 175, 255, .26), inset 0 1px 0 var(--edge), 0 70px 120px -70px #000; }
.check-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2rem clamp(24px, 5vw, 80px); padding-bottom: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--line); }
.check-top .check-cell { flex: 0 1 auto; min-width: 0; }
.check-top .crop { width: calc(var(--w) * 1px); max-width: 100%; }
.check-k, .check-head, .check-cell[data-k]::before { font: 600 .8125rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-note); }
.check-k { margin-bottom: .7rem; }
.check-row { display: grid; grid-template-columns: 264px 296px 150px 380px; justify-content: space-between; align-items: center; gap: 12px 18px; padding: .7rem 0; border-top: 1px solid rgba(160, 175, 255, .1); }
.check-row:last-child { padding-bottom: 0; }
.check-row .crop { border-radius: 0; }
.check-head { border-top: 0; padding: 1.2rem 0 .7rem; }
/* Under 1340px the four parts of a row no longer fit side by side at their true size: they go two by
   two, each under its own label, and one under another on a phone. */
@media (max-width: 1339px) {
  .check-head { display: none; }
  .check-row { grid-template-columns: minmax(0, 296px) minmax(0, 380px); justify-content: start; align-items: start; gap: 16px clamp(20px, 5vw, 64px); padding: 1.3rem 0; }
  .check-top + .check-head + .check-row { border-top: 0; }
  .check-cell[data-k]::before { content: attr(data-k); display: block; margin-bottom: .5rem; }
  .check-cell[data-k="Verdict"] { grid-column: 2; grid-row: 1; }
  .check-cell[data-k="Asking and worth"] { grid-column: 1; grid-row: 2; }
  .check-cell[data-k="Grading it"] { grid-column: 2; grid-row: 2; }
}

/* ---------------------------------------------------------------- everything inside */
.inside { background: linear-gradient(180deg, transparent, var(--ground) 12% 88%, transparent); }
.index { margin-top: clamp(40px, 7vh, 76px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.index-group h3 { padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.index-group ul { list-style: none; margin: 0; padding: 0; }
.index-group li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 1rem 0; border-bottom: 1px solid rgba(160, 175, 255, .08); }
.ico { width: 26px; height: 26px; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.index-group b { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.index-group li > div > span { display: block; margin-top: .25rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.index-pair { display: grid; align-content: start; gap: clamp(28px, 3vw, 48px); }
/* The first row of the list on the day the page's numbers are from. */
.now { display: block; margin-top: .45rem; font-style: normal; font-size: .875rem; line-height: 1.4; color: var(--accent); }

/* ---------------------------------------------------------------- six worlds */
.dash { margin-top: clamp(36px, 6vh, 64px); }
/* (the picture is the dashboard's top: its banner, a raw-price game's note, its tabs and its filter bar; each at its own
    size, from the img's width and height, which landing.js sets for the game on stage) */
.dash img { border-radius: 18px; box-shadow: 0 0 0 1px rgba(var(--world), .5), 0 70px 120px -70px #000, 0 0 120px -50px rgba(var(--world), .5); }
.world-grid { margin-top: clamp(28px, 4.5vh, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.world { --w: 59, 130, 246; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr; border-radius: 22px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(var(--w), .22), transparent 70%), linear-gradient(165deg, rgba(24, 32, 66, .5), rgba(9, 12, 27, .95));
  box-shadow: inset 0 0 0 1px rgba(var(--w), .34), inset 0 1px 0 rgba(255, 255, 255, .1); }
.world[data-world="onepiece"] { --w: 168, 85, 247; }
.world[data-world="lorcana"] { --w: 242, 184, 75; }
.world[data-world="riftbound"] { --w: 34, 211, 238; }
.world[data-world="gundam"] { --w: 226, 232, 240; }
.world[data-world="mtg"] { --w: 249, 168, 212; }
/* Three of the world's own cards, fanned: they spread a little under the pointer. */
.world-fan { position: relative; height: clamp(196px, 19.5vw, 256px); margin-top: clamp(22px, 2.4vw, 34px); }
.world-fan .pic { position: absolute; left: 50%; bottom: 7%; width: clamp(108px, 11.5vw, 150px); height: auto; aspect-ratio: 718 / 1000; object-fit: cover; margin-left: clamp(-75px, -5.75vw, -54px); border-radius: 4.6% / 3.3%;
  box-shadow: 0 18px 30px -14px #000, 0 0 0 1px rgba(255, 255, 255, .1); transform-origin: 50% 120%; transform: rotate(calc(var(--k) * 13deg)) translateX(calc(var(--k) * 34%)); transition: transform .5s var(--ease); }
.world-fan .pic:nth-child(1) { --k: -1; }
.world-fan .pic:nth-child(2) { --k: 1; }
.world-fan .pic:nth-child(3) { --k: 0; z-index: 1; }
.world-info { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; margin-top: -26px; padding: 44px clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px); background: linear-gradient(180deg, rgba(8, 11, 23, 0), rgba(8, 11, 23, .95) 34px); }
.dots { display: none; justify-content: center; gap: 9px; margin-top: 1.1rem; }
.dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(var(--w)); transition: background-color .2s; }
.dots i.is-on { background: rgb(var(--w)); }
.covers { margin-top: clamp(44px, 7vh, 84px); }
.covers h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.cov { margin-top: 1.4rem; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.cov-row { display: grid; grid-template-columns: minmax(0, 1.05fr) repeat(6, minmax(0, 1fr)); align-items: center; }
.cov-row > * { padding: .9rem clamp(10px, 1.2vw, 18px); font-size: .9375rem; line-height: 1.3; }
.cov-row + .cov-row { border-top: 1px solid rgba(160, 175, 255, .1); }
.cov-head { background: rgba(255, 255, 255, .03); }
.cov-head > * { font: 600 .8125rem/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-note); }
.cov-game { font: 700 1.3rem/1.1 var(--display) !important; color: rgb(var(--w)); }
.cov-cell.is-yes { font-weight: 600; color: var(--ink); }
.cov-cell.is-yes::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .5rem; border-radius: 50%; background: rgb(var(--w)); }
.cov-cell.is-part { color: var(--ink-soft); }
.cov-cell.is-part::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(var(--w)); }
.cov-cell.is-no { color: var(--ink-note); }
.world h3 { font-size: clamp(2rem, 3.2vw, 2.9rem); color: rgb(var(--w)); }
.world p { margin-top: .6rem; font-size: 1rem; line-height: 1.5; color: #d5dbee; }
.world dl { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; margin: 1.2rem 0 0; }
.world dt { font-size: .8125rem; line-height: 1.3; color: var(--ink-soft); }
.world dd { margin: .25rem 0 0; font: 700 1.8rem/1 var(--display); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- who it is for */
.who-grid { margin-top: clamp(40px, 7vh, 76px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
/* (each card's name, words, "open first" and list sit on the same four lines across the row) */
.who-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; background: linear-gradient(165deg, rgba(24, 32, 66, .6), rgba(9, 12, 27, .95)); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--edge); }
.who-card h3 { font-size: clamp(2rem, 3vw, 2.7rem); }
.who-card > p { margin-top: .9rem; color: var(--ink-soft); }
.who-card .who-first { margin-top: 1.8rem; font: 600 .8125rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-note); }
.who-card ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.who-card li { border-bottom: 1px solid rgba(160, 175, 255, .09); }
.who-card li:last-child { border-bottom: 0; }
.who-card a { display: block; padding: .8rem 0; color: inherit; text-decoration: none; }
.who-card li:last-child a { padding-bottom: 0; }
.who-card a b { display: block; font-weight: 600; font-size: 1.0625rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.who-card a span { display: block; margin-top: .15rem; font-size: .9375rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- where it fits */
.compare { background: linear-gradient(180deg, transparent, var(--ground) 14% 86%, transparent); }
.cmp { margin-top: clamp(40px, 7vh, 76px); border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.cmp-row { display: grid; grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr)); }
.cmp-row > * { padding: 1.15rem clamp(14px, 1.6vw, 24px); border-top: 1px solid rgba(160, 175, 255, .1); color: var(--ink-soft); line-height: 1.5; }
.cmp-head > * { border-top: 0; font: 700 clamp(1.3rem, 1.9vw, 1.7rem)/1.1 var(--display); color: var(--ink); }
.cmp-row > :first-child { font-weight: 600; color: var(--ink); }
.cmp-us { background: rgba(142, 162, 255, .1); color: var(--ink) !important; }
.cmp-head .cmp-us { color: var(--accent) !important; }

/* ---------------------------------------------------------------- proof: members' words, or the record until there are any
   (the section's class is "trust": "proof" is the briefing's list of cards) */
.trust-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 26px); }
.trust-grid.is-one { grid-template-columns: minmax(0, 1fr); }
.trust-grid.is-one .tallies { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.3rem clamp(16px, 3vw, 40px); }
/* (the two panels end together: each one's small print sits at its foot) */
.trust-grid .pn { display: flex; flex-direction: column; }
.trust-grid .pn + .pn { margin-top: 0; }
.trust-grid .pn-body { flex: 1; display: flex; flex-direction: column; }
.trust-grid .pn-foot { margin-top: auto; padding-top: 1.3rem; }
.trust .pn-foot a, .faq details p a { color: var(--accent); text-underline-offset: 3px; }
/* The record in three numbers, each with what it counts (the panel in Potential has it in full). */
.tallies { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.tally { padding-left: 1.1rem; border-left: 2px solid rgba(142, 162, 255, .4); }
.tally-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .65rem; }
.tally-big b { font: 800 clamp(2.4rem, 3.5vw, 3.25rem)/.9 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tally-big span { font: 700 1.375rem/1 var(--display); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tally-what { margin-top: .45rem; max-width: 38ch; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
/* The record read by read: a dot for the top tenth inside a wider ring for all scored cards (both show when they
   meet), the gap between them a line; a read the top tenth was behind on has a grey dot and says "behind". */
.reads { margin: 1.7rem 0 0; }
.reads-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; }
.reads-title { font: 600 .8125rem/1.25 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-note); }
.reads-key { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--ink-soft); }
.reads-key i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.reads-key .k-top { background: rgb(var(--w)); }
.reads-key .k-mkt { width: 14px; height: 14px; margin-left: .5rem; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.reads-plot { position: relative; height: 160px; margin-top: 1.6rem; padding-left: 2.3rem; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.reads-zero { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px dashed rgba(160, 175, 255, .3); }
.reads-zero b { position: absolute; left: 0; top: -.55em; padding-right: .3rem; background: none; font: 500 .8125rem/1 var(--text); color: var(--ink-note); }
.rd { position: relative; border-radius: 6px; }
.rd-span { position: absolute; left: 50%; bottom: var(--a); width: 2px; height: calc(var(--b) - var(--a)); margin-left: -1px; border-radius: 2px; background: rgba(var(--w), .5); }
.rd.is-behind .rd-span { background: rgba(255, 255, 255, .3); }
.rd-top, .rd-mkt { position: absolute; left: 50%; bottom: var(--y); border-radius: 50%; }
.rd-mkt { width: 14px; height: 14px; margin: 0 0 -7px -7px; background: #10162f; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.rd-top { width: 8px; height: 8px; margin: 0 0 -4px -4px; background: rgb(var(--w)); }
.rd.is-behind .rd-top { background: rgba(255, 255, 255, .5); }
.rd-flag { position: absolute; left: 50%; bottom: calc(var(--y) + 12px); translate: -50% 0; font: 600 .8125rem/1 var(--text); color: var(--ink-note); white-space: nowrap; }
.reads-note { margin-top: .7rem; font-size: .875rem; line-height: 1.45; color: var(--ink-note); }
.rd-tip { position: absolute; z-index: 3; top: calc(100% + 4px); left: 50%; translate: -50% 0; padding: .5rem .7rem; border-radius: 10px; background: #0a0f22;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -12px #000; font-size: .8125rem; line-height: 1.35; color: var(--ink); width: max-content; max-width: 17rem; pointer-events: none; display: none; }
.rd.is-first .rd-tip { left: 0; translate: 0 0; }
.rd.is-last .rd-tip { left: auto; right: 0; translate: 0 0; }
.reads-x { display: flex; justify-content: space-between; margin-top: .55rem; padding-left: 2.3rem; font-size: .8125rem; color: var(--ink-note); }
@media (hover: hover) and (pointer: fine) {
  .rd:hover { background: rgba(255, 255, 255, .045); }
  .rd:hover .rd-tip { display: block; }
}
/* The receipts: each card's two months after the read, as the record measures them. */
.rcpts { list-style: none; margin: 0; padding: 0; display: grid; }
.rcpt { display: grid; grid-template-columns: clamp(84px, 8.4vw, 118px) minmax(0, 1fr); column-gap: clamp(16px, 1.6vw, 22px); padding: 1.15rem 0; border-top: 1px solid rgba(160, 175, 255, .1); }
.rcpt:first-child { padding-top: .15rem; border-top: 0; }
.rcpt > .pic { grid-row: 1 / span 2; align-self: start; }
.rcpt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rcpt-name { font: 600 1.125rem/1.3 var(--text); letter-spacing: 0; }
.rcpt-head .meta { margin-top: .15rem; }
/* (a card's whole run first: how many of its reads ended higher, the range, a mark per read; then its middle read's prices) */
.rcpt-run { flex: none; display: grid; justify-items: end; gap: .3rem; text-align: right; }
.rcpt-run b { font: 800 clamp(1.9rem, 2.6vw, 2.4rem)/.9 var(--display); font-variant-numeric: tabular-nums; }
.rcpt-run span { font-size: .8125rem; color: var(--ink-soft); }
.rcpt-read { margin-top: .55rem; font-size: .875rem; line-height: 1.4; color: var(--ink-soft); }
.run { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: 4px; }
.run i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.run i.up { background: rgba(74, 222, 128, .75); }
.run i.down { background: rgba(248, 113, 113, .8); }
.run i[data-mid] { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px var(--ink-soft); }
.rcpt-legs { grid-column: 2; margin-top: .8rem; display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: stretch; gap: 6px; }
.rcpt-mid { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; font: 600 .8125rem/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-note); }
.rcpt-mid b { font: 700 1.25rem/1 var(--display); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.leg { padding: .7rem .85rem .75rem; border-radius: 12px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(160, 175, 255, .1); }
.leg-k { display: block; font: 600 .8125rem/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-note); }
.leg b { display: block; margin-top: .35rem; font: 700 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.leg-n { display: block; margin-top: .3rem; font-size: .8125rem; line-height: 1.35; color: var(--ink-soft); }
.leg-n > span { display: block; }
.leg-n .leg-d { color: var(--ink-note); white-space: nowrap; }
.rcpt-to { align-self: center; justify-self: center; width: 12px; height: 12px; border-top: 2px solid var(--ink-note); border-right: 2px solid var(--ink-note); rotate: 45deg; translate: -2px 0; }
/* Members' own words. Each quote with its
   member's card: their own card in a clear case when the quote is about one card, else a plain card with their
   initials that claims nothing. What its author got from us ("Member") beside the name and on its own line; a short
   quiet note right under the quote. A quote with a result leads: a beam of its game's colour over its slab, the
   scope's brackets around it, and its strip (bought for, came back, a recent sale at that grade) right above the
   note. Two quotes sit side by side, each as tall as its own words; three or more make a wall in the order they are
   listed (a quote with a result across the whole row, the rest in threes, twos on a tablet, one on a phone). Each
   card's colour is its game's (the brand's gold without one). At rest nothing moves: the slab settles in once, the beam comes on once, its light crosses once, the lit
   phrases draw in once, and under a mouse the slab tips toward the pointer. Transforms and opacity only, none of it
   with less motion asked. */
.quotes { --qgap: clamp(16px, 2vw, 28px); margin-bottom: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); align-items: start; gap: var(--qgap); }
/* (two, one of them with a result: that one gets the room for its strip, the other wraps its words around its card) */
@media (min-width: 1100px) { .quotes:not(.is-many):has(> .is-lead + .qx:not(.is-lead), > .qx:not(.is-lead) + .is-lead) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .quotes:not(.is-many):has(> .qx:not(.is-lead) + .is-lead) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.quotes.is-many { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.quotes.is-many > .qx { flex: 0 1 calc((100% - 2 * var(--qgap)) / 3); min-width: 0; }
.quotes.is-many > .qx.is-lead { flex-basis: 100%; }
@media (max-width: 1099px) { .quotes.is-many > .qx { flex-basis: calc((100% - var(--qgap)) / 2); } }
@media (max-width: 699px) { .quotes.is-many > .qx { flex-basis: 100%; } }
/* (a phone: past the first four, one button for the rest) */
.qx-more { display: none; }
@media (max-width: 699px) {
  .quotes.is-folded > .qx:nth-child(n + 5) { display: none; }
  .qx-more { display: flex; width: 100%; margin: 0 0 clamp(22px, 3vw, 36px); }
}

.qx { --pad: clamp(20px, 2.3vw, 34px); container: qx / inline-size; position: relative; isolation: isolate; overflow: hidden; margin: 0; display: flex; flex-direction: column;
  padding: var(--pad); border-radius: 24px;
  background: radial-gradient(90% 55% at 0% 0%, rgba(var(--w), .16), transparent 62%), linear-gradient(165deg, rgba(24, 32, 66, .62), rgba(9, 12, 27, .96));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--edge), 0 50px 90px -76px rgba(var(--w), .5); }
/* (a foil edge: the game's colour catching the light at two corners) */
.qx::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(var(--w), .75), rgba(var(--w), .1) 26%, transparent 46%, transparent 72%, rgba(var(--w), .35));
  -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); }
.qx.no-card { box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--edge), 0 50px 90px -84px rgba(var(--w), .35); }

/* narrow (a phone, a tile in a wall) and every quote without a card: the card to the left, the member beside it,
   the quote flowing on around and under it, then the result and the note right under it */
.qx-body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 1.2rem; }
.qx-main { display: flow-root; }
.qx-main > .qs { float: left; width: clamp(118px, 40cqi, 176px); margin: 2px clamp(16px, 5.5cqi, 26px) 14px 0; }
.qx-main > .qk { float: left; width: clamp(84px, 24cqi, 124px); margin: 4px clamp(16px, 5cqi, 24px) 10px 0; }
/* (the words above the beam's light) */
.qx-who, .qx-quote, .qr, .qx-foot { position: relative; z-index: 1; }
.qx-who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 1rem; }
.qx-who .quote-pic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; color: #fff; font: 700 1rem/1 var(--display);
  background: radial-gradient(circle at 30% 25%, rgba(var(--w), .55), rgba(var(--w), .16)); box-shadow: inset 0 0 0 1px rgba(var(--w), .6), 0 0 18px -4px rgba(var(--w), .7); }
.qx-who b { display: block; font-weight: 600; font-size: 1.0625rem; }
.qx-who div span { display: block; font-size: .9375rem; color: var(--ink-soft); }
/* "Member": what its author got from us, a plain badge beside the name too, never smaller than the small print */
.qx-pill { display: inline-flex; align-items: center; min-height: 28px; padding: .15rem .7rem; border-radius: 999px; font: 600 .9375rem/1.2 var(--text); color: var(--ink);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(var(--w), .45); }
.qx-quote { margin: 0; }
.qx-quote p { font: 500 1.125rem/1.55 var(--text); color: var(--ink); text-wrap: pretty; }
.qx-quote p::before { content: "\201C"; } .qx-quote p::after { content: "\201D"; }
.qx-quote p::before, .qx-quote p::after { color: rgb(var(--w)); color: color-mix(in oklab, rgb(var(--w)) 70%, white); font-weight: 700; }
.qx-foot { flex: 1 0 auto; display: flex; flex-direction: column; gap: .9rem; }
/* (the note straight under the quote, short and quiet; in a wall, the "Member" line at the foot of the card, level
   with its row's) */
.qx-foot > .quote-disc { margin-top: auto; }
.quote-note { font-size: .9375rem; line-height: 1.5; color: var(--ink-note); }
.quote-disc { padding-top: .9rem; border-top: 1px solid rgba(160, 175, 255, .1); font-size: .9375rem; color: var(--ink-soft); }

/* wide (a quote with its card, beside another on a computer, or leading a wall): the slab in a column of its own;
   the member, the quote, the strip and the note under each other beside it */
@container qx (min-width: 520px) {
  .qx.has-card .qx-body { --sw: clamp(150px, 31cqi, 232px); --cg: clamp(22px, 4.6cqi, 40px); display: grid; grid-template-columns: var(--sw) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr; grid-template-areas: "slab who" "slab quote" "slab strip" "slab foot"; column-gap: var(--cg); row-gap: 1.15rem; align-items: start; }
  .qx.has-card .qx-main { display: contents; }
  .qx.has-card .qx-main > .qs { grid-area: slab; float: none; width: auto; margin: 0; }
  .qx.has-card .qx-who { grid-area: who; margin: 0; }
  .qx.has-card .qx-quote { grid-area: quote; }
  .qx.has-card .qx-quote p { font-size: 1.1875rem; }
  .qx.has-card .qr { grid-area: strip; }
  .qx.has-card .qx-foot { grid-area: foot; margin: 0; align-self: start; }
}
/* a quote with a result across a wall's whole row: the slab and the quote a size up */
@container qx (min-width: 940px) {
  .qx.has-card .qx-body { --sw: clamp(210px, 20cqi, 262px); --cg: clamp(30px, 4cqi, 54px); }
  .qx.has-card .qx-quote p { font-size: clamp(1.3rem, 2cqi, 1.55rem); line-height: 1.5; }
  .qx.has-card :is(.qr, .qx-foot) { max-width: 48rem; }
}

/* the lit phrases: numbers glow on a band of the game's colour, phrases get a fine rule; the words never change */
.qm { --fill: 100%; color: inherit; background: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .9s var(--ease) calc(.9s + var(--i, 0) * 110ms + var(--k, 0) * 220ms); }
.qm.is-num { white-space: nowrap; font-weight: 700; color: #fff; padding: 0 .14em; margin: 0 -.06em; border-radius: .18em;
  background: linear-gradient(90deg, rgba(var(--w), .5), rgba(var(--w), .26)) no-repeat 0 92% / var(--fill) .52em;
  text-shadow: 0 0 .8em rgba(var(--w), .95), 0 0 .18em rgba(var(--w), .6); }
.qm:not(.is-num) { color: #fff; padding-bottom: .04em; background: linear-gradient(90deg, rgba(var(--w), .95), rgba(var(--w), .35)) no-repeat 0 100% / var(--fill) 2px; }

/* The slab: a clear case, a label on top, the card in the well under it (a picture of that very printing, or a
   plain face naming it until there is one). Our own silver label: the card, the set, "Graded" and the grade, no
   grading company's name or marks. */
.qs { container-type: inline-size; position: relative; perspective: 1100px; }
.qs-case { position: relative; padding: 4.6cqi; border-radius: 7.2cqi; transform-style: preserve-3d; transform: rotateX(3deg) rotateY(13deg); transition: transform .7s var(--ease);
  background: linear-gradient(155deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 28%, rgba(255, 255, 255, .025) 64%, rgba(255, 255, 255, .13));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), inset 0 0 0 2.4cqi rgba(255, 255, 255, .035), inset 0 0 0 calc(2.4cqi + 1px) rgba(255, 255, 255, .1), inset 0 0 30px rgba(255, 255, 255, .06),
    0 46px 60px -36px #000, 0 0 80px -26px rgba(var(--w), .6); }
/* (the case's back, a little behind it: its thickness shows as it tips) */
.qs-case::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transform: translateZ(-10px); pointer-events: none;
  background: linear-gradient(155deg, rgba(210, 220, 255, .14), rgba(210, 220, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.qs-label { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2cqi 3.4cqi; padding: 3.4cqi 4.2cqi; border-radius: 3.4cqi; color: #0d1224;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 3px), linear-gradient(100deg, #b9c0cc, #eef1f6 20%, #cfd5df 42%, #f6f7fa 60%, #c3c9d4 82%, #e4e8ef);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 2px 10px rgba(0, 0, 0, .35); }
.qs-lines { display: grid; gap: .7cqi; min-width: 0; font: 600 max(7.5px, 4.3cqi)/1.15 var(--text); letter-spacing: .09em; text-transform: uppercase; color: #3b4460; overflow-wrap: anywhere; }
.qs-name { font: 800 max(11px, 8.6cqi)/.95 var(--display); letter-spacing: .02em; color: #0d1224; }
.qs-grade { display: grid; justify-items: center; align-content: center; gap: .8cqi; padding-left: 3.4cqi; border-left: 1px solid rgba(13, 18, 36, .22); }
.qs-grade small { font: 700 max(7px, 3.7cqi)/1 var(--text); letter-spacing: .07em; text-transform: uppercase; color: #3b4460; }
/* (a small slab, a phone's: the label's letters a little closer, so its lines keep to one each) */
@container (max-width: 190px) { .qs-lines { letter-spacing: .035em; } .qs-label { padding-inline: 3.6cqi; column-gap: 2.6cqi; } .qs-grade { padding-left: 2.6cqi; } }
.qs-grade b { font: 800 max(20px, 18cqi)/.82 var(--display); letter-spacing: -.02em; }
/* the well, and the card in it */
.qs-window { position: relative; margin-top: 3.4cqi; padding: 2.4cqi; border-radius: 4.8cqi;
  background: radial-gradient(120% 40% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%), #030409;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 10px 22px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .5); }
.qs-card { display: block; width: 100%; height: auto; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 3.8cqi; background: #0b1020; }
/* (no picture of that printing yet: a plain face in the well, the card's name, set, number and printing on a quiet
   foil of small starbursts, a picture of nothing) */
.qs-face { position: relative; display: grid; align-content: center; justify-items: center; gap: 3.2cqi; aspect-ratio: 63 / 88; padding: 8cqi 6cqi; overflow: hidden;
  border-radius: 3.8cqi; text-align: center; color: #fff;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><g fill='none' stroke='white' stroke-linecap='round'><g stroke-opacity='.34' stroke-width='.9'><path d='M14 6v4M14 18v4M6 14h4M18 14h4M8.3 8.3l2.2 2.2M17.5 17.5l2.2 2.2M8.3 19.7l2.2-2.2M17.5 10.5l2.2-2.2'/></g><g stroke-opacity='.22' stroke-width='.8'><path d='M42 33v3M42 44v3M35 40h3M46 40h3M37.1 35.1l1.8 1.8M45.1 43.1l1.8 1.8M37.1 44.9l1.8-1.8M45.1 36.9l1.8-1.8'/></g></g><circle cx='31' cy='9' r='.9' fill='white' fill-opacity='.4'/><circle cx='6' cy='44' r='.8' fill='white' fill-opacity='.3'/><circle cx='26' cy='50' r='.7' fill='white' fill-opacity='.3'/></svg>") 0 0 / 22cqi 22cqi,
    conic-gradient(from 200deg at 32% 28%, rgba(255, 122, 198, .14), rgba(255, 216, 110, .12), rgba(125, 245, 196, .12), rgba(114, 185, 255, .16), rgba(255, 122, 198, .14)),
    radial-gradient(85% 55% at 50% 46%, rgba(var(--w), .38), transparent 74%), linear-gradient(165deg, #1a2858, #070b1c 78%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 2.6cqi rgba(7, 11, 28, .55), inset 0 0 0 calc(2.6cqi + 1px) rgba(var(--w), .35); }
.qs-face-set, .qs-face-no { font: 600 max(8px, 4.6cqi)/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-wrap: balance; }
.qs-face-name { font: 800 max(18px, 15cqi)/.9 var(--display); letter-spacing: .01em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 30%, color-mix(in oklab, rgb(var(--w)) 45%, white)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 .35em rgba(var(--w), .55)); }
.qs-face-no { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.qs-face-print { margin-top: 1.6cqi; padding: 1.6cqi 4.4cqi; border-radius: 999px; font: 800 max(9px, 5.4cqi)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #0d1224;
  background: linear-gradient(100deg, #ffb3dc, #ffe39a 30%, #b9ffe0 55%, #a9d3ff 80%, #e3c4ff); box-shadow: 0 0 18px -4px rgba(var(--w), .9), inset 0 0 0 1px rgba(255, 255, 255, .7); }
/* (the light passing over the card, rainbow as on a holo: hidden at rest, it crosses once as the card arrives and
   follows the pointer while the slab is held) */
.qs-sheen { position: absolute; inset: 2.4cqi; border-radius: 3.8cqi; overflow: hidden; pointer-events: none; }
.qs-sheen i { position: absolute; top: -25%; bottom: -25%; left: 0; width: 70%; translate: -100% 0; rotate: 12deg; opacity: 0; transition: transform .6s var(--ease), opacity .4s;
  background: linear-gradient(90deg, transparent 10%, rgba(255, 122, 198, .22) 26%, rgba(255, 216, 110, .24) 36%, rgba(255, 255, 255, .45) 50%, rgba(125, 245, 196, .24) 64%, rgba(114, 185, 255, .22) 74%, transparent 90%); }
.qx.is-held .qs-sheen i { opacity: .6; will-change: transform; transition: transform .16s linear, opacity .4s; }
/* (the light on the case: a fixed streak across the plastic and a soft spot that follows the pointer) */
.qs-light { position: absolute; z-index: 2; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, .07) 40%, transparent 49%, transparent 64%, rgba(255, 255, 255, .04) 70%, transparent 76%); }
.qs-light i { position: absolute; left: 30%; top: 20%; width: 80%; height: 50%; translate: -50% -50%; opacity: .7;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .2), transparent 72%); transition: transform .5s var(--ease), opacity .4s; }
.qx.is-held .qs-light i { opacity: 1; will-change: transform; transition: transform .16s linear, opacity .4s; }
.qx.is-held .qs-case { transition: transform .14s linear; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .qs-case { will-change: transform; }
}
/* a lead quote's slab: a beam of its game's colour from the top of the card, hottest at its source, and the
   scope's brackets at its corners, as on the hero's card */
.qs-beam { position: absolute; z-index: -1; left: 50%; top: calc(var(--pad) * -1 - 2px); width: 180%; height: calc(100% + var(--pad)); translate: -50% 0; pointer-events: none;
  background: radial-gradient(24% 11% at 50% 0%, rgba(var(--w), .8), transparent 80%),
    conic-gradient(from 161deg at 50% -2%, transparent, rgba(var(--w), .14) 9deg, rgba(var(--w), .36) 19deg, rgba(var(--w), .14) 29deg, transparent 38deg, transparent);
  -webkit-mask-image: linear-gradient(#000 30%, transparent 97%); mask-image: linear-gradient(#000 30%, transparent 97%); }
.qs-corners { position: absolute; inset: 0; pointer-events: none; }
.qs-corners i { position: absolute; width: 18px; height: 18px; border: 2px solid rgb(var(--w)); border-color: color-mix(in oklab, rgb(var(--w)) 72%, white); opacity: .9; }
.qs-corners i:nth-child(1) { left: -11px; top: -11px; border-right: 0; border-bottom: 0; }
.qs-corners i:nth-child(2) { right: -11px; top: -11px; border-left: 0; border-bottom: 0; }
.qs-corners i:nth-child(3) { left: -11px; bottom: -11px; border-right: 0; border-top: 0; }
.qs-corners i:nth-child(4) { right: -11px; bottom: -11px; border-left: 0; border-top: 0; }

/* No card named: a plain card with the member's initials (or their own photo, with their OK). It claims nothing. */
.qk { container-type: inline-size; position: relative; display: grid; place-items: center; aspect-ratio: 63 / 88; border-radius: 9px; overflow: hidden;
  background: linear-gradient(125deg, rgba(255, 255, 255, .09), transparent 30%, transparent 62%, rgba(255, 255, 255, .05)),
    repeating-linear-gradient(135deg, rgba(var(--w), .05) 0 1px, transparent 1px 7px),
    radial-gradient(90% 60% at 50% 42%, rgba(var(--w), .24), transparent 72%), linear-gradient(160deg, #182042, #080b19 72%);
  box-shadow: inset 0 0 0 1px rgba(var(--w), .55), inset 0 0 0 7px #0b0f22, inset 0 0 0 8px rgba(var(--w), .22), 0 24px 40px -26px #000; }
.qk b { font: 800 44cqi/1 var(--display); letter-spacing: .01em;
  background: linear-gradient(180deg, #fff 12%, rgb(var(--w)) 70%, color-mix(in oklab, rgb(var(--w)) 50%, white)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qk img { width: 100%; height: 100%; object-fit: cover; }

/* The result, their story in three steps: bought for, came back, a recent sale of that card at that grade (its day
   small under the price). On a phone the first two side by side and the sale under them; with room, left to right. */
.qr { clear: both; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px rgba(var(--w), .38); }
.qr li { position: relative; display: grid; align-content: start; gap: .3rem; min-width: 0; padding: .8rem 1rem; }
.qr li.qr-sold, .qr li:first-child:nth-last-child(2) { grid-column: 1 / -1; }
.qr li.qr-graded { border-left: 1px solid rgba(var(--w), .22); padding-left: 1.2rem; }
.qr li.qr-sold:not(:first-child) { border-top: 1px solid rgba(var(--w), .22); }
/* (the step between: a small chevron on the line) */
.qr li:not(:first-child)::before { content: ""; position: absolute; width: 9px; height: 9px; border-top: 1.5px solid rgba(var(--w), .9); border-right: 1.5px solid rgba(var(--w), .9); background: #0d1224; }
.qr li.qr-graded::before { top: 50%; left: 0; translate: -55% -50%; rotate: 45deg; }
.qr li.qr-sold::before { top: 0; left: 1.15rem; translate: 0 -55%; rotate: 135deg; }
.qr small { font: 600 .8125rem/1.25 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-note); }
.qr b { font: 800 1.75rem/1 var(--display); letter-spacing: .005em; font-variant-numeric: tabular-nums; color: var(--ink); }
.qr-sold { background: radial-gradient(130% 140% at 100% 0%, rgba(var(--w), .32), transparent 62%); }
.qr-sold small { color: var(--ink-soft); }
.qr-sold b { font-size: 2.1rem; color: #fff; text-shadow: 0 0 24px rgba(var(--w), .85); }
.qr-when { font-size: .875rem; line-height: 1.3; white-space: nowrap; color: var(--ink-soft); }
/* (with room: the steps side by side, the first two as wide as their words, the sale taking the rest; the labels share
   a row and the figures the next, so the three figures sit on one line however the sale's label wraps) */
@container qx (min-width: 520px) {
  .qx.has-card .qr { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .qx.has-card .qr:has(> li:nth-child(2):last-child) { grid-template-columns: auto minmax(0, 1fr); }
  .qx.has-card .qr:has(> li:nth-child(3)) { grid-template-columns: auto auto minmax(0, 1fr); }
  .qx.has-card .qr li { grid-row: span 3; grid-column: auto; grid-template-rows: subgrid; row-gap: .3rem; }
  .qx.has-card .qr small { align-self: end; text-wrap: balance; }
  .qx.has-card .qr b { align-self: baseline; }
  .qx.has-card .qr li:not(.qr-sold) small { white-space: nowrap; }
  .qx.has-card .qr li:not(:first-child) { border-top: 0; border-left: 1px solid rgba(var(--w), .22); padding-left: 1.2rem; }
  .qx.has-card .qr li:not(:first-child)::before { top: 50%; left: 0; translate: -55% -50%; rotate: 45deg; }
}
@container qx (min-width: 940px) {
  .qx.has-card .qr b { font-size: 2.1rem; }
  .qx.has-card .qr-sold b { font-size: 2.6rem; }
}

/* the way on, right after the quotes: the quoted members' initials and the page's own button, between two hairlines */
.proof-cta { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 22px); margin: 0 0 clamp(36px, 5vw, 64px); }
.proof-cta::before, .proof-cta::after { content: ""; flex: 1 1 0; max-width: 20rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 175, 255, .35)); }
.proof-cta::after { background: linear-gradient(270deg, transparent, rgba(160, 175, 255, .35)); }
.proof-cta .btn { flex: none; min-height: 56px; padding: 0 2.1rem; font-size: 1.0625rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 44px -14px rgba(142, 162, 255, .8), 0 0 0 6px rgba(142, 162, 255, .08); }
.pc-faces { display: flex; align-items: center; flex: none; padding: 7px 12px 7px 19px; border-radius: 999px; background: #080b19; box-shadow: inset 0 0 0 1px var(--line); }
.pc-face { display: grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: -9px; border-radius: 50%; font: 700 .9375rem/1 var(--display); letter-spacing: .03em; color: #fff;
  background: radial-gradient(circle at 32% 26%, rgba(var(--w), .62), rgba(var(--w), .22)); box-shadow: 0 0 0 2.5px #080b19, inset 0 0 0 1px rgba(var(--w), .65); }
.pc-face.is-more { --w: 142, 162, 255; font-size: .8125rem; }
@media (max-width: 520px) {
  .proof-cta { flex-direction: column; gap: 14px; }
  .proof-cta .btn { align-self: stretch; }
  .proof-cta::before, .proof-cta::after { display: none; }
}

/* the motion, once each as a card comes on screen: the slab tips in and settles, the beam comes on, its light crosses
   the card, the brackets close in, the strip's steps arrive one after another and the phrases draw in; after the
   quotes, the members' initials one by one */
@keyframes qs-pass { from { transform: translateX(0); opacity: 0; } 20%, 70% { opacity: .75; } to { transform: translateX(245%); opacity: 0; } }
@keyframes qs-beam-on { 0% { opacity: 0; } 14% { opacity: .8; } 22% { opacity: .2; } 34% { opacity: .95; } 46% { opacity: .55; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .js .qx .qs-case { transition: transform 1.15s var(--ease) calc(var(--i, 0) * 110ms + 140ms); }
  .js .qx:not(.is-in) .qs-case { transform: rotateX(16deg) rotateY(-34deg) translate3d(0, 30px, -40px); }
  .js .qx.is-held .qs-case { transition: transform .14s linear; }
  .qx.is-in:not(.is-held) .qs-sheen i { animation: qs-pass 1.8s cubic-bezier(.45, .05, .35, 1) calc(var(--i, 0) * 110ms + .8s) backwards; }
  .js .qx:not(.is-in) .qs-beam { opacity: 0; }
  .qx.is-in .qs-beam { animation: qs-beam-on 1.3s ease-out .25s backwards; }
  .js .qx .qs-corners i { transition: opacity .5s var(--ease) 1.05s, transform .7s var(--ease) 1.05s; }
  .js .qx:not(.is-in) .qs-corners i { opacity: 0; }
  .js .qx:not(.is-in) .qs-corners i:nth-child(1) { transform: translate(-10px, -10px); } .js .qx:not(.is-in) .qs-corners i:nth-child(2) { transform: translate(10px, -10px); }
  .js .qx:not(.is-in) .qs-corners i:nth-child(3) { transform: translate(-10px, 10px); } .js .qx:not(.is-in) .qs-corners i:nth-child(4) { transform: translate(10px, 10px); }
  .js .qx .qk { transition: opacity .7s var(--ease) calc(var(--i, 0) * 110ms + 140ms), transform .9s var(--ease) calc(var(--i, 0) * 110ms + 140ms); }
  .js .qx:not(.is-in) .qk { opacity: 0; transform: translateY(18px) scale(.94); }
  .js .qx .qr li { transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .js .qx .qr li:nth-child(2) { transition-delay: .55s; } .js .qx .qr li:nth-child(3) { transition-delay: .85s; }
  .js .qx:not(.is-in) .qr li { opacity: 0; transform: translateY(8px); }
  .js .qx:not(.is-in) .qm { --fill: 0%; }
  .js .proof-cta .pc-face { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; transition-delay: calc(var(--j, 0) * 70ms + 250ms); }
  .js .proof-cta:not(.is-in) .pc-face { transform: scale(.3); opacity: 0; }
}

/* ---------------------------------------------------------------- pricing: CONFIG.pricing, drawn by landing.js */
.pricing::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(46% 34% at 50% 46%, rgba(var(--world), .13), transparent 72%), linear-gradient(180deg, transparent, var(--ground) 14% 86%, transparent); }
.plans-value { max-width: 54ch; padding: .7rem 1.1rem; border-radius: 14px; background: rgba(142, 162, 255, .08); font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.bill { margin-top: clamp(28px, 4.5vh, 48px); display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; }
.bill-words { display: grid; justify-items: center; gap: .2rem; margin-top: clamp(18px, 2.6vh, 26px); text-align: center; }
.bill-now { font-size: .9375rem; color: var(--ink-note); }
.bill-switch { margin-left: 0; }
.bill-switch button { display: inline-flex; align-items: center; gap: .55rem; padding: 0 1.05rem; font-size: .9375rem; }
.bill-save { padding: .3rem .5rem; border-radius: 999px; background: rgba(142, 162, 255, .16); color: var(--ink); font: 600 .8125rem/1 var(--text); }
.bill-switch button[aria-pressed="true"] .bill-save { background: var(--accent); color: var(--accent-ink); }
.bill-trial { font-size: 1rem; color: var(--ink-soft); }
.bill-trial b { font-weight: 600; color: var(--ink); }
.plans { position: relative; margin-top: clamp(24px, 4vh, 44px); display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
/* Two plans: narrower than the page, so each card isn't stretched half its width. */
.pricing[data-n="2"] .plans-box { max-width: 70rem; margin-inline: auto; }
/* (each plan's name, price, button and list sit on the same four lines across the row) */
.plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: clamp(22px, 2.4vw, 34px); border-radius: 22px;
  background: linear-gradient(165deg, rgba(24, 32, 66, .6), rgba(9, 12, 27, .95)); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--edge); }
.plan.is-pick { background: radial-gradient(100% 55% at 50% 0%, rgba(142, 162, 255, .2), transparent 72%), linear-gradient(165deg, rgba(30, 40, 84, .78), rgba(9, 12, 27, .96));
  box-shadow: inset 0 0 0 1px rgba(142, 162, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .16), 0 50px 100px -60px rgba(142, 162, 255, .6); }
.plan-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; }
.plan h3 { font-size: clamp(2.1rem, 3vw, 2.7rem); }
.plan.is-pick h3 { color: var(--accent); }
.plan-for { margin-top: .55rem; max-width: 30ch; font-size: 1rem; line-height: 1.45; color: var(--ink-soft); }
.plan-price { margin-top: 1.6rem; }
.plan-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; }
.plan-amount b { font: 800 clamp(3.1rem, 4.4vw, 4.25rem)/.85 var(--display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.plan-amount b small { margin-left: .03em; font-size: .5em; letter-spacing: 0; vertical-align: .72em; }
/* "about" before a yearly plan's month that isn't whole cents ($200 a year: about $16.67), small, on the price's line */
.plan-amount b .plan-about { margin: 0 .3em 0 0; font: 700 max(11px, .2em)/1 var(--text); letter-spacing: .14em; text-transform: uppercase; vertical-align: .55em; }
.plan-amount span { font-size: 1rem; color: var(--ink-soft); }
.plan-amount.is-tbd b { font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1; }
.plan-bill { margin-top: .6rem; font-size: .9375rem; color: var(--ink-soft); }
.plan-bill b { font-weight: 600; color: var(--ink); }
.plan-go { margin-top: 1.4rem; width: 100%; }
.plan-feats { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid rgba(160, 175, 255, .12); display: flex; flex-direction: column; }
.plan-feats > ul:not(:last-child) { margin-bottom: 1.4rem; }
.plan-lead { margin-bottom: .95rem; font: 600 .8125rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-note); }
.plan-feats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.plan-feats li { position: relative; padding-left: 1.5rem; line-height: 1.45; }
.plan-feats li::before { content: ""; position: absolute; left: 1px; top: .6em; width: 7px; height: 7px; border-radius: 1.5px; background: var(--accent); rotate: 45deg; }
.soon { display: inline-block; margin-left: .5rem; padding: .2rem .5rem; border: 1px solid rgba(160, 175, 255, .3); border-radius: 999px; font: 600 .8125rem/1 var(--text); font-style: normal; color: var(--ink-soft); white-space: nowrap; vertical-align: .08em; }
/* On a phone, above the sideways plans: each plan's name and price, the one on screen pressed (landing.js). */
.plan-pick { display: none; }
.plans-note { list-style: none; margin: clamp(22px, 3.5vh, 36px) auto 0; padding: 0; display: grid; justify-items: center; gap: .45rem; max-width: 46rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-note); text-align: center; }
.plans-note li { text-wrap: balance; }
.plans-note .soon { margin: 0 .3rem 0 0; }

/* Each plan drawn as a graded slab (landing.js, a plan's `slab` and `card`): a clear case, the label on top, and in
   the window under it a trading card holding the plan. Holo: a silver label graded 9 over a silver holo card.
   Secret Rare: a black label, Pristine 10 in gold with four 10 subgrades, over an etched gold card. Our own label
   and our own cards: no grading company's name or marks, no game's frame or symbols.
   A slab is one object drawn to scale: everything inside it is measured in its own width (cqi), so it is the same
   picture at any size. Its size comes from the window: the switch over the plans and a whole slab fit the window
   under the nav with room to spare (--slab-h), its width follows from that, and the card inside is a real card's
   63 by 88. The card's words are in em of its own type size, which is never under 13px: where that floor is reached
   (a narrow card, a phone) the card grows a little taller rather than its words smaller.
   At rest nothing moves or is drawn again. The foils, the glints and the art's light are painted once, where the
   light rests; what moves (the slab's tip, the spot of light on its case, the sheen over a card, a scope's sweep) is
   a transform on a layer of its own: once as a card comes on screen, and under the pointer while a slab is held. */
.pricing {
  --gap: clamp(16px, 2vw, 28px);
  /* (the window under the nav, less the 16px over the switch, the 52px switch, the 26px gap under it and 36px of air
     under the slab: never more than 80% of the window. Shorter windows trim what the card holds below) */
  --slab-h: clamp(520px, min(100svh - var(--top) - 130px, 80svh), 900px);
  /* (inside its 10px padding a slab is 168.77% as tall as it is wide: the label 28, the gap and the window's padding
     2.2 and 2.8, and the card 97.2 wide, so 97.2 × 88 / 63 = 135.77 tall) */
  --sw: clamp(330px, (var(--slab-h) - 20px) / 1.6877 + 20px, 480px);
}
.pricing[data-n="2"] .plans-box:has(.pslab) { max-width: none; }
.plans:has(.pslab) { margin-top: 26px; gap: var(--gap); justify-content: center; }
/* Each slab in a column of its own (landing.js pricingScene): under it, the recommended plan's 10-minute offer and a
   Buy button a plan (the owner, 2026-11-03: the timer on the Secret Rare section, very visible, and "a BUY BUTTON
   below each option"). The column holds the perspective the slab tips in. */
.plan-col { display: flex; flex-direction: column; gap: 14px; perspective: 1600px; }
.plan-col > .plan { flex: none; }
.plan-buy { flex-direction: column; gap: .2rem; min-height: 66px; padding: .65rem 1.5rem; }
.plan-buy-word { font: 800 1.2rem/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.plan-buy-price { font: 600 .875rem/1.2 var(--text); opacity: .82; }
.plan-buy--pick { border-color: #7a5a1c; background: linear-gradient(180deg, #f6e3a5, #c9973f); color: #1a1205;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 30px -14px rgba(226, 190, 110, .7); }
@media (hover: hover) and (pointer: fine) {
  .plan-buy--pick:hover { background: linear-gradient(180deg, #fbecbc, #d6a54a); transform: translateY(-1px); }
}
.plan-offer { padding: 1.05rem 1.15rem 1.15rem; border-radius: 16px; border: 1px solid rgba(250, 204, 21, .5); text-align: center;
  background: linear-gradient(180deg, rgba(250, 204, 21, .15), rgba(250, 204, 21, .04)); box-shadow: 0 0 70px -24px rgba(250, 204, 21, .55); }
.plan-offer[hidden] { display: none; }
.plan-offer-kicker { margin: 0; font: 700 .8125rem/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: #facc15; }
.plan-offer-clock { margin: .35rem 0 0; }
.plan-offer-clock b { font: 800 clamp(3rem, 4.6vw, 4rem)/.95 var(--display); letter-spacing: -.01em; color: #facc15; font-variant-numeric: tabular-nums; }
.plan-offer-clock span { margin-left: .45rem; font: 600 1rem/1 var(--text); color: var(--ink-soft); }
.plan-offer-words { margin: .55rem auto 0; max-width: 36ch; font-size: 1rem; line-height: 1.45; color: var(--ink); text-wrap: balance; }
.plan-offer-words b { font-weight: 700; color: #facc15; }
/* (the strip over the plans: the offer the moment Pricing is on screen) */
.plans-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .8rem; margin: 18px auto 0; max-width: 48rem;
  padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid rgba(250, 204, 21, .45); background: rgba(250, 204, 21, .1); text-align: center;
  font-size: 1rem; line-height: 1.35; color: var(--ink); }
.plans-offer[hidden] { display: none; }
.plans-offer-clock { font: 800 1.45rem/1 var(--display); color: #facc15; font-variant-numeric: tabular-nums; }
.plans-offer b[data-offer-when] { color: #facc15; }
.pricing[data-n="2"] .plans:has(.pslab) { grid-template-columns: repeat(2, min(var(--sw), 50% - var(--gap) / 2)); }
.plan.pslab { container-type: inline-size; position: relative; display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; padding: 10px; border-radius: 22px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .045) 28%, rgba(255, 255, 255, .02) 64%, rgba(255, 255, 255, .11));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 0 0 6px rgba(255, 255, 255, .035), inset 0 0 0 7px rgba(255, 255, 255, .1), inset 0 0 30px rgba(255, 255, 255, .06), 0 60px 100px -56px #000; }
.js .plans .pslab[data-in] { transition: opacity .62s var(--ease) calc(var(--i, 0) * 80ms), transform .62s var(--ease) calc(var(--i, 0) * 80ms), rotate .45s var(--ease); }
.js .plans .pslab.is-held[data-in] { transition: opacity .62s var(--ease), transform .62s var(--ease), rotate .12s linear; }
/* (under a mouse a slab stays a layer of its own, so tipping it never re-layers or repaints it) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .plan.pslab { will-change: transform; }
}
.plan.pslab.is-pick { background: linear-gradient(155deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .05) 28%, rgba(255, 255, 255, .02) 64%, rgba(255, 255, 255, .12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), inset 0 0 0 6px rgba(255, 255, 255, .035), inset 0 0 0 7px rgba(255, 255, 255, .12), inset 0 0 30px rgba(255, 255, 255, .07), 0 60px 100px -56px #000, 0 0 130px -46px rgba(226, 190, 110, .55); }
.pslab-tag { position: absolute; z-index: 3; top: 0; left: 50%; translate: -50% -50%; padding: .4rem .8rem; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, #f6e3a5, #c9973f); color: #1a1205; font: 700 .75rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 22px -8px rgba(226, 190, 110, .7); }
/* (the light on the case, over label and card: a fixed streak across the plastic, and a soft spot where the light is,
   up and to the left at rest and under the pointer while the slab is held (landing.js moves it)) */
.pslab-light { position: absolute; z-index: 2; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .055) 42%, transparent 50%, transparent 66%, rgba(255, 255, 255, .03) 71%, transparent 76%); }
.pslab-light i { position: absolute; left: 30%; top: 20%; width: 68%; height: 52%; translate: -50% -50%; opacity: .75;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .2), transparent 72%); transition: transform .5s var(--ease), opacity .4s; }
.pslab.is-held .pslab-light i { opacity: 1; will-change: transform; transition: transform .16s linear, opacity .4s; }

/* the label (its small print keeps a floor on a narrow slab, and the label grows to hold it rather than clip it) */
.pslab-label { position: relative; overflow: hidden; flex: none; height: auto; min-height: 28cqi; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto;
  gap: .6cqi 3cqi; padding: 2.4cqi 3.4cqi 2cqi; border-radius: 2.8cqi; }
.pslab-id { grid-column: 1; grid-row: 1; display: grid; gap: .8cqi; align-content: start; min-width: 0; }
.pslab-set, .pslab-line { font: 600 max(9.5px, 2.35cqi)/1.2 var(--text); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.plan.pslab .pslab-label h3 { font: 800 6.4cqi/.92 var(--display); letter-spacing: .01em; text-transform: uppercase; color: inherit; }
.pslab-grade { grid-column: 2; grid-row: 1; display: grid; justify-items: end; align-content: start; text-align: right; }
.pslab-grade small { font: 700 max(9.5px, 2.5cqi)/1 var(--text); letter-spacing: .2em; text-transform: uppercase; }
.pslab-grade b { margin-top: .6cqi; font: 800 10.5cqi/.8 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pslab-subs { grid-column: 1 / -1; grid-row: 2; align-self: center; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pslab-subs span { display: flex; align-items: baseline; justify-content: center; gap: 1.3cqi; padding: .5cqi 0; }
.pslab-subs span + span { border-left: 1px solid rgba(226, 190, 110, .3); }
.pslab-subs small { font: 600 max(8.5px, 2.1cqi)/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #b8964f; }
.pslab-subs b { font: 800 3.8cqi/1 var(--display); }
.pslab-foot { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 2cqi; padding-top: 1.1cqi; border-top: 1px solid currentColor;
  font: 600 max(9px, 2.2cqi)/1 var(--text); letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.pslab-code { width: 30cqi; height: 3.4cqi; fill: currentColor; }

/* silver label: brushed metal, ink lettering; with no subgrades, its name and grade sit in the middle of the room
   above the cert line, as tall as the black label */
.pslab--silver .pslab-label { grid-template-rows: 1fr auto 1fr auto; }
.pslab--silver :is(.pslab-id, .pslab-grade) { grid-row: 2; }
.pslab--silver .pslab-foot { grid-row: 4; }
.pslab--silver .pslab-label { color: #0d1224;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 3px), linear-gradient(100deg, #b9c0cc, #eef1f6 20%, #cfd5df 42%, #f6f7fa 60%, #c3c9d4 82%, #e4e8ef);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 2px 10px rgba(0, 0, 0, .35); }
.pslab--silver .pslab-set, .pslab--silver .pslab-line { color: #3b4460; }
.pslab--silver .pslab-foot { border-top-color: rgba(13, 18, 36, .22); color: #3b4460; }
/* black label: deep black, gold foil lettering, a gold rule inside the edge */
.pslab--black .pslab-label { color: #e9cf86;
  background: radial-gradient(80% 120% at 85% 0%, rgba(226, 190, 110, .12), transparent 60%), linear-gradient(160deg, #17171c, #050507 58%, #111116);
  box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .75), inset 0 0 0 4px #07070a, inset 0 0 0 5px rgba(232, 200, 120, .32), 0 2px 12px rgba(0, 0, 0, .5); }
.pslab--black .pslab-label :is(h3, .pslab-grade b, .pslab-subs b) { background: linear-gradient(180deg, #fbecbc 8%, #d9ac52 52%, #f3d98b 78%, #b9893a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.pslab--black .pslab-label h3 { color: transparent; }
.pslab--black .pslab-set, .pslab--black .pslab-line, .pslab--black .pslab-grade small { color: #c9a75e; }
.pslab--black .pslab-foot { border-top-color: rgba(232, 200, 120, .28); color: #b8964f; }
.pslab--black .pslab-code { fill: #c9a75e; }

/* the card well: the slab's inner frame, a thin dark gap around the card as in a real case */
.pslab-window { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; margin-top: 2.2cqi; padding: 1.4cqi; border-radius: 6.1cqi;
  background: radial-gradient(120% 40% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%), #030409;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 10px 22px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .5); }

/* The card in the slab (landing.js, planCard): its printed frame, the face inside it, and on the face, top to bottom,
   the name bar, the art window, the strip, the price in the middle, the plan's headlines in a printed text box and
   the small print. Holo: a silver frame and rainbow holofoil. Secret Rare: etched gold, its words printed straight on
   the gold, the headlines in a see-through box so the etching shows. The parts above the price are the same height
   on both cards, so the two prices sit on one line; the text box takes whatever room is left. */
.pcard { position: relative; isolation: isolate; flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; aspect-ratio: 63 / 88;
  font-size: max(13px, 3.6cqi); padding: .95em; border-radius: 1.3em; background: var(--frame); color: var(--c-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 0 0 2px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .7), 0 20px 36px -18px #000; }
/* (the frame's own foil, where the light rests) */
.pcard::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: var(--frame-foil);
  background-size: 260% 260%; background-position: 30% 20%; mix-blend-mode: overlay; opacity: .6; }
.pcard-face { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; padding: .5em .6em .4em; border-radius: .42em;
  background: var(--face); box-shadow: 0 0 0 1px var(--face-edge), inset 0 1px 0 rgba(255, 255, 255, .5); }
.pcard--holo { --c-ink: #10162b; --c-soft: #333c58; --c-line: rgba(16, 22, 43, .16); --c-line-strong: rgba(16, 22, 43, .38);
  --frame: linear-gradient(135deg, #8a93a5, #eef1f5 15%, #b2bac7 31%, #f9fafc 47%, #a0a9b8 64%, #e7eaf0 81%, #8b94a6);
  --frame-foil: linear-gradient(115deg, #ff7ac6, #ffd86e 12%, #7df5c4 24%, #72b9ff 36%, #b98cff 48%, #ff7ac6 60%, #ffd86e 72%, #7df5c4 84%, #72b9ff);
  --face: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 3px), linear-gradient(172deg, #f1f3f7, #dde1e9 34%, #cdd3dd 70%, #c4cbd7);
  --face-edge: rgba(40, 48, 70, .45); --token: radial-gradient(circle at 34% 28%, #fff, #d3d9e3 46%, #8f99ad); --token-ink: #182037;
  --strip: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .62) 18% 82%, rgba(255, 255, 255, 0));
  --glow: radial-gradient(closest-side, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34) 62%, rgba(255, 255, 255, 0));
  --box: rgba(255, 255, 255, .32);
  --box-rule: inset 0 0 0 1px rgba(16, 22, 43, .36), inset 0 0 0 3px rgba(255, 255, 255, .42), inset 0 0 0 4px rgba(16, 22, 43, .16); }
.pcard--secret { --c-ink: #21170a; --c-soft: #4a3714; --c-line: rgba(74, 50, 10, .2); --c-line-strong: rgba(74, 50, 10, .48);
  --frame: linear-gradient(135deg, #8a5f1c, #f6e09a 17%, #b9883a 34%, #fff1c4 50%, #a87a2c 68%, #ecd08a 85%, #8f6420);
  --frame-foil: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .9) 44%, transparent 56%, transparent 70%, rgba(255, 255, 255, .6) 78%, transparent 86%);
  --face: repeating-linear-gradient(45deg, rgba(255, 249, 225, .16) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, rgba(92, 60, 8, .11) 0 1px, transparent 1px 6px),
    linear-gradient(168deg, #f5df9b, #d8ad58 30%, #efd38b 55%, #c4943c 80%, #e3c172);
  --face-edge: rgba(80, 52, 8, .6); --token: radial-gradient(circle at 34% 28%, #fffbe8, #ecce7e 46%, #a77a2a); --token-ink: #2a1c06;
  --strip: linear-gradient(90deg, rgba(255, 248, 222, 0), rgba(255, 248, 222, .72) 18% 82%, rgba(255, 248, 222, 0));
  --glow: radial-gradient(closest-side, rgba(255, 248, 226, .84), rgba(255, 248, 226, .62) 58%, rgba(255, 248, 226, 0));
  --box: rgba(255, 247, 222, .55);
  --box-rule: inset 0 0 0 1px rgba(74, 50, 10, .45), inset 0 0 0 3px rgba(255, 247, 222, .35), inset 0 0 0 4px rgba(74, 50, 10, .22); }
.pcard :focus-visible { outline-color: var(--c-ink); }

/* name bar: the card's name and, on the right, its type */
.pcard-name { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: 0 .05em .32em .15em; }
.pcard-name b { font: 800 1.5em/1 var(--display); letter-spacing: .005em; color: var(--c-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.pcard-type, .pcard-cost { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--token); color: var(--token-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .3); }
.pcard-type { width: 1.6em; height: 1.6em; }
.pcard-type svg { width: 1.05em; height: 1.05em; }
.pcard-glyph .cut { stroke: #f4dc98; }
/* art window: a bevelled rim, the picture, and its foil over it (--art-r: its shape, which places the scope's sweep) */
.pcard-art { --art-r: 2.62; position: relative; flex: none; overflow: hidden; margin-inline: .1em; aspect-ratio: var(--art-r); border-radius: .2em; background: var(--art);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 3px var(--rim), 0 0 0 4px rgba(0, 0, 0, .38), 0 4px 10px 2px rgba(0, 0, 0, .22); }
.pcard-pic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pcard-art::before, .pcard-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pcard-strip { flex: none; align-self: center; margin-top: .8em; padding: .3em 2.2em; font: 600 max(10px, .7em)/1.2 var(--text); letter-spacing: .13em; text-transform: uppercase; text-align: center; white-space: nowrap;
  color: var(--c-soft); background: var(--strip); }

/* Holo's art: night blue, a scope over a climbing price line; dark foil that catches the light in one narrow
   prismatic band (and a fainter blue-violet echo beside it), a bright streak and a scatter of glints over a fine
   vertical grain, where the light rests: the band to the left of the scope, so the scope and its sweep stand on the
   dark night blue */
.pcard--holo { --rim: #a6afbe; --art: radial-gradient(90% 120% at 68% 34%, #2b3a80, #111842 52%, #070a1d); }
.pcard--holo .pcard-art::before { z-index: 1; mix-blend-mode: color-dodge; opacity: .62;
  background: linear-gradient(115deg, transparent 0 37%, #ff7ac6 41%, #ffd86e 44%, #7df5c4 47%, #72b9ff 50%, #b98cff 53%, transparent 57% 100%),
    linear-gradient(115deg, transparent 0 63%, rgba(114, 185, 255, .7) 67%, rgba(185, 140, 255, .7) 70%, transparent 74% 100%);
  background-size: 200% 200%, 200% 200%; background-position: 60% 20%, 56% 20%; }
.pcard--holo .pcard-art::after { z-index: 1; mix-blend-mode: color-dodge; opacity: .5;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  14 0 0 0 -9.6'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    linear-gradient(115deg, transparent 46%, rgba(255, 255, 255, .5) 50%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px);
  background-size: 160px 160px, 300% 300%, auto; background-position: 0 0, 68% 20%, 0 0; }
/* (the illustrator's line, as printed in a card's art corner, on a small plate so the art under it never hides it) */
.pcard-illus { position: absolute; z-index: 2; left: .4em; bottom: .35em; padding: .2em .45em .25em; border-radius: .15em; font: italic 500 max(9.5px, .66em)/1 var(--text); letter-spacing: .02em; pointer-events: none; }
.pcard--holo .pcard-illus { background: rgba(6, 9, 26, .78); color: #e6ecff; }
.pcard--secret .pcard-illus { background: rgba(33, 23, 10, .74); color: #f6df9c; }
.pc-grid { fill: none; stroke: rgba(170, 200, 255, .14); stroke-width: 1; }
.pc-glow { fill: none; stroke: rgba(130, 220, 255, .32); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
.pc-line { fill: none; stroke: #f4fbff; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.pc-dot { fill: #f4fbff; }
.pc-reticle > circle, .pc-reticle > path { fill: none; stroke: rgba(236, 248, 255, .92); stroke-width: 1.6; }
.pc-reticle .pc-fill { fill: #fff; stroke: none; }
.pc-dash { stroke-dasharray: 3 5; }
/* (the scope's sweep: a wedge of light, its bright edge leading, on its own layer over the picture's reticle. The
   picture is 320 by 180 cut to the window's shape, so the reticle (220, 106, radius 47) sits 68.75% across, at half
   the height plus 5% for each unit of the window's width to height, and is 29.375% of the window wide) */
.pcard-scan { position: absolute; z-index: 2; left: 68.75%; top: calc(50% + var(--art-r) * 5%); width: 29.375%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(transparent 0 45deg, rgba(196, 246, 255, 0) 45deg, rgba(196, 246, 255, .62) 88.4deg, rgba(228, 251, 255, .96) 88.4deg 90deg, transparent 90deg); }
/* Secret Rare's art: etched gold rays, a vault's dial, data points joined, a cut diamond stamped in relief, and a
   band of light across it */
.pcard--secret { --rim: #c99a45;
  --art: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 246, 210, .24) 0deg 1.5deg, rgba(120, 82, 18, .17) 1.5deg 3deg),
    radial-gradient(72% 95% at 50% 50%, #fff4cc, #efce7d 30%, #c99a42 68%, #9a6b22); }
.pcard--secret .pcard-art::after { z-index: 1; mix-blend-mode: soft-light; background: var(--frame-foil); background-size: 260% 260%; background-position: 30% 20%; }
/* (the whole gold face shimmers too, as a gold secret rare does, not just its frame: streaks of light over the gold,
   under the ink; soft light only ever lightens the gold behind the dark words) */
.pcard--secret .pcard-face { isolation: isolate; }
.pcard--secret .pcard-face::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--frame-foil);
  background-size: 260% 260%; background-position: 30% 20%; mix-blend-mode: soft-light; opacity: .9; }
.pc-ring { fill: none; stroke: rgba(84, 56, 10, .55); stroke-width: 1.4; }
.pc-ticks { fill: none; stroke: rgba(84, 56, 10, .62); stroke-width: 1.2; }
.pc-links { fill: none; stroke: rgba(84, 56, 10, .5); stroke-width: .7; }
.pc-star { fill: #fffaf0; stroke: none; }
/* (the diamond: four golds, fine cut lines, a shadow and a lit edge around it, its girdle and table drawn, and a
   band of light across it) */
.pcard-gem :is(.pc-f0, .pc-f1, .pc-f2, .pc-f3) { stroke: rgba(80, 52, 8, .55); stroke-width: .6; stroke-linejoin: round; }
.pcard-gem .pc-f0 { fill: #fff0c2; }
.pcard-gem .pc-f1 { fill: #ecc977; }
.pcard-gem .pc-f2 { fill: #c99a45; }
.pcard-gem .pc-f3 { fill: #9c6d24; }
.pc-gem-low { fill: rgba(70, 45, 6, .5); }
.pc-gem-high { fill: rgba(255, 246, 214, .8); }
.pc-gem-girdle { fill: none; stroke: rgba(80, 52, 8, .7); stroke-width: .9; }
.pc-gem-table { fill: none; stroke: rgba(255, 249, 226, .95); stroke-width: 1.1; stroke-linecap: round; }
.pc-gem-shine { mix-blend-mode: screen; opacity: .7; transform-box: fill-box; translate: -14% 0; }
.pc-spark { fill: #fffdf4; }

/* the price, in the middle of the card and on its centre line: what it costs, how it is billed, who it is for, and
   the button, over a soft pool of light (no box: a card prints its words on the card) */
.pcard-deal { position: relative; isolation: isolate; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: .15em; padding: .3em .5em .4em; text-align: center; }
.pcard-deal::before { content: ""; position: absolute; z-index: -1; inset: -.2em -.3em; pointer-events: none; background: var(--glow); }
.pcard .plan-price { margin-top: 0; display: grid; justify-items: center; }
/* (the unit goes under the number, so the number itself is on the centre line) */
.pcard .plan-amount { flex-direction: column; align-items: center; gap: .2em; }
.pcard .plan-amount b { font-size: 3.15em; color: var(--c-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.pcard .plan-amount span { font: 700 max(13px, .8em)/1 var(--text); letter-spacing: .16em; text-transform: uppercase; }
.pcard .plan-amount.is-tbd b { font-size: 1.9em; }
.pcard .plan-amount span, .pcard .plan-bill { color: var(--c-soft); }
.pcard .plan-bill { margin-top: .3em; font-size: 1em; line-height: 1.3; }
.pcard .plan-bill b { color: var(--c-ink); }
.pcard .plan-bill, .pcard .plan-for { text-wrap: balance; }
.pcard .plan-for { margin: .25em auto 0; max-width: 23em; font-size: 1em; line-height: 1.3; color: var(--c-ink); }
/* (the button a printed bar in the card's own language, led by the card's type as a headline is: not a web pill) */
.pcard .plan-go { width: 100%; min-height: 2.6em; margin-top: .55em; padding: .3em .8em; gap: .5em; border-radius: .3em; font-size: 1em; line-height: 1.2; white-space: normal; text-align: center; text-wrap: balance; }
.pcard .plan-go .pcard-cost { align-self: center; width: 1.45em; height: 1.45em; margin: 0; }
.pcard--holo .plan-go { border-color: #0b1022; background: linear-gradient(180deg, #232c4f, #0f1430); color: #f2f4fb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 20px -12px rgba(8, 12, 30, .9); }
.pcard--secret .plan-go { border-color: #1c1304; background: linear-gradient(180deg, #33260e, #120c04); color: #f6df9c;
  box-shadow: inset 0 0 0 1px rgba(246, 223, 156, .38), inset 0 1px 0 rgba(255, 240, 200, .3), 0 12px 24px -12px rgba(50, 30, 2, .9); }
@media (hover: hover) and (pointer: fine) {
  .pcard--holo .plan-go:hover { background: linear-gradient(180deg, #2e3964, #151c3f); transform: translateY(-1px); }
  .pcard--secret .plan-go:hover { background: linear-gradient(180deg, #45341a, #1a1206); color: #fbecbc; transform: translateY(-1px); }
}
/* the plan's headlines, in the card's printed text box (a see-through panel under a double rule), each after the
   card's type, a hairline between them; they share out whatever room the card has left */
.pcard .plan-feats { flex: 1 0 auto; margin-top: .45em; padding: .2em .55em .3em; border-top: 0; border-radius: .2em; background: var(--box); box-shadow: var(--box-rule); }
.pcard .plan-feats ul { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0; }
.pcard .plan-feats li { flex: 1 0 auto; display: grid; grid-template-columns: 1.35em minmax(0, 1fr); align-items: center; column-gap: .6em; padding: .2em .1em; font-size: 1em; font-weight: 500; line-height: 1.25; color: var(--c-ink); }
.pcard .plan-feats li + li { border-top: 1px solid var(--c-line); }
.pcard .plan-feats li::before { content: none; }
.pcard-cost { width: 1.35em; height: 1.35em; }
.pcard-cost svg { width: .86em; height: .86em; }
.pcard .plan-feats li.is-soon .pcard-cost { background: none; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); color: var(--c-soft); }
.pcard .soon { margin-left: .4em; padding: .15em .45em; border-color: var(--c-line-strong); font-size: max(12px, .8em); color: var(--c-soft); }
/* (Secret Rare's "everything in Holo, plus": a banner like a printed card's ability line) */
.pcard .plan-lead { align-self: flex-start; display: inline-flex; align-items: center; gap: .55em; margin: .3em 0 .25em; padding: .42em 1.4em .42em .7em;
  background: linear-gradient(90deg, #1f1606, #4a3510); color: #f6df9c; font: 700 max(12px, .8em)/1 var(--text); letter-spacing: .12em;
  clip-path: polygon(0 0, calc(100% - .9em) 0, 100% 50%, calc(100% - .9em) 100%, 0 100%); }
.pcard .plan-lead::before { content: ""; width: .6em; height: .6em; rotate: 45deg; background: linear-gradient(135deg, #fff1c4, #d2a24a); }

/* the small print: collector number and rarity, set, year */
.pcard-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .75em; padding: .55em .2em 0; font: 600 max(10px, .72em)/1 var(--text); letter-spacing: .05em;
  font-variant-numeric: tabular-nums; color: var(--c-soft); white-space: nowrap; }
.pcard-no, .pcard-rarity { display: inline-flex; align-items: center; gap: .35em; }
.pcard-rarity { gap: .15em; font-style: normal; font-weight: 700; }
/* (the rarity star struck in metal: silver or gold, with an ink outline, as a collector looks for it) */
.pcard-star { width: 1.35em; height: 1.35em; overflow: visible; }
.pcard-star .rim { stroke-width: 1; stroke-linejoin: round; }
.pcard--holo .pcard-star .rim { stroke: #2a3248; }
.pcard--holo .pcard-star { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .85)); }
.pcard--secret .pcard-foot { color: #3a2a0c; }
.pcard--secret .pcard-rarity { color: #573a07; }
.pcard--secret .pcard-star .rim { stroke: #4a320a; }
.pcard--secret .pcard-star { filter: drop-shadow(0 1px 0 rgba(255, 246, 210, .9)); }
.pcard-set { display: inline-flex; align-items: center; gap: .3em; padding: .3em .55em; border-radius: .3em; box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.pcard-setmark { width: 1em; height: 1em; flex: none; }

/* (the light passing over a card: a broad band, rainbow over holo, white over gold, clipped to the card. Hidden at
   rest; it crosses once as the card comes on screen, and follows the pointer while the slab is held) */
.pcard-sheen { position: absolute; z-index: 3; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pcard-sheen i { position: absolute; top: -25%; bottom: -25%; left: 0; width: 70%; translate: -100% 0; rotate: 12deg; opacity: 0; transition: transform .6s var(--ease), opacity .4s;
  background: linear-gradient(90deg, transparent 18%, rgba(255, 252, 238, .42) 50%, transparent 82%); }
.pcard--holo .pcard-sheen i { background: linear-gradient(90deg, transparent 10%, rgba(255, 122, 198, .2) 26%, rgba(255, 216, 110, .22) 36%, rgba(255, 255, 255, .4) 50%,
  rgba(125, 245, 196, .22) 64%, rgba(114, 185, 255, .2) 74%, transparent 90%); }
.pslab.is-held .pcard-sheen i { opacity: .55; will-change: transform; transition: transform .16s linear, opacity .4s; }

/* (a browser without container units (Safari before 16) drops every size above that is measured in the slab: plain
   sizes instead, so it still reads as a label over a card) */
@supports not (width: 1cqi) {
  .pslab-label { height: auto; gap: 3px 12px; padding: 10px 14px 8px; border-radius: 12px; }
  .pslab-set, .pslab-line { font: 600 10px/1.2 var(--text); }
  .plan.pslab .pslab-label h3 { font: 800 1.75rem/.92 var(--display); }
  .pslab-grade small { font: 700 10px/1 var(--text); }
  .pslab-grade b { font: 800 2.6rem/.8 var(--display); }
  .pslab-subs small { font: 600 9px/1 var(--text); }
  .pslab-subs b { font: 800 1rem/1 var(--display); }
  .pslab-foot { gap: 8px; padding-top: 4px; font: 600 9px/1 var(--text); }
  .pslab-code { width: 120px; height: 12px; }
  .pslab-window { margin-top: 9px; padding: 6px; border-radius: 24px; }
  .pcard { font-size: 14px; }
}

/* the motion: the sheen's one pass and the sweep's turns as a card comes on screen (.is-live, landing.js), and the
   sweep turning on while a slab is held; all of it transforms, never while less motion is asked for */
@keyframes pc-pass { from { transform: translateX(0); opacity: 0; } 20%, 70% { opacity: .7; } to { transform: translateX(245%); opacity: 0; } }
@keyframes pc-scan-in { from { rotate: -540deg; } }
@keyframes pc-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .pcard-scan { animation: pc-turn 3.6s linear infinite paused; }
  .pcard.is-live .pcard-scan { animation: pc-turn 3.6s linear infinite paused, pc-scan-in 2.6s cubic-bezier(.3, .6, .3, 1) .15s backwards; }
  .pslab.is-held .pcard-scan { animation-play-state: running; }
  .pcard.is-live .pcard-sheen i { animation: pc-pass 1.7s cubic-bezier(.45, .05, .35, 1) .3s backwards; }
  .pslab.is-held .pcard.is-live .pcard-sheen i { animation: none; }
}

/* What's in each plan: every feature of each plan, with its notes, a column a plan, each under its slab. */
.plan-compare { margin: clamp(40px, 6vh, 64px) auto 0; max-width: 70rem; }
.compare-title { font: 700 clamp(1.75rem, 2.6vw, 2.3rem)/1 var(--display); letter-spacing: .005em; text-align: center; }
.compare-cols { margin-top: clamp(18px, 2.6vh, 26px); display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--gap); align-items: start; justify-content: center; }
/* (under two slabs, two columns exactly as wide as they are) */
.pricing[data-n="2"]:has(.pslab) .plan-compare { max-width: none; }
.pricing[data-n="2"]:has(.pslab) .compare-cols { grid-template-columns: repeat(2, min(var(--sw), 50% - var(--gap) / 2)); }
.compare-col { container-type: inline-size; padding: 1.15rem 1.3rem 1.1rem; border-radius: 18px; background: linear-gradient(170deg, rgba(24, 32, 66, .55), rgba(9, 12, 27, .92));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--edge); }
.compare-col--silver { --tone: #d3d9e5; --tone-bg: radial-gradient(circle at 34% 28%, #fff, #d3d9e3 46%, #8f99ad); --tone-ink: #182037; }
.compare-col--black { --tone: #e2c47a; --tone-bg: radial-gradient(circle at 34% 28%, #fffbe8, #ecce7e 46%, #a77a2a); --tone-ink: #2a1c06;
  box-shadow: inset 0 0 0 1px rgba(226, 190, 110, .34), inset 0 1px 0 rgba(255, 240, 200, .1); }
.compare-col--plain { --tone: var(--accent); --tone-bg: var(--accent); --tone-ink: var(--accent-ink); }
.compare-head { display: flex; align-items: center; gap: .65rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.compare-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tone-bg); color: var(--tone-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(0, 0, 0, .28); }
.compare-mark svg { width: 19px; height: 19px; }
.compare-head h4 { margin: 0; font: 700 1.6rem/1 var(--display); letter-spacing: .01em; color: var(--ink); }
.compare-line { margin-left: auto; font: 600 .8125rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-note); text-align: right; }
/* (in a column too narrow for both on one line, the plan's line goes under its name, lined up with it) */
@container (max-width: 350px) {
  .compare-head { flex-wrap: wrap; row-gap: .35rem; }
  .compare-head h4 { white-space: nowrap; }
  .compare-line { flex-basis: 100%; margin-left: calc(30px + .65rem); text-align: left; }
}
/* (who the plan is for: the card says it; where a short window leaves it off the card, it is said here) */
.compare-for { display: none; margin-top: .8rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.compare-lead { margin-top: .85rem; font: 600 .8125rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--tone); }
.compare-list { list-style: none; margin: .35rem 0 0; padding: 0; }
.compare-list li { position: relative; padding: .55rem 0 .55rem 1.8rem; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.compare-list li + li { border-top: 1px solid rgba(160, 175, 255, .08); }
/* (a tick in the plan's metal before each) */
.compare-list li::before { content: ""; position: absolute; left: .2rem; top: calc(.55rem + .38em); width: .72rem; height: .38rem; border-left: 2px solid var(--tone); border-bottom: 2px solid var(--tone); rotate: -45deg; }
/* (one built with member accounts, marked Soon: its tick fainter) */
.compare-list li.is-soon::before { opacity: .5; }
.compare-list li small { display: block; margin-top: .12rem; font-size: .875rem; line-height: 1.4; color: var(--ink-note); }
/* (a Soon chip follows its line after a space, so one that wraps starts flush with the words above it) */
.compare-list .soon { margin-left: 0; }

/* A window under about 860px tall (most laptops once the browser's own bars are counted): the card gives up its art's
   height and its fourth headline (it is in "What's in each plan" just below), so at its 13px floor it still fits a
   real card's 63 by 88 and the switch and both whole slabs fit under the nav with air below. Under 780px it also
   gives up who the plan is for (said under the plan's name in the comparison instead); under 760px a whole slab
   fits the window under the nav on its own, the switch just above it. */
@media (min-width: 761px) and (max-height: 860px) {
  .pricing { --slab-h: clamp(430px, 100svh - var(--top) - 122px, 900px); }
  .bill { margin-top: clamp(14px, 2.6vh, 28px); }
  .plans:has(.pslab) { margin-top: 20px; }
  .pcard-art { --art-r: 3.25; }
  .pcard .plan-feats li:nth-child(n + 4) { display: none; }
}
@media (min-width: 761px) and (max-height: 780px) {
  .pcard .plan-for { display: none; }
  .pricing:has(.pslab) .compare-for { display: block; }
}
@media (min-width: 761px) and (max-height: 759px) {
  .pricing { --slab-h: clamp(430px, 100svh - var(--top) - 36px, 900px); --sw: clamp(300px, (var(--slab-h) - 20px) / 1.6877 + 20px, 480px); }
  .pcard-art { --art-r: 3.3; }
}

/* ---------------------------------------------------------------- how it compares (#versus, right after Pricing)
   Each kind of card tool, what it usually costs and does, then Next Grails' column, lit in the logo's cyan. A table on
   a wide screen, its head held under the nav while the rows go by (cut to the short names and prices while it is held:
   landing.js adds .is-stuck); under 1180px each job is a card of its own. The
   marks: a full dot (that kind of tool does it), a half dot (some do, or partly), an empty ring (not typically); a
   cyan tick for Next Grails. Their words are read aloud with each answer (landing.js versusScene). */
.versus { --cyan: 0, 199, 251; --vs-line: rgba(160, 175, 255, .1); padding-top: clamp(36px, 6vh, 80px);
  background: linear-gradient(180deg, transparent, var(--ground) 10% 90%, transparent); }
.versus .sec-head h2 { font-size: clamp(2.3rem, 4.4vw, 4rem); }
.versus .sec-head--center .lede { max-width: 54ch; }
.vs-key { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1.5rem; margin-top: clamp(26px, 4vh, 44px);
  font-size: .9375rem; color: var(--ink-note); }
.vs-key-item { display: inline-flex; align-items: center; gap: .5rem; }
.vs { --vs-cols: minmax(0, 1.12fr) repeat(var(--kinds, 3), minmax(0, 1fr)) minmax(0, 1.42fr); margin-top: 1.1rem; }
.vs-row { display: grid; grid-template-columns: var(--vs-cols); }
.vs-row > * { padding: 1rem clamp(12px, 1.25vw, 20px); border-top: 1px solid var(--vs-line); line-height: 1.45; }
.vs-job { font-weight: 600; color: var(--ink); }
.vs-cell { display: flex; align-items: flex-start; gap: .6rem; font-size: .975rem; color: var(--ink-soft); }
.vs-cell.is-no { color: var(--ink-note); }
.vs-words { min-width: 0; }
.vs-best > * { padding-block: .85rem; }
.vs-best .vs-cell { display: block; color: var(--ink); font-weight: 500; }
.vs-best .vs-job { color: var(--ink-note); font-weight: 600; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; padding-top: 1.05rem; }

/* the head: each kind's name, its typical price big, the words under it; held under the nav while the rows pass */
.vs-head { position: sticky; top: var(--top); z-index: 3; }
.vs-head > * { border-top: 0; padding-block: 1.1rem 1rem; background: rgba(8, 11, 23, .94); -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.vs-col { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.vs-name { font: 700 clamp(1.15rem, 1.45vw, 1.4rem)/1.08 var(--display); letter-spacing: .005em; color: var(--ink); text-wrap: balance; }
.vs-plans { font: 600 .75rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--cyan), .85); }
.vs-price { margin-top: .35rem; font: 700 clamp(1.9rem, 2.5vw, 2.5rem)/1 var(--display); letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }
.vs-per, .vs-year { font-size: .8125rem; line-height: 1.35; color: var(--ink-note); }
.vs-year { color: var(--ink-soft); }
.vs-name .vs-short { display: none; }
/* held under the nav: the short names and the prices only, so the rows have the room */
.vs-head.is-stuck > * { padding-block: .7rem .65rem; }
.vs-head.is-stuck .vs-long, .vs-head.is-stuck .vs-per, .vs-head.is-stuck .vs-year { display: none; }
.vs-head.is-stuck .vs-short { display: inline; }
.vs-head.is-stuck .vs-price { margin-top: .15rem; font-size: clamp(1.45rem, 1.8vw, 1.85rem); }

/* Next Grails' column: the logo's cyan, one lit band from the head to the last row */
.vs-us { position: relative; background: rgba(var(--cyan), .055); box-shadow: inset 1px 0 0 rgba(var(--cyan), .42), inset -1px 0 0 rgba(var(--cyan), .42); }
.vs-head .vs-us { background: linear-gradient(180deg, rgba(4, 34, 48, .97), rgba(6, 22, 36, .97)); border-radius: 18px 18px 0 0;
  box-shadow: inset 1px 0 0 rgba(var(--cyan), .55), inset -1px 0 0 rgba(var(--cyan), .55), inset 0 1px 0 rgba(var(--cyan), .55), 0 1px 0 var(--line); }
.vs-head .vs-us .vs-name { color: rgb(var(--cyan)); }
.vs-head .vs-us .vs-price { color: #fff; text-shadow: 0 0 22px rgba(var(--cyan), .35); }
.vs-row:last-child .vs-us { border-radius: 0 0 18px 18px; box-shadow: inset 1px 0 0 rgba(var(--cyan), .42), inset -1px 0 0 rgba(var(--cyan), .42), inset 0 -1px 0 rgba(var(--cyan), .42); }
.vs-cell.vs-us { color: var(--ink); }
.vs-best .vs-us { color: rgb(170, 236, 255); }

/* the marks */
.vs-mark { position: relative; flex: none; width: 14px; height: 14px; margin-top: .2em; border-radius: 50%; }
.vs-mark--yes { background: var(--ink-soft); }
.vs-mark--some { background: linear-gradient(90deg, var(--ink-soft) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.vs-mark--no { box-shadow: inset 0 0 0 1.5px var(--ink-mute); }
.vs-mark--soon { box-shadow: inset 0 0 0 1.5px rgba(var(--cyan), .75); background: rgba(var(--cyan), .14); }
.vs-us .vs-mark--yes { width: 18px; height: 18px; margin-top: .08em; background: rgb(var(--cyan)); box-shadow: 0 0 14px rgba(var(--cyan), .45); }
.vs-us .vs-mark--yes::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4.5px; height: 8.5px; border: solid #03141c;
  border-width: 0 2.2px 2.2px 0; rotate: 42deg; }
.vs-us .vs-mark--soon { width: 18px; height: 18px; margin-top: .08em; }
.vs-plan { display: inline-block; margin: 0 .45rem .1rem 0; padding: .16rem .5rem .12rem; border: 1px solid rgba(226, 196, 122, .5); border-radius: 999px;
  font: 600 .6875rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #e2c47a; vertical-align: .1em; white-space: nowrap; }
.vs-words > .soon:first-child { margin: 0 .45rem .1rem 0; }
.vs-soon { display: block; margin-top: .3rem; }
.vs-soon .soon { margin-left: .35rem; }
.vs-note { display: block; margin-top: .3rem; font-size: .875rem; line-height: 1.4; color: var(--ink-note); }
.vs-foot { display: grid; gap: .3rem; margin-top: 1.4rem; text-align: center; font-size: .875rem; line-height: 1.5; color: var(--ink-note); }
.vs-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: clamp(22px, 3.4vh, 34px); }

.tabs.vs-pick { display: none; }

/* under 1180px (a tablet either way up, a small laptop): each job a card of its own, every answer under the name of its
   kind; the prices first, as cards */
@media (max-width: 1180px) {
  .vs { display: grid; gap: 14px; }
  .vs-row { grid-template-columns: repeat(var(--kinds, 3), minmax(0, 1fr)); border-radius: 18px; overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--line); background: rgba(13, 18, 36, .55); }
  .vs-row > * { padding: .8rem 1rem; border-top: 1px solid var(--vs-line); }
  .vs-row > .vs-job, .vs-row > .vs-us { grid-column: 1 / -1; }
  .vs-row > .vs-job { border-top: 0; padding: 1rem 1rem .55rem; font: 700 1.4rem/1.12 var(--display); letter-spacing: .005em; }
  .vs-row > .vs-cell + .vs-cell:not(.vs-us) { border-left: 1px solid var(--vs-line); }
  .vs-cell { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: .55rem; align-content: start; font-size: .9375rem; }
  .vs-cell::before { content: attr(data-col); grid-column: 2; grid-row: 1; margin-bottom: .2rem; font: 600 .6875rem/1.25 var(--text);
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-note); }
  .vs-cell > .vs-mark { grid-column: 1; grid-row: 1 / span 2; margin-top: .1em; }
  .vs-cell > .vs-words { grid-column: 2; grid-row: 2; }
  .vs-us { box-shadow: none; border-top: 1px solid rgba(var(--cyan), .4) !important; background: rgba(var(--cyan), .07); }
  .vs-row:last-child .vs-us { border-radius: 0; box-shadow: none; }
  .vs-cell.vs-us { grid-template-columns: 18px minmax(0, 1fr); font-size: 1rem; }
  .vs-cell.vs-us::before { color: rgb(var(--cyan)); }
  /* the head: four price cards, the kinds side by side, Next Grails' across under them */
  .vs-head { position: static; display: grid; grid-template-columns: repeat(var(--kinds, 3), minmax(0, 1fr)); gap: 10px;
    border-radius: 0; overflow: visible; box-shadow: none; background: none; }
  .vs-head > * { padding: .9rem 1rem; border-radius: 16px; background: rgba(13, 18, 36, .7); box-shadow: inset 0 0 0 1px var(--line);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .vs-head > .vs-corner { display: none; }
  .vs-head > .vs-us { grid-column: 1 / -1; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(var(--cyan), .55); }
  .vs-best .vs-cell, .vs-best .vs-cell::before { display: block; }
  .vs-best .vs-job { font: 700 1.4rem/1.12 var(--display); letter-spacing: .005em; text-transform: none; color: var(--ink); }
}
/* a phone: one kind of tool beside Next Grails at a time, picked with the switch (its prices on it), which stays under
   the nav while the cards go by; Next Grails' own price card over the cards */
@media (max-width: 600px) {
  .tabs.vs-pick { position: sticky; z-index: 4; top: calc(var(--top) + 8px); display: grid; grid-template-columns: repeat(var(--kinds, 3), minmax(0, 1fr));
    margin-top: 1rem; background: rgba(8, 11, 23, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .vs-pick button { display: grid; gap: 3px; align-content: center; min-height: 54px; padding: 6px 4px; white-space: normal; }
  .vs-pick b { font: 700 1.0625rem/1 var(--display); letter-spacing: .01em; color: var(--ink); }
  .vs-pick span { font: 500 .8125rem/1.15 var(--text); }
  .vs .is-off { display: none; }
  .vs-row { grid-template-columns: minmax(0, 1fr); }
  .vs-row > .vs-cell + .vs-cell:not(.vs-us) { border-left: 0; }
  .vs-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vs-price { font-size: 2rem; }
  .vs-key { justify-content: flex-start; gap: .4rem 1.1rem; font-size: .875rem; }
  .versus .sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }
  .vs-foot { text-align: left; }
  .vs-cta { justify-content: stretch; }
  .vs-cta .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- questions */
.faq { padding: clamp(80px, 12vh, 150px) 0; border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(28px, 6vw, 100px); }
.faq h2 { position: sticky; top: calc(var(--nav-h) + 28px); font-size: clamp(2.2rem, 4.3vw, 3.9rem); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.3rem 0; cursor: pointer;
  font: 600 1.1875rem/1.3 var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; color: var(--accent); transition: transform .28s var(--ease);
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2.5rem 1.45rem 0; max-width: 62ch; color: var(--ink-soft); }

/* ---------------------------------------------------------------- the close: the card you pulled, slabbed */
.close { position: relative; isolation: isolate; overflow: clip; padding: clamp(100px, 17vh, 210px) 0 clamp(90px, 13vh, 150px); border-top: 1px solid var(--line); }
.close::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(48% 62% at 24% 52%, rgba(var(--world), .26), transparent 72%); }
.close-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 7vw, 120px); }
.close h2 { font-size: clamp(2.9rem, 6.6vw, 6.2rem); font-weight: 800; line-height: .9; }
.close-copy > p { margin-top: 1.3rem; max-width: 36ch; font-size: 1.1875rem; color: var(--ink-soft); }
.join { margin-top: 2.1rem; max-width: 540px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.join input[type="email"] { min-height: 56px; padding: 0 1.1rem; border: 1px solid rgba(160, 175, 255, .3); border-radius: 14px; background: rgba(255, 255, 255, .05);
  color: var(--ink); font: 500 1.0625rem var(--text); caret-color: var(--accent); }
.join input[type="email"]::placeholder { color: var(--ink-note); }
.join input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.join .btn { min-height: 56px; }
.join-note { grid-column: 1 / -1; min-height: 1.5em; font-size: .9375rem; color: var(--ink-soft); }
/* The plan chosen in Pricing, sent with the email: a chip that can be taken off. */
.join-plan { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: .2rem; padding: 0 0 0 .9rem; border: 1px solid rgba(142, 162, 255, .5); border-radius: 999px;
  background: rgba(142, 162, 255, .14); font-size: .9375rem; font-weight: 500; color: var(--ink); }
.join-plan button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); font: 500 1.25rem/1 var(--text); cursor: pointer; }
.join-plan button:hover { color: var(--ink); }
/* News and offers: its own box, never ticked for anyone; the whole line is the target. */
.join-opt { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; font-size: .9375rem; color: var(--ink-soft); cursor: pointer; }
.join-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.join-opt:hover { color: var(--ink); }
/* The small print beside the button: who it is for, what joining sends, and the privacy policy. */
.join-small { grid-column: 1 / -1; margin-top: -.2rem; font-size: .8125rem; line-height: 1.5; color: var(--ink-note); }
.join-small a { color: var(--ink-soft); text-underline-offset: 3px; white-space: nowrap; }
.join-small a:hover { color: var(--ink); }
/* The bots' trap: off screen, never seen or reached by people (index.html). */
.join-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.join-note.is-error { color: #fca5a5; }
.join-note b { color: var(--ink); }
.slab { justify-self: center; width: min(330px, 74vw); padding: 11px; border-radius: 16px; rotate: -4deg;
  background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .13));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 0 22px rgba(255, 255, 255, .08), 0 60px 80px -40px #000, 0 0 110px -30px rgba(var(--world), .7); }
.slab-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px; background: #eef0f8; color: #0a0e1c; }
.slab-lines { display: grid; gap: 2px; font: 600 .6875rem/1.25 var(--text); letter-spacing: .07em; text-transform: uppercase; }
.slab-lines b { font-weight: 600; }
.slab-grade { display: grid; justify-items: center; }
.slab-grade small { font: 600 .5625rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.slab-grade b { font: 800 2.3rem/.9 var(--display); }
.slab-window { margin-top: 9px; padding: 16px; border-radius: 9px; background: rgba(2, 4, 10, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 12px 30px rgba(0, 0, 0, .55); }

/* ---------------------------------------------------------------- foot */
.foot { padding: 40px 0 56px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-note); }
.foot-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.1rem 2rem; }
.foot .wordmark { font-size: 1.3rem; }
.foot-replay { justify-self: end; min-height: 44px; padding: .55rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-soft);
  font: 500 .875rem var(--text); cursor: pointer; transition: border-color .14s, color .14s; }
.foot-replay:hover { border-color: rgba(160, 175, 255, .45); color: var(--ink); }
.foot-legal, .foot-copy { grid-column: 1 / -1; max-width: 75ch; line-height: 1.55; }

/* ================================================================ the site as a card */
.sitecard { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 63 / 88; perspective: 1400px; }
.sitecard-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.sitecard-face { position: absolute; inset: 0; overflow: hidden; border-radius: 4.8cqw; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sitecard-front { background: linear-gradient(158deg, #1b244c, #090d20 56%, #131b40);
  box-shadow: inset 0 0 0 .55cqw rgba(196, 206, 255, .62), inset 0 0 0 1.2cqw #090d20, inset 0 0 0 1.5cqw rgba(196, 206, 255, .2); }
.sc-frame { position: absolute; inset: 4.2cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.sc-top { display: flex; justify-content: space-between; align-items: center; padding: 0 1cqw; }
.sc-name { font: 800 8.6cqw/1 var(--display); letter-spacing: .005em; }
.sc-name em { font-style: normal; color: var(--accent); }
.sc-live { display: inline-flex; align-items: center; gap: 1.5cqw; font: 600 3.1cqw/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sc-live i { width: 2.3cqw; height: 2.3cqw; border-radius: 50%; background: var(--gain); box-shadow: 0 0 2.4cqw var(--gain); }
.sc-art { position: relative; flex: none; aspect-ratio: var(--art, 1.6); overflow: hidden; border-radius: 2.4cqw; background: var(--canvas);
  box-shadow: 0 0 0 .45cqw rgba(196, 206, 255, .5), 0 2cqw 5cqw rgba(0, 0, 0, .5); }
.sc-type { padding: 0 1cqw; font: 600 3cqw/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.sc-moves { flex: 1; min-height: 0; display: grid; align-content: center; gap: 3.2cqw; padding: 3.2cqw 3.4cqw; border-radius: 2.4cqw;
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 .25cqw rgba(196, 206, 255, .16); }
.sc-move b { display: block; font: 700 6.2cqw/1 var(--display); letter-spacing: .005em; }
.sc-move span { display: block; margin-top: 1.1cqw; font: 400 3.5cqw/1.3 var(--text); color: var(--ink-soft); }
.sc-foot { display: flex; justify-content: space-between; padding: 0 1cqw; font: 600 2.9cqw/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.sc-holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(112deg, transparent 22%, rgba(120, 200, 255, .34) 38%, rgba(255, 130, 220, .3) 47%, rgba(255, 225, 130, .28) 56%, transparent 72%) 110% 0 / 260% 100% no-repeat; }
.sitecard.is-shining .sc-holo { animation: holo 1.7s var(--ease) both; }
@keyframes holo { 0% { opacity: 0; background-position: 110% 0; } 18% { opacity: 1; } 100% { opacity: .28; background-position: -30% 0; } }
/* On a tall screen the card is full art: the site fills it, the name and number sit over it. */
.sitecard.is-fullart .sc-frame { inset: 0; }
.sitecard.is-fullart .sc-art { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.sitecard.is-fullart .sc-top, .sitecard.is-fullart .sc-foot { position: absolute; left: 0; right: 0; padding: 0 5.6cqw; }
.sitecard.is-fullart .sc-top { z-index: 2; bottom: 11.5cqw; }
.sitecard.is-fullart .sc-foot { z-index: 1; bottom: 0; padding-top: 32cqw; padding-bottom: 5.4cqw; color: var(--ink-soft);
  background: linear-gradient(to top, rgba(5, 7, 15, .98) 40%, rgba(5, 7, 15, 0)); }
.sitecard.is-fullart .sc-type, .sitecard.is-fullart .sc-moves { display: none; }
.sitecard-back { transform: rotateY(180deg); display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, #1e2860, #080b1a 72%);
  box-shadow: inset 0 0 0 .55cqw rgba(196, 206, 255, .62), inset 0 0 0 3.2cqw #090d20, inset 0 0 0 3.5cqw rgba(196, 206, 255, .26); }
.sitecard-back svg { width: 34cqw; height: 34cqw; color: var(--ink); filter: drop-shadow(0 0 4cqw rgba(142, 162, 255, .7)); }
/* (the name, a word a line, until the logo mark is chosen: as gate3d.js draws the card's back) */
.sitecard-word { position: relative; z-index: 1; display: grid; justify-items: center; font: 800 16cqw/.98 var(--display); letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink); text-shadow: 0 0 4cqw rgba(142, 162, 255, .7); }
.sitecard-word em { font-style: normal; color: var(--accent); }
.sitecard-back::before, .sitecard-back::after { content: ""; position: absolute; left: 50%; top: 50%; width: 62cqw; height: 62cqw; margin: -31cqw 0 0 -31cqw; border-radius: 50%;
  border: .35cqw solid rgba(142, 162, 255, .34); }
.sitecard-back::after { width: 84cqw; height: 84cqw; margin: -42cqw 0 0 -42cqw; border-color: rgba(142, 162, 255, .16); }
/* The hero itself, small: laid out at the window's size and scaled to cover the art window. */
.mini { position: absolute; left: 50%; top: 50%; overflow: hidden; pointer-events: none; }
.mini > .hero, .portal > .hero { min-height: 0; height: 100%; }

/* ================================================================ the pack opening */
.gate:focus { outline: none; }
.gate { position: fixed; inset: 0; z-index: 100; display: none; overflow: hidden; background: var(--canvas); touch-action: none; -webkit-user-select: none; user-select: none;
  --pick: 110, 130, 255; --pw: clamp(116px, max(15.5vw, min(34vw, 150px)), 206px); --ph: calc(var(--pw) * 1.74); --R: calc(var(--pw) * 1.66); --sw: clamp(176px, max(21vw, min(54vw, 240px)), 290px); }
html.gate-on { overflow: hidden; }
html.gate-on .gate { display: block; }
html.gate-on .page { visibility: hidden; }
.gate-sky { position: absolute; inset: 0; background:
  radial-gradient(46% 42% at 50% 44%, rgba(var(--pick), .34), transparent 72%),
  radial-gradient(90% 60% at 50% 112%, #101843 0%, transparent 70%); }
.gate-head { position: absolute; left: 0; right: 0; top: 0; height: var(--nav-h); display: flex; align-items: center; justify-content: center; }
.gate-stage { position: absolute; inset: 0; cursor: grab; }
/* In real 3D: the packs are drawn on a canvas, their reflections fade into the floor, and the flat ring stays away. */
.gate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gate-canvas[hidden] { display: none; }
.gate-floor { position: absolute; left: 0; right: 0; top: var(--floor, 72%); bottom: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: linear-gradient(to bottom, rgba(5, 7, 15, .25) 0%, rgba(5, 7, 15, .9) 46%, var(--canvas) 80%); }
.gate.is-3d .gate-floor { opacity: 1; }
.gate.is-3d.is-solo .gate-floor { opacity: 0; }
.gate.is-3d .ring-scene, .gate.is-3d .ring-mirror { display: none; }
.gate.is-3d .gate-stage { touch-action: none; }
.gate.is-waiting .gate-prompt, .gate.is-waiting .gate-hint { visibility: hidden; }
.gate-sound { position: absolute; z-index: 5; right: var(--gutter); top: 14px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(5, 7, 15, .6); color: var(--ink-soft); cursor: pointer; transition: color .14s, border-color .14s; }
.gate-sound:hover { color: var(--ink); border-color: rgba(160, 175, 255, .45); }
.gate-sound .slash { display: none; }
.gate-sound.is-off .waves { display: none; }
.gate-sound.is-off .slash { display: inline; }
.gate-stage.is-dragging { cursor: grabbing; }
/* The camera sits on the ring's own anchor, so the ring keeps its depth while it fades in or out
   (opacity would flatten a camera placed any higher up). */
.ring-scene { position: absolute; left: 50%; top: 44%; width: 0; height: 0; perspective: 1300px; perspective-origin: 0 -4vh; animation: ring-in 1.1s var(--ease) both; }
@keyframes ring-in { from { opacity: 0; transform: translateY(40px) scale(.86); } to { opacity: 1; transform: none; } }
.gate-prompt, .gate-hint { animation: rise-in .9s .5s var(--ease) both; }
@keyframes rise-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.ring { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--R) * -1)) rotateX(-7deg) rotateY(var(--theta, 0deg)); will-change: transform; }
.pack { position: absolute; left: calc(var(--pw) / -2); top: calc(var(--ph) / -2); width: var(--pw); height: var(--ph); padding: 0; border: 0; background: none; color: #fff;
  cursor: inherit; -webkit-tap-highlight-color: transparent; transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--R)); }
.pack:focus-visible { outline: none; }
.pack:focus-visible .pack-face { box-shadow: inset 0 0 0 3px #fff; }
.pack-face { position: absolute; inset: 0; overflow: hidden; clip-path: var(--crimp); border-radius: 4px; text-align: center; background:
  linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 13% 86%, rgba(0, 0, 0, .4)),
  linear-gradient(90deg, rgba(255, 255, 255, .22), transparent 14% 84%, rgba(0, 0, 0, .46)),
  radial-gradient(120% 60% at 50% 34%, var(--c1), var(--c2) 78%); }
/* The crimped seals, top and bottom. */
.pack-face::before, .pack-face::after { content: ""; position: absolute; left: 0; right: 0; height: 6.4%; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .26) 0 1px, rgba(0, 0, 0, .2) 1px 3px), rgba(255, 255, 255, .1); }
.pack-face::before { top: 0; border-bottom: 1px solid rgba(0, 0, 0, .4); }
.pack-face::after { bottom: 0; border-top: 1px solid rgba(0, 0, 0, .4); }
.pack-art { position: absolute; inset: 6.4% 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; justify-items: center; padding: 9% 7% 8%; }
.pack-brand { font: 700 calc(var(--pw) * .088)/1 var(--display); letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.pack-emblem { align-self: center; width: 47%; aspect-ratio: 1; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .45)); }
.pack-emblem svg { display: block; width: 100%; height: 100%; }
.pack-name { font: 800 calc(var(--pw) * .205)/.88 var(--display); letter-spacing: -.01em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
.pack-sub { margin-top: 5%; font: 600 calc(var(--pw) * .05)/1 var(--text); letter-spacing: .2em; text-transform: uppercase; opacity: .86; }
.pack-count { margin-top: 8%; padding: 3.2% 7%; border-radius: 999px; background: rgba(0, 0, 0, .32); font: 600 calc(var(--pw) * .058)/1 var(--text); letter-spacing: .03em; white-space: nowrap; }
.pack-foil { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; background:
  linear-gradient(112deg, transparent 0 34%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, .1) 52%, transparent 64% 100%) calc(var(--sheen, 50) * 1%) 0 / 280% 100% no-repeat,
  repeating-linear-gradient(112deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 9px); }
.pack-shade { position: absolute; inset: 0; clip-path: var(--crimp); background: #04060d; opacity: var(--shade, 0); pointer-events: none; }
/* Seen from behind, a pack shows its plain back (its words, flipped the right way round). */
.pack-back { position: absolute; inset: 0; display: none; place-items: center; transform: scaleX(-1); font: 700 calc(var(--pw) * .1)/1 var(--display); letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.pack.is-back .pack-art { visibility: hidden; }
.pack.is-back .pack-back { display: grid; }
.ring-mirror { position: absolute; left: 0; right: 0; top: calc(44% + var(--ph) * .5 + 6px); height: 44%; overflow: hidden; pointer-events: none; opacity: .22; filter: blur(1.5px);
  perspective: 1300px; perspective-origin: 50% -10%; animation: mirror-in 1.4s .2s var(--ease) both;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 62%); mask-image: linear-gradient(to bottom, #000, transparent 62%); }
@keyframes mirror-in { from { opacity: 0; } to { opacity: .22; } }
.ring-mirror .ring { left: 50%; top: calc(var(--ph) * .5); transform: scaleY(-1) translateZ(calc(var(--R) * -1)) rotateX(-7deg) rotateY(var(--theta, 0deg)); }
/* --gf: the legal footer's height. The prompt, hint and note sit above it. */
.gate { --gf: 64px; }
.gate-head { height: auto; min-height: var(--nav-h); flex-direction: column; gap: 6px; padding-top: 12px; }
.gate-lede { margin: 0; padding: 0 calc(var(--gutter) + 44px); max-width: 40rem; text-align: center; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft);
  animation: rise-in .9s .3s var(--ease) both; }
.gate-prompt { position: absolute; left: 0; right: 0; bottom: calc(clamp(72px, 12.5vh, 128px) + var(--gf)); margin: 0; text-align: center; pointer-events: none;
  font: 700 clamp(1.9rem, 4.2vw, 3.3rem)/1 var(--display); letter-spacing: -.005em; }
.gate-hint { position: absolute; left: 0; right: 0; bottom: calc(clamp(44px, 8.4vh, 90px) + var(--gf)); margin: 0; text-align: center; pointer-events: none; font-size: .9375rem; color: var(--ink-soft); }
/* Top left on wide screens (the logo is centred, the sound switch top right); on a phone, above the legal links. */
.gate-skip { position: absolute; left: var(--gutter); top: 14px; z-index: 5; padding: .6rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(5, 7, 15, .6);
  color: var(--ink-soft); font: 500 .875rem var(--text); cursor: pointer; transition: color .14s, border-color .14s; }
.gate-skip:hover { color: var(--ink); border-color: rgba(160, 175, 255, .45); }
.gate-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; gap: 2px; justify-items: center; padding: 8px var(--gutter) 10px; text-align: center;
  font-size: .75rem; color: var(--ink-soft); background: linear-gradient(to top, rgba(5, 7, 15, .92), rgba(5, 7, 15, 0)); -webkit-user-select: text; user-select: text; touch-action: auto; }
.gate-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.gate-foot a, .gate-foot [data-consent-open] { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-soft); font-size: .75rem; text-decoration: none; }
.gate-foot a:hover, .gate-foot [data-consent-open]:hover { color: var(--ink); text-decoration: underline; }
.gate-foot p { margin: 0; }
@media (max-width: 600px) {
  .gate-lede { padding: 0 var(--gutter); font-size: .875rem; }
  .gate-skip { left: auto; right: var(--gutter); top: auto; bottom: calc(var(--gf) + 8px); }
  .gate-hint { bottom: calc(var(--gf) + 100px); }
  .gate-prompt { bottom: calc(var(--gf) + 128px); font-size: 1.9rem; }
}
.gate-burst { position: absolute; left: 50%; top: 44%; width: min(70vmin, 620px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(.35); border: 2px solid rgba(var(--pick), .9); box-shadow: 0 0 60px 6px rgba(var(--pick), .5), inset 0 0 60px 6px rgba(var(--pick), .35); }
.gate-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: radial-gradient(42% 42% at 50% 40%, #fff, rgba(255, 255, 255, .5) 34%, rgba(255, 255, 255, 0) 72%); }
/* The chosen pack, alone: two copies of its face, cut along the tear line. */
.solo { position: absolute; left: 50%; top: 44%; width: var(--sw); height: calc(var(--sw) * 1.74); margin: calc(var(--sw) * -.87) 0 0 calc(var(--sw) / -2); --pw: var(--sw); }
.solo[hidden] { display: none; }
.solo-pack { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.solo-pack:focus-visible { outline: 2px solid #fff; outline-offset: 8px; border-radius: 8px; }
.solo-pack { animation: bob 2.6s ease-in-out infinite alternate; }
@keyframes bob { from { translate: 0 -5px; } to { translate: 0 5px; } }
@property --sheen { syntax: "<number>"; inherits: true; initial-value: 50; }
.solo { animation: foil 3.4s ease-in-out infinite alternate; }
@keyframes foil { from { --sheen: 12; } to { --sheen: 88; } }
.solo-half { position: absolute; inset: 0; }
.solo-half--top { z-index: 2; clip-path: inset(0 0 87.5% 0); transform-origin: 18% 100%; }
.solo-half--body { clip-path: inset(12.5% 0 0 0); }
.solo-seam { position: absolute; z-index: 3; left: -2%; right: -2%; top: 12.5%; height: 4px; margin-top: -2px; border-radius: 2px; transform-origin: 0 50%;
  transform: scaleX(var(--tear, 0)); opacity: min(1, var(--tear, 0) * 8);
  background: linear-gradient(90deg, rgba(255, 255, 255, .35), #fff 60%); box-shadow: 0 0 16px 4px rgba(255, 246, 214, .95), 0 0 60px 14px rgba(var(--pick), .85); }
.solo.is-rtl .solo-seam { transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(255, 255, 255, .35), #fff 60%); }
.solo-card { position: absolute; z-index: 1; left: 50%; top: 50%; width: 86%; opacity: 0; transform: translate(-50%, -46%) scale(.96); }
.portal { position: absolute; z-index: 4; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; will-change: transform, clip-path; }

/* ================================================================ scenes come alive once, as they scroll into view
   Each drawn block ([data-anim]) rises in, and its bars, meters and dials grow from nothing. */
.js [data-anim] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-anim].is-in { opacity: 1; transform: none; }
/* (the card window, many screens tall, and its parts only fade in: risen, a part would sit 20 to 40px lower than where
   a numbered note's jump aims, under the window's tabs) */
.js .bw[data-anim], .js .bw [data-anim] { transform: none; }
.js [data-anim] :is(.bars, .meter, .rung-bar, .gauge, .share-bar, .mult, .bw-spread, .bw-pbar) i { transition: transform .95s var(--ease); transition-delay: calc(var(--i, 0) * 16ms + 140ms); }
.js [data-anim]:not(.is-in) :is(.bars, .bw-spread) i { transform: scaleY(0); }
.js [data-anim]:not(.is-in) :is(.meter, .rung-bar, .gauge, .share-bar, .mult, .bw-pbar) i { transform: scaleX(0); }
.js [data-anim] .dial-fill { transition: stroke-dashoffset 1.25s var(--ease) .15s; }
.js [data-anim]:not(.is-in) .dial-fill { stroke-dashoffset: 327; }
.js [data-in] { transition-delay: calc(var(--i, 0) * 80ms); }
/* A tab's new rows rise in, their bars growing again. */
.pn-body.is-swap { animation: swap-in .5s var(--ease) both; }
.is-swap .bars i { animation: grow-y .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 14ms); }
.is-swap :is(.meter, .rung-bar, .gauge) i { animation: grow-x .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes swap-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@media (hover: hover) and (pointer: fine) {
  .jump a:hover { border-color: rgba(160, 175, 255, .5); background: rgba(255, 255, 255, .07); }
  .tabs button:hover { color: var(--ink); }
  .rail5 a:hover { color: var(--ink); border-color: rgba(160, 175, 255, .5); }
  .who-card a:hover span { color: var(--ink); }
  .face:hover { border-color: rgba(var(--w), .5); }
  .world:hover .world-fan .pic { transform: rotate(calc(var(--k) * 19deg)) translateX(calc(var(--k) * 52%)) translateY(-4%); }
}

/* ================================================================ a wide desk screen: the page grows with it */
@media (min-width: 1800px) {
  :root { --wrap: 1440px; }
  .sec .lede { font-size: 1.4375rem; }
  .points li, .step > p, .who-card > p, .cmp-row > *, .faq details p { font-size: 1.1875rem; }
  .pn-foot { font-size: 1rem; }
  .row-name { font-size: 1.125rem; }
  .lead { grid-template-columns: 230px minmax(0, 1fr); }
  .pot { grid-template-columns: 310px minmax(0, 1fr); }
  .plan-feats li, .plan-for { font-size: 1.125rem; }
  .tally-what, .plans-note, .leg-n, .rcpt-read, .plans-value { font-size: 1rem; }
}

/* ================================================================ smaller screens */
/* Each plan a row of its own before three columns get too narrow (under about 360px each): who it is for,
   its price and button, then its list beside them. */
@media (max-width: 1240px) {
  /* (three plans stack here; two stay side by side down to the phone layout) */
  .pricing:not([data-n="2"]) .plans { grid-template-columns: minmax(0, 1fr); }
  .pricing:not([data-n="2"]) .plan { grid-row: auto; grid-template-rows: auto auto auto 1fr; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(24px, 4vw, 48px); }
  .pricing:not([data-n="2"]) .plan > * { grid-column: 1; }
  .pricing:not([data-n="2"]) .plan > .plan-feats { grid-column: 2; grid-row: 1 / -1; margin-top: 0; padding: 0 0 0 clamp(24px, 4vw, 48px); border-top: 0; border-left: 1px solid rgba(160, 175, 255, .12); }
}
@media (max-width: 1160px) {
  .nav { gap: 1.25rem; }
  .nav-links { gap: 1.15rem; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The briefing and the scorecard go one above the other before their columns get too narrow to read. */
  .brief { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  :root { --sec-pad: clamp(72px, 10vh, 112px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-title { font-size: clamp(3.1rem, 11.5vw, 6rem); }
  .specimen { justify-self: start; width: min(100%, 480px); margin-top: 8px; }
  .faq-grid, .close-grid { grid-template-columns: minmax(0, 1fr); }
  .faq h2 { position: static; }
  .slab { width: min(260px, 62vw); }
  .sig-grid, .sig--flip .sig-grid, .sig-split, .drv, .record, .math-wrap, .rawbox { grid-template-columns: minmax(0, 1fr); }
  .sig-split { align-items: start; gap: 1.3rem; }
  .sig-split > :last-child { padding-top: 0; }
  .sig-split .points-title { margin-top: 1rem; }
  .sig-copy { position: static; }
  .sig--flip .sig-copy { order: 0; }
  .steps, .who-grid { grid-template-columns: minmax(0, 1fr); }
  .step, .who-card { grid-row: auto; grid-template-rows: none; }
  .step > p { max-width: 52ch; }
  .exhibit { max-width: 34rem; }
  .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The dashboard's screenshot is for a screen wide enough to read it. */
  .dash { display: none; }
  .spot { grid-template-columns: minmax(0, 1fr); }
  .spot-why ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .callouts { margin-top: .4rem; }
  /* The comparison, one question at a time: each answer says whose it is. */
  .cmp { box-shadow: none; border-radius: 0; overflow: visible; display: grid; gap: 14px; }
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
  .cmp-row > * { border-top: 1px solid rgba(160, 175, 255, .1); }
  .cmp-row > :first-child { border-top: 0; font: 700 1.5rem/1.1 var(--display); }
  .cmp-row > [data-col]::before { content: attr(data-col); display: block; margin-bottom: .25rem; font: 600 .8125rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-note); }
  .cmp-row > .cmp-us::before { color: var(--accent); }
  /* What each game has, a game at a time: each answer under the name of its list. */
  .cov { box-shadow: none; border-radius: 0; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cov-head { display: none; }
  .cov-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: .5rem 0 .7rem; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(var(--w), .34); }
  .cov-row + .cov-row { border-top: 0; }
  .cov-row > * { padding: .5rem 1rem; }
  .cov-game { grid-column: 1 / -1; padding-top: .7rem; }
  .cov-cell::after { content: attr(data-col); display: block; margin-top: .2rem; font: 500 .8125rem/1.3 var(--text); color: var(--ink-note); }
  /* Proof one panel under another, its four numbers two by two. */
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .tallies, .trust-grid.is-one .tallies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem clamp(16px, 3vw, 32px); }
}
/* On a tablet two slabs side by side would be too narrow to read: one above the other, centred, each sized to the
   window as on a desk screen (the second clear of the first's foot for its Recommended tag). */
@media (min-width: 761px) and (max-width: 1000px) {
  .pricing[data-n="2"] .plans:has(.pslab) { grid-template-columns: min(var(--sw), 100%); row-gap: 40px; }
}
@media (max-width: 900px) {
  /* The nav's sections become a second row under the bar once the page has scrolled: a thumb's way
     around a long page. Everything that sticks or lands under the nav counts the row in. */
  :root { --top: calc(var(--nav-h) + 45px); }
  .rail5 { display: none; }
  .nav { flex-wrap: wrap; align-content: flex-start; height: auto; gap: 0 1rem; }
  .nav > .wordmark, .nav-actions { min-height: var(--nav-h); }
  .nav-actions { margin-left: auto; }
  .nav-links { order: 3; display: none; flex: none; width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1); padding: 0 calc(var(--gutter) - 12px); gap: 0;
    overflow-x: auto; white-space: nowrap; scrollbar-width: none; border-top: 1px solid var(--line); }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav.is-stuck .nav-links { display: flex; }
  .nav-links a { flex: none; padding: 0 12px; }
}
@media (max-width: 760px) {
  :root { --nav-h: 60px; --sec-pad: clamp(64px, 9.5vh, 92px); }
  .nav-signin { display: none; }
  .nav-links .nav-signin-m { display: inline-flex; }
  .statement-body { justify-self: start; }
  .join { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-replay { justify-self: start; }
  .band-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jump { justify-content: flex-start; }
  .sec-head--center { text-align: left; justify-items: start; margin-inline: 0; }
  .shown { margin-inline: 0; text-align: left; }
  .drift { display: none; }
  .pn { border-radius: 18px; }
  .pn-name { width: 100%; }
  .tabs { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs button { padding: 0 .5rem; }
  .lead { grid-template-columns: 104px minmax(0, 1fr); }
  .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1rem; }
  .result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result div:first-child { grid-column: 1 / -1; }
  .num b { font-size: 1.9rem; }
  .lead > .scope { grid-row: auto; }
  .lead-more { grid-column: 1 / -1; }
  /* A row's picture stays big enough to tell the card by: the name wraps beside it instead. */
  .row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .row-n { display: none; }
  .row-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .row-right .x { font-size: 1.125rem; }
  .pot { grid-template-columns: minmax(0, 1fr); }
  .pot-card { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 18px; }
  .pot-card figcaption { margin-top: 0; }
  .dial { width: 104px; height: 104px; }
  .dial b { font-size: 2.8rem; }
  .part { grid-template-columns: minmax(0, 1fr) 2.6rem; gap: 6px 12px; }
  .part .meter { grid-column: 1 / -1; grid-row: 2; }
  .part-v { grid-column: 2; grid-row: 1; }
  .part-fact { grid-column: 1 / -1; grid-row: 3; }
  .strip, .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .strip .tile:nth-of-type(n + 5) { display: none; }
  .rung { grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 10px; }
  .rung-bar i { width: calc(var(--v) * 62%); }
  .rung-g { white-space: normal; line-height: 1.2; }
  .faces { display: flex; flex-wrap: wrap; gap: 8px; }
  .face { grid-template-columns: 36px auto; min-height: 48px; padding: .35rem .9rem .35rem .4rem; border-radius: 999px; gap: 10px; }
  .face-pic { width: 36px; height: 36px; }
  .face span span { display: none; }
  .spot-why ul { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  /* A phone keeps the first three findings and two cards behind each, one under the other: the list is long enough. */
  .proof { grid-template-columns: minmax(0, 1fr); }
  .proof li { grid-template-columns: 56px minmax(0, 1fr); }
  .proof li:nth-child(n + 3), .finding:nth-of-type(n + 4) { display: none; }
  .share-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-row { grid-template-columns: minmax(0, 1fr); }
  .verdict { justify-self: start; }
  .callouts { grid-template-columns: minmax(0, 1fr); }
  .msg { grid-template-columns: minmax(0, 1fr); }
  .msg-who { display: none; }
  .verdicts li { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  /* The buy checker's parts go one under another, edge to edge, so each keeps its true size on a
     phone: the card, what it is worth, what grading makes, the verdict. */
  .checkshot { margin-inline: calc(var(--gutter) * -1); }
  .checkcut { padding: 18px 5px 8px; border-radius: 0; box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line); }
  .check-top { padding-inline: 10px; }
  .check-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 1.4rem 0 1.2rem; }
  .check-cell[data-k], .check-cell[data-k="Verdict"], .check-cell[data-k="Asking and worth"], .check-cell[data-k="Grading it"] { grid-column: 1; grid-row: auto; }
  .check-cell[data-k]::before { padding-left: 10px; }
  .check-cell--none { display: none; }
  /* (the summary's small print is wider than a phone: rather than shrink it under 12px, it is left out) */
  .check-top .check-cell + .check-cell { display: none; }
  .checkshot figcaption { padding-inline: var(--gutter); }
  .index { grid-template-columns: minmax(0, 1fr); }
  .index-group li { padding: .8rem 0; }
  /* The six worlds go sideways by hand: the row scrolls and snaps under a thumb, the next one peeking
     in. Each is there from the start (sliding to one is its arrival), and the row never scrolls up and down. */
  .world-grid { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .world-grid::-webkit-scrollbar { display: none; }
  .js .world-grid > [data-in] { opacity: 1; transform: none; transition: none; }
  /* (snap in the row's own axis only: "none" for the block axis, or an iPhone's Safari pulls the page itself up and
      down toward the row as it scrolls past) */
  .world { flex: none; width: 84%; scroll-snap-align: none start; }
  .world-fan { height: 214px; }
  .world-fan .pic { width: 124px; margin-left: -62px; }
  .dots { display: flex; }
  .cov { grid-template-columns: minmax(0, 1fr); }
  /* Proof and pricing, one thing under another. */
  .tally-big b { font-size: 2.4rem; }
  .tallies, .trust-grid.is-one .tallies { grid-template-columns: minmax(0, 1fr); }
  .rcpt { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  .rcpt > .pic { grid-row: auto; }
  .rcpt-head { flex-direction: column; gap: .45rem; }
  .rcpt-run { display: flex; align-items: baseline; gap: .5rem; text-align: left; }
  .rcpt-legs { grid-column: 1 / -1; }
  .plans-value { padding: .65rem .9rem; font-size: .9375rem; }
  /* (Pricing stays centered on a phone, as the cards in it are: its header, the switch and its line, the small print) */
  .pricing .sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }
  .plans-note { gap: .5rem; }
  /* (what is in each plan, one plan under another) */
  .compare-cols, .pricing[data-n="2"]:has(.pslab) .compare-cols { grid-template-columns: minmax(0, 1fr); }
  .compare-col { padding: 1rem 1.05rem 1rem; }
  /* The plans go sideways under a thumb, as the six worlds do, the recommended one first on screen (landing.js);
     the switch above them names each with its price and goes to it. Shorter cards, so one fits a phone's screen. */
  .tabs.plan-pick { position: sticky; z-index: 4; top: calc(var(--top) + 8px); display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin-top: 1.1rem;
    background: #090d1c; box-shadow: 0 10px 24px -12px #000; }
  .plan-pick button { display: grid; gap: 3px; align-content: center; min-height: 54px; padding: 6px 4px; white-space: normal; }
  .plan-pick b { font: 700 1.0625rem/1 var(--display); letter-spacing: .01em; color: var(--ink); }
  .plan-pick span { font: 500 .8125rem/1.15 var(--text); }
  .plans { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .plans::-webkit-scrollbar { display: none; }
  .js .plans [data-in] { opacity: 1; transform: none; transition: none; }
  .plans { margin-top: 14px; }
  .plan { flex: none; width: 86%; scroll-snap-align: none center; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; padding: 20px 20px 22px; }
  /* (a column, slab and all, is what goes sideways under a thumb) */
  .plan-col { flex: none; width: 86%; scroll-snap-align: none center; gap: 12px; }
  .plan-col > .plan { width: 100%; }
  .plan-buy { min-height: 60px; }
  .plan-offer { padding: .9rem 1rem 1rem; }
  .plan-offer-clock b { font-size: 2.8rem; }
  .plans-offer { margin-top: 12px; border-radius: 18px; font-size: .9375rem; }
  .plan h3 { font-size: 2rem; }
  .plan-for { margin-top: .35rem; font-size: .9375rem; }
  .plan-price { margin-top: 1rem; }
  .plan-amount b { font-size: 2.9rem; }
  .plan-bill { margin-top: .45rem; }
  .plan-go { margin-top: 1rem; }
  .plan > .plan-feats { grid-column: 1; grid-row: auto; margin-top: 1.1rem; padding: 1rem 0 0; border-left: 0; border-top: 1px solid rgba(160, 175, 255, .12); }
  .plan-lead { margin-bottom: .7rem; }
  .plan-feats ul { gap: .55rem; }
  .plan-feats > ul:not(:last-child) { margin-bottom: 1rem; }
  .plan-feats li { font-size: .9375rem; line-height: 1.4; }
  .plan.pslab { padding: 9px; border-radius: 20px; }
  .plans:has(.pslab) { margin-top: 14px; }
  .plan-col > .pslab { margin-top: 14px; }
  /* (each card as wide as the row less a peek at each side, so the one on screen sits exactly in the middle at either
     end of the row, the other peeking in: centre() and the switch above land where they aim) */
  /* (the row starts at its start: centred, a row wider than the screen would push the first plan out of reach) */
  .plans:has(.pslab) { --peek: 28px; align-items: stretch; justify-content: flex-start; gap: 12px; padding-inline: var(--peek); scroll-padding-inline: var(--peek); }
  .plans:has(.pslab) > .plan-col { width: 100%; }
  /* (a phone's slab is narrower than a desk screen's: the small print keeps a floor, as the card's words do (13px),
     so label and card grow a little taller than their shapes rather than smaller. The two slabs are the same height,
     as real slabs are: the shorter card's headlines spread to fill it) */
  .pslab-set, .pslab-line { font-size: max(10.5px, 2.4cqi); white-space: normal; text-wrap: balance; }
  .pslab-grade small { font-size: max(10.5px, 2.4cqi); }
  .pslab-subs small { font-size: max(9.5px, 2.1cqi); }
  .pslab-subs b { font-size: max(12px, 3.8cqi); }
  .pslab-foot { font-size: max(10px, 2.2cqi); }
  .pcard-strip { font-size: max(10.5px, .7em); }
  .pcard-foot { font-size: max(10.5px, .72em); }
  .pcard-illus { font-size: max(10px, .66em); }
  /* (a card closer to a real card's shape, and a slab that fits a phone's screen under the nav and the plan switch:
     a wider, shorter art window, three headlines, and who the plan is for said under its name in "What's in each
     plan" below, with the rest of its features, as on a short desk screen) */
  .pcard-art { --art-r: 3.4; }
  .pcard .plan-feats li:nth-child(n + 4) { display: none; }
  .pcard .plan-for { display: none; }
  .pricing:has(.pslab) .compare-for { display: block; }
  .pcard .plan-go { min-height: 44px; }
}
@media (max-width: 520px) {
  .specimen-stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 22px; }
  .fact-v { font-size: 1.7rem; }
  .hero-cta .btn { flex: 1 1 auto; }
  .jump a { flex: 1 1 calc(50% - .6rem); }
  .lead { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .lead h3 { font-size: 1.5rem; }
  .deal { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .bill-switch button { flex-wrap: wrap; justify-content: center; gap: 4px .4rem; padding-block: 6px; }
  .rcpt-legs { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: 4px; }
  .leg { padding: .6rem .65rem .65rem; }
  .leg b { font-size: 1.45rem; }
  .leg-psa { display: none; }
  .compare-list small.is-aside { display: none; }
  .rcpt-mid { letter-spacing: .06em; }
}
/* (a narrow card's small print keeps its number, rarity and year: the set code would push it past the edge) */
@media (max-width: 520px) {
  .pcard-set { display: none; }
}

/* ================================================================ less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Nothing follows the scroll: the hero's words and cards stay put, and so do the glows and far cards below it. */
  .hero-copy, .specimen, .scene-far { translate: none; }
  .hero-copy { opacity: 1; }
  .sig::before { translate: none; }
  .js .line > span, .js [data-in], .js [data-anim] { transform: none; transition: opacity .4s; transition-delay: 0s; }
  .specimen.is-live .specimen-scan, .js [data-anim].is-in .scope-scan { animation: none; }
  .specimen-card { transition: none; }
  .step::before { transform: none; transition: none; }
  .rail5 { transform: none; transition: none; }
  /* Bars, meters and dials stand at their values from the start. */
  .js [data-anim] :is(.bars, .meter, .rung-bar, .gauge, .share-bar, .mult, .bw-spread, .bw-pbar) i, .js [data-anim] .dial-fill, .bw-tab { transition: none; }
  .js [data-anim]:not(.is-in) :is(.bars, .bw-spread) i { transform: none; }
  .js [data-anim]:not(.is-in) :is(.rung-bar, .gauge, .share-bar, .mult, .bw-pbar) i { transform: none; }
  .js [data-anim]:not(.is-in) .meter i { transform: scaleX(var(--v)); }
  .js [data-anim]:not(.is-in) .dial-fill { stroke-dashoffset: calc(327 * (1 - var(--v))); }
  .world-fan .pic { transition: none; }
}

/* The footer, centred (the owner, 2026-10-19): the logo with "Open a pack again" under it, the policy links in one
   row that wraps centred, then the © line under a hairline. No disclaimers here: they live on the policy pages the
   links open (legal/disclaimer.html, legal/trademarks.html). */
.sitefoot [hidden] { display: none !important; }
.sitefoot-grid { display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.sitefoot-top { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sitefoot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; max-width: 62rem; margin: 0; }
.sitefoot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); font-weight: 500; font-size: .9375rem; text-decoration: none; transition: color .14s; }
.sitefoot-links a:hover { color: var(--ink); }
.sitefoot p { margin: 0; max-width: 82ch; line-height: 1.55; }
.sitefoot .sitefoot-advice, .sitefoot .sitefoot-indep { max-width: 56rem; }
.sitefoot .sitefoot-advice { font-size: .875rem; color: var(--ink-soft); }
.sitefoot .sitefoot-advice b { color: var(--ink); font-weight: 600; }
.sitefoot .sitefoot-indep { font-size: .875rem; color: var(--ink-soft); }
.sitefoot .sitefoot-copy { justify-self: stretch; max-width: none; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.legal-ph { padding: 0 .25em; border-radius: 4px; background: rgba(250, 178, 25, .14); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(250, 178, 25, .45); font-weight: 600; }
@media (max-width: 600px) {
  .sitefoot-links { gap: 0 1.1rem; }
}

/* ================================================================ the free Discord, the social links (2026-10-20)
   The section before Pricing (index.html #discord): the words and the big button on the left, the server's public
   channels drawn as its own list beside them, in the brand's cyan (the logo's "Grails") on the page's navy. The social
   links: round icons in the nav (on a phone, with their names, in the second row), bigger in the footer; each
   network's own mark (.glyph, filled), each hidden while CONFIG.social has no address for it. */
.discord { --cy: 0, 199, 251; overflow: clip; }
.discord::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(44% 58% at 80% 46%, rgba(var(--cy), .16), transparent 72%), radial-gradient(36% 46% at 6% 94%, rgba(var(--cy), .07), transparent 72%); }
.discord-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(40px, 6vw, 104px); }
.discord-copy { display: grid; justify-items: start; gap: 1.15rem; }
.discord .kicker { color: rgb(var(--cy)); }
.discord h2 { font-size: clamp(2.9rem, 6vw, 5.6rem); font-weight: 800; line-height: .9; }
.discord-copy .lede { max-width: 34ch; }
.glyph { display: block; flex: none; width: 20px; height: 20px; fill: currentColor; }
.btn--discord { margin-top: .8rem; min-height: 66px; padding: 0 2rem 0 1.6rem; gap: .8rem; border-radius: 16px; font-size: 1.1875rem; font-weight: 700;
  background: rgb(var(--cy)); color: #031427; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 18px 40px -16px rgba(var(--cy), .75); }
.btn--discord .glyph { width: 28px; height: 28px; }
.discord-note { max-width: 40ch; font-size: .9375rem; color: var(--ink-note); }
@media (hover: hover) and (pointer: fine) {
  .btn--discord:hover { background: #5fdfff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 44px -16px rgba(var(--cy), .9); }
}
/* the server's public channels, as its own list */
.server { padding: clamp(18px, 2.2vw, 30px); border-radius: 26px; background: linear-gradient(165deg, rgba(14, 28, 58, .9), rgba(6, 10, 24, .97));
  box-shadow: inset 0 0 0 1px rgba(var(--cy), .24), inset 0 1px 0 var(--edge), 0 50px 90px -50px rgba(var(--cy), .45); }
.server-head { display: flex; align-items: center; gap: .9rem; padding: 0 .3rem 1.1rem; border-bottom: 1px solid var(--line); }
.server-head img { flex: none; width: 44px; height: 44px; padding: 8px; border-radius: 14px; background: #031427; box-shadow: inset 0 0 0 1px rgba(var(--cy), .3); }
.server-head p { display: grid; gap: .2rem; }
.server-head b { font: 700 1.5rem/1 var(--display); letter-spacing: .01em; }
.server-head span { font-size: .875rem; line-height: 1.3; color: var(--ink-note); }
.chans { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .6rem; }
.chan { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 1.1rem 1.15rem 1.2rem; border-radius: 18px;
  background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(160, 175, 255, .08); }
.chan .ico { stroke: rgb(var(--cy)); }
.chan-name { font: 600 .9375rem/1.2 var(--text); color: rgb(var(--cy)); }
.chan h3 { margin-top: .4rem; font-size: clamp(1.6rem, 2.2vw, 2rem); }
.chan p:not(.chan-name) { margin-top: .5rem; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.chan .chan-when { display: inline-block; margin-top: .8rem; padding: .32rem .62rem; border-radius: 8px; font-size: .875rem; font-weight: 600; color: var(--ink); background: rgba(var(--cy), .14); }
.chan .chan-small { font-size: .875rem; color: var(--ink-note); }
.chan-small a { color: var(--ink-soft); text-underline-offset: 3px; }
.chan-small a:hover { color: var(--ink); }
/* the social links */
.social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.social [hidden], .nav [hidden] { display: none !important; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-soft); transition: color .14s, background-color .14s; }
.social a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.social--nav .glyph { width: 19px; height: 19px; }
.social--foot { gap: .75rem; }
.social--foot a { width: 52px; height: 52px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.social--foot a:hover { background: rgba(142, 162, 255, .12); }
.social--foot .glyph { width: 22px; height: 22px; }
.nav-links .nav-social-m { display: none; }
.nav-social-m .glyph { width: 16px; height: 16px; margin-right: .45rem; }
/* (room for the icons in the bar: the short labels from 1240 px, as under 1160; no icons at 901-1000 px, the bar's
   tightest, where they stay in the footer and the Discord section) */
@media (min-width: 1161px) and (max-width: 1240px) {
  .nav { gap: 1.25rem; }
  .nav-links { gap: 1.15rem; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .social--nav { display: none; }
}
@media (max-width: 1000px) {
  .discord-grid { grid-template-columns: minmax(0, 1fr); }
  .discord-copy .lede { max-width: 44ch; }
}
@media (max-width: 760px) {
  .social--nav { display: none; }
  .nav-links .nav-social-m { display: inline-flex; }
  .btn--discord { justify-self: stretch; }
  .chan { grid-template-columns: minmax(0, 1fr); padding: 1rem 1rem 1.1rem; }
  .chan .ico { position: absolute; left: 1rem; top: .9rem; width: 22px; height: 22px; }
  .chan-name { padding-left: 32px; line-height: 22px; }
}