/* ===========================================================================
   landing.css — the landing page (landing.js): what a visitor who is not
   signed in sees when the app is hosted.

   Self-contained and scoped: every rule hangs off `body.is-landing` or
   `.landing`, so nothing else in the app changes. Colours are design.css's
   tokens, so the visitor's accent (sky unless they picked another) and both
   themes carry through; the only fixed colours are the painted cards and the
   binder, which are objects, not chrome.

   Motion is keyed to `data-motion` on <html> (motion.js):
     Full    — the aurora drifts, cards deal in, float and catch the light, the
               scene leans with the pointer, the sample binder turns its page,
               sections rise into view one after another;
     Reduced — sections fade in, and that is all: nothing loops, leans or shines;
     Off     — nothing moves; everything is simply there.
   Only `transform` and `opacity` animate. A section that is off screen gets
   `.lp-idle` from landing.js and its loops hold still.
   =========================================================================== */

/* ------------------------------------------------------------ page frame */

/* The app scrolls inside each view; the landing page scrolls as a page, so a
   phone can tuck its address bar away while you read. */
body.is-landing { overflow-x: hidden; overflow-y: auto; }
html:has(> body.is-landing) { scrollbar-gutter: stable; }
/* …though not behind the sign-in dialog. */
body.is-landing:has(> #modal-root:not([hidden])) { overflow-y: hidden; }

/* The page draws a header of its own. */
body.is-landing .topbar { display: none; }
/* #view-signin centres the sign-in card (auth.css). `place-items` has to go
   too, not just the grid: browsers now centre block children by it as well,
   which would size the page to its content instead of the window. */
body.is-landing #view-signin { display: block; place-items: normal; min-height: 0; padding: 0; }

.landing {
  --lp-ease: cubic-bezier(.16, 1, .3, 1);
  --lp-ease-io: cubic-bezier(.65, 0, .35, 1);
  --lp-head-h: 64px;
  --lp-measure: 1240px;
  --lp-gut: clamp(16px, 4vw, 40px);
  --lp-grad: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 58%, #f0abfc 100%);
  --lp-up: #34d399;
  --lp-down: #fb7185;
  --lp-aur: 1;
  --lp-grain: .05;
  --lp-page: #0d1119;
  --lp-page-line: rgba(255, 255, 255, .07);
  --lp-slot: rgba(255, 255, 255, .035);
  --lp-lift: 0 30px 60px -36px rgba(0, 0, 0, .75);
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--ink);
}
:root[data-theme="light"] .landing {
  --lp-grad: linear-gradient(100deg, var(--accent-text) 0%, var(--accent-2) 60%, #c026d3 100%);
  --lp-up: #047857;
  --lp-down: #be123c;
  --lp-aur: .62;
  --lp-grain: .035;
  --lp-page: #f3f1ec;
  --lp-page-line: rgba(20, 24, 32, .09);
  --lp-slot: rgba(20, 24, 32, .045);
  --lp-lift: 0 1px 2px rgba(20, 24, 32, .06), 0 24px 44px -30px rgba(20, 24, 32, .32);
}

/* Film grain over the whole page: one still tile of noise, fixed to the
   screen. It lies over the sections (under the header and any dialog), so the
   hero's fade into the page below cannot hide it and leave a seam. */
.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--lp-grain);
  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='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.landing .lp-wrap {
  width: 100%;
  max-width: calc(var(--lp-measure) + 2 * var(--lp-gut));
  margin-inline: auto;
  padding-inline: var(--lp-gut);
}

.landing .lp-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

.landing .lp-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Colours for the little cards in pockets, sheets and thumbnails. */
.landing .t1 { --g: linear-gradient(160deg, #38bdf8, #1e3a8a); }
.landing .t2 { --g: linear-gradient(160deg, #a78bfa, #3b0764); }
.landing .t3 { --g: linear-gradient(160deg, #fb7185, #4c0519); }
.landing .t4 { --g: linear-gradient(160deg, #fbbf24, #7c2d12); }
.landing .t5 { --g: linear-gradient(160deg, #34d399, #064e3b); }
.landing .t6 { --g: linear-gradient(160deg, #e2e8f0, #334155); }
.landing .t7 { --g: linear-gradient(135deg, #f0abfc, #7dd3fc 45%, #a78bfa 70%, #701a75); }
.landing .t8 { --g: linear-gradient(160deg, #5eead4, #134e4a); }

/* ------------------------------------------------------------------ reveal
   landing.js adds `.is-in` as each piece comes into view: `.lp-rv` rises in
   itself, `.lp-rvg` brings its children in one after another (`--i`). */
:root[data-motion="full"] .landing .lp-rv,
:root[data-motion="full"] .landing .lp-rvg > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity .9s var(--lp-ease), transform 1.2s var(--lp-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
:root[data-motion="full"] .landing .lp-rv.is-in,
:root[data-motion="full"] .landing .lp-rvg.is-in > * { opacity: 1; transform: none; }

:root[data-motion="reduced"] .landing .lp-rv,
:root[data-motion="reduced"] .landing .lp-rvg > * { opacity: 0; transition: opacity .35s ease; }
:root[data-motion="reduced"] .landing .lp-rv.is-in,
:root[data-motion="reduced"] .landing .lp-rvg.is-in > * { opacity: 1; }

/* Off screen, a section's loops hold still. */
.landing .lp-idle,
.landing .lp-idle *,
.landing .lp-idle *::before,
.landing .lp-idle *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ header */

.landing .lp-head {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--lp-head-h);
}
/* The glass comes in once something has scrolled under it. */
.landing .lp-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--glass-edge), 0 12px 32px -24px rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .35s var(--lp-ease);
}
.landing .lp-head.is-scrolled::before { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .landing .lp-head::before { background: var(--bg-2); }
}

.landing .lp-head-in { height: 100%; display: flex; align-items: center; gap: 8px; }

.landing .lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 0 -6px;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.landing .lp-brand-mark { display: block; flex: none; width: 32px; height: 32px; color: var(--accent-text); }
.landing .lp-brand-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.landing .lp-brand-mark svg { transition: transform .5s var(--lp-ease); }
.landing .lp-brand:hover .lp-brand-mark svg { transform: rotate(-8deg); }
/* The gem catches the light now and then. */
.landing .lp-mark-gem { transform-box: fill-box; transform-origin: center; }
:root[data-motion="full"] .landing .lp-head .lp-mark-gem { animation: lp-twinkle 6s ease-in-out 1.2s infinite; }
@keyframes lp-twinkle {
  0%, 84%, 100% { transform: none; opacity: .8; }
  90% { transform: scale(1.35) rotate(45deg); opacity: 1; }
}

.landing .lp-nav { display: none; align-items: center; gap: 2px; margin-right: 8px; }
.landing .lp-nav a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 560;
  text-decoration: none;
  transition: color var(--t-1) var(--ease-out), background-color var(--t-1) var(--ease-out);
}
.landing .lp-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
@media (min-width: 720px) { .landing .lp-nav { display: flex; } }

.landing .lp-head-end { display: flex; align-items: center; gap: 8px; }
.landing .lp-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.landing .lp-icon-btn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); }
.landing .lp-icon-btn:active { transform: scale(.94); }
.landing .lp-icon-btn span { display: grid; }
.landing .lp-icon-btn svg { width: 18px; height: 18px; }
/* Dark shows the sun (to go light), light shows the moon. */
.landing .lp-icon-btn .lp-moon { display: none; }
:root[data-theme="light"] .landing .lp-icon-btn .lp-sun { display: none; }
:root[data-theme="light"] .landing .lp-icon-btn .lp-moon { display: grid; }

.landing .btn.lp-btn-head { height: 40px; padding: 0 18px; font-size: 14.5px; }

/* -------------------------------------------------------------- buttons */

.landing .btn.lp-cta,
.landing .btn.lp-ghost {
  height: 52px;
  padding: 0 24px;
  font-size: 16px;
  gap: 10px;
  border-radius: var(--radius-pill);
}
/* A band of light runs across the main button on hover. */
.landing .btn.lp-cta { overflow: hidden; padding-right: 20px; }
.landing .btn.lp-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translate3d(-110%, 0, 0);
}
:root[data-motion="full"] .landing .btn.lp-cta:hover::after {
  transform: translate3d(110%, 0, 0);
  transition: transform .9s var(--lp-ease);
}
.landing .btn.lp-ghost {
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.landing .lp-arrow { display: inline-grid; width: 18px; height: 18px; transition: transform .4s var(--lp-ease); }
.landing .lp-arrow svg { width: 100%; height: 100%; }
.landing .lp-cta:hover .lp-arrow { transform: translateX(3px); }
.landing .lp-ghost:hover .lp-arrow { transform: translateY(2px); }

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

.landing .lp-sec {
  position: relative;
  z-index: 1;
  padding-block: clamp(76px, 10vw, 136px);
  overflow: hidden;
  overflow: clip;
}
.landing .lp-sec:focus { outline: none; }

.landing .lp-sec-head { max-width: 780px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.landing .lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.landing .lp-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--lp-grad);
}
.landing .lp-h2 {
  margin: 0;
  font-size: clamp(30px, 2.6vw + 18px, 52px);
  font-weight: 740;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.landing .lp-dim { display: block; color: var(--ink-3); }
.landing .lp-sec-lede {
  max-width: 40em;
  margin: 18px auto 0;
  font-size: clamp(15.5px, .3vw + 14.5px, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ================================================================== hero */

.landing .lp-hero {
  position: relative;
  z-index: 1;
  /* Runs up under the header, so the aurora is behind it too. */
  margin-top: calc(-1 * var(--lp-head-h));
  padding-top: var(--lp-head-h);
  overflow: hidden;
  overflow: clip;
}

.landing .lp-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.landing .lp-hero-bg::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* The aurora: four soft lights, each drifting on its own slow path, and all
   of them sliding a little against the pointer. */
.landing .lp-aurora {
  position: absolute;
  inset: 0;
  opacity: var(--lp-aur);
  transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px), 0);
}
.landing .lp-aurora i {
  position: absolute;
  display: block;
  width: clamp(420px, 64vw, 880px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent 72%);
}
.landing .lp-aurora .a1 { --c: color-mix(in srgb, var(--accent) 42%, transparent); left: -16%; top: -34%; }
.landing .lp-aurora .a2 { --c: color-mix(in srgb, var(--accent-2) 40%, transparent); right: -18%; top: -20%; }
.landing .lp-aurora .a3 { --c: color-mix(in srgb, #f472b6 24%, transparent); left: 30%; top: 26%; width: clamp(320px, 46vw, 640px); }
.landing .lp-aurora .a4 { --c: color-mix(in srgb, var(--accent) 24%, transparent); right: 4%; bottom: -36%; width: clamp(340px, 52vw, 720px); }
:root[data-motion="full"] .landing .lp-aurora .a1 { animation: lp-drift-a 26s ease-in-out infinite alternate; }
:root[data-motion="full"] .landing .lp-aurora .a2 { animation: lp-drift-b 31s ease-in-out infinite alternate; }
:root[data-motion="full"] .landing .lp-aurora .a3 { animation: lp-drift-c 23s ease-in-out infinite alternate; }
:root[data-motion="full"] .landing .lp-aurora .a4 { animation: lp-drift-d 35s ease-in-out infinite alternate; }
@keyframes lp-drift-a { to { transform: translate3d(14%, 12%, 0) scale(1.12); } }
@keyframes lp-drift-b { to { transform: translate3d(-16%, 14%, 0) scale(.88); } }
@keyframes lp-drift-c { to { transform: translate3d(-12%, -16%, 0) scale(1.2); } }
@keyframes lp-drift-d { to { transform: translate3d(12%, -12%, 0) scale(1.06) rotate(24deg); } }

/* A dot grid that fades out towards the edges. */
.landing .lp-dots {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 18%, transparent) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 10%, transparent 75%);
}

.landing .lp-hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
  padding-block: clamp(36px, 7vw, 80px) clamp(56px, 9vw, 120px);
}
@media (min-width: 1024px) {
  .landing .lp-hero-in {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: min(calc(100svh - var(--lp-head-h)), 900px);
    padding-block: 40px 88px;
  }
}

.landing .lp-hero-copy { max-width: 600px; }
@media (max-width: 1023.98px) {
  .landing .lp-hero-copy { margin-inline: auto; text-align: center; }
  .landing .lp-hero-copy .lp-lede { margin-inline: auto; }
  .landing .lp-hero-copy .lp-ctas { justify-content: center; }
}

.landing .lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 620;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: var(--glass-edge);
}
/* The live-prices dot, with a ring that keeps rippling out of it. */
.landing .lp-pulse {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-up);
  box-shadow: 0 0 10px color-mix(in srgb, var(--lp-up) 70%, transparent);
}
.landing .lp-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--lp-up);
  opacity: 0;
}
:root[data-motion="full"] .landing .lp-pulse::after { animation: lp-ping 2.4s var(--lp-ease) infinite; }
@keyframes lp-ping {
  0% { transform: scale(.5); opacity: .9; }
  80%, 100% { transform: scale(1.8); opacity: 0; }
}

.landing .lp-display {
  margin: 0;
  font-size: clamp(40px, 2.9vw + 26px, 70px);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.landing .lp-grad {
  background: var(--lp-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
  .landing .lp-grad,
  .landing .lp-stat-n { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

.landing .lp-lede {
  max-width: 34em;
  margin: 24px 0 0;
  font-size: clamp(16px, .45vw + 14.4px, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.landing .lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 480px) { .landing .lp-ctas > .btn { flex: 1 1 100%; } }
.landing .lp-note {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: balance;
}
.landing .lp-note-ico { display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; }
.landing .lp-note-ico svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------ hero centrepiece
   Sized in container units (cqw: hundredths of the art's own width), so the
   whole scene scales as one piece from a phone to a wide screen. */

.landing .lp-hero-art {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1 / .9;
  container-type: inline-size;
}
@media (min-width: 1024px) { .landing .lp-hero-art { max-width: 640px; } }
.landing .lp-art-move { position: absolute; inset: 0; }

/* A slowly turning ring of colour behind everything, and a glow under it. */
.landing .lp-halo {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 112cqw;
  aspect-ratio: 1;
  margin: -56cqw 0 0 -56cqw;
  border-radius: 50%;
  opacity: .55;
  background: conic-gradient(from 90deg,
    transparent 0deg,
    color-mix(in srgb, var(--accent) 70%, transparent) 60deg,
    transparent 130deg,
    color-mix(in srgb, var(--accent-2) 65%, transparent) 210deg,
    transparent 280deg,
    color-mix(in srgb, #f472b6 50%, transparent) 330deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 63%, #000 65.5%, #000 67%, transparent 71%);
  mask-image: radial-gradient(closest-side, transparent 63%, #000 65.5%, #000 67%, transparent 71%);
}
:root[data-theme="light"] .landing .lp-halo { opacity: .35; }
:root[data-motion="full"] .landing .lp-halo { animation: lp-spin 40s linear infinite; }
@keyframes lp-spin { to { transform: rotate(1turn); } }

.landing .lp-art-glow {
  position: absolute;
  inset: 6% 2% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 28%, transparent), transparent);
}
.landing .lp-floor {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 2%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
}
:root[data-theme="light"] .landing .lp-floor { background: radial-gradient(closest-side, rgba(20, 24, 32, .22), transparent); }

/* The 3D scene. --px / --py (−1…1, from the pointer) lean it; the sway wrapper
   rocks it gently on its own, so it lives on touch screens too. */
.landing .lp-stage { position: absolute; inset: 0; perspective: 220cqw; perspective-origin: 50% 42%; }
.landing .lp-sway,
.landing .lp-scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.landing .lp-scene { transform: rotateX(calc(var(--py, 0) * -8deg)) rotateY(calc(var(--px, 0) * 12deg)); }
:root[data-motion="full"] .landing .lp-sway { animation: lp-sway 18s ease-in-out infinite alternate; }
@keyframes lp-sway {
  0% { transform: rotateX(3deg) rotateY(-7deg); }
  100% { transform: rotateX(-2deg) rotateY(7deg); }
}

/* The open binder, lying back behind the cards. */
.landing .lp-binder-pos {
  position: absolute;
  left: 7cqw;
  top: 1cqw;
  width: 86cqw;
  transform-style: preserve-3d;
  transform: translateZ(-26cqw) rotateX(14deg) rotateY(-10deg) rotateZ(-7deg);
}
.landing .lp-binder { padding: 1.8cqw; border-radius: 2.2cqw; }

/* The fan: four cards around one point, each nearer than the last. */
.landing .lp-fan { position: absolute; left: 50%; top: 63%; width: 0; height: 0; transform-style: preserve-3d; }
.landing .lp-slot {
  --cw: 29cqw;
  position: absolute;
  left: calc(var(--cw) / -2);
  top: calc(var(--cw) * -.7);
  width: var(--cw);
  transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), var(--z)) rotate(var(--r));
}
.landing .lp-slot.s1 { --x: -25cqw; --y: 3cqw; --z: 2cqw; --r: -15deg; }
.landing .lp-slot.s2 { --x: -8.5cqw; --y: -1.5cqw; --z: 6cqw; --r: -5deg; }
.landing .lp-slot.s3 { --x: 8.5cqw; --y: -1cqw; --z: 10cqw; --r: 5deg; }
.landing .lp-slot.s4 { --x: 25cqw; --y: 3.5cqw; --z: 15cqw; --r: 15deg; }
.landing .lp-float { transform-style: preserve-3d; }
:root[data-motion="full"] .landing .lp-float {
  animation: lp-float calc(5.6s + var(--n, 0) * .9s) ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * -1.7s);
}
@keyframes lp-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -1.5cqw, 0) rotate(.8deg); }
}

/* Entrances: the binder settles, the cards are dealt, the read-outs pop in. */
:root[data-motion="full"] .landing .lp-binder { animation: lp-settle 1.3s var(--lp-ease) .1s backwards; }
:root[data-motion="full"] .landing .lp-hero .lp-card {
  animation: lp-deal 1.15s var(--lp-ease) backwards;
  animation-delay: calc(.3s + var(--n, 0) * .12s);
}
:root[data-motion="full"] .landing .lp-chip { animation: lp-pop .9s var(--lp-ease) 1s backwards; }
:root[data-motion="full"] .landing .is-set .lp-chip { animation-delay: 1.18s; }
:root[data-motion="reduced"] .landing .lp-binder,
:root[data-motion="reduced"] .landing .lp-hero .lp-card,
:root[data-motion="reduced"] .landing .lp-chip { animation: lp-fade .5s ease backwards; }
@keyframes lp-settle { from { opacity: 0; transform: translate3d(0, 7cqw, 0); } }
@keyframes lp-deal { from { opacity: 0; transform: translate3d(0, 26cqw, -8cqw) rotate(-10deg) scale(.9); } }
@keyframes lp-pop { from { opacity: 0; transform: translate3d(0, 3cqw, 0) scale(.92); } }
@keyframes lp-fade { from { opacity: 0; } }

/* Under a mouse, a card comes up to meet it. */
.landing .lp-hero .lp-card { transition: transform .6s var(--lp-ease); }
:root[data-motion="full"] .landing .lp-hero .lp-card:hover { transform: translate3d(0, -3cqw, 5cqw) scale(1.04); }

/* The app's own read-outs, floating nearest of all. */
.landing .lp-chip-pos { position: absolute; transform-style: preserve-3d; transform: translateZ(18cqw); }
.landing .lp-chip-pos.is-value { top: 3cqw; right: -1cqw; }
.landing .lp-chip-pos.is-set { left: -1cqw; bottom: 9cqw; }
.landing .lp-chip-bob { transform-style: preserve-3d; }
:root[data-motion="full"] .landing .lp-chip-bob { animation: lp-bob 7s ease-in-out infinite; }
:root[data-motion="full"] .landing .is-set .lp-chip-bob { animation-duration: 8.4s; animation-delay: -3s; }
@keyframes lp-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -1.6cqw, 0); }
}
.landing .lp-chip {
  display: grid;
  gap: .35em;
  min-width: clamp(118px, 30cqw, 196px);
  padding: clamp(9px, 2.2cqw, 15px) clamp(11px, 2.6cqw, 17px);
  border-radius: clamp(12px, 2.6cqw, 18px);
  font-size: clamp(10px, 1.9cqw, 13px);
  line-height: 1.25;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge), 0 22px 40px -18px rgba(0, 0, 0, .6);
  white-space: nowrap;
}
:root[data-theme="light"] .landing .lp-chip { box-shadow: var(--glass-edge), 0 20px 40px -20px rgba(20, 24, 32, .35); }
.landing .lp-chip-k { font-weight: 620; }
.landing .lp-chip-n {
  font-size: 1.75em;
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.landing .lp-chip-n small { font-size: .6em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.landing .lp-chip-d { font-weight: 680; color: var(--lp-up); }
.landing .lp-chip-d em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.landing .lp-spark { display: block; height: clamp(20px, 5cqw, 32px); color: var(--accent); }
.landing .lp-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* A progress bar (the hero's master-set read-out, and the tile's). */
.landing .lp-bar {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 11%, transparent);
  overflow: hidden;
}
.landing .lp-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lp-grad);
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
}
:root[data-motion="full"] .landing .lp-hero .lp-bar i { animation: lp-fill 1.4s var(--lp-ease) 1.5s backwards; }
@keyframes lp-fill { from { transform: scaleX(0); } }

/* As the hero scrolls away, the scene sinks back and dims (where the browser
   can tie an animation to scrolling; elsewhere it simply scrolls). */
@supports (animation-timeline: view()) {
  :root[data-motion="full"] .landing .lp-art-move {
    animation: lp-art-out linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  @keyframes lp-art-out { to { transform: translate3d(0, -8%, 0) scale(.94); opacity: .25; } }
}

/* ------------------------------------------------------------ the binder */

.landing .lp-cover {
  position: relative;
  display: flex;
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    linear-gradient(155deg, #1d2334, #0b0e17);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 4cqw 8cqw -3cqw rgba(0, 0, 0, .6);
}
/* Stitching round the edge. */
.landing .lp-cover::before {
  content: "";
  position: absolute;
  inset: .8cqw;
  border: .22cqw dashed rgba(255, 255, 255, .14);
  border-radius: 1.8cqw;
  pointer-events: none;
}
.landing .lp-pg {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: .9cqw;
  padding: 1.2cqw;
  border-radius: 1.1cqw;
  background: var(--lp-page);
  box-shadow: inset 0 0 0 1px var(--lp-page-line);
}
.landing .lp-pk {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: .6cqw;
  background: var(--lp-slot);
  box-shadow: inset 0 0 0 1px var(--lp-page-line);
}
.landing .lp-pk.is-miss {
  display: grid;
  place-items: center;
  background: none;
  box-shadow: none;
  border: max(1px, .18cqw) dashed color-mix(in srgb, var(--ink) 24%, transparent);
}
.landing .lp-pk.is-miss b { font-size: 1.5cqw; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.landing .lp-spine {
  flex: 0 0 var(--spine, 4.4cqw);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.landing .lp-spine i {
  display: block;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8fafc, #94a3b8 45%, #334155);
  box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .5);
}
/* A card in a pocket: its colour, a window of art, a line of text. */
.landing .lp-mc {
  position: absolute;
  inset: 6%;
  border-radius: 7% / 5%;
  background: var(--g);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.landing .lp-mc::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: 12%;
  height: 44%;
  border-radius: 6%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 60%), rgba(0, 0, 0, .2);
}
.landing .lp-mc::after {
  content: "";
  position: absolute;
  left: 10%;
  width: 56%;
  bottom: 14%;
  height: 7%;
  border-radius: 99px;
  background: rgba(255, 255, 255, .42);
}
.landing .lp-thumb { position: relative; display: block; flex: none; width: 18px; aspect-ratio: 5 / 7; }
.landing .lp-thumb .lp-mc { inset: 0; border-radius: 3px; }

/* ------------------------------------------------------------- the cards
   Sized from --cw (the card's width), so the same card works at any size. */

.landing .lp-card {
  --frame: linear-gradient(150deg, #f8fafc, #94a3b8 38%, #e2e8f0 56%, #64748b);
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  padding: calc(var(--cw) * .04);
  border-radius: calc(var(--cw) * .055);
  background: var(--frame);
  box-shadow: 0 calc(var(--cw) * .1) calc(var(--cw) * .2) calc(var(--cw) * -.06) rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .25);
  overflow: hidden;
  isolation: isolate;
  font-size: calc(var(--cw) * .064);
  line-height: 1.2;
  color: #fff;
  text-align: left;
}
.landing .lp-card.r-holo { --frame: linear-gradient(150deg, #e0f2fe, #38bdf8 34%, #c4b5fd 60%, #475569); }
.landing .lp-card.r-ultra { --frame: linear-gradient(150deg, #475569, #0f172a 45%, #64748b 70%, #020617); }
.landing .lp-card.r-secret { --frame: linear-gradient(150deg, #fff7d6, #d99a2b 34%, #fde68a 56%, #8a5a12); }

.landing .lp-card-in {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--cw) * .028);
  padding: calc(var(--cw) * .04);
  border-radius: calc(var(--cw) * .03);
  background: linear-gradient(165deg, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.landing .lp-card-top { display: flex; align-items: center; justify-content: space-between; gap: .4em; font-weight: 720; letter-spacing: -.01em; }
.landing .lp-card-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.landing .lp-card-pow {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 .3em;
  border-radius: 99px;
  font-size: .8em;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.landing .lp-card-art {
  position: relative;
  flex: none;
  aspect-ratio: 100 / 72;
  border-radius: calc(var(--cw) * .02);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 1px 0 rgba(0, 0, 0, .25);
}
.landing .lp-card-art svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.landing .a-aurora { background: linear-gradient(180deg, #0b1437 0%, #312e81 55%, #db2777 100%); }
.landing .a-tide { background: linear-gradient(180deg, #082f49, #0e7490 58%, #67e8f9); }
.landing .a-ember { background: linear-gradient(180deg, #1c0a0a, #9a3412 55%, #fbbf24); }
.landing .a-crystal { background: radial-gradient(circle at 50% 62%, #8b5cf6, #1e1b4b 72%); }
.landing .a-verdant { background: linear-gradient(180deg, #14532d, #16a34a 60%, #d9f99d); }
.landing .lp-card-kind {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  padding: .2em .5em;
  border-radius: .35em;
  font-size: .68em;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, .9);
  background: rgba(0, 0, 0, .25);
}
.landing .lp-card-lines { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .38em; }
.landing .lp-card-lines i { display: block; height: .3em; border-radius: 99px; background: rgba(255, 255, 255, .22); }
.landing .lp-card-lines i:nth-child(2) { width: 88%; }
.landing .lp-card-lines i:nth-child(3) { width: 60%; }
.landing .lp-card-foot {
  display: flex;
  align-items: center;
  gap: .45em;
  font-size: .6em;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums;
}
.landing .lp-card-set { display: grid; flex: none; width: 1.3em; height: 1.3em; }
.landing .lp-card-set svg { width: 100%; height: 100%; }

/* The rarity mark: a circle, a diamond, then stars in silver, holo, rainbow, gold. */
.landing .lp-gem {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-left: auto;
  border-radius: 50%;
  background: #e2e8f0;
}
.landing .r-uncommon .lp-gem { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #cbd5e1; }
.landing :is(.r-rare, .r-holo, .r-ultra, .r-secret) .lp-gem {
  border-radius: 0;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.landing .r-holo .lp-gem { background: linear-gradient(135deg, #7dd3fc, #a78bfa); }
.landing .r-ultra .lp-gem { background: var(--foil); }
.landing .r-secret .lp-gem { background: linear-gradient(135deg, #fde68a, #f59e0b); }

/* The price badge, as the app puts on a card in a pocket. */
.landing .lp-price {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 13%;
  padding: .3em .6em;
  border-radius: 99px;
  font-size: .8em;
  font-weight: 760;
  letter-spacing: -.01em;
  color: #2b1d00;
  background: linear-gradient(180deg, #fbe3a4, #e3b665);
  box-shadow: 0 .25em .7em rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Foil: a rainbow laid over the card in color-dodge, twice the card's size so
   it can slide as the scene leans — the light seems to move across it. */
.landing .lp-foil {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: var(--foil-a, 0);
  mix-blend-mode: color-dodge;
  background: repeating-linear-gradient(115deg,
    #ff6ec7 0%, #ffd36e 5%, #7dffb2 10%, #6ec7ff 15%, #c98bff 20%, #ff6ec7 25%);
  transform: translate3d(calc(var(--px, 0) * -12%), calc(var(--py, 0) * -9%), 0);
}
.landing .r-rare { --foil-a: .1; }
.landing .r-holo { --foil-a: .26; }
.landing .r-ultra { --foil-a: .36; }
.landing .r-secret { --foil-a: .42; }
.landing .r-secret .lp-foil::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .8;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.6px);
  background-size: 7px 9px;
}
/* …and a streak of light that sweeps across now and then. */
.landing .lp-glint {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%);
  transform: translate3d(-120%, 0, 0);
}
:root[data-motion="full"] .landing .lp-glint {
  animation: lp-glint 8s var(--lp-ease-io) infinite;
  animation-delay: calc(1.6s + var(--n, 0) * 1.4s);
}
@keyframes lp-glint {
  0% { transform: translate3d(-120%, 0, 0); }
  20%, 100% { transform: translate3d(120%, 0, 0); }
}

/* ============================================================== features */

.landing .lp-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px); }
@media (min-width: 700px) {
  .landing .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing .lp-t-binder,
  .landing .lp-t-value { grid-column: span 2; }
}
@media (min-width: 1080px) {
  .landing .lp-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .landing .lp-t-binder { grid-column: span 2; grid-row: span 2; }
  .landing .lp-t-value { grid-column: span 2; }
}
/* One column: each tile arrives on its own, so none waits for a neighbour. */
@media (max-width: 699.98px) {
  :root[data-motion="full"] .landing .lp-bento > .lp-rv { transition-delay: 0ms; }
}

.landing .lp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 94%, var(--accent) 6%), var(--bg-2));
  box-shadow: var(--glass-edge), var(--lp-lift);
  overflow: hidden;
  isolation: isolate;
}
.landing .lp-tile.is-lit { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
/* The spotlight that follows the mouse (landing.js writes --sx / --sy). */
.landing .lp-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 15%, transparent), transparent);
  opacity: 0;
  transform: translate3d(var(--sx, 50%), var(--sy, 0px), 0);
  transition: opacity .45s ease;
}
.landing .lp-tile.is-lit::before { opacity: 1; }
.landing .lp-tile > * { position: relative; z-index: 1; }

.landing .lp-vis {
  flex: 1 1 auto;
  min-height: 200px;
  display: grid;
  place-items: center;
  padding: 28px 24px 10px;
  container-type: inline-size;
}
.landing .lp-tile-copy { padding: 14px 24px 26px; }
.landing .lp-tile h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.landing .lp-tile p { margin: 0; font-size: 14.5px; line-height: 1.58; color: var(--ink-2); text-wrap: pretty; }
.landing .lp-soon {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ---- binders with real page turns: a mini binder whose right-hand leaf
   turns over and back. The leaf pivots on the middle of the spine, so it
   lands exactly on the left-hand page. */
.landing .lp-t-binder .lp-vis {
  padding: clamp(24px, 3vw, 40px) clamp(16px, 3vw, 40px) 10px;
  /* A pool of light on the desk under the binder. */
  background: radial-gradient(60% 46% at 50% 56%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 72%);
}
.landing .lp-mb-wrap { width: 100%; max-width: 600px; display: grid; gap: 14px; }
.landing .lp-mb-bar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.landing .lp-mb-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--ink-2);
}
.landing .lp-mb-btn svg { width: 14px; height: 14px; }
.landing .lp-mb-where { font-weight: 620; font-variant-numeric: tabular-nums; }
.landing .lp-mb-val {
  margin-left: auto;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: var(--gold-text);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  font-variant-numeric: tabular-nums;
}
.landing .lp-mb { --spine: 4.4cqw; width: 100%; padding: 2cqw; border-radius: 2.6cqw; }
.landing .lp-mb-r {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  perspective: 150cqw;
  perspective-origin: 0% 50%;
}
.landing .lp-mb-r > .lp-pg { flex: 1 1 0; }
.landing .lp-leaf {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: calc(var(--spine) / -2) 50%;
}
.landing .lp-leaf > .lp-pg {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.landing .lp-leaf > .is-back { transform: rotateY(180deg); }
/* The leaf darkens as it stands up off the page. */
.landing .lp-leaf > .lp-pg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 75%);
  opacity: 0;
}
.landing .lp-leaf > .is-back::after { background: linear-gradient(270deg, rgba(0, 0, 0, .45), transparent 75%); }
:root[data-motion="full"] .landing .lp-leaf { animation: lp-turn 3.6s var(--lp-ease-io) infinite alternate; }
:root[data-motion="full"] .landing .lp-leaf > .lp-pg::after { animation: lp-turn-shade 3.6s var(--lp-ease-io) infinite alternate; }
@keyframes lp-turn {
  0%, 22% { transform: rotateY(0deg); }
  78%, 100% { transform: rotateY(-180deg); }
}
@keyframes lp-turn-shade {
  0%, 22% { opacity: 0; }
  50% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

/* ---- live market values: the total, a chart that draws itself in, movers. */
.landing .lp-val { width: 100%; display: grid; gap: 16px; }
.landing .lp-val-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.landing .lp-val-k { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 620; color: var(--ink-3); }
.landing .lp-val-n {
  display: block;
  font-size: clamp(28px, 6cqw, 40px);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.landing .lp-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-up);
  background: color-mix(in srgb, var(--lp-up) 13%, transparent);
}
.landing .lp-delta em { font-style: normal; font-weight: 550; color: var(--ink-3); }
.landing .lp-chart-box { position: relative; height: clamp(96px, 24cqw, 150px); }
.landing .lp-wipe,
.landing .lp-wipe-in { position: absolute; inset: 0; }
.landing .lp-wipe { overflow: hidden; }
.landing .lp-chart { display: block; width: 100%; height: 100%; }
.landing .lp-chart .s0 { stop-color: var(--accent); stop-opacity: .34; }
.landing .lp-chart .s1 { stop-color: var(--accent); stop-opacity: 0; }
.landing .lp-chart .gr { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.landing .lp-chart .ln {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Today's price, at the end of the line (26 of 110 down the chart). */
.landing .lp-chart-dot {
  position: absolute;
  right: 0;
  top: 23.6%;
  width: 10px;
  height: 10px;
  margin: -5px -5px 0 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.landing .lp-chart-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
}
:root[data-motion="full"] .landing .lp-chart-dot::after { animation: lp-ping 2.4s var(--lp-ease) 2s infinite; }
/* The wipe: the window slides in from the left while the chart inside slides
   the other way, so the line appears to draw itself — transforms only. */
.landing .lp-t-value .lp-wipe,
.landing .lp-t-value .lp-wipe-in { transition: transform 1.6s var(--lp-ease) .25s; }
.landing .lp-t-value .lp-chart-dot { transition: opacity .4s ease 1.3s, transform .7s var(--ease-spring) 1.3s; }
:root[data-motion="full"] .landing .lp-t-value:not(.is-in) .lp-wipe { transform: translate3d(-100%, 0, 0); }
:root[data-motion="full"] .landing .lp-t-value:not(.is-in) .lp-wipe-in { transform: translate3d(100%, 0, 0); }
:root[data-motion="full"] .landing .lp-t-value:not(.is-in) .lp-chart-dot { opacity: 0; transform: scale(.3); }

.landing .lp-movers { display: flex; flex-wrap: wrap; gap: 8px; }
.landing .lp-mover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px 6px 7px;
  border-radius: 11px;
  font-size: 12.5px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
}
.landing .lp-mover b { font-weight: 620; color: var(--ink); }
.landing .lp-mover-p { font-weight: 680; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.landing .lp-mover em { font-style: normal; font-weight: 680; color: var(--lp-up); font-variant-numeric: tabular-nums; }
.landing .lp-mover em.is-down { color: var(--lp-down); }
@container (max-width: 440px) { .landing .lp-mover:nth-child(3) { display: none; } }

/* ---- master-set completion: pockets fill in, the bar grows. */
.landing .lp-ms { width: 100%; max-width: 360px; display: grid; gap: 12px; }
.landing .lp-ms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-3); }
.landing .lp-ms-set { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--ink); }
.landing .lp-ms-sym { display: grid; width: 14px; height: 14px; color: var(--accent-text); }
.landing .lp-ms-sym svg { width: 100%; height: 100%; }
.landing .lp-ms-n b { font-size: 20px; font-weight: 760; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.landing .lp-ms-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.landing .lp-ms-grid .lp-pk { border-radius: 4px; }
.landing .lp-ms-grid .lp-mc { inset: 0; border-radius: 3px; transition: opacity .45s ease, transform .6s var(--ease-spring); transition-delay: calc(.2s + var(--k, 0) * 45ms); }
.landing .lp-ms-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 12.5px; color: var(--ink-3); }
.landing .lp-ms-foot b { font-weight: 700; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.landing .lp-t-set .lp-bar i { transition: transform 1.4s var(--lp-ease) .5s; }
:root[data-motion="full"] .landing .lp-t-set:not(.is-in) .lp-ms-grid .lp-mc { opacity: 0; transform: scale(.55); }
:root[data-motion="full"] .landing .lp-t-set:not(.is-in) .lp-bar i { transform: scaleX(0); }

/* ---- price it your way: a card's market price, the binder's adjustment, what it counts as. */
.landing .lp-pt { width: 100%; max-width: 330px; display: grid; gap: 12px; }
.landing .lp-pt-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 10px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
}
.landing .lp-pt-card .lp-thumb { width: 30px; }
.landing .lp-pt-who { display: grid; min-width: 0; }
.landing .lp-pt-name { overflow: hidden; font-size: 13.5px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.landing .lp-pt-sub { font-size: 12px; color: var(--ink-3); }
.landing .lp-pt-sub b { font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.landing .lp-pt-mine {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  margin-left: auto;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ink-2);
  border: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent);
}
.landing .lp-pt-ico { display: grid; width: 12px; height: 12px; }
@container (max-width: 300px) {
  .landing .lp-pt-mine { padding: 6px; }
  .landing .lp-pt-mine-t { display: none; }
}
.landing .lp-pt-ico svg { width: 100%; height: 100%; }
.landing .lp-pt-steps {
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line);
}
.landing .lp-pt-steps span {
  position: relative;
  isolation: isolate;
  flex: 1;
  padding: 6px 0;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.landing .lp-pt-steps span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent-fill);
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .35s ease .7s, transform .5s var(--ease-spring) .7s;
}
.landing .lp-pt-steps .is-on { color: var(--accent-ink); transition: color 0s linear .75s; }
.landing .lp-pt-steps .is-on::before { opacity: 1; transform: none; }
:root[data-motion="full"] .landing .lp-t-price:not(.is-in) .lp-pt-steps .is-on { color: var(--ink-3); }
:root[data-motion="full"] .landing .lp-t-price:not(.is-in) .lp-pt-steps .is-on::before { opacity: 0; transform: scale(.8); }
.landing .lp-pt-out {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
.landing .lp-pt-out span { font-size: 12.5px; font-weight: 620; color: var(--ink-2); }
.landing .lp-pt-out b { font-size: 22px; font-weight: 760; letter-spacing: -.02em; color: var(--gold-text); font-variant-numeric: tabular-nums; }

/* ---- share links */
.landing .lp-share { width: 100%; max-width: 340px; display: grid; gap: 12px; justify-items: start; }
.landing .lp-url {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
}
.landing .lp-url-ico { display: grid; flex: none; width: 16px; height: 16px; color: var(--accent-text); }
.landing .lp-url-ico svg { width: 100%; height: 100%; }
.landing .lp-url-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.landing .lp-url-t b { font-weight: 650; color: var(--ink); }
.landing .lp-url-btn {
  flex: none;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-fill);
}
.landing .lp-copied {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 680;
  color: var(--lp-up);
  background: color-mix(in srgb, var(--lp-up) 14%, transparent);
  transition: opacity .4s ease .9s, transform .6s var(--ease-spring) .9s;
}
.landing .lp-copied-ico { display: grid; width: 15px; height: 15px; }
.landing .lp-copied-ico svg { width: 100%; height: 100%; }
:root[data-motion="full"] .landing .lp-t-share:not(.is-in) .lp-copied { opacity: 0; transform: translate3d(0, 8px, 0) scale(.9); }
.landing .lp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.landing .lp-tags span {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--ink-2);
  border: 1px solid var(--line);
}

/* ---- print & export: three sheets that fan out. */
.landing .lp-exp { position: relative; width: min(100%, 260px); height: 160px; }
.landing .lp-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  width: 92px;
  height: 122px;
  margin: -61px 0 0 -46px;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge), 0 16px 30px -16px rgba(0, 0, 0, .6);
  transition: transform .9s var(--lp-ease);
  transition-delay: calc(.2s + var(--k, 0) * 90ms);
}
:root[data-theme="light"] .landing .lp-sheet { box-shadow: var(--glass-edge), 0 14px 28px -16px rgba(20, 24, 32, .35); }
.landing .lp-sheet.s-print { transform: translate3d(-64%, 4%, 0) rotate(-11deg); }
.landing .lp-sheet.s-csv { transform: translate3d(64%, 4%, 0) rotate(11deg); }
.landing .lp-sheet.s-png { transform: translate3d(0, -4%, 0); }
:root[data-motion="full"] .landing .lp-t-export:not(.is-in) .lp-sheet { transform: none; }
:root[data-motion="full"] .landing .lp-t-export.is-in:hover .lp-sheet { transition-delay: 0s; }
:root[data-motion="full"] .landing .lp-t-export.is-in:hover .s-print { transform: translate3d(-80%, 2%, 0) rotate(-15deg); }
:root[data-motion="full"] .landing .lp-t-export.is-in:hover .s-csv { transform: translate3d(80%, 2%, 0) rotate(15deg); }
:root[data-motion="full"] .landing .lp-t-export.is-in:hover .s-png { transform: translate3d(0, -9%, 0); }
.landing .lp-sheet-tag { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--accent-text); }
.landing .s-csv .lp-sheet-tag { justify-self: end; }
.landing .lp-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-content: start; }
.landing .lp-sheet-grid i { display: block; aspect-ratio: 5 / 7; border-radius: 2px; background: var(--g); }
.landing .lp-sheet-rows { display: grid; gap: 7px; align-content: start; }
.landing .lp-sheet-rows i { display: grid; grid-template-columns: 1.6fr 1fr .8fr; gap: 4px; }
.landing .lp-sheet-rows b { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.landing .lp-sheet-rows b:last-child { background: color-mix(in srgb, var(--gold) 60%, transparent); }
.landing .lp-sheet-img { display: grid; place-items: center; border-radius: 6px; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.landing .lp-sheet-img svg { width: 34px; height: 34px; }

/* ---- on your phone: a page that swipes to the next and back. */
.landing .lp-phone {
  width: clamp(118px, 46cqw, 164px);
  aspect-ratio: 9 / 18.6;
  padding: 6px;
  border-radius: 26px;
  background: linear-gradient(160deg, #2c3344, #0b0d13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 50px -26px rgba(0, 0, 0, .7);
  transform: perspective(900px) rotateY(-14deg) rotateX(5deg) rotate(-3deg);
}
.landing .lp-phone-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--bg);
}
.landing .lp-phone-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 34%;
  height: 12px;
  margin-left: -17%;
  border-radius: 99px;
  background: #0b0d13;
}
.landing .lp-phone-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 26px 10px 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
}
.landing .lp-phone-val {
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 9px;
  color: var(--gold-text);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  font-variant-numeric: tabular-nums;
}
.landing .lp-phone-view { flex: 1; min-height: 0; padding: 0 4px; overflow: hidden; }
.landing .lp-phone-strip { display: flex; width: 200%; }
.landing .lp-phone-strip > div { flex: 0 0 50%; padding: 0 4px; }
.landing .lp-phone .lp-pg { gap: 3px; padding: 4px; border-radius: 6px; }
.landing .lp-phone .lp-pk { border-radius: 3px; }
.landing .lp-phone .lp-pk.is-miss b { display: none; }
:root[data-motion="full"] .landing .lp-phone-strip { animation: lp-swipe 7s var(--lp-ease-io) infinite; }
@keyframes lp-swipe {
  0%, 38% { transform: translate3d(0, 0, 0); }
  48%, 86% { transform: translate3d(-50%, 0, 0); }
  96%, 100% { transform: translate3d(0, 0, 0); }
}
.landing .lp-phone-dock { display: flex; justify-content: center; gap: 5px; padding: 8px 0 12px; }
.landing .lp-phone-dock i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 25%, transparent); }
.landing .lp-phone-dock i.is-on { background: var(--accent); }

/* ---- beyond cards: every kind a shelf holds now, each in a little lit
   cabinet of its own — an LED strip along the top, a glass shelf, the thing
   standing in the light (it was a dashed outline while they were to come). */
.landing .lp-beyond { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 12px 26px; }
.landing .lp-orb-wrap { display: grid; justify-items: center; gap: 8px; }
.landing .lp-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(75% 62% at 50% 0%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 7%, var(--bg-2)), var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 22px -12px color-mix(in srgb, var(--gold) 55%, transparent);
}
.landing .lp-orb::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--gold) 70%, transparent);
}
.landing .lp-orb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: linear-gradient(180deg, rgba(236, 255, 248, .7), rgba(120, 190, 170, .5));
}
.landing .lp-orb svg { position: relative; top: 1px; width: 30px; height: 30px; }
.landing .lp-orb-l { font-size: 12px; font-weight: 650; color: var(--ink-2); }
:root[data-motion="full"] .landing .lp-orb {
  animation: lp-hover 5s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * -1.6s);
}
@keyframes lp-hover {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

/* ========================================================== how it works */

.landing .lp-how::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 10%;
  width: 60%;
  height: 80%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent);
}
.landing .lp-steps {
  position: relative;
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The thread joining the steps: it runs out as they arrive. */
.landing .lp-steps::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 32px;
  bottom: 32px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2), transparent);
  transform-origin: top center;
  transition: transform 1.6s var(--lp-ease) .2s;
}
:root[data-motion="full"] .landing .lp-steps:not(.is-in)::before { transform: scaleY(0); }
.landing .lp-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 6px;
  align-content: start;
}
.landing .lp-step-ico { grid-row: span 3; }
@media (min-width: 860px) {
  .landing .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
  .landing .lp-steps::before {
    left: 32px;
    right: 0;
    top: 31px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2) 70%, transparent);
    transform-origin: left center;
  }
  :root[data-motion="full"] .landing .lp-steps:not(.is-in)::before { transform: scaleX(0); }
  .landing .lp-step { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .landing .lp-step-ico { grid-row: auto; margin-bottom: 8px; }
}
.landing .lp-step-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: var(--accent-text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge), 0 14px 30px -18px color-mix(in srgb, var(--accent) 70%, transparent);
}
.landing .lp-step-ico svg { width: 28px; height: 28px; }
.landing .lp-step-n { font-size: 12.5px; font-weight: 750; letter-spacing: .14em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.landing .lp-step h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.landing .lp-step p { max-width: 34em; margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* =============================================================== numbers */

.landing .lp-band {
  padding-block: clamp(56px, 7vw, 96px);
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 5%, transparent) 50%, transparent);
}
.landing .lp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) { .landing .lp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.landing .lp-stat { display: grid; justify-items: center; gap: 8px; text-align: center; }
.landing .lp-stat-n {
  font-size: clamp(40px, 3.6vw + 22px, 72px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  background: var(--lp-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: .04em;
}
.landing .lp-stat-l { max-width: 16em; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* The games rail: one list twice over, slid by exactly one list's width. */
.landing .lp-mq { margin-top: clamp(48px, 6vw, 72px); }
.landing .lp-mq-label {
  margin: 0 0 18px;
  padding-inline: var(--lp-gut);
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.landing .lp-mq-view {
  overflow: hidden;
  /* The rail is far wider than the screen; it must not widen anything around it. */
  contain: inline-size;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.landing .lp-mq-track { display: flex; width: max-content; }
.landing .lp-mq-list { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.landing .lp-mq-list li {
  position: relative;
  padding: 4px clamp(20px, 2.2vw, 34px);
  font-size: clamp(18px, 1.1vw + 12px, 26px);
  font-weight: 680;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--ink-2);
}
.landing .lp-mq-list li::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--lp-grad);
}
:root[data-motion="full"] .landing .lp-mq-track { animation: lp-rail 50s linear infinite; }
:root[data-motion="full"] .landing .lp-mq-view:hover .lp-mq-track { animation-play-state: paused; }
@keyframes lp-rail { to { transform: translate3d(-50%, 0, 0); } }
/* Standing still, the rail is just the list, wrapped and centred. */
:root:not([data-motion="full"]) .landing .lp-mq-track { display: block; width: auto; }
:root:not([data-motion="full"]) .landing .lp-mq-list { flex-wrap: wrap; justify-content: center; row-gap: 8px; padding-inline: var(--lp-gut); }
:root:not([data-motion="full"]) .landing .lp-mq-list[aria-hidden] { display: none; }
:root:not([data-motion="full"]) .landing .lp-mq-view { -webkit-mask-image: none; mask-image: none; }

/* ================================================================ finale */

.landing .lp-final { padding-block: clamp(76px, 10vw, 140px) clamp(56px, 7vw, 96px); }
/* A border of light that runs round the panel: a turning cone of colour
   behind it, covered by the panel all but its 1px edge. */
.landing .lp-final-card {
  position: relative;
  padding: 1px;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background: var(--line);
  box-shadow: var(--lp-lift);
}
.landing .lp-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170%;
  aspect-ratio: 1;
  margin: -85% 0 0 -85%;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--accent) 76%, var(--accent-2) 86%, transparent 96%);
}
:root[data-motion="full"] .landing .lp-beam { animation: lp-spin 9s linear infinite; }
.landing .lp-final-in {
  position: relative;
  padding: clamp(40px, 6vw, 84px) clamp(20px, 5vw, 64px);
  border-radius: 31px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%),
    var(--bg-2);
}
.landing .lp-final .lp-h2 { max-width: 15em; margin-inline: auto; }
.landing .lp-final-p {
  max-width: 34em;
  margin: 18px auto 30px;
  font-size: clamp(15.5px, .3vw + 14.5px, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: balance;
}
.landing .lp-final-fan {
  --cw: clamp(76px, 9vw, 112px);
  position: relative;
  width: calc(var(--cw) * 2.8);
  height: calc(var(--cw) * 1.55);
  margin: 0 auto clamp(24px, 3vw, 36px);
}
.landing .lp-final-fan .lp-card {
  position: absolute;
  left: 50%;
  top: 4%;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  transition: transform .8s var(--lp-ease);
}
.landing .lp-final-fan .lp-card:nth-child(1) { transform: translate3d(-62%, 8%, 0) rotate(-12deg); }
.landing .lp-final-fan .lp-card:nth-child(2) { z-index: 1; transform: translate3d(0, -3%, 0); }
.landing .lp-final-fan .lp-card:nth-child(3) { transform: translate3d(62%, 8%, 0) rotate(12deg); }
:root[data-motion="full"] .landing .lp-final-card:hover .lp-card:nth-child(1) { transform: translate3d(-84%, 6%, 0) rotate(-17deg); }
:root[data-motion="full"] .landing .lp-final-card:hover .lp-card:nth-child(2) { transform: translate3d(0, -9%, 0) scale(1.04); }
:root[data-motion="full"] .landing .lp-final-card:hover .lp-card:nth-child(3) { transform: translate3d(84%, 6%, 0) rotate(17deg); }

/* ================================================================ footer */

.landing .lp-foot { position: relative; z-index: 1; padding-block: 32px 44px; border-top: 1px solid var(--line); }
.landing .lp-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  font-size: 13px;
  color: var(--ink-3);
}
.landing .lp-foot-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.landing .lp-foot-brand .lp-brand-mark { width: 26px; height: 26px; }
.landing .lp-foot p { margin: 0; }
.landing .lp-foot-note { flex: 1 1 320px; }
@media (min-width: 900px) { .landing .lp-foot-note { text-align: center; } }

/* ============================================================ small screens */

@media (max-width: 480px) {
  .landing { --lp-head-h: 58px; }
  .landing .lp-brand { font-size: 16px; gap: 8px; }
  .landing .lp-brand-mark { width: 28px; height: 28px; }
  .landing .lp-eyebrow { font-size: 12.5px; margin-bottom: 20px; }
  .landing .lp-vis { padding: 24px 16px 8px; }
  .landing .lp-tile-copy { padding: 12px 18px 22px; }
  .landing .lp-tile { border-radius: 18px; }
  .landing .lp-final-card { border-radius: 24px; }
  .landing .lp-final-in { border-radius: 23px; }
  .landing .lp-foot-in { flex-direction: column; align-items: flex-start; }
  .landing .lp-foot-note { flex: none; }
}

/* ------------------------------------------------------------ real cards
   The landing page deals real cards when the catalog has some
   (landing-deck.js): their scans fill a card on its own, and the little
   cards in pockets and thumbnails show the art over their colour. */
.landing .lp-card.is-real { padding: 0; background: #0b0d12; }
.landing .lp-card.is-real .lp-card-img {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.landing .lp-card.is-real .lp-foil { opacity: calc(var(--foil-a, 0) * .55); }
.landing .lp-mc.has-art,
.landing .lp-sheet-grid > i.has-art { background: var(--art) center / cover no-repeat, var(--g, #1f2633); }
.landing .lp-mc.has-art::before,
.landing .lp-mc.has-art::after { display: none; }
/* Until this visit's cards are dealt, the page's own background holds the place. */
.landing.lp-dealing { min-height: 100vh; }