/* Cliptika site — preview design. Tokens first; every motion respects prefers-reduced-motion at the bottom. */
:root{color-scheme:light dark;--bg:#fcfcfb;--surface:#fff;--surface2:#f4f4f2;--text:#17171b;--text2:#55545e;--text3:#85838f;--accent:#4b4bcb;--accent-soft:rgba(75,75,203,.1);--on:#fff;--border:rgba(23,23,27,.09);--border-strong:rgba(23,23,27,.16);--shadow:0 24px 60px rgba(30,28,46,.13);--container:min(100% - 48px,1180px);--ease:cubic-bezier(.22,.7,.2,1);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#121116;--surface:#1a191f;--surface2:#201f26;--text:#f1f0f5;--text2:#b3b1bf;--text3:#8b8996;--accent:#a3a3fa;--accent-soft:rgba(163,163,250,.14);--on:#15141c;--border:rgba(255,255,255,.1);--border-strong:rgba(255,255,255,.18);--shadow:0 24px 60px rgba(0,0,0,.45)}}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit;color:inherit}img,video{display:block;max-width:100%;height:auto}.container{width:var(--container);margin:auto}[hidden]{display:none!important}
.skip{position:absolute;top:0;left:-999px;background:var(--accent);color:var(--on);padding:8px 12px;z-index:20;border-radius:0 0 8px 0}.skip:focus{left:0}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
kbd{font:600 .82em/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:.2em .45em;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:6px;background:var(--surface);color:var(--text)}
/* header */
.site-header{height:64px;display:flex;align-items:center;position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid var(--border)}.nav-shell{width:100%;display:flex;align-items:center;gap:24px}.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:14px;font-weight:680;letter-spacing:.01em}.brand img{width:22px;height:22px;border-radius:6px}.nav-links{display:flex;gap:26px;margin-left:auto}.nav-links a,.footer-links a{color:var(--text2);font-size:13px;font-weight:600;text-decoration:none;transition:color .15s}.nav-links a:hover,.footer-links a:hover{color:var(--accent)}.download{border-radius:9px;background:var(--accent);color:var(--on);padding:8px 14px;text-decoration:none;font-size:13px;font-weight:680}.download.is-soon{cursor:default;opacity:.9;pointer-events:none}
/* hero */
.hero{padding:clamp(24px,4vw,52px) 0 clamp(30px,4.5vw,56px);background:radial-gradient(900px 420px at 82% -8%,var(--accent-soft),transparent 70%)}
.hero-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,72px);align-items:center}
.chip{display:inline-block;margin:0 0 16px;padding:6px 12px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text2);font-size:12.5px;font-weight:650;letter-spacing:.01em}
.hero h1{font-size:clamp(2.35rem,5.4vw,5rem);line-height:1.02;letter-spacing:-.04em;margin:0;font-weight:760}.hero h1 span{color:var(--accent);white-space:nowrap}
.hero-copy{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--text2);max-width:34ch;margin:18px 0 26px}
.story-steps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px}.story-step{width:100%;display:grid;grid-template-columns:30px 1fr;align-items:center;gap:12px;text-align:left;padding:11px 14px;border:1px solid var(--border);border-radius:14px;background:transparent;cursor:pointer;position:relative;overflow:hidden;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.story-step:hover{border-color:var(--border-strong)}.story-step[aria-current=true]{background:var(--surface);border-color:var(--border-strong);box-shadow:0 8px 24px rgba(30,28,46,.08)}
.step-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface2);color:var(--text2);font-size:12px;font-weight:720;transition:background .25s,color .25s}.story-step[aria-current=true] .step-n{background:var(--accent);color:var(--on)}
.step-t strong{display:block;font-size:15px;letter-spacing:-.01em}.step-t small{display:block;color:var(--text3);font-size:12.5px}
.story-step[aria-current=true] 
.soon-badge{display:inline-flex;align-items:center;margin:0 0 6px;padding:11px 18px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-weight:650;font-size:.96rem}.compat{margin:8px 0 0;color:var(--text3);font-size:13px}
/* stage: a deck of real scenes */
.stage{position:relative;border:1px solid var(--border);border-radius:22px;background:radial-gradient(circle at 80% 10%,var(--accent-soft),transparent 55%),var(--surface);box-shadow:var(--shadow);overflow:hidden}
.stage-deck{position:relative;aspect-ratio:1500/1063;display:grid;place-items:center;padding:clamp(10px,2vw,22px)}
.scene{position:absolute;inset:clamp(10px,2vw,22px);margin:0;display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px);visibility:hidden;transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease),visibility 0s .6s}
.scene.is-active{opacity:1;transform:none;filter:none;visibility:visible;transition-delay:0s}
.scene[hidden]{display:grid!important}
.scene picture,.scene img{width:100%;height:100%;object-fit:contain;border-radius:12px}
.scene img{box-shadow:0 14px 34px rgba(20,18,34,.2);border:1px solid var(--border)}
.scene.is-active img{animation:drift 9s ease-out both}
@keyframes drift{from{transform:scale(1.012)}to{transform:scale(1)}}
.scene-video{width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:0 14px 34px rgba(20,18,34,.2);background:#f6f6f7;aspect-ratio:1600/654}.scene-video video{width:100%;height:100%;object-fit:cover}
.scene-play{position:absolute;right:16px;bottom:16px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);padding:8px 14px;font-size:13px;font-weight:660;cursor:pointer;box-shadow:0 6px 18px rgba(30,28,46,.15)}
.stage-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 88%,transparent)}.stage-caption{margin:0;color:var(--text2);font-size:13.5px;line-height:1.35}
.stage-pause{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface);color:var(--text2);cursor:pointer}.stage-pause:hover{color:var(--accent)}.stage-pause .pi{display:block;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}.stage-pause[aria-pressed=true] .pi{width:0;height:0;border:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;margin-left:3px}
/* sections */
.work{padding:clamp(34px,4.6vw,60px) 0;border-top:1px solid var(--border)}
.section-head{max-width:680px;margin:0 0 clamp(16px,2.2vw,26px)}.section-head.row{max-width:none;display:flex;align-items:baseline;justify-content:space-between;gap:24px}.eyebrow{color:var(--accent);font-size:12px;font-weight:720;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}.section-head h2,.benefits h2,.cta h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.06;letter-spacing:-.03em;margin:0;font-weight:740}.section-intro{margin:12px 0 0;color:var(--text2);font-size:1.05rem;max-width:46ch}.section-head.row .section-intro{margin:0}
/* personas */
.persona-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 clamp(20px,3vw,32px)}.persona-tab{border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text2);padding:9px 16px;font-size:14px;font-weight:650;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.persona-tab:hover{border-color:var(--border-strong);color:var(--text)}.persona-tab[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:var(--on)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cases{list-style:none;margin:0;padding:0;display:grid;gap:12px}.cases li{padding:18px 20px;background:var(--surface);border:1px solid var(--border);border-radius:16px}.cases h3{margin:0 0 5px;font-size:1.05rem;letter-spacing:-.015em}.cases p{margin:0;color:var(--text2);font-size:.95rem;line-height:1.5}
.pro{display:inline-block;vertical-align:1px;margin-left:2px;padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:760;letter-spacing:.04em;text-transform:uppercase}
.persona-media{margin:0;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.persona-media img{width:100%}.persona-media figcaption{padding:11px 16px;border-top:1px solid var(--border);color:var(--text3);font-size:12.5px}
.pro-note{margin:22px 0 0;color:var(--text3);font-size:13px}
/* features */
.tabs{display:flex;gap:26px;margin:0 0 26px;padding:0;border-bottom:1px solid var(--border-strong);overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--text2);padding:10px 0 11px;min-height:44px;white-space:nowrap;cursor:pointer;font-size:14px;font-weight:660;margin-bottom:-1px}.tab:hover{color:var(--accent)}.tab[aria-selected=true]{color:var(--text);border-color:var(--accent)}
.tabpanel{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,52px);min-height:400px;animation:rise .45s var(--ease) both}.tabpanel[hidden]{display:none}
.tab-copy h3{font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 12px}.tab-copy p{color:var(--text2);margin:0;max-width:36ch}.feature-points{list-style:none;margin:18px 0 0;padding:0;color:var(--text2);font-size:14px}.feature-points li{padding-left:16px;position:relative;margin:8px 0}.feature-points li:before{content:"";position:absolute;top:.62em;left:0;width:5px;height:5px;background:var(--accent);border-radius:50%}
.tab-media{min-width:0}.media-switch{display:flex;gap:8px;margin:0 0 10px}.media-switch button{border:1px solid var(--border-strong);border-radius:999px;background:transparent;color:var(--text2);padding:6px 12px;font-size:12px;font-weight:660;cursor:pointer}.media-switch button.is-active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.product-frame,.media-frame{position:relative;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.media-choice[hidden]{display:none}.product-frame img{width:100%}.product-frame figcaption{padding:10px 14px;color:var(--text3);font-size:12.5px;line-height:1.4;border-top:1px solid var(--border)}
.video-crop{width:100%;overflow:hidden;background:#f6f6f7}.video-crop video{width:100%;height:100%;object-fit:cover}.demo-transform .video-crop{aspect-ratio:1600/654}.demo-translation .video-crop{aspect-ratio:1600/768}.demo-capture .video-crop{aspect-ratio:1688/984}
.demo-control{position:absolute;right:14px;bottom:50px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);box-shadow:0 5px 16px rgba(30,28,46,.14);color:var(--text2);padding:7px 11px;font-size:12px;font-weight:660;line-height:1;cursor:pointer;transition:transform .16s,color .16s}.demo-control:hover{color:var(--accent);transform:translateY(-1px)}
.lens-frame{max-width:520px;justify-self:center}.lens-frame img{background:var(--surface2)}
/* benefits / cta / footer */
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.more-card{padding:20px;background:var(--surface2);border:1px solid var(--border);border-radius:16px}.more-card strong{display:block;font-size:15px;margin-bottom:5px}.more-card p{margin:0;color:var(--text2);font-size:13.5px;line-height:1.45}
.cta{padding:clamp(40px,5vw,64px) 0;background:var(--surface2);border-top:1px solid var(--border)}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:48px}.cta p{margin:10px 0 0;color:var(--text2);max-width:50ch}.cta-action{text-align:right;flex:none}.cta .soon-badge{margin:0}.reassurance{margin:13px 0 0;color:var(--text2);font-size:13px}.text-link{color:var(--accent);font-size:13px;text-decoration:none}.text-link:hover{text-decoration:underline}
.site-footer{padding:22px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.footer-brand{color:var(--text);font-size:13px;font-weight:650;text-decoration:none}.footer-links{display:flex;gap:18px}.copyright{font-size:12px;color:var(--text3)}
.legal{padding:56px 0 70px}.legal h1{font-size:clamp(2.25rem,5vw,3.5rem);letter-spacing:-.02em;line-height:1.08;margin:0 0 4px}.legal h2{font-size:21px;margin:36px 0 6px}.legal p,.legal li{margin:8px 0}.legal .muted{color:var(--text3);font-size:15px}.legal a{color:var(--accent)}.narrow{max-width:720px;margin:auto;width:var(--container)}
/* tablet + mobile */
@media(max-width:1020px){.hero-layout{display:flex;flex-direction:column;align-items:stretch;gap:14px}.hero-copy-col{display:contents}.chip{order:1;align-self:flex-start}.hero h1{order:2}.hero-copy{order:3;max-width:46ch;margin:6px 0 10px}.stage-col{order:4}.story-steps{order:5;margin:6px 0 4px}.soon-badge{order:6;align-self:flex-start;margin-top:10px}.compat{order:7;margin:0}.persona-panel,.tabpanel{grid-template-columns:1fr}.tabpanel{min-height:0}.cta-inner{flex-direction:column;align-items:flex-start;gap:22px}.cta-action{text-align:left}.nav-links{gap:18px}}
@media(max-width:760px){:root{--container:min(100% - 32px,1180px)}.nav-links{display:none}.site-header{height:58px}.story-steps{grid-template-columns:repeat(3,1fr);gap:6px}.story-step{grid-template-columns:1fr;gap:6px;padding:10px;text-align:center;justify-items:center}.step-t small{display:none}.step-t strong{font-size:12.5px}.stage-deck{aspect-ratio:1500/1100}.more-grid{grid-template-columns:1fr}.section-head.row{flex-direction:column;gap:8px}.footer-inner{flex-direction:column;align-items:flex-start;gap:10px}.persona-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.persona-tabs::-webkit-scrollbar{display:none}.persona-tab{white-space:nowrap;flex:none}.tabs{gap:20px}}
/* motion off for people who ask for it: no drift, no cross-fade travel, no entrance animation */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene,.scene.is-active{transition:none;transform:none;filter:none}.scene.is-active img{animation:none}.persona-panel,.tabpanel{animation:none}.story-step,.step-n,.persona-tab,.demo-control{transition:none}}

/* ===== v8: simplified page ===== */
.stage-deck .sub{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}.stage-deck .sub.is-active{opacity:1;visibility:visible;transition-delay:0s}.scene .sub{position:absolute;inset:0}
.sub-dots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border:1px solid var(--border-strong);border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);z-index:2}.sub-dots button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:transparent;color:var(--text2);padding:5px 11px;font-size:12px;font-weight:660;cursor:pointer}.sub-dots button i{width:6px;height:6px;border-radius:50%;background:var(--border-strong)}.sub-dots button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.sub-dots button[aria-pressed=true] i{background:var(--accent)}
/* hero video scene */
.hero-video{width:100%;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:0 14px 34px rgba(20,18,34,.2);background:#f6f6f7}.hero-video .vframe{aspect-ratio:1600/624}.hero-video .vbtn{bottom:14px}.hero-video 
/* media slots waiting for an authentic recording: compact, never dominant */
.gap{width:100%;display:grid;align-content:center;justify-items:start;gap:8px;padding:clamp(18px,2.6vw,30px);border:1.5px dashed var(--border-strong);border-radius:16px;background:linear-gradient(135deg,var(--surface2),var(--surface));text-align:left}
.gap.compact{min-height:0;aspect-ratio:1500/900}.gap-chip{padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:760;letter-spacing:.05em;text-transform:uppercase}.gap h4{margin:0;font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.02em}.gap-keys{margin:0;color:var(--text2);font-size:13px}.gap-kicker{margin:0;color:var(--text2);max-width:40ch;font-size:.95rem;line-height:1.45}.gap-hero{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:12px}
/* shared interactive component: pick an item, the media and caption change with it */
.persona-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(18px,3vw,36px);align-items:center;animation:rise .4s var(--ease) both}.persona-panel[hidden]{display:none}
.persona-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 clamp(14px,2vw,22px)}
.case-list{display:grid;gap:8px}.case{display:grid;grid-template-columns:28px 1fr;gap:12px;text-align:left;width:100%;padding:13px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}.case:hover{border-color:var(--border-strong)}.case-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface2);color:var(--text2);font-size:12px;font-weight:740}.case-t strong{display:block;font-size:1rem;letter-spacing:-.01em}.case-t>span{display:block;margin-top:3px;color:var(--text2);font-size:.9rem;line-height:1.5}.case[aria-selected=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface));box-shadow:0 10px 26px rgba(30,28,46,.1)}.case[aria-selected=true] .case-n{background:var(--accent);color:var(--on)}.case:not([aria-selected=true]) .case-t>span{display:none}
.case-t .mini{margin:8px 0 0;padding-left:18px;color:var(--text2);font-size:.88rem}.case-t .mini li{margin:2px 0}
.case-stage{min-width:0}.case-media{margin:0;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.case-media[hidden]{display:none}.case-media picture img{width:100%}.case-media .still{width:100%;height:auto}.case-media figcaption{padding:9px 14px;border-top:1px solid var(--border);color:var(--text3);font-size:12.5px;line-height:1.4}.case-media .gap{border:0;border-radius:0}.case-media[role=tabpanel]:not([hidden]){animation:rise .35s var(--ease) both}
.pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px;background:var(--surface2)}.pair .still{border:1px solid var(--border);border-radius:10px}.pair span{color:var(--text3);font-size:20px}
/* video player: Play demo -> Pause -> Resume -> Replay */
.vframe{width:100%;overflow:hidden;background:#f6f6f7}.vframe video{width:100%;height:100%;object-fit:cover}.vbtn{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text);box-shadow:0 6px 18px rgba(30,28,46,.18);padding:8px 14px 8px 11px;font-size:13px;font-weight:680;line-height:1;cursor:pointer;transition:transform .16s,color .16s}.vbtn:hover{color:var(--accent);transform:translateY(-1px)}.vi{display:block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor}.vbtn[data-state=playing] .vi{width:10px;height:12px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}.vbtn[data-state=ended] .vi{width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
/* plans + cta */
.plans{padding:clamp(30px,4.2vw,52px) 0;background:var(--surface2);border-block:1px solid var(--border)}.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:860px}.plan{padding:18px 22px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.plan-pro{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))}.plan h3{margin:0 0 8px;font-size:1.1rem}.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;color:var(--text2);font-size:.92rem}.plan li{position:relative;padding-left:16px;line-height:1.4}.plan li:before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}.pro-note{margin:14px 0 0;color:var(--text3);font-size:13px}
.cta{padding:clamp(28px,3.6vw,44px) 0;border-top:0}.cta h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}.cta p{margin:6px 0 0;color:var(--text2);max-width:none;font-size:.95rem}
@media(max-width:1020px){.persona-panel{grid-template-columns:1fr}.plan-grid{grid-template-columns:1fr}.stage-deck .gap-hero{padding:16px}}
@media(max-width:760px){.persona-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.persona-tabs::-webkit-scrollbar{display:none}.persona-tab{white-space:nowrap;flex:none}.nav-links{display:none}.pair{grid-template-columns:1fr}.pair span{transform:rotate(90deg);justify-self:center}.gap.compact{aspect-ratio:auto;min-height:200px}}
@media(prefers-reduced-motion:reduce){.stage-deck .sub{transition:none}.case-media[role=tabpanel]:not([hidden]),.persona-panel{animation:none}.vbtn{transition:none}}

/* JSON example: real input and the exact JSON Pretty output, shown as text (not a Cliptika window) */
.cp+.cp-l{display:block;margin:0 0 6px;color:var(--text3);font-size:11px;font-weight:720;letter-spacing:.05em;text-transform:uppercase}

@media(min-width:761px){.cp+}

/* phones: the wide recording is shown 2:1, cropping only empty right-hand margin, so the Smart Paste menu and the text stay legible */
@media(max-width:760px){.hero-video .vframe{aspect-ratio:2/1}.hero-video .vframe video{object-fit:cover;object-position:0% 50%}.hero-video .vbtn{top:8px;bottom:auto;right:8px;padding:6px 11px 6px 9px;font-size:12px}}

/* inactive scenes must never catch pointer events (an invisible Pins image once sat on top of the video's Replay button) */
.scene:not(.is-active){pointer-events:none}.scene:not(.is-active) .sub,.scene:not(.is-active) .sub-dots{visibility:hidden!important;pointer-events:none}

/* ===== Final UX corrections (preview-16) ===== */
/* contrast: secondary copy must reach WCAG AA (4.5:1) on both themes */
:root{--text3:#68666f}
@media(prefers-color-scheme:dark){:root{--text3:#a09eac}}
.case-t>span,.gap-kicker,.plan ul{color:var(--text2)}
.case-media figcaption,.compat,.pro-note,.step-t small{color:var(--text3);font-size:13px}
/* stable media stage: every task in every persona/tool list shares one box, so nothing below it moves */
.persona-panel{align-items:center}
.case-stage{display:grid;grid-template-rows:minmax(0,1fr);min-width:0}
.case-stage>.case-media{grid-area:1/1;display:grid!important;grid-template-rows:minmax(0,1fr) auto;visibility:visible;margin:0;animation:none!important;min-height:0}
.case-stage>.case-media[hidden]{visibility:hidden;pointer-events:none}
.case-media>picture,.case-media>.still{min-height:0;display:grid;place-items:center;overflow:hidden;background:var(--surface2);padding:clamp(8px,1.6vw,16px)}
.case-media>picture img,.case-media>.still{width:100%;height:100%;object-fit:contain;border-radius:10px}
.case-media>picture img{border:1px solid var(--border);box-shadow:0 8px 22px rgba(20,18,34,.12)}
.case-media>.how,.case-media>.ba{min-height:0;overflow:auto}
.case-media>figcaption{grid-row:2}
@media(min-width:1021px){.case-stage{aspect-ratio:1500/1060}}
@media(max-width:1020px){.case-stage{min-height:420px;order:-1}.persona-panel{align-items:start}}
/* compact explanatory cards (replace the empty "recording coming soon" stages; no pretend UI) */
.how{display:grid;align-content:center;justify-items:start;gap:10px;padding:clamp(20px,3.4vw,40px);background:linear-gradient(135deg,var(--surface2),var(--surface))}
.how-hero{position:absolute;inset:0;border-radius:12px;height:100%}
.how-keys{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:var(--text2);font-size:14px}
.how-keys kbd{font-size:1.05rem;padding:.3em .6em}
.how-or{color:var(--text3);font-size:13px}
.how h4{margin:4px 0 0;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.025em;line-height:1.1}
.how-out{margin:0;max-width:44ch;color:var(--text2);font-size:1rem;line-height:1.5}
.how-ex{margin-top:6px;width:100%;max-width:46ch;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.how-ex .cp-l{margin:0 0 6px}
.how-quote{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.98rem;color:var(--text);line-height:1.4}
.how-toast{padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700}
.how-sw{width:22px;height:22px;border-radius:6px;background:#4b4bcb;border:1px solid var(--border-strong)}
/* Before/After: the real Smart Paste menu plus the exact text result */
.ba{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0;background:var(--surface2)}
.ba .still{width:100%;height:100%;min-height:0;object-fit:cover;object-position:78% 45%;border-bottom:1px solid var(--border)}
.ba-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:8px;padding:12px}
.ba-card{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.ba-card p{margin:0;font-size:.92rem;line-height:1.4;color:var(--text)}
.ba-after{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.ba-arrow{align-self:center;color:var(--text3);font-size:20px}
@media(max-width:760px){.ba-row{grid-template-columns:1fr}.ba-arrow{transform:rotate(90deg);justify-self:center}.ba .still{height:auto;aspect-ratio:960/392}}
/* Free vs Pro: full-width, larger, higher-contrast lists */
.plan-grid{max-width:none}
.plan ul{font-size:1rem;gap:9px;color:var(--text)}
.plan li{line-height:1.45}
.plan h3{font-size:1.2rem}
/* left selectors vs right stage: stay vertically centred, same breathing room */
.case-list{align-self:center}
/* subtle Save & find crossfade (no travelling motion) */
.stage-deck .sub{transition:opacity .35s ease,visibility 0s .35s}
.stage-deck .sub.is-active{transition-delay:0s}
@media(prefers-reduced-motion:reduce){.stage-deck .sub{transition:none}}
.how-line{margin:0;font-size:.98rem;line-height:1.5;color:var(--text)}

/* ===== keyboard-shortcut overlay (reusable, per-video cues; see script.js) ===== */
:root{--vk-bg:rgba(22,21,28,.88);--vk-border:rgba(255,255,255,.24);--vk-cap:rgba(255,255,255,.14);--vk-cap-edge:rgba(255,255,255,.26);--vk-text:#fff;--vk-size:30px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vplayer{position:relative}
.vkeys{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid var(--vk-border);border-radius:14px;background:var(--vk-bg);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 8px 24px rgba(10,9,16,.28),inset 0 1px 0 rgba(255,255,255,.1);color:var(--vk-text);pointer-events:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility 0s .16s}
.vkeys.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.vkeys--bl{left:12px;bottom:14px}.vkeys--br{right:12px;bottom:14px}.vkeys--tl{left:12px;top:12px}.vkeys--tr{right:12px;top:12px}.vkeys--bc{left:50%;bottom:14px;margin-left:0;translate:-50% 0}
.vk{display:inline-grid;place-items:center;min-width:var(--vk-size);height:var(--vk-size);padding:0 7px;border:1px solid var(--vk-cap-edge);border-bottom-width:2px;border-radius:8px;background:var(--vk-cap);color:var(--vk-text);font:600 15px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.vk-word{font-size:12.5px;letter-spacing:.01em;padding:0 10px}
.vk-label{margin:0 4px 0 6px;font:600 12px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.82);white-space:nowrap}
.vkeys.is-on .vk{animation:vkpress .22s ease-out both}
@keyframes vkpress{0%{transform:translateY(0) scale(1)}35%{transform:translateY(1px) scale(.94)}100%{transform:none}}
.vdebug{position:absolute;left:8px;top:8px;z-index:3;padding:3px 7px;border-radius:6px;background:#000;color:#0f0;font:600 12px ui-monospace,Menlo,monospace;pointer-events:none}
@media(max-width:760px){:root{--vk-size:26px}.vkeys{padding:5px 6px;gap:4px;border-radius:12px;max-width:calc(100% - 16px)}.vkeys--bl,.vkeys--br,.vkeys--bc{bottom:8px}.vkeys--bl,.vkeys--tl{left:8px}.vk{font-size:13.5px;padding:0 5px;border-radius:7px}.vk-word{font-size:11.5px}.vk-label{font-size:11px;margin:0 2px 0 4px}}
@media(max-width:380px){.vk-label{display:none}}
@media(prefers-reduced-motion:reduce){.vkeys{transition:none;transform:none}.vkeys.is-on .vk{animation:none}}

/* real demo videos inside the shared media stage: same tile treatment as screenshots, centred, aspect preserved; the control sits BELOW the footage so it never covers the real UI */
.case-media>.vstage{min-height:0;display:grid;align-content:center;gap:10px;background:var(--surface2);padding:clamp(8px,1.6vw,16px)}
.vclip{position:relative;width:100%;aspect-ratio:1600/724;border-radius:10px;overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 22px rgba(20,18,34,.16);background:#111}
.vclip .vframe{height:100%;background:#111}
.vclip .vframe video{width:100%;height:100%;object-fit:contain}
.vstage .vbtn{position:static;justify-self:end;top:auto;right:auto;bottom:auto}

/* ===== calm hero: active-state highlight instead of progress bars ===== */
.story-step{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.story-step[aria-current=true]{background:color-mix(in srgb,var(--accent-soft) 80%,var(--surface));border-color:color-mix(in srgb,var(--accent) 55%,var(--border));box-shadow:0 8px 24px rgba(30,28,46,.1)}
.story-step[aria-current=true] strong{color:var(--accent)}
.story-step:not([aria-current=true]) strong{color:var(--text)}
.scene{transition:opacity .4s ease,visibility 0s .4s}
.scene.is-active{transition:opacity .4s ease,visibility 0s}
@media(prefers-reduced-motion:reduce){.story-step,.scene,.scene.is-active{transition:none}}

/* 0.5.0: exact SP-3 / LN-6 feature symbols, inline with existing labels */
.ic{width:1.25em;height:1.25em;flex:none;margin-right:4px;vertical-align:-.28em}.ic-primary{fill:currentColor}.ic-secondary{fill:var(--accent)}