/* ============================================================
   SCOVO site styles
   Inherits the real app design language from scovo_app/glass.css:
   same tokens, same materials, same easing, same motion.
   A website version of the app.
   ============================================================ */

/* ---------- fonts (self-hosted, same faces as the app) ---------- */
@font-face{font-family:"Apfel Grotezk";src:url("fonts/ApfelGrotezk-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("fonts/ApfelGrotezk-Mittel.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("fonts/ApfelGrotezk-Satt.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("fonts/ApfelGrotezk-Fett.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/PlusJakartaSans-Variable.ttf") format("truetype-variations");font-weight:200 800;font-display:swap}

/* ---------- tokens: STUDIO (dark), verbatim from glass.css :root ---------- */
:root{
  --ink:#F4EEE3; --ink-2:#CDC3B2; --ink-3:#8F8676; --ink-4:#5f574b;
  --panel:rgba(26,22,18,0.30); --panel-2:rgba(34,28,23,0.40); --rail:rgba(22,18,15,0.26);
  --hair:rgba(255,247,235,0.10); --hair-2:rgba(255,247,235,0.05);
  --gold:#E9BC63; --gold-glow:#F7CF78; --gold-soft:rgba(233,188,99,0.16); --gold-ink:#F3D08A;
  --sage:#A9C4A0; --sage-soft:rgba(169,196,160,0.16); --coral:#E8836B; --coral-soft:rgba(232,131,107,0.16);
  --r-control:10px; --r-action:12px; --r-card:16px; --r-panel:18px;
  --disp:"Apfel Grotezk","Plus Jakarta Sans",system-ui,sans-serif;
  --ui:"Plus Jakarta Sans",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --tile-bg:#16120e;
  --settle:cubic-bezier(.22,1,.36,1); --emphasis:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1); --reveal:cubic-bezier(.16,1,.3,1);
  --primary-bg:linear-gradient(180deg,rgba(24,20,16,.82),rgba(12,10,8,.72));
  --primary-bg-hover:linear-gradient(180deg,rgba(32,27,21,.88),rgba(15,12,10,.78));
  --primary-border:rgba(233,188,99,.42);
  --primary-border-hover:rgba(247,207,120,.62);
  --primary-ink:#F4D894;
  --primary-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.24),0 12px 30px rgba(0,0,0,.28);
  --primary-shadow-hover:inset 0 1px 0 rgba(255,255,255,.16),0 16px 36px rgba(0,0,0,.34),0 0 0 3px rgba(233,188,99,.08);
  --ghost-bg:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  --ghost-bg-hover:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  --ghost-border:var(--hair);
  --ghost-ink:var(--ink-2);
  --page-bg:#0c0a08;
  --glow-color:233,188,99;
}

/* ---------- tokens: MEMORY (light), verbatim from glass.css [data-mode=light] ---------- */
[data-mode="light"]{
  --ink:#241d14; --ink-2:#3f3829; --ink-3:#5c5344; --ink-4:#7c7160;
  --panel:rgba(245,240,231,0.40); --panel-2:rgba(238,231,219,0.52); --rail:rgba(242,236,226,0.34);
  --hair:rgba(60,48,30,0.16); --hair-2:rgba(60,48,30,0.09);
  --gold:#C8932E; --gold-glow:#E0A93C; --gold-soft:rgba(200,147,46,0.18); --gold-ink:#5a3c0a;
  --tile-bg:radial-gradient(120% 120% at 24% 18%,rgba(148,176,202,.24),transparent 58%),linear-gradient(160deg,#dfe7ee,#cfd9e2);
  --primary-bg:linear-gradient(180deg,#37373d,#1b1b1f);
  --primary-bg-hover:linear-gradient(180deg,#41414a,#212127);
  --primary-border:rgba(0,0,0,.16);
  --primary-border-hover:rgba(0,0,0,.22);
  --primary-ink:#fcfcfd;
  --primary-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(26,22,16,.16),0 1px 2px rgba(26,22,16,.12);
  --primary-shadow-hover:inset 0 1px 0 rgba(255,255,255,.16),0 12px 30px rgba(26,22,16,.22),0 2px 5px rgba(26,22,16,.14);
  --ghost-bg:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.56));
  --ghost-bg-hover:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.70));
  --ghost-border:rgba(40,33,22,.13);
  --ghost-ink:#26201a;
  --page-bg:#FAF6EC;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0;background:var(--page-bg);color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;transition:background .5s var(--settle),color .5s var(--settle);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--gold-soft);color:var(--gold-ink)}

/* ---------- the stage: backdrop + graded glass + slow gold glow (from app) ---------- */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stage-grade{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(233,188,99,.05), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, rgba(12,10,8,.6), transparent 55%),
    linear-gradient(180deg, rgba(12,10,8,.35), rgba(12,10,8,.75));
  transition:opacity .5s var(--settle)}
[data-mode="light"] .stage-grade{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200,147,46,.06), transparent 60%),
    linear-gradient(180deg, rgba(250,246,236,.4), rgba(250,246,236,.85));}
.stage-glow{position:absolute;inset:-30%;--glow-color:233,188,99;will-change:transform;
  background:
    radial-gradient(40% 36% at 30% 26%, rgba(var(--glow-color),.20), transparent 60%),
    radial-gradient(34% 32% at 76% 74%, rgba(var(--glow-color),.13), transparent 62%);
  filter:blur(46px);animation:glowdrift 34s ease-in-out infinite alternate}
[data-mode="light"] .stage-glow{filter:blur(52px);opacity:.28}
[data-bg="gold"] .stage-glow{animation:none;transform:translate(2%,1%) scale(1.12);opacity:1;filter:blur(30px)}
[data-bg="none"] .stage-glow{display:none}
[data-bg="none"] .stage-grade{opacity:.4}
@keyframes glowdrift{0%{transform:translate(-9%,-7%) scale(1.05)}50%{transform:translate(10%,6%) scale(1.18)}100%{transform:translate(-5%,10%) scale(1.07)}}
@media(prefers-reduced-motion:reduce){.stage-glow{animation:none}}

/* ---------- shared motion (from app) ---------- */
@keyframes goldreveal{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes scan{0%{transform:translateY(0);opacity:0}18%{opacity:1}100%{transform:translateY(220px);opacity:0}}
@keyframes sweep{from{transform:translateX(-55%)}to{transform:translateX(55%)}}
.reveal-on-scroll{opacity:0}
.reveal-on-scroll.in{animation:goldreveal .5s var(--reveal) both}

/* ---------- buttons (real app button tokens) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui);font-weight:650;font-size:14px;letter-spacing:.005em;
  border-radius:999px;padding:0 18px;height:40px;cursor:pointer;border:1px solid transparent;
  transition:transform .18s var(--settle),box-shadow .22s var(--settle),border-color .18s var(--settle),background .18s var(--settle)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary-bg);border-color:var(--primary-border);color:var(--primary-ink);box-shadow:var(--primary-shadow)}
.btn-primary:hover{background:var(--primary-bg-hover);border-color:var(--primary-border-hover);box-shadow:var(--primary-shadow-hover);transform:translateY(-1px)}
.btn-ghost{background:var(--ghost-bg);border-color:var(--ghost-border);color:var(--ghost-ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn-ghost:hover{background:var(--ghost-bg-hover);transform:translateY(-1px)}
.btn-lg{height:48px;padding:0 24px;font-size:15px}

/* ---------- wordmark (real Sc◉vo lockup) ---------- */
.brand{display:inline-flex;align-items:center;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);gap:0}
.brand .brand-word{display:inline-flex}
.lenso{width:.82em;height:.82em;vertical-align:-.045em;margin:0 -.02em;flex-shrink:0}
.brand-sm{font-size:17px}

/* ---------- NAV (echoes the app titlebar) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:62px;display:flex;align-items:center;gap:20px;
  padding:0 clamp(18px,4vw,44px);
  background:var(--panel);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
  border-bottom:1px solid var(--hair-2);transition:background .5s var(--settle),border-color .5s var(--settle),height .3s var(--settle)}
.nav.scrolled{height:56px;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--ink-3);padding:8px 12px;border-radius:var(--r-control);transition:color .14s,background .14s}
.nav-links a:hover{color:var(--ink);background:var(--hair-2)}
.nav-toggles{display:flex;align-items:center;gap:6px}
.modebtn{font-family:var(--ui);font-size:11px;color:var(--ink-3);background:rgba(255,255,255,.05);border:1px solid var(--hair-2);
  height:28px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  transition:color .14s,border-color .14s,background .14s}
.modebtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
.modebtn:hover{color:var(--ink);border-color:var(--hair)}
[data-mode="light"] .modebtn{background:rgba(255,255,255,.5)}
.nav-cta{margin-left:4px}
@media(max-width:900px){.nav-links{display:none}.nav-toggles .modebtn span{display:none}}

/* ---------- layout primitives ---------- */
main{position:relative;z-index:1}
.band{max-width:1180px;margin:0 auto;padding:clamp(64px,9vw,120px) clamp(20px,5vw,44px)}
.band-head{max-width:720px;margin:0 auto 48px;text-align:center}
.eyebrow{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.section-title{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.8vw,44px);letter-spacing:-.022em;line-height:1.06;margin:0 0 16px;color:var(--ink)}
.section-lede{font-size:clamp(15px,1.4vw,18px);color:var(--ink-2);margin:0;line-height:1.6}

/* ---------- HERO ---------- */
.hero{max-width:1180px;margin:0 auto;padding:clamp(96px,13vw,150px) clamp(20px,5vw,44px) clamp(40px,6vw,72px);
  display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,56px);align-items:center}
@media(min-width:1000px){.hero{grid-template-columns:0.92fr 1.08fr}}
.kicker{font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.display{font-family:var(--disp);font-weight:700;font-size:clamp(46px,8vw,88px);letter-spacing:-.03em;line-height:.98;margin:0 0 22px;color:var(--ink);
  text-shadow:0 2px 60px rgba(0,0,0,.25)}
[data-mode="light"] .display{text-shadow:none}
.lede{font-size:clamp(16px,1.6vw,20px);color:var(--ink-2);max-width:560px;margin:0 0 30px;line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.hero-sub{font-size:13.5px;color:var(--ink-3);margin:0}

/* ---------- APP WINDOW (the faithful product surface, real components) ---------- */
.app-frame{border-radius:20px;overflow:hidden;position:relative;
  background:var(--panel-2);backdrop-filter:blur(36px) saturate(1.3);-webkit-backdrop-filter:blur(36px) saturate(1.3);
  border:1px solid var(--hair);
  box-shadow:0 40px 100px rgba(0,0,0,.5),0 4px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .4s var(--settle)}
[data-mode="light"] .app-frame{box-shadow:0 40px 90px rgba(80,60,30,.22),0 4px 16px rgba(80,60,30,.12),inset 0 1px 0 rgba(255,255,255,.5)}

/* app titlebar */
.app-bar{height:44px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--hair-2);position:relative}
.traffic{display:flex;gap:7px}
.traffic i{width:11px;height:11px;border-radius:50%;background:var(--hair)}
.traffic i:nth-child(1){background:#E8836B88}.traffic i:nth-child(2){background:#E9BC6388}.traffic i:nth-child(3){background:#A9C4A088}
.app-search{flex:1;max-width:340px;display:flex;align-items:center;gap:9px;height:30px;padding:0 10px;
  border-radius:999px;background:rgba(0,0,0,.18);border:1px solid var(--hair-2);color:var(--ink-3);
  transition:border-color .18s,box-shadow .18s}
[data-mode="light"] .app-search{background:rgba(255,255,255,.4)}
.app-search.searching{border-color:rgba(233,188,99,.4);box-shadow:0 0 0 3px var(--gold-soft)}
.app-search .ic{color:var(--ink-3);flex-shrink:0}
.app-search .query{font-family:var(--ui);font-size:13px;color:var(--ink);white-space:nowrap}
.app-search .caret{width:1.5px;height:15px;background:var(--gold);margin-left:1px;animation:pulse 1s steps(1) infinite;opacity:0}
.app-search.typing .caret{opacity:1}
.app-search .mic{margin-left:auto;color:var(--gold);display:grid;place-items:center;width:22px;height:22px;border-radius:7px;flex-shrink:0}
.protected{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--sage);
  padding:5px 11px;border-radius:999px;background:var(--sage-soft);border:1px solid rgba(169,196,160,.24)}
.protected .dot{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 10px var(--sage-soft);animation:breathe 3.4s ease-in-out infinite}

/* app body: mini-rail + grid */
.app-body{display:flex;min-height:340px}
.app-rail{width:150px;flex-shrink:0;padding:14px 10px;border-right:1px solid var(--hair-2);background:var(--rail);display:flex;flex-direction:column;gap:2px}
.app-rail .ritem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-control);font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:default;transition:background .14s,color .14s}
.app-rail .ritem svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.85}
.app-rail .ritem:hover{background:var(--hair-2);color:var(--ink)}
.app-rail .ritem.active{background:var(--gold-soft);color:var(--gold-glow);box-shadow:inset 0 0 0 1px rgba(233,188,99,.22)}
[data-mode="light"] .app-rail .ritem.active{color:var(--gold-ink)}
.app-rail .rail-drives{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair-2);display:flex;flex-direction:column;gap:8px}
.app-rail .drive{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);padding:2px 6px}
.app-rail .drive .online{width:6px;height:6px;border-radius:50%;background:var(--sage);margin-left:auto;box-shadow:0 0 8px var(--sage-soft)}
@media(max-width:560px){.app-rail{display:none}}

.app-main{flex:1;min-width:0;padding:14px;display:flex;flex-direction:column}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;flex:1}
.app-status{margin-top:12px;font-size:11.5px;color:var(--ink-3);font-family:var(--ui)}
.app-status b{color:var(--ink-2)}

/* ---------- TILE (real motion: hover-lift, scrub, dim/glow, enlarge) ---------- */
.tile{position:relative;border-radius:var(--r-action);overflow:hidden;aspect-ratio:16/10;cursor:pointer;
  background:var(--tile-bg);border:1px solid transparent;
  transition:transform .28s var(--settle),box-shadow .28s var(--settle),border-color .2s,opacity .3s,filter .3s}
.tile .thumb{position:absolute;inset:0;background-size:cover;background-position:center}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55));pointer-events:none}
.tile .label{position:absolute;left:9px;bottom:8px;right:9px;z-index:3;font-size:11px;font-weight:600;color:#fff;letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.tile .meta{position:absolute;left:9px;bottom:8px;right:9px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.tile .dur{font-family:var(--mono);font-size:10px;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);padding:2px 6px;border-radius:6px;letter-spacing:.02em}
.tile .fmt{font-family:var(--ui);font-size:10px;font-weight:600;color:#fff;letter-spacing:.01em;text-shadow:0 1px 4px rgba(0,0,0,.75);opacity:.92}
.tile .ratio{position:absolute;top:8px;left:8px;z-index:3;font-size:9px;font-weight:600;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);padding:2px 6px;border-radius:5px;letter-spacing:.03em}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.38);border-color:rgba(255,255,255,.08);z-index:5}
.tile:focus{outline:none}
.tile:focus-visible,.tile.focused{transform:translateY(-4px) scale(1.03);box-shadow:0 22px 46px rgba(0,0,0,.42),0 0 0 2px var(--gold);border-color:var(--gold);z-index:6}

/* scrub-on-hover: gold playhead + strip + live timecode */
.tile .scrubline{position:absolute;top:0;bottom:0;width:1.5px;background:var(--gold-glow);box-shadow:0 0 10px var(--gold-glow);opacity:0;z-index:6;pointer-events:none;transition:opacity .14s}
.tile .scrubtc{position:absolute;top:7px;right:7px;z-index:6;font-family:var(--mono);font-size:9.5px;color:var(--gold-ink);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:2px 6px;border-radius:5px;opacity:0;transition:opacity .14s}
.tile.scrubbing .scrubline,.tile.scrubbing .scrubtc{opacity:1}
.tile.scrubbing .thumb{filter:brightness(1.06)}

/* the gold-light reveal: matching tile lights up, others dim */
.tile.dimmed{opacity:.28;filter:saturate(.5)}
.tile.match{border:1.5px solid var(--gold);box-shadow:0 0 0 1px var(--gold),0 22px 50px rgba(0,0,0,.5),0 0 46px var(--gold-soft);transform:translateY(-3px) scale(1.02);z-index:7}
.tile.match::after{content:"";position:absolute;left:0;right:0;height:2px;top:0;background:var(--gold-glow);box-shadow:0 0 14px var(--gold-glow);animation:scan 1.6s var(--emphasis)}

/* ---------- SAFETY band (sage accent lives here) ---------- */
.safety .eyebrow{color:var(--sage)}
.trio{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.trio{grid-template-columns:repeat(3,1fr)}}
.fear-card{position:relative;padding:28px 24px;border-radius:var(--r-panel);
  background:var(--panel);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid var(--hair-2);overflow:hidden;
  transition:transform .3s var(--settle),box-shadow .3s var(--settle),border-color .2s}
.fear-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.28);border-color:rgba(169,196,160,.28)}
.fear-card:hover::before{content:"";position:absolute;inset:-30% -60%;background:linear-gradient(100deg,transparent,var(--sage-soft),transparent);animation:sweep .9s var(--reveal)}
.fear-mark{font-family:var(--mono);font-size:12px;color:var(--sage);margin-bottom:16px;letter-spacing:.1em}
.fear-card h3{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.fear-card p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.6}

/* ---------- SPLIT sections ---------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split-reverse .split-copy{order:2}}
.split-copy .eyebrow{text-align:left}
.ticks{list-style:none;padding:0;margin:22px 0 0}
.ticks li{position:relative;padding-left:26px;margin-bottom:12px;font-size:15px;color:var(--ink-2);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;
  background:var(--gold-soft);border:1px solid var(--gold);
  box-shadow:0 0 10px var(--gold-soft)}
.ticks li::after{content:"";position:absolute;left:5px;top:10px;width:4px;height:7px;border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(42deg)}
.chip-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chip{font-family:var(--ui);font-size:13px;font-weight:500;color:var(--ink-2);padding:8px 14px;border-radius:999px;
  background:var(--ghost-bg);border:1px solid var(--hair);cursor:pointer;
  transition:transform .18s var(--settle),border-color .18s,color .18s,background .18s}
.chip:hover{transform:translateY(-1px);color:var(--gold-ink);border-color:var(--gold);background:var(--gold-soft)}

/* product surface built from real components inside a glass frame */
.surface{border-radius:18px;overflow:hidden;position:relative;
  background:var(--panel-2);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
  border:1px solid var(--hair);box-shadow:0 30px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .4s var(--settle),box-shadow .4s var(--settle)}
[data-mode="light"] .surface{box-shadow:0 30px 60px rgba(80,60,30,.18),inset 0 1px 0 rgba(255,255,255,.5)}
.surface:hover{transform:translateY(-4px);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.surface-bar{height:40px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--hair-2)}
.surface-bar .traffic i{width:9px;height:9px}
.surface-title{font-size:11.5px;color:var(--ink-3);font-family:var(--ui)}
.surface-body{padding:14px}
.surface-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
figure{margin:0}
figcaption{margin-top:14px;font-size:12.5px;color:var(--ink-3);text-align:center}

/* ---------- CREATORS mini-grid ---------- */
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
@media(max-width:520px){.mini-grid{grid-template-columns:1fr}}
.mini-grid div{padding:16px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--hair-2);
  transition:transform .26s var(--settle),border-color .2s}
.mini-grid div:hover{transform:translateY(-3px);border-color:var(--hair)}
.mini-grid strong{display:block;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:5px}
.mini-grid span{font-size:13px;color:var(--ink-3);line-height:1.5}

/* ---------- PROOF stat strip ---------- */
.proof .band-head{margin-bottom:40px}
.stat-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px;margin:0 auto}
@media(min-width:760px){.stat-strip{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center;padding:26px 14px;border-radius:var(--r-panel);
  background:var(--panel);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--hair-2);
  transition:transform .3s var(--settle),box-shadow .3s var(--settle)}
.stat:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.24)}
.stat-n{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(34px,5vw,48px);letter-spacing:-.02em;color:var(--gold);line-height:1;margin-bottom:8px}
.stat-zero{color:var(--sage)}
.stat-l{font-size:12.5px;color:var(--ink-3);letter-spacing:.01em}

/* ---------- PRICING tiers ---------- */
.tiers{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:680px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tiers{grid-template-columns:repeat(4,1fr)}}
.tier{position:relative;padding:26px 22px;border-radius:var(--r-panel);
  background:var(--panel);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid var(--hair-2);transition:transform .3s var(--settle),box-shadow .3s var(--settle),border-color .2s}
.tier:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(0,0,0,.3);border-color:var(--hair)}
.tier h3{font-family:var(--disp);font-weight:700;font-size:22px;margin:0 0 12px;color:var(--ink)}
.tier-line{font-size:14px;color:var(--ink-2);margin:0;line-height:1.6}
.tier-feature{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-soft),0 20px 50px rgba(0,0,0,.28)}
.tier-feature h3{color:var(--gold-ink)}
.tier-badge{position:absolute;top:-11px;left:22px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-ink);background:var(--gold-soft);border:1px solid var(--gold);padding:4px 10px;border-radius:999px;backdrop-filter:blur(10px)}

/* ---------- ACCESS ---------- */
.access .access-card{max-width:640px;margin:0 auto;text-align:center;padding:clamp(36px,5vw,56px);
  border-radius:24px;background:var(--panel-2);backdrop-filter:blur(36px) saturate(1.3);-webkit-backdrop-filter:blur(36px) saturate(1.3);
  border:1px solid var(--hair);box-shadow:0 40px 100px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.access-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 16px}
.access-form input{flex:1;min-width:200px;height:48px;padding:0 18px;border-radius:999px;
  background:rgba(0,0,0,.2);border:1px solid var(--hair);color:var(--ink);font-family:var(--ui);font-size:14.5px;outline:none;
  transition:border-color .18s,box-shadow .18s}
[data-mode="light"] .access-form input{background:rgba(255,255,255,.5)}
.access-form input::placeholder{color:var(--ink-4)}
.access-form input:focus{border-color:rgba(233,188,99,.5);box-shadow:0 0 0 3px var(--gold-soft)}
.access-form button{flex-shrink:0}
.access-alt{font-size:13.5px;color:var(--ink-3);margin:0}
.access-alt a{color:var(--gold-ink);border-bottom:1px solid var(--gold-soft)}
.access-card.sent .access-form{display:none}
.access-thanks{display:none;font-size:16px;color:var(--sage);font-weight:600;margin:24px 0 0}
.access-card.sent .access-thanks{display:block;animation:goldreveal .5s var(--reveal) both}

/* ---------- FOOTER ---------- */
.foot{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:48px clamp(20px,5vw,44px) 56px;border-top:1px solid var(--hair-2)}
.foot-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-claim{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink-2);margin:0 auto 0 0}
.foot-by{font-size:13.5px;color:var(--ink-3);margin:0}
.foot-by a{color:var(--gold-ink);border-bottom:1px solid var(--gold-soft)}
.foot-fine{font-size:12.5px;color:var(--ink-4);margin:20px 0 0}

/* ---------- demo caption ---------- */
.demo-caption{font-size:13px;color:var(--ink-3);text-align:center;margin:14px 0 0;transition:color .3s}
.hero-demo{position:relative}

/* =====================================================================
   REV 2 — leaner structure, light default, always-glow, founder, dual audience
   ===================================================================== */

/* the lens mark in the wordmark */
.brand{gap:9px}
.brand .mark{width:26px;height:26px;flex-shrink:0}
.brand-sm .mark{width:22px;height:22px}

/* stronger, always-on glow ("make it glow") */
.stage-glow{
  background:
    radial-gradient(42% 40% at 28% 24%, rgba(var(--glow-color),.30), transparent 60%),
    radial-gradient(38% 36% at 78% 76%, rgba(var(--glow-color),.20), transparent 62%);
  filter:blur(50px);opacity:1}
[data-mode="light"] .stage-glow{filter:blur(56px);opacity:.5;
  background:
    radial-gradient(46% 42% at 26% 22%, rgba(233,188,99,.42), transparent 60%),
    radial-gradient(40% 38% at 80% 78%, rgba(233,188,99,.26), transparent 62%)}
[data-mode="light"] .stage-grade{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(233,188,99,.10), transparent 62%),
    linear-gradient(180deg, rgba(250,246,236,.30), rgba(250,246,236,.78))}

/* nav: brand left; links + toggle + cta grouped right */
.nav .nav-links{margin-left:auto}
.nav .modebtn{margin-left:0}
@media(max-width:900px){.nav .modebtn span{display:inline}}

/* hero copy no longer uses kicker; give the lede a touch more room */
.hero-copy .lede{max-width:540px}

/* try-chips row under the demo */
.demo-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;margin-top:16px}
.demo-try-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-right:2px}

/* ---------- WHAT IT DOES ---------- */
.does-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,60px);align-items:center}
@media(min-width:940px){.does-grid{grid-template-columns:1fr 1.05fr}}
.does-copy{display:flex;flex-direction:column;gap:26px}
.cap h3{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.2vw,26px);letter-spacing:-.018em;margin:0 0 8px;color:var(--ink)}
.cap p{font-size:15px;color:var(--ink-2);margin:0;line-height:1.6;max-width:460px}
.does-shot .surface{transform:none}
.does-shot .surface:hover{transform:translateY(-4px)}

/* ---------- WHO IT'S FOR ---------- */
.who .band-head{margin-bottom:44px}
.who-cols{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:820px){.who-cols{grid-template-columns:1fr 1fr}}
.who-card{padding:32px 30px;border-radius:var(--r-panel);
  background:var(--panel);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid var(--hair-2);transition:transform .3s var(--settle),box-shadow .3s var(--settle),border-color .2s}
.who-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.18);border-color:var(--hair)}
.who-tag{display:inline-block;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--gold-ink);margin-bottom:12px}
.who-card p{font-size:15px;color:var(--ink-2);margin:0;line-height:1.62}

/* ---------- FOUNDER ---------- */
.founder .founder-card{max-width:760px;margin:0 auto;padding:clamp(34px,5vw,52px);
  border-radius:24px;background:var(--panel-2);backdrop-filter:blur(34px) saturate(1.3);-webkit-backdrop-filter:blur(34px) saturate(1.3);
  border:1px solid var(--hair);box-shadow:0 40px 100px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
.founder .eyebrow{text-align:left;color:var(--gold)}
.founder-quote{margin:0 0 26px;padding:0;border:0}
.founder-quote p{font-family:var(--disp);font-weight:500;font-size:clamp(17px,1.9vw,21px);line-height:1.5;letter-spacing:-.012em;color:var(--ink);margin:0 0 16px}
.founder-quote p:last-child{margin-bottom:0;color:var(--gold-ink)}
.founder-by{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--hair-2)}
.founder-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  background:var(--gold-soft);border:1px solid rgba(233,188,99,.3)}
.founder-mark .mark{width:26px;height:26px}
.founder-by strong{display:block;font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink)}
.founder-by span{font-size:13px;color:var(--ink-3)}
.founder-by a{color:var(--gold-ink);border-bottom:1px solid var(--gold-soft)}

/* founder + access band-heads have no eyebrow; center titles read fine as-is */
.access .band-head{margin-bottom:0}

/* =====================================================================
   REV 3 — the working sandbox mini-app + the media-offline moat section
   ===================================================================== */

/* real search input inside the app bar */
.app-search{max-width:none;flex:1}
.app-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font-family:var(--ui);font-size:13px;padding:0}
.app-search input::placeholder{color:var(--ink-4)}
.app-body{min-height:360px}

/* rail: smart views + drives with counts */
.rail-smart{margin-top:12px;padding-top:10px;border-top:1px solid var(--hair-2)}
.rail-head{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);padding:0 4px 6px;display:flex;align-items:center;gap:5px}
.spark{color:var(--gold)}
.smartitem{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-control);font-size:12px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:background .14s,color .14s;animation:goldreveal .32s var(--reveal) both}
.smartitem:hover{background:var(--hair-2);color:var(--ink)}
.smartitem.on{background:var(--gold-soft);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(233,188,99,.24)}
.smartitem .spark{font-size:11px}
.smartitem .scnt{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.rail-drives{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair-2);display:flex;flex-direction:column;gap:2px}
.rail-drives .drive{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);padding:4px 6px;border-radius:8px}
.rail-drives .dname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-drives .dcount{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.rail-drives .online{width:6px;height:6px;border-radius:50%;background:var(--sage);box-shadow:0 0 8px var(--sage-soft);flex-shrink:0}

/* tile: drive badge + selection */
.tile .drivebadge{position:absolute;top:8px;right:8px;z-index:3;font-size:9px;font-weight:600;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);padding:2px 6px;border-radius:5px;letter-spacing:.02em;opacity:0;transition:opacity .2s}
.tile:hover .drivebadge,.tile.selm .drivebadge{opacity:.95}
.tile .ratio{opacity:0}
.tile .checkmark{position:absolute;top:7px;left:7px;z-index:6;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#1a140a;background:var(--gold);opacity:0;transform:scale(.5);transition:opacity .18s var(--spring),transform .18s var(--spring);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.tile.selm{border:2px solid var(--gold);box-shadow:0 0 0 3px var(--gold-soft),0 14px 34px rgba(0,0,0,.34)}
.tile.selm .checkmark{opacity:1;transform:scale(1)}
.tile.match{border-color:rgba(233,188,99,.5)}
.tile.match.scanned::after{content:"";position:absolute;left:0;right:0;height:2px;top:0;background:var(--gold-glow);box-shadow:0 0 14px var(--gold-glow);animation:scan 1.4s var(--emphasis)}

/* floating action bar */
.action-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:14px;z-index:12;
  background:var(--panel-2);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
  border:1px solid var(--hair);box-shadow:0 18px 50px rgba(0,0,0,.4);animation:risebar .28s var(--spring) both}
@keyframes risebar{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.ab-count{font-size:11.5px;font-weight:600;color:var(--ink-2);padding:0 6px}
.ab-btn{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2);background:var(--ghost-bg);border:1px solid var(--hair);height:30px;padding:0 12px;border-radius:9px;cursor:pointer;transition:transform .15s var(--settle),background .15s,color .15s,border-color .15s}
.ab-btn:hover{transform:translateY(-1px);color:var(--ink)}
.ab-primary{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink)}
.ab-primary:hover{background:var(--gold);color:#1a140a}
.ab-ghost{background:none}

/* safe-move ritual overlay */
.ritual{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(8,6,4,.62);backdrop-filter:blur(8px);opacity:0;transition:opacity .2s}
[data-mode="light"] .ritual{background:rgba(40,32,20,.5)}
.ritual.show{opacity:1}
.ritual-card{width:min(360px,92%);padding:22px;border-radius:18px;background:#1c1712;border:1px solid rgba(255,247,235,.14);box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(10px) scale(.98);transition:transform .22s var(--reveal)}
[data-mode="light"] .ritual-card{background:#fbf7ee;border-color:rgba(60,48,30,.16)}
.ritual-card .ritual-head,.ritual-card .ritual-body,.ritual-card .rc-row{color:#F4EEE3}
[data-mode="light"] .ritual-card .ritual-head,[data-mode="light"] .ritual-card .ritual-body,[data-mode="light"] .ritual-card .rc-row{color:#241d14}
.ritual.show .ritual-card{transform:none}
.ritual-head{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:12px}
.ritual-head svg{color:var(--sage)}
.ritual-body{font-size:14px;color:var(--ink-2);margin:0 0 14px}
.ritual-check{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.rc-row{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.rc-row .ondot{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 8px var(--sage-soft);margin-top:4px;flex-shrink:0}
.ritual-actions{display:flex;justify-content:flex-end;gap:8px}

/* undo toast */
.undo-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(12px);z-index:22;display:flex;align-items:center;gap:14px;
  padding:10px 12px 10px 16px;border-radius:12px;font-size:12.5px;color:var(--ink);
  background:var(--panel-2);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
  border:1px solid rgba(169,196,160,.34);box-shadow:0 18px 50px rgba(0,0,0,.4);opacity:0;transition:opacity .2s,transform .2s var(--spring)}
.undo-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.undo-toast #undoBtn{font-family:var(--ui);font-size:12px;font-weight:700;color:var(--gold-ink);background:var(--gold-soft);border:1px solid var(--gold);height:26px;padding:0 12px;border-radius:8px;cursor:pointer}
.undo-toast #undoBtn:hover{background:var(--gold);color:#1a140a}

.demo-caption.flash{animation:capflash .5s var(--reveal)}
@keyframes capflash{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}

/* =========== THE MOAT: media-offline comparison (fixed dark NLE surface) =========== */
.nle-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2.5vw,26px);align-items:center;max-width:1000px;margin:0 auto}
@media(max-width:760px){.nle-compare{grid-template-columns:1fr;gap:16px}}
.nle-panel{border-radius:14px;overflow:hidden;background:#1a1a1f;border:1px solid #2c2c34;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.nle-bar{height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;background:#232329;border-bottom:1px solid #34343d}
.nle-app{font-size:11px;font-weight:700;color:#9a9aa6;letter-spacing:.02em}
.nle-proj{font-size:11px;color:#6f6f7a;font-family:var(--mono)}
.nle-stage{aspect-ratio:16/9;position:relative;background:#0e0e12;display:grid;place-items:center}
.nle-clip{position:absolute;inset:10px;border-radius:8px;overflow:hidden}
/* offline (the old way) */
.nle-clip.offline{background:#161013;border:1.5px solid #7a2622;
  background-image:repeating-linear-gradient(45deg,rgba(226,61,61,.08) 0 12px,transparent 12px 24px)}
.offline-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em;color:#E85C5C}
.offdot{width:9px;height:9px;border-radius:50%;background:#E23D3D;box-shadow:0 0 12px rgba(226,61,61,.7)}
/* online (with scovo) */
.nle-clip.online .nle-thumb{position:absolute;inset:0;background-size:cover;background-position:center}
.online-label{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#fff;background:rgba(20,40,26,.7);backdrop-filter:blur(6px);padding:4px 9px;border-radius:7px}
.ondot{width:8px;height:8px;border-radius:50%;background:#4BB36B;box-shadow:0 0 10px rgba(75,179,107,.8)}
.nle-clip.online{border:1.5px solid #2f6b45}
.nle-foot{padding:9px 12px;background:#202027;border-top:1px solid #2c2c34}
.nle-verdict{font-size:11.5px;font-weight:600}
.nle-verdict.bad{color:#E85C5C}
.nle-verdict.good{color:#6FD79A}
.nle-mid{display:flex;flex-direction:column;align-items:center;gap:10px}
@media(max-width:760px){.nle-mid{flex-direction:row}}
.nle-move{font-family:var(--ui);font-size:12.5px;font-weight:650;color:var(--ink);background:var(--ghost-bg);border:1px solid var(--hair);height:36px;padding:0 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:transform .15s,border-color .15s}
.nle-move:hover{transform:translateY(-1px);border-color:var(--gold)}
.nle-vs{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.moat-note{max-width:660px;margin:34px auto 0;text-align:center;font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* =====================================================================
   REV 4 — real video scrub, 2x hover-enlarge, select box, clip inspector
   ===================================================================== */

/* proxy video inside the tile (plays on hover, scrubs by cursor) */
.tile .scrubv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .22s var(--settle);z-index:1;background:var(--tile-bg)}
.tile.video-ready .scrubv{opacity:1}
.tile .veil{z-index:2}.tile .meta,.tile .drivebadge{z-index:3}.tile .scrubline{z-index:6}.tile .scrubtc{z-index:6}
.tile .scrubline{transition:left .09s linear}   /* the app's 90ms linear scrub */

/* 2x hover-enlarge (the app's focus magnify, 350ms settle) */
.tile{transition:transform .35s var(--settle),box-shadow .3s var(--settle),border-color .2s,opacity .3s,filter .3s}
.tile:not(.dimmed):not(.static):hover,.tile.scrubbing{transform:scale(1.5);z-index:30;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.app-grid{overflow:visible}
.app-main{overflow:visible}
.tile.static:hover{transform:translateY(-3px)}

/* select box (multi-select, distinct from opening the clip) */
.tile .selbox{position:absolute;top:7px;left:7px;z-index:8;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  background:rgba(0,0,0,.4);border:1.5px solid rgba(255,255,255,.7);backdrop-filter:blur(6px);cursor:pointer;opacity:0;transform:scale(.8);
  transition:opacity .16s,transform .16s,background .16s}
.tile .selbox span{font-size:11px;color:#1a140a;opacity:0;transition:opacity .12s}
.tile:hover .selbox,.tile.selm .selbox{opacity:1;transform:scale(1)}
.tile.selm .selbox{background:var(--gold);border-color:var(--gold)}
.tile.selm .selbox span{opacity:1}
.tile.selm{border:2px solid var(--gold);box-shadow:0 0 0 3px var(--gold-soft),0 14px 34px rgba(0,0,0,.34)}

/* ---------- clip inspector panel ---------- */
.inspector{position:absolute;top:0;right:0;bottom:0;width:min(58%,340px);z-index:16;display:flex;flex-direction:column;
  background:var(--panel-2);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);
  border-left:1px solid var(--hair);box-shadow:-20px 0 60px rgba(0,0,0,.4);
  transform:translateX(100%);transition:transform .28s var(--reveal)}
.inspector.show{transform:none}
.insp-close{position:absolute;top:10px;right:10px;z-index:3;width:26px;height:26px;border-radius:8px;border:1px solid var(--hair-2);background:var(--ghost-bg);color:var(--ink-2);cursor:pointer;font-size:12px;display:grid;place-items:center}
.insp-close:hover{color:var(--ink);border-color:var(--hair)}
.insp-preview{position:relative;aspect-ratio:16/9;background:#000;flex-shrink:0;overflow:hidden}
.insp-preview video{width:100%;height:100%;object-fit:cover;display:block}
.insp-score{position:absolute;right:10px;bottom:10px;width:40px;height:40px;display:grid;place-items:center}
.scorering{position:absolute;inset:0;transform:rotate(-90deg)}
.scorering .rt{fill:none;stroke:rgba(255,255,255,.2);stroke-width:3}
.scorering .rf{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .6s var(--reveal)}
.scoren{position:relative;font-family:var(--disp);font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.insp-scroll{flex:1;overflow-y:auto;padding:16px}
.insp-scroll::-webkit-scrollbar{width:0}
.insp-title{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em;margin:0 0 6px;color:var(--ink)}
.insp-caption{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0 0 12px}
.insp-tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ichip{font-size:11px;font-weight:500;color:var(--gold-ink);background:var(--gold-soft);border:1px solid rgba(233,188,99,.3);padding:3px 9px;border-radius:999px}
.insp-section{margin-bottom:15px}
.insp-k{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
.insp-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.insp-facts.tech{grid-template-columns:1fr 1fr}
.insp-facts div{display:flex;flex-direction:column;gap:1px}
.insp-facts b{font-size:12.5px;font-weight:600;color:var(--ink)}
.insp-facts i{font-size:10px;color:var(--ink-4);font-style:normal;letter-spacing:.02em}
.insp-usedin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--ink);font-family:var(--mono)}
.insp-dep .insp-usedin{color:var(--gold-ink)}
.dep-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold-soft);flex-shrink:0}
.dep-dot.ok{background:var(--sage);box-shadow:0 0 8px var(--sage-soft)}
.dep-note{font-family:var(--ui);font-size:10.5px;font-weight:500;color:var(--sage);background:var(--sage-soft);padding:2px 7px;border-radius:999px}
.insp-usedin.free{color:var(--ink-3)}
.insp-transcript{font-size:13px;font-style:italic;color:var(--ink-2);line-height:1.5;margin:0;padding-left:10px;border-left:2px solid var(--gold-soft)}
.insp-drive{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);margin-top:6px;padding-top:12px;border-top:1px solid var(--hair-2)}
.insp-drive .online{width:6px;height:6px;border-radius:50%;background:var(--sage);box-shadow:0 0 8px var(--sage-soft)}

/* =====================================================================
   REV 5 — the full-size, faithful app window (Library + Detail + inspector)
   Component styles lifted from the real scovo_app/glass.css (same tokens).
   ===================================================================== */
.tryapp{max-width:1160px}
.sapp{border-radius:20px;overflow:hidden;position:relative;
  background:var(--panel-2);backdrop-filter:blur(40px) saturate(1.35);-webkit-backdrop-filter:blur(40px) saturate(1.35);
  border:1px solid var(--hair);box-shadow:0 50px 120px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
[data-mode="light"] .sapp{box-shadow:0 50px 110px rgba(80,60,30,.22),inset 0 1px 0 rgba(255,255,255,.5)}
.sapp-title{height:44px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--hair-2);position:relative}
.sapp-title .traffic i{width:11px;height:11px}
.sapp-title .brand{position:absolute;left:50%;transform:translateX(-50%);font-size:15px}
.sapp-title .brand .mark{width:17px;height:17px}
.sapp-toolbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hair-2);flex-wrap:wrap}
.sapp-body{display:flex;min-height:520px}
.sapp-rail{width:172px;flex-shrink:0;padding:16px 11px;border-right:1px solid var(--hair-2);background:var(--rail);display:flex;flex-direction:column;gap:2px}
.sapp-rail .ritem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-control);font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:background .14s,color .14s}
.sapp-rail .ritem svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.85}
.sapp-rail .ritem:hover{background:var(--hair-2);color:var(--ink)}
.sapp-rail .ritem.active{background:var(--gold-soft);color:var(--gold-glow);box-shadow:inset 0 0 0 1px rgba(233,188,99,.22)}
[data-mode="light"] .sapp-rail .ritem.active{color:var(--gold-ink)}
.sapp-rail .rail-drives{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair-2)}
.sapp-content{flex:1;min-width:0;padding:20px 22px;overflow-y:auto;max-height:600px}
.sapp-content::-webkit-scrollbar{width:0}
.sapp-insp{width:270px;flex-shrink:0;padding:20px 18px;border-left:1px solid var(--hair-2);background:var(--rail);overflow-y:auto;max-height:600px}
.sapp-insp::-webkit-scrollbar{width:0}
@media(max-width:820px){.sapp-insp{display:none}.sapp-rail{width:64px}.sapp-rail .ritem span,.sapp-rail .rail-drives{display:none}}

/* library header + grid with stars/offline */
.lib-title{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;margin:6px 0 4px;color:var(--ink)}
.lib-sub{font-size:12.5px;color:var(--ink-3);margin-bottom:18px}
.lib-sub b{color:var(--ink-2)}
.sapp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(min-width:1100px){.sapp-grid{grid-template-columns:repeat(4,1fr)}}
.gtile{position:relative;border-radius:var(--r-action);overflow:hidden;aspect-ratio:16/10;cursor:pointer;background:var(--tile-bg);border:1px solid transparent;
  transition:transform .3s var(--settle),box-shadow .3s var(--settle),border-color .2s}
.gtile .thumb{position:absolute;inset:0;background-size:cover;background-position:center}
.gtile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .22s}
.gtile.live video{opacity:1}
.gtile .gveil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(0,0,0,.5));pointer-events:none}
.gtile:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 22px 50px rgba(0,0,0,.4);z-index:5;border-color:rgba(255,255,255,.08)}
.gtile.sel{border:2px solid var(--gold);box-shadow:0 0 0 3px var(--gold-soft),0 18px 44px rgba(0,0,0,.4)}
.gstars{position:absolute;top:8px;left:8px;z-index:3;font-size:11px;letter-spacing:1px;color:var(--gold-glow);text-shadow:0 1px 4px rgba(0,0,0,.7)}
.gdur{position:absolute;right:8px;bottom:8px;z-index:3;font-family:var(--mono);font-size:10px;color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:5px}
.goff{position:absolute;top:8px;right:8px;z-index:3;font-size:9.5px;font-weight:700;letter-spacing:.03em;color:#fff;background:rgba(232,131,107,.85);padding:2px 7px;border-radius:5px}
.gtile.offline .thumb{filter:grayscale(.7) brightness(.5)}
.gtile.offline{border-color:rgba(232,131,107,.4)}
.gscrub{position:absolute;left:0;top:0;bottom:0;width:1.5px;background:var(--gold-glow);box-shadow:0 0 10px var(--gold-glow);opacity:0;z-index:6;transition:left .09s linear}
.gtile.scrubbing .gscrub{opacity:1}

/* the right inspector (real component styles) */
.insp-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-bottom:16px}
.crown{display:flex;flex-direction:column;align-items:center;padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--hair-2)}
.crown .ring{width:112px;height:112px;position:relative}
.crown .ring svg{transform:rotate(-90deg)}
.crown .ring .rt{fill:none;stroke:var(--hair);stroke-width:5}
.crown .ring .rf{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .7s var(--reveal)}
.crown .ring .num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:34px;color:var(--gold-glow)}
.ring-label{font-size:11.5px;color:var(--ink-3);margin-top:10px;text-align:center}
.ring-label b{color:var(--ink);font-weight:600;display:block;font-size:13px;margin-bottom:1px}
.sect{margin-top:18px}
.sect h4{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-bottom:9px}
.castnote{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.castnote b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{font-size:11.5px;font-weight:500;padding:5px 11px;border-radius:999px;border:1px solid var(--hair);color:var(--ink-2)}
.chips .chip.protected{color:var(--sage);border-color:rgba(169,196,160,.4);background:var(--sage-soft)}
.chips .chip.offline{color:var(--coral);border-color:rgba(232,131,107,.4);background:var(--coral-soft)}
.chips .chip .d{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sage);margin-right:6px;vertical-align:middle}
.chips .chip.offline .d{background:var(--coral)}
.istars{display:flex;align-items:center;gap:1px}
.istars .star{background:none;border:0;font-size:18px;line-height:1;color:var(--ink-4);cursor:pointer;padding:2px;transition:color .12s,transform .12s}
.istars .star:hover{transform:translateY(-1px);color:var(--gold-ink)}
.istars .star.on{color:var(--gold);text-shadow:0 0 10px var(--gold-soft)}
.istars .starnote{font:600 10.5px var(--ui);color:var(--ink-4);margin-left:7px}
.summary .big{font-family:var(--disp);font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--ink);line-height:1;margin-bottom:8px}
.summary .lead{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-bottom:8px}
.summary .row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ink-3);padding:9px 0;border-bottom:1px solid var(--hair-2)}
.summary .row b{font-family:var(--mono);color:var(--ink);font-weight:500;font-size:13px}
.repnote{margin-top:20px;font-size:10.5px;color:var(--ink-4);font-style:italic}
.goldbtn,.ghostbtn{font:650 12.5px/1 var(--ui);border:1px solid var(--ghost-border);border-radius:var(--r-action);padding:11px 14px;cursor:pointer;color:var(--ghost-ink);background:var(--ghost-bg);width:100%;margin-top:9px;transition:transform .15s var(--settle),background .15s,border-color .15s,box-shadow .2s}
.goldbtn{background:var(--primary-bg);border-color:var(--primary-border);color:var(--primary-ink);font-weight:700;box-shadow:var(--primary-shadow)}
.goldbtn:hover{background:var(--primary-bg-hover);border-color:var(--primary-border-hover);transform:translateY(-1px);box-shadow:var(--primary-shadow-hover)}
.ghostbtn:hover{background:var(--ghost-bg-hover);border-color:var(--hair);color:var(--ink);transform:translateY(-1px)}
.goldbtn.auto,.ghostbtn.auto{width:auto;margin:0}

/* the Detail view */
.clip-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;color:var(--ink-3);font-size:12px;flex-wrap:wrap}
.clip-topline .meta{font-family:var(--mono);font-size:11px}
.clip-hero{position:relative}
.hero-media{display:block;width:100%;height:clamp(280px,42vh,460px);object-fit:cover;border-radius:var(--r-panel);background:#0a0807;border:1px solid var(--hair);box-shadow:0 30px 90px rgba(0,0,0,.42)}
.clip-scrub{position:absolute;left:16px;right:16px;bottom:15px;height:36px;display:flex;align-items:center;gap:11px;padding:0 13px;border-radius:99px;background:rgba(10,8,6,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12)}
.playmini{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);position:relative;flex-shrink:0;cursor:pointer}
.playmini::after{content:"";position:absolute;left:9px;top:6px;border-left:8px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.playmini.playing::after{border:0;left:8px;top:6px;width:8px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff}
.track{height:5px;border-radius:99px;background:rgba(255,255,255,.22);flex:1;position:relative;cursor:pointer}
.track i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:99px;background:var(--gold-glow);box-shadow:0 0 12px var(--gold-soft)}
.clip-scrub .mono{font-size:11px;color:#fff;flex-shrink:0;font-family:var(--mono)}
.lutbtn{position:absolute;right:16px;top:16px;width:auto;margin:0}
.clip-lanes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media(max-width:640px){.clip-lanes{grid-template-columns:1fr}}
.glassblock{padding:16px;background:rgba(255,255,255,.055);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:0 18px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(20px)}
[data-mode="light"] .glassblock{background:rgba(255,255,255,.5)}
.glassblock h3{font-family:var(--disp);font-size:16px;letter-spacing:-.01em;margin:0 0 4px;color:var(--ink)}
.glassblock .muted{font-size:11.5px;color:var(--ink-3);margin:0 0 10px}
.moment-list{display:grid;gap:8px}
.moment{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center;padding:8px;border-radius:11px;background:rgba(0,0,0,.14);border:1px solid var(--hair-2);cursor:pointer;transition:background .14s}
[data-mode="light"] .moment{background:rgba(60,48,30,.06)}
.moment:hover{background:var(--gold-soft)}
.moment b{font-family:var(--mono);font-size:12px;color:var(--gold);font-weight:600}
.moment i{font-style:normal;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moment img,.moment .mthumb{width:54px;height:34px;object-fit:cover;border-radius:8px;background:var(--tile-bg);background-size:cover;background-position:center}

/* play animation: bad panel flinches red, good panel confirms green */
.nle-compare.playing .nle-bad{animation:badbreak .6s var(--emphasis)}
.nle-compare.playing .nle-bad .offdot{animation:pulse 1s ease-in-out 2}
.nle-compare.playing .nle-good{animation:goodstay .7s var(--reveal)}
.nle-compare.playing .nle-good .ondot{animation:pulse .9s ease-in-out 2}
@keyframes badbreak{0%{transform:none}15%{transform:translateX(-3px)}30%{transform:translateX(3px)}45%{transform:translateX(-2px)}60%{transform:translateX(0)}}
@keyframes goodstay{0%{box-shadow:0 0 0 0 rgba(75,179,107,0)}40%{box-shadow:0 0 0 4px rgba(75,179,107,.28)}100%{box-shadow:0 24px 60px rgba(0,0,0,.35)}}

/* =====================================================================
   REV 6 — context-first hero poster + Make/Folders views + try hint
   ===================================================================== */
/* hero poster (static context, not the interactive app) */
.hero-poster{position:relative}
.poster-frame{border-radius:20px;overflow:hidden;padding:14px;
  background:var(--panel-2);backdrop-filter:blur(36px) saturate(1.3);-webkit-backdrop-filter:blur(36px) saturate(1.3);
  border:1px solid var(--hair);box-shadow:0 40px 100px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
[data-mode="light"] .poster-frame{box-shadow:0 40px 90px rgba(80,60,30,.2),inset 0 1px 0 rgba(255,255,255,.5)}
.poster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ptile{aspect-ratio:16/10;border-radius:10px;background-size:cover;background-position:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.poster-cap{display:flex;align-items:center;gap:8px;margin-top:12px;padding:0 2px;font-size:12px;font-weight:600;color:var(--ink-2)}
.poster-cap .online{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 8px var(--sage-soft)}
.hero-poster figcaption{margin-top:12px;font-size:12.5px;color:var(--ink-3);text-align:center}

/* try hint under the app */
.try-hint{max-width:640px;margin:20px auto 0;text-align:center;font-size:13.5px;color:var(--ink-3);line-height:1.6}
.try-hint b{color:var(--gold-ink);font-weight:600}

/* small link button + empty note */
.linkbtn{background:none;border:0;color:var(--gold-ink);font:600 11.5px var(--ui);cursor:pointer;margin-left:6px}
.linkbtn:hover{text-decoration:underline}
.empty-note{grid-column:1/-1;color:var(--ink-3);font-size:13px;padding:20px 0}

/* Folders view */
.folder-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.folder-list{grid-template-columns:1fr}}
.folder-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;cursor:pointer;text-align:left;
  background:var(--panel);border:1px solid var(--hair-2);transition:transform .2s var(--settle),border-color .2s,background .2s}
.folder-row:hover{transform:translateY(-2px);border-color:var(--gold);background:var(--gold-soft)}
.folder-row .fthumb{width:56px;height:40px;border-radius:9px;background-size:cover;background-position:center;flex-shrink:0}
.folder-row .fmeta{flex:1;display:flex;flex-direction:column;gap:1px}
.folder-row .fmeta b{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--ink)}
.folder-row .fmeta span{font-size:11.5px;color:var(--ink-3)}
.folder-row .farrow{color:var(--ink-4);font-size:15px}

/* Make view */
.make-brief{display:flex;gap:10px;margin:4px 0 18px;flex-wrap:wrap}
.make-brief input{flex:1;min-width:220px;height:44px;padding:0 16px;border-radius:12px;background:rgba(0,0,0,.15);border:1px solid var(--hair);color:var(--ink);font:400 14px var(--ui);outline:none}
[data-mode="light"] .make-brief input{background:rgba(255,255,255,.5)}
.make-brief input:focus{border-color:rgba(233,188,99,.5);box-shadow:0 0 0 3px var(--gold-soft)}
.make-seq-label{font-size:12px;color:var(--ink-3);margin-bottom:12px}
.make-seq{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.seq-clip{flex-shrink:0;width:150px;cursor:pointer;animation:goldreveal .4s var(--reveal) both}
.seq-clip .sthumb{width:150px;aspect-ratio:16/10;border-radius:10px;background-size:cover;background-position:center;position:relative;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.seq-clip .sidx{position:absolute;top:6px;left:6px;font-family:var(--mono);font-size:10px;font-weight:700;color:#1a140a;background:var(--gold);padding:1px 6px;border-radius:5px}
.seq-clip .slabel{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.make-actions{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.make-note{font-size:11.5px;color:var(--ink-3);max-width:340px;line-height:1.5}

/* =====================================================================
   REV 7 — product-truth rebuild
   The site is now a public Scovo walkthrough: full rail, safe-move ritual,
   evidence inspector, and proof flows instead of static marketing cartoons.
   ===================================================================== */

button{font-family:var(--ui)}
.hero-product{grid-template-columns:minmax(0,.9fr) minmax(0,1.12fr);padding-top:clamp(96px,12vw,138px)}
.hero-product .display{font-size:clamp(42px,6.4vw,76px)}
.hero-product .lede{max-width:620px}
.hero-app{min-width:0}
.hero-window{border-radius:20px;overflow:hidden;background:var(--panel-2);border:1px solid var(--hair);backdrop-filter:blur(36px) saturate(1.3);-webkit-backdrop-filter:blur(36px) saturate(1.3);box-shadow:0 40px 100px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07)}
[data-mode="light"] .hero-window{box-shadow:0 42px 90px rgba(80,60,30,.2),inset 0 1px 0 rgba(255,255,255,.52)}
.compact-title{padding-right:14px}
.hero-word{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink)}
.runtime-chip{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(169,196,160,.28);background:var(--sage-soft);color:var(--sage);font-size:11px;font-weight:700;border-radius:999px;padding:4px 9px}
.runtime-chip i{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 10px var(--sage-soft)}
.hero-searchline{height:42px;display:flex;align-items:center;gap:9px;padding:0 16px;border-bottom:1px solid var(--hair-2);font-size:12.5px;color:var(--ink-3)}
.hero-searchline b{color:var(--ink);font-family:var(--mono);font-size:12px}
.hero-shell-body{display:grid;grid-template-columns:118px 1fr;min-height:360px}
.hero-mini-rail{display:flex;flex-direction:column;gap:5px;padding:14px 10px;background:var(--rail);border-right:1px solid var(--hair-2)}
.hero-mini-rail span{font-size:12px;font-weight:600;color:var(--ink-3);padding:8px 10px;border-radius:10px}
.hero-mini-rail .on{background:var(--gold-soft);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(233,188,99,.22)}
.hero-shell-body main{padding:14px;min-width:0}
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hero-grid .gtile{border-radius:11px}
.hero-grid .tilecap{display:none}
.hero-proofline{margin-top:12px;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;background:var(--sage-soft);border:1px solid rgba(169,196,160,.28);color:var(--ink-2);font-size:12px}
.hero-proofline b{color:var(--sage);white-space:nowrap}

.truth{padding-top:34px}
.truth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.truth-card{padding:24px;border-radius:var(--r-panel);background:var(--panel);border:1px solid var(--hair-2);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}
.truth-card span{font-family:var(--mono);font-size:12px;color:var(--gold);font-weight:700}
.truth-card h2{font-family:var(--disp);font-size:22px;line-height:1.1;letter-spacing:-.015em;margin:12px 0 8px;color:var(--ink)}
.truth-card p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}

.move-lab{border-radius:22px;overflow:hidden;background:var(--panel-2);border:1px solid var(--hair);backdrop-filter:blur(36px) saturate(1.3);-webkit-backdrop-filter:blur(36px) saturate(1.3);box-shadow:0 42px 100px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06)}
.move-panel{display:grid;grid-template-columns:1fr 1.05fr .85fr;min-height:400px}
.move-source{border-right:1px solid var(--hair-2)}
.move-preview{padding:18px;display:grid;gap:14px}
.move-preview .gtile{width:100%;max-width:360px;justify-self:center}
.move-file{padding:16px;border-radius:16px;border:1px solid var(--hair-2);background:rgba(255,255,255,.045)}
[data-mode="light"] .move-file{background:rgba(255,255,255,.45)}
.move-file .eyebrow{display:block;margin-bottom:8px}
.move-file b{display:block;font-family:var(--disp);font-size:18px;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.move-file i{display:block;margin-top:7px;font-size:12px;color:var(--ink-3);font-style:normal}
.move-plan{padding:20px;display:grid;align-content:center;gap:12px;border-right:1px solid var(--hair-2)}
.step{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid var(--hair-2);transition:border-color .2s,background .2s,transform .2s}
[data-mode="light"] .step{background:rgba(255,255,255,.42)}
.step.live{border-color:var(--gold);background:var(--gold-soft);transform:translateY(-1px)}
.step.done{border-color:rgba(169,196,160,.28)}
.step span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--hair-2);font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-2)}
.step.done span{background:var(--sage-soft);color:var(--sage)}
.step b{font-size:13px;color:var(--ink)}
.step .ghostbtn,.step .goldbtn{margin:0}
.dep-list{grid-column:2/4;display:none;gap:8px;margin-top:4px}
.dep-list.show{display:grid;animation:goldreveal .32s var(--reveal) both}
.dep-list p{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--ink-2)}
.dep-list i,.move-risk .ondot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 9px var(--gold-soft);flex-shrink:0}
.dep-list i.sage{background:var(--sage);box-shadow:0 0 9px var(--sage-soft)}
.move-receipt{padding:22px;display:grid;align-content:center;gap:9px;opacity:.42;filter:saturate(.6)}
.move-receipt.show{opacity:1;filter:none;animation:goldreveal .38s var(--reveal) both}
.move-receipt h3{font-family:var(--disp);font-size:24px;margin:0 0 8px;color:var(--ink)}
.move-receipt p{display:flex;gap:8px;margin:0;padding:9px 0;border-bottom:1px solid var(--hair-2);font-size:12.5px;color:var(--ink-2)}
.move-receipt p b{color:var(--sage);min-width:62px}
.move-receipt .ghostbtn{justify-self:start;margin-top:12px}

.sapp-title .runtime-chip{position:static}
.sapp-rail button.ritem{border:0;background:none;width:100%;text-align:left;font-family:var(--ui)}
.sapp-rail button.ritem.active{background:var(--gold-soft)}
.sapp-rail .ritem b.spark{margin-left:auto;font-size:11px;color:var(--gold)}
.sapp-rail{width:190px}
.sapp-rail{overflow-y:auto}
.sapp-rail::-webkit-scrollbar{width:0}
.sapp-body{min-height:620px}
.sapp-content,.sapp-insp{max-height:660px}
.sapp-toolbar .app-search{max-width:420px}
.sapp-toolbar .seg button{border:0}
.sapp-toolbar .mic{border:0;background:none;margin-left:auto}
.sapp-toolbar .mic.rec{color:var(--coral);animation:pulse 1s ease-in-out infinite}
.sapp-toolbar .sortpick{-webkit-appearance:none;appearance:none;height:34px;border-radius:999px;border:1px solid var(--hair-2);background:rgba(0,0,0,.18);color:var(--ink-2);font:650 12px/1 var(--ui);padding:0 30px 0 14px;outline:none;cursor:pointer}
[data-mode="light"] .sapp-toolbar .sortpick{background:rgba(255,255,255,.52);border-color:rgba(40,33,22,.13);color:var(--ink-2)}
.rail-drives .online.warn{background:var(--coral);box-shadow:0 0 8px var(--coral-soft)}
.gtile{border:0;text-align:left;padding:0;color:inherit;font-family:var(--ui)}
.gtile .thumb{display:block}
.gtile .drivebadge{position:absolute;top:8px;right:8px;z-index:4;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:5px;opacity:0;transition:opacity .18s}
.gtile:hover .drivebadge,.gtile.sel .drivebadge{opacity:1}
.gtile .tilecap{position:absolute;left:9px;right:48px;bottom:8px;z-index:4;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtile.unlinked{overflow:visible}
.unlinked-glow{position:absolute;inset:5% 4% -7%;z-index:-1;border-radius:inherit;background:var(--coral);opacity:.24;filter:blur(20px);transform:translateY(6px);pointer-events:none}
.mini-moments{display:grid;gap:7px}
.mini-moments button{display:grid;grid-template-columns:34px 1fr;gap:7px;align-items:center;padding:8px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid var(--hair-2);color:var(--ink-2);text-align:left;cursor:pointer}
[data-mode="light"] .mini-moments button{background:rgba(255,255,255,.46)}
.mini-moments button:hover{background:var(--gold-soft);border-color:rgba(233,188,99,.28)}
.mini-moments b{font-family:var(--mono);font-size:11px;color:var(--gold)}
blockquote{margin:0;padding-left:12px;border-left:2px solid var(--gold-soft);font-size:12.5px;color:var(--ink-2);font-style:italic}
.factgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.factgrid span{display:grid;gap:2px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4)}
.factgrid b{font-size:12px;text-transform:none;letter-spacing:0;color:var(--ink);font-family:var(--ui)}
.home-hero2{display:grid;grid-template-columns:minmax(0,.92fr) minmax(260px,1fr);gap:18px;align-items:center;padding:20px;border-radius:20px;background:var(--panel);border:1px solid var(--hair-2)}
.home-hero2 h2{font-family:var(--disp);font-size:34px;line-height:1.05;letter-spacing:-.02em;margin:0 0 10px}
.home-hero2 p{color:var(--ink-2);margin:0 0 18px}
.home-actions{display:flex;flex-wrap:wrap;gap:9px}
.home-proof .sapp-grid{grid-template-columns:repeat(2,1fr)}
.smart-layout,.people-grid,.drive-grid,.import-flow,.reclaim-layout,.share-layout,.settings-list{display:grid;gap:14px}
.smart-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
.smart-card{border:1px solid var(--hair-2);text-align:left;cursor:pointer}
.smart-card h3{margin-bottom:4px}
.smart-thumbs{display:flex;margin-top:14px}
.smart-thumbs i{width:58px;height:38px;border-radius:9px;background-size:cover;background-position:center;border:1px solid var(--hair);margin-right:-12px;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.objective{display:grid;align-content:start}
.mini-receipt{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--sage-soft);border:1px solid rgba(169,196,160,.28);display:grid;gap:3px;font-size:12px;color:var(--ink-2)}
.mini-receipt b{color:var(--sage)}
.people-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.person-card{padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--hair-2);display:grid;gap:8px;text-align:left;cursor:pointer}
.person-card span{aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 12px 24px rgba(0,0,0,.22)}
.person-card b{font-family:var(--disp);font-size:16px;color:var(--ink)}
.person-card i{font-style:normal;font-size:12px;color:var(--ink-3)}
.drive-grid,.import-flow{grid-template-columns:repeat(3,1fr)}
.drive-card b{display:block;font-family:var(--disp);font-size:24px;color:var(--gold);margin-top:8px}
.drive-state{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--sage);box-shadow:0 0 10px var(--sage-soft)}
.drive-state.coral{background:var(--coral);box-shadow:0 0 10px var(--coral-soft)}
.import-step b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);font-family:var(--mono)}
.import-step.done b{background:var(--sage-soft);color:var(--sage)}
.import-step.live{border-color:var(--gold)}
.safety-demo{display:grid;gap:14px}
.move-what{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:center;padding:16px;border-radius:18px;background:var(--panel);border:1px solid var(--hair-2)}
.move-what h3{font-family:var(--disp);font-size:20px;line-height:1.12;margin:0 0 7px;overflow-wrap:anywhere}
.move-what p{margin:0;color:var(--ink-3);font-size:13px}
.move-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.step-card{padding:14px;border-radius:15px;border:1px solid var(--hair-2);background:var(--panel);text-align:left;cursor:pointer;display:grid;gap:5px}
.step-card.done{border-color:rgba(169,196,160,.32);background:var(--sage-soft)}
.step-card b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-ink);font-family:var(--mono)}
.step-card span{font-weight:700;color:var(--ink)}
.step-card i{font-style:normal;font-size:12px;color:var(--ink-3)}
.move-risk{padding:14px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid var(--hair-2)}
.move-risk p{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:13px;color:var(--ink-2)}
.move-risk .ondot{background:var(--sage);box-shadow:0 0 8px var(--sage-soft)}
.move-actions{display:flex;gap:10px}
.look-lab{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.look-before,.look-after{min-height:320px;border-radius:18px;background-size:cover;background-position:center;border:1px solid var(--hair)}
.look-before{filter:saturate(.72) contrast(.92)}
.look-after{filter:saturate(1.1) contrast(1.05)}
.look-controls{grid-column:1/-1;display:flex;align-items:center;gap:14px}
.look-controls span{font-size:12px;color:var(--ink-3)}
.relink-wrap2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.offline-project{border-radius:16px;overflow:hidden;background:#1a1a1f;border:1px solid #2c2c34;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.offline-box{min-height:260px;display:flex;align-items:center;justify-content:center;gap:9px;background:#161013;background-image:repeating-linear-gradient(45deg,rgba(226,61,61,.08) 0 12px,transparent 12px 24px);font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.04em;color:#E85C5C}
.relink-panel p{font-size:13px;color:var(--ink-2)}
.reclaim-layout{grid-template-columns:repeat(3,1fr)}
.reclaim-list{grid-column:1/-1}
.reclaim-list p{display:flex;justify-content:space-between;gap:10px;margin:8px 0;padding:8px 0;border-bottom:1px solid var(--hair-2);font-size:13px;color:var(--ink-2)}
.reclaim-block h3{font-family:var(--disp);font-size:28px;color:var(--gold);margin:0 0 6px}
.share-layout{grid-template-columns:repeat(3,1fr)}
.share-card span{display:block;aspect-ratio:16/10;border-radius:12px;background-size:cover;background-position:center;margin-bottom:12px}
.share-card p,.setting-row span{font-size:12px;color:var(--ink-3)}
.setting-row{display:flex;justify-content:space-between;align-items:center}

@media(max-width:1040px){
  .hero-product{grid-template-columns:1fr}
  .truth-grid,.move-panel{grid-template-columns:1fr}
  .move-source,.move-plan{border-right:0;border-bottom:1px solid var(--hair-2)}
  .smart-layout,.relink-wrap2{grid-template-columns:1fr}
}
@media(max-width:860px){
  .sapp-rail{width:64px}
  .sapp-rail .ritem span,.sapp-rail .rail-drives,.sapp-rail .ritem b.spark{display:none}
  .sapp-insp{display:none}
  .home-hero2,.move-what,.drive-grid,.import-flow,.people-grid,.reclaim-layout,.share-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hero-shell-body{grid-template-columns:1fr}
  .hero-mini-rail{display:none}
  .hero-grid,.sapp-grid{grid-template-columns:repeat(2,1fr)}
  .move-steps{grid-template-columns:1fr}
  .look-lab{grid-template-columns:1fr}
  .look-controls{grid-column:auto;align-items:flex-start;flex-direction:column}
  .step{grid-template-columns:34px 1fr}
  .dep-list{grid-column:1/-1}
}