/* Overscan page only. Kit tokens; the glow is the page's one motion piece. No gradients on text or buttons. */

.ov-hero { padding-top: 56px; overflow: hidden; }
@media (min-width: 720px) { .ov-hero { padding-top: 80px; } }
.ov-hero-text { position: relative; z-index: 2; }
.ov-brand { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.ov-icon { display: block; flex: none; width: 64px; height: 64px; }
.ov-icon img { display: block; width: 100%; height: 100%; }
@media (min-width: 720px) { .ov-icon { width: 72px; height: 72px; } }
.ss .ov-name { margin: 0 0 2px; font: 600 22px/1.2 var(--ss-font-head); color: var(--ss-text); letter-spacing: -0.01em; }
.ss .ov-eyebrow { margin: 0; }
.ss .ov-h1 { font-size: clamp(34px, 7.4vw, 60px); line-height: 1.05; letter-spacing: -0.025em; max-width: 14em; margin: 0 0 20px; }
.ss .ov-line { font-size: 18px; line-height: 1.5; color: var(--ss-text-2); max-width: 40em; margin: 0 0 28px; }
.ss .ov-small { font-size: 12px; line-height: 1.6; color: var(--ss-text-2); margin: 16px 0 0; max-width: 72ch; }
.ss .ov-small + .ov-small { margin-top: 4px; }

/* Stage = the container SSMotion.glow draws into (monitor centred, colours spilling out both sides). */
.ov-stage { position: relative; height: 300px; margin-top: 8px; }
@media (min-width: 720px) { .ov-stage { height: 580px; } }
.ov-motion { position: absolute; z-index: 4; right: 16px; bottom: 12px; min-height: 44px; padding: 0 10px; background: transparent; border: 0;
  color: var(--ss-text-2); font: 500 12px/1 var(--ss-font-mono); cursor: pointer; border-radius: var(--ss-r); }
.ov-motion:hover { color: var(--ss-text); }
.ov-motion[hidden] { display: none; }
@media (min-width: 720px) { .ov-motion { right: 32px; } }
@media (prefers-reduced-motion: reduce) { .ov-motion { display: none !important; } }

.ss .ov-h2 { margin: 0 0 28px; font-size: clamp(26px, 4vw, 34px); }
.ss .ov-text { color: var(--ss-text-2); font-size: 17px; max-width: 60ch; margin: 0; }

.ov-clip { aspect-ratio: 16 / 9; width: 100%; }
.ov-clips { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ov-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.ov-fig { margin: 0; }
/* The OBS take is five screens wide (8:3): full row, then the desk clip (16:9) centred under it */
.ov-clip-wide { aspect-ratio: 80 / 27; }
.ov-fig-wide, .ov-fig-desk { grid-column: 1 / -1; }
.ov-fig-desk { width: 100%; max-width: 760px; margin-inline: auto; }
video.ov-clip:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 3px; }
video.ov-clip { display: block; height: auto; background: #000; border: 1px solid var(--ss-line); border-radius: var(--ss-r-lg); }
.ss .ov-note { font-size: 13px; color: var(--ss-text-2); margin: 14px 0 0; }

/* How it works: the shared steps look (site.css .how); only the step pictures live here.
   Pictures are all the same height, so the arrows line up. */
.ov-step-pic { aspect-ratio: 16 / 8; }
.ov-pic-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--ss-r); background: var(--ss-raised); }
/* 1: a little installer window with the app icon and a progress bar */
.ov-mini-win { width: 64%; background: var(--ss-surface); border: 1px solid var(--ss-line-strong); border-radius: 6px; padding-bottom: 12px; }
.ov-mini-bar { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--ss-line); }
.ov-mini-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-line-strong); }
.ov-mini-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ov-mini-row img { flex: none; width: 24px; height: 24px; }
.ov-mini-lines { flex: 1; }
.ov-mini-lines b { display: block; width: 72%; height: 5px; border-radius: 3px; background: var(--ss-line-strong); }
.ov-mini-lines b.short { width: 44%; margin-top: 5px; }
.ov-mini-prog { display: block; margin: 0 12px; height: 5px; border-radius: 3px; background: var(--ss-line); overflow: hidden; }
.ov-mini-prog span { display: block; width: 68%; height: 100%; border-radius: 3px; background: var(--rc, var(--ss-accent)); }
/* 2: the layout editor - true-size boxes on a dot grid, one being dragged into place, the gap measured */
.ov-pic-layout { background-image: radial-gradient(var(--ss-line-strong) 1px, transparent 1.5px); background-size: 12px 12px; }
.lb, .lb-ghost { position: absolute; border-radius: 3px; }
.lb { border: 2px solid var(--ss-text-3); background: var(--ss-surface); }
.lb1 { left: 7%; top: 34%; width: 21%; height: 34%; }
.lb2 { left: 36%; top: 26%; width: 28%; height: 46%; border-color: var(--rc, var(--ss-accent));
  background: color-mix(in srgb, var(--rc, var(--ss-accent)) 16%, var(--ss-surface)); }
.lb-ghost { left: 72%; top: 34%; width: 21%; height: 34%; border: 2px dashed var(--ss-text-3); opacity: .7; }
.lb3 { left: 75%; top: 22%; width: 21%; height: 34%; border-color: var(--rc2, var(--ss-accent)); }
.lb-gap { position: absolute; left: 28.5%; width: 7%; top: 51%; height: 7px; transform: translateY(-50%);
  border-left: 1px solid var(--ss-text-2); border-right: 1px solid var(--ss-text-2);
  background: linear-gradient(var(--ss-text-2), var(--ss-text-2)) center / 100% 1px no-repeat; }
.ov-pic-in .lb-cm { position: absolute; left: 32%; top: 76%; transform: translateX(-50%); font-size: 10px; line-height: 1; color: var(--ss-text-2); white-space: nowrap; }
.lb-cursor { position: absolute; left: 86%; top: 46%; width: 11px; height: 17px; fill: var(--ss-text); stroke: var(--ss-bg); stroke-width: 1; }
/* 3: the lit desk from "One screen or more", filling the picture */
.ov-step-pic .ov-desk { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; background: none; }

.ov-gets { max-width: 860px; }

/* System requirements: label column in mono, value in body text */
.ov-specs { width: 100%; }
/* baseline: the mono label and the value share their first line, so they line up although their sizes differ */
.ov-specs th[scope="row"], .ov-specs td { vertical-align: baseline; }
.ov-specs th[scope="row"] { width: 30%; text-align: left; color: var(--ss-text-2);
  font: 500 13px/1.6 var(--ss-font-mono); white-space: nowrap; }
.ov-specs td { color: var(--ss-text); }
@media (max-width: 560px) {
  .ov-specs th[scope="row"], .ov-specs td { padding: 12px; font-size: 14px; }
  .ov-specs th[scope="row"] { font-size: 12px; white-space: normal; width: 34%; }
}

/* FAQ. Rows run 16px past the text on each side so the hover spill's coloured edges never touch the words;
   on wider screens the rows hang out into the gutter so the text still lines up with the heading. */
.ov-faq { border-top: 1px solid var(--ss-line); max-width: 760px; }
.ov-faq details { border-bottom: 1px solid var(--ss-line); }
.ov-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 14px 16px; font: 600 17px/1.35 var(--ss-font-head); color: var(--ss-text); }
.ov-faq-body { overflow: hidden; padding: 0 16px; }
@media (min-width: 720px) { .ov-faq { margin: 0 -16px; max-width: 792px; } }
.ov-faq summary::-webkit-details-marker { display: none; }
.ov-faq summary::after { content: "+"; flex: none; font: 400 22px/1 var(--ss-font-mono); color: var(--ss-text-2); }
.ov-faq details[open]:not(.is-closing) summary::after { content: "-"; }
.ov-faq summary:hover { color: var(--ss-accent); }
.ov-faq summary:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -2px; border-radius: var(--ss-r); }
.ov-faq details p { margin: 0 0 18px; color: var(--ss-text-2); max-width: 60ch; }
.ss .ov-faq details .ov-faq-note { font-size: 13px; margin-top: -8px; color: var(--ss-text-3); }

/* Screens: three little desks. Main screen = a picture whose left/right edges are this card's two palette
   colours; side screens and the halo carry those colours outward as flat fades (no blur, per the colour rule). */
.ov-modes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .ov-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.ov-mode { background: var(--ss-surface); border: 1px solid var(--ss-line); border-radius: var(--ss-r-lg); padding: 20px 20px 22px; }
.ov-desk { display: flex; align-items: center; justify-content: center; gap: 4%; aspect-ratio: 16 / 6; margin: 0 0 18px;
  padding: 0 4%; border-radius: var(--ss-r); background: var(--ss-raised); }
.ov-mon { position: relative; flex: none; width: 27%; aspect-ratio: 16 / 9; border: 2px solid var(--ss-line-strong); border-radius: 3px;
  background: var(--ss-bg); overflow: hidden; }
.ov-main { width: 38%; background: linear-gradient(90deg, var(--rc, var(--ss-accent)), color-mix(in srgb, var(--rc, var(--ss-accent)) 45%, var(--ss-bg)) 35%,
  color-mix(in srgb, var(--rc2, var(--ss-accent)) 45%, var(--ss-bg)) 65%, var(--rc2, var(--ss-accent))); }
.ov-left { background: linear-gradient(270deg, color-mix(in srgb, var(--rc, var(--ss-accent)) 70%, var(--ss-bg)), var(--ss-bg) 85%); }
.ov-right { background: linear-gradient(90deg, color-mix(in srgb, var(--rc2, var(--ss-accent)) 70%, var(--ss-bg)), var(--ss-bg) 85%); }
/* One screen: plain desktop, a video window in the middle, the window's colours fading out around it */
.ov-main.is-desktop { width: 52%; background: var(--ss-bg); }
.ov-win, .ov-halo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 2px; }
.ov-win { width: 44%; height: 44%; border: 1px solid var(--ss-line-strong); background: linear-gradient(90deg, var(--rc, var(--ss-accent)),
  color-mix(in srgb, var(--rc, var(--ss-accent)) 45%, var(--ss-bg)) 35%, color-mix(in srgb, var(--rc2, var(--ss-accent)) 45%, var(--ss-bg)) 65%, var(--rc2, var(--ss-accent))); }
.ov-halo { width: 92%; height: 86%; border-radius: 8px; background:
  linear-gradient(90deg, color-mix(in srgb, var(--rc, var(--ss-accent)) 55%, transparent), transparent 46%, transparent 54%,
  color-mix(in srgb, var(--rc2, var(--ss-accent)) 55%, transparent));
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent); mask: radial-gradient(closest-side, #000 45%, transparent); }
.ss .ov-mode-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 18px; line-height: 1.3; margin: 0 0 8px; letter-spacing: -0.01em; }
.ov-mode p { margin: 0; color: var(--ss-text-2); font-size: 15px; }
.ov-tag { display: inline-block; padding: 4px 9px; border: 1px solid var(--ss-line-strong); border-radius: 999px;
  font: 500 11px/1 var(--ss-font-mono); color: var(--ss-text-2); letter-spacing: 0; }
.ss #screens .ov-note { margin-top: 18px; }

/* Privacy facts: small chips, each with a palette-coloured dot */
.ov-facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ov-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ss-line-strong);
  border-radius: 999px; font: 500 13px/1 var(--ss-font-mono); color: var(--ss-text); }
.ov-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rc, var(--ss-accent)); }

/* FAQ: the open marker takes the row's colour */
.ov-faq details[open] summary::after { color: var(--rc, var(--ss-text-2)); }

/* Closing band: lit from both sides like side screens (flat tints, no blur), icon + downloads */
.ov-band { position: relative; display: grid; gap: 20px 28px; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: 28px 24px; border: 1px solid var(--ss-line); border-radius: var(--ss-r-lg); background:
  linear-gradient(90deg, color-mix(in srgb, var(--rc, var(--ss-accent)) 14%, transparent), transparent 28%, transparent 72%,
  color-mix(in srgb, var(--rc2, var(--ss-accent)) 14%, transparent)), var(--ss-surface);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--rc, var(--ss-accent)) 80%, transparent),
    inset -3px 0 0 color-mix(in srgb, var(--rc2, var(--ss-accent)) 80%, transparent); }
@media (min-width: 900px) { .ov-band { grid-template-columns: auto minmax(0, 1fr) auto; padding: 36px 40px; } }
.ov-band-icon { width: 64px; height: 64px; }
@media (min-width: 900px) { .ov-band-icon { width: 80px; height: 80px; } }
.ss .ov-band .ov-h2 { margin: 0 0 6px; }
.ss .ov-band-line { margin: 0; color: var(--ss-text-2); font-size: 16px; }
.ov-band-btns { margin: 0; }
.ss .ov-band-help { grid-column: 1 / -1; max-width: none; margin: 0; padding-top: 16px; border-top: 1px solid var(--ss-line); font-size: 14px; color: var(--ss-text-2); }
.ss .ov-band-help a { color: var(--ss-text); }

/* FAQ "Expand all" / "Collapse all": quiet text buttons on the heading's line, 44px tall to tap */
.ov-faq-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; max-width: 760px; margin: 0 0 12px; }
.ss .ov-faq-head .ov-h2 { margin: 0; }
.ov-faq-all { display: flex; gap: 4px; margin-right: -10px; }
.ov-faq-all[hidden] { display: none; }
.ov-faq-btn { min-height: 44px; padding: 0 10px; background: none; border: 0; border-radius: var(--ss-r); cursor: pointer;
  font: 500 13px/1 var(--ss-font-mono); color: var(--ss-text-2); }
.ov-faq-btn:hover:not([aria-disabled="true"]) { color: var(--ss-text); text-decoration: underline; text-underline-offset: 3px; }
.ov-faq-btn:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -2px; }
.ov-faq-btn[aria-disabled="true"] { color: var(--ss-text-3); cursor: default; opacity: .6; }