/* v4.css — the one component layer for v4 pages (home, welcome-v4, update-v4, guide).
 *
 * Load order: shared.css → dark-theme.css → v4.css. The production theme owns the base
 * (navy background, nav, buttons, footer); this file adds the v4 vocabulary on top of it,
 * so a new page is assembled from these classes instead of another inline <style> block.
 *
 *   tokens      --v4-*          product accents, surfaces, radii, rhythm
 *   type        .v4-eyebrow .v4-h1 .v4-h2 .v4-lead .v4-grad
 *   layout      .v4-section .v4-head .v4-grid .v4-split
 *   surfaces    .v4-card (+ --cyan/--violet/--lime/--amber) .v4-icon .v4-panel-bg
 *   live demos  .v4-stage .v4-stage-frame .v4-stage-bar .v4-live .v4-ghost-btn
 *   bits        .v4-steps .v4-kbd .v4-pro .v4-chip .v4-check
 *   reading     .v4-note .v4-table
 *   contents    .v4-toc .v4-toc-group .v4-toc-title
 *   disclosure  .v4-disclosure .v4-disclosure-body
 *   steps       .v4-steps.is-vertical .v4-step-copy
 *   features    .v4-feature .v4-feature-body .v4-card-title
 *   variants    .v4-stage-bar.is-wrap .v4-eyebrow.is-amber .v4-ghost-btn.is-gold
 *   chip colour .v4-chip (+ .cyan/.violet/.lime/.amber)
 *   closing     .v4-cta
 *
 * Product colours are the extension's R8 tokens (DESIGN.md §2), so the page and the real
 * player embedded in it speak the same palette.
 */

/* Inter, self-hosted (OFL, latin subset of the variable font) — the production site's typeface.
   The product UI inside scenes keeps its own Schibsted Grotesk, as in the extension. */
@font-face{font-family:Inter;src:url(font-inter.woff2) format("woff2");font-weight:400 800;font-display:swap}
/* The variable file carries an optical-size axis; at headline sizes browsers switch to its rounder
   display cut. Production loads plain Inter, i.e. the text cut, so hold every page to opsz 14. */
body{font-optical-sizing:none;font-variation-settings:"opsz" 14}
@font-face{font-family:"JetBrains Mono";src:url(font-jetbrains-mono.woff2) format("woff2");font-weight:400 800;font-display:swap}

:root{
  --v4-cyan:#22d3ee; --v4-violet:#a78bfa; --v4-lime:#b8ee3a; --v4-amber:#f59e0b; --v4-gold:#fbbf24; --v4-rose:#fb7185; --v4-indigo:#818cf8;
  --v4-grad:linear-gradient(110deg,#22d3ee 0%,#818cf8 52%,#a78bfa 100%);
  --v4-surface:linear-gradient(180deg,rgba(28,35,62,.72),rgba(17,22,41,.78));
  --v4-surface-solid:#141a30;
  --v4-line:rgba(148,163,255,.13);
  --v4-line-strong:rgba(148,163,255,.24);
  --v4-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --v4-r-sm:10px; --v4-r:18px; --v4-r-lg:26px;
  --v4-section:68px;
  --v4-shadow:0 30px 70px -36px rgba(0,0,0,.85);
}
@media(max-width:860px){:root{--v4-section:46px}}

/* ---------- page chrome ---------- */
.skip-link{position:fixed;top:12px;left:12px;z-index:100;padding:10px 14px;border-radius:8px;color:#061014;background:var(--v4-cyan);font-weight:800;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}

/* ---------- type ---------- */
.v4-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;color:var(--v4-cyan);
  font:700 11.5px/1 var(--v4-mono);letter-spacing:.16em;text-transform:uppercase}
.v4-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.v4-eyebrow.is-violet{color:var(--v4-violet)}.v4-eyebrow.is-lime{color:var(--v4-lime)}.v4-eyebrow.is-gold{color:var(--v4-gold)}
.v4-eyebrow.is-pill{padding:8px 14px 8px 12px;border:1px solid rgba(34,211,238,.28);border-radius:999px;background:rgba(34,211,238,.06)}
/* Production rhythm (dark-theme .hero h1): Inter 800 with modest tracking; tighter read as squeezed. */
.v4-h1{margin:0 0 22px;font-size:clamp(38px,5vw,64px);font-weight:800;line-height:1.1;letter-spacing:-.027em}
.v4-h2{margin:0;font-size:clamp(30px,3.6vw,46px);font-weight:800;line-height:1.12;letter-spacing:-.022em}
.v4-h3{margin:0 0 8px;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.v4-lead{margin:16px 0 0;color:var(--text-secondary);font-size:clamp(16px,1.5vw,19px);line-height:1.6}
.v4-muted{color:var(--text-secondary)}
.v4-grad{background:var(--v4-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- layout ---------- */
.v4-section{position:relative;padding:var(--v4-section) 0;scroll-margin-top:84px}
.v4-head{max-width:720px;margin:0 auto 48px;text-align:center}
.v4-head .v4-lead{margin-inline:auto;max-width:600px}
.v4-head.is-left{margin-inline:0;text-align:left}.v4-head.is-left .v4-lead{margin-inline:0}
.v4-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.v4-grid.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v4-grid.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.v4-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
@media(max-width:960px){.v4-grid.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.v4-grid,.v4-grid.is-2,.v4-split{grid-template-columns:1fr}.v4-head{margin-bottom:34px}}
@media(max-width:520px){.v4-grid.is-4{grid-template-columns:1fr}}

/* ---------- surfaces ---------- */
.v4-card{position:relative;padding:28px;border:1px solid var(--v4-line);border-radius:var(--v4-r);background:var(--v4-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),var(--v4-shadow);transition:border-color .25s ease,transform .25s ease}
.v4-card:hover{border-color:var(--v4-line-strong)}
.v4-card p:not(.v4-eyebrow){margin:0;color:var(--text-secondary);font-size:15px;line-height:1.65}
/* an accent card carries a light on its top edge in that accent */
.v4-card[class*="--"]::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--v4-accent),transparent);box-shadow:0 0 18px var(--v4-accent)}
.v4-card[class*="--"]{background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--v4-accent) 9%,transparent),transparent 70%),var(--v4-surface)}
.v4-card--cyan{--v4-accent:var(--v4-cyan)}.v4-card--violet{--v4-accent:var(--v4-violet)}.v4-card--lime{--v4-accent:var(--v4-lime)}
.v4-card--amber{--v4-accent:var(--v4-amber)}.v4-card--gold{--v4-accent:var(--v4-gold)}
.v4-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;border-radius:13px;color:var(--v4-accent,var(--v4-cyan));
  background:color-mix(in srgb,var(--v4-accent,var(--v4-cyan)) 13%,transparent);border:1px solid color-mix(in srgb,var(--v4-accent,var(--v4-cyan)) 30%,transparent)}
.v4-icon svg{width:22px;height:22px}
/* the backdrop a real product surface (Mini / Panel) sits on */
.v4-panel-bg{position:relative;display:flex;justify-content:center;align-items:center;padding:40px 28px;border:1px solid var(--v4-line);border-radius:var(--v4-r-lg);
  background:radial-gradient(60% 55% at 50% 45%,rgba(99,102,241,.22),transparent 72%),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 1.5px) 0 0/20px 20px,#10152a;overflow:hidden}

/* ---------- live demos ----------
 * <figure class="v4-stage"><div class="v4-stage-frame">…scene…</div>
 *   <figcaption class="v4-stage-bar"><span class="v4-live">Live demo</span> text <button class="v4-ghost-btn">Pause</button></figcaption></figure>
 */
.v4-stage{position:relative;margin:0}
.v4-stage::before{content:"";position:absolute;inset:-8% 0 4%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 30% 40%,rgba(34,211,238,.16),transparent 70%),radial-gradient(50% 55% at 72% 60%,rgba(124,58,237,.22),transparent 70%)}
/* gradient hairline border as a border-box background: no mask, no extra compositing layer,
   so a paused scene repaints byte-identically */
.v4-stage-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid transparent;isolation:isolate;contain:paint;
  background:linear-gradient(#0a0e1c,#0a0e1c) padding-box,
    linear-gradient(140deg,rgba(34,211,238,.6),rgba(129,140,248,.22) 35%,rgba(129,140,248,.16) 60%,rgba(167,139,250,.5)) border-box;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95)}
.v4-stage-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;color:var(--text-muted);font-size:13.5px}
.v4-stage-bar > span:not(.v4-live){flex:1}
.v4-live{display:inline-flex;align-items:center;gap:8px;color:var(--v4-cyan);font:700 11px/1 var(--v4-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.v4-live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 rgba(34,211,238,.6);animation:v4-live 2s ease-out infinite}
.v4-live.is-paused{color:var(--v4-amber)}.v4-live.is-paused::before{animation:none}
@keyframes v4-live{0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}70%,100%{box-shadow:0 0 0 9px rgba(34,211,238,0)}}
.v4-ghost-btn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border:1px solid var(--v4-line-strong);border-radius:9px;
  color:var(--text-secondary);background:rgba(20,26,48,.6);font:600 13px/1 Inter,system-ui,sans-serif;cursor:pointer}
/* no transition: a repaint beside a paused, scaled scene re-rasters its tile and moves pixels */
.v4-ghost-btn:hover{border-color:rgba(34,211,238,.5);color:var(--text)}

/* ---------- bits ---------- */
/* numbered steps on a gradient rail; horizontal by default, .is-vertical for a column */
.v4-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;counter-reset:v4step}
.v4-steps::before{content:"";position:absolute;left:calc(16.66% + 6px);right:calc(16.66% + 6px);top:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--v4-cyan),var(--v4-indigo),var(--v4-violet));opacity:.55}
.v4-steps > li{position:relative;text-align:center;counter-increment:v4step}
.v4-steps > li::before{content:counter(v4step);position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;margin:0 auto 18px;border-radius:50%;
  color:#fff;font:800 17px/1 Inter,sans-serif;background:var(--v4-surface-solid);border:1.5px solid var(--v4-line-strong);box-shadow:0 0 0 6px var(--bg)}
.v4-steps > li:nth-child(1)::before{border-color:var(--v4-cyan);box-shadow:0 0 0 6px var(--bg),0 0 22px rgba(34,211,238,.35)}
.v4-steps > li:nth-child(2)::before{border-color:var(--v4-indigo);box-shadow:0 0 0 6px var(--bg),0 0 22px rgba(129,140,248,.35)}
.v4-steps > li:nth-child(3)::before{border-color:var(--v4-violet);box-shadow:0 0 0 6px var(--bg),0 0 22px rgba(167,139,250,.35)}
.v4-steps h3{margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.v4-steps p{margin:0 auto;max-width:30ch;color:var(--text-secondary);font-size:15px;line-height:1.6}
@media(max-width:760px){
  .v4-steps{grid-template-columns:1fr;gap:26px}
  .v4-steps::before{left:22px;right:auto;top:23px;bottom:23px;width:2px;height:auto;background:linear-gradient(180deg,var(--v4-cyan),var(--v4-indigo),var(--v4-violet))}
  .v4-steps > li{display:grid;grid-template-columns:46px 1fr;gap:0 18px;text-align:left}
  .v4-steps > li::before{grid-row:span 2;margin:0}
  .v4-steps p{margin:0}
}
.v4-kbd{display:inline-flex;gap:4px;vertical-align:middle}
.v4-kbd kbd,kbd.v4-key{display:inline-block;min-width:24px;padding:3px 7px;border:1px solid #34395a;border-bottom-width:2px;border-radius:6px;
  background:#161b30;color:#d9dcf0;font:600 11.5px/1.2 var(--v4-mono);text-align:center}
/* the ONE Pro badge: change it here and every Pro label follows */
.v4-pro{display:inline-flex;align-items:center;margin:0 6px;padding:0 7px;border-radius:5px;border:1px solid rgba(251,191,36,.5);
  background:rgba(251,191,36,.12);color:var(--v4-gold);font:700 9.5px/18px var(--v4-mono);letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}
.v4-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid var(--v4-line);background:rgba(20,26,48,.55);
  color:var(--text-secondary);font-size:13px}
.v4-chip svg{width:14px;height:14px;color:var(--v4-cyan)}
.v4-checks{display:flex;flex-direction:column;gap:9px;margin:16px 0 0;padding:0;list-style:none}
.v4-checks li{display:flex;gap:10px;align-items:flex-start;color:var(--text-secondary);font-size:14.5px;line-height:1.55}
.v4-checks li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  background:color-mix(in srgb,var(--v4-accent,var(--v4-cyan)) 20%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- closing call to action ---------- */
.v4-cta{position:relative;margin:24px 0 var(--v4-section);padding:clamp(44px,6vw,72px) 28px;border-radius:var(--v4-r-lg);text-align:center;overflow:hidden;
  background:radial-gradient(60% 90% at 50% 0%,rgba(99,102,241,.28),transparent 70%),radial-gradient(40% 60% at 85% 100%,rgba(34,211,238,.14),transparent 70%),#111731;
  box-shadow:0 0 0 1px var(--v4-line-strong),var(--v4-shadow)}
.v4-cta .v4-h2{margin-bottom:14px}
.v4-cta .v4-lead{margin:0 auto 30px;max-width:520px}
.v4-cta-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}

/* ---------- motion ---------- */
/* launch.js adds .reveal-ready and marks [data-reveal] nodes .is-visible as they scroll in;
   without JavaScript nothing is hidden. */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal-ready [data-reveal].is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal-ready [data-reveal]{opacity:1;transform:none;transition:none}
  .v4-live::before{animation:none}
  .v4-card{transition:none}
}
@media(max-width:560px){.v4-stage-bar > span:not(.v4-live){display:none}.v4-stage-bar{justify-content:space-between}}

/* ---------- long-form reading components ---------- */
.v4-eyebrow.is-amber{color:var(--v4-amber)}
.v4-stage-bar.is-wrap{flex-wrap:wrap}
/* Callouts compose with .v4-card and its feature accent; the icon stays beside the copy. */
.v4-note{display:flex;align-items:flex-start;gap:13px}
.v4-note > svg,.v4-note .ic{flex:none;width:20px;height:20px;margin-top:2px;color:var(--v4-accent,var(--text-muted))}
.v4-note > div{min-width:0}
.v4-note small{display:block;margin-top:4px;color:var(--text-secondary);font-size:13px;font-weight:400;line-height:1.6}
.v4-card-title{display:flex;align-items:center;gap:9px}
.v4-card-title svg{flex:none;width:20px;height:20px;color:var(--v4-accent,var(--v4-cyan))}
.v4-ghost-btn.is-gold{margin-top:18px;color:var(--v4-gold);border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.1);text-decoration:none}
.v4-ghost-btn.is-gold:hover{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.18)}
.v4-ghost-btn.is-gold svg{width:14px;height:14px}
.v4-chip.cyan{color:var(--v4-cyan)}.v4-chip.violet{color:var(--v4-violet)}
.v4-chip.lime{color:var(--v4-lime)}.v4-chip.amber{color:var(--v4-amber)}

/* Rich, vertical steps accept arbitrary inline copy in .v4-step-copy. */
.v4-steps.is-vertical{grid-template-columns:1fr;gap:26px}
.v4-steps.is-vertical::before{left:22px;right:auto;top:23px;bottom:23px;width:2px;height:auto;
  background:linear-gradient(180deg,var(--v4-cyan),var(--v4-indigo),var(--v4-violet))}
.v4-steps.is-vertical > li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:0 18px;text-align:left}
.v4-steps.is-vertical > li::before{grid-row:span 2;margin:0}
.v4-step-copy{min-width:0;color:var(--text-secondary);font-size:15px;line-height:1.68}

/* Wide reference data scrolls within its container rather than widening the page. */
.v4-table{min-width:0;overflow-x:auto;margin:18px 0;border:1px solid var(--v4-line);border-radius:var(--v4-r);background:var(--v4-surface)}
.v4-table table{width:100%;min-width:460px;border-collapse:collapse;font-size:14px}
.v4-table th,.v4-table td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--v4-line);color:var(--text-secondary);vertical-align:top}
.v4-table th{color:var(--text-muted);font:700 11px/1.5 var(--v4-mono);letter-spacing:.07em;text-transform:uppercase}
.v4-table tbody tr:last-child td{border-bottom:none}
.v4-table td.k{white-space:nowrap}
.v4-table .tick{color:var(--v4-cyan);font-weight:700}.v4-table .cross{color:var(--text-muted)}
.v4-table .gold{color:var(--v4-gold);font-weight:700}

/* TOC layout (sticky/sidebar/mobile toggle) belongs to the page using it. */
.v4-toc-group{margin-bottom:20px}
.v4-toc-title{margin:0 0 8px 10px;color:var(--text-muted);font:700 11px/1.5 var(--v4-mono);letter-spacing:.1em;text-transform:uppercase}
.v4-toc a{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:1px 0;border-radius:8px;border-left:2px solid transparent;
  color:var(--text-secondary);font-size:13.5px;text-decoration:none;transition:color .15s,background .15s,border-color .15s}
.v4-toc a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.v4-toc a.active{color:var(--text);background:rgba(34,211,238,.08);border-left-color:var(--v4-cyan);font-weight:600}
.v4-toc .pro-dot{margin-left:auto;flex:none;width:5px;height:5px;border-radius:50%;background:var(--v4-gold);opacity:.8}

.v4-disclosure{padding:0;margin:10px 0;overflow:hidden}
.v4-disclosure summary{display:flex;align-items:center;gap:12px;padding:18px 22px;list-style:none;cursor:pointer;color:var(--text);font-size:15px;font-weight:600}
.v4-disclosure summary::-webkit-details-marker{display:none}
.v4-disclosure summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.v4-disclosure[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.v4-disclosure summary:hover{background:rgba(255,255,255,.02)}
.v4-disclosure-body{padding:0 22px 20px}
.v4-disclosure-body p:last-child{margin-bottom:0}

/* ---------- features with a real product surface ---------- */
.v4-feature{display:flex;flex-direction:column;min-width:0;padding:0}
.v4-feature::before{z-index:1;pointer-events:none}
.v4-feature.wide,.v4-feature.split{grid-column:1 / -1}
.v4-feature > .v4-panel-bg{flex:1;min-width:0;min-height:280px;padding:36px 20px;border:0;border-bottom:1px solid var(--v4-line);
  border-radius:var(--v4-r) var(--v4-r) 0 0}
.v4-feature-body{min-width:0;padding:24px 28px 28px}
.v4-feature.split{flex-direction:row}
.v4-feature.split > .v4-panel-bg{flex:0 0 40%;border-bottom:0;border-right:1px solid var(--v4-line);border-radius:var(--v4-r) 0 0 var(--v4-r)}
.v4-feature.split > .v4-feature-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:36px 44px}
@media(max-width:900px){
  .v4-feature.split{flex-direction:column}
  .v4-feature.split > .v4-panel-bg{flex:auto;border-right:0;border-bottom:1px solid var(--v4-line);border-radius:var(--v4-r) var(--v4-r) 0 0}
  .v4-feature.split > .v4-feature-body{padding:24px}
}
@media(max-width:520px){
  .v4-note{padding:22px}
  .v4-feature-body{padding:22px}
}

/* ---------- Guide: real Start/Stop settings examples ---------- */
.settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px 36px;padding:28px;align-items:center}
.settings-options{min-width:0;display:grid;gap:8px}
.settings-options button{font:inherit;text-align:left;color:var(--text-secondary);background:transparent;border:1px solid var(--v4-line);border-radius:var(--v4-r-sm);padding:10px 12px;cursor:pointer}
.settings-options button b{display:block;color:var(--text);font-size:14px;margin-bottom:4px}
.settings-options button span{display:block;font-size:13px;line-height:1.55}
.settings-options button:hover{border-color:var(--v4-cyan)}
.settings-options button[aria-pressed="true"]{background:rgba(34,211,238,.08);border-color:var(--v4-cyan)}
.settings-options button:focus-visible{outline:2px solid var(--v4-cyan);outline-offset:3px}
.settings-preview{width:320px;max-width:100%;min-width:0;overflow-x:auto}
.settings-viewport{width:320px;overflow:hidden;border-radius:var(--v4-r-sm)}
.settings-surface{display:block;width:320px;pointer-events:none}
@media(max-width:1100px){.settings-layout{grid-template-columns:1fr}.settings-preview{justify-self:center}}
@media(max-width:560px){.settings-layout{padding:16px 12px;gap:18px}}

/* ---------- Update: always-visible data notice, below the closing CTA ---------- */
.update-body .v4-data-footnote{max-width:880px;margin:8px auto 28px;font-size:12px;line-height:1.65;color:var(--text-muted)}
.v4-data-footnote span{font-weight:400}
.v4-data-footnote a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.v4-data-footnote code{font:inherit}
/* Human-readable size names need room alongside the real surfaces on phones. */
@media(max-width:640px){.update-body .v4-feature.wide .art{flex-wrap:wrap}}

/* Full-panel reference figures: scene chrome never changes product controls. */
.settings-figure.is-full .settings-preview{width:320px;max-width:100%;overflow:visible}
.settings-figure.is-full .settings-viewport{position:relative;max-width:100%;overflow:visible;border-radius:0}
.settings-figure.is-full .settings-surface{transform-origin:0 0;margin-top:0}
.settings-row-ring{position:absolute;z-index:2;box-sizing:border-box;pointer-events:none;border:2px solid var(--v4-cyan);border-radius:9px;box-shadow:0 0 0 4px rgba(34,211,238,.12),0 0 18px rgba(34,211,238,.2)}
.settings-row-ring[hidden]{display:none}
/* Tour mode (an untouched figure on screen): the ring glides to each row and the active option fills a bar. */
/* A touring figure repaints every few seconds; its own layer and paint containment keep that from
   re-rastering a paused, scaled scene next to it. The ring moves by transform only (compositor). */
.settings-figure{contain:paint;isolation:isolate}
.settings-figure.is-touring{will-change:transform}
.settings-row-ring{left:0;top:0;will-change:transform;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.settings-options button{position:relative;overflow:hidden;transition:border-color .25s,background-color .25s}
.settings-figure.is-touring .settings-options button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(34,211,238,.32);transform-origin:left;will-change:transform;animation:settingsTour 2.4s linear both}
@keyframes settingsTour{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.settings-row-ring{transition:none}.settings-figure .settings-options button::after{display:none}}
.settings-figure.is-full .v4-stage-bar{display:block;line-height:1.6}
.settings-figure.is-full .settings-layout{overflow:visible}
@media(max-width:560px){.settings-figure.is-full .settings-layout{padding:18px 10px}.settings-figure.is-full .settings-preview{width:100%}}
.article h3[id],.v4-tour-block{scroll-margin-top:92px}
.v4-tour-index{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 36px}
.v4-tour-index a{padding:8px 14px;border:1px solid var(--v4-line-strong);border-radius:999px;color:var(--text-secondary);font-size:14px;text-decoration:none}
.v4-tour-index a:hover{color:var(--v4-cyan);border-color:var(--v4-cyan)}
.v4-tour-block{max-width:880px;margin:0 auto;padding:36px 0;border-top:1px solid var(--v4-line)}
.v4-tour-block > .v4-h3{font-size:clamp(24px,3vw,32px);margin-bottom:18px}
.v4-tour-block > p{max-width:72ch;color:#c8cde0;font-size:16px;line-height:1.75;margin:12px 0}
.v4-tour-block .settings-figure{margin:26px 0}
.v4-tour-surface{margin:24px 0}
.v4-tour-surface .v4-panel-bg{padding:28px 12px}
.v4-tour-surface .v4-stage-bar{display:block;line-height:1.6}
.v4-guide-link{margin-top:22px !important}
.v4-guide-link a{color:var(--v4-cyan);font-weight:600;text-decoration:none;text-underline-offset:4px}
.v4-guide-link a:hover{text-decoration:underline}
.update-body > .wrap > .v4-guide-link{max-width:880px;margin-inline:auto}
@media(max-width:380px){.v4-tour-surface .mount[data-kind="panel"]{zoom:.85}}
/* ---------- Uninstall and Support: feedback before the product tour ---------- */
.lifecycle-body .wrap{max-width:1160px}
.lifecycle-body a:not(.btn-install):not(.btn-secondary):not(.nav-brand):not(.nav-link):not(.skip-link):not(.support-jump a){color:var(--v4-cyan);text-underline-offset:4px}
.lifecycle-body :is(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--v4-cyan);outline-offset:4px}
.lifecycle-hero{max-width:790px;padding:46px 0 30px}
.lifecycle-hero .v4-h1{font-size:clamp(34px,4.7vw,58px);text-wrap:balance}
.lifecycle-hero .v4-lead{margin-top:0;max-width:660px}
.lifecycle-feedback{max-width:840px;padding:32px}
.lifecycle-form-head{margin-bottom:26px}
.lifecycle-form-head .v4-h3{font-size:24px;margin-bottom:10px}
.lifecycle-form-head p{max-width:65ch}
.lifecycle-body :is(.fb-group,.sf-group){margin:0 0 24px}
.lifecycle-body :is(.fb-label,.sf-label){display:block;margin:0 0 10px;color:var(--text);font-size:14px;font-weight:650;line-height:1.5}
.sf-optional{color:var(--text-secondary);font-weight:400}
.lifecycle-body :is(.fb-textarea,.sf-textarea,.sf-input,.sf-select){width:100%;padding:13px 15px;border:1px solid var(--v4-line-strong);border-radius:var(--v4-r-sm);background:#10152a;color:var(--text);font:400 15px/1.6 Inter,system-ui,sans-serif}
.lifecycle-body :is(.fb-textarea,.sf-textarea){min-height:120px;resize:vertical}
.lifecycle-body :is(input,textarea)::placeholder{color:var(--text-secondary);opacity:.8}
.sf-select{cursor:pointer}.sf-select option{background:#10152a;color:var(--text)}
.fb-options{display:flex;flex-wrap:wrap;gap:10px}
.fb-option{display:flex;align-items:center;gap:9px;min-height:44px;max-width:100%;padding:10px 14px;border:1px solid var(--v4-line-strong);border-radius:24px;background:#10152a;color:var(--text-secondary);font-size:14px;line-height:1.45;cursor:pointer}
.fb-option:hover{border-color:var(--v4-violet)}
.fb-option.selected{background:rgba(167,139,250,.12);border-color:var(--v4-violet);color:var(--text)}
.fb-radio{flex:none;display:grid;place-items:center;width:16px;height:16px;border:1.5px solid #8b91b5;border-radius:50%}
.fb-option.selected .fb-radio{border-color:var(--v4-violet)}
.fb-option.selected .fb-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--v4-violet)}
.fb-other-input{width:190px;max-width:100%;min-width:0;padding:0;border:0;background:transparent;color:var(--text);font:inherit}
.fb-hint{display:none;margin:0 0 24px;padding:18px 20px;border:1px solid transparent;border-radius:var(--v4-r-sm);background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(167,139,250,.14)) padding-box,linear-gradient(#121a38,#121a38) padding-box,linear-gradient(135deg,var(--v4-cyan),var(--v4-violet)) border-box;box-shadow:0 18px 40px -24px rgba(34,211,238,.55)}
.fb-hint.visible{animation:fbHintIn .45s cubic-bezier(.22,1,.36,1)}
@keyframes fbHintIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fb-hint.visible{animation:none}}
.fb-hint.visible{display:block}
.fb-hint-title{margin-bottom:7px;font-weight:750;font-size:16.5px;color:#fff}
.fb-hint-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.fb-hint-btn{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--v4-line-strong);border-radius:8px;font-size:13px;font-weight:650;text-decoration:none}
.fb-hint-btn:hover{border-color:var(--v4-cyan)}
.lifecycle-body :is(.fb-submit,.sf-submit){display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 26px;border:0;border-radius:12px;background:var(--v4-grad);color:#07101d;font:750 15px/1.4 Inter,system-ui,sans-serif;cursor:pointer}
.lifecycle-body :is(.fb-submit,.sf-submit):hover{filter:brightness(1.1)}
.lifecycle-body :is(.fb-submit,.sf-submit):disabled{opacity:.6;cursor:not-allowed}
.lifecycle-body :is(.fb-thanks,.sf-thanks){display:none;padding:24px;border:1px solid rgba(34,211,238,.3);border-radius:var(--v4-r);background:rgba(34,211,238,.06)}
.lifecycle-body :is(.fb-thanks,.sf-thanks).visible{display:block}
.lifecycle-body :is(.fb-thanks,.sf-thanks) h3{margin:0 0 8px;color:var(--v4-cyan);font-size:22px}
.lifecycle-fixes{display:grid;gap:18px}
.lifecycle-fix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.lifecycle-fix > *{min-width:0}
.lifecycle-more{display:inline-block;margin-top:16px;font-size:14px;font-weight:650;line-height:1.6;text-decoration:none}
.lifecycle-more:hover{text-decoration:underline}
.lifecycle-figure{margin:0;min-width:0}
.lifecycle-figure > figcaption{margin-top:10px;color:var(--text-secondary);font-size:12.5px;line-height:1.55}
.lifecycle-clip{position:relative;aspect-ratio:1380/989;overflow:hidden;border:1px solid var(--v4-line-strong);border-radius:12px;background:#0a0e1c;contain:paint}
.lifecycle-clip .clip-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;pointer-events:none}
.lifecycle-clip[data-variant="speed"]{aspect-ratio:420/220}
.lifecycle-clip[data-variant="firstrun"]{aspect-ratio:260/240}
.lifecycle-clip.lifecycle-target-clip{aspect-ratio:396/366}
.lifecycle-clip[data-crop="350,490,1050,260"]{aspect-ratio:1050/260}
.lifecycle-surfaces{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;padding:28px 16px}
.lifecycle-surfaces figure{text-align:center;margin:0}
.lifecycle-surfaces figcaption{margin-top:12px;font-size:12px;color:var(--text-secondary)}
/* Preview the full panel’s transport in the size comparison. */
.lifecycle-feature-media .lifecycle-surfaces [data-kind="panel"]{display:block;height:280px;overflow:hidden;zoom:.7}
/* Awake lives in the POWER row: show the bottom of the real player, not all of it. */
.lifecycle-power{display:flex;align-items:flex-end;justify-content:center;height:170px;padding:0 14px 18px;overflow:hidden}
.lifecycle-fix .lifecycle-surfaces [data-kind="mini"]{zoom:.72}
.lifecycle-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.lifecycle-start .lifecycle-figure figcaption{font-size:12px}
.lifecycle-feature-media{padding:20px 20px 0;min-width:0}
.lifecycle-feature-media .lifecycle-surfaces{min-height:280px}
.lifecycle-panel-crop{height:388px;align-items:flex-start;padding:18px 12px}
.lifecycle-panel-crop [data-tx-surface]{pointer-events:none}
.lifecycle-feature-media [data-tx-surface]{pointer-events:none}
.lifecycle-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.lifecycle-cta-note{margin:24px 0 0;color:var(--text-secondary);font-size:13px;line-height:1.6}
.lifecycle-contact-paths{max-width:840px}
.lifecycle-body a.lifecycle-contact{display:block;color:var(--text);text-decoration:none}
.lifecycle-contact .lifecycle-more{color:var(--v4-cyan)}
.lifecycle-questions .v4-card{padding:22px 24px}
.lifecycle-questions .v4-h3{font-size:18px}
.lifecycle-troubleshooting{padding:26px 30px}
.lifecycle-support-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}
.lifecycle-support-layout > *{min-width:0}
.support-section{scroll-margin-top:90px}
.lifecycle-support-notes{display:grid;gap:20px}
.lifecycle-support-notes .v4-card p.lifecycle-note-copy{margin-top:12px}
.lifecycle-alt-contact{padding:0 0 48px;font-size:14px;color:var(--text-secondary);line-height:1.8}
.lifecycle-alt-contact p{margin:0 0 8px}
.lifecycle-body .nav-brand,.lifecycle-body .nav-links .btn-install{white-space:nowrap}
@media(max-width:900px){
  .lifecycle-support-layout{grid-template-columns:1fr}
  .lifecycle-support-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lifecycle-support-notes > figure{grid-column:1 / -1}
}
@media(max-width:760px){
  .lifecycle-fix{grid-template-columns:1fr;gap:24px}
  .lifecycle-support-notes{grid-template-columns:1fr}
  .lifecycle-hero{padding-top:32px}
}
@media(max-width:560px){
  .lifecycle-body .wrap{padding-inline:18px}
  .lifecycle-body .nav-inner{padding-inline:16px}
  .lifecycle-body .nav-brand{font-size:12px;gap:7px}
  .lifecycle-body .nav-brand img{width:23px;height:23px}
  .lifecycle-body .nav-links{gap:8px}
  .lifecycle-body .nav-links .btn-install{padding:9px 12px;font-size:12px}
  .lifecycle-body .hide-mobile{display:none}
  .lifecycle-feedback,.lifecycle-fix,.lifecycle-troubleshooting,.support-section{padding:22px 18px}
  .fb-option{font-size:13px;padding:10px 12px}
  .lifecycle-start{grid-template-columns:1fr;gap:16px}
  .lifecycle-start .lifecycle-figure{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:16px}
  .lifecycle-start .lifecycle-figure figcaption{margin:0;font-size:14px}
  .lifecycle-feature-media{padding:16px 16px 0}
  .lifecycle-feature-media .lifecycle-surfaces{padding:20px 10px;gap:20px}
  .lifecycle-surfaces [data-kind="panel"]{zoom:.7}
  .lifecycle-actions > a{width:100%;justify-content:center}
}

/* ---------- big figures (home) ----------
 * <div class="v4-stats"><div><b data-count="50000" data-suffix="+">50,000+</b><span>label</span></div>…</div>
 * launch.js counts [data-count] up once on screen; the markup already holds the final value. */
.v4-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--v4-line);border-radius:var(--v4-r-lg);
  background:linear-gradient(180deg,rgba(28,35,62,.6),rgba(17,22,41,.6));overflow:hidden}
.v4-stats > div{padding:30px 18px 26px;text-align:center;border-left:1px solid var(--v4-line)}
.v4-stats > div:first-child{border-left:0}
.v4-stats b{display:block;font:800 clamp(34px,4vw,52px)/1 Inter,sans-serif;letter-spacing:-.02em;
  background:var(--v4-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.v4-stats span{display:block;margin-top:10px;color:var(--text-secondary);font-size:14px;font-weight:500}
.v4-stats small{display:block;margin-top:3px;color:var(--text-muted);font-size:12px}
@media(max-width:760px){.v4-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-stats > div:nth-child(3){border-left:0}.v4-stats > div:nth-child(n+3){border-top:1px solid var(--v4-line)}}
/* Three sizes side by side in one row: smaller real surfaces, bottoms aligned, no wrap. */
.lifecycle-feature-media .lifecycle-surfaces{flex-wrap:nowrap;align-items:flex-end;gap:14px;min-height:0}
.lifecycle-feature-media .lifecycle-surfaces [data-kind="mini"]{zoom:.62}
.lifecycle-feature-media .lifecycle-surfaces [data-kind="panel"]{height:auto;overflow:visible;zoom:.42}
/* Tour blocks with a figure: the title first, the live figure full width under it, then the copy in
   two columns. Nothing sits beside a tall figure, so there is no empty column to fill. */
.v4-tour-block:has(> figure){max-width:1100px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;align-content:start}
.v4-tour-block:has(> figure) > *{grid-column:1 / -1}
.v4-tour-block:has(> figure) > .v4-h3{grid-row:1}
.v4-tour-block:has(> figure) > figure{grid-row:2;margin:6px 0 24px}
.v4-tour-block:has(> figure) > p:nth-of-type(1){grid-column:1;grid-row:3;margin-top:0}
.v4-tour-block:has(> figure) > p:nth-of-type(2){grid-column:2;grid-row:3;margin-top:0}
.v4-tour-block:has(> figure) > .v4-guide-link{grid-row:4}
.v4-tour-surface .lifecycle-clip{border-radius:16px;box-shadow:0 0 0 1px rgba(148,163,255,.2),0 40px 90px -40px rgba(0,0,0,.95)}
@media(max-width:860px){.v4-tour-block:has(> figure){grid-template-columns:1fr}
  .v4-tour-block:has(> figure) > p:nth-of-type(n){grid-column:1;grid-row:auto}}
.v4-tour-bridge{margin:0 0 16px;text-align:center;color:var(--v4-cyan);font:700 12px/1 var(--v4-mono);letter-spacing:.16em;text-transform:uppercase}
.v4-seq-crop{display:flex;justify-content:center;align-items:flex-start;height:430px;overflow:hidden;padding-top:0 !important;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.v4-seq-crop .mount{margin-top:-30px;pointer-events:none}
/* More settings: a legend beside the cycling panel; the item the panel just changed lights up. */
.v4-cycle-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;padding:32px 40px !important}
.v4-cycle-legend{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.v4-cycle-legend li{padding:12px 16px;border:1px solid var(--v4-line);border-radius:12px;color:var(--text-secondary);font-size:14px;line-height:1.5;transition:border-color .35s,background-color .35s,transform .35s}
.v4-cycle-legend b{display:block;color:var(--text);font-size:15px;margin-bottom:2px}
.v4-cycle-legend li.is-on{border-color:var(--v4-cyan);background:rgba(34,211,238,.08);transform:translateX(6px)}
@media(max-width:760px){.v4-cycle-layout{grid-template-columns:1fr;justify-items:center;padding:24px 14px !important}.v4-cycle-legend{width:100%}}
@media(prefers-reduced-motion:reduce){.v4-cycle-legend li{transition:none}.v4-cycle-legend li.is-on{transform:none}}
.v4-power-cards{max-width:1100px;margin:0 auto 24px;grid-template-columns:repeat(3,minmax(0,1fr))}
.v4-power-card .v4-h3{font-size:19px;line-height:1.3;margin-bottom:12px}
.v4-power-card .v4-h3 .v4-pro{margin-left:6px;vertical-align:3px}
.v4-power-card p:not(.v4-eyebrow){margin:0 0 12px}
.v4-power-card .v4-guide-link{margin-top:16px}
/* POWER: the bottom of the real panel, close up, instead of a whole panel on an empty field. */
.v4-power-crop{display:flex;justify-content:center;align-items:flex-end;height:230px;overflow:hidden;padding-bottom:0 !important;-webkit-mask-image:linear-gradient(transparent,#000 34%);mask-image:linear-gradient(transparent,#000 34%)}
.v4-power-crop .mount{zoom:1.45;pointer-events:none}
@media(max-width:560px){.v4-power-crop{height:170px}.v4-power-crop .mount{zoom:1}}
@media(max-width:900px){.v4-power-cards{grid-template-columns:1fr}}

/* ---------- guide search (in the contents rail) ---------- */
.v4-search{position:relative;margin:0 0 18px}
.v4-search-box{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border:1px solid var(--v4-line-strong);border-radius:11px;background:rgba(15,20,38,.75);transition:border-color .2s}
.v4-search-box:focus-within{border-color:var(--v4-cyan);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.v4-search-box svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--text-muted);stroke-width:2;stroke-linecap:round}
.v4-search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:500 14px Inter,sans-serif}
.v4-search-box input::placeholder{color:var(--text-muted)}
.v4-search-box input::-webkit-search-cancel-button{display:none}
.v4-search-box kbd{padding:1px 6px;border:1px solid var(--v4-line-strong);border-radius:5px;color:var(--text-muted);font:600 11px var(--v4-mono)}
.v4-search-results{position:static;margin-top:8px;display:grid;gap:2px;padding:6px;border:1px solid var(--v4-line-strong);border-radius:12px;
  background:#121830;box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
.v4-search-results[hidden]{display:none}
.v4-search-results a{display:block;padding:9px 10px;border-radius:8px;border:0!important;margin:0}
.v4-search-results a:hover,.v4-search-results a.is-active{background:rgba(34,211,238,.1)}
.v4-search-results b{display:block;color:var(--text);font-size:14px;font-weight:650}
.v4-search-results span{display:block;margin-top:3px;color:var(--text-secondary);font-size:12.5px;line-height:1.45}
.v4-search-results mark{background:rgba(34,211,238,.22);color:#e6fbff;border-radius:3px;padding:0 1px}
.v4-search-empty{margin:6px 8px;color:var(--text-secondary);font-size:13px}
.v4-search-empty a{color:var(--v4-cyan)}
/* Uninstall: the first screen pairs a reason to stay with a way to tell us what went wrong. */
.uninstall-body .wrap{max-width:1320px}
.uninstall-first-screen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"intro demo" "feedback demo";gap:22px 36px;padding:32px 0 20px;align-items:start}
.uninstall-first-screen > *{min-width:0}
.uninstall-first-screen .uninstall-intro{grid-area:intro;max-width:none;padding:0}
.uninstall-intro .v4-h1{font-size:clamp(32px,3.1vw,44px);margin-bottom:12px}
.uninstall-intro .v4-lead{font-size:15.5px;line-height:1.6}
.uninstall-comeback{grid-area:demo;padding-top:8px}
/* Match home's scene framing: launch.js scales the 1920×1080 stage to its browser crop. */
.uninstall-comeback .hero-scene img{display:block;width:100%;height:auto}
.uninstall-comeback .hero-scene.has-scene img{display:none}
.uninstall-comeback .scene-frame{position:relative;width:100%;aspect-ratio:1380/989;overflow:hidden;background:#0a0e1c}
.uninstall-comeback .scene-frame[hidden]{display:none}
.uninstall-comeback .scene-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
.uninstall-comeback .v4-stage-bar{flex-wrap:wrap;gap:10px;font-size:14px}
.uninstall-comeback .v4-stage-bar > span:not(.v4-live){display:inline;color:var(--text);min-width:145px}
.uninstall-comeback-actions{display:grid;gap:10px;margin-top:24px;text-align:center}
.uninstall-comeback .uninstall-reinstall{justify-content:center;min-height:64px;padding:16px 24px;border-radius:16px;background:var(--v4-grad);color:#07101d;font-size:20px;font-weight:800;box-shadow:0 12px 38px -14px rgba(129,140,248,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.uninstall-comeback .uninstall-support{display:inline-flex;justify-content:center;align-items:center;min-height:44px;font-size:14px;font-weight:650;text-decoration:none}
.uninstall-comeback .uninstall-support:hover{text-decoration:underline}
.uninstall-first-screen .lifecycle-feedback{grid-area:feedback;max-width:none;padding:22px}
.uninstall-first-screen .lifecycle-form-head{margin-bottom:16px}
.uninstall-first-screen .lifecycle-form-head .v4-h3{font-size:22px;margin-bottom:6px}
.uninstall-first-screen .lifecycle-form-head p{font-size:13px;line-height:1.5}
.uninstall-first-screen .fb-group{margin-bottom:16px}
.uninstall-first-screen .fb-label{font-size:13px;margin-bottom:8px}
.uninstall-first-screen .fb-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.uninstall-first-screen .fb-option{min-width:0;min-height:60px;padding:10px;border-radius:12px;gap:9px;font-size:13px;line-height:1.4;background:linear-gradient(135deg,rgba(167,139,250,.045),transparent),#10152a}
.uninstall-first-screen .fb-option:hover{background:rgba(167,139,250,.1);border-color:var(--v4-violet)}
.uninstall-first-screen .fb-option.selected{background:rgba(167,139,250,.18);border-color:var(--v4-violet);box-shadow:inset 0 0 0 1px var(--v4-violet);color:var(--text)}
.uninstall-first-screen .fb-option-icon{flex:none;width:24px;height:24px;color:var(--v4-violet)}
.uninstall-first-screen .fb-radio{order:3;margin-left:auto;width:14px;height:14px}
.uninstall-first-screen .fb-option > span,.uninstall-first-screen .fb-other-input{flex:1;min-width:0}
.uninstall-first-screen .fb-other-input{width:100%}
.uninstall-first-screen .fb-textarea{min-height:66px;height:66px;padding:10px 12px;font-size:13px}
.uninstall-body .v4-section{padding:46px 0}
.uninstall-body .v4-head{margin-bottom:28px}

/* Uninstall: "Other" takes the full row when chosen, and the detail field asks a question that fits the reason. */
.uninstall-first-screen .fb-option-other.selected{grid-column:1 / -1}
.fb-textarea.is-asked{border-color:rgba(167,139,250,.65);box-shadow:0 0 0 3px rgba(167,139,250,.12)}
/* Uninstall: a chosen reason swaps the general demo for the fix that answers it. */
.uninstall-comeback[data-showing-fix] #demo{display:none}
.uninstall-fix{padding:22px;border:1px solid transparent;border-radius:18px;background:linear-gradient(160deg,#141c3d,#0d1330) padding-box,linear-gradient(140deg,var(--v4-cyan),#a78bfa 55%,rgba(167,139,250,.2)) border-box;box-shadow:0 30px 70px -36px rgba(34,211,238,.6);animation:fbHintIn .5s cubic-bezier(.22,1,.36,1)}
.uninstall-fix[hidden]{display:none}
.uninstall-fix{scroll-margin-top:84px}
.uninstall-fix-kicker{margin:0 0 6px;color:var(--v4-cyan);font:700 11.5px/1 var(--v4-mono);letter-spacing:.16em;text-transform:uppercase}
.uninstall-fix-title{margin:0 0 14px;font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.uninstall-fix .lifecycle-clip{border-radius:12px}
.uninstall-fix-copy{margin:14px 0 0;color:#c8cde0;font-size:15px;line-height:1.65}
.uninstall-fix-copy b{color:#fff}
.uninstall-fix-surfaces{display:flex;justify-content:center;align-items:flex-end;gap:26px;padding:22px 12px;border-radius:12px}
.uninstall-fix-surfaces figure{margin:0;display:grid;justify-items:center;gap:10px}
.uninstall-fix-surfaces figcaption{color:var(--text-secondary);font:700 11px/1 var(--v4-mono);letter-spacing:.12em;text-transform:uppercase}
.uninstall-fix-surfaces [data-kind="mini"]{zoom:.62}
/* the full panel is taller than the box: show its top part, cut by a fade, so it still reads as the biggest */
.uninstall-fix-surfaces{overflow:hidden;align-items:flex-start;max-height:380px;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.uninstall-fix-surfaces figure.is-partial [data-kind="panel"]{zoom:.62}
.uninstall-fix-surfaces figure:not(.is-partial){align-self:center}
.uninstall-fix-arrow{align-self:center;color:var(--v4-indigo);font-size:20px;opacity:.7}
@media(prefers-reduced-motion:reduce){.uninstall-fix{animation:none}}
/* A cycling panel stays anchored at the top of its reserved box: only its own rows change. */
[data-cycle="settings"]{align-self:flex-start}
/* Clip subtitles: one short line on what is happening now, low on the frame like a caption. */
/* subtitles, as on a film: low, narrow, on a plain dark backing, no frame (owner, 2026-10-04: framed
   and glowing, they read as another step) */
.clip-caption{position:absolute;left:50%;bottom:2.5%;z-index:2147483647;display:block;width:max-content;max-width:78%;margin:0;padding:.28em .7em;transform:translateX(-50%);border-radius:6px;
  background:rgba(0,0,0,.72);color:#f8fafc;font:600 clamp(11.5px,1.05vw,15px)/1.35 Inter,sans-serif;text-align:center;white-space:normal;text-wrap:balance;pointer-events:none}
.clip-caption.is-new{animation:clipCaptionIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes clipCaptionIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.clip-caption.is-new{animation:none}}
.clip-caption[hidden]{display:none}
.clip-caption.is-narrow{max-width:88%;font-size:12px}
.v4-sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:560px){.clip-caption{font-size:11px;max-width:90%}}
/* Update: the way back to the player, filmed close up */
.update-reach{max-width:1100px;margin:22px auto 0}
.update-reach .lifecycle-clip{border-radius:16px;box-shadow:0 0 0 1px rgba(148,163,255,.2),0 40px 90px -40px rgba(0,0,0,.95)}
.guide-start-film{margin:18px 0 22px}
.guide-start-film .lifecycle-clip{border-radius:14px}
/* Support: a sticky row of jumps under the site bar, so every part of a long page is one press away. */
.support-jump{position:sticky;top:var(--support-jump-top,64px);z-index:40;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:12px 0;background:var(--bg);box-shadow:0 0 0 100vmax var(--bg),0 1px 0 100vmax var(--v4-line);clip-path:inset(0 -100vmax)}
.support-body .support-jump a{padding:8px 14px;border:1px solid var(--v4-line-strong);border-radius:999px;color:var(--text-secondary);font-size:14px;font-weight:600;text-decoration:none;background:rgba(15,20,40,.92);transition:color .2s,border-color .2s}
.support-body .support-jump a:hover{color:var(--v4-cyan);border-color:var(--v4-cyan)}
.support-body .support-jump a.is-primary{color:#06111c;background:var(--v4-cyan);border-color:var(--v4-cyan)}
.support-body h2[id]{scroll-margin-top:150px}
@media(max-width:560px){.support-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.support-body .support-jump a{flex:none}}
/* Support: each answer starts with the real controls or a short scene excerpt. */
.support-body .lifecycle-questions .support-answer{padding:18px 18px 22px;min-width:0}
.support-answer .support-answer-media{display:flex;align-items:center;justify-content:center;height:272px;min-height:0;margin-bottom:20px;padding:18px;border-radius:12px;overflow:hidden;pointer-events:none}
.support-answer-media .lifecycle-clip{width:100%;border-radius:9px}
.support-answer-media .support-start-clip{max-width:320px;aspect-ratio:260/165}
.support-answer-media .support-speed-clip{max-width:460px;aspect-ratio:714/295}
.support-answer-media.lifecycle-surfaces{flex-wrap:nowrap;gap:22px;padding:18px}
.support-answer-media.lifecycle-surfaces [data-kind="mini"]{zoom:.44}
/* Power and panel answers show the relevant end of a taller real surface and let the rest fall away. */
.support-answer .support-answer-media.lifecycle-power{align-items:flex-end;padding-bottom:0}
.support-answer .support-panel-media{align-items:flex-start;padding-top:0;padding-bottom:0;-webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
.support-panel-media [data-kind="panel"]{zoom:.86;margin-top:-58px}
.support-answer > .v4-h3,.support-answer > p:not(.v4-eyebrow),.support-answer > .lifecycle-more{margin-left:4px;margin-right:4px}
.support-answer:hover .support-answer-media{border-color:rgba(34,211,238,.32)}
@media(max-width:1100px) and (min-width:861px){
  .uninstall-first-screen{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 24px}
  .uninstall-intro .v4-h1{font-size:34px}
  .uninstall-first-screen .fb-option{gap:7px}
  .uninstall-first-screen .fb-option-icon{width:20px;height:20px}
}
@media(max-width:860px){
  .uninstall-first-screen{grid-template-columns:1fr;grid-template-areas:"intro" "demo" "feedback";gap:24px;padding-top:28px}
  .uninstall-comeback{padding-top:0}
  .uninstall-intro .v4-h1{font-size:clamp(32px,5vw,44px)}
  .uninstall-body .v4-section{padding:34px 0}
}
@media(max-width:560px){
  .uninstall-first-screen{gap:20px;padding-top:22px}
  .uninstall-intro .v4-lead{font-size:14px}
  .uninstall-comeback .v4-stage-frame{border-radius:12px}
  .uninstall-comeback .v4-stage-bar{margin-top:10px;gap:8px}
  .uninstall-comeback .v4-live{font-size:9px;letter-spacing:.08em}
  .uninstall-comeback .v4-stage-bar > span:not(.v4-live){min-width:0;font-size:12px}
  .uninstall-comeback .v4-ghost-btn{padding-inline:10px;font-size:12px}
  .uninstall-comeback-actions{margin-top:16px;gap:6px}
  .uninstall-comeback .uninstall-reinstall{min-height:56px;font-size:18px}
  .uninstall-first-screen .lifecycle-feedback{padding:20px 16px}
  .uninstall-first-screen .fb-options{grid-template-columns:1fr}
  .uninstall-first-screen .fb-option{min-height:58px;padding:12px;font-size:14px}
  .uninstall-first-screen .fb-textarea{min-height:88px;height:88px;font-size:14px}
  .support-body .lifecycle-questions .support-answer{padding:14px 14px 20px}
  .support-answer .support-answer-media{height:232px;padding:14px}
  .support-answer-media.lifecycle-surfaces{gap:16px}
  .support-answer-media.lifecycle-surfaces [data-kind="mini"]{zoom:.36}
}
@media(hover:none){.v4-search-box kbd{display:none}}

/* ---------- support: common questions accordion ---------- */
.support-faq-list{max-width:900px;border-top:1px solid var(--v4-line)}
.support-faq-item{border-bottom:1px solid var(--v4-line)}
.support-faq-item summary{display:flex;justify-content:space-between;gap:16px;padding:18px 4px;cursor:pointer;font-size:16.5px;font-weight:650;list-style:none}
.support-faq-item summary::-webkit-details-marker{display:none}
.support-faq-item summary::after{content:"+";color:var(--v4-cyan);font:400 22px/1 Inter,sans-serif;transition:transform .2s}
.support-faq-item[open] summary::after{transform:rotate(45deg)}
.support-faq-item p{margin:0 4px 18px;color:var(--text-secondary);font-size:15px;line-height:1.65}
.support-faq-item a{color:var(--v4-cyan)}