/* RiftSight site — shared styles for every page (index, setup, …).
   Design tokens mirror the RiftSight Twitch config UI. */
:root {
  color-scheme: dark;
  --bg: #0b0f16;
  --bg-deep: #070a10;
  --panel-bg: #141a24;
  --panel-bg-raised: #1a212e;
  --border: #262e3d;
  --border-strong: #37425a;
  --text: #e8eaf0;
  --text-muted: #98a2b8;
  --text-dim: #6b7488;
  --accent: #6cf;
  --accent-2: #b794f6;
  --accent-bg: rgba(102, 204, 255, 0.14);
  --accent-bg-strong: rgba(102, 204, 255, 0.24);
  --success: #7be08a;
  --ink: #06131c; /* readable text on the cyan accent */
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 72px;
  --maxw: 1200px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font: 0.88em var(--font-mono); background: var(--panel-bg-raised); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-5); }
@media (max-width: 520px) { .wrap { padding: 0 var(--space-4); } }
.wrap-narrow { max-width: 820px; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--ink); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: 600 15px/1 var(--font-ui); cursor: pointer;
  padding: 13px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: background 140ms, border-color 140ms, transform 140ms, box-shadow 140ms;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--accent); color: var(--ink); border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(102, 204, 255, 0.25), 0 6px 24px -8px rgba(102, 204, 255, 0.5);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(102, 204, 255, 0.35), 0 10px 30px -8px rgba(102, 204, 255, 0.6); }
.btn-secondary { background: var(--panel-bg-raised); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Non-interactive "coming soon" placeholder in place of a button. */
.btn-soon {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 13px 22px; border-radius: var(--radius-sm);
  background: var(--panel-bg-raised); border: 1px dashed var(--border-strong);
  color: var(--text-dim); font: 600 14px/1 var(--font-ui); cursor: default;
}
.btn-soon .soon-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-2); }

/* ---- Header / nav ---------------------------------------------- */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 15, 22, 0.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: var(--space-4); height: 62px; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: 18px; color: var(--text); letter-spacing: 0.2px; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.nav-links { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.nav-links a.nav-page-link { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.nav-links a.nav-page-link:hover { color: var(--text); text-decoration: none; }
.nav-links a.nav-page-link[aria-current="page"] { color: var(--text); }
/* Compact icon link (e.g. GitHub) in the header. */
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); color: var(--text-muted); border: 1px solid transparent;
  transition: color 140ms, border-color 140ms, background 140ms;
}
.nav-icon:hover { color: var(--text); border-color: var(--border-strong); background: var(--panel-bg-raised); text-decoration: none; }
.nav-icon svg { width: 19px; height: 19px; }
/* Nav CTA must beat `.nav-links a` on specificity so its text stays dark.
   On the homepage it stays hidden at the top (the hero already shows the
   primary CTA) and reveals only once the hero has scrolled away. Pages that
   want it always visible add `.site-header.pinned-cta`. */
.nav-links a.nav-cta { color: var(--ink); padding: 9px 16px; font-size: 14px; display: none; }
.site-header.scrolled .nav-links a.nav-cta,
.site-header.pinned-cta .nav-links a.nav-cta { display: inline-flex; }
@media (max-width: 720px) {
  .nav-links a.nav-page-link { display: none; }
  .nav-links { gap: var(--space-3); }
}
@media (max-width: 460px) {
  /* Hero + beta band already carry the primary CTA on small screens. */
  .site-header.scrolled .nav-links a.nav-cta,
  .site-header.pinned-cta .nav-links a.nav-cta { display: none; }
}

/* ---- Section scaffolding --------------------------------------- */
section.band { padding: var(--space-8) 0; border-top: 1px solid var(--border); }
section.band.alt { background: var(--bg-deep); }
.section-head { max-width: 640px; margin: 0 auto var(--space-6); text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--space-2); color: #fff; }
.section-head p { color: var(--text-muted); font-size: 16.5px; margin: 0; }
.kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); }

/* ---- Hero ------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: var(--space-8) 0; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 15% 0%, rgba(102, 204, 255, 0.16), transparent 60%),
    radial-gradient(55% 55% at 95% 10%, rgba(183, 148, 246, 0.16), transparent 60%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--space-8); align-items: center; }
/* Let tracks honor their fr size instead of being forced wider by
   min-content (large hero type / the demo frame), which would otherwise
   overflow the wrap on narrow screens. */
.hero-grid > * { min-width: 0; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--accent); background: var(--accent-bg); border: 1px solid rgba(102, 204, 255, 0.3);
  padding: 5px 12px; border-radius: 999px; margin-bottom: var(--space-4);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
h1.hero-title {
  font-size: clamp(32px, 5vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 var(--space-4); color: #fff;
}
h1.hero-title .grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: clamp(16px, 2vw, 18px); color: var(--text-muted); max-width: 44ch; margin: 0 0 var(--space-5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Small, non-heavy line under the primary CTA (e.g. beta rollout note). */
.cta-note { margin: var(--space-3) 0 0; font-size: 13px; color: var(--text-dim); max-width: 44ch; }
.hero-note { margin: var(--space-5) 0 0; font-size: 13px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note .tick { color: var(--success); }
@media (max-width: 900px) and (min-width: 521px) {
  .hero-ctas .btn { flex: 1 1 auto; }
}
@media (max-width: 520px) {
  /* Stack full-width so long button labels never overflow the viewport. */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
}

/* ---- Product demo (shared by hero + showcase + setup video) ----- */
.demo-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, #0f1520, #0a0d13);
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.demo-frame.glow { box-shadow: 0 30px 90px -24px rgba(0,0,0,0.9), 0 0 60px -20px rgba(102,204,255,0.35), 0 0 0 1px rgba(255,255,255,0.02) inset; }
.demo-topbar { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.demo-topbar .tl { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.demo-topbar .url {
  margin-left: 8px; font: 500 12px/1 var(--font-mono); color: var(--text-dim);
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
  min-width: 0; /* allow the nowrap URL to ellipsis-shrink instead of forcing width */
}
.demo-topbar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.5px; }
.demo-topbar .live .rec { width: 7px; height: 7px; border-radius: 50%; background: #ff5b6e; box-shadow: 0 0 8px #ff5b6e; }

/* ---- Mock Twitch player chrome (decorative shell around the demo media) ----
   Evokes the Twitch web UI to set context; it is NOT the real Twitch brand and
   uses a neutral demo channel. The interactive stage lives inside .tw-player
   and is untouched — this is pure decoration. `container-type` lets the bottom
   bar condense itself based on the FRAME's width (the hero frame is smaller
   than the showcase), independent of the page viewport. */
.stream-shell { container-type: inline-size; }

/* Top nav: left group, a Twitch-style centered search, and the user avatar. */
.tw-topnav { position: relative; display: flex; align-items: center; height: 42px; padding: 0 12px; background: #0e0e12; border-bottom: 1px solid #26262c; }
.tw-nav-left { display: inline-flex; align-items: center; gap: 14px; }
.tw-logo { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(160deg, #a970ff, #772ce8); flex-shrink: 0; position: relative; }
.tw-logo::after { content: ""; position: absolute; inset: 5px 6px 4px 6px; background: #fff; opacity: 0.92; clip-path: polygon(0 0, 100% 0, 100% 66%, 62% 66%, 44% 100%, 44% 66%, 0 66%); }
.tw-navlink { font-size: 13px; font-weight: 600; color: #efeff1; }
.tw-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; width: 280px; max-width: 44%; height: 28px; padding: 0 10px; border-radius: 6px; background: #18181b; border: 1px solid #3a3a42; color: #adadb8; font-size: 12.5px; }
.tw-search svg { width: 13px; height: 13px; flex-shrink: 0; }
.tw-navavatar { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* Player + LIVE badge (top-right). */
.tw-player { position: relative; line-height: 0; background: #000; }
.tw-livebadge { position: absolute; top: 10px; right: 10px; z-index: 6; pointer-events: none; display: inline-flex; align-items: center; gap: 5px; background: #eb0400; color: #fff; font: 700 11px/1 var(--font-ui); letter-spacing: 0.4px; padding: 4px 7px; border-radius: 4px; text-transform: uppercase; }
.tw-livebadge .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }

/* Bottom info bar: streamer meta (left) + action buttons over metrics (right). */
.tw-infobar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #0d0d10; border-top: 1px solid #26262c; }
.tw-savatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #0d0d10, 0 0 0 3.5px #eb0400; }
.tw-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.tw-channel { font-size: 15px; font-weight: 700; color: #efeff1; white-space: nowrap; }
.tw-title { font-size: 13px; color: #dedee3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.tw-tags { display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; }
.tw-cat { font-size: 12px; color: #bf94ff; font-weight: 600; }
.tw-lang { font-size: 11px; color: #adadb8; background: #26262c; border-radius: 999px; padding: 2px 9px; }

.tw-actions { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.tw-btnrow { display: inline-flex; align-items: center; gap: 8px; }
.tw-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.15); color: #efeff1; font: 700 13px/1 var(--font-ui); white-space: nowrap; }
.tw-btn svg { width: 15px; height: 15px; }
.tw-btn.icon-only { padding: 0 9px; }
.tw-btn.gift { background: #9147ff; }
.tw-btn .tw-caret { width: 11px; opacity: 0.85; }
.tw-metrics { display: inline-flex; align-items: center; gap: 12px; }
.tw-viewers { display: inline-flex; align-items: center; gap: 4px; color: #eb0400; font-weight: 700; font-size: 13.5px; }
.tw-viewers svg { width: 15px; height: 15px; }
.tw-uptime { font: 500 12.5px/1 var(--font-mono); color: #adadb8; }
.tw-micon { display: inline-flex; color: #adadb8; }
.tw-micon svg { width: 16px; height: 16px; }

/* Condense the chrome in narrower frames (the smaller hero frame + mobile). */
@container (max-width: 700px) {
  .tw-navlink, .tw-title, .tw-tags, .tw-uptime, .tw-micon, .tw-btn.bell, .tw-btn.continue { display: none; }
}
@container (max-width: 470px) {
  .tw-search { display: none; }
  .tw-infobar { gap: 8px; padding: 10px 12px; }
  .tw-savatar { width: 34px; height: 34px; }
  .tw-channel { font-size: 14px; }
  .tw-btn.gift .tw-btn-text, .tw-btn.gift .tw-caret { display: none; }
  .tw-btn.gift { padding: 0 9px; }
}

.demo-media { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(120% 120% at 50% 0%, #16203a 0%, #0a0f1a 70%); overflow: hidden; }
/* When a real video is swapped in, let the frame follow the clip's own aspect
   ratio (the demo capture may be cropped, e.g. 2.13:1) — no crop, no letterbox. */
.demo-media.has-video { background: #000; aspect-ratio: auto; }
.demo-video { display: block; width: 100%; height: auto; }

.demo-board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-content: center; gap: 3%; padding: 8% 6%; }
.demo-card {
  aspect-ratio: 3 / 4; border-radius: 7px;
  background: linear-gradient(155deg, #223052, #141c30);
  border: 1px solid rgba(122, 160, 230, 0.28);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.6);
  position: relative; overflow: hidden;
}
.demo-card::after { content: ""; position: absolute; inset: 14% 18% auto 18%; height: 8%; border-radius: 3px; background: rgba(122, 160, 230, 0.35); box-shadow: 0 220% 0 rgba(122,160,230,0.22), 0 420% 0 rgba(122,160,230,0.16); }
.demo-card.is-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 26px -2px rgba(102, 204, 255, 0.7); }

.demo-cursor { position: absolute; left: 51%; top: 47%; width: 22px; height: 22px; z-index: 4; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.demo-popup {
  position: absolute; z-index: 3; left: 50%; top: 7%; transform: translateX(-50%);
  width: 24%; aspect-ratio: 3 / 4; border-radius: 10px;
  background: linear-gradient(160deg, #2b3c66, #16203a);
  border: 1px solid var(--accent); box-shadow: 0 18px 50px -12px rgba(0,0,0,0.85), 0 0 0 1px rgba(102,204,255,0.4), 0 0 40px -6px rgba(102,204,255,0.55);
  padding: 7% 7% 9%;
  display: flex; flex-direction: column; gap: 6%;
}
.demo-popup .art { flex: 1; border-radius: 6px; background: linear-gradient(150deg, #4a63a8, #26365e); border: 1px solid rgba(255,255,255,0.12); }
.demo-popup .line { height: 7%; border-radius: 3px; background: rgba(255,255,255,0.22); }
.demo-popup .line.short { width: 60%; background: rgba(102,204,255,0.5); }
@media (prefers-reduced-motion: no-preference) {
  .demo-popup { animation: popIn 640ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
  .demo-cursor { animation: nudge 3.4s ease-in-out infinite; }
}
@keyframes popIn { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.9); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes nudge { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-3px, -4px); } }

/* ---- How it works ---------------------------------------------- */
.how-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); align-items: stretch; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; } }
.panel { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.panel-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent); margin-bottom: var(--space-4); }
.panel-label.viewer { color: var(--accent-2); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); counter-reset: step; }
.steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-bg-strong); color: var(--accent); font-weight: 700; font-size: 14px;
}
.steps li strong { display: block; color: var(--text); font-weight: 600; }
.steps li span { color: var(--text-muted); font-size: 14.5px; }
.panel-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-5); font-size: 14px; font-weight: 600; color: var(--accent); }
.panel-link:hover { gap: 9px; text-decoration: none; }
.viewer-panel { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, var(--panel-bg), rgba(183,148,246,0.06)); border-color: var(--border-strong); }
.viewer-panel .big { font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 var(--space-2); line-height: 1.3; }
.viewer-panel p { color: var(--text-muted); margin: 0 0 var(--space-2); font-size: 14.5px; }
.viewer-badge { align-self: flex-start; margin-top: var(--space-3); font-size: 12px; font-weight: 700; color: var(--success); background: rgba(123, 224, 138, 0.12); border: 1px solid rgba(123, 224, 138, 0.35); padding: 5px 12px; border-radius: 999px; }

/* ---- Showcase: "See it in action" ------------------------------ */
/* The interactive demo fills the section width, aligned with every other
   section (they all share --maxw via .wrap). */
.showcase-media { margin: 0 auto; }
.showcase-media .demo-media { aspect-ratio: 16 / 9; }
.showcase-media .demo-board { grid-template-columns: repeat(6, 1fr); gap: 2.4%; padding: 7% 5%; }
.annotations {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  max-width: 940px; margin: var(--space-5) auto 0;
}
@media (max-width: 640px) { .annotations { grid-template-columns: 1fr; gap: var(--space-3); max-width: 420px; } }
.annotation { display: flex; align-items: flex-start; gap: var(--space-3); }
.annotation .num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-bg); border: 1px solid rgba(102,204,255,0.35);
}
.annotation p { margin: 0; font-size: 14px; color: var(--text-muted); }
.annotation p strong { display: block; color: var(--text); font-weight: 600; font-size: 14.5px; }

/* ---- Interactive demo (See it in action) ----------------------- */
/* The stage is the positioned coordinate space the shared CardHoverOverlay
   works in. The board <img> defines its height, so the overlay layers
   (hitboxes, a11y targets, popup) line up with the screenshot at any width. */
.rs-demo-stage { position: relative; overflow: hidden; line-height: 0; background: #0a0f1a; }
.rs-demo-board { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* Focusable per-card targets (keyboard/AT only) — pointer-events: none so
   mouse/touch fall through to the geometry resolver on the stage. */
.rs-demo-a11y { position: absolute; inset: 0; z-index: 2; }
.rs-demo-target {
  position: absolute; margin: 0; padding: 0; border: 0; background: transparent;
  border-radius: 6px; cursor: default; pointer-events: none;
}
.rs-demo-target:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Popup — mirrors the production viewer's tooltip visual language exactly
   (see twitch-extension/viewer.html). Sizes are applied inline by
   CardHoverOverlay via computeTooltipMaxSize, so none are set here. */
.rs-demo-tooltip { position: absolute; pointer-events: none; display: none; z-index: 30; }
.rs-demo-tooltip .tooltip-art { display: block; border-radius: 6px; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6)); object-fit: contain; }
.rs-demo-tooltip .tooltip-fallback {
  max-width: 240px; background: rgba(17, 17, 17, 0.95); border: 1px solid #444;
  border-radius: 6px; padding: 8px 10px; font: 13px/1.4 var(--font-ui); color: var(--text);
}
.rs-demo-tooltip .tooltip-debug {
  margin-top: 4px; max-width: 320px; background: rgba(17, 17, 17, 0.85);
  border-radius: 4px; padding: 4px 8px; color: #9fdf9f; font: 11px/1.4 var(--font-mono);
}

/* Debug outlines (dev alignment only — enable with ?demoDebug=1). */
.rs-demo-stage .hitbox-layer .hitbox { border: 1px solid transparent; }
.rs-demo-stage .hitbox.debug-outline { border-color: rgba(102, 255, 102, 0.7); background: rgba(102, 255, 102, 0.06); }
.rs-demo-stage .hitbox.debug-outline.hidden-card { border-color: rgba(255, 102, 102, 0.7); background: rgba(255, 102, 102, 0.06); }

/* First-load affordance: a small hint pill + one subtle pulse on a card. */
.rs-demo-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%) translateY(6px);
  z-index: 10; pointer-events: none; opacity: 0; transition: opacity 240ms, transform 240ms;
  font: 600 13px/1 var(--font-ui); color: var(--text); white-space: nowrap;
  background: rgba(11, 15, 22, 0.82); backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 14px;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.7);
}
.rs-demo-hint.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.rs-demo-pulse {
  position: absolute; z-index: 3; pointer-events: none; border-radius: 8px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 22px -2px rgba(102, 204, 255, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
  .rs-demo-pulse { animation: rsDemoPulse 1.4s ease-in-out 3; }
}
@keyframes rsDemoPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.9; }
}

/* ---- Benefits (lighter than cards) ----------------------------- */
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-6); }
@media (max-width: 820px) { .benefits-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
@media (max-width: 520px) { .benefits-grid { grid-template-columns: 1fr; } }
.benefit { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.benefit .ico { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent); margin-bottom: var(--space-3); }
.benefit .ico svg { width: 19px; height: 19px; }
.benefit h3 { font-size: 15.5px; margin: 0 0 var(--space-1); color: var(--text); }
.benefit p { font-size: 14px; color: var(--text-muted); margin: 0; }

/* ---- Status / beta band ---------------------------------------- */
.status-band { text-align: center; }
.status-card {
  max-width: 660px; margin: 0 auto; padding: var(--space-8) var(--space-6);
  background: linear-gradient(160deg, var(--panel-bg), var(--bg-deep));
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
}
.status-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 50% 0%, rgba(102,204,255,0.12), transparent 60%);
}
.status-card > * { position: relative; }
.status-pill { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-2); background: rgba(183, 148, 246, 0.12); border: 1px solid rgba(183, 148, 246, 0.35); padding: 6px 14px; border-radius: 999px; margin-bottom: var(--space-4); }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.status-card h2.status-heading { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 auto var(--space-3); max-width: 20ch; }
.status-card p { font-size: 16.5px; color: var(--text-muted); margin: 0 auto var(--space-6); max-width: 52ch; }
.status-card .btn { margin: 0 auto; }
.status-card .status-note { font-size: 13px; color: var(--text-dim); margin: var(--space-4) auto 0; }

/* ---- Community -------------------------------------------------- */
.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 860px; margin: 0 auto; }
@media (max-width: 640px) { .community-grid { grid-template-columns: 1fr; } }
.comm-card {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--panel-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: var(--space-5); color: var(--text);
  transition: border-color 140ms, transform 140ms, background 140ms;
}
.comm-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.comm-card .ci { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--panel-bg-raised); color: var(--text); }
.comm-card .ci svg { width: 22px; height: 22px; }
.comm-card .cc-title { font-weight: 700; font-size: 16px; color: #fff; margin: 0 0 2px; display: flex; align-items: center; gap: var(--space-2); }
.comm-card .cc-desc { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.comm-card .arrow { margin-left: auto; color: var(--text-dim); align-self: center; transition: transform 140ms, color 140ms; }
.comm-card:hover .arrow { color: var(--accent); transform: translateX(2px); }
.comm-card.featured {
  grid-column: 1 / -1;
  background: linear-gradient(150deg, rgba(88,101,242,0.16), var(--panel-bg) 70%);
  border-color: rgba(120, 132, 245, 0.55);
  box-shadow: 0 0 40px -18px rgba(88,101,242,0.7);
  padding: var(--space-6);
}
.comm-card.featured .ci { background: #5865f2; color: #fff; width: 48px; height: 48px; }
.comm-card.featured .ci svg { width: 26px; height: 26px; }
.comm-card.featured .cc-title { font-size: 18px; }
.comm-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-2); background: rgba(183,148,246,0.14); border: 1px solid rgba(183,148,246,0.35); padding: 2px 8px; border-radius: 999px; }
.support-note { text-align: center; color: var(--text-dim); font-size: 13.5px; margin: var(--space-5) auto 0; max-width: 52ch; }

/* ---- Setup page ------------------------------------------------- */
.setup-hero { padding: var(--space-8) 0 var(--space-6); }
.setup-hero .lead { color: var(--text-muted); font-size: 17px; max-width: 60ch; margin: var(--space-3) 0 0; }
.setup-hero h1 { font-size: clamp(30px, 4.4vw, 42px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: var(--space-2) 0 0; }

/* Beta access status banner */
.access-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6);
  background: linear-gradient(150deg, rgba(102,204,255,0.08), var(--panel-bg) 70%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: var(--space-6); margin-top: var(--space-6);
}
.access-card .access-copy { flex: 1 1 340px; min-width: 0; }
.access-card .access-copy p { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: 14.5px; }
.access-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; }
.access-actions .btn { white-space: nowrap; }
.access-actions .sub-link { font-size: 13px; color: var(--text-muted); text-align: center; }
.access-actions .sub-link:hover { color: var(--text); }

/* Setup video area */
.video-block { max-width: 860px; margin: 0 auto; }
.video-embed {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-strong); background: linear-gradient(160deg, #0f1520, #0a0d13);
  box-shadow: 0 30px 90px -30px rgba(0,0,0,0.85);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Placeholder shown until config.setup.video is set. */
.video-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  background: radial-gradient(120% 120% at 50% 0%, #16203a 0%, #0a0f1a 70%); text-align: center; padding: var(--space-5);
}
.video-placeholder .play {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent-bg-strong); border: 1px solid rgba(102,204,255,0.5); color: var(--accent);
}
.video-placeholder .play svg { width: 26px; height: 26px; margin-left: 3px; }
.video-placeholder .vp-text { color: var(--text-muted); font-size: 14px; }
.video-caption { text-align: center; color: var(--text-dim); font-size: 13.5px; margin: var(--space-3) 0 0; }

/* Setup guide steps with screenshots */
.guide { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.guide-step {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center;
  background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6);
}
.guide-step:nth-child(even) .guide-shot { order: -1; }
@media (max-width: 720px) { .guide-step { grid-template-columns: 1fr; gap: var(--space-4); } .guide-step:nth-child(even) .guide-shot { order: 0; } }
.guide-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-bg-strong); color: var(--accent); font-weight: 700; font-size: 15px; margin-bottom: var(--space-3); }
.guide-body h3 { font-size: 18px; color: #fff; margin: 0 0 var(--space-2); }
.guide-body p { color: var(--text-muted); font-size: 14.5px; margin: 0 0 var(--space-3); }
.guide-body .btn, .guide-body .btn-soon { margin-top: var(--space-1); }
.guide-body .mini { font-size: 12.5px; color: var(--text-dim); margin: var(--space-2) 0 0; }
/* Screenshot slot — drop an <img> in later; the placeholder shows meanwhile. */
.guide-shot {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden;
  border: 1px dashed var(--border-strong); background: radial-gradient(120% 120% at 50% 0%, #131a28 0%, #0a0f1a 75%);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.guide-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.guide-shot .shot-label { color: var(--text-dim); font-size: 12.5px; padding: var(--space-4); max-width: 30ch; }
.guide-shot .shot-label b { display: block; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
/* Real screenshot(s) in a step cell — shown in full (no crop), one or stacked.
   Keeps the `.guide-shot` class so the left/right alternation still applies. */
.guide-shot.real { position: static; aspect-ratio: auto; border: 0; background: transparent; display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.guide-shot.real .fig { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-strong); background: #0a0d13; }
.guide-shot.real .fig img { position: static; inset: auto; display: block; width: 100%; height: auto; object-fit: contain; }

/* Full-width guide step (e.g. the multi-setting "Configure" step) */
.guide-step.full { grid-template-columns: 1fr; }
.guide-substeps { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.guide-substeps li { color: var(--text-muted); font-size: 14.5px; padding-left: var(--space-4); position: relative; }
.guide-substeps li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.guide-substeps li b { color: var(--text); font-weight: 600; }
/* Real config screenshots shown fully (no crop) on a dark frame. */
.shot-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.shot-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .shot-gallery, .shot-gallery.cols-2 { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }
.shot-gallery figure { margin: 0; }
.shot-gallery .frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-strong); background: #0a0d13; aspect-ratio: 4 / 3; display: flex; }
.shot-gallery .frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shot-gallery figcaption { font-size: 13px; color: var(--text-muted); margin-top: var(--space-2); }
.shot-gallery figcaption b { color: var(--text); font-weight: 600; }

/* RiftSight icon status legend */
.legend { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }
@media (max-width: 560px) { .legend { grid-template-columns: 1fr; } }
.legend .row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.legend .sdot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.legend .txt { font-size: 14.5px; color: var(--text-muted); }
.legend .txt b { color: var(--text); font-weight: 600; }

/* FAQ (accessible <details>) */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.faq details { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 var(--space-5); }
.faq summary { cursor: pointer; list-style: none; padding: var(--space-4) 0; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: var(--space-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--accent); font-weight: 700; font-size: 18px; line-height: 1; width: 14px; text-align: center; flex-shrink: 0; }
.faq details[open] summary::before { content: "\2013"; }
.faq .faq-body { padding: 0 0 var(--space-4) 26px; color: var(--text-muted); font-size: 14.5px; margin: 0; }
.faq .faq-body p { margin: 0; }
.faq .faq-body img { display: block; width: 100%; max-width: 560px; margin: var(--space-3) 0 0; border-radius: var(--radius-md); border: 1px solid var(--border-strong); }

/* ---- Footer ----------------------------------------------------- */
footer.site-footer { border-top: 1px solid var(--border); padding: var(--space-6) 0; background: var(--bg-deep); }
.footer-top { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); align-items: center; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; color: var(--text); }
.footer-brand img { width: 26px; height: 26px; border-radius: 6px; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.footer-links a { color: var(--text-muted); font-size: 14px; }
.footer-links a:hover { color: var(--text); }
.footer-disclaimer { margin: var(--space-5) 0 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.6; max-width: 74ch; }
.footer-copy { margin: var(--space-3) 0 0; color: var(--text-dim); font-size: 12.5px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }