:root{--ink:#1d1d1f;--sub:#6e6e73;--faint:#86868b;--line:#e4e4e7;--hair:#f0f0f2;--blue:#0071e3;--blue-h:#0077ed;--green:#1a8f3c;--red:#c0392b}
[class^="l"],[class*=" l"]{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.lk-in,.lh-in,.lprob-in,.lhow-head,.lfeat-in,.lpillars-in,.lscene-in,.lsec-in,.lclasses-in,.lprice-in,.lfaq-in,.lsteps-in,.lproof-in,.lclose-in{max-width:1120px;margin:0 auto;padding:0 32px}

/* shared eyebrow / buttons / headings */
.lk-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 20px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.lk-eyebrow.center{display:flex;justify-content:center;color:var(--blue)}
.lk-eyebrow.light{color:rgba(255,255,255,.9)}
.lk-eyebrow.light .lk-bar{background:rgba(255,255,255,.9)}
.lk-bar{width:26px;height:3px;border-radius:3px;background:currentColor;flex:none}
.lk-eyebrow.center .lk-bar{background:var(--blue)}
.lk-cta{margin-top:34px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.lk-btn{display:inline-flex;align-items:center;background:var(--blue);color:#fff;text-decoration:none;font-size:17px;font-weight:500;border-radius:980px;padding:14px 30px;transition:background .15s,transform .15s}
.lk-btn:hover{background:var(--blue-h);transform:translateY(-1px)}
.lk-link{font-size:17px;font-weight:500;color:var(--blue);text-decoration:none}
.lk-link:hover{text-decoration:underline}

/* scroll progress bar */
.lprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none}
.lprog span{display:block;height:100%;width:0;background:linear-gradient(90deg,#0a84ff,#0071e3);box-shadow:0 0 12px rgba(0,113,227,.6);transition:width .1s linear}

/* ===== HERO ===== */
.lh{position:relative;min-height:92vh;min-height:92dvh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,#eef5ff,#f8fbff 55%,#fff);padding:clamp(80px,10vh,130px) 0 clamp(44px,6vh,80px);overflow:hidden}
/* --- animated background --- */
.lh-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lh-blob{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.lh-blob.b1{top:-16%;right:-2%;width:min(50vw,660px);height:min(50vw,660px);opacity:.75;background:radial-gradient(circle at 40% 40%,#9dc0ff,#dcebff 70%);animation:blobA 16s ease-in-out infinite}
.lh-blob.b2{bottom:-20%;left:-10%;width:min(44vw,580px);height:min(44vw,580px);opacity:.7;background:radial-gradient(circle at 50% 50%,#c3d6ff,#eef4ff 72%);animation:blobB 20s ease-in-out infinite}
.lh-blob.b3{top:26%;left:34%;width:min(30vw,400px);height:min(30vw,400px);opacity:.5;background:radial-gradient(circle at 50% 50%,#b6ddff,#e9f5ff 74%);animation:blobC 24s ease-in-out infinite}
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-36px,28px) scale(1.07)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(32px,-24px) scale(1.09)}}
@keyframes blobC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,20px) scale(1.13)}}
.lh-grid{position:absolute;inset:-2px;background-image:radial-gradient(rgba(0,64,170,.11) 1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:radial-gradient(120% 92% at 50% 28%,#000 38%,transparent 76%);mask-image:radial-gradient(120% 92% at 50% 28%,#000 38%,transparent 76%);opacity:.55}
.lh-gly{position:absolute;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:15px;letter-spacing:.12em;color:#0071e3;opacity:.12;will-change:transform;animation:glyF 14s ease-in-out infinite}
.lh-gly.g1{top:23%;left:11%}
.lh-gly.g2{top:33%;right:13%;font-size:22px;animation-duration:17s}
.lh-gly.g3{bottom:27%;left:17%;animation-duration:19s}
.lh-gly.g4{top:15%;right:25%;font-size:24px;animation-duration:15s}
.lh-gly.g5{bottom:19%;right:19%;animation-duration:21s}
.lh-gly.g6{top:45%;left:25%;animation-duration:13s}
.lh-gly.g7{bottom:35%;right:33%;animation-duration:18s}
@keyframes glyF{0%,100%{transform:translateY(0);opacity:.10}50%{transform:translateY(-22px);opacity:.2}}
.lh-in{position:relative;z-index:2;text-align:center}
/* title: per-line rise + gradient word + shimmer */
.lh-title{margin:8px auto 0;max-width:14ch;font-size:clamp(48px,8.6vw,120px);font-weight:600;letter-spacing:-.046em;line-height:.96}
.lh-title .ln{display:block;overflow:hidden;padding-bottom:.09em}
.lh-title .ln>span{display:inline-block;transform:translateY(112%);animation:lineUp 1.1s cubic-bezier(.2,.85,.2,1) forwards;animation-delay:calc(var(--d)*.12s + .1s)}
@keyframes lineUp{to{transform:none}}
/* Seamless shimmer: the gradient is periodic (start colour == end colour) and the
   animation shifts by exactly one full tile (-200% with a 200% background-size), so
   the loop is pixel-identical at both ends — no pop on repeat. */
.lh-title em{font-style:normal;background:linear-gradient(105deg,#0071e3 0%,#4a97ff 25%,#7db8ff 50%,#4a97ff 75%,#0071e3 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleShine 5.5s linear infinite}
@keyframes titleShine{from{background-position:0 0}to{background-position:-200% 0}}
.lh-lede{margin:28px auto 0;max-width:60ch;font-size:clamp(18px,1.8vw,24px);font-weight:400;line-height:1.45;color:var(--sub)}
.lh-lede b{color:var(--ink);font-weight:600}
.lk-cta{justify-content:center;margin-top:36px}
.lh-trust{margin:clamp(28px,4vh,46px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lh-trust span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--faint);background:rgba(255,255,255,.62);border:1px solid #e4ecf7;border-radius:980px;padding:6px 13px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lh-trust span svg{width:13px;height:13px;color:var(--green)}
.lh-a{opacity:0;transform:translateY(32px);animation:heroIn 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0)*90ms + 120ms)}
@keyframes heroIn{to{opacity:1;transform:none}}

/* ===== HERO — Purview-style split: copy left, video card (lightbox) right ===== */
.lhsplit{min-height:auto;justify-content:flex-start;overflow:hidden;padding:clamp(84px,12vh,146px) 0 clamp(56px,8vh,100px);
  background:radial-gradient(125% 130% at 8% -10%, #e9f1ff 0%, #f2f7ff 42%, #ffffff 80%)}
.lhsplit .lh-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,5vw,76px);align-items:center;text-align:left;max-width:1180px}
.lhsplit .lh-copy{min-width:0}
.lhsplit .lk-eyebrow{color:var(--blue);margin-bottom:16px}
.lhsplit .lk-eyebrow .lk-bar{background:var(--blue)}
.lhsplit .lh-title{margin:0;max-width:none;text-align:left;font-size:clamp(40px,5.1vw,74px);letter-spacing:-.036em;line-height:1.0}
.lhsplit .lh-lede{margin:22px 0 0;text-align:left;max-width:46ch;font-size:clamp(17px,1.4vw,21px)}
.lhsplit .lk-cta{justify-content:flex-start;margin-top:30px;gap:14px}
.lk-btn.ghost{background:transparent;color:var(--ink);border:1.5px solid #d3d8e2}
.lk-btn.ghost:hover{background:#fff;border-color:#b9c0cd;transform:translateY(-1px)}

/* video thumbnail card → opens the lightbox */
.lh-card{min-width:0}
.lh-thumb{display:block;position:relative;width:100%;aspect-ratio:16/10;border:0;padding:0;cursor:pointer;border-radius:22px;overflow:hidden;background:#0b1020;
  box-shadow:0 34px 74px -26px rgba(20,44,92,.5),0 6px 18px rgba(20,44,92,.12);transition:transform .2s ease,box-shadow .2s ease}
.lh-thumb img,.lh-thumb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* muted autoplay loop background for the hero film card; the play button sits on top and opens the full film with sound. pointer-events:none so clicks reach the button. */
.lh-thumb-vid{pointer-events:none;background:#0b1020}
@media (prefers-reduced-motion:reduce){.lh-thumb-vid{display:none}}
.lh-thumb:hover{transform:translateY(-3px);box-shadow:0 44px 86px -26px rgba(20,44,92,.55),0 8px 22px rgba(20,44,92,.14)}
.lh-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .18s ease,background .18s ease}
.lh-thumb:hover .lh-play{transform:translate(-50%,-50%) scale(1.07);background:#fff}
.lh-play svg{width:28px;height:28px;fill:var(--blue);margin-left:4px}
.lh-thumb-cap{position:absolute;left:14px;bottom:13px;color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;background:rgba(10,16,32,.42);padding:5px 12px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* lightbox */
.lh-lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,52px);opacity:0;transition:opacity .25s ease}
.lh-lb[hidden]{display:none}
.lh-lb.open{opacity:1}
.lh-lb-bg{position:absolute;inset:0;background:rgba(8,12,22,.84);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);cursor:zoom-out}
.lh-lb-panel{position:relative;width:min(1040px,100%);aspect-ratio:16/9;max-height:86vh;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 44px 110px rgba(0,0,0,.55);transform:scale(.955);transition:transform .25s ease}
.lh-lb.open .lh-lb-panel{transform:none}
.lh-lb-vid{width:100%;height:100%;display:block;background:#000}
.lh-lb-x{position:absolute;top:10px;right:10px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lh-lb-x:hover{background:rgba(0,0,0,.78)}
.lh-lb-x svg{width:18px;height:18px}

/* the interactive demo flows below the hero on a light background */
.ldemo{background:#fff;padding:clamp(30px,5vh,64px) 0 clamp(18px,3vh,40px)}
.ldemo-in{max-width:1120px;margin:0 auto;padding:0 32px}
.ldemo .lh-visual{margin:0 auto}
.ldemo .lh-trust{margin:clamp(24px,4vh,42px) auto 0}

/* ===== Per-section backgrounds (chosen in Page Admin) ===== */
/* Soft gradient = the light base gradient from the demo, no map overlay */
.lsec-map{background:linear-gradient(180deg,#f4f7fd,#fbfcfe)!important}
/* Animated colour = the soft, drifting brand-colour aura glow (same feel as the
   live demo's aura) on a light base, rather than a flat sliding gradient. */
.lsec-anim{position:relative;isolation:isolate;overflow:hidden;background:#fbfcff!important}
.lsec-anim>*{position:relative;z-index:1}
.lsec-anim::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;filter:blur(48px);opacity:.6;
  background:
    radial-gradient(38% 46% at 26% 30%, rgba(120,170,255,.70), transparent 66%),
    radial-gradient(34% 42% at 74% 32%, rgba(196,240,110,.55), transparent 66%),
    radial-gradient(44% 52% at 52% 80%, rgba(255,150,180,.60), transparent 66%),
    radial-gradient(36% 46% at 84% 74%, rgba(170,150,255,.50), transparent 66%);
  animation:lsecAura 22s ease-in-out infinite alternate}
@keyframes lsecAura{0%{transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg)}100%{transform:translate3d(3%,3%,0) scale(1.14) rotate(7deg)}}
@media(prefers-reduced-motion:reduce){.lsec-anim::before{animation:none}}
/* "Light text" option — keeps copy legible on dark colours / photos */
.lsec-light :is(h1,h2,h3,h4,h5,p,li,.lk-eyebrow,.lk-num){color:#fff!important}
.lsec-light .lk-bar{background:#fff!important}
.lsec-light .demo,.lsec-light .demo *{color:#26241f!important}

/* ===== "Drag a file into SuperFile" — full-section canvas animation ===== */
.smf{--smf-blue:#0071e3;width:100%;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
.smf-stage{position:relative;width:100%;height:clamp(400px,42vw,500px)}
.smf-win{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:min(544px,56%);background:#fff;border:1px solid #e8eaf0;border-radius:18px;box-shadow:0 2px 6px rgba(20,30,60,.06),0 32px 74px -28px rgba(20,40,90,.30);overflow:hidden;transition:box-shadow .45s ease}
.smf.nearing .smf-win{box-shadow:0 2px 6px rgba(20,30,60,.06),0 34px 78px -22px rgba(0,90,220,.42),0 0 0 3px rgba(0,113,227,.20)}
.smf-winbar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #f0f1f5;background:#fbfbfd}
.smf-winbar i{width:10px;height:10px;border-radius:50%;background:#e4e6ec;flex:none}
.smf-winbar i:nth-child(1){background:#ff5f57}.smf-winbar i:nth-child(2){background:#febc2e}.smf-winbar i:nth-child(3){background:#28c840}
.smf-wt{font-size:12px;color:#98a0b0;margin-left:6px}
.smf-live{margin-left:auto;font-size:11px;color:#12a150;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.smf-live em{width:6px;height:6px;border-radius:50%;background:#12a150;animation:smfPulse 2s ease-in-out infinite}
@keyframes smfPulse{0%,100%{opacity:1}50%{opacity:.35}}
.smf-winbody{position:relative;padding:20px;min-height:210px}
.smf-dz{position:absolute;inset:16px;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:2px dashed #d3d9e6;border-radius:14px;color:#9aa1b0;font-size:13.5px;font-weight:600;text-align:center;padding:12px;transition:border-color .35s,background .35s,color .35s,opacity .45s}
.smf.nearing .smf-dz{border-color:var(--smf-blue);background:rgba(0,113,227,.055);color:var(--smf-blue)}
.smf.is-dropped .smf-dz{opacity:0;pointer-events:none}
.smf-dz-ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f1f4fb;color:#aab2c4;transition:background .35s,color .35s}
.smf.nearing .smf-dz-ic{background:#e3efff;color:var(--smf-blue)}
.smf-dz-ic svg{width:22px;height:22px}
.smf-card{position:relative;opacity:0;transform:translateY(6px);transition:opacity .5s .12s ease,transform .5s .12s cubic-bezier(.2,.7,.2,1)}
.smf.is-dropped .smf-card{opacity:1;transform:none}
.smf-glow{position:absolute;left:0;right:0;top:-46px;height:120px;z-index:0;pointer-events:none;background:radial-gradient(58% 100% at 50% 0,rgba(0,113,227,.14),transparent 72%);opacity:0;transition:opacity .8s ease}
.smf.is-smart .smf-glow{opacity:1}
.smf-ring{position:absolute;left:19px;top:12px;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%) scale(.4);border:2px solid var(--smf-blue);opacity:0;z-index:1;pointer-events:none}
.smf.is-dropped .smf-ring{animation:smfRing 1s cubic-bezier(.2,.7,.2,1)}
@keyframes smfRing{0%{opacity:.5;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(26)}}
.smf-top{position:relative;z-index:2;display:flex;align-items:center;gap:12px}
.smf-doc{width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#e8f1ff;color:var(--smf-blue)}
.smf-doc svg{width:20px;height:20px}
.smf-name{font-size:15.5px;font-weight:600;color:#1d1d1f;letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap}
.smf-ext{color:var(--smf-blue);font-weight:700;display:inline-block}
.smf-ext.pop{animation:smfPop .55s cubic-bezier(.2,.9,.2,1)}
@keyframes smfPop{0%{transform:scale(1)}42%{transform:scale(1.34)}100%{transform:scale(1)}}
.smf-enc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#127a3e;background:#e7f7ec;border-radius:999px;padding:5px 10px;white-space:nowrap;opacity:0;transform:scale(.8);transition:opacity .5s .12s ease,transform .5s .12s cubic-bezier(.2,.9,.2,1)}
.smf-enc svg{width:13px;height:13px}
.smf.is-smart .smf-enc{opacity:1;transform:scale(1)}
.smf-super{position:relative;z-index:2;max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .7s cubic-bezier(.2,.7,.2,1),opacity .5s ease,margin-top .5s ease}
.smf.is-smart .smf-super{max-height:360px;opacity:1;margin-top:16px}
.smf-metrics{display:flex;align-items:center;gap:18px;padding-bottom:12px;border-bottom:1px solid #f0f0f4;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.smf.show-metrics .smf-metrics{opacity:1;transform:none}
.smf-metric b{font-size:20px;font-weight:700;color:#1d1d1f;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.smf-metric.mviews b{font-size:26px;font-weight:800;color:var(--blue)}
.smf-metric span{display:block;font-size:10.5px;color:#8a90a0;margin-top:3px;font-weight:500}
.smf-spark{margin-left:auto;display:flex;align-items:flex-end;gap:3px;height:28px}
.smf-spark i{width:5px;border-radius:2px;background:linear-gradient(180deg,#4a97ff,#0071e3);height:0;transition:height .7s cubic-bezier(.2,.7,.2,1)}
.smf.show-metrics .smf-spark i{height:var(--h)}
.smf-feed{padding:8px 0 2px;display:flex;flex-direction:column;gap:1px}
.smf-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:11px;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.smf-row.on{opacity:1;transform:none}
.smf-av{width:28px;height:28px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:#fff}
.smf-av.a{background:#2f6df0}.smf-av.m{background:#12a150}.smf-av.q{background:#e2e5ec;color:#98a0b0}
.smf-rt{flex:1;min-width:0;font-size:13px;color:#454b56;line-height:1.3}
.smf-rt b{color:#1d1d1f;font-weight:600}
.smf-rt em{display:block;font-style:normal;font-size:11px;color:#9aa1b0;margin-top:1px}
.smf-badge{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap}
.smf-badge.ok{color:#127a3e;background:#e7f7ec;transition:background .45s ease,color .45s ease}.smf-badge.no{color:#c02a2a;background:#fdeaea}
.smf-badge .bl-u{display:none}
.smf.is-unshared .smf-row .smf-badge.ok{color:#c02a2a;background:#fdeaea}
.smf.is-unshared .smf-row .smf-badge.ok .bl-s{display:none}
.smf.is-unshared .smf-row .smf-badge.ok .bl-u{display:inline}
.smf-ctrls{display:flex;justify-content:center;gap:9px;padding:10px 0 2px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.smf.show-ctrls .smf-ctrls{opacity:1;transform:none}
.smf-act{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#454b56;background:#f4f6fa;border:1px solid #eaecf2;border-radius:10px;padding:7px 13px}
.smf-act svg{width:15px;height:15px}
.smf-srcpos{position:absolute;left:2%;top:50%;transform:translateY(-50%);z-index:8}
.smf-src{position:relative;display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid #eceef4;border-radius:14px;padding:12px 16px;box-shadow:0 8px 22px -8px rgba(20,40,90,.24);white-space:nowrap;will-change:transform;transform:translate(0,0);transition:box-shadow .4s ease,opacity .35s ease}
.smf.grab .smf-src{box-shadow:0 24px 46px -12px rgba(20,40,90,.42)}
.smf-src .smf-doc.red{background:#fdecec;color:#d1332e;width:34px;height:34px}
.smf-src .smf-doc.red svg{width:18px;height:18px}
.smf-srcname{font-size:14px;font-weight:600;color:#1d1d1f}
.smf-srcname b{color:#9aa1b0;font-weight:700}
.smf-cursor{position:absolute;right:-4px;bottom:-12px;z-index:3;transform:translate(12px,14px);transition:transform .25s ease;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.smf-cursor svg{width:22px;height:22px;display:block}
.smf.grab .smf-cursor{transform:translate(0,0) scale(.92)}
/* app cursor — moves to the Unshare control and clicks it to sync the share list */
.smf-appcursor{position:absolute;left:0;top:0;z-index:9;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.smf-appcursor svg{width:22px;height:22px;display:block}
.smf-appcursor.click svg{animation:smfTap .26s ease}
@keyframes smfTap{0%,100%{transform:scale(1)}45%{transform:scale(.76)}}
.smf-act{position:relative;overflow:hidden}
.smf-act.clicked{background:#e7edf6;border-color:#d5deec}
.smf-act.clicked::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:rgba(0,113,227,.3);transform:translate(-50%,-50%);animation:smfRipple .55s ease-out}
@keyframes smfRipple{to{transform:translate(-50%,-50%) scale(16);opacity:0}}
/* share-out phase: the .pdfs travels to each platform, shared with people, stays protected */
.smf-share{position:absolute;inset:0;z-index:7;pointer-events:none}
.smf-chan{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;opacity:0;transition:opacity .5s ease;text-align:center}
.smf.is-sharing .smf-chan{opacity:1;transition-delay:var(--cd)}
.c-email{left:3%;top:14%}.c-text{left:3%;bottom:14%}.c-slack{right:3%;top:14%}.c-drive{right:3%;bottom:14%}
/* the person (or device) it's shared with */
.ch-avw{position:relative;display:inline-flex}
.ch-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;box-shadow:0 6px 14px -6px rgba(20,40,90,.4)}
.ch-av svg{width:18px;height:18px}
.ch-av.a{background:#2f6df0}.ch-av.m{background:#12a150}.ch-av.d{background:#7b3fe4}.ch-av.dev{background:#455063}
/* small badge = which platform it was shared through */
.ch-plat{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;background:#fff;border:1px solid #e6e9f0;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(20,40,90,.18)}
.ch-plat svg{width:11px;height:11px}
.c-email .ch-plat{color:#2f6df0}.c-text .ch-plat{color:#12a150}.c-slack .ch-plat{color:#7b3fe4}.c-drive .ch-plat{color:#0aa2c0}
.ch-un{font-size:12.5px;font-weight:600;color:#1d1d1f;letter-spacing:-.01em}
/* their copy of the file, with access (green). Turns red when the file is taken back */
.ch-file{position:relative;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#127a3e;background:#e7f7ec;border:1px solid #cdeeda;border-radius:8px;padding:4px 8px 4px 6px;white-space:nowrap;opacity:0;transform:translate(calc(var(--fx)*.5),calc(var(--fy)*.5)) scale(.7);transition:opacity .45s ease,transform .55s cubic-bezier(.3,.7,.2,1),background .35s ease,color .35s ease,border-color .35s ease}
.smf.is-sharing .ch-file{opacity:1;transform:none;transition-delay:calc(var(--cd) + .35s)}
.ch-fic{width:15px;height:15px;flex:none;color:inherit}
.ch-ft{letter-spacing:-.01em}.ch-ft b{font-weight:800}
.ch-lk{display:inline-flex;width:13px;height:13px}.ch-lk svg{width:13px;height:13px}
.ch-cut{display:none;width:13px;height:13px}.ch-cut svg{width:13px;height:13px}
/* Sarah is requesting access */
.ch-req{display:none;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#a76a00;background:#fff5e0;border:1px solid #f4dfa8;border-radius:8px;padding:3px 9px}
.ch-req i{width:6px;height:6px;border-radius:50%;background:#e8a800;animation:smfBlink 1s ease-in-out infinite}
@keyframes smfBlink{0%,100%{opacity:1}50%{opacity:.25}}
.smf-beams{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
/* persistent connection lines with a flowing beacon; green = protected, red = unshared */
.smf-beam{stroke:#12a150;stroke-width:2;stroke-linecap:round;stroke-dasharray:1.5 7;opacity:0;filter:drop-shadow(0 0 3px rgba(18,161,80,.45));transition:stroke .4s ease,opacity .55s ease}
.smf.is-sharing .smf-beam{opacity:.95;animation:smfFlow .95s linear infinite}
@keyframes smfFlow{to{stroke-dashoffset:-17}}
/* unshared: a bright red spike, then the line breaks and disconnects */
.smf.is-unshared .smf-beam{stroke:#e0473c;animation:smfBreak 1.5s ease forwards}
@keyframes smfBreak{0%{opacity:1;stroke-width:3.6;filter:drop-shadow(0 0 7px rgba(224,71,60,.95))}16%{opacity:.95;stroke-width:2;filter:drop-shadow(0 0 3px rgba(224,71,60,.5))}58%{opacity:.85}100%{opacity:0;stroke-width:2}}
/* re-shared: reconnects with a bright green spike, then keeps flowing */
.smf.is-reshared .smf-beam.b0{stroke:#12a150;opacity:.95;animation:smfFlow .95s linear infinite,smfSpike 1.3s ease}
@keyframes smfSpike{0%{stroke-width:3.6;filter:drop-shadow(0 0 7px rgba(18,161,80,.95));opacity:1}22%{stroke-width:2;filter:drop-shadow(0 0 3px rgba(18,161,80,.45))}100%{stroke-width:2}}
/* beacon pulsing from the file itself */
.smf-top .smf-doc{position:relative}
.smf.is-sharing .smf-top .smf-doc::after{content:"";position:absolute;inset:-1px;border-radius:11px;border:2px solid #12a150;opacity:0;animation:smfBeacon 1.9s ease-out infinite;pointer-events:none}
.smf.is-unshared .smf-top .smf-doc::after{border-color:#e0473c}
@keyframes smfBeacon{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
/* revoke a person / device — not the platform */
.ch-cut{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;background:#c02a2a;color:#fff;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;opacity:0;transform:scale(.4)}
.ch-cut svg{width:9px;height:9px}
.ch-un-b{display:none}
/* unshare all — every recipient loses access at once */
/* unshared = the FILE is taken back from each person (they stay; their copy goes red) */
.smf.is-unshared .ch-file{background:#fdeaea;border-color:#f6cbc7;color:#c02a2a}
.smf.is-unshared .ch-lk{display:none}
.smf.is-unshared .ch-cut{display:inline-flex}
/* Sarah requesting access → her file chip becomes a pulsing "wants access", her avatar rings */
.smf.show-request .requester .ch-file{display:none}
.smf.show-request .requester .ch-req{display:inline-flex}
.smf.show-request .requester .ch-avw::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #e8a800;opacity:.6;animation:smfPulseRing 1.4s ease-out infinite;pointer-events:none}
@keyframes smfPulseRing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.smf.show-request .smf-beam.b0{stroke:#e8a800;opacity:.9;animation:smfFlowRev 1s linear infinite}
@keyframes smfFlowRev{to{stroke-dashoffset:17}}
/* access request → Approve → re-shared with that person */
.smf-req{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e6e9f0;border-radius:13px;padding:9px 10px 9px 12px;box-shadow:0 16px 36px -12px rgba(20,40,90,.36);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.smf.show-request .smf-req{opacity:1;transform:none}
.smf-req-av{width:28px;height:28px;flex:none;border-radius:50%;background:#2f6df0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.smf-req-t{flex:1;min-width:0;font-size:12.5px;color:#5a616e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.smf-req-t b{color:#1d1d1f;font-weight:600}
.smf-req-deny{font-size:12px;font-weight:600;color:#8a90a0;padding:6px 11px;border-radius:9px}
.smf-req-ok{position:relative;overflow:hidden;font-size:12px;font-weight:700;color:#fff;background:#12a150;padding:7px 15px;border-radius:9px}
.smf-req-ok.clicked{background:#0e8442}
.smf-req-ok.clicked::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%);animation:smfRipple .55s ease-out}
/* approved → Sarah gets her file copy back (green), request chip gone, green ring pulse */
.smf.is-reshared .requester .ch-req{display:none}
.smf.is-reshared .requester .ch-file{display:inline-flex;background:#e7f7ec;border-color:#cdeeda;color:#127a3e}
.smf.is-reshared .requester .ch-lk{display:inline-flex}
.smf.is-reshared .requester .ch-cut{display:none}
.smf.is-reshared .requester .ch-avw::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #12a150;opacity:0;animation:smfRegrant .9s ease;pointer-events:none}
@keyframes smfRegrant{0%{opacity:.75;transform:scale(.65)}100%{opacity:0;transform:scale(1.7)}}
@media(max-width:760px){
  .smf-share{position:static;display:flex;justify-content:center;flex-wrap:wrap;gap:16px 20px;margin-top:22px}
  .smf-chan{position:static!important;left:auto;right:auto;top:auto;bottom:auto}
  .ch-file{transform:translateY(6px) scale(.9)!important}
  .smf.is-sharing .ch-file{transform:none!important}
}
/* commentary — a big headline above the demo that narrates each beat */
.smf-cap{text-align:center;margin:clamp(20px,3vh,36px) auto clamp(20px,3vh,34px);min-height:38px;max-width:26ch;font-size:clamp(20px,2.4vw,30px);font-weight:600;letter-spacing:-.014em;line-height:1.15;color:#1d1d1f}
/* subtle dotted world map behind the stage — files all over the world */
/* world map + a shared coordinate space so "view" pings land on real places */
.smf-mapwrap{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:min(128%,1440px);aspect-ratio:1000/460;z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(120% 130% at 50% 50%,#000 50%,transparent 88%);mask-image:radial-gradient(120% 130% at 50% 50%,#000 50%,transparent 88%)}
.smf-map{position:absolute;inset:0;background:url('/assets/worldmap.svg') center/100% 100% no-repeat;opacity:.5}
.smf-views{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .6s ease}
.smf.show-metrics .smf-views{opacity:1}
.smf-vline{stroke:#2f6df0;stroke-width:.8;stroke-linecap:round;stroke-dasharray:2.5 4;opacity:0}
.smf.show-metrics .smf-vline{animation:smfVLine 1.5s ease forwards}
@keyframes smfVLine{0%{opacity:0;stroke-dashoffset:14}30%{opacity:.45}75%{opacity:.45}100%{opacity:.12;stroke-dashoffset:0}}
.smf-vdot{fill:#2f6df0;opacity:0;transform-box:fill-box;transform-origin:center}
.smf.show-metrics .smf-vdot{animation:smfVDot .7s ease forwards}
@keyframes smfVDot{0%{opacity:0;transform:scale(0)}55%{opacity:1;transform:scale(1.4)}100%{opacity:.95;transform:scale(1)}}
.smf-vping{fill:none;stroke:#2f6df0;stroke-width:1.4;opacity:0}
.smf.show-metrics .smf-vping{animation:smfVPing 1.9s ease-out infinite}
@keyframes smfVPing{0%{opacity:.55;r:2}100%{opacity:0;r:13}}
/* unshared: the world's views go dark too */
.smf.is-unshared .smf-vping{animation:none!important;opacity:0!important}
.smf.is-unshared .smf-vline{stroke:#e0473c!important;animation:smfVoff 1.3s ease forwards}
.smf.is-unshared .smf-vdot{fill:#e0473c!important;animation:smfVoff 1.3s ease forwards}
@keyframes smfVoff{0%{opacity:.85}22%{opacity:.85}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.smf-vping{animation:none}}
.smf-cap span{display:inline-block;animation:smfCapIn .5s ease}
/* ---- animation header: rotating step caption + step counter + play/pause ---- */
.smf-head{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 clamp(4px,0.8vh,10px)}
.smf-head .smf-cap{flex:1 1 auto;margin:0 auto;text-align:center;min-height:2.4em;max-width:24ch;font-size:clamp(26px,3.6vw,46px);font-weight:600;letter-spacing:-.022em;line-height:1.08;display:flex;align-items:center;justify-content:center}
.smf-hud{flex:none;display:flex;align-items:center;gap:12px}
.smf-step{font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:56px;text-align:right}
/* ---- transport bar (play/pause + step scrubber) under the animation ---- */
.smf-transport{position:relative;display:flex;flex-direction:column;gap:12px;margin:clamp(12px,1.8vh,20px) 0 0;padding-bottom:20px}
.smf-ctlrow{display:flex;align-items:center;justify-content:center;gap:8px}
.smf-ctlrow .smf-step{position:absolute;right:2px;bottom:0;margin:0;min-width:auto;text-align:right}
.smf-tctl{width:34px;height:34px;flex:none;padding:0;border:0;background:transparent;color:#9aa1ab;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:color .15s ease,background .15s ease}
.smf-tctl:hover{color:var(--ink);background:#eef1f6}
.smf-tctl svg{width:20px;height:20px;fill:currentColor;display:block}
.smf-track{position:relative;width:100%;height:6px;border-radius:99px;background:#e4e7ee;cursor:grab;touch-action:none;--segs:6;--gp:6px;--sw:calc((100% - (var(--segs) - 1)*var(--gp))/var(--segs));-webkit-mask:linear-gradient(90deg,#000 0,#000 var(--sw),#0000 var(--sw),#0000 calc(var(--sw) + var(--gp)),#000 calc(var(--sw) + var(--gp)),#000 calc(2*var(--sw) + var(--gp)),#0000 calc(2*var(--sw) + var(--gp)),#0000 calc(2*var(--sw) + 2*var(--gp)),#000 calc(2*var(--sw) + 2*var(--gp)),#000 calc(3*var(--sw) + 2*var(--gp)),#0000 calc(3*var(--sw) + 2*var(--gp)),#0000 calc(3*var(--sw) + 3*var(--gp)),#000 calc(3*var(--sw) + 3*var(--gp)),#000 calc(4*var(--sw) + 3*var(--gp)),#0000 calc(4*var(--sw) + 3*var(--gp)),#0000 calc(4*var(--sw) + 4*var(--gp)),#000 calc(4*var(--sw) + 4*var(--gp)),#000 calc(5*var(--sw) + 4*var(--gp)),#0000 calc(5*var(--sw) + 4*var(--gp)),#0000 calc(5*var(--sw) + 5*var(--gp)),#000 calc(5*var(--sw) + 5*var(--gp)),#000 100%);mask:linear-gradient(90deg,#000 0,#000 var(--sw),#0000 var(--sw),#0000 calc(var(--sw) + var(--gp)),#000 calc(var(--sw) + var(--gp)),#000 calc(2*var(--sw) + var(--gp)),#0000 calc(2*var(--sw) + var(--gp)),#0000 calc(2*var(--sw) + 2*var(--gp)),#000 calc(2*var(--sw) + 2*var(--gp)),#000 calc(3*var(--sw) + 2*var(--gp)),#0000 calc(3*var(--sw) + 2*var(--gp)),#0000 calc(3*var(--sw) + 3*var(--gp)),#000 calc(3*var(--sw) + 3*var(--gp)),#000 calc(4*var(--sw) + 3*var(--gp)),#0000 calc(4*var(--sw) + 3*var(--gp)),#0000 calc(4*var(--sw) + 4*var(--gp)),#000 calc(4*var(--sw) + 4*var(--gp)),#000 calc(5*var(--sw) + 4*var(--gp)),#0000 calc(5*var(--sw) + 4*var(--gp)),#0000 calc(5*var(--sw) + 5*var(--gp)),#000 calc(5*var(--sw) + 5*var(--gp)),#000 100%)}
.smf-track:hover{background:#dce1ea}
.smf-track:active{cursor:grabbing}
.smf-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:var(--blue);pointer-events:none}
.smf-fill::after{content:none;position:absolute;right:-6px;top:50%;width:13px;height:13px;border-radius:50%;background:var(--blue);transform:translateY(-50%);box-shadow:0 1px 5px rgba(0,113,227,.55)}
.smf-seg{flex:1 1 0;height:6px;min-width:0;padding:0;border:0;border-radius:99px;background:#e4e7ee;cursor:pointer;overflow:hidden;transition:background .25s ease}
.smf-seg:hover{background:#c9d2e0}
.smf-seg>i{display:block;height:100%;border-radius:99px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.smf-seg.done>i{transform:scaleX(1);background:#9db8e6}
.smf-seg.cur>i{transform:scaleX(1)}
.smf-transport .smf-step{min-width:52px}
.smf-toggle{width:40px;height:40px;flex:none;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.smf-toggle:hover{background:#f4f6fa;border-color:#d7dbe2;transform:translateY(-1px)}
.smf-toggle:active{transform:translateY(0)}
.smf-toggle svg{width:20px;height:20px;fill:currentColor;display:block}
.smf-toggle .smf-ic-play{display:none}
.smf-toggle.is-paused .smf-ic-pause{display:none}
.smf-toggle.is-paused .smf-ic-play{display:block}
@media (max-width:560px){ .smf-head{gap:10px} .smf-step{min-width:0} }
@keyframes smfCapIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .smf-stage{height:auto;min-height:0}
  .smf-win{position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;max-width:100%;margin:88px auto 0}
  .smf-srcpos{left:50%;right:auto;top:0;transform:translateX(-50%)}
  .smf-src{max-width:calc(100vw - 44px)}
  .smf-name,.smf-srcname{font-size:14px}
  .smf-winbody{padding:16px;min-height:0}
}
@media(prefers-reduced-motion:reduce){.smf *{transition:none!important;animation:none!important}.smf-src{display:none}}

@media(max-width:860px){
  .lhsplit{padding-top:clamp(56px,9vh,96px)}
  .lhsplit .lh-in{grid-template-columns:1fr;gap:30px}
  .lhsplit .lh-title{font-size:clamp(34px,9vw,52px)}
  .lhsplit .lk-cta{gap:12px}
  .lh-card{max-width:560px}
  .lh-lb-panel{max-height:70vh}
}
@media(max-width:420px){
  .lhsplit .lk-cta{flex-direction:column;align-items:stretch}
  .lhsplit .lk-cta .lk-btn{justify-content:center}
}

/* --- animated SuperFile card --- */
.lh-visual{position:relative;z-index:2;margin:clamp(26px,3.5vh,48px) auto 0;width:100%;display:flex;justify-content:center;perspective:1600px}
.fc-tilt{transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}
.sfcard{position:relative;background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.9);border-radius:26px;padding:26px 28px 24px;box-shadow:0 60px 130px -46px rgba(20,40,90,.5),0 14px 34px -20px rgba(0,0,0,.22);text-align:left;transform:rotateX(7deg);overflow:hidden;animation:cardFloat 7s ease-in-out infinite}
@keyframes cardFloat{0%,100%{transform:rotateX(7deg) translateY(0)}50%{transform:rotateX(7deg) translateY(-12px)}}
.sfc-glow{position:absolute;left:-10%;right:-10%;top:-32%;height:72%;background:radial-gradient(60% 100% at 50% 0,rgba(0,113,227,.22),transparent 70%);pointer-events:none;z-index:0;animation:glowP 4.5s ease-in-out infinite}
@keyframes glowP{0%,100%{opacity:.45}50%{opacity:1}}
.sfc-scan{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:4}
.sfc-scan::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(90deg,transparent,rgba(10,132,255,.24),transparent);animation:scanSweep 5.5s ease-in-out 1s infinite}
@keyframes scanSweep{0%{left:-60%}16%{left:130%}100%{left:130%}}
.sfc-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sfc-doc{width:44px;height:44px;border-radius:13px;background:linear-gradient(160deg,#eef3ff,#dbe8ff);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.sfc-doc svg{width:23px;height:23px}
.sfc-bwrap{position:relative;display:inline-flex;align-items:center;min-height:30px}
.sfc-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:980px;padding:6px 13px;white-space:nowrap}
.sfc-badge svg{width:13px;height:13px}
.sfc-badge.un{color:#9a6a00;background:#fdf3e0;animation:unOut .45s ease 1.15s forwards}
.sfc-badge.en{position:absolute;right:0;top:50%;transform:translateY(-50%) scale(.7);opacity:0;color:var(--green);background:#eaf7ee;animation:enIn .55s cubic-bezier(.2,1.5,.4,1) 1.25s forwards}
@keyframes unOut{to{opacity:0;transform:scale(.85)}}
@keyframes enIn{to{opacity:1;transform:translateY(-50%) scale(1)}}
.sfc-name{position:relative;z-index:2;margin:22px 0 4px;font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sfc-ext{position:relative;display:inline-block}
.sfc-ext .e-new{color:var(--blue);opacity:0;transform:translateY(9px);animation:extIn .55s cubic-bezier(.2,.9,.2,1) 1.2s forwards}
.sfc-ext .e-old{position:absolute;left:0;top:0;color:var(--faint);animation:extOut .5s ease 1.1s forwards}
@keyframes extIn{to{opacity:1;transform:none}}
@keyframes extOut{to{opacity:0;transform:translateY(-9px)}}
.sfc-meta{position:relative;z-index:2;font-size:13.5px;color:var(--faint)}
.sfc-meta b{color:var(--ink);font-weight:600}
.sfc-actions{position:relative;z-index:2;margin-top:20px;display:flex;gap:8px}
.sfc-actions span{font-size:12.5px;font-weight:500;color:var(--ink);background:#f2f2f4;border-radius:980px;padding:7px 15px;opacity:0;transform:translateY(9px);animation:chipUp .5s ease forwards}
.sfc-actions span:nth-child(1){animation-delay:1.4s}
.sfc-actions span:nth-child(2){animation-delay:1.5s}
.sfc-actions span:nth-child(3){animation-delay:1.6s}
.sfc-actions .rvk{color:var(--red);background:#fbeeed}
@keyframes chipUp{to{opacity:1;transform:none}}

/* hero reduced-motion: show final encrypted state, no motion */
@media (prefers-reduced-motion:reduce){
  .lh-blob,.lh-gly,.sfcard,.sfc-glow,.sfc-scan::before,.lh-title em{animation:none}
  .lh-title .ln>span{transform:none;animation:none}
  .sfcard{transform:none}
  .sfc-badge.un,.sfc-ext .e-old{display:none}
  .sfc-badge.en{position:static;opacity:1;transform:none;animation:none}
  .sfc-ext .e-new{opacity:1;transform:none;animation:none}
  .sfc-actions span{opacity:1;transform:none;animation:none}
}

/* ===== THE PROBLEM (dark) ===== */
.lprob{position:relative;overflow:hidden;background:#08080a;color:#fff;padding:clamp(84px,13vh,160px) 0;text-align:center}
.lprob::before{content:"";position:absolute;top:-30%;left:50%;width:min(70vw,900px);height:min(70vw,900px);transform:translateX(-50%);border-radius:50%;filter:blur(90px);background:radial-gradient(circle,rgba(40,80,180,.30),transparent 68%);animation:glowDrift 18s ease-in-out infinite;pointer-events:none}
.lprob-in{position:relative;z-index:1}
.lprob-h{margin:14px auto 0;max-width:20ch;font-size:clamp(30px,4.4vw,58px);font-weight:600;letter-spacing:-.028em;line-height:1.08}
.lprob-p{margin:20px auto 0;max-width:52ch;font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:rgba(255,255,255,.72)}
.lprob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:clamp(46px,6vh,72px) auto 0;text-align:left}
.lprob-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:30px 28px;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s}
.lprob-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.08)}
.lpc-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.09);font-size:22px;margin-bottom:18px}
.lprob-card h3{margin:0 0 9px;font-size:20px;font-weight:600;letter-spacing:-.016em}
.lprob-card p{margin:0;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.66)}

/* ===== HOW IT WORKS (scrollytelling) ===== */
.lhow{padding:clamp(80px,12vh,140px) 0 clamp(60px,9vh,120px)}
.lhow-head{text-align:center;margin-bottom:clamp(40px,6vh,72px)}
.lhow-h{margin:14px auto 0;max-width:18ch;font-size:clamp(32px,4.6vw,60px);font-weight:600;letter-spacing:-.028em;line-height:1.05}
.lhow-sub{margin:18px auto 0;max-width:48ch;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--sub)}
.lhow-grid{max-width:1120px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.lhow-media{position:sticky;top:16vh;height:min(58vh,460px)}
.lhow-stage{position:relative;width:100%;height:100%;perspective:1400px}
.hstate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hstate.on{opacity:1;transform:none}
.hcard{width:min(100%,400px);background:#fff;border:1px solid #ececef;border-radius:24px;padding:30px 30px 28px;box-shadow:0 50px 110px -46px rgba(20,30,60,.5),0 10px 26px -16px rgba(0,0,0,.18);text-align:left}
.hc-label{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.hcard-name{text-align:center;padding:44px 30px}
.hc-name{margin:16px 0 20px;font-size:clamp(34px,5vw,52px);font-weight:600;letter-spacing:-.03em;background:linear-gradient(150deg,#0a84ff,#0071e3 55%,#7db0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hc-pill{display:inline-flex;align-items:center;font-size:13px;font-weight:600;border-radius:980px;padding:7px 15px}
.hc-pill.ok{color:var(--green);background:#eaf7ee}
.hc-pill.bad{color:var(--red);background:#fbeeed}
.hc-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hc-file{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hc-file b{color:var(--blue);font-weight:600}
.hc-note{margin-top:16px;font-size:14px;line-height:1.5;color:var(--faint)}
.hc-note b{color:var(--ink);font-weight:600}
.hc-sig{margin-top:20px;display:flex;gap:6px}
.hc-sig span{height:8px;flex:1;border-radius:4px;background:linear-gradient(90deg,#dfe9ff,#bcd6ff)}
.hc-share{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.hc-share span{font-size:13.5px;font-weight:500;color:var(--ink);background:#f2f2f4;border-radius:980px;padding:9px 16px}
/* wrap: .pdf -> .pdfs */
.hc-morph{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.hm-a,.hm-b{font-size:18px;font-weight:600;letter-spacing:-.02em;padding:12px 16px;border-radius:12px;border:1px solid var(--line)}
.hm-a{color:var(--faint)}.hm-a b{color:var(--sub);font-weight:600}
.hm-b{color:var(--ink);border-color:#bcd6ff;background:#f5f9ff}.hm-b b{color:var(--blue)}
.hm-arw{color:var(--blue);display:inline-flex}.hm-arw svg{width:24px;height:24px}
/* split key */
.hc-keys{display:flex;align-items:center;margin-top:18px}
.kf{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;border:1px solid var(--line);border-radius:14px;font-size:13px;font-weight:600;color:var(--sub);text-align:center}
.kf svg{width:26px;height:26px;color:var(--blue)}
.kgap{width:26px;height:2px;flex:none;background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 9px)}
/* user access list */
.hc-users{list-style:none;margin:14px 0 0;padding:0}
.hc-users li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--hair);font-size:15px;font-weight:500;color:var(--ink)}
.hc-users li:first-child{border-top:none}
.hc-users li.add,.hc-users li.off{color:var(--faint)}
.hc-users li.off .uav{background:#f2f2f4;color:var(--faint)}
.uav{width:30px;height:30px;border-radius:50%;background:linear-gradient(160deg,#eef3ff,#dfe9ff);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none}
.utog{margin-left:auto;font-size:12px;font-weight:600;border-radius:980px;padding:5px 12px}
.utog.on{color:var(--green);background:#eaf7ee}
.utog.bad{color:var(--red);background:#fbeeed}
.hcard-verify{text-align:center;padding:40px 30px}
.hcv-check{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:#eaf7ee;color:var(--green);display:flex;align-items:center;justify-content:center}
.hcv-check svg{width:32px;height:32px}
.hcv-title{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--green)}
.hcv-line{margin-top:8px;font-size:14.5px;color:var(--sub)}
.hcv-line b{color:var(--ink);font-weight:600}
.hc-feed{list-style:none;margin:16px 0 0;padding:0}
.hc-feed li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--hair);font-size:14.5px;color:var(--sub)}
.hc-feed li:first-child{border-top:none}
.hc-feed .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 0 0 rgba(0,113,227,.5);animation:feedPulse 2s ease-out infinite}
@keyframes feedPulse{0%{box-shadow:0 0 0 0 rgba(0,113,227,.45)}100%{box-shadow:0 0 0 9px rgba(0,113,227,0)}}
.hcard-revoke{position:relative}
.hc-stamp{margin:20px 0 4px;display:inline-block;font-size:16px;font-weight:700;letter-spacing:.14em;color:var(--red);border:2.5px solid var(--red);border-radius:10px;padding:8px 16px;transform:rotate(-5deg);opacity:.9}

/* how it works — steps column */
.lhow-steps{display:flex;flex-direction:column;gap:clamp(40px,8vh,90px);padding:8vh 0}
.hstep{display:flex;gap:22px;opacity:.32;transition:opacity .4s ease}
.hstep.on{opacity:1}
.hnum{font-size:19px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums;flex:none;padding-top:4px;min-width:34px}
.hstep h3{margin:0 0 10px;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.hstep p{margin:0;font-size:16.5px;line-height:1.55;color:var(--sub)}
.hstep p b{color:var(--ink);font-weight:600}

/* ---- per-step content animations (play each time a panel becomes active) ---- */
@keyframes hIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hPop{0%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes hFromL{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes hFromR{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes hGap{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
@keyframes hArw{0%{opacity:0;transform:translateX(-8px)}55%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:none}}
@keyframes hFlash{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.12);box-shadow:0 0 0 6px rgba(229,72,64,.16)}100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(229,72,64,0)}}
.anim-on .lhow-stage .hstate.on .hcard>*{animation:hIn .55s cubic-bezier(.2,.7,.2,1) both}
/* step 1 — file morph */
.anim-on .hstate[data-step="1"].on .hm-a{animation:hIn .5s ease .12s both}
.anim-on .hstate[data-step="1"].on .hm-arw{animation:hArw .6s ease .34s both}
.anim-on .hstate[data-step="1"].on .hm-b{animation:hPop .6s cubic-bezier(.3,1.5,.5,1) .52s both}
/* step 2 — split-key: halves enter from each side, tie draws between */
.anim-on .hstate[data-step="2"].on .kf:nth-child(1){animation:hFromL .55s cubic-bezier(.2,.7,.2,1) .18s both}
.anim-on .hstate[data-step="2"].on .kgap{animation:hGap .4s ease .5s both}
.anim-on .hstate[data-step="2"].on .kf:nth-child(3){animation:hFromR .55s cubic-bezier(.2,.7,.2,1) .18s both}
/* step 3 — access list rows in, toggles pop */
.anim-on .hstate[data-step="3"].on .hc-users li:nth-child(1){animation:hIn .5s ease .2s both}
.anim-on .hstate[data-step="3"].on .hc-users li:nth-child(2){animation:hIn .5s ease .34s both}
.anim-on .hstate[data-step="3"].on .hc-users li:nth-child(3){animation:hIn .5s ease .48s both}
.anim-on .hstate[data-step="3"].on .utog.on{animation:hPop .5s cubic-bezier(.3,1.5,.5,1) .62s both}
/* step 4 — share chips pop in sequence */
.anim-on .hstate[data-step="4"].on .hc-share span:nth-child(1){animation:hPop .5s cubic-bezier(.3,1.5,.5,1) .32s both}
.anim-on .hstate[data-step="4"].on .hc-share span:nth-child(2){animation:hPop .5s cubic-bezier(.3,1.5,.5,1) .46s both}
.anim-on .hstate[data-step="4"].on .hc-share span:nth-child(3){animation:hPop .5s cubic-bezier(.3,1.5,.5,1) .6s both}
/* step 5 — live feed streams in */
.anim-on .hstate[data-step="5"].on .hc-feed li:nth-child(1){animation:hFromL .5s cubic-bezier(.2,.7,.2,1) .26s both}
.anim-on .hstate[data-step="5"].on .hc-feed li:nth-child(2){animation:hFromL .5s cubic-bezier(.2,.7,.2,1) .42s both}
.anim-on .hstate[data-step="5"].on .hc-feed li:nth-child(3){animation:hFromL .5s cubic-bezier(.2,.7,.2,1) .58s both}
/* step 6 — control: rows in, the removed badge flashes red */
.anim-on .hstate[data-step="6"].on .hc-users li:nth-child(1){animation:hIn .5s ease .2s both}
.anim-on .hstate[data-step="6"].on .hc-users li:nth-child(2){animation:hIn .5s ease .38s both}
.anim-on .hstate[data-step="6"].on .hc-users li.off .utog.bad{animation:hFlash .6s cubic-bezier(.3,1.4,.5,1) .72s both}

/* ===== FEATURE (name / extensions) ===== */
.lfeat{padding:clamp(80px,13vh,150px) 0;text-align:center}
.lfeat.alt{background:linear-gradient(180deg,#fafafb,#f4f4f7)}
.lfeat-h{margin:14px auto 0;max-width:16ch;font-size:clamp(32px,4.6vw,60px);font-weight:600;letter-spacing:-.028em;line-height:1.06}
.lfeat-sub{margin:20px auto 0;max-width:54ch;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--sub)}
/* any-file transformation: .pdf -> .pdfs */
.filemorph{margin:clamp(44px,6vh,72px) auto 0;display:inline-flex;align-items:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap;justify-content:center}
.fm-a,.fm-b{display:inline-flex;align-items:center;gap:12px;font-size:clamp(24px,3.4vw,44px);font-weight:600;letter-spacing:-.02em;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 24px;box-shadow:0 24px 60px -40px rgba(0,0,0,.35)}
.fm-a{color:var(--faint)}
.fm-a b{color:var(--sub);font-weight:600}
.fm-b{color:var(--ink);border-color:#bcd6ff;box-shadow:0 30px 66px -38px rgba(0,113,227,.5);animation:extFloat 7s ease-in-out infinite}
.fm-b b{color:var(--blue);font-weight:600}
.fm-lock{display:inline-flex;width:clamp(30px,3.6vw,40px);height:clamp(30px,3.6vw,40px);border-radius:50%;background:#eaf7ee;color:var(--green);align-items:center;justify-content:center;animation:sealPulse 3.4s ease-in-out infinite}
.fm-lock svg{width:52%;height:52%}
.fm-arw{color:var(--blue);display:inline-flex}
.fm-arw svg{width:clamp(30px,4vw,44px);height:clamp(30px,4vw,44px)}
@keyframes extFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sealPulse{0%,100%{box-shadow:0 0 0 0 rgba(26,143,60,.32)}50%{box-shadow:0 0 0 10px rgba(26,143,60,0)}}

/* branded extension chips */
.brandchips{margin:clamp(44px,6vh,72px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.bchip{font-size:clamp(20px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 24px;box-shadow:0 24px 60px -42px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.bchip b{color:var(--blue);font-weight:600}
.bchip:hover{transform:translateY(-5px);border-color:#bcd6ff;box-shadow:0 30px 60px -36px rgba(0,113,227,.4)}

/* ===== CONTROL PILLARS ===== */
.lpillars{padding:clamp(80px,13vh,150px) 0}
.lpillars-h{margin:0 auto 16px;max-width:16ch;text-align:center;font-size:clamp(30px,4.2vw,54px);font-weight:600;letter-spacing:-.026em;line-height:1.08}
.lpillars-sub{margin:0 auto clamp(40px,5.5vh,64px);max-width:56ch;text-align:center;font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:var(--sub)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,54px)}
.pillar{--acc:#0071e3;--acc-bg:#eef4ff;text-align:center;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.pillar.p1{--acc:#0071e3;--acc-bg:#eef4ff}
.pillar.p2{--acc:#7458ff;--acc-bg:#f0edff}
.pillar.p3{--acc:#e5533d;--acc-bg:#fdeeeb}
.pillar:hover{transform:translateY(-6px)}
.pl-no{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--acc);opacity:.55;margin-bottom:12px}
.pl-ic{width:66px;height:66px;border-radius:20px;background:var(--acc-bg);color:var(--acc);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pillar:hover .pl-ic{transform:scale(1.06);box-shadow:0 18px 34px -16px color-mix(in srgb,var(--acc) 62%,transparent)}
.pl-ic svg{width:32px;height:32px}
.pillar h3{margin:0 0 10px;font-size:23px;font-weight:600;letter-spacing:-.018em}
.pillar p{margin:0 auto;max-width:28ch;font-size:16px;line-height:1.5;color:var(--sub)}

/* ===== LIVE DEMO ===== */
.ldemo{padding:clamp(80px,13vh,150px) 0;background:linear-gradient(180deg,#f6f9ff,#eef4ff)}
.ldemo-in{max-width:1120px;margin:0 auto;padding:0 32px;text-align:center}
.ldemo-h{margin:14px auto 0;font-size:clamp(32px,4.4vw,58px);font-weight:600;letter-spacing:-.028em;line-height:1.05}
.ldemo-sub{margin:18px auto 0;max-width:54ch;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--sub)}
.demo{position:relative;z-index:2;width:min(92vw,500px);margin:0 auto;--aura:#4a86ff;animation:demoFloat 8s ease-in-out infinite}
@keyframes demoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* scene-reactive ambient glow (color set per scene by JS) */
.demo-aura{position:absolute;z-index:0;left:50%;top:40%;transform:translate(-50%,-50%);width:132%;height:124%;border-radius:50%;filter:blur(74px);color:var(--aura);background:radial-gradient(circle,currentColor,transparent 66%);opacity:.34;transition:color .85s ease,opacity .85s ease;pointer-events:none}
.demo.alert .demo-aura{opacity:.46}
.demo-card{position:relative;z-index:1;background:rgba(255,255,255,.94);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.9);border-radius:24px;box-shadow:0 60px 130px -46px rgba(20,40,90,.5),0 14px 34px -20px rgba(0,0,0,.16);overflow:hidden;text-align:left}
/* one-time "encrypt" sweep on load */
.demo-card::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(10,132,255,.18),transparent);animation:scanSweep 1.5s ease-out .7s 1 both}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--hair)}
.demo-file{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.demo-file b{color:var(--blue);font-weight:600}
.demo-file i{width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,#eef3ff,#dbe8ff);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;flex:none}
.demo-file i svg{width:16px;height:16px}
.demo-enc{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--green);background:#eaf7ee;border-radius:980px;padding:5px 11px;white-space:nowrap}
.demo-enc svg{width:12px;height:12px}
.demo-stage{position:relative;min-height:264px}
/* outgoing scene fades fast; incoming waits, so the two never overlap mid-swap */
.scene{position:absolute;inset:0;padding:20px 22px;opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.scene.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .42s ease .2s,transform .42s ease .2s}
.sc-cap{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;transition:color .4s ease}
.s-block .sc-cap,.s-revoke .sc-cap{color:var(--red)}
/* users list */
.d-users{list-style:none;margin:0;padding:0}
.d-users li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--hair);font-size:15px;font-weight:500;color:var(--ink)}
.d-users li:first-child{border-top:none}
.d-users li.off{color:var(--faint)}
.d-users li.off .uav{background:#f2f2f4;color:var(--faint)}
.uav.bad{background:#fbeeed;color:var(--red)}
.s-add.on .new{animation:rowIn .55s cubic-bezier(.2,.9,.2,1) .25s both}
.s-add.on .new .utog{animation:tgPop .4s ease .72s both}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tgPop{0%{transform:scale(.6);opacity:.4}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
/* feed */
.d-feed{list-style:none;margin:0;padding:0}
.d-feed li{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid var(--hair);font-size:14.5px;color:var(--sub)}
.d-feed li:first-child{border-top:none}
.d-feed li b{color:var(--ink);font-weight:600}
.d-feed .tsp{margin-left:auto;font-size:12.5px;color:var(--faint)}
.pdot{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 0 0 rgba(0,113,227,.5);animation:feedPulse 2s ease-out infinite}
.s-track.on .d-feed li{animation:rowIn .5s ease both}
.s-track.on .d-feed li:nth-child(1){animation-delay:.15s}
.s-track.on .d-feed li:nth-child(2){animation-delay:.45s}
.s-track.on .d-feed li:nth-child(3){animation-delay:.75s}
/* block */
.d-block{text-align:center}
.db-row{display:flex;align-items:center;gap:12px;padding:0 0 12px;font-size:15px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--hair)}
.db-shield{width:60px;height:60px;margin:18px auto 12px;border-radius:50%;background:#fbeeed;color:var(--red);display:flex;align-items:center;justify-content:center}
.db-shield svg{width:30px;height:30px}
.s-block.on .db-shield{animation:shieldSlam .6s cubic-bezier(.2,1.4,.4,1) .3s both}
@keyframes shieldSlam{0%{transform:scale(1.8);opacity:0}60%{transform:scale(.92)}100%{transform:scale(1);opacity:1}}
.db-msg{font-size:14px;line-height:1.5;color:var(--sub);max-width:36ch;margin:0 auto}
/* revoke */
.d-revbanner{margin-top:16px;display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--red);background:#fbeeed;border-radius:14px;padding:13px 16px}
.d-revbanner svg{width:16px;height:16px;flex:none}
.s-revoke.on .d-revbanner{animation:rowIn .5s ease .55s both}
.s-revoke.on .d-users li{animation:revFade .5s ease both}
.s-revoke.on .d-users li:nth-child(2){animation-delay:.15s}
@keyframes revFade{from{opacity:.35}to{opacity:1}}
/* tabs */
.demo-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.dtab{position:relative;overflow:hidden;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;border:1px solid #e2e8f3;border-radius:14px;background:#fff;color:var(--sub);font-size:13px;font-weight:600;letter-spacing:-.01em;transition:color .2s,border-color .2s,background .2s,transform .2s}
.dtab .di{display:inline-flex}.dtab .di svg{width:20px;height:20px}
.dtab:hover{transform:translateY(-2px);border-color:#cfe0f7}
.dtab.on{color:var(--blue);border-color:#bcd6ff;background:#f4f9ff}
.dtab.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--blue);transform-origin:left;transform:scaleX(0);animation:tabFill 3.8s linear forwards}
@keyframes tabFill{to{transform:scaleX(1)}}

/* window chrome bar */
.demo-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--hair);background:linear-gradient(180deg,#fbfcff,#f5f8fd)}
.dbar-dots{display:inline-flex;gap:6px}
.dbar-dots i{width:10px;height:10px;border-radius:50%}
.dbar-dots i:nth-child(1){background:#ff5f57}.dbar-dots i:nth-child(2){background:#febc2e}.dbar-dots i:nth-child(3){background:#28c840}
.dbar-path{font-size:12px;color:var(--faint);font-weight:500;letter-spacing:.01em}
.dbar-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--green)}
.dbar-live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:livePulse 2s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(40,200,90,.5)}100%{box-shadow:0 0 0 7px rgba(40,200,90,0)}}
/* contextual meta chips */
.demo-meta{display:flex;gap:8px;padding:12px 16px 0}
.dm-chip{font-size:11.5px;font-weight:600;color:var(--sub);background:#f2f4f8;border-radius:980px;padding:5px 11px;transition:color .35s ease,background .35s ease}
.dm-chip.bad{color:var(--red);background:#fbeeed}
/* row sublines */
.fd-main{display:flex;flex-direction:column;gap:2px;flex:1;line-height:1.25}
.fd-main em{font-style:normal;font-size:11.5px;color:var(--faint)}
/* threat ping ring */
.db-shield{position:relative}
.db-shield.ping::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);opacity:0}
.s-block.on .db-shield.ping::after{animation:ping 1.9s ease-out .5s infinite}
@keyframes ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.85);opacity:0}}
/* auto-driven cursor */
.demo-cursor{display:none;position:absolute;left:0;top:0;z-index:9;width:22px;height:22px;margin:-3px 0 0 -3px;pointer-events:none;transition:transform .6s cubic-bezier(.5,.08,.2,1);will-change:transform;filter:drop-shadow(0 3px 6px rgba(0,0,0,.28))}
.demo-cursor svg{width:100%;height:100%;display:block}
.cur-rip{position:absolute;left:6px;top:6px;width:10px;height:10px;border-radius:50%;background:rgba(10,132,255,.5);transform:translate(-50%,-50%) scale(0);opacity:0}
.demo-cursor.click .cur-rip{animation:curRip .55s ease-out}
@keyframes curRip{0%{transform:translate(-50%,-50%) scale(0);opacity:.7}100%{transform:translate(-50%,-50%) scale(5);opacity:0}}
/* track: live location map */
.d-map{position:relative;height:84px;border-radius:14px;margin-bottom:12px;background:#f3f7fc;background-image:radial-gradient(rgba(0,80,180,.13) 1px,transparent 1.4px);background-size:15px 15px;overflow:hidden}
.d-map::before{content:"";position:absolute;inset:0;background:radial-gradient(38% 62% at 18% 56%,rgba(0,90,200,.09),transparent 62%),radial-gradient(30% 56% at 48% 44%,rgba(0,90,200,.09),transparent 62%),radial-gradient(34% 62% at 78% 60%,rgba(0,90,200,.09),transparent 62%)}
.mpin{position:absolute;z-index:1;transform:translate(-50%,-100%);display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.92);border:1px solid #e2e8f3;border-radius:980px;padding:3px 8px 3px 6px;box-shadow:0 5px 12px -5px rgba(0,0,0,.25);white-space:nowrap}
.mpin i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.mpin i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);opacity:0}
.s-track.on .mpin i::after{animation:pingDot 1.9s ease-out infinite}
.s-track.on .mpin:nth-child(2) i::after{animation-delay:.5s}
.s-track.on .mpin:nth-child(3) i::after{animation-delay:1s}
@keyframes pingDot{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.4);opacity:0}}
/* revoke: header flips to a locked/revoked state */
.demo-file,.demo-file b,.demo-file i,.demo-enc{transition:color .4s ease,background .4s ease}
.demo-enc.rev{display:none;color:var(--red);background:#fbeeed}
.demo.revoked .demo-enc:not(.rev){display:none}
.demo.revoked .demo-enc.rev{display:inline-flex;animation:tgPop .4s ease}
.demo.revoked .demo-file,.demo.revoked .demo-file b{color:var(--faint)}
.demo.revoked .demo-file i{background:#f2f2f4;color:var(--faint)}

@media (max-width:640px){
  .demo-tabs{grid-template-columns:repeat(2,1fr)}
  .demo-file{font-size:14px}
  .demo-cursor{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .scene{transition:none}
  .demo{animation:none}
  .demo-card::before{display:none}
  .demo-aura{transition:none}
  .demo-cursor{display:none!important}
  .dbar-live i,.s-block.on .db-shield.ping::after{animation:none}
  .pdot,.s-add.on .new,.s-add.on .new .utog,.s-track.on .d-feed li,.s-block.on .db-shield,.s-revoke.on .d-revbanner,.s-revoke.on .d-users li{animation:none}
  .dtab.on::after{animation:none;transform:scaleX(1)}
}

/* ===== BIGGER APP-WINDOW LAYOUT ===== */
.demo{width:min(94vw,880px)}
.demo-body{display:flex;align-items:stretch}
.demo-side{width:216px;flex:none;border-right:1px solid var(--hair);padding:16px 14px;background:linear-gradient(180deg,#fbfcff,#f6f9fd)}
.side-lbl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:0 8px;margin:0 0 9px}
.side-files{list-style:none;margin:0 0 20px;padding:0}
.side-files li{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;font-size:13px;font-weight:600;color:var(--sub);transition:background .2s}
.side-files li b{color:var(--faint);font-weight:600}
.side-files li.on{background:#eaf1ff;color:var(--ink)}
.side-files li.on b{color:var(--blue)}
.sf-ic{width:24px;height:24px;border-radius:7px;background:#eef3ff;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;flex:none}
.sf-ic svg{width:13px;height:13px}
.demo-main{flex:1;min-width:0;display:flex;flex-direction:column}
/* vertical action nav (overrides the earlier horizontal tab styles) */
.demo-tabs{display:flex;flex-direction:column;gap:4px;margin-top:0;padding:0}
.dtab{flex-direction:row;justify-content:flex-start;text-align:left;gap:11px;padding:11px 12px;border:1px solid transparent;background:transparent;border-radius:10px;font-size:13.5px}
.dtab .di svg{width:18px;height:18px}
.dtab:hover{transform:none;background:#eef2fa;border-color:transparent}
.dtab.on{color:var(--blue);background:#e8f0ff;border-color:transparent}
.dtab.on::after{left:0;top:0;bottom:0;right:auto;width:3px;height:auto;background:var(--blue);border-radius:3px;transform-origin:top;transform:scaleY(0);animation:tabFillV 3.8s linear forwards}
@keyframes tabFillV{to{transform:scaleY(1)}}
/* avatar stack of people with access */
.acc-stack{margin-left:auto;display:inline-flex;align-items:center}
.acc-stack i{width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:linear-gradient(160deg,#dbe8ff,#c3d8ff);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-style:normal;margin-left:-8px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.acc-stack i:first-child{margin-left:0}
.demo.revoked .acc-stack{filter:grayscale(1);opacity:.4;transition:filter .5s,opacity .5s}
@media (max-width:760px){
  .demo-body{flex-direction:column}
  .demo-side{width:auto;border-right:none;border-bottom:1px solid var(--hair)}
  .side-files,.side-lbl{display:none}
  .demo-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .dtab{flex-direction:column;text-align:center;justify-content:center;border:1px solid #e2e8f3;background:#fff}
  .dtab.on::after{left:0;right:0;top:auto;bottom:0;width:auto;height:3px;transform-origin:left;transform:scaleX(0);animation:tabFill 3.8s linear forwards}
}

/* ===== SCENARIO ===== */
.lscene{padding:clamp(80px,13vh,150px) 0;background:linear-gradient(180deg,#fafafb,#f4f4f7);text-align:center}
.lscene-h{margin:14px auto clamp(44px,6vh,68px);font-size:clamp(30px,4.2vw,54px);font-weight:600;letter-spacing:-.026em;line-height:1.06}
.lscene-flow{list-style:none;margin:0 auto;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:left;counter-reset:scn}
.scn{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px;counter-increment:scn}
.scn::before{content:counter(scn);position:absolute;top:-14px;left:24px;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;box-shadow:0 8px 18px -8px rgba(0,113,227,.6)}
.scn-t{display:block;margin:8px 0 10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.scn p{margin:0;font-size:15.5px;line-height:1.5;color:var(--sub)}
.scn p b{color:var(--ink);font-weight:600}

/* ===== SECURITY (dark) ===== */
.lsec{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#141821,#08080a);color:#fff;padding:clamp(80px,13vh,150px) 0;text-align:center}
.lsec::before{content:"";position:absolute;bottom:-40%;left:50%;width:min(80vw,1000px);height:min(80vw,1000px);transform:translateX(-50%);border-radius:50%;filter:blur(90px);background:radial-gradient(circle,rgba(0,113,227,.26),transparent 66%);animation:glowDrift 22s ease-in-out infinite;pointer-events:none}
.lsec-in{position:relative;z-index:1}
.lsec-h{margin:14px auto 0;font-size:clamp(32px,4.6vw,60px);font-weight:600;letter-spacing:-.028em;line-height:1.06}
.lsec-p{margin:20px auto 0;max-width:54ch;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:rgba(255,255,255,.8)}
.badges{margin:clamp(40px,6vh,64px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.badges span{font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:980px;padding:11px 22px}
@keyframes glowDrift{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translate(-46%,4%) scale(1.12)}}

/* ===== CLASSES ===== */
.lclasses{padding:clamp(80px,13vh,150px) 0;text-align:center}
.lclasses-h{margin:14px auto clamp(44px,6vh,68px);max-width:18ch;font-size:clamp(30px,4.2vw,54px);font-weight:600;letter-spacing:-.026em;line-height:1.08}
.classgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.classcard{background:linear-gradient(180deg,#fafafb,#f4f4f7);border:1px solid var(--line);border-radius:22px;padding:32px 30px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.classcard:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(20,30,60,.35);border-color:#d7d7dc}
.classcard h3{margin:0 0 12px;font-size:22px;font-weight:600;letter-spacing:-.018em}
.classcard p{margin:0;font-size:16px;line-height:1.55;color:var(--sub)}

/* ===== PRICING ===== */
.lprice{padding:clamp(80px,13vh,150px) 0;background:linear-gradient(180deg,#fff,#fafafb);border-top:1px solid var(--hair);text-align:center}
.lprice-h{margin:14px auto 0;font-size:clamp(32px,4.4vw,56px);font-weight:600;letter-spacing:-.028em;line-height:1.05}
.lprice-sub{margin:18px auto 0;max-width:50ch;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--sub)}
.pricegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:clamp(44px,6vh,68px) auto 0;text-align:left}
.pricecard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 30px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pricecard:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(20,30,60,.3)}
.pricecard.feat{border-color:#bcd6ff;box-shadow:0 30px 60px -34px rgba(0,113,227,.4)}
.pr-amt{font-size:clamp(40px,5vw,62px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.pr-amt span{font-size:16px;font-weight:500;letter-spacing:0;color:var(--faint);margin-left:6px}
.pricecard h3{margin:16px 0 8px;font-size:20px;font-weight:600;letter-spacing:-.016em}
.pricecard p{margin:0;font-size:15.5px;line-height:1.55;color:var(--sub)}

/* ===== FAQ ===== */
.lfaq{padding:clamp(80px,13vh,150px) 0;text-align:center}
.lfaq-h{margin:14px auto clamp(40px,5vh,60px);font-size:clamp(30px,4.2vw,54px);font-weight:600;letter-spacing:-.026em;line-height:1.06}
.faqlist{max-width:760px;margin:0 auto;text-align:left}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;font-size:clamp(17px,1.7vw,20px);font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.fq-x{position:relative;flex:none;width:20px;height:20px}
.fq-x::before,.fq-x::after{content:"";position:absolute;top:50%;left:50%;width:15px;height:2.2px;border-radius:2px;background:var(--blue);transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.fq-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq[open] .fq-x::after{transform:translate(-50%,-50%) rotate(0)}
.fq-a{padding:0 4px 26px;font-size:16.5px;line-height:1.6;color:var(--sub);max-width:64ch}
.faq[open] summary{color:var(--blue)}

/* ===== STEPS ===== */
.lsteps-sec{background:#08080a;color:#fff;padding:clamp(80px,13vh,150px) 0;text-align:center}
.lsteps-sec .lk-eyebrow.center{color:#7db0ff}
.lsteps-sec .lk-eyebrow.center .lk-bar{background:#7db0ff}
.lsteps-h{margin:14px auto 0;font-size:clamp(30px,4.2vw,54px);font-weight:600;letter-spacing:-.026em;line-height:1.06}
.lsteps{list-style:none;margin:clamp(46px,6vh,72px) auto 0;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,54px);text-align:center}
.lstep{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 8px}
.lstep:not(:last-child)::after{content:"";position:absolute;top:25px;left:calc(50% + 38px);right:calc(-50% + 38px);height:2px;background:rgba(255,255,255,.16);border-radius:2px}
.lnum{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;margin-bottom:22px;position:relative;z-index:1;box-shadow:0 10px 22px -8px rgba(0,113,227,.55)}
.ltxt h4{margin:0 0 8px;font-size:19px;font-weight:600;letter-spacing:-.014em}
.ltxt p{margin:0 auto;max-width:30ch;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.66)}

/* ===== PROOF ===== */
.lproof{padding:clamp(80px,13vh,140px) 0;text-align:center}
.lproof-h{margin:14px auto clamp(36px,5vh,56px);max-width:20ch;font-size:clamp(28px,3.8vw,48px);font-weight:600;letter-spacing:-.024em;line-height:1.08}
.prooflogos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(28px,5vw,64px);margin:0 0 34px}
.prooflogos.pl-marquee{display:block;overflow:hidden;flex-wrap:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pl-track{display:inline-flex;align-items:center;gap:clamp(28px,5vw,64px);padding-right:clamp(28px,5vw,64px);white-space:nowrap;animation:plscroll 34s linear infinite;will-change:transform}
.prooflogos.pl-marquee:hover .pl-track{animation-play-state:paused}
@keyframes plscroll{to{transform:translateX(-50%)}}
.prooflogos .pl{display:inline-flex;align-items:center;height:40px;color:#86909c;filter:grayscale(1);opacity:.8;transition:filter .25s,opacity .25s}
.prooflogos .pl:hover{filter:none;opacity:1}
.prooflogos .pl img{height:100%;width:auto;max-width:150px;object-fit:contain;display:block}
.prooflogos .pl-txt{font-size:20px;font-weight:800;letter-spacing:.01em}

/* ===== CLOSE ===== */
.lclose{padding:clamp(80px,13vh,150px) 0;text-align:center;border-top:1px solid var(--hair);background:linear-gradient(180deg,#fff,#fafafb)}
.lclose-h{margin:0;font-size:clamp(38px,5.4vw,72px);font-weight:600;letter-spacing:-.032em;line-height:1.02}
.lclose-sub{margin:18px auto 32px;max-width:44ch;font-size:clamp(18px,1.5vw,21px);color:var(--sub);line-height:1.45}
.lclose .lk-btn{font-size:18px;padding:15px 34px}

/* ============================================================
   SCROLL REVEALS — SAFE: only hidden once JS confirms support
   ============================================================ */
.anim-on .rv{opacity:0;transform:translateY(30px);filter:blur(7px)}
.anim-on .rv.in{opacity:1;transform:none;filter:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1)}
.anim-on .namechip.rv{opacity:0;transform:translateY(30px);filter:blur(7px)}
.anim-on .namechip.rv.in{opacity:1;filter:none;animation:chipFloat 6s ease-in-out .9s infinite,chipShine 5.5s linear infinite;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1)}
.anim-on .extname.rv{opacity:0;transform:translateY(30px);filter:blur(7px)}
.anim-on .extname.rv.in{opacity:1;filter:none;animation:extFloat 7s ease-in-out .9s infinite;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1)}
.anim-on .pillar.rv .pl-ic svg *{stroke-dasharray:230;stroke-dashoffset:230}
.anim-on .pillar.rv.in .pl-ic svg *{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.4,.6,.2,1) .25s}

/* ---- signature motion per power (starts after the stroke draws in, then loops) ---- */
.anim-on .pillar .pl-ic svg .lk-shk,
.anim-on .pillar .pl-ic svg .lk-key,
.anim-on .pillar .pl-ic svg .pp-add{transform-box:fill-box;transform-origin:center}
.anim-on .pillar.p1.in .pl-ic svg .lk-shk{animation:plShk 3.4s cubic-bezier(.5,0,.2,1) 1.5s infinite}
.anim-on .pillar.p1.in .pl-ic svg .lk-key{animation:plKey 3.4s ease 1.5s infinite}
.anim-on .pillar.p2.in .pl-ic svg .pp-add{animation:plAdd 3.9s cubic-bezier(.4,0,.2,1) 1.8s infinite}
.anim-on .pillar.p3.in .pl-ic svg{transform-origin:center;animation:plSpin 4.3s cubic-bezier(.5,0,.2,1) 2.1s infinite}
/* hover speeds the loop up for an on-demand replay */
.anim-on .pillar.p1:hover .pl-ic svg .lk-shk{animation-duration:1.5s;animation-delay:0s}
.anim-on .pillar.p2:hover .pl-ic svg .pp-add{animation-duration:1.7s;animation-delay:0s}
.anim-on .pillar.p3:hover .pl-ic svg{animation-duration:1.7s;animation-delay:0s}
@keyframes plShk{0%,52%,100%{transform:translateY(0)}62%{transform:translateY(-3px)}72%{transform:translateY(-3px)}82%{transform:translateY(1.1px)}88%{transform:translateY(0)}}
@keyframes plKey{0%,74%,100%{opacity:1;transform:scale(1)}80%{opacity:.35;transform:scale(.7)}86%{opacity:1;transform:scale(1)}}
@keyframes plAdd{0%,46%,100%{opacity:1;transform:scale(1)}58%{opacity:0;transform:scale(.4)}72%{opacity:0;transform:scale(.4)}84%{opacity:1;transform:scale(1.12)}90%{transform:scale(1)}}
@keyframes plSpin{0%,50%,100%{transform:rotate(0)}80%{transform:rotate(-360deg)}}

@media (max-width:900px){
  .lhow-grid{grid-template-columns:1fr;gap:0}
  .lhow-media{position:relative;top:0;height:auto;margin-bottom:8px}
  .lhow-media .hstate{position:relative;opacity:1;transform:none}
  .lhow-media .hstate:not(:first-child){display:none}
  .lhow-steps{padding:24px 0 0;gap:34px}
  .hstep{opacity:1}
  .lprob-grid,.classgrid,.pillars,.pricegrid{grid-template-columns:1fr;gap:16px;max-width:540px;margin-left:auto;margin-right:auto}
  .pillars{gap:44px}
  .lscene-flow{grid-template-columns:1fr;gap:26px;max-width:460px}
  .scn::before{top:-14px}
}
@media (max-width:720px){
  .lk-in,.lh-in,.lprob-in,.lhow-head,.lhow-grid,.lfeat-in,.lpillars-in,.lscene-in,.lsec-in,.lclasses-in,.lprice-in,.lfaq-in,.lsteps-in,.lproof-in,.lclose-in{padding-left:22px;padding-right:22px}
  .lk-cta{justify-content:center}
  .lsteps{grid-template-columns:1fr;gap:26px;max-width:400px;text-align:left}
  .lstep{flex-direction:row;align-items:flex-start;gap:18px;padding:0}
  .lstep:not(:last-child)::after{display:none}
  .lnum{margin-bottom:0;flex:none;width:46px;height:46px;font-size:19px}
  .ltxt h4{margin-top:9px}.ltxt p{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .lprog{display:none}
  .lh-a,.filecard,.lh-orb,.namechip,.extname,.ext-seal,.hc-feed .dot,.lprob::before,.lsec::before,.pl-track{animation:none}
  /* .lh-a starts at opacity:0 and is revealed ONLY by the heroIn animation. Under reduced-motion the
     animation is disabled above, so without this reset the content (eyebrow, lede, CTA, film card,
     section copy) stays permanently invisible — it flashes in from the raw HTML then the CSS hides it.
     Reset to heroIn's final resting state so reduced-motion users see the content immediately. */
  .lh-a{opacity:1;transform:none}
  .filecard{transform:none}
  .fc-tilt{transform:none!important;transition:none}
  .hstate{opacity:1;transform:none;position:relative}
  .lhow-media .hstate:not(:first-child){display:none}
  .anim-on .rv,.anim-on .namechip.rv,.anim-on .extname.rv{opacity:1;transform:none;filter:none;animation:none;transition:none}
  .anim-on .pillar.rv .pl-ic svg *{stroke-dashoffset:0}
  .anim-on .pillar .pl-ic svg .lk-shk,.anim-on .pillar .pl-ic svg .lk-key,.anim-on .pillar .pl-ic svg .pp-add,.anim-on .pillar .pl-ic svg{animation:none!important;transform:none!important;opacity:1!important}
  .anim-on .lhow-stage .hstate .hcard *,.anim-on .lhow-stage .hstate .hcard>*{animation:none!important;transform:none!important;opacity:1!important}
  .pillar:hover,.pl-ic,.classcard:hover,.pricecard:hover,.lprob-card:hover{transform:none}
}

/* ============================================================
   PAGE POLISH — pillars / split-key / who / close
   ============================================================ */
/* pillar cards + example chips */
.pillar{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 28px 30px;overflow:hidden}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);opacity:0;transition:opacity .3s}
.pillar:hover{box-shadow:0 26px 50px -30px color-mix(in srgb,var(--acc) 34%,rgba(20,30,60,.28));border-color:color-mix(in srgb,var(--acc) 32%,var(--line))}
.pillar:hover::before{opacity:1}
.pl-eg{display:inline-block;margin-top:18px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--acc);background:var(--acc-bg);border-radius:980px;padding:6px 13px}

/* split-key diagram (dark) */
.skey{display:flex;align-items:center;justify-content:center;margin:clamp(44px,6vh,68px) auto 22px;max-width:600px}
.skey-part{display:flex;flex-direction:column;align-items:center;gap:11px;flex:none}
.skey-ic{width:66px;height:66px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#7db8ff;display:flex;align-items:center;justify-content:center}
.skey-ic svg{width:30px;height:30px}
.skey-lbl{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72)}
.skey-beam{flex:1;min-width:34px;height:2px;margin:0 10px;position:relative;background:rgba(255,255,255,.14);overflow:hidden;align-self:flex-start;margin-top:31px}
.skey-beam::after{content:"";position:absolute;top:0;bottom:0;width:45%;background:linear-gradient(90deg,transparent,#0a84ff,transparent)}
.skey-beam.bl::after{animation:beamR 2.2s linear infinite}
.skey-beam.br::after{animation:beamL 2.2s linear infinite}
@keyframes beamR{0%{left:-45%}100%{left:100%}}
@keyframes beamL{0%{left:100%}100%{left:-45%}}
.skey-file{flex:none;width:96px;height:96px;border-radius:24px;background:radial-gradient(circle at 50% 38%,#173056,#0b1526);border:1px solid rgba(125,184,255,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#cfe4ff;box-shadow:0 0 44px -6px rgba(10,132,255,.55);animation:skeyGlow 3s ease-in-out infinite}
.skey-file svg{width:30px;height:30px}
.skey-ext{font-size:13px;font-weight:600;color:#7db8ff}
@keyframes skeyGlow{0%,100%{box-shadow:0 0 40px -8px rgba(10,132,255,.4)}50%{box-shadow:0 0 56px -4px rgba(10,132,255,.7)}}
.skey-note{margin:0 auto;font-size:14px;color:rgba(255,255,255,.62);text-align:center}

/* who-it's-for icons + example extension */
.classcard{text-align:left}
.cc-ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(160deg,#eef3ff,#e0e9ff);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.cc-ic svg{width:24px;height:24px}
.cc-eg{display:inline-block;margin-top:18px;font-size:14px;font-weight:600;color:var(--blue);background:#eef4ff;border-radius:980px;padding:6px 14px;letter-spacing:.01em}

/* close finale */
.lclose{position:relative;overflow:hidden}
.lclose-orb{position:absolute;border-radius:50%;filter:blur(80px);z-index:0;pointer-events:none}
.lclose-orb.o1{top:-30%;left:8%;width:min(46vw,560px);height:min(46vw,560px);background:radial-gradient(circle,rgba(120,170,255,.4),transparent 70%);animation:blobA 17s ease-in-out infinite}
.lclose-orb.o2{bottom:-34%;right:6%;width:min(40vw,500px);height:min(40vw,500px);background:radial-gradient(circle,rgba(150,190,255,.32),transparent 72%);animation:blobB 21s ease-in-out infinite}
.lclose-in{position:relative;z-index:1}
.lclose-h em{font-style:normal;background:linear-gradient(105deg,#0a84ff,#0071e3 45%,#7db8ff);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleShine 6.5s linear infinite}
.lclose-cta{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:6px}
.lclose .lk-btn{font-size:18px;padding:15px 34px}
.lclose-fine{margin:24px auto 0;font-size:13.5px;font-weight:500;color:var(--faint);letter-spacing:.01em}

@media (max-width:560px){
  .skey{flex-wrap:wrap;gap:14px}
  .skey-beam{display:none}
}
@media (prefers-reduced-motion:reduce){
  .skey-beam::after,.skey-file,.lclose-orb,.lclose-h em{animation:none}
}

/* ============================================================
   PAGE POLISH II — problem viz / transform / scenario timeline
   ============================================================ */
/* problem: one file → many uncontrolled copies */
.lprob-viz{position:relative;width:100%;max-width:440px;height:150px;margin:clamp(36px,5vh,58px) auto;display:flex;align-items:center;justify-content:center}
.pv-core{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:14px 20px;font-size:15px;font-weight:600;color:#fff;box-shadow:0 12px 44px -10px rgba(0,0,0,.6)}
.pv-core svg{width:18px;height:18px;color:#7db8ff}
.pv-ghost{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:11px 16px;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap;opacity:0;--dx:0px;--dy:0px;animation:drift 4.6s ease-out infinite;animation-delay:var(--d,0s)}
.pv-ghost svg{width:15px;height:15px;color:rgba(125,184,255,.6)}
@keyframes drift{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}12%{opacity:.6}70%{opacity:.14}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.02)}}
.lpc-ic{color:#dbe9ff}
.lpc-ic svg{width:22px;height:22px}

/* any-file: transformation animates in on reveal */
.fm-s{display:inline-block}
.anim-on .filemorph .fm-s{max-width:0;opacity:0;overflow:hidden;vertical-align:bottom}
.anim-on .filemorph.in .fm-s{max-width:.75em;opacity:1;transition:max-width .45s ease .55s,opacity .4s ease .6s}
.anim-on .filemorph .fm-lock{opacity:0;transform:scale(.5)}
.anim-on .filemorph.in .fm-lock{opacity:1;transform:none;transition:opacity .4s ease .85s,transform .55s cubic-bezier(.2,1.6,.4,1) .85s}

/* scenario: connected timeline */
.lscene-flow{position:relative}
.scn{z-index:1;text-align:center}
.scn::before{left:50%;transform:translateX(-50%)}
.scn-t{text-align:center}
.lscene-flow::before{content:"";position:absolute;z-index:0;top:1px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(90deg,var(--blue),#7db8ff);border-radius:2px;transform-origin:left;transform:scaleX(1)}
.anim-on .lscene-flow::before{transform:scaleX(0);transition:transform 1.15s ease .1s}
.anim-on .lscene-flow.in::before{transform:scaleX(1)}
.lscene-note{margin:clamp(34px,4.5vh,52px) auto 0;font-size:15px;font-weight:500;color:var(--faint)}

@media (max-width:900px){
  .lscene-flow::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pv-ghost{animation:none;display:none}
}

/* ============================================================
   COMPREHENSION — comparison + interactive try-it
   ============================================================ */
.ldiff{padding:clamp(80px,13vh,150px) 0;background:#fff;text-align:center}
.ldiff-in{max-width:1000px;margin:0 auto;padding:0 32px}
.ldiff-h{margin:14px auto 0;font-size:clamp(32px,4.4vw,58px);font-weight:600;letter-spacing:-.028em;line-height:1.05}
.ldiff-sub{margin:18px auto 0;max-width:48ch;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--sub)}
.diffgrid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:clamp(44px,6vh,64px) auto 0;text-align:left}
.diffcol{position:relative;border-radius:24px;padding:30px 30px 28px;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.diffcol::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.diffcol.reg{background:#f6f6f8;border:1px solid var(--line)}
.diffcol.reg::before{background:linear-gradient(90deg,#e2b7b2,#cf9a94)}
.diffcol.sup{background:linear-gradient(180deg,#fff,#f3f9ff);border:1px solid #bcd6ff;box-shadow:0 30px 60px -38px rgba(0,113,227,.32)}
.diffcol.sup::before{background:linear-gradient(90deg,#0071e3,#37c26f)}
.diffcol.sup:hover{transform:translateY(-3px);box-shadow:0 40px 70px -38px rgba(0,113,227,.42)}
.dc-head{display:flex;align-items:center;gap:13px;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.dc-fic{flex:none;width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#eceded;color:#8b8f96;border:1px solid var(--line)}
.dc-fic.sup{background:linear-gradient(180deg,#eaf3ff,#e2f6ec);color:var(--blue);border-color:#bcd6ff}
.dc-fic svg{width:21px;height:21px}
.dc-tag{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);background:#fff;border:1px solid var(--line);border-radius:980px;padding:5px 12px}
.dc-tag.ok{color:var(--green);background:#eaf7ee;border-color:#c9ecd3}
.dc-name{flex:1;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.dc-name .dim{color:var(--faint)}
.dc-name b{color:var(--blue);font-weight:600}
.dc-list{list-style:none;margin:0;padding:0}
.dc-list li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-size:15.5px;line-height:1.4;border-top:1px solid rgba(0,0,0,.05)}
.dc-list li:first-of-type{border-top:none}
.dc-list li.no{color:var(--sub)}
.dc-list li.yes{color:var(--ink);font-weight:500}
.dc-foot{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(0,0,0,.06);font-size:14px;line-height:1.45;font-weight:500;color:var(--faint)}
.dc-foot.ok{color:var(--green);border-top-color:#d6ecdd}
.dc-x,.dc-v{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.dc-x{background:#f1dedd;position:relative}
.dc-x::before,.dc-x::after{content:"";position:absolute;width:10px;height:2px;background:#c0392b;border-radius:2px}
.dc-x::before{transform:rotate(45deg)}.dc-x::after{transform:rotate(-45deg)}
.dc-v{background:#dff3e5;color:var(--green)}
.dc-v svg{width:12px;height:12px}
.diff-vs{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -10px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--faint)}

/* interactive try-it */
.fm-try-wrap{margin:clamp(22px,3vh,34px) auto 0;display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:980px;padding:6px 6px 6px 18px;box-shadow:0 10px 30px -18px rgba(0,0,0,.2);transition:border-color .2s,box-shadow .2s}
.fm-try-wrap:focus-within{border-color:#bcd6ff;box-shadow:0 12px 34px -16px rgba(0,113,227,.4)}
.fm-try-lbl{font-size:13.5px;font-weight:600;color:var(--faint);white-space:nowrap}
.fm-try{font:inherit;font-size:15px;font-weight:600;color:var(--ink);border:none;outline:none;background:#f2f4f8;border-radius:980px;padding:9px 16px;width:min(46vw,190px);letter-spacing:-.01em}

@media (max-width:760px){
  .diffgrid{grid-template-columns:1fr;gap:30px}
  .diff-vs{position:static;transform:none;margin:0 auto}
}

/* chapter-number spine on the core narrative eyebrows */
.lk-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue);opacity:.85}
.lk-eyebrow.light .lk-num{color:#7db8ff}

/* admin-authored custom section */
.lcustom{padding:clamp(70px,11vh,130px) 0;text-align:center}
.lc-in{max-width:820px;margin:0 auto;padding:0 32px}
.lc-h{margin:14px auto 0;font-size:clamp(30px,4.2vw,54px);font-weight:600;letter-spacing:-.026em;line-height:1.08;color:var(--ink)}
.lc-p{margin:20px auto 0;max-width:60ch;font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--sub)}
.lc-cta{margin-top:32px}

/* ---- beat 7: compliance trail strip ---- */
.smf-trail{display:flex;align-items:center;gap:9px;margin-top:8px;padding:9px 12px;border:1px solid rgba(10,108,255,.25);background:rgba(10,108,255,.06);border-radius:11px;font-size:12px;color:var(--ink,#1d1d1f);opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.smf-trail .tic{display:inline-flex;width:18px;height:18px;color:var(--blue,#0A6CFF);flex:none}
.smf-trail .tic svg{width:18px;height:18px}
.smf-trail .tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smf-trail .tx{flex:none;font-weight:700;color:var(--blue,#0A6CFF);background:#fff;border:1px solid rgba(10,108,255,.3);border-radius:999px;padding:3px 10px;font-size:11px}
.smf.show-trail .smf-trail{opacity:1;transform:none}