/* firestarterdance.com: a K/DA-style night stage (black-violet, magenta, fine gold lines) on the ai-trend-generator
   skeleton (templates/ai-trend-generator). No logos, official art or Riot fonts: a condensed system stack for display.
   Tokens live in :root (dark, default) and :root[data-theme="light"] (readable, deliberately plainer).
   Motion: transform and opacity only, all inside prefers-reduced-motion: no-preference. Nothing here is needed for a page
   to be complete: without JS the example clip still autoplays natively (muted, looping) and the moves are a plain list;
   with reduced motion site.js holds the clip on its poster frame. */

:root {
  color-scheme: dark;
  --bg: #0a0612;
  --surface: #130b20;
  --surface-2: #1b1030;
  --line: #33264f;
  --text: #f6f0ff;
  --text-2: #d9cdee;
  --muted: #b0a2c9;
  --pink: #ff2e88;              /* the one button colour, and the key price */
  --on-accent: #14060f;
  --hot: #ff5fa2;               /* the pink as small text */
  --link: #ff9ac8;
  --gold: #f2c46d;              /* fine lines, small-label outlines, price card edges */
  --gold-line: rgba(242, 196, 109, 0.38);
  --rule: rgba(242, 196, 109, 0.2);
  --holo: linear-gradient(96deg, #ff5fa2 0%, #a78bfa 52%, #67e8f9 100%);   /* hairlines and highlight bars only */
  --holo-text: linear-gradient(96deg, #ff5fa2 10%, #a78bfa 90%);           /* one or two words of a headline */
  --focus: #ffd84d;
  --stars:
    radial-gradient(circle at 18px 24px, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.34) 0.7px, transparent 1.5px),
    radial-gradient(circle at 96px 70px, rgba(196, 170, 255, 0.3) 0, rgba(196, 170, 255, 0.3) 0.7px, transparent 1.5px),
    radial-gradient(circle at 160px 140px, rgba(255, 255, 255, 0.24) 0, rgba(255, 255, 255, 0.24) 0.9px, transparent 1.8px),
    radial-gradient(circle at 52px 120px, rgba(255, 150, 200, 0.26) 0, rgba(255, 150, 200, 0.26) 0.7px, transparent 1.5px);
  --nebula:
    radial-gradient(46% 72% at 78% 22%, rgba(109, 40, 217, 0.5), rgba(42, 18, 80, 0.42) 48%, transparent 74%),
    radial-gradient(34% 54% at 8% 92%, rgba(255, 46, 136, 0.16), transparent 72%),
    radial-gradient(80% 58% at 50% 112%, rgba(42, 18, 80, 0.85), transparent 70%);
  --screen-glow: 0 0 0 1px rgba(255, 95, 162, 0.9), 0 0 0 4px rgba(255, 46, 136, 0.12), 0 0 34px rgba(255, 46, 136, 0.34), 0 54px 110px -40px rgba(109, 40, 217, 0.75);
  --cta-glow: 0 14px 28px -10px rgba(255, 46, 136, 0.7);

  --display: "DIN Condensed", "Avenir Next Condensed", "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed", "sans-serif-condensed", Impact, system-ui, sans-serif;
  --body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --cut: 12px;                  /* the one chamfer size: top-right corner of buttons and cards */
  --chamfer: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  --fs-lede: 20px;
  --fs-h1: clamp(64px, 7.2vw, 104px);
  --fs-h2: 44px;
  --fs-h3: 19px;
  --gutter: 32px;
  --wrap: 1200px;
  --measure: 68ch;
  --tap: 44px;
  --sec: 88px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #faf7fd;
  --surface: #ffffff;
  --surface-2: #f1eaf8;
  --line: #d8cce8;
  --text: #1b1026;
  --text-2: #392b4b;
  --muted: #65587a;
  --pink: #ff2e88;
  --on-accent: #14060f;
  --hot: #b8105f;
  --link: #a50f58;
  --gold: #8a6212;
  --gold-line: rgba(138, 98, 18, 0.34);
  --rule: rgba(138, 98, 18, 0.2);
  --holo-text: linear-gradient(96deg, #c4136b 10%, #6d28d9 90%);
  --focus: #1b1026;
  --stars: none;
  --nebula:
    radial-gradient(46% 72% at 78% 22%, rgba(167, 139, 250, 0.26), transparent 72%),
    radial-gradient(34% 54% at 8% 92%, rgba(255, 46, 136, 0.1), transparent 72%);
  --screen-glow: 0 0 0 1px rgba(184, 16, 95, 0.7), 0 0 26px rgba(255, 46, 136, 0.22), 0 36px 70px -38px rgba(109, 40, 217, 0.5);
  --cta-glow: 0 12px 22px -10px rgba(196, 19, 107, 0.5);
}

@media (max-width: 760px) {
  :root {
    --gutter: 16px;
    --fs-lede: 16px;
    --fs-h1: 46px;
    --fs-h2: 34px;
    --fs-h3: 18px;
    --sec: 60px;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0; background-color: var(--bg); color: var(--text-2);
  background-image: var(--stars);     /* very faint star dots, static */
  background-size: 211px 211px, 263px 263px, 331px 331px, 173px 173px;
  font: 16px/1.6 var(--body);
  overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 14px; }
h1, h2, h3 { color: var(--text); margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 8px; top: -60px; background: var(--pink); color: var(--on-accent); padding: 10px 14px; z-index: 10; font-weight: 700; }
.skip:focus { top: 8px; }

/* display type: condensed caps, tight leading */
.h1, .h2 {
  font-family: var(--display); font-weight: 700; font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.004em; line-height: 0.88;
}
.h1 { font-size: var(--fs-h1); padding-top: 0.08em; }
.h1 .l { display: block; }
.h1--long { font-size: clamp(54px, 5.6vw, 80px); }
@media (max-width: 900px) { .h1--long { font-size: clamp(42px, 11.4vw, 60px); } }
@media (min-width: 901px) { .h1--guide { font-size: clamp(46px, 4.4vw, 62px); } }   /* the how-to H1 is a whole sentence: three lines in the copy column */
.h1 .hot, .h2 .hot { color: var(--hot); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .h1 .hot, .h2 .hot { background: var(--holo-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.h2 { font-size: var(--fs-h2); margin: 0 0 18px; padding-top: 0.08em; }
.h3 { font-size: var(--fs-h3); line-height: 1.35; font-weight: 650; margin: 0 0 6px; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); margin: 0; }
/* small labels: wide-tracked caps, like the credits row on the back of an album sleeve */
.eyebrow { display: flex; align-items: center; gap: 12px; font: 700 11px/1.2 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); flex: none; }
.eyebrow b { color: var(--hot); font-weight: 700; }

/* ---------- header ---------- */
.top { position: relative; z-index: 2; border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 22px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.08em; min-height: var(--tap); }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: var(--text-2); text-decoration: none; font: 700 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; padding: 0 12px; min-height: var(--tap); display: inline-flex; align-items: center; }
.nav a:hover { color: var(--hot); }
.theme-btn { flex: none; display: none; width: var(--tap); height: var(--tap); border: 1px solid var(--gold-line); border-radius: 2px; background: transparent; color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.js .theme-btn { display: inline-grid; place-items: center; }
.top .cta-wrap { margin-left: 4px; }
@media (max-width: 760px) {
  .top .wrap { min-height: 52px; gap: 8px; }
  .nav { display: none; }
  .theme-btn { margin-left: auto; }
  .brand { font-size: 19px; }
}

/* ---------- button: one chamfered corner, one pink ---------- */
.cta-wrap { position: relative; display: block; isolation: isolate; }
.cta-wrap::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 6px; box-shadow: var(--cta-glow); }
.cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px;
  background: var(--pink); color: var(--on-accent);
  font-weight: 800; font-size: 18px; letter-spacing: 0.01em; text-decoration: none; text-align: center;
  clip-path: var(--chamfer);
}
:root[data-theme="light"] .cta { box-shadow: inset 0 0 0 1px rgba(20, 6, 15, 0.45); }
.cta:hover { text-decoration: none; background: #ff4d9a; }
.cta:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #14060f, inset 0 0 0 5px #fff; }
:root[data-theme="light"] .cta:focus-visible { box-shadow: inset 0 0 0 3px #14060f, inset 0 0 0 5px #fff; }   /* the light-theme rule above is more specific and would hide the ring */
.cta .arr { font-size: 20px; line-height: 1; flex: none; }
.cta-t { white-space: nowrap; }
@media (max-width: 760px) { .cta--block { padding: 0 16px; font-size: 17px; } .cta--block .arr { font-size: 18px; } }
.cta--block { width: 100%; }
.cta--sm { min-height: var(--tap); font-size: 14px; padding: 0 16px; white-space: nowrap; }
.cta-wrap--sm::before { display: none; }
.offer { margin: 14px 0 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--gold); font-size: 14px; line-height: 1.45; color: var(--text-2); }
.offer b { color: var(--text); font-weight: 700; }
.cta-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.cta-note b { color: var(--text-2); font-weight: 600; }

/* ---------- cards: one chamfered corner and a hairline edge (the line follows the cut) ---------- */
.beat, .pcard, .steps li, .tips, .dd > div, .credits, .side-fig {
  --fill: var(--surface);
  --fill-img: linear-gradient(var(--fill), var(--fill));
  --edge: var(--gold-line);
  border: 1px solid transparent; border-radius: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 1.6px), var(--edge) calc(50% - 1.6px), var(--edge) calc(50% - 0.6px), transparent calc(50% - 0.6px)) top right / var(--cut) var(--cut) no-repeat border-box border-box,
    var(--fill-img) padding-box,
    linear-gradient(var(--edge), var(--edge)) border-box;
  clip-path: var(--chamfer);
}

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; padding: 30px 0 36px; }
.hero::before {                       /* static violet nebula behind header and hero: radial gradients only */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: -64px;
  background: var(--nebula);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 56px; align-items: start; }
.hero-copy { display: grid; gap: 18px; align-content: start; }
.hero-side { display: grid; gap: 18px; align-content: start; padding-top: 32px; }   /* clip top lines up with the H1 */
.specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.specs li { font: 700 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); padding: 8px 11px; border: 1px solid var(--gold-line); border-radius: 2px; background: rgba(10, 6, 18, 0.45); }
:root[data-theme="light"] .specs li { background: rgba(255, 255, 255, 0.7); }
.specs li b { color: var(--text); font-weight: 700; }
.buy { display: block; }

/* the example clip: a stage screen with a thin pink glow edge */
.stage { margin: 0; }
.screen { position: relative; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: #000; box-shadow: var(--screen-glow); }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.now { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 104px); background: rgba(10, 6, 18, 0.74); color: #fff; font: 700 10px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 10px; border: 1px solid rgba(255, 95, 162, 0.6); border-radius: 2px; }
.now i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); flex: none; }
.now b { color: #ff7ab5; font-weight: 800; white-space: nowrap; }
.now b::after { content: "\00b7"; margin-left: 8px; color: rgba(255, 255, 255, 0.6); }
.now span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-on { position: absolute; top: 12px; right: 12px; background: rgba(10, 6, 18, 0.74); color: var(--gold); font: 700 10px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 10px; border: 1px solid rgba(242, 196, 109, 0.55); border-radius: 2px; }
:root[data-theme="light"] .chip-on { color: #f2c46d; }
.ctl { position: absolute; right: 10px; bottom: 10px; display: none; gap: 8px; }
.js .ctl { display: flex; }
.vbtn { width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(10, 6, 18, 0.66); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.vbtn:hover { background: rgba(10, 6, 18, 0.88); }
.vbtn svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.vbtn .i-play, .vbtn .i-on { display: none; }
.vbtn.pp[aria-pressed="true"] .i-play { display: block; }
.vbtn.pp[aria-pressed="true"] .i-pause { display: none; }
.vbtn.snd[aria-pressed="true"] .i-on { display: block; }       /* sound on: the speaker with waves; off (default): the speaker with a cross */
.vbtn.snd[aria-pressed="true"] .i-off { display: none; }
.stage-cap { margin: 14px 2px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* phone: H1, one sentence, the playing clip, the price button, all inside 390 x 664; the chips follow the button */
@media (max-width: 900px) {
  .hero { padding: 8px 0 36px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero-copy, .hero-side { display: contents; }
  .hero-copy > .eyebrow { display: none; }
  .hero-copy > .h1 { order: 1; }
  .hero-copy > .lede { order: 2; }
  .hero-side > .stage { order: 3; }
  .hero-copy > .buy { order: 4; }
  .hero-side > .specs { order: 5; }
  .now { top: 8px; left: 8px; font-size: 9px; padding: 6px 8px; max-width: calc(100% - 86px); letter-spacing: 0.14em; }
  .chip-on { top: 8px; right: 8px; font-size: 9px; padding: 6px 8px; letter-spacing: 0.14em; }
  .ctl { right: 6px; bottom: 6px; gap: 6px; }
  .stage-cap { margin-top: 8px; font-size: 12px; }
  .specs { gap: 6px; }
  .specs li { padding: 7px 9px; }
  .offer { margin-top: 10px; font-size: 13px; }
  .cta-note { font-size: 12px; margin-top: 8px; }
  /* how-to guide: its answer is longer than one sentence, so the price button comes before the clip and the first screen keeps the action */
  .hero--guide .hero-copy > .buy { order: 3; }
  .hero--guide .hero-side > .stage { order: 4; }
}

/* ---------- order bar: phones only, shown once the first-screen button has scrolled away ---------- */
.sticky { display: none; }
@media (max-width: 760px) {
  body.has-bar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }   /* room for the order bar, only on pages that have it */
  .sticky {
    display: flex; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(10, 6, 18, 0.95); border-top: 1px solid var(--gold-line);
    visibility: hidden; opacity: 0; transform: translateY(100%);
  }
  .sticky.show { visibility: visible; opacity: 1; transform: translateY(0); }
  .sticky-price { margin: 0; font-size: 13px; line-height: 1.3; color: var(--text-2); }
  .sticky-price b { color: var(--text); }
  .sticky .cta-wrap { flex: none; }
}
:root[data-theme="light"] .sticky { background: rgba(250, 247, 253, 0.96); }

/* ---------- sections ---------- */
.sec { padding: calc(var(--sec) - 30px) 0 0; }
.sec > .wrap::before { content: ""; display: block; height: 1px; margin-bottom: 30px; background: linear-gradient(90deg, var(--gold) 0, var(--gold-line) 38%, transparent 100%); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.sec-head .h2 { margin: 0; }
.sec-head p { margin: 0; color: var(--muted); max-width: 58ch; }
.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--text-2); }
.prose p b, .prose li b { color: var(--text); }
.src { font-size: 12px; color: var(--muted); margin: 14px 0 0; letter-spacing: 0.02em; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 24px; } }

#moves { padding-top: 28px; }

/* the moves, beat by beat: five cards that light up with the clip (home) */
.beats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.beat { position: relative; overflow: hidden; }
.beat::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3px; background: var(--holo); transform: scaleX(0); transform-origin: left; }
.beat img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.beat-body { padding: 12px 14px 16px; }
.beat-t { display: block; font: 700 11px/1 var(--body); letter-spacing: 0.18em; color: var(--hot); margin-bottom: 9px; }
.beat .h3 { margin: 0 0 4px; }
.beat p { margin: 0; font-size: 14px; line-height: 1.45; }
.beat--drop { --edge: var(--pink); --fill: #1e0f2e; }
:root[data-theme="light"] .beat--drop { --fill: #fff1f7; }
.beat.is-now::before { transform: scaleX(1); }
.is-live > .beat:not(.is-now) img { opacity: 0.5; }     /* only the picture dims: the text stays at full contrast */
.is-live > .act:not(.is-now) { opacity: 0.85; }         /* whole row, kept high enough for 4.5:1 text in both themes (measured) */
@media (max-width: 1000px) { .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .beats { grid-template-columns: 1fr; gap: 10px; }
  .beat { display: grid; grid-template-columns: 128px minmax(0, 1fr); }
  .beat::before { top: 0; bottom: 0; right: auto; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  .beat.is-now::before { transform: scaleY(1); }
  .beat img { height: 100%; aspect-ratio: auto; }
  .beat-body { padding: 10px 12px 12px; }
  .beat-t { margin-bottom: 6px; font-size: 10px; }
  .beat .h3 { font-size: 17px; }
  .beat p { font-size: 13px; }
}

/* run of show (KDA page): the same clip as four acts, a time gutter and text */
.acts { list-style: none; margin: 0; padding: 0; max-width: 820px; border-top: 1px solid var(--rule); }
.act { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 24px; padding: 20px 0 20px 22px; border-bottom: 1px solid var(--rule); }
.act::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--holo); transform: scaleY(0); transform-origin: top; }
.act.is-now::before { transform: scaleY(1); }
.act-t { font: 700 11px/1.9 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hot); }
.act .h3 { margin: 0 0 4px; }
.act p { margin: 0; }
@media (max-width: 760px) { .act { grid-template-columns: 1fr; padding-left: 18px; } }

/* steps and photo tips */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps li { padding: 20px; counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 0.9; color: var(--hot); margin-bottom: 12px; }
.steps p { margin: 0; font-size: 15px; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .steps li { display: grid; grid-template-columns: 48px 1fr; gap: 0 12px; padding: 14px 16px; }
  .steps li::before { font-size: 40px; margin: 0; grid-row: span 2; }
}
.steps--list { grid-template-columns: 1fr; max-width: 820px; }
.steps--list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; padding: 18px 20px; }
.steps--list li::before { grid-row: span 2; margin: 0; font-size: 48px; }
@media (max-width: 760px) {   /* how-to guide: five long steps, so a slimmer number column leaves the text more width on a phone */
  .steps--tight li { grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; padding: 14px 16px; }
  .steps--tight li::before { font-size: 38px; }
}
.tips { padding: 18px 20px; }
.tips .h3 { margin-bottom: 10px; }
.tips ul { margin: 0; padding-left: 1.1em; }
.tips li { margin: 0 0 6px; font-size: 15px; }
.dd { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; max-width: 820px; }
.dd > div { padding: 18px 20px; }
.dd ul { list-style: none; margin: 0; padding: 0; }
.dd li { position: relative; padding-left: 26px; margin: 0 0 8px; font-size: 15px; }
.dd li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.dd .yes li::before { content: "+"; color: #5fd38a; }
.dd .no li::before { content: "\2212"; color: var(--hot); }
:root[data-theme="light"] .dd .yes li::before { color: #1f7a45; }
@media (max-width: 760px) { .dd { grid-template-columns: 1fr; } }

.dd--stack { grid-template-columns: 1fr; margin-top: 0; max-width: none; }
.split .acts, .split .steps--list, .split .vtable { max-width: none; }

/* credits card and side figure: the info rows and the still that sit beside a text column */
.credits { padding: 18px 20px 8px; }
.credits-h { font: 700 11px/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hot); margin: 0 0 6px; }
.credits .specs-dl { margin: 0; max-width: none; border-top: 0; grid-template-columns: 104px minmax(0, 1fr); }
.credits .specs-dl dd { font-size: 14px; }
.credits .specs-dl dt:last-of-type, .credits .specs-dl dd:last-of-type { border-bottom: 0; }
.side-fig { margin: 0; }
.side-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.side-fig figcaption { padding: 12px 14px 14px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.tips .inc { margin: 0; padding-left: 0; max-width: none; }

/* price */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pcard { padding: 18px 20px 20px; display: grid; gap: 6px; align-content: start; }
.pcard .pname { font: 700 11px/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.pcard .pval { font-family: var(--display); font-weight: 700; font-size: 60px; line-height: 0.95; color: var(--text); font-variant-numeric: tabular-nums; padding-top: 0.06em; }
.pcard .pper { font-size: 14px; color: var(--text-2); line-height: 1.45; }
.pcard--main { --edge: var(--gold); --fill-img: linear-gradient(180deg, #2c1233, var(--surface) 80%); }
:root[data-theme="light"] .pcard--main { --fill-img: linear-gradient(180deg, #fff0f6, var(--surface) 80%); }
.pcard--main .pval { color: var(--pink); }
.inc { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 820px; }
.inc li { position: relative; padding-left: 26px; font-size: 15px; }
.inc li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; gap: 10px; } .pcard .pval { font-size: 48px; } }
.vtable { width: 100%; max-width: 820px; border-collapse: collapse; font-size: 15px; }
.vtable th, .vtable td { text-align: left; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.vtable th { font: 700 11px/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.vtable td:first-child { color: var(--text); font-weight: 600; }
.vtable td small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--muted); }
.vtable td b { color: var(--text); font-variant-numeric: tabular-nums; }
.vtable .key b { color: var(--hot); }
.vtable--times td + td { white-space: nowrap; }   /* Kai'Sa page: a time range such as 0:01–0:04 never breaks across two lines */
@media (max-width: 760px) {   /* how-to guide: the three-column refund table stacks on a phone (problem, what happens, refund) instead of three cramped columns */
  .vtable--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vtable--stack, .vtable--stack tbody, .vtable--stack tr, .vtable--stack td { display: block; }
  .vtable--stack tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .vtable--stack td { padding: 0; border: 0; }
  .vtable--stack td + td { margin-top: 4px; }
  .vtable--stack td:last-child::before { content: "Refund: "; color: var(--hot); font-weight: 700; }
}
.specs-dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0; margin: 22px 0 0; max-width: 820px; border-top: 1px solid var(--rule); }
.specs-dl dt, .specs-dl dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
.specs-dl dt { font: 700 11px/1.45 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); padding-top: 15px; }
.specs-dl dd { color: var(--text); }
@media (max-width: 760px) { .specs-dl { grid-template-columns: 112px minmax(0, 1fr); } }

/* FAQ: every answer open, no accordions; a small index number above each question */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; counter-reset: q; }
.qa { padding: 20px 0; border-top: 1px solid var(--rule); counter-increment: q; }
.qa .h3::before { content: counter(q, decimal-leading-zero); display: block; margin-bottom: 8px; font: 700 11px/1 var(--body); letter-spacing: 0.18em; color: var(--hot); }
.qa p { margin: 0; font-size: 15px; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

/* closing band */
.band { margin-top: var(--sec); padding: 60px 0; border-top: 1px solid var(--rule); text-align: center; background: radial-gradient(60% 130% at 50% 140%, rgba(109, 40, 217, 0.42), transparent 70%); }
:root[data-theme="light"] .band { background: radial-gradient(60% 130% at 50% 140%, rgba(167, 139, 250, 0.22), transparent 70%); }
.band .h2 { font-size: clamp(40px, 6vw, 80px); }
.band .cta-wrap { display: inline-block; min-width: 320px; margin-top: 10px; }
.band p { color: var(--muted); }
@media (max-width: 760px) { .band .cta-wrap { display: block; min-width: 0; } }

/* footer */
.foot { border-top: 1px solid var(--rule); padding: 28px 0 44px; font-size: 13px; color: var(--muted); }
.foot p { margin: 0 0 8px; max-width: 86ch; }
.foot .disc { color: var(--text-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 10px; }
.foot nav a { color: var(--muted); padding: 10px 10px 10px 0; min-height: var(--tap); display: inline-flex; align-items: center; }
.foot nav a:hover { color: var(--hot); }

/* plain pages: about, 404 */
.page { padding: 40px 0 64px; }
.page .h1 { font-size: clamp(48px, 6vw, 80px); margin-bottom: 22px; }
.page .prose h2 { font-size: 24px; line-height: 1.25; margin: 34px 0 10px; color: var(--text); }
.page .band { margin-top: 56px; }
.prose ul { margin: 0 0 16px; padding-left: 1.2em; }
.prose li { margin: 0 0 8px; }
.prose strong { color: var(--text); }
.page .prose h3 { font-size: 18px; line-height: 1.3; margin: 26px 0 8px; color: var(--text); }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; padding: 1px 6px; border: 1px solid var(--rule); background: var(--surface); overflow-wrap: anywhere; }
.prose .vtable { max-width: 100%; margin: 6px 0 16px; }
.prose .lede { margin-bottom: 6px; }

/* ---------- motion (all optional, transform and opacity only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cta::after {                       /* a slow highlight sweep across the pink button, once every 7 seconds */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-140%) skewX(-20deg);
    animation: sweep 7s ease-in-out infinite;
  }
  .cta--sm::after { display: none; }
  .nav a { transition: color 0.18s ease; }
  .beat { transition: transform 0.4s ease; }
  .beat img { transition: opacity 0.4s ease; }
  .beat::before { transition: transform 0.45s ease; }
  .is-live > .beat.is-now { transform: translateY(-5px) scale(1.015); }
  .act { transition: opacity 0.4s ease; }
  .act::before { transition: transform 0.45s ease; }
  .sticky { transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s; }
  .sticky.show { transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s; }
}
@keyframes sweep {
  0%, 68% { transform: translateX(-140%) skewX(-20deg); }
  86%, 100% { transform: translateX(380%) skewX(-20deg); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .is-live > .beat.is-now { transform: translateX(4px); }
}

/* ---------- examples page: the test photo next to its clip, then four short notes (static; no motion of its own) ---------- */
.ex { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px 32px; align-items: center; }
.ex-photo { margin: 0; padding: 0; overflow: hidden; }          /* the card itself (chamfer, hairline edge) comes from .credits */
.ex-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }
.ex-photo figcaption { padding: 12px 14px 14px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ex .credits-h { display: block; margin: 0 0 4px; }              /* the small "Photo in" / "Video out" labels */
.nb { white-space: nowrap; }                                       /* "T-shirt" never breaks at its hyphen */
.ex-notes { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ex-notes .pcard { padding: 16px 18px 18px; }
@media (max-width: 1100px) { .ex-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ex { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ex-photo { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .ex-photo img { height: 112px; }
  .ex-photo figcaption { padding: 10px 12px; }
  .hero--examples .hero-side > .credits { order: 6; }           /* phone first screen: heading, intro, the two stills, order button, then the facts card */
}
@media (max-width: 760px) { .ex-notes { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* first screen of the examples page: two picture links to the examples, built from the move cards */
.beats.ex-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ex-jump a.beat { display: block; color: inherit; text-decoration: none; }
.ex-jump .beat-t { text-transform: uppercase; }
.ex-jump a.beat:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }   /* the card's chamfer clips an outside ring, so the ring sits inside */
@media (min-width: 761px) { .ex-jump a.beat:hover::before, .ex-jump a.beat:focus-visible::before { transform: scaleX(1); } }
@media (max-width: 900px) { .hero--examples .hero-side > .ex-jump { order: 3; gap: 10px; } }   /* phone first screen: heading, intro, the two stills, order button */

/* hero between 901 and 1100 px wide: the order button never wraps and needs about 360px, but its column had shrunk to 160-340px, so the button and the copy above it ran under the clip column. The copy column now keeps what its content needs and the clip column gives way instead (no change at 900px and below, nor at 1101px and above) */
@media (min-width: 901px) and (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(min-content, 1fr) minmax(0, 620px); } }