/* StockTap TV marketing site. Plain CSS, phone first. */
:root {
  --bg: #f2f6f4;
  --surface: #ffffff;
  --ink: #0d2a28;
  --muted: #45605b;
  --line: #cbdad5;
  --band: #0f3d3a;
  --band-ink: #eaf2ef;
  --band-muted: #a9c6c0;
  --band-line: #24524e;
  --gold: #f5c04a;
  --gold-deep: #9a6a00;
  --gold-ink: #231900;
  --coral: #ff6f61;
  --sky: #4faef5;
  --lilac: #b79cf7;
  --bezel: #141a19;
  --focus: #1b7cd6;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 16px;
  --max: 1160px;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a201e;
    --surface: #102d2b;
    --ink: #eaf2ef;
    --muted: #a9c2bd;
    --line: #22423f;
    --band: #0f3936;
    --band-line: #2a5853;
    --gold-deep: #f5c04a;
    --bezel: #050807;
    --focus: #7cc4ff;
  }
}
:root[data-theme="dark"] {
  --bg: #0a201e; --surface: #102d2b; --ink: #eaf2ef; --muted: #a9c2bd; --line: #22423f;
  --band: #0f3936; --band-line: #2a5853; --gold-deep: #f5c04a; --bezel: #050807; --focus: #7cc4ff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.measure > * { max-width: 38rem; }
.measure > .device, .measure > .device > * { max-width: 40rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--gold); color: var(--gold-ink); padding: 8px 12px; }

/* Type */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.005em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: clamp(46px, 12.5vw, 112px); }
h2 { font-size: clamp(34px, 7vw, 60px); }
h3 { font-size: 22px; line-height: 1.25; margin: 0 0 0.4em; }
.lede { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.5; max-width: 32em; }
.muted { color: var(--muted); }
.small { font-size: 15px; }

/* Preview bar and header */
.preview-bar {
  margin: 0; padding: 6px var(--gutter); text-align: center; font-size: 14px;
  background: var(--gold); color: var(--gold-ink); font-weight: 700;
}
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 10; }
.header-row { display: flex; align-items: center; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.brand {
  font-family: var(--display); font-size: 26px; text-decoration: none; display: inline-flex;
  align-items: center; gap: 10px; margin-right: auto; white-space: nowrap;
}
.brand-tv {
  width: 30px; height: 21px; border-radius: 4px; background: var(--band);
  box-shadow: inset 0 0 0 4px var(--band), inset 0 0 0 12px var(--gold);
  position: relative;
}
:root .brand-tv { outline: 1px solid var(--line); }
.nav-wide { display: none; }
.menu { order: 3; }
.menu summary {
  list-style: none; cursor: pointer; font-weight: 700; padding: 8px 14px;
  border: 2px solid var(--ink); border-radius: 999px; min-height: 44px; display: flex; align-items: center;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--ink); color: var(--bg); }
.menu nav {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--bg);
  border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px;
}
.menu ul, .nav-wide ul { list-style: none; margin: 0; padding: 0; }
.menu li a { display: block; padding: 12px 0; font-size: 20px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu a[aria-current="page"], .nav-wide a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 4px; }
.site-header .header-cta { display: none; }
@media (min-width: 1080px) {
  .menu { display: none; }
  .nav-wide { display: block; }
  .nav-wide ul { display: flex; gap: 20px; }
  .nav-wide a { text-decoration: none; font-weight: 700; font-size: 16px; }
  .nav-wide a:hover { text-decoration: underline; }
  .site-header .header-cta { display: inline-flex; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: 18px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; font-family: var(--body); text-align: center;
}
.btn-gold, .band .btn-gold { background: var(--gold); color: var(--gold-ink); box-shadow: 0 4px 0 #b88a12; }
.btn-gold:hover { background: #ffd068; }
.btn-gold:active { transform: translateY(2px); box-shadow: 0 2px 0 #b88a12; }
.btn-line { border-color: currentColor; color: inherit; }
.btn-small { min-height: 44px; padding: 8px 16px; font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }

/* Sections */
.section { padding: 56px 0; }
.section + .section { border-top: 1px solid var(--line); }
.band { background: var(--band); color: var(--band-ink); }
.band .muted { color: var(--band-muted); }
.band a { color: var(--band-ink); }
.section.band + .section { border-top: 0; }
@media (min-width: 900px) { .section { padding: 88px 0; } }

/* Page head (inner pages) */
.page-head { padding: 40px 0 8px; }
.page-head h1 { font-size: clamp(44px, 10vw, 92px); }

/* Hero */
.hero { padding: 32px 0 56px; overflow: hidden; }
.hero h1 { max-width: 11em; }
.hero-grid { display: grid; gap: 32px; }
.hero-stage { position: relative; padding-bottom: 56px; margin-right: 8px; }
.hero-stage .phone { position: absolute; right: -4px; bottom: 0; width: 32%; max-width: 190px; }
.hero-caption { font-size: 15px; color: var(--muted); margin-top: 12px; }
@media (min-width: 960px) {
  .hero { padding: 56px 0 40px; }
  .hero-grid { grid-template-columns: 5fr 6fr; align-items: center; gap: 48px; }
  .hero h1 { font-size: clamp(64px, 7.4vw, 104px); }
  .hero-stage { margin-right: 0; padding-bottom: 72px; }
  .hero-stage .phone { right: -24px; bottom: 0; width: 30%; }
}

/* TV and phone frames */
.tv { position: relative; margin: 0; }
.tv-screen {
  border: 10px solid var(--bezel); border-bottom-width: 14px; border-radius: 12px; overflow: hidden;
  background: #04110f; box-shadow: 0 18px 40px -18px rgba(5, 25, 22, 0.55);
}
.tv-screen .screen-media { width: 100%; }
.tv::after {
  content: ""; display: block; width: 26%; height: 10px; margin: 0 auto; background: var(--bezel);
  border-radius: 0 0 8px 8px;
}
.phone {
  border: 7px solid var(--bezel); border-radius: 26px; overflow: hidden; background: #04110f;
  box-shadow: 0 16px 30px -12px rgba(5, 25, 22, 0.6); margin: 0;
}
.slot-label {
  position: absolute; left: 12px; top: 12px; background: rgba(4, 17, 15, 0.85); color: #eaf2ef;
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
}

/* The three things, set out like quiz answers */
.answers { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.answer {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px;
}
.answer h3 { margin-top: 4px; }
.answer p { margin: 0; color: var(--muted); }
.letter {
  width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--display); font-size: 32px; color: #0d1514;
}
.l-a { background: var(--coral); } .l-b { background: var(--sky); } .l-c { background: var(--gold); } .l-d { background: var(--lilac); }
.answer.a { border-color: color-mix(in srgb, var(--coral) 55%, var(--line)); }
.answer.b { border-color: color-mix(in srgb, var(--sky) 55%, var(--line)); }
.answer.c { border-color: color-mix(in srgb, var(--gold) 65%, var(--line)); }
@media (min-width: 900px) { .answers { grid-template-columns: repeat(3, 1fr); } .answer { grid-template-columns: 1fr; } }

/* Teal Farm results board */
.board { list-style: none; margin: 24px 0 8px; padding: 0; border: 1px solid var(--band-line); border-radius: 18px; overflow: hidden; }
.board li {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--band-line); background: rgba(255, 255, 255, 0.03);
}
.board li:last-child { border-bottom: 0; }
.rank {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 700;
  background: #2a5853; color: #eaf2ef;
}
.board li:first-child .rank { background: var(--gold); color: var(--gold-ink); }
.board .what { font-weight: 700; font-size: 19px; line-height: 1.3; }
.board .num { font-family: var(--display); font-size: clamp(34px, 8vw, 48px); color: var(--gold); line-height: 1; text-align: right; }
.board-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .board-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; } }
.photo { margin: 0; border-radius: var(--radius); overflow: hidden; }
.photo img { width: 100%; }
.photo figcaption { font-size: 15px; padding-top: 8px; color: inherit; opacity: 0.8; }

/* Plain lists of reasons */
.reasons { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 24px; }
.reasons li { border-left: 6px solid var(--gold); padding: 2px 0 2px 16px; }
.reasons h3 { margin-bottom: 4px; }
.reasons p { margin: 0; color: var(--muted); }
@media (min-width: 900px) { .reasons { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* Two-column split */
.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; } .split.flip > :first-child { order: 2; } }

/* Steps (a real sequence) */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 24px 0 0; display: grid; gap: 48px; }
.steps > li { counter-increment: step; display: grid; gap: 20px; }
.step-text::before {
  content: counter(step); font-family: var(--display); font-size: 64px; line-height: 1; color: var(--gold-deep);
  display: block; margin-bottom: 8px;
}
@media (min-width: 900px) { .steps > li { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; } }
.shot-pair { display: grid; grid-template-columns: 1fr 34%; gap: 14px; align-items: end; }

/* Set-up guide */
.device { border-top: 4px solid var(--ink); padding-top: 20px; margin-top: 40px; }
.device ol { padding-left: 1.3em; margin: 0 0 16px; }
.device ol li { margin-bottom: 10px; padding-left: 4px; }
.slot {
  border: 2px dashed var(--muted); border-radius: var(--radius); padding: 18px; margin: 12px 0 20px;
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--line) 45%, transparent) 14px 28px);
  font-weight: 700; color: var(--muted); font-size: 16px; min-height: 96px; display: flex; align-items: center;
}


/* Recommended kit */
.kit {
  border: 3px solid var(--ink); border-radius: var(--radius); padding: 20px 18px; margin: 32px 0 8px;
  background: var(--surface);
}
.kit h2 { font-size: clamp(30px, 6vw, 44px); }
.kit-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 18px; }
.kit-list li { border-top: 1px solid var(--line); padding-top: 14px; }
.kit-list p { margin: 0 0 8px; }
.kit-warn { border-left: 5px solid var(--coral); padding-left: 12px; font-weight: 700; }
.kit-disclosure { color: var(--muted); margin-top: 8px; }

/* Status tags */
.tag {
  display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  border: 2px solid currentColor; margin: 0 0 10px; line-height: 1.4;
}
.tag-live { color: #157a4a; }
.tag-pilot { color: #9a5b00; }
.tag-soon { color: #5b4bb0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag-live { color: #5fd69a; } :root:not([data-theme="light"]) .tag-pilot { color: #f5c04a; } :root:not([data-theme="light"]) .tag-soon { color: #c4b2ff; } }
:root[data-theme="dark"] .tag-live { color: #5fd69a; } :root[data-theme="dark"] .tag-pilot { color: #f5c04a; } :root[data-theme="dark"] .tag-soon { color: #c4b2ff; }

/* Features */
.feature { display: grid; gap: 20px; padding: 40px 0; border-top: 1px solid var(--line); }
.feature:first-of-type { border-top: 0; }
.feature ul { padding-left: 1.2em; margin: 0; }
.feature ul li { margin-bottom: 6px; }
@media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } }

/* Pricing */
.price-card {
  background: var(--band); color: var(--band-ink); border-radius: 20px; padding: 28px 22px; max-width: 560px;
}
.price { font-family: var(--display); font-size: clamp(80px, 22vw, 140px); line-height: 0.9; color: var(--gold); margin: 0; }
.price small { font-family: var(--body); font-size: 20px; color: var(--band-ink); font-weight: 700; margin-left: 6px; }
.price-card ul { padding-left: 1.2em; margin: 16px 0; }
.notice {
  border: 2px solid var(--gold-deep); background: color-mix(in srgb, var(--gold) 16%, var(--bg));
  border-radius: var(--radius); padding: 16px 18px; font-weight: 700; margin: 20px 0;
}
.band .notice, .price-card .notice { background: rgba(245, 192, 74, 0.12); border-color: var(--gold); color: var(--band-ink); }
.compare { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 17px; }
.compare th, .compare td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: 15px; color: var(--muted); }
.compare td:first-child { font-weight: 700; }
.table-wrap { overflow-x: auto; }

/* FAQ */
.faq { margin-top: 24px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; font-size: 20px; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 12px; font-family: var(--display); font-size: 30px; color: var(--gold-deep);
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer-body { padding: 0 0 18px; max-width: 40em; }

/* Forms */
.form { display: grid; gap: 20px; max-width: 620px; margin-top: 24px; }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: 6px; font-size: 18px; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: 15px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 18px; color: var(--ink);
  background: var(--surface); border: 2px solid var(--muted); border-radius: 10px;
}
.field input:focus, .field select:focus { border-color: var(--focus); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices { display: grid; gap: 10px; }
@media (min-width: 560px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: 10px;
  padding: 12px 14px; background: var(--surface); cursor: pointer; font-weight: 400 !important; min-height: 52px;
}
.choice input { width: 22px; height: 22px; accent-color: var(--band); flex: none; margin: 0; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.optin { align-items: flex-start; }
.optin input { margin-top: 3px; }
.field-error { color: #c0261b; font-weight: 700; font-size: 16px; margin-top: 6px; display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field-error { color: #ff9b91; } }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error select { border-color: #c0261b; }
.form-error { display: none; }
.form-error.show { display: block; border-color: #c0261b; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.site-footer { background: var(--band); color: var(--band-ink); padding: 40px 0 48px; margin-top: 0; }
.footer-grid { display: grid; gap: 24px; }
.footer-brand { font-family: var(--display); font-size: 30px; margin-bottom: 4px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.footer-links a { color: var(--band-ink); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Closing call to action */
.cta-band { text-align: left; }
.cta-band h2 { max-width: 14em; }

.draft-banner { border: 3px solid #c0261b; color: inherit; padding: 14px 16px; border-radius: 10px; font-weight: 700; margin-bottom: 24px; }
.prose h2 { font-size: clamp(28px, 5vw, 40px); margin-top: 1.2em; }
.prose > * { max-width: 40rem; }
.prose ul { padding-left: 1.2em; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ================= v2: selling home page ================= */
:root { --night: #0b2f2c; --night-2: #0f3d3a; --night-ink: #eef5f2; --night-muted: #a9c6c0; --night-line: #24524e; }

/* Hero: the pub at night, the TV doing the talking */
.hero { background: radial-gradient(120% 90% at 85% 10%, #145049 0%, var(--night) 55%), var(--night); color: var(--night-ink); padding: 28px 0 48px; }
.hero h1 { font-size: clamp(44px, 11.6vw, 96px); max-width: 12em; margin-bottom: 0.3em; }
.hero .lede { color: var(--night-ink); }
.hero .lede strong { color: var(--gold); }
.hero .btn-line { color: var(--night-ink); }
.hero-by { color: var(--night-muted); font-size: 16px; margin: 18px 0 0; }
.hero-caption { color: var(--night-muted); }
.hero .tv-screen { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.hero .tv-screen video { aspect-ratio: 1280 / 600; background: #04110f; }
@media (min-width: 960px) {
  .hero { padding: 56px 0 72px; }
  .hero-grid { grid-template-columns: 5fr 6fr; }
  .hero h1 { font-size: clamp(60px, 6.4vw, 92px); }
}

/* Proof strip: the real numbers, scoreboard style */
.proof { background: var(--gold); color: var(--gold-ink); padding: 22px 0 18px; }
.proof-title { font-family: var(--body); font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 10px; letter-spacing: 0; }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.proof-list li { display: flex; align-items: baseline; gap: 10px; font-weight: 700; line-height: 1.2; font-size: 16px; }
.proof-list .num { font-family: var(--display); font-size: 44px; line-height: 1; min-width: 1.4em; }
.proof-note { margin: 12px 0 0; font-size: 15px; max-width: 46em; }
@media (min-width: 900px) { .proof-list { grid-template-columns: repeat(4, 1fr); } .proof-list .num { font-size: 56px; } }

/* A night at Teal Farm: a TV-guide listing, the one bold moment */
.night-head { max-width: 40rem; }
.timeline { list-style: none; margin: 32px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; background: var(--line); border-radius: 2px; }
.timeline li { position: relative; padding: 0 0 28px 36px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 8px; width: 17px; height: 17px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink); }
.timeline li.gold::before { background: var(--gold); border-color: var(--gold-deep); }
.timeline .time { font-family: var(--display); font-size: 30px; line-height: 1; margin: 0 0 6px; color: var(--ink); }
.timeline li.gold .time { color: var(--gold-deep); }
.timeline h3 { margin-bottom: 4px; }
.timeline li p:not(.time) { margin: 0; color: var(--muted); max-width: 36em; }
@media (min-width: 900px) {
  .timeline::before { left: 207px; }
  .timeline li { display: grid; grid-template-columns: 180px 1fr; gap: 56px; padding-left: 0; padding-bottom: 32px; }
  .timeline li::before { left: 200px; }
  .timeline .time { text-align: right; font-size: 40px; }
}
.night-foot { margin-top: 8px; }

/* Benefits */
.benefits { display: grid; gap: 28px; margin-top: 28px; }
.benefit .letter { margin-bottom: 14px; }
.benefit p { color: var(--muted); margin: 0; }
@media (min-width: 760px) { .benefits { grid-template-columns: 1fr 1fr; gap: 40px 48px; } }
@media (min-width: 1100px) { .benefits { grid-template-columns: repeat(4, 1fr); } }
.more-link { margin: 28px 0 0; font-weight: 700; }

/* From the landlord */
.landlord-grid { display: grid; gap: 28px; }
.landlord-text h2 { margin-bottom: 0.5em; }
.story p { font-size: 20px; line-height: 1.6; max-width: 34em; }
.sign { font-family: var(--display); font-size: 34px; color: var(--gold); margin: 8px 0 0; line-height: 1; }
.sign span { display: block; font-family: var(--body); font-size: 15px; color: var(--band-muted); margin-top: 8px; }
@media (min-width: 900px) { .landlord-grid { grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; } }

/* Worries */
.worries { margin: 24px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.worries > div { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.worries dt { font-weight: 700; font-size: 21px; }
.worries dd { margin: 0; color: var(--muted); max-width: 40em; }
@media (min-width: 900px) { .worries { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.planned { display: inline-block; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--gold) 30%, transparent); padding: 0 6px; border-radius: 4px; }
.band .planned { color: var(--band-ink); }

/* Honest comparison */
.compare-cols { display: grid; gap: 14px; margin-top: 24px; }
.compare-cols .col { border: 2px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--surface); }
.compare-cols .col.ours { border-color: var(--ink); box-shadow: inset 0 6px 0 var(--gold); }
.compare-cols h3 { margin-bottom: 6px; }
.col-price { font-family: var(--display); font-size: 34px; line-height: 1.05; margin: 0 0 10px; }
.col-price small { font-family: var(--body); font-size: 17px; font-weight: 700; }
.compare-cols .col p:last-child { margin: 0; color: var(--muted); }
@media (min-width: 900px) { .compare-cols { grid-template-columns: 1.15fr 1fr 1fr; } }

/* Founding pubs + set-up offer */
.founding-grid { display: grid; gap: 28px; }
.setup-offer { border: 2px solid var(--gold); border-radius: var(--radius); padding: 22px 20px; }
.setup-offer h3 { font-size: 22px; }
.setup-price { font-family: var(--display); font-size: 52px; line-height: 1; color: var(--gold); margin: 6px 0 12px; }
.setup-price span { font-family: var(--body); font-size: 17px; color: var(--band-ink); font-weight: 700; }
.setup-offer p:last-child { margin: 0; color: var(--band-muted); }
@media (min-width: 900px) { .founding-grid { grid-template-columns: 3fr 2fr; gap: 64px; align-items: center; } }

/* Sticky phone call to action */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--night); color: var(--night-ink);
  border-top: 2px solid var(--gold); transition: transform 0.25s ease;
}
.sticky-cta.away { transform: translateY(110%); }
.sticky-cta p { margin: 0; line-height: 1.2; display: grid; font-size: 15px; }
.sticky-cta strong { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--gold); }
.sticky-cta .btn { white-space: nowrap; }
body { padding-bottom: 76px; }
@media (min-width: 900px) { .sticky-cta { display: none; } body { padding-bottom: 0; } }
body.no-sticky .sticky-cta { display: none; }
body.no-sticky { padding-bottom: 0; }

/* ================= Blog ================= */
.crumb { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--muted); }
.crumb a { color: inherit; }
.cat-nav ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 2px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 16px; }
.cat-nav a:hover { border-color: var(--ink); }
.cat-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
@media (min-width: 760px) { .post-list { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (min-width: 1100px) { .post-list { grid-template-columns: repeat(3, 1fr); } .post-list-2 { grid-template-columns: 1fr 1fr; } }
.post-card { display: grid; gap: 14px; align-content: start; }
.post-card-img { display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.post-card-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card h2, .post-card h3 { font-family: var(--body); font-weight: 700; font-size: 22px; line-height: 1.25; margin: 0 0 6px; letter-spacing: 0; }
.post-card h2 a, .post-card h3 a { text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.post-card p { margin: 0; color: var(--muted); font-size: 17px; }
.post-card .post-meta { font-size: 15px; margin-bottom: 6px; }
.post-meta { color: var(--muted); font-size: 16px; }
.post-meta a { color: inherit; font-weight: 700; }
.feed-links { margin-top: 32px; }
.more-title { font-size: clamp(30px, 5vw, 44px); }

/* A post */
.post-head { padding-top: 36px; max-width: calc(44rem + 2 * var(--gutter)); }
.post-head h1 { font-size: clamp(40px, 8.5vw, 72px); }
.post-head .lede { color: var(--muted); }
.post-hero { margin: 8px auto 0; max-width: calc(56rem + 2 * var(--gutter)); }
.post-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.post-hero figcaption { font-size: 15px; color: var(--muted); padding-top: 8px; }
.post-body { max-width: calc(44rem + 2 * var(--gutter)); padding-top: 28px; padding-bottom: 24px; font-size: 19px; line-height: 1.65; }
.post-body > * { max-width: none; }
.post-body h2 { font-size: clamp(30px, 5.4vw, 40px); margin: 1.4em 0 0.4em; }
.post-body h3 { margin-top: 1.4em; }
.post-body ul, .post-body ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.post-body li { margin-bottom: 0.45em; }
.post-body a { text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.post-body a:hover { text-decoration-color: var(--gold); }
.post-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 6px solid var(--gold); font-size: 21px; }
.post-body blockquote p { margin: 0; }
.takeaway { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px 20px; margin: 1.6em 0; box-shadow: 6px 6px 0 var(--gold); }
.takeaway p { margin: 0; }
.post-cta { border-top: 4px solid var(--gold); margin: 2em 0 0; padding-top: 16px; font-weight: 700; }
.post-cta p { margin: 0; }
.sources { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.sources h2 { font-family: var(--body); font-weight: 700; font-size: 20px; letter-spacing: 0; margin: 16px 0 10px; }
.sources ul { padding-left: 1.2em; }
.sources a { word-break: break-word; }

/* Features v2 */
.feature-phone { max-width: 280px; justify-self: center; }
.feature figcaption { padding-top: 8px; }
.coming-grid { display: grid; gap: 28px; margin-top: 24px; }
.coming-grid > div { border-top: 3px solid var(--line); padding-top: 16px; }
.coming-grid p, .coming-grid ul { color: var(--muted); margin: 0; }
.coming-grid ul { padding-left: 1.2em; }
@media (min-width: 900px) { .coming-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.tag-not { color: #a3322a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag-not { color: #ff9b91; } }
:root[data-theme="dark"] .tag-not { color: #ff9b91; }
.price-extra { border-top: 1px solid var(--band-line); margin-top: 18px; padding-top: 16px; }

.h3-like { font-family: var(--body); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: 0; margin: 0 0 0.4em; }
.pricing-split { align-items: start; }

/* v2.1 fixes after the screenshot review */
.hero-grid { grid-template-areas: "title" "media" "copy"; gap: 22px; }
.hero-title { grid-area: title; margin: 0; }
.hero-media { grid-area: media; }
.hero-copy { grid-area: copy; }
.hero-caption { margin-top: 8px; font-size: 14px; }
.hero h1 { font-size: clamp(42px, 11vw, 84px); }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1fr 1.15fr; grid-template-areas: "title media" "copy media"; column-gap: 56px; row-gap: 20px; align-items: end; }
  .hero-copy { align-self: start; }
  .hero h1 { font-size: clamp(56px, 5.4vw, 84px); }
}
.setup-price span { display: block; margin-top: 6px; }
body.home .sticky-cta:not(.show) { transform: translateY(110%); }
.night-grid { display: grid; gap: 32px; }
.night-aside { display: none; }
@media (min-width: 1100px) {
  .night-grid { grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
  .night-aside { display: block; position: sticky; top: 32px; padding-top: 40px; }
  .night-aside .night-phone { width: 38%; margin: -90px 0 0 auto; position: relative; }
  .night-aside p { margin-top: 12px; }
}


/* ================= v3: match days, run it from your phone, no repeated pictures ================= */
picture { display: block; }
.tag-tf { color: #0a6a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag-tf { color: #7fd6ea; } }
:root[data-theme="dark"] .tag-tf { color: #7fd6ea; }
.tag-inline { font-size: 12px; padding: 1px 8px; margin: 0 0 0 4px; vertical-align: 2px; white-space: normal; }
.feature-video { width: 100%; aspect-ratio: 16 / 9; background: #04110f; display: block; object-fit: cover; }

/* Match day: the one moving piece on the page */
.matchday {
  background: radial-gradient(110% 80% at 15% 0%, #165a52 0%, var(--night) 60%), var(--night);
  color: var(--night-ink); padding: 56px 0 64px;
}
.matchday .tag-tf { color: #7fd6ea; }
.md-head { max-width: 42rem; }
.md-head .lede { color: var(--night-ink); }
.md-grid { display: grid; gap: 20px; margin-top: 28px; }
.md-tv-wrap {
  position: sticky; top: 0; z-index: 2; background: var(--night);
  margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 6px;
}
.mtv figcaption { font-size: 13px; color: var(--night-muted); text-align: center; margin-top: 2px; }
.mtv .tv-screen { border-width: 8px; border-bottom-width: 11px; }
.mtv::after { height: 6px; }
.md-steps { list-style: none; margin: 0; padding: 0; }
.md-steps li { padding: 16px 0 16px 18px; border-left: 3px solid var(--night-line); transition: opacity 0.3s, border-color 0.3s; cursor: pointer; }
.js .md-steps li { opacity: 0.72; }
.js .md-steps li.is-on { opacity: 1; border-left-color: var(--gold); }
.md-steps .time { font-family: var(--display); font-size: 26px; line-height: 1; color: var(--gold); margin: 0 0 6px; }
.md-steps h3 { color: #fff; margin-bottom: 4px; }
.md-steps li p:not(.time) { color: var(--night-muted); margin: 0; max-width: 34em; }
.md-foot { color: var(--night-muted); margin: 24px 0 0; max-width: 44em; }
@media (min-width: 900px) {
  .matchday { padding: 88px 0; }
  .md-grid { grid-template-columns: 1.45fr 1fr; gap: 56px; align-items: start; }
  .md-tv-wrap { top: max(28px, calc(50vh - 230px)); margin: 0; padding: 0; background: none; }
  .md-steps li { padding: 22px 0 22px 24px; }
  .md-steps .time { font-size: 30px; }
}
@media (max-width: 899px) and (max-height: 700px) { .md-tv-wrap { position: static; } }

/* The drawing of a TV: everything sized from the screen's own width */
.mtv-screen { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: #06201d; color: #fff; font-family: var(--body); }
.mtv-screen p { margin: 0; }
.mtv-clip { position: absolute; inset: 0; background: linear-gradient(120deg, #1d6a60, #123a5c 40%, #4a3576 70%, #1d6a60); background-size: 300% 300%; animation: clipdrift 16s ease-in-out infinite alternate; }
.mtv-clip span { position: absolute; left: 3cqw; top: 3cqw; font-size: 2.4cqw; background: rgba(0, 0, 0, 0.35); padding: 0.5cqw 1.4cqw; border-radius: 99px; opacity: 0; transition: opacity 0.35s; }
[data-state="bar"] .mtv-clip span, [data-state="mc"] .mtv-clip span { opacity: 1; }
.mtv-clip::before, .mtv-clip::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2cqw); opacity: 0.55; }
.mtv-clip::before { width: 34cqw; height: 34cqw; left: 12%; top: 18%; background: #3fb39f; animation: blob 11s ease-in-out infinite alternate; }
.mtv-clip::after { width: 26cqw; height: 26cqw; left: 46%; top: 6%; background: #f5c04a; opacity: 0.35; animation: blob 13s ease-in-out infinite alternate-reverse; }
@keyframes blob { from { transform: translate(0, 0); } to { transform: translate(12cqw, 6cqw); } }
@keyframes clipdrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.mtv-card { position: absolute; inset: 9% 9% 17%; border-radius: 2cqw; display: grid; place-content: center; text-align: center; padding: 3cqw; background: rgba(4, 17, 15, 0.9); opacity: 0; transform: scale(0.96); transition: opacity 0.35s, transform 0.35s; }
.mtv-kicker { font-size: 2.6cqw; font-weight: 700; color: var(--gold); margin-bottom: 1.2cqw !important; }
.mtv-big { font-family: var(--display); font-size: 8.6cqw; line-height: 1; }
.mtv-score { font-family: var(--display); font-size: 5.6cqw; line-height: 1.1; margin-top: 1cqw !important; }
.mtv-small { font-size: 2.6cqw; opacity: 0.85; margin-top: 1cqw !important; }
.mtv-list { place-content: center stretch; text-align: left; }
.mtv-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2cqw; }
.mtv-list li { display: grid; grid-template-columns: 9cqw 1fr auto; gap: 2cqw; align-items: center; font-size: 3.2cqw; padding: 1.1cqw 1.6cqw; border-radius: 1.2cqw; background: rgba(255, 255, 255, 0.06); }
.mtv-list li b { font-family: var(--display); font-weight: 400; color: var(--gold); }
.mtv-list li.ours { background: var(--gold); color: var(--gold-ink); }
.mtv-list li.ours b { color: var(--gold-ink); }
.mtv-list em { font-style: normal; font-size: 2.2cqw; font-weight: 700; background: var(--gold-ink); color: var(--gold); padding: 0.4cqw 1.2cqw; border-radius: 99px; }
.mtv-goal { background: radial-gradient(circle at 50% 40%, #ffd463 0%, #e0a82a 50%, #5a3d06 100%); color: #1a1200; }
.mtv-goal .mtv-big { font-size: 17cqw; }
.mtv-ft { border: 0.6cqw solid var(--gold); }
.mtv-wheel { grid-auto-flow: column; gap: 4cqw; align-items: center; text-align: left; }
.mtv-wheel-disc {
  width: 24cqw; aspect-ratio: 1; border-radius: 50%; border: 0.8cqw solid #fff;
  background: conic-gradient(var(--gold) 0 45deg, var(--coral) 0 90deg, var(--sky) 0 135deg, var(--lilac) 0 180deg, var(--gold) 0 225deg, var(--coral) 0 270deg, var(--sky) 0 315deg, var(--lilac) 0 360deg);
  transition: transform 2.6s cubic-bezier(0.12, 0.72, 0.12, 1);
}
.mtv-mc { position: absolute; right: 3%; top: 7%; bottom: 7%; width: 42%; border-radius: 1.6cqw; padding: 2.6cqw; background: rgba(4, 17, 15, 0.94); opacity: 0; transform: translateX(6%); transition: opacity 0.35s, transform 0.35s; }
.mtv-mc dl { margin: 2cqw 0 0; display: grid; gap: 1cqw; }
.mtv-mc dl div { display: flex; justify-content: space-between; font-size: 2.6cqw; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 1cqw; }
.mtv-mc dd { margin: 0; font-weight: 700; }
.mtv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; display: flex; gap: 4cqw; align-items: center; padding: 0 3cqw; background: #04110f; border-top: 0.5cqw solid var(--gold); font-size: 2.7cqw; font-weight: 700; white-space: nowrap; overflow: hidden; transform: translateY(100%); transition: transform 0.35s; }
.mtv-bar span:first-child { color: var(--gold); }
[data-state="list"] .mtv-list, [data-state="count"] .mtv-count, [data-state="goal"] .mtv-goal,
[data-state="wheel"] .mtv-wheel, [data-state="ft"] .mtv-ft { opacity: 1; transform: none; }
[data-state="mc"] .mtv-mc { opacity: 1; transform: none; }
[data-state="bar"] .mtv-bar, [data-state="goal"] .mtv-bar, [data-state="wheel"] .mtv-bar, [data-state="ft"] .mtv-bar { transform: none; }
[data-state="wheel"] .mtv-wheel-disc { transform: rotate(1125deg); }

/* A night at Teal Farm: photo with the phone tucked over it */
.night-photo img { border-radius: var(--radius); }
@media (max-width: 1099px) {
  .night-aside { display: block; max-width: 420px; margin: 8px auto 0; }
  .night-aside .night-phone { width: 36%; margin: -110px 8px 0 auto; position: relative; }
  .night-aside p { margin-top: 10px; }
}

/* Run the lot from your phone */
.easy-grid { display: grid; gap: 32px; }
.easy-list { list-style: none; padding: 0; margin: 20px 0 16px; display: grid; gap: 12px; }
.easy-list li { position: relative; padding-left: 34px; max-width: 36em; }
.easy-list li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 20px; height: 20px; border-radius: 6px; background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold-deep); }
.easy-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.easy-phone { max-width: 240px; justify-self: center; }
.easy-slot { min-height: 320px; margin: 0; font-size: 15px; }
.easy-cap { grid-column: 1 / -1; margin: 0; }
@media (min-width: 900px) { .easy-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; } }

/* Features page */
.legend { display: grid; gap: 12px; margin: 24px 0 0; }
.legend div { display: grid; gap: 2px; }
.legend dt .tag { margin: 0; }
.legend dd { margin: 0; color: var(--muted); font-size: 16px; }
.jump ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 16px; }
.group-title { font-size: clamp(40px, 9vw, 72px); margin-bottom: 4px; }
.feature h3 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5.6vw, 44px); line-height: 1.02; margin-bottom: 12px; text-wrap: balance; }
.feature .photo { max-width: 440px; width: 100%; justify-self: center; }
.feature .tv { width: 100%; }
.feature.feature-text { display: block; max-width: 44rem; }
.feature > .slot { min-height: 220px; }
.channel-list { list-style: none !important; padding: 0 !important; margin: 14px 0 16px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.channel-list li { border: 2px solid var(--line); border-radius: 10px; padding: 6px 12px; font-size: 15px; color: var(--muted); margin: 0 !important; }
.channel-list li b { display: block; color: var(--ink); font-size: 17px; }

/* Blog cards: text only (each post's picture is shown once, on the post) */
.post-card { border-top: 6px solid var(--gold); padding-top: 14px; }
.post-card-quiz-nights { border-top-color: var(--coral); }
.post-card-pub-tvs { border-top-color: var(--sky); }
.post-card-rules-and-licences { border-top-color: var(--lilac); }
.post-hero picture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }

.join-photo { max-width: 420px; margin-top: 40px; }
.page-head .photo { max-width: 420px; }
.feature .photo img { aspect-ratio: 4 / 3; object-fit: cover; }
#wheel .photo img { object-position: 50% 45%; }
@media (min-width: 900px) { .feature .photo { max-width: 520px; } }


/* ================= v4: the sales page, the 18 videos, set up in 15 minutes ================= */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font-size: 0.92em; background: color-mix(in srgb, var(--line) 60%, transparent); padding: 1px 6px; border-radius: 5px; }

/* Video: a still with a play button until it's on screen or tapped. Wide on 700px+, tall on phones. */
.clip { margin: 0; }
.clip-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #15112a;
  box-shadow: 0 22px 44px -26px rgba(4, 14, 13, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.clip-video, .clip-poster, .clip-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-video { background: #15112a; }
.clip-poster { transition: opacity 0.3s; }
.clip.is-playing .clip-poster { opacity: 0; pointer-events: none; }
.clip-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: grid; justify-items: center; gap: 8px; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--gold-ink); font: inherit;
}
.clip-btn svg { width: 76px; height: 76px; padding: 20px 18px 20px 24px; border-radius: 50%; background: var(--gold); fill: var(--gold-ink); box-shadow: 0 6px 0 #b88a12, 0 12px 30px rgba(0, 0, 0, 0.45); }
.clip-btn:hover svg { background: #ffd068; }
.clip-btn:focus-visible { outline: none; }
.clip-btn:focus-visible svg { outline: 3px solid #fff; outline-offset: 4px; }
.clip-len { font-size: 14px; font-weight: 700; color: #fff; background: rgba(4, 10, 20, 0.78); padding: 2px 10px; border-radius: 99px; }
.clip.is-playing .clip-btn, .clip.is-loading .clip-btn { opacity: 0; pointer-events: none; }
.clip figcaption { font-size: 15px; color: var(--muted); margin-top: 10px; }
@media (max-width: 699px) {
  .clip-frame { aspect-ratio: 9 / 16; width: min(100%, 330px); margin: 0 auto; border-radius: 22px; }
  .clip figcaption { text-align: center; }
}

/* Hero */
.hero-v4 { padding: 28px 0 44px; }
.hero4-grid { display: grid; gap: 28px; }
.hero-v4 .hero4-title { font-size: clamp(46px, 12.6vw, 104px); line-height: 0.95; max-width: 9.5em; margin: 0 0 0.3em; }
.hero-v4 .lede { max-width: 30em; }
.hero4-price { font-size: 19px; margin: 0 0 14px; color: var(--night-ink); }
.hero4-price strong { color: var(--gold); }
.hero-v4 .hero-by { margin-top: 16px; }
.hero4-media .clip-frame { box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hero4-media .hero-caption { color: var(--night-muted); margin-top: 12px; font-size: 14px; max-width: 46em; }
@media (max-width: 699px) {
  .hero4-media .clip-frame { width: min(100%, 300px); }
  .hero4-media .hero-caption { text-align: center; }
}
@media (min-width: 960px) {
  .hero-v4 { padding: 64px 0 72px; }
  .hero4-grid { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
  .hero-v4 .hero4-title { font-size: clamp(64px, 6.6vw, 100px); }
}

/* Problems, set out like quiz answers */
.problem-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.problem-list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px; }
.problem-list h3 { margin: 4px 0 4px; }
.problem-list p { margin: 0; color: var(--muted); }
.problem-answer { font-family: var(--display); font-size: clamp(26px, 4.4vw, 38px); line-height: 1.08; margin: 28px 0 0; max-width: 22em; text-wrap: balance; }
@media (min-width: 900px) { .problem-list { grid-template-columns: 1fr 1fr; gap: 16px 20px; } }

/* What you get: one row per feature */
.f4-head { max-width: 44rem; }
.f4-group {
  font-family: var(--display); font-weight: 400; font-size: clamp(32px, 6vw, 52px); line-height: 1; margin: 56px 0 0;
  padding-top: 18px; border-top: 4px solid var(--ink); scroll-margin-top: 16px;
}
.f4 { display: grid; gap: 22px; padding: 36px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.f4:last-child { border-bottom: 0; }
.f4 h4 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 7vw, 44px); line-height: 1.02; margin: 0 0 14px; text-wrap: balance; }
.f4-text p { max-width: 34em; }
.f4-text p:last-child { margin-bottom: 0; }
.f4-note { border-left: 5px solid var(--gold); padding-left: 14px; font-size: 16px; color: var(--muted); }
.f4-link { font-weight: 700; }
@media (min-width: 900px) {
  .f4 { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: 48px 0; }
  .f4:nth-of-type(even) { grid-template-columns: 7fr 5fr; }
  .f4:nth-of-type(even) .f4-text { order: 2; }
}
@media (max-width: 699px) { .f4 .clip-frame { width: min(100%, 290px); } }

/* Price block */
.price-block { display: grid; gap: 18px; margin-top: 24px; }
.pb-main { background: var(--night); color: var(--night-ink); border-radius: 22px; padding: 28px 22px; }
.pb-price { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pb-num { font-family: var(--display); font-size: clamp(96px, 26vw, 168px); line-height: 0.85; color: var(--gold); }
.pb-per { font-size: 21px; font-weight: 700; max-width: 12em; line-height: 1.3; }
.pb-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.pb-list li { position: relative; padding-left: 32px; font-size: 18px; }
.pb-list li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 18px; height: 10px; border-left: 4px solid var(--gold); border-bottom: 4px solid var(--gold); transform: rotate(-45deg); }
.pb-main .planned { color: var(--night-ink); }
.pb-main .btn-line { color: var(--night-ink); }
.pb-setup { border: 3px solid var(--ink); border-radius: 22px; padding: 24px 22px; background: var(--surface); align-self: start; }
.pb-setup h3 { font-size: 24px; }
.pb-setup-price { font-family: var(--display); font-size: 60px; line-height: 1; margin: 8px 0 12px; }
.pb-setup-price span { display: block; font-family: var(--body); font-size: 17px; font-weight: 700; margin-top: 6px; }
.pb-setup p:last-child { margin: 0; color: var(--muted); }
@media (min-width: 900px) { .price-block { grid-template-columns: 7fr 4fr; gap: 24px; } .pb-main { padding: 40px 40px 36px; } }

/* Honest comparison */
.compare4 { max-width: 760px; }
.compare4 th[scope="row"] { font-weight: 700; text-align: left; padding-right: 16px; }
.compare4 td { white-space: nowrap; font-weight: 700; }
.compare4 tr.ours th, .compare4 tr.ours td { background: color-mix(in srgb, var(--gold) 22%, transparent); border-bottom: 0; }
.compare4 tr.ours th { border-left: 6px solid var(--gold); padding-left: 12px; }
@media (max-width: 560px) { .compare4 td { white-space: normal; } }
.tick-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 30px; }
.tick-list li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 14px; height: 8px; border-left: 3px solid var(--gold-deep); border-bottom: 3px solid var(--gold-deep); transform: rotate(-45deg); }
.price-section .notice { max-width: 760px; }

/* Home FAQ and final call to action */
.faq-group { font-size: clamp(30px, 5vw, 40px); margin: 40px 0 0; }
.final-cta .cta-mail { margin-top: 16px; }
.final-cta .cta-mail a { color: var(--band-ink); }

/* Features index */
.fi-list { display: grid; gap: 0; margin: 20px 0 0; border-top: 1px solid var(--line); }
.fi-list > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.fi-list dt { font-weight: 700; font-size: 21px; margin-bottom: 4px; }
.fi-list dd { margin: 0; color: var(--muted); max-width: 40em; }
.fi-list dd a { color: var(--ink); font-weight: 700; white-space: nowrap; }
@media (min-width: 900px) { .fi-list { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.feature-index + .feature-index { border-top: 0; padding-top: 8px; }

/* Set up in 15 minutes */
.setup-head-grid { display: grid; gap: 28px; }
.setup-head .clip { max-width: 640px; }
@media (min-width: 960px) { .setup-head-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } }
.setup-list { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 0; }
.setup-step { counter-increment: s; position: relative; padding: 28px 0 28px 64px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.setup-step::before {
  content: counter(s); position: absolute; left: 0; top: 24px; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-family: var(--display); font-size: 28px; background: var(--gold); color: var(--gold-ink);
}
.setup-step h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 5vw, 40px); line-height: 1.05; margin: 4px 0 10px; }
.setup-step-text p { max-width: 40em; }
.setup-step-wide .clip { margin: 8px 0 24px; max-width: 760px; }
.device-grid { display: grid; gap: 16px; margin-top: 8px; }
.device4 { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px 18px 8px; }
.device4 h4 { font-size: 21px; margin: 0 0 10px; }
.device4 ol { padding-left: 1.3em; margin: 0 0 12px; }
.device4 li { margin-bottom: 8px; }
@media (min-width: 1000px) { .device-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .setup-step { padding-left: 0; padding-top: 80px; } .setup-step::before { top: 24px; } }
.kit h4 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 5vw, 38px); line-height: 1; margin: 0 0 8px; }
.kit h5 { font-size: 19px; margin: 0 0 6px; }
.setup-allday-grid { display: grid; gap: 28px; }
.setup-allday ul { padding-left: 1.2em; }
.setup-allday li { margin-bottom: 10px; max-width: 40em; }
.setup-allday h3 { margin-top: 24px; }
@media (min-width: 960px) { .setup-allday-grid { grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; } .setup-allday .clip { position: sticky; top: 24px; } }

.shot-single { max-width: 300px; justify-self: center; }

/* v6: the demo section */
.demo-section .lede a { font-weight:700; }
@media (min-width: 1100px) { .demo-page .demo-stage { grid-template-columns: 1fr minmax(200px, 24%); } }

/* v7: /hello/ outreach page */
.hello-hero .hello-title { font-size: clamp(36px, 8.6vw, 72px); max-width: 15em; }
.hello-grid { display: grid; gap: 32px; margin-top: 24px; }
.hello-grid h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 36px); line-height: 1.05; margin: 0 0 8px; }
.hello-grid p { color: var(--muted); max-width: 30em; }
@media (min-width: 900px) { .hello-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; } }
.real-box { border: 3px solid var(--ink); border-radius: var(--radius); padding: 24px 22px; max-width: 760px; background: var(--surface); box-shadow: 8px 8px 0 var(--gold); }
.real-box ul { padding-left: 1.2em; margin: 0; } .real-box li { margin-bottom: 8px; }
.real-box a { font-weight: 700; word-break: break-word; }

/* v8: press strip, press list, About Shaun */
.press-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; }
.press-strip-title { font-family: var(--body); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.press-outlets { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 16px; font-family: var(--display); font-size: clamp(22px, 3vw, 30px); line-height: 1.1; }
.press-strip-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .press-strip-list { grid-template-columns: 1fr 1fr; gap: 14px 40px; } }
.press-strip-list li { min-width: 0; overflow-wrap: anywhere; }
.press-strip-list a { font-weight: 700; }
.press-strip-list .press-outlet { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
.press-meta { display: block; font-size: 14px; color: var(--muted); margin: 2px 0 0; }
.press-more { margin: 16px 0 0; }
.press-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 20px; }
.press-list li { border-left: 4px solid var(--gold); padding-left: 16px; min-width: 0; overflow-wrap: anywhere; }
.press-list .press-outlet { margin: 0; font-size: 14px; color: var(--muted); }
.press-list h3 { margin: 4px 0; font-size: 20px; line-height: 1.3; }
.about-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px) { .about-grid { grid-template-columns: 240px 1fr; gap: 40px; } }
.about-photo { margin: 0; max-width: 240px; }
.about-photo img { display: block; width: 100%; height: auto; border-radius: 50%; border: 4px solid var(--gold); }
body.welcome .sticky-cta { display: none !important; }

/* "See it working": the speeded-up demo of a pub TV and a phone. Colours and type copied from the StockTap TV app
   (stocktap-play src/pages/tv.html + phone.html): deep teal background, Anton headings, gold, A/B/C/D answer colours. */
.demo { --d-bg:#03100f; --d-bg2:#062625; --d-teal:#0f8b8d; --d-teal-hi:#22c3c3; --d-mint:#5eead4; --d-gold:#f5c542; --d-ink:#f2fbfa; --d-mute:#8fb5b2;
  --d-A:#ff6b6b; --d-B:#4dabf7; --d-C:#fcc419; --d-D:#b197fc; --d-green:#22c55e; --d-head:"Anton","Impact","Arial Narrow",sans-serif;
  --d-body:"Inter","Helvetica Neue",Arial,system-ui,sans-serif; }
.demo-chips { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.demo-chips button { font:inherit; font-size:15px; font-weight:700; min-height:44px; padding:6px 14px; border-radius:999px; border:2px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; }
.demo-chips button[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.demo-stage { display:grid; gap:18px; align-items:center; position:relative; }
@media (min-width:760px) { .demo-stage { grid-template-columns: 1fr minmax(170px, 23%); gap:28px; } }
.demo-badge { position:absolute; z-index:5; left:10px; top:10px; font:700 13px/1 var(--body); background:var(--gold); color:var(--gold-ink); padding:5px 10px; border-radius:99px; }
.demo-tvwrap { position:relative; }
.demo-tv { container-type:inline-size; position:relative; aspect-ratio:16/9; border:9px solid #0b0f0f; border-bottom-width:13px; border-radius:12px; overflow:hidden;
  background:radial-gradient(60% 70% at 15% 10%,#0b3b3a 0%,transparent 60%),radial-gradient(55% 60% at 95% 100%,#0a2f3d 0%,transparent 60%),linear-gradient(160deg,var(--d-bg2),var(--d-bg) 60%);
  color:var(--d-ink); font-family:var(--d-body); box-shadow:0 24px 50px -24px rgba(0,0,0,.6); }
.demo-tvwrap::after { content:""; display:block; width:24%; height:9px; margin:0 auto; background:#0b0f0f; border-radius:0 0 8px 8px; }
.demo-phone { container-type:inline-size; position:relative; aspect-ratio:9/16; width:min(100%, 250px); justify-self:center; border:7px solid #0b0f0f; border-radius:28px; overflow:hidden;
  background:linear-gradient(170deg,#0a2a29,#041514 70%); color:var(--d-ink); font-family:var(--d-body); box-shadow:0 20px 40px -18px rgba(0,0,0,.65); }
@media (max-width:759px) { .demo-phone { width:min(62%, 240px); } }
.demo-tv *, .demo-phone * { box-sizing:border-box; }
.demo p { margin:0; }
.demo-cap { margin:20px 0 0; min-height:2.7em; font-weight:700; font-size:18px; }
.demo-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px; }
.demo-controls button { font:inherit; font-weight:700; font-size:16px; min-height:44px; padding:6px 16px; border-radius:10px; border:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; }
.demo-bar { flex:1 1 140px; height:6px; border-radius:6px; background:var(--line); overflow:hidden; min-width:100px; }
.demo-bar i { display:block; height:100%; width:0; background:var(--gold-deep); }
.demo-note { margin-top:10px; }
.demo.paused * { animation-play-state:paused !important; }
.demo.paused .d-in { animation:none !important; } /* never leave a fading-in screen half see-through while paused */

/* ---------- inside the TV (sizes in cqw so it scales with the frame) ---------- */
.tvx { position:absolute; inset:0; padding:4cqw 4.5cqw; display:flex; flex-direction:column; }
.tv-top { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:1.9cqw; color:var(--d-mute); letter-spacing:.3cqw; text-transform:uppercase; }
.tv-top b { font-family:var(--d-head); font-weight:400; font-size:2.8cqw; color:var(--d-ink); letter-spacing:.15cqw; }
.tv-top b em { font-style:normal; color:var(--d-gold); }
.tv-pill { font-size:1.6cqw; letter-spacing:0; text-transform:none; padding:.6cqw 1.4cqw; border-radius:99px; background:rgba(255,255,255,.08); color:var(--d-ink); }
.tv-pill.replay { background:#7c3aed; color:#fff; }
.tv-mid { flex:1; display:flex; flex-direction:column; justify-content:center; }
.tv-kick { font-weight:800; font-size:1.8cqw; letter-spacing:.5cqw; text-transform:uppercase; color:var(--d-mint); }
.tv-big { font-family:var(--d-head); font-size:7cqw; line-height:.95; text-transform:uppercase; margin:1cqw 0 1.5cqw; }
.tv-big em { font-style:normal; color:var(--d-gold); }
.tv-q { font-weight:800; font-size:3.4cqw; line-height:1.15; text-align:center; margin:0 4cqw 2.4cqw; }
.tv-opts { display:grid; grid-template-columns:1fr 1fr; gap:1.4cqw; }
.tv-opt { display:flex; align-items:center; gap:1.4cqw; padding:1.3cqw 1.6cqw; border-radius:1.6cqw; background:rgba(255,255,255,.07); border:.25cqw solid rgba(255,255,255,.08); font-weight:800; font-size:2.3cqw; transition:opacity .4s, background .4s, transform .4s; }
.tv-opt i, .ph-opt i { font-style:normal; flex:none; display:grid; place-items:center; border-radius:.9em; color:#111; font-weight:900; }
.tv-opt i { width:3.6cqw; height:3.6cqw; font-size:2cqw; }
.o-A i { background:var(--d-A); } .o-B i { background:var(--d-B); } .o-C i { background:var(--d-C); } .o-D i { background:var(--d-D); }
.tv-opt.dim { opacity:.3; } .tv-opt.right { background:rgba(34,197,94,.25); border-color:var(--d-green); transform:scale(1.03); }
.tv-timer { height:.9cqw; border-radius:1cqw; background:rgba(255,255,255,.1); overflow:hidden; margin-top:2cqw; }
.tv-timer i { display:block; height:100%; background:linear-gradient(90deg,var(--d-gold),#ff8a3d); width:100%; transform-origin:left; }
.tv-foot { display:flex; justify-content:space-between; align-items:center; font-size:1.7cqw; font-weight:700; color:var(--d-mute); }
.tv-rows { display:grid; gap:1cqw; }
.tv-row { display:flex; align-items:center; gap:1.8cqw; padding:1cqw 1.4cqw; border-radius:1.4cqw; background:rgba(255,255,255,.06); font-weight:800; font-size:2.5cqw; transition:transform .5s, background .5s; }
.tv-row .rk { flex:none; width:4.2cqw; height:4.2cqw; border-radius:1.1cqw; display:grid; place-items:center; background:rgba(255,255,255,.1); font-size:2cqw; }
.tv-row:first-child .rk { background:linear-gradient(145deg,#ffe08a,#f5c542 60%,#c9961c); color:#3a2a00; }
.tv-row .nm { flex:1; } .tv-row .pt { font-family:var(--d-head); font-weight:400; color:var(--d-gold); font-size:3cqw; font-variant-numeric:tabular-nums; }
.tv-row.me { background:rgba(245,197,66,.16); }
.tv-lobby { display:grid; grid-template-columns:1fr 1fr; gap:4cqw; align-items:center; flex:1; }
.tv-qr { background:#fff; border-radius:2cqw; padding:1.4cqw; width:22cqw; box-shadow:0 2cqw 4cqw rgba(0,0,0,.5); }
.tv-qr svg { display:block; width:100%; height:auto; }
.tv-code { font-family:var(--d-head); color:var(--d-gold); font-size:6cqw; letter-spacing:.8cqw; line-height:1; }
.tv-clock { font-family:var(--d-head); font-size:12cqw; line-height:.9; font-variant-numeric:tabular-nums; }
.tv-ball { width:20cqw; height:20cqw; border-radius:50%; display:grid; place-items:center; font-family:var(--d-head); font-size:10cqw; color:#3a2a00;
  background:radial-gradient(circle at 35% 30%,#fff3c4,#f5c542 45%,#c9961c); box-shadow:0 0 6cqw rgba(245,197,66,.35); }
.tv-ball.pop { animation:d-pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes d-pop { from { transform:scale(.6); } }
.tv-grid90 { display:grid; grid-template-columns:repeat(10,1fr); gap:.5cqw; }
.tv-grid90 span { font-size:1.45cqw; font-weight:800; text-align:center; padding:.45cqw 0; border-radius:.6cqw; background:rgba(255,255,255,.05); color:rgba(255,255,255,.35); }
.tv-grid90 span.on { background:var(--d-teal); color:#fff; } .tv-grid90 span.now { background:var(--d-gold); color:#3a2a00; }
.tv-full { position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:4cqw; }
.tv-goal { background:radial-gradient(circle at 50% 45%,#ffd463 0%,#e0a82a 50%,#5a3d06 100%); color:#1a1200; animation:d-flash .9s ease 1; }
@keyframes d-flash { 0% { opacity:0; transform:scale(1.15); } 30% { opacity:1; } 100% { transform:none; } }
.tv-goal .tv-big { font-size:17cqw; margin:0; }
.tv-goal p { font-weight:900; font-size:4cqw; }
.tv-offer { display:grid; grid-template-columns:1.1fr 1fr; gap:3cqw; align-items:center; flex:1; }
.tv-offer img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2cqw; box-shadow:0 2cqw 4cqw rgba(0,0,0,.5); }
.tv-shout { border-radius:3cqw; padding:4cqw; background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(15,139,141,.45)); border:.3cqw solid rgba(255,255,255,.15); text-align:center; }
.tv-fix { display:grid; gap:1cqw; }
.tv-fix div { display:grid; grid-template-columns:8cqw 1fr auto; gap:1.6cqw; align-items:center; font-weight:800; font-size:2.4cqw; padding:1cqw 1.4cqw; border-radius:1.2cqw; background:rgba(255,255,255,.06); }
.tv-fix b { font-family:var(--d-head); font-weight:400; color:var(--d-gold); }
.tv-fix em { font-style:normal; font-size:1.5cqw; background:var(--d-gold); color:#3a2a00; padding:.4cqw 1cqw; border-radius:99px; }
.tv-fix .score { font-family:var(--d-head); font-weight:400; font-size:2.8cqw; color:var(--d-ink); }
.tv-fix .ours { background:rgba(245,197,66,.16); outline:.25cqw solid rgba(245,197,66,.6); }
.tv-ok { color:var(--d-green); font-weight:900; font-size:3cqw; }
.zap { position:absolute; inset:0; pointer-events:none; z-index:6; }
.zap path { fill:none; stroke:#ffe14d; stroke-width:1.6; stroke-linejoin:round; filter:drop-shadow(0 0 2px #ffd400); stroke-dasharray:200; stroke-dashoffset:200; opacity:0; }
.zap.go path { animation:d-zap 1.2s ease-out 1 forwards; }
@keyframes d-zap { 0% { stroke-dashoffset:200; opacity:.9; } 45% { stroke-dashoffset:0; opacity:.9; } 100% { stroke-dashoffset:0; opacity:0; } }
.zap.go::before { content:""; position:absolute; inset:0; background:#ffe14d; opacity:0; animation:d-glow 1.2s ease-out 1; }
@keyframes d-glow { 20% { opacity:.35; } 100% { opacity:0; } }

/* ---------- inside the phone ---------- */
.phx { position:absolute; inset:0; padding:9cqw 6cqw 6cqw; display:flex; flex-direction:column; gap:4cqw; font-size:5.2cqw; }
.ph-head { display:flex; justify-content:space-between; align-items:baseline; }
.ph-head b { font-family:var(--d-head); font-weight:400; font-size:8cqw; letter-spacing:.3cqw; }
.ph-head b em { font-style:normal; color:var(--d-gold); }
.ph-head small { font-size:4.2cqw; color:var(--d-mute); font-weight:700; }
.ph-card { border-radius:5cqw; padding:5cqw; background:rgba(255,255,255,.07); border:.6cqw solid rgba(255,255,255,.08); }
.ph-lab { font-size:3.8cqw; font-weight:800; letter-spacing:.6cqw; text-transform:uppercase; color:var(--d-mint); }
.ph-txt { font-weight:800; font-size:6cqw; line-height:1.2; margin-top:1.5cqw; }
.ph-mute { color:var(--d-mute); font-size:4.4cqw; font-weight:600; }
.ph-btn { display:block; width:100%; text-align:center; font-weight:900; font-size:5.6cqw; padding:4.4cqw 3cqw; border-radius:4cqw; background:var(--d-gold); color:#2a1f00; border:0; position:relative; overflow:hidden; }
.ph-btn.alt { background:rgba(255,255,255,.1); color:var(--d-ink); }
.ph-btn.red { background:#ef4444; color:#fff; } .ph-btn.green { background:var(--d-green); color:#04210f; }
.tap { animation:d-tap .45s ease 1; }
@keyframes d-tap { 40% { transform:scale(.94); filter:brightness(1.25); } }
.ph-opts { display:grid; gap:3cqw; }
.ph-opt { display:flex; align-items:center; gap:3cqw; padding:3.6cqw; border-radius:4cqw; background:rgba(255,255,255,.07); font-weight:800; font-size:5.2cqw; border:.6cqw solid transparent; transition:opacity .3s, border-color .3s; }
.ph-opt i { width:9cqw; height:9cqw; font-size:5cqw; }
.ph-opt.pick { border-color:var(--d-gold); } .ph-opt.dim { opacity:.35; }
.ph-toast { text-align:center; font-weight:900; font-size:7.5cqw; color:var(--d-green); animation:d-pop .5s cubic-bezier(.2,1.6,.4,1); }
.ph-ticket { display:grid; grid-template-columns:repeat(9,1fr); gap:1cqw; background:#f8fbfa; border-radius:3cqw; padding:2.5cqw; }
.ph-ticket span { aspect-ratio:1; display:grid; place-items:center; font-weight:900; font-size:4.2cqw; color:#0b2523; border-radius:1.5cqw; }
.ph-ticket span.blank { background:transparent; }
.ph-ticket span.flash { background:#fde68a; animation:d-blink .5s ease 2; }
.ph-ticket span.mk { background:#ef4444; color:#fff; border-radius:50%; }
@keyframes d-blink { 50% { background:#fbbf24; } }
.ph-field { border-radius:3.5cqw; padding:3.6cqw; background:rgba(0,0,0,.35); border:.6cqw solid rgba(255,255,255,.15); font-weight:800; font-size:5.4cqw; min-height:13cqw; }
.ph-field.code { font-family:var(--d-head); font-weight:400; letter-spacing:2.4cqw; font-size:9cqw; color:var(--d-gold); text-align:center; border-color:rgba(245,197,66,.6); }
.ph-field .caret { display:inline-block; width:.6cqw; height:1em; background:var(--d-gold); vertical-align:-.15em; animation:d-caret 1s steps(1) infinite; }
@keyframes d-caret { 50% { opacity:0; } }
.ph-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:2cqw; }
.ph-thumbs span { aspect-ratio:1; border-radius:3cqw; background:rgba(255,255,255,.08); overflow:hidden; border:.8cqw solid transparent; }
.ph-thumbs span.pick { border-color:var(--d-gold); }
.ph-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.ph-list { display:grid; gap:2.4cqw; }
.ph-list div { display:flex; justify-content:space-between; align-items:center; padding:3.4cqw 4cqw; border-radius:3.5cqw; background:rgba(255,255,255,.07); font-weight:800; }
.ph-list div.pick { background:rgba(245,197,66,.2); outline:.6cqw solid var(--d-gold); }
.ph-scan { position:relative; flex:1; border-radius:5cqw; background:#111; overflow:hidden; display:grid; place-items:center; }
.ph-scan .tv-qr { width:52cqw; padding:3cqw; border-radius:3cqw; }
.ph-scan::after { content:""; position:absolute; inset:14cqw 10cqw; border:1cqw solid rgba(255,255,255,.85); border-radius:4cqw; }
.ph-scan::before { content:""; position:absolute; left:12cqw; right:12cqw; height:.8cqw; background:#34d399; box-shadow:0 0 4cqw #34d399; top:20%; animation:d-scan 1.4s ease-in-out infinite alternate; z-index:2; }
@keyframes d-scan { to { top:78%; } }
.d-in { animation:d-in .4s ease both; }
@keyframes d-in { from { opacity:0; transform:translateY(2cqw); } }

/* reduced motion: still pictures, step by step */
@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::before, .demo *::after { animation:none !important; transition:none !important; }
  .zap { display:none; }
}
.demo-summaries { margin-top:18px; }
.demo-summaries summary { cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center; }
.demo-summaries ol { padding-left:1.3em; margin:8px 0 0; }
.demo-summaries li { margin-bottom:8px; max-width:44em; }