/* ════════════════════════════════════════════════════════════════════════
   Landing page, /landing, and its features page, /landing/features
   (lib/landing-web.js)
   Design: "Landing Page v2.dc.html", "CardDrawPlayer.dc.html" and
   "Features.dc.html" (project League of Legends VOD Reviews, design system
   lol-deepreview c7d9a32e, handoff of 2026-10-07). The mocks are all inline
   styles; this is the same values as classes. Departures are listed at the
   top of landing-web.js. The corner brackets are the design's and stay: the
   no-reticle rule is for the app, and the owner cleared them for the site
   (2026-09-29).
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

/* The design system's tokens (same values as web/vods.css and lib/web.js). */
:root {
  --indigo-400: #8080ea; --indigo-500: #5e5ee2; --indigo-600: #4444d4;
  --slate-950: #0c0d13; --slate-900: #14151e; --slate-850: #1b1d29;
  --slate-border: #292c3c; --slate-border-strong: #363a4e; --slate-hover: #252839;
  --slate-400: #8b8fa6; --slate-100: #e7e9f2;
  --green: #4dd17a; --gold: #f0c244; --red: #ff5d5d;
  /* (the hero demo's layers use these) */
  --slate-300: #aab0c4; --green-dim: #163a25; --red-dim: #3a1f24;
  --note-purple: #b173ff; --note-orange: #ff8a4c; --note-red: #ff5d5d;

  --bg: var(--slate-950); --surface: var(--slate-900); --surface-raised: var(--slate-850);
  --surface-hover: var(--slate-hover);
  --border: var(--slate-border); --border-strong: var(--slate-border-strong);
  --text: var(--slate-100); --text-muted: var(--slate-400); --text-faint: #5c6075;
  --brand: var(--indigo-600); --brand-hover: var(--indigo-500); --accent: var(--indigo-400);
  --accent-border: rgba(96, 96, 226, 0.45);
  --accent-soft: rgba(68, 68, 212, 0.14);
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
  --tele-line: rgba(128, 128, 234, 0.22);
  --tele-grid: rgba(128, 128, 234, 0.045);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--indigo-500);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tcolors: background-color .1s var(--ease), border-color .1s var(--ease), color .1s var(--ease);

  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--ring); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* No text-transform and no " ›" after it (UI copy guide): these labels are
   written lowercase in the source so proper names and acronyms keep their
   capitals. */
.u-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-faint); }
.sp { flex: 1; }
.nw { white-space: nowrap; }

.lp { min-height: 100dvh; display: flex; flex-direction: column; }
.lp > main { flex: 1; width: 100%; }

/* ── buttons, header ─────────────────────────────────────────────────── */
/* The button family (.lp-btn) and the site header (.lp-hdr, the log-in
   menu, their phone rules) are the public site's, shared with the VOD
   library: PUBLIC_HEADER_CSS in lib/chrome.js, which the pages inline ahead
   of this sheet. */
.ft > .lp-hdr { margin: 0; }

/* ── hero ────────────────────────────────────────────────────────────── */
.lp-hero {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
  /* (width: the page is a flex column, and auto margins there would shrink
     this to its content, which wraps the two halves) */
  width: 100%; max-width: 1440px; margin: 0 auto; padding: 64px 56px 60px;
  /* (the demo's cards wait a little to the right of where they show, unseen;
     on a narrow page that reached past the window's edge and made it scroll
     sideways) */
  overflow-x: clip;
}
.lp-hero-l { flex: 1 1 380px; min-width: 0; }
.lp-hero-r { flex: 1.65 1 560px; min-width: 0; }
.lp-hero h1 { margin: 0 0 18px; font: 800 54px/1.08 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.lp-hero h1 span { color: var(--accent); }
.lp-hero-l > p { margin: 0 0 26px; max-width: 54ch; font: 400 17px/1.6 var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
.lp-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-free { padding: 3px 7px; font: 700 11px var(--font-mono); letter-spacing: 0.04em; color: var(--bg); background: var(--accent); }
.lp-free.-h { display: inline-block; vertical-align: 3px; margin-left: 6px; padding: 4px 7px; line-height: 1; }
.lp-explore { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font: 500 13px var(--font-sans); color: var(--text-muted); }
.lp-explore:hover { color: var(--accent); }
.lp-explore span { color: var(--accent); }
/* The hero demo ("HeroDemo.dc.html"): the review screen in a leaning window,
   with each feature's scene played over it (hero-demo.js). It arrives as the
   screenshot alone. Live, the whole demo is laid out at the design's 777 px
   and scaled to the column (--hd-k), since the cards over the window are a
   fixed size: .hd-fit leaves the flow and the script gives .hd its height.
   The right padding and the clip margin are the cards' room past the
   window's edge. */
.hd { position: relative; min-width: 0; color: var(--text); font-family: var(--font-sans); }
.hd.is-live > .hd-fit { position: absolute; left: 0; top: 0; width: 777px; transform-origin: 0 0; transform: scale(var(--hd-k, 1)); }
.hd-persp { perspective: 1400px; padding-right: 4.376%; overflow: clip; overflow-clip-margin: 40px; }
.hd-tilt { position: relative; transform: rotateY(-7deg); }
.hd-win { position: relative; overflow: hidden; container-type: inline-size; background: var(--surface); border: 1px solid var(--border); }
.hd-win > img:first-child { display: block; width: 100%; height: auto; aspect-ratio: 1548 / 979; }
/* Live, it can be held with the mouse and turned all the way round
   (hero-demo.js puts the window in .hd-turn with a back to it). .hd-turn then
   carries the turn and the window is its front face: each face is unseen from
   behind. Turned (held, or on its way back to the front once let go), the
   window swings out of the box that trims the cards at rest. */
.hd.is-live { cursor: grab; user-select: none; -webkit-user-select: none; }
.hd.is-live.is-grabbed { cursor: grabbing; }
.hd-turn { position: relative; transform: rotateY(-7deg); transform-style: preserve-3d; }
.hd-turn > .hd-tilt { transform: rotateY(0deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hd.is-turned .hd-persp { overflow: visible; }
/* The window's back: the feature cards' back (their ground, their grid, a
   bracket in each corner, the mark, a title and a line), with the owner's
   words. Only a visitor who turns the window over and holds it there sees
   it. */
.hd-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 0 64px; border: 1px solid var(--border);
  background:
    linear-gradient(rgba(128, 128, 234, 0.07) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(128, 128, 234, 0.07) 1px, transparent 1px) 0 0 / 36px 36px,
    var(--bg);
}
.hd-back > i { position: absolute; width: 34px; height: 34px; border: 0 solid var(--border-strong); }
.hd-back > .-tl { top: 22px; left: 22px; border-top-width: 2px; border-left-width: 2px; }
.hd-back > .-tr { top: 22px; right: 22px; border-top-width: 2px; border-right-width: 2px; }
.hd-back > .-bl { bottom: 22px; left: 22px; border-bottom-width: 2px; border-left-width: 2px; }
.hd-back > .-br { bottom: 22px; right: 22px; border-bottom-width: 2px; border-right-width: 2px; }
.hd-back-mark { width: 92px; height: 92px; margin-bottom: 26px; }
.hd-back-mark rect { fill: none; stroke: var(--accent); stroke-width: 3; }
.hd-back-mark text { font: 800 15px var(--font-sans); letter-spacing: 0.3px; fill: var(--accent); }
.hd-back-title { font: 600 26px/1.2 var(--font-mono); letter-spacing: 0.08em; color: var(--text); }
.hd-back-line { margin: 12px 0 0; font: 500 14px/1.5 var(--font-mono); color: var(--text-muted); text-wrap: balance; }
.hd-back-line b { font-weight: 700; color: var(--accent); }
/* (under the cards and the cursor, as the design stacks them) */
.hd-tilt > .lp-corner { z-index: auto; }

/* the design's accent corners: top left + bottom right, 16px, 2px */
.lp-corner { position: absolute; z-index: 1; width: 16px; height: 16px; border: 0 solid var(--accent); pointer-events: none; }
.lp-corner.-tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.lp-corner.-br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.lp-price-card > .lp-corner { z-index: 2; }

/* ── body ────────────────────────────────────────────────────────────── */
.lp-body { display: block; max-width: 1440px; margin: 0 auto; padding: 0 56px; }

.lp-strip {
  display: flex; align-items: center; gap: 20px; margin: 0 0 8px; padding: 11px 20px;
  background: var(--surface); border: 1px solid var(--border);
}
.lp-strip img { display: block; width: 22px; height: 22px; }
.lp-strip .mono { font-size: 12px; color: var(--text-muted); }
.lp-dot { color: var(--text-faint); }
.lp-strip-rec { font: 500 11px var(--font-mono); color: var(--text-faint); }

/* ── feature pull ────────────────────────────────────────────────────── */
.lp-pull {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: center;
  margin: 0 0 8px; padding: 32px 72px;
  background: var(--surface); border: 1px solid var(--border);
  scroll-margin-top: 8px;
}
.lp-pull-l { position: relative; min-width: 0; display: flex; flex-direction: column; }
.lp-pull h2 { margin: 0 0 14px; font: 800 clamp(28px, 3vw, 42px)/1.08 var(--font-sans); letter-spacing: -0.02em; }
.lp-pull-l > p { margin: 0; font: 400 14px/1.65 var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
.lp-pull-l > p.lp-pull-hint { margin-top: 16px; }
.lp-why {
  display: grid; margin: 22px 0 0; padding: 0; list-style: none;
  border: 1px solid var(--border); background: var(--surface-raised);
  font: 500 15px/1.5 var(--font-sans); color: var(--text);
}
.lp-why li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 16px; }
.lp-why li + li { border-top: 1px solid var(--border); }
.lp-why li > .mono { padding-top: 2px; font-size: 13px; font-weight: 600; color: var(--accent); }
.lp-why li > span:last-child { text-wrap: pretty; }
.lp-why strong { font-weight: 600; color: var(--accent); }

/* The panel. --fp-color is the tier colour (basic text, advanced accent,
   expert gold; border-strong while shuffling, then each level's colour as a
   roll charges up), worn by the four corners of the crop box. --fp-a fades
   the caption in with the dim. */
.fp { --fp-color: var(--text); --fp-a: 0; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.fp[data-tier="advanced"] { --fp-color: var(--accent); }
.fp[data-tier="expert"] { --fp-color: var(--gold); }
.fp[data-tier="none"] { --fp-color: var(--border-strong); }
.fp-stage {
  position: relative; overflow: hidden; aspect-ratio: 1544 / 976;
  background: repeating-linear-gradient(135deg, #07080c 0 10px, #0a0b10 10px 20px);
  border-bottom: 1px solid var(--border);
}
.fp-world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.fp-world > img, .fp-world > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.fp-blur { position: absolute; inset: 0; pointer-events: none; }
/* The slate the clip dips to while a card is drawn (or, in the features
   viewer, while the feature changes): the next clip's first frame, dimmed and
   blurred, under a faint hatch. feature-player.js and card-draw.js set its
   opacity. */
.fp-dark { position: absolute; inset: 0; overflow: hidden; background: #0a0b10; opacity: 0; pointer-events: none; }
.fp-dark img { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover; display: block; filter: blur(10px) brightness(.38) saturate(.8); }
.fp-dark img:not([src]) { visibility: hidden; }
.fp-dark i { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(231, 233, 242, .035) 0 10px, rgba(231, 233, 242, 0) 10px 20px); }
/* The veil: the slate's look (its dim, its blur, its hatch) over whatever the
   stage is showing, while the clip waits for the panel to be on screen.
   feature-player.js sets its opacity from how much of the panel shows
   (pauseVeil in feature-crop.js); the fade is for the moments it starts and
   stops waiting. Above the corners, the caption and the spills, under the
   progress bar and the cards. */
.fp-veil {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(231, 233, 242, .035) 0 10px, rgba(231, 233, 242, 0) 10px 20px);
  -webkit-backdrop-filter: blur(10px) brightness(.38) saturate(.8); backdrop-filter: blur(10px) brightness(.38) saturate(.8);
  transition: opacity .3s linear;
}
/* The pause mark: a click on the stage has the clip paused (feature-player.js
   togglePause), and another starts it again. In the middle, over the corners
   and the caption, under the veil. Shown by removing [hidden], so its
   display is scoped. */
.fp-paused:not([hidden]) {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(12, 13, 19, 0.82); border: 1px solid var(--border-strong);
  pointer-events: none;
}
.fp-paused > i { width: 8px; height: 24px; background: var(--text); }
.fp.is-pausable .fp-stage { cursor: pointer; }
.fp.is-pausable .fp-stage:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: -2px; }
.fp-status { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); font: 500 11px var(--font-mono); color: var(--text-muted); white-space: nowrap; opacity: 0; pointer-events: none; }
/* The card draw (card-draw.js): the deck, the drawn card, the slot it goes
   into along the stage's bottom edge and the tier named under it. Above
   everything on the stage, which clips it: a card sliding out of the bottom
   edge is going into the panel under it. */
.fp-cards { position: absolute; inset: 0; z-index: 4; perspective: 1600px; pointer-events: none; }
.fp-cards[hidden] { display: none; }
.fp-card { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.fp-card img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 4.8% / 3.4%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
.fp-card img.-front { transform: rotateY(180deg); }
.fp-slot { position: absolute; left: 0; top: 0; height: 2px; z-index: 58; background: var(--text-muted); }
.fp-drawn { position: absolute; left: 0; top: 0; z-index: 60; }
.fp-drawn span { position: absolute; left: 50%; top: 100%; margin-top: 8px; transform: translateX(-50%); font: 500 11px var(--font-mono); white-space: nowrap; }
/* a promo cut's spills, copied out of the clip above the corners and dim */
.fp-spill { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fp-box {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, var(--fp-dim, 0));
}
.fp-box > i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--fp-color); transition: border-color .12s var(--ease); }
.fp-box > .-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.fp-box > .-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.fp-box > .-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.fp-box > .-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
/* The caption. It lies in the box and rides it; feature-player.js places it
   (left, top) on the side of the box it will have once the box is at rest. */
.fp-label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 500 10px/14px var(--font-mono); color: var(--fp-color);
  opacity: var(--fp-a); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.fp-label.-inside { padding: 1px 6px; background: rgba(12, 13, 19, 0.82); }
.fp-label.-in { animation: fp-label-in .35s var(--ease); }
@keyframes fp-label-in { from { opacity: 0; } }
.fp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border); }
.fp-prog { height: 3px; background: var(--brand); transform-origin: 0 0; transform: scaleX(0); }
.fp-ticks > i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bg); }
.fp-info {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end;
  padding: 18px 22px 20px;
}
.fp-text { min-width: 0; }
.fp-meta { display: flex; gap: 10px; margin-bottom: 8px; }
.fp-tier { font: 600 11px var(--font-mono); color: var(--fp-color); }
.fp-name { margin-bottom: 6px; font: 700 22px/1.2 var(--font-sans); color: var(--text); }
.fp-name.-wait { color: var(--text-faint); }
.fp-tier.-wait { color: var(--text-faint); }
.fp-desc { margin: 0; font: 400 13px/1.6 var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
/* The name and description on show (fp-live) lie in one grid cell with an
   unseen copy of every feature's (fp-size, written by landing-web.js). The
   cell is as tall as the longest of them at this width, so the panel keeps
   its size from one feature to the next, and through a roll. */
.fp-copy { display: grid; }
.fp-copy > * { grid-area: 1 / 1; min-width: 0; }
.fp-size { visibility: hidden; pointer-events: none; user-select: none; }
.fp-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.fp-roll { justify-content: center; padding: 9px 16px; }
.fp-roll:disabled { cursor: default; }
.fp-all { justify-content: center; padding: 8px 16px; }

/* ── three steps ─────────────────────────────────────────────────────── */
.lp-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.lp-card { padding: 20px; background: var(--surface); border: 1px solid var(--border); transition: border-color .1s var(--ease); }
.lp-card:hover { border-color: var(--accent-border); }
.lp-card > .u-label { margin-bottom: 12px; }
.lp-card-h { margin-bottom: 8px; font: 600 16px var(--font-sans); }
.lp-card p { margin: 0; font: 400 13px/1.6 var(--font-sans); color: var(--text-muted); }

/* ── pricing ─────────────────────────────────────────────────────────── */
.lp-pricing { margin: 0 0 8px; padding: 40px 36px; scroll-margin-top: 8px; }
.lp-price-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  max-width: 1080px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--accent-border);
}
.lp-box-stage {
  position: relative; min-width: 0; min-height: 560px; overflow: hidden;
  background-color: var(--bg);
  background-image: linear-gradient(var(--tele-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tele-grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  border-right: 1px solid var(--border);
}
deepreview-box { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
/* A 3D object's still (the box here, the pack on the features page): a
   picture of its first frame, in the element until the canvas has drawn that
   frame (lib/landing-web.js still3d, which says how it is framed; handOver in
   the elements). Over the whole element, under the canvas (it comes first),
   and nothing to the pointer. */
.lp-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.lp-box-cap { position: absolute; left: 22px; right: 22px; z-index: 1; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.lp-box-cap.-top { top: 18px; }
.lp-box-cap.-bottom { bottom: 18px; }
.lp-box-cap .mono { font-size: 10px; color: var(--text-faint); }
.lp-rule { flex: 1; height: 1px; background: var(--tele-line); }
.lp-price {
  min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 36px 34px; background: var(--surface-raised);
}
.lp-price > .u-label { margin-bottom: 10px; }
.lp-price-h { margin-bottom: 22px; font: 700 26px/1.2 var(--font-sans); letter-spacing: -0.01em; text-wrap: pretty; }
.lp-hr { height: 1px; margin-bottom: 14px; background: var(--border); }
.lp-price-big { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.lp-price-big .mono { font-size: 40px; font-weight: 700; letter-spacing: -0.01em; }
.lp-price-big > span:last-child { font: 500 14px var(--font-sans); color: var(--text-muted); }
/* (the coming soon card: the words where the price goes, with the room
   under them the price's small line left; an inert box where the button
   was) */
.lp-price-soon { margin-bottom: 18px; font: 700 40px/1.1 var(--font-sans); letter-spacing: -0.02em; }
.lp-price-wait {
  display: block; padding: 12px 0; text-align: center;
  background: var(--surface); border: 1px solid var(--border-strong);
  font: 600 14px var(--font-sans); color: var(--text-muted); cursor: default;
}
.lp-price-alt { margin-bottom: 18px; font-size: 12px; color: var(--text-muted); }
.lp-price-alt .-t { color: var(--text); }
.lp-price-alt .-a { color: var(--accent); }
.lp-price-list {
  display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none;
  font: 400 13px/1.5 var(--font-sans); color: var(--text-muted);
}
.lp-price-list li::before { content: "\203A"; margin-right: 0.35em; color: var(--accent); }
.lp-price-note { margin-top: 10px; text-align: center; font: 500 10px var(--font-mono); color: var(--text-faint); }

/* ── library + FAQ ───────────────────────────────────────────────────── */
.lp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 470px; margin: 0 0 20px; }
.lp-panel {
  display: flex; flex-direction: column; min-height: 0; padding: 24px;
  background: var(--surface); border: 1px solid var(--border);
  scroll-margin-top: 8px;
}
.lp-panel-head { flex-shrink: 0; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.lp-panel-h { font: 700 20px/1.2 var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.lp-panel-sub { margin-top: 6px; font: 400 13.5px/1.5 var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
.lp-panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}
.lp-panel-foot .mono { font-size: 11px; color: var(--text-faint); }
.lp-panel-link { font: 600 12.5px var(--font-sans); color: var(--accent); white-space: nowrap; }
.lp-panel-link:hover { color: var(--text); }

/* A window's list scrolls inside it, with the design's own bar: a 6 px
   thumb in a rail beside the list (landing.js places and drags it). */
.lp-scroll { display: flex; gap: 10px; flex: 1; min-height: 0; }
.lp-scroll-view { position: relative; flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: none; overflow-anchor: none; }
.lp-scroll-view::-webkit-scrollbar { display: none; }
.lp-scroll-rail { position: relative; flex-shrink: 0; width: 6px; }
.lp-scroll-thumb { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--border); cursor: pointer; }
.lp-scroll-thumb:hover { background: var(--border-strong); }

/* The window's search and filters (library-window.js): a search box, three
   pickers, each a button that opens a menu (.lp-pick), and the reset. A form:
   without the script it submits the search to /vods. A picker is as wide with
   a pick in it as without (the champion's fits a twelve-letter name, the
   role's "All roles"; a longer name is cut with an ellipsis), so nothing in
   the bar moves when one is made; the search box takes what is left. */
.lp-lib-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; margin: 0 0 14px; color: var(--text); }
.lp-lib-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 140px; min-width: 0; height: 34px; padding: 0 10px;
  background: var(--surface-raised); border: 1px solid var(--border); transition: border-color .1s var(--ease); cursor: text;
}
.lp-lib-search:hover, .lp-lib-search:focus-within { border-color: var(--accent-border); }
.lp-acc { color: var(--accent); }
.lp-lib-search svg { flex: none; color: var(--text-faint); }
.lp-lib-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; background: none; border: 0; outline: 0; border-radius: 0;
  font: 400 13px var(--font-sans); color: var(--text); text-overflow: ellipsis;
}
.lp-lib-search input::placeholder { color: var(--text-faint); opacity: 1; }
.lp-chip {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 34px; margin: 0; padding: 0 10px 0 5px;
  font-family: var(--font-mono); font-size: 12px; white-space: nowrap; color: var(--text);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 0;
  cursor: pointer; transition: border-color .1s var(--ease);
}
.lp-chip:hover, .lp-chip.is-open, .lp-chip.is-on { border-color: var(--accent-border); }
.lp-chip.-muted { padding: 0 5px 0 10px; color: var(--text-muted); }
.lp-chip.-champ { width: 134px; }
.lp-chip.-role { width: 112px; }
.lp-chip > i { flex: none; width: 22px; height: 22px; border: 1px solid var(--border); background: var(--bg) center / cover no-repeat; }
.lp-chip.-champ > span, .lp-chip.-role > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
/* (the client's "any champion" helmet and its position icons, as the VOD
   library sizes them in its own pickers) */
.lp-chip > i.-any, .lp-pick-list button > i.-any { background-size: 78% auto; filter: grayscale(1); opacity: 0.7; }
.lp-chip > i.-role, .lp-pick-list button > i.-role { background-size: 64% auto; }
/* always there, with the app's own reset filters glyph */
.lp-lib-reset {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; margin: 0; padding: 0; line-height: 0;
  color: var(--text-muted); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 0; cursor: pointer;
  transition: var(--tcolors);
}
.lp-lib-reset:hover { color: var(--text); border-color: var(--accent-border); }
.lp-lib-reset svg { width: 15px; height: 15px; }
/* A picker's menu, on the page's body under its button: an optional search
   box, then the choices with how many VODs each has. */
.lp-pick {
  position: fixed; z-index: 40; display: flex; flex-direction: column; width: 232px; max-height: min(340px, calc(100vh - 16px));
  background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-menu);
  font-family: var(--font-sans); color: var(--text);
}
.lp-pick-search { flex: none; padding: 6px; border-bottom: 1px solid var(--border); }
.lp-pick-search input {
  display: block; width: 100%; height: 28px; padding: 0 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 0; outline: 0;
  font: 400 12.5px var(--font-sans); color: var(--text);
}
.lp-pick-search input:focus { border-color: var(--accent-border); }
.lp-pick-search input::placeholder { color: var(--text-faint); opacity: 1; }
.lp-pick-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; }
.lp-pick-list button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; margin: 0; padding: 0 8px 0 5px;
  background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left;
  font: 500 12.5px var(--font-sans); color: var(--text);
}
.lp-pick-list button:hover, .lp-pick-list button:focus-visible { background: var(--surface-hover); outline: 0; box-shadow: none; }
.lp-pick-list button.is-on { color: var(--accent); }
.lp-pick-list button > i { flex: none; width: 20px; height: 20px; border: 1px solid var(--border); background: var(--bg) center / cover no-repeat; }
.lp-pick-list button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-pick-list button > b { flex: none; font: 500 11px var(--font-mono); color: var(--text-faint); }

.lp-lib-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; padding-bottom: 1px; }
.lp-lib-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--text);
  background: var(--surface-raised); border: 1px solid var(--border); transition: border-color .1s var(--ease);
}
.lp-lib-row:hover { border-color: var(--accent-border); }
.lp-lib-row > img[width="30"], .lp-lib-blank { display: block; flex: none; width: 30px; height: 30px; border: 1px solid var(--border-strong); }
.lp-lib-blank { background: var(--bg); }
.lp-vs { font: 500 10px var(--font-mono); color: var(--text-faint); }
/* (in a row too narrow for both, the player name gives way first, then the
   matchup; neither pushes the row past the window) */
.lp-lib-mu { flex: 0 1 auto; min-width: 0; margin-left: 4px; font: 600 13.5px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-lib-crest, .lp-lib-pos { display: block; width: 16px; height: 16px; }
.lp-lib-pos { opacity: 0.75; }
.lp-lib-player {
  flex: 0 8 16ch; min-width: 0; max-width: 16ch; text-align: right;
  font: 600 12.5px var(--font-sans); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-lib-len { font-size: 11px; color: var(--text-muted); }
.lp-lib-empty { padding: 14px; font: 400 13px var(--font-sans); color: var(--text-muted); border: 1px solid var(--border); }
/* The FAQ: one answer open at a time. The answer's row grows from nothing
   (grid-template-rows 0fr to 1fr) while landing.js scrolls the window so the
   whole of it ends up in view. */
.lp-faq-list { display: grid; gap: 8px; align-content: start; padding-bottom: 1px; }
.lp-faq-item { background: var(--surface-raised); border: 1px solid var(--border); transition: border-color .1s var(--ease); }
.lp-faq-item:hover { border-color: var(--accent-border); }
.lp-faq-q {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 18px;
  background: none; border: 0; color: var(--text); font: 600 14px var(--font-sans); text-align: left; cursor: pointer;
}
.lp-faq-g { flex: none; width: 0.6em; font-size: 11px; color: var(--accent); }
.lp-faq-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s cubic-bezier(.33, 1, .68, 1); }
.lp-faq-item.is-open .lp-faq-wrap { grid-template-rows: 1fr; }
.lp-faq-clip { overflow: hidden; min-height: 0; opacity: 0; visibility: hidden; transition: opacity .18s ease-out, visibility 0s .18s; }
.lp-faq-item.is-open .lp-faq-clip { opacity: 1; visibility: visible; transition: opacity .18s ease-out, visibility 0s; }
.lp-faq-a { display: grid; gap: 10px; padding: 0 18px 15px 41px; }
.lp-faq-a p { margin: 0; font: 400 13px/1.65 var(--font-sans); color: var(--text-muted); text-wrap: pretty; }

/* ── footer ──────────────────────────────────────────────────────────── */
.lp-foot {
  display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 13px 24px;
  background: var(--surface); border-top: 1px solid var(--border);
}
.lp-foot-brand { display: flex; align-items: center; gap: 8px; }
.lp-foot-brand .mono { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.lp-foot nav { display: flex; align-items: center; gap: 18px; }
.lp-foot nav a { font: 500 12px var(--font-sans); color: var(--text-muted); }
.lp-foot nav a:hover { color: var(--text); }
.lp-foot-note { font: 500 10px var(--font-mono); color: var(--text-faint); }

/* ── narrow screens (the mock is desktop only; this keeps it readable) ── */
@media (max-width: 1100px) {
  .lp-pull { grid-template-columns: minmax(0, 1fr); }
  .lp-pull { padding: 28px 24px; }
}
@media (max-width: 760px) {
  .lp-hero { padding: 36px 16px; }
  .lp-hero h1 { font-size: 38px; }
  .lp-body { padding: 0 8px; }
  .lp-strip { flex-wrap: wrap; gap: 10px; }
  .lp-cards, .lp-duo, .lp-price-card { grid-template-columns: minmax(0, 1fr); }
  .lp-duo { height: auto; }
  .lp-panel { max-height: 480px; }
  .lp-lib-row { gap: 8px; padding: 9px 10px; }
  .lp-lib-row > .sp { display: none; }
  .lp-lib-mu { flex: 1 1 0; }
  .lp-lib-player { flex: 0 1 auto; max-width: 10ch; }
  .lp-box-stage { min-height: 380px; border-right: 0; border-bottom: 1px solid var(--border); }
  .lp-pricing { padding: 20px 0; }
  .lp-foot { flex-direction: column; gap: 10px; }
  /* the button under the text: beside it the text had a 137 px column, and
     the cell, as tall as the longest description, was eleven lines of it */
  .fp-info { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fp-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fp-label.-in { animation: none; }
  .fp-veil { transition: none; }
  .lp-faq-wrap, .lp-faq-clip, .lp-faq-item.is-open .lp-faq-clip { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   The features page, /landing/features ("Features.dc.html", its "header"
   title layout): a wall of feature cards, and the viewer a card opens.
   ════════════════════════════════════════════════════════════════════════ */
.ft-wall { width: 100%; max-width: 1400px; margin: 0 auto; padding: 64px 24px 64px; }
.ft-frame { background: var(--surface); border: 1px solid var(--border); }
.ft-top { position: relative; }
.ft-title {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 28px 280px 28px 36px; border-bottom: 1px solid var(--border);
}
.ft-title h1 { margin: 0; font: 800 clamp(28px, 3.2vw, 40px)/1.1 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.ft-title h1 span { color: var(--accent); }
.ft-title p { margin: 0; font: 400 14px/1.6 var(--font-sans); color: var(--text-muted); }
.ft-strip { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 6px 18px; }
.ft-line { flex: 1; min-width: 24px; height: 1px; background: var(--border); }
.ft-count { font-size: 11px; font-weight: 500; color: var(--text-faint); }
.ft-get { padding: 7px 14px; }
.ft-strip-gap { flex: none; width: 226px; }
/* The pack stands in a column of graph paper at the frame's right end, a
   quarter taller than the frame's head, so its top stands clear of the frame
   (that is what the space above the frame is for). */
.ft-pack {
  position: absolute; top: 0; right: 0; bottom: 0; width: 244px; z-index: 3;
  border-left: 1px solid var(--border); background-color: var(--bg);
  background-image: linear-gradient(var(--tele-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tele-grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
}
.ft-pack > div { position: absolute; left: 0; right: 0; bottom: 0; height: 125%; }
/* (isolation: the canvas is added to its still as it takes over, and the sum
   must be of those two alone; the box's z-index does the same for it) */
deepreview-pack { position: absolute; inset: 0; display: block; isolation: isolate; }
.ft-grid-wrap {
  padding: 24px; border-top: 1px solid var(--border); background-color: #030304;
  background-image: linear-gradient(rgba(139, 143, 166, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 143, 166, .07) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
}
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 64px) / 5)), 1fr)); gap: 16px; }
.ft-card {
  position: relative; display: block; width: 100%; aspect-ratio: 63 / 88; margin: 0; padding: 0;
  appearance: none; background: none; border: 0; color: inherit; font: inherit; text-align: left;
  perspective: 900px; cursor: pointer; outline: none;
}
.ft-slot { position: absolute; inset: 0; border: 1px dashed var(--border-strong); border-radius: 4.8% / 3.4%; }
.ft-tilt {
  position: absolute; inset: 0; overflow: hidden; border-radius: 4.8% / 3.4%; background: var(--surface-raised);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s, opacity .25s; will-change: transform;
}
.ft-tilt > img, .fv-face > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* under the card's face until it has loaded */
.ft-wait {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px;
  border: 1px solid var(--border); border-radius: inherit; font: 600 13px/1.3 var(--font-sans); color: var(--text-muted);
}
.ft-wait .mono { font-size: 10px; font-weight: 500; color: var(--text-faint); }
.ft-glare {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: var(--go, 0); transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 45%);
}
.ft-note { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 9px 18px; border-top: 1px solid var(--border); }
.ft-note span { font: 500 10px var(--font-mono); color: var(--text-faint); }

/* ── the viewer ──────────────────────────────────────────────────────── */
.fv { position: fixed; inset: 0; z-index: 100; overflow: auto; padding: 24px; }
.fv:not([hidden]) { display: flex; }
.fv-dim { position: fixed; inset: 0; background: rgba(6, 7, 10, .76); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.fv-panel {
  position: relative; margin: auto; width: min(100%, 1180px, max(760px, calc((100dvh - 270px) * 2.118 + 64px)));
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-modal); outline: none;
}
.fv-head { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--border); }
.fv-no { font-size: 11px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.fv-no b { font-weight: inherit; color: var(--text); }
.fv-kbd { font-size: 10px; font-weight: 600; color: var(--text-muted); background: var(--surface-raised); border: 1px solid var(--border-strong); padding: 1px 6px; }
.fv-x {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer; transition: var(--tcolors);
}
.fv-x:hover { color: var(--text); background: var(--surface-hover); }
.fv-body { display: grid; grid-template-columns: calc((100% - 24px) / 3.944) minmax(0, 1fr); gap: 20px 24px; align-items: stretch; padding: 20px; }
.fv-left { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fv-left > [data-swapfade] { min-width: 0; }
.fv-cardbox {
  flex: 1; min-height: 0; container-type: size; overflow: hidden; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background-color: #030304;
  background-image: linear-gradient(rgba(139, 143, 166, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 143, 166, .07) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
}
.fv-fly {
  position: relative; z-index: 2; height: min(calc(100cqh - 32px), calc((100cqw - 32px) * 88 / 63)); aspect-ratio: 63 / 88;
  perspective: 900px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.fv-tilt {
  position: absolute; inset: 0; border-radius: 4.8% / 3.4%; transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s, opacity .25s; will-change: transform;
}
.fv-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.fv-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 4.8% / 3.4%; background: var(--surface-raised);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.fv-face.-back { transform: rotateY(180deg); }
.fv-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fv-meta .ft-line { min-width: 0; }
.fv-name { font: 700 21px/1.2 var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; min-height: 2.4em; }
.fv-player { min-width: 0; min-height: 0; align-self: start; }
.fv-player .fp-stage { border-bottom: 0; }
.fv-desc { grid-column: 1 / -1; display: flex; align-items: stretch; gap: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.fv-desc p { flex: 1; min-width: 0; margin: 0; min-height: 3.3em; font: 400 14px/1.65 var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
/* beside the description, past a rule: the way to the pricing card */
.fv-cta { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-left: 24px; border-left: 1px solid var(--border); }
.fv-get { padding: 9px 16px; }
.fv-nav { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); }
.fv-nav button {
  display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 48%; padding: 7px 12px;
  background: transparent; border: 1px solid var(--border); color: var(--text-muted); font: 500 13px var(--font-sans);
  cursor: pointer; transition: var(--tcolors);
}
.fv-nav button:hover { color: var(--text); border-color: var(--accent-border); background: var(--surface-hover); }
.fv-nav button > span:not(.fv-kbd) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-nav .fv-kbd { color: var(--text); }

/* narrow screens (the mock is desktop only; this keeps it usable) */
@media (max-width: 760px) {
  .ft-wall { padding: 24px 8px 40px; }
  .ft-title { padding: 22px 18px; }
  .ft-pack, .ft-strip-gap { display: none; }
  /* the strip in two rows: the label and the count, then the button */
  .ft-strip { flex-wrap: wrap; row-gap: 10px; padding: 12px 18px; }
  .ft-strip .u-label, .ft-count { white-space: nowrap; }
  .ft-line { min-width: 12px; }
  .ft-get { flex: 1 1 100%; justify-content: center; }
  .ft-grid-wrap { padding: 12px; }
  .ft-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .fv { padding: 8px; }
  .fv-body { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 14px; }
  .fv-left { flex-direction: row; align-items: center; }
  .fv-left > [data-swapfade] { flex: 1; }
  .fv-cardbox { flex: none; width: 132px; height: 184px; }
  .fv-name { min-height: 0; font-size: 18px; }
  .fv-desc { flex-direction: column; gap: 12px; }
  .fv-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .fv-nav { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-tilt, .fv-tilt { transition: opacity .25s; }
}