/* NuPlyr website. Colours, radii, spacing and the focus ring come from tokens.css, which is the
   app's own file (scripts/sync-theme.mjs), so the site cannot drift from the product's look. This
   file only lays out a scrolling web page on top of those tokens. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* tokens.css sizes the app as a fixed, unscrollable TV screen; a website scrolls. */
html, body { height: auto; overflow: visible; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { overflow-x: hidden; font-size: 17px; line-height: 1.6; background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: var(--accent-light); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-s); }
img { height: auto; }
code, kbd, pre { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--bg-elev); padding: 8px 12px; border-radius: var(--radius-m); }
.skip:focus { left: 8px; }

/* ── Brand ───────────────────────────────────────────────────────────────────────────────── */
/* The app's navbar lockup, exactly (nuplyr-app styles/tv/base.css .navbar-brand): LogoMark chevrons
   at 41×17.5 (viewBox 6 20 56 24), 8px from a 20px wordmark. */
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
.brand-mark { width: 41px; height: 17.5px; flex: none; }
.brand .wordmark { height: 20px; width: 149.6px; flex: none; }

/* ── Header ──────────────────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--bg-rgb), 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-nav a {
  color: var(--fg-muted); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: var(--radius-m);
  transition: color .15s var(--easing), background .15s var(--easing);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--fg-strong); background: var(--hover-tint); }
.site-nav .btn { margin-left: 8px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--border-control); border-radius: var(--radius-m); width: 40px; height: 40px; color: var(--fg); cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; display: block; margin: auto; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 16px 20px; background: rgba(var(--bg-rgb), 0.97); border-bottom: 1px solid var(--border);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px; font-size: 16px; }
  .site-nav .btn { margin: 8px 0 0; justify-content: center; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────────────────────── */
/* THE APP'S BUTTON SYSTEM (apps/web styles/tv/buttons.css), at the site's larger size: .btn is the
   secondary — outlined, no fill, lit amber when pointed at, as in the app — and .btn.primary the one
   filled amber commit. A grey hover here made the site's buttons a different family from the app's. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--radius-l);
  font-size: 16px; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap;
  border: 1px solid var(--border-control); color: var(--fg-strong); background: transparent;
  cursor: pointer; transition: transform .15s var(--easing), box-shadow .2s var(--easing), background .2s var(--easing), border-color .2s, color .2s;
}
.btn:hover, .btn:focus-visible { color: var(--accent-bright); border-color: var(--accent); background: var(--accent-dim); outline: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent-gradient); border-color: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.28); }
.btn.primary:hover, .btn.primary:focus-visible { background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%); border-color: var(--accent); color: #fff; box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.42); }
.btn.ghost { background: transparent; }
.btn.sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: var(--radius-m); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ── Section scaffolding ─────────────────────────────────────────────────────────────────── */
.section { padding: 112px 0; position: relative; }
.section.tight { padding: 72px 0; }
.section.alt { background: linear-gradient(180deg, var(--bg-deep), var(--bg) 70%); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
@media (max-width: 640px) { .section { padding: 72px 0; } .section.tight { padding: 52px 0; } }
.kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 14px; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.1; letter-spacing: -0.025em; color: var(--fg-strong); font-weight: 800; }
.section-head p { font-size: 19px; color: var(--fg-muted); margin: 18px 0 0; }

/* ── Hero ────────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 88px 0 120px; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -2;
  background:
    radial-gradient(48% 50% at 78% 38%, rgba(var(--accent-rgb), 0.22), transparent 70%),
    radial-gradient(30% 40% at 12% 18%, rgba(56, 120, 255, 0.10), transparent 70%);
}
.hero-chevrons { position: absolute; z-index: -1; right: -14%; top: 4%; width: 70%; max-width: 980px; height: auto; aspect-ratio: 56 / 24; opacity: 0.05; pointer-events: none; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 4.9vw, 64px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; color: var(--fg-strong); }
.hero h1 .accent { background: linear-gradient(100deg, var(--accent-bright), var(--accent-light) 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { font-size: 20px; color: var(--fg-muted); margin: 24px 0 36px; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 22px; font-size: 14px; color: var(--fg-muted); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note svg { width: 16px; height: 16px; color: var(--status-ok); }
@media (max-width: 960px) {
  .hero { padding: 56px 0 80px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
}

/* A TV, drawn: bezel, a slow crossfade of real screens, a stand, and an amber glow under it. */
.tv { position: relative; perspective: 1600px; }
.tv-body {
  position: relative; border-radius: 14px; padding: 10px; background: linear-gradient(160deg, #2b2f35, #121418 60%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 40px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px #000;
  transform: rotateY(-9deg) rotateX(3deg); transform-origin: 60% 50%;
  transition: transform .8s var(--easing);
}
.tv:hover .tv-body { transform: rotateY(-4deg) rotateX(1deg); }
.tv-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.tv-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: tv-cycle 20s infinite; }
.tv-screen img:nth-child(1) { animation-delay: 0s; }
.tv-screen img:nth-child(2) { animation-delay: 5s; }
.tv-screen img:nth-child(3) { animation-delay: 10s; }
.tv-screen img:nth-child(4) { animation-delay: 15s; }
@keyframes tv-cycle { 0% { opacity: 0; transform: scale(1.02); } 4%, 25% { opacity: 1; transform: scale(1); } 29%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tv-screen img:first-child { opacity: 1; } }
.tv-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,0.10), transparent 35%); pointer-events: none; }
.tv-stand { width: 26%; height: 14px; margin: 0 auto; background: linear-gradient(#1b1e22, #0d0f12); border-radius: 0 0 10px 10px; transform: rotateY(-9deg); }
.tv-glow { position: absolute; left: 10%; right: 10%; bottom: -40px; height: 80px; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.35), transparent 70%); filter: blur(20px); z-index: -1; }
.float-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--fg-strong);
  background: rgba(var(--bg-elev-rgb), 0.86); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-lg);
  animation: bob 6s ease-in-out infinite;
}
.float-chip small { display: block; font-weight: 500; color: var(--fg-muted); font-size: 12px; }
.float-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-err-strong); box-shadow: 0 0 0 4px rgba(var(--status-err-strong-rgb), .2); }
.float-chip.c1 { left: -18px; top: 12%; }
.float-chip.c2 { right: -10px; bottom: 18%; animation-delay: -3s; }
.float-chip .badge { font-size: 11px; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(var(--status-ok-rgb), .6); color: var(--status-ok); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 640px) { .float-chip { display: none; } .tv-body { transform: none; } .tv-stand { transform: none; } }

/* ── Works-with strip ────────────────────────────────────────────────────────────────────── */
.strip { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--bg-deep); }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-top: 26px; padding-bottom: 26px; }
.strip-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.strip-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); margin-right: 6px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg-elev); font-size: 14px; font-weight: 600; color: var(--fg); }
.pill svg { width: 16px; height: 16px; color: var(--accent-bright); }

/* ── How it works ────────────────────────────────────────────────────────────────────────── */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.flow-step { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; overflow: hidden; }
.flow-step::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(rgba(var(--accent-rgb), .14), transparent 70%); }
.flow-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-dim); color: var(--accent-bright); font-weight: 800; margin-bottom: 18px; }
.flow-step h3 { font-size: 21px; color: var(--fg-strong); margin-bottom: 8px; }
.flow-step p { margin: 0; color: var(--fg-muted); font-size: 16px; }
.flow-diagram { margin-top: 44px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.flow-diagram svg { width: 100%; height: auto; display: block; }
/* Below 640px the 900-wide drawing shrinks to 8px labels nobody can read, and the three steps above it
   already say the same thing in words, so a phone skips it rather than showing an illegible picture. */
@media (max-width: 640px) { .flow-diagram { display: none; } }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }

/* ── Features ────────────────────────────────────────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; transition: border-color .2s, transform .2s var(--easing), background .2s; }
.feature:hover { border-color: rgba(var(--accent-bright-rgb), .45); transform: translateY(-2px); background: #1f2329; }
.feature-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-dim); color: var(--accent-bright); margin-bottom: 16px; }
.feature-ico svg { width: 22px; height: 22px; }
.feature h3 { font-size: 18px; color: var(--fg-strong); margin-bottom: 6px; }
.feature p { margin: 0; font-size: 15px; color: var(--fg-muted); line-height: 1.55; }
@media (max-width: 1040px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ── Showcase rows ───────────────────────────────────────────────────────────────────────── */
.show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 64px; align-items: center; }
.show + .show { margin-top: 120px; }
.show.flip { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.show.flip .show-text { order: 2; }
.show-text h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em; color: var(--fg-strong); margin-bottom: 16px; font-weight: 800; }
.show-text p { color: var(--fg-muted); margin: 0 0 18px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.ticks svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--accent-bright); }
.shot { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 6px rgba(255,255,255,0.02); background: #000; }
.shot img { width: 100%; }
.shot-stack { position: relative; }
.shot-stack .shot.back { position: absolute; width: 50%; right: -3%; bottom: -16%; box-shadow: 0 24px 60px -10px rgba(0,0,0,.85); border-color: var(--border-bright); }
.shot-stack { margin-bottom: 8%; }
@media (max-width: 960px) {
  .show, .show.flip { grid-template-columns: 1fr; gap: 32px; }
  .show.flip .show-text { order: 0; }
  .show + .show { margin-top: 88px; }
  .shot-stack .shot.back { display: none; }
}

/* ── Plans ───────────────────────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 30px; }
.plan.featured { border-color: rgba(var(--accent-bright-rgb), .55); background: linear-gradient(180deg, var(--bg-card-accent), var(--bg-card) 55%); box-shadow: 0 30px 70px -40px rgba(var(--accent-rgb), .6); }
.plan-tag { position: absolute; top: -12px; right: 24px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent-gradient); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.plan .kicker { margin-bottom: 8px; }
.plan h3 { font-size: 28px; color: var(--fg-strong); letter-spacing: -0.02em; }
.plan-meta { font-size: 15px; color: var(--fg-muted); margin: 6px 0 22px; }
.plan .ticks { margin-bottom: 28px; flex: 1; align-content: start; }
.plan .ticks li { font-size: 15px; }
.plan .btn { width: 100%; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

.compare-wrap { margin-top: 56px; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { padding: 14px 18px; border-bottom: 1px solid var(--dd-rule); text-align: left; vertical-align: middle; }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); font-weight: 700; }
.compare th.col, .compare td.col { width: 120px; text-align: center; }
.compare .col.pro { background: rgba(var(--accent-rgb), .08); color: var(--accent-bright); }
.compare thead .col.pro { color: var(--accent-bright); }
.compare .feat { font-weight: 600; color: var(--fg-strong); font-size: 16px; }
/* The app's own rows (scripts/sync-plans.mjs writes them from the app's lib/planRows.json): devices,
   the essentials both plans have, then what Pro adds, each with its one-line sub. */
.compare tbody td { padding-top: 11px; padding-bottom: 11px; }
.compare tbody tr:not(.hl) .feat { font-weight: 500; font-size: 15px; color: var(--fg); }
.compare .feat small { display: block; font-weight: 400; color: var(--fg-muted); font-size: 13px; }
.compare tr.hl td { background: rgba(var(--accent-rgb), .06); }
.compare tr.hl .feat { color: var(--accent-bright); }
.compare svg { width: 18px; height: 18px; color: var(--accent-bright); vertical-align: middle; }
.compare .no { color: var(--fg-dim); }
/* ON A PHONE ALL THREE COLUMNS FIT. At min-width 560px the table scrolled sideways inside its frame and
   a 390px screen showed the feature names with Basic and Pro off the edge, i.e. the comparison without
   anything to compare. The plan columns narrow to their ticks and the feature column wraps instead. */
@media (max-width: 640px) {
  .compare { min-width: 0; table-layout: fixed; }
  .compare th, .compare td { padding: 12px 12px; }
  .compare th.col, .compare td.col { width: 64px; padding-left: 4px; padding-right: 4px; }
  .compare thead th:first-child { letter-spacing: .08em; }
  .compare td.col strong { font-size: 13px; line-height: 1.25; display: block; }
  .compare .feat { font-size: 15px; overflow-wrap: anywhere; }
}
.fine { font-size: 14px; color: var(--fg-muted); margin-top: 16px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────────────────────── */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0 22px; transition: border-color .2s; }
.faq details[open] { border-color: var(--border-bright); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; color: var(--fg-strong); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent-bright); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--fg-muted); }

/* ── Support / CTA band ──────────────────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; border-radius: 22px; padding: 56px; border: 1px solid rgba(var(--accent-bright-rgb), .35); background: radial-gradient(70% 120% at 100% 0%, rgba(var(--accent-rgb), .30), transparent 60%), var(--bg-card); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.cta-band h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--fg-strong); font-weight: 800; }
.cta-band p { color: var(--fg-muted); margin: 14px 0 0; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta-band .chev-bg { position: absolute; right: -40px; bottom: -60px; width: 340px; opacity: .08; pointer-events: none; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; padding: 36px 24px; } .cta-band .actions { justify-content: flex-start; } }

/* ── Footer ──────────────────────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--hairline); padding: 56px 0 40px; background: var(--bg-deep); margin-top: 112px; }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-footer h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--fg-muted); font-size: 15px; }
.site-footer a:hover { color: var(--fg-strong); }
.footer-blurb { color: var(--fg-muted); font-size: 14px; max-width: 34em; margin: 16px 0 0; }
.footer-legal { grid-column: 1 / -1; border-top: 1px solid var(--hairline); padding-top: 24px; margin-top: 8px; font-size: 13px; color: var(--fg-dim); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; } .site-footer .wrap > :first-child { grid-column: 1 / -1; } .site-footer a { overflow-wrap: anywhere; } }

/* ── Reveal on scroll ────────────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--easing), transform .7s var(--easing); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ═══ Docs page ═════════════════════════════════════════════════════════════════════════════ */
.docs-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--hairline); background: radial-gradient(40% 120% at 90% 0%, rgba(var(--accent-rgb), .16), transparent 70%); }
.docs-hero h1 { font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -0.03em; color: var(--fg-strong); font-weight: 800; line-height: 1.05; }
.docs-hero p { color: var(--fg-muted); font-size: 19px; max-width: 40em; margin: 16px 0 0; }
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding-top: 48px; }
.toc { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding-right: 8px; }
.toc h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin: 22px 0 8px; }
.toc h4:first-child { margin-top: 0; }
.toc a { display: block; padding: 6px 12px; border-left: 2px solid var(--border); color: var(--fg-muted); font-size: 15px; }
.toc a:hover { color: var(--fg-strong); }
.toc a.is-active { color: var(--accent-bright); border-left-color: var(--accent-bright); background: linear-gradient(90deg, rgba(var(--accent-bright-rgb), .10), transparent); }
.toc-mobile { display: none; }
@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: 24px; }
  .toc { display: none; }
  .toc-mobile { display: block; margin-bottom: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0 16px; }
  .toc-mobile summary { padding: 14px 0; cursor: pointer; font-weight: 600; }
  .toc-mobile a { display: block; padding: 6px 0; color: var(--fg-muted); }
  .toc-mobile div { padding-bottom: 14px; }
}
.doc { min-width: 0; max-width: 820px; }
.doc section { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--hairline); }
.doc section:last-child { border-bottom: 0; }
.doc h2 { font-size: 30px; color: var(--fg-strong); letter-spacing: -0.02em; margin-bottom: 14px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.doc h2 .step { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-dim); color: var(--accent-bright); font-size: 17px; flex: none; }
.doc h3 { font-size: 20px; color: var(--fg-strong); margin: 32px 0 10px; }
.doc p, .doc li { color: var(--fg); }
.doc p { margin: 0 0 16px; }
.doc .muted { color: var(--fg-muted); }
.doc ol, .doc ul { padding-left: 22px; margin: 0 0 18px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--accent-bright); font-weight: 700; }
.doc strong { color: var(--fg-strong); font-weight: 600; }
.doc code { font-size: 0.88em; padding: 2px 6px; border-radius: 5px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--accent-light); }
.doc pre { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: #0b0d10; border: 1px solid var(--border); overflow-x: auto; font-size: 14px; line-height: 1.7; color: #d7dade; }
.doc pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.doc pre .c { color: var(--fg-dim); }
.doc figure { margin: 8px 0 24px; }
.doc figure .shot { box-shadow: var(--shadow-lg); }
.doc figcaption { font-size: 14px; color: var(--fg-muted); margin-top: 10px; text-align: center; }
.doc kbd { font-size: 0.85em; padding: 2px 7px; border-radius: 5px; background: var(--bg-elev-2); border: 1px solid var(--border-control); border-bottom-width: 2px; }
.path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; color: var(--fg-strong); }
.path span + span::before { content: '›'; color: var(--accent-bright); margin-right: 6px; }

.callout { display: flex; gap: 14px; padding: 16px 18px; border-radius: 12px; margin: 0 0 20px; border: 1px solid var(--border); background: var(--bg-card); }
.callout svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent-bright); }
.callout p { margin: 0; }
.callout.tip { border-color: rgba(var(--accent-bright-rgb), .4); background: var(--bg-card-accent); }
.callout.warn { border-color: rgba(var(--status-warn-rgb), .45); }
.callout.warn svg { color: var(--status-warn); }

.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 20px; }
.mini { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.mini h4 { color: var(--fg-strong); font-size: 16px; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.mini h4 svg { width: 18px; height: 18px; color: var(--accent-bright); }
.mini p { margin: 0; font-size: 15px; color: var(--fg-muted); }
@media (max-width: 640px) { .cards-2 { grid-template-columns: 1fr; } }

.tabs { margin: 0 0 20px; }
.tab-list { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tab-list button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--fg-muted); font-weight: 600; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tab-list button[aria-selected="true"] { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.tab-panel[hidden] { display: none; }

.trouble { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.trouble th, .trouble td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--dd-rule); vertical-align: top; }
.trouble th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
.trouble td:first-child { color: var(--fg-strong); font-weight: 600; width: 38%; }
.trouble td { color: var(--fg-muted); }
.trouble-wrap { overflow-x: auto; }

/* A SHOWCASE WITHOUT A PICTURE: the text alone, centred, at a reading width. */
.show.solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.show.solo .ticks { display: inline-block; text-align: left; }

/* ILLUSTRATED SCREENS (index.html showcase, docs.html steps). Not screenshots, on purpose: shapes in
   the site's own theme colours that say what a feature does — a channel/time grid, a poster wall,
   the welcome cards, a device list — without the app's artwork, navigation or real layout. Pure
   CSS, so nothing here is a picture of the product. */
.mock { --mk-amber: var(--accent-bright-rgb); position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; padding: 6%;
  background: radial-gradient(90% 80% at 85% 0%, rgba(var(--accent-rgb), .16), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(56, 120, 220, .12), transparent 60%), var(--bg-card);
  border: 1px solid rgba(var(--accent-rgb), .22); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7), 0 30px 70px -50px rgba(var(--accent-rgb), .45); }
.mock i, .mock b { display: block; border-radius: 6px; }

/* The guide: channels down the side, programmes across; what is on NOW glows amber, the line marks it. */
.mock-guide { display: flex; flex-direction: column; gap: 3.2%; padding-left: 5%; }
.mg-times { display: flex; gap: 2%; margin-left: 17%; }
.mg-times i { flex: 1; height: 6px; background: rgba(255,255,255,.14); max-width: 14%; margin-right: 10%; }
.mg-row { display: flex; gap: 1.2%; flex: 1; }
.mg-ch { width: 14%; margin-right: 2%; background: rgba(255,255,255,.08); position: relative; }
.mg-ch::before { content: ""; position: absolute; left: 12%; top: 50%; width: 22%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 30%; background: var(--dot, var(--accent)); }
.mg-row:nth-child(2) .mg-ch { --dot: #3b82f6; } .mg-row:nth-child(3) .mg-ch { --dot: #22c55e; } .mg-row:nth-child(4) .mg-ch { --dot: #a855f7; }
.mg-row:nth-child(5) .mg-ch { --dot: #ef4444; } .mg-row:nth-child(6) .mg-ch { --dot: #14b8a6; } .mg-row:nth-child(7) .mg-ch { --dot: var(--accent-bright); }
.mg-row b { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); }
.mg-row b:first-of-type { background: linear-gradient(90deg, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), .22)); border-color: rgba(var(--accent-bright-rgb), .45); }
.mg-row .w1 { flex: 1; } .mg-row .w2 { flex: 2; } .mg-row .w3 { flex: 3; } .mg-row .w4 { flex: 4; } .mg-row .w5 { flex: 5; }
.mg-now { position: absolute; top: 9%; bottom: 5%; left: 47%; width: 2px; border-radius: 2px; background: var(--status-err);
  box-shadow: 0 0 16px rgba(239, 68, 68, .55); }
.mg-now::before { content: ""; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: inherit; }

/* The library: a title in focus above, its details beside it; a wall of colourful posters below. */
.mock-library { display: flex; flex-direction: column; gap: 6%; }
.ml-band { display: flex; gap: 4%; height: 30%; }
.ml-poster { width: 14%; background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep)); box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), .7); }
.ml-lines { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10%; }
.ml-lines b { height: 9%; background: rgba(255,255,255,.12); }
.ml-lines .l1 { width: 46%; height: 16%; background: rgba(255,255,255,.75); } .ml-lines .l2 { width: 28%; background: rgba(var(--accent-bright-rgb), .7); }
.ml-lines .l3 { width: 62%; } .ml-lines .l4 { width: 54%; }
.ml-grid { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3%; }
.ml-grid i { background: linear-gradient(165deg, var(--c1), var(--c2)); opacity: .9; }
.ml-grid .t1 { --c1: #f59e0b; --c2: #9a3412; } .ml-grid .t2 { --c1: #38bdf8; --c2: #1e3a8a; } .ml-grid .t3 { --c1: #34d399; --c2: #065f46; }
.ml-grid .t4 { --c1: #c084fc; --c2: #4c1d95; } .ml-grid .t5 { --c1: #fb7185; --c2: #881337; } .ml-grid .t6 { --c1: #2dd4bf; --c2: #134e4a; }
.ml-grid i:first-child { outline: 2px solid var(--accent-bright); outline-offset: 3px; opacity: 1; box-shadow: 0 0 24px rgba(var(--accent-bright-rgb), .5); }

/* The welcome screen: the trial card (its button amber) beside the license-key card. */
.mock-welcome { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; padding: 8% 9%; }
.mw-card { display: flex; flex-direction: column; gap: 7%; padding: 9% 8%; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.mw-trial { border-color: rgba(var(--accent-bright-rgb), .5); background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(255,255,255,.03)); }
.mw-card .k { width: 40%; height: 5%; background: rgba(var(--accent-bright-rgb), .8); }
.mw-card .t { width: 64%; height: 9%; background: rgba(255,255,255,.7); }
.mw-card .p { width: 80%; height: 4%; background: rgba(255,255,255,.14); } .mw-card .p.short { width: 56%; }
.mw-btn { margin-top: auto; height: 14%; border-radius: 8px; background: var(--accent-gradient); box-shadow: 0 10px 24px -10px rgba(var(--accent-rgb), .8); }
.mw-key { display: flex; gap: 3%; align-items: center; height: 16%; padding: 0 6%; border-radius: 8px; border: 2px solid rgba(var(--accent-bright-rgb), .7); background: rgba(0,0,0,.25); }
.mw-key i { flex: 1; height: 36%; background: rgba(255,255,255,.35); border-radius: 3px; }
.mw-key em { width: 6%; height: 2px; background: rgba(255,255,255,.5); }
.mw-link { margin-top: auto; display: flex; flex-direction: column; gap: 14%; padding: 6%; border-radius: 8px; background: rgba(56, 120, 220, .14); border: 1px dashed rgba(96, 165, 250, .45); }
.mw-link b { height: 14px; width: 60%; background: rgba(255,255,255,.18); } .mw-link .code { width: 44%; height: 18px; background: rgba(147, 197, 253, .6); }

/* Settings pages: the rail with one item lit, a heading, then the page's content. */
.mock-settings { display: grid; grid-template-columns: 22% 1fr; gap: 4%; padding: 5%; }
.ms-rail { display: flex; flex-direction: column; gap: 7%; padding: 10% 12%; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.ms-rail b { height: 6%; background: rgba(255,255,255,.14); }
.ms-rail .on { background: rgba(var(--accent-bright-rgb), .85); box-shadow: 0 0 14px rgba(var(--accent-bright-rgb), .5); }
.ms-pane { display: flex; flex-direction: column; gap: 4%; padding: 2% 0; }
.ms-pane .h { width: 38%; height: 7%; background: rgba(255,255,255,.75); } .ms-pane .sub { width: 58%; height: 3.5%; background: rgba(255,255,255,.18); }
.ms-table { flex: 1; display: flex; flex-direction: column; gap: 3%; margin-top: 2%; }
.ms-table span { flex: 1; display: grid; grid-template-columns: 1fr 12% 12%; gap: 3%; align-items: center; padding: 0 4%; border-radius: 8px; background: rgba(255,255,255,.04); }
.ms-table span:first-child { background: rgba(var(--accent-rgb), .18); }
.ms-table b { height: 26%; width: 70%; background: rgba(255,255,255,.2); }
.ms-table i { justify-self: center; width: 22%; aspect-ratio: 1; border-radius: 50%; }
.ms-table .yes { background: var(--accent-bright); box-shadow: 0 0 10px rgba(var(--accent-bright-rgb), .6); } .ms-table .no { background: rgba(255,255,255,.14); }
.ms-devices { flex: 1; display: flex; flex-direction: column; gap: 5%; margin-top: 3%; }
.ms-devices span { flex: 1; max-height: 24%; display: flex; align-items: center; gap: 5%; padding: 0 5%; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.ms-devices i { width: 9%; aspect-ratio: 16/10; border-radius: 4px; background: linear-gradient(160deg, #60a5fa, #1e3a8a); }
.ms-devices span:nth-child(3) i { background: linear-gradient(160deg, #34d399, #065f46); }
.ms-devices b { flex: 1; height: 22%; max-width: 46%; background: rgba(255,255,255,.22); }
.ms-devices em { margin-left: auto; font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 999px; color: var(--accent-bright); border: 1px solid rgba(var(--accent-bright-rgb), .5); }
.ms-devices u { margin-left: auto; width: 5%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(248, 113, 113, .7); }
.ms-devices .me { border-color: rgba(var(--accent-bright-rgb), .4); }

/* An email address shown as text with a Copy button: the site never opens a mail app (a visitor on a
   TV or a borrowed computer often has none set up). The plan cards and support use a full-width
   .btn.email-copy that copies on click; prose uses .email: the address, then a small round copy icon that turns to a tick once copied. */
.plan-ask { margin: 0 0 12px; color: var(--fg-muted); font-size: 15px; }
.btn.email-copy { width: 100%; }
.email { white-space: nowrap; }
.email-addr { color: var(--accent-bright); font-weight: 600; user-select: all; }
.email-copy:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  margin-left: 6px; vertical-align: -6px; color: var(--fg-muted); background: var(--bg-elev-2);
  border: 1px solid var(--border-control); border-radius: 50%; cursor: pointer;
}
.email-copy:not(.btn) svg { width: 14px; height: 14px; }
.email-copy:not(.btn):hover { border-color: var(--accent); color: var(--accent-bright); }
.email-copy.is-copied { border-color: var(--accent-bright); color: var(--accent-bright); }
.doc-single { grid-column: 1 / -1; max-width: 760px; }

/* BETA. NuPlyr is offered as a beta, so the tag sits beside the wordmark in every page's header,
   and the plans carry one note on early-access pricing. Outlined, not filled: a note on the brand,
   not a button. Remove both when the service goes to general release. */
.beta-tag {
  display: inline-block; flex: none; padding: 2px 7px; border: 1px solid var(--accent); border-radius: var(--radius-s);
  color: var(--accent-bright); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase;
}
.beta-note {
  display: flex; align-items: flex-start; gap: 14px; max-width: 760px; margin: -24px auto 40px; padding: 16px 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: var(--radius-l); background: rgba(var(--accent-rgb), 0.08);
}
.beta-note .beta-tag { margin-top: 3px; }
.beta-note p { margin: 0; color: var(--fg); font-size: 16px; }
.beta-note strong { color: var(--fg-strong); }