/* ============================================================
   REALTAKE — shared stylesheet ("Projection Silence")
   One file for every marketing page. Tokens match the product.
   The page is a dark room; blue only ever behaves as light.
   ============================================================ */
:root{
--bg:#000;--panel:#0d0d0d;--card:#0e1014;--line:#22262c;--hair:#17191d;
--blue:#0096FF;--sky:#06A9FF;--cyan:#48DFFF;
--neon:#B4FF39;--purple:#8B3DFF;--pink:#EA347F;
--text:#fff;--text2:rgba(255,255,255,.66);--muted:#8c8c8c;--faint:#6e6e6e;
--display:'Inter Tight','Inter',sans-serif;
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--mono:'Geist Mono','IBM Plex Mono',ui-monospace,monospace;
--serif:'Crimson Pro',Georgia,serif;
--ease:cubic-bezier(.22,1,.36,1);--easeio:cubic-bezier(.65,0,.35,1);--snap:cubic-bezier(.5,0,.1,1.4);--spring:cubic-bezier(.34,1.56,.64,1);
--secy:clamp(4rem,9vh,7rem);
--rbtn:10px;
--bannerh:44px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 2px #000,0 0 0 4px var(--cyan);border-radius:6px}
img,svg,video{display:block;max-width:100%}
.wrap{max-width:78rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.narrow{max-width:52rem}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
main{position:relative;z-index:2}

/* texture: grain + uneven darkness */
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body:before{content:"";position:fixed;inset:-10%;pointer-events:none;z-index:0;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 900 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.55' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.5'/%3E%3C/svg%3E");background-size:1400px 1400px;mix-blend-mode:screen}
.scroll-light{position:fixed;left:50%;top:0;width:130vmax;height:130vmax;margin:-65vmax 0 0 -65vmax;pointer-events:none;z-index:1;will-change:transform;background:radial-gradient(circle,rgba(0,150,255,.08),rgba(6,169,255,.025) 38%,transparent 60%)}
.cursor-light{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(circle,rgba(120,200,255,.10),rgba(0,150,255,.04) 45%,transparent 65%)}
body.has-pointer .cursor-light{opacity:1}

/* crawler-safe reveals: default state is fully visible */
.reveal{opacity:1;transform:none;filter:none;transition:opacity .55s var(--ease),transform .6s var(--spring),filter .55s var(--ease)}
html.anim-ready .reveal:not(.in){opacity:0;transform:translateY(16px);filter:blur(9px)}

/* type */
.microtype{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-weight:900;font-size:clamp(2.25rem,1.2rem + 4vw,3.75rem);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
h2{font-family:var(--display);font-weight:900;font-size:clamp(1.75rem,1.2rem + 2.6vw,2.75rem);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
h3{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,1.1rem + .8vw,1.5rem);line-height:1.2;letter-spacing:-.02em}
.human{font-family:var(--serif);font-style:italic;color:var(--text2);font-size:1.125rem}

/* founder banner */
.founder-banner{position:fixed;inset-inline:0;top:0;height:var(--bannerh);z-index:70;display:flex;align-items:center;background:linear-gradient(90deg,var(--purple),var(--pink));box-shadow:0 6px 30px rgba(139,61,255,.35)}
.fb-inner{max-width:78rem;width:100%;margin-inline:auto;padding:0 clamp(1.25rem,4vw,3rem);display:flex;align-items:center;justify-content:center;gap:1.25rem;white-space:nowrap}
.fb-inner b{font-family:var(--display);font-weight:800;font-size:.9375rem;letter-spacing:-.01em;color:#fff}
.fb-cta{font-family:var(--display);font-weight:800;font-size:.8125rem;color:var(--purple);background:#fff;border-radius:var(--rbtn);padding:7px 16px;transition:transform .28s var(--spring),box-shadow .28s var(--spring)}
.fb-cta:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(0,0,0,.35)}
@media(max-width:520px){.fb-inner{gap:.75rem}.fb-inner b{font-size:.75rem}.fb-cta{font-size:.75rem;padding:6px 11px}}

/* nav */
.nav{position:fixed;inset-inline:0;top:var(--bannerh);z-index:60;display:flex;justify-content:space-between;align-items:center;padding:1.25rem clamp(1.25rem,4vw,3rem);background:linear-gradient(rgba(0,0,0,.85),transparent);transition:background .3s var(--ease),padding .3s var(--ease),border-color .3s var(--ease);border-bottom:1px solid transparent}
.nav.scrolled,.nav.open{background:rgba(0,0,0,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.07);padding-block:.85rem}
.wordmark{display:flex;align-items:center}
.wordmark img{height:24px;width:auto}
.nav-mid{display:flex;gap:2.1rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav-mid a,.foot-col a,.foot-nav a{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .15s var(--ease)}
.nav-mid a:hover,.nav-mid a[aria-current]{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:1.4rem}
.nav-auth{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .15s var(--ease);white-space:nowrap}
.nav-auth:hover{color:var(--text)}
.nav-cta{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text);border:1px solid rgba(255,255,255,.22);border-radius:var(--rbtn);padding:10px 16px;transition:transform .28s var(--spring),border-color .2s var(--ease),background .2s var(--ease);white-space:nowrap}
.nav-cta:hover{border-color:var(--blue);background:rgba(0,150,255,.08);transform:translateY(-1px)}
.nav-toggle{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:var(--rbtn);position:relative}
.nav-toggle:before,.nav-toggle:after{content:"";position:absolute;left:11px;right:11px;height:1.5px;background:#fff;transition:transform .2s var(--ease),top .2s var(--ease)}
.nav-toggle:before{top:15px}.nav-toggle:after{top:23px}
.nav.open .nav-toggle:before{top:19px;transform:rotate(45deg)}
.nav.open .nav-toggle:after{top:19px;transform:rotate(-45deg)}
.nav-sheet{display:none}
@media(max-width:1080px){
 .nav-mid{display:none}
 .nav-toggle{display:block}
 .nav-auth.su{display:none}
 .nav-sheet{position:fixed;inset-inline:0;top:calc(var(--bannerh) + 66px);bottom:0;z-index:59;background:rgba(0,0,0,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:1.5rem clamp(1.25rem,4vw,3rem) 3rem;overflow-y:auto;flex-direction:column;gap:.25rem}
 .nav-sheet.open{display:flex}
 .nav-sheet a{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;padding:.7rem 0;border-bottom:1px solid var(--hair)}
 .nav-sheet a.btn{border:0;margin-top:1.25rem;font-size:1.0625rem;padding:14px 24px}
}
@media(max-width:560px){.nav-cta{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.0625rem;letter-spacing:-.01em;border-radius:var(--rbtn);padding:14px 28px;transition:transform .28s var(--spring),box-shadow .28s var(--spring),border-color .2s var(--ease);text-align:center}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 0 0 1px rgba(0,150,255,.4),0 4px 28px rgba(0,150,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,150,255,.7),0 6px 40px rgba(0,150,255,.5)}
.btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.35)}
.btn-sm{padding:9px 16px;font-size:.8125rem}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.center .cta-row,.cta-row.center{justify-content:center}
.nocc{display:block;margin-top:.9rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.textlink{color:var(--sky);text-decoration:underline;text-decoration-color:rgba(6,169,255,.4);text-underline-offset:3px}
.textlink:hover{text-decoration-color:var(--sky)}

/* page header */
.head{padding-top:calc(clamp(6.5rem,13vh,8.5rem) + var(--bannerh));padding-bottom:clamp(2rem,5vh,3.5rem);position:relative}
.head.center .sub,.head.center .answer{margin-inline:auto}
.crumbs{display:flex;gap:.6rem;flex-wrap:wrap;font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1.4rem}
.head.center .crumbs{justify-content:center}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-current]{color:var(--muted)}
.head .microtype{display:block;margin-bottom:1.1rem;color:var(--sky)}
.sub{margin-top:1.1rem;font-size:clamp(1.0625rem,.95rem + .5vw,1.25rem);color:var(--text2);max-width:46rem}
.head .cta-row{margin-top:1.75rem}
.byline{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.byline b{color:var(--text);font-weight:500}
.byline i{width:3px;height:3px;border-radius:50%;background:var(--faint)}

/* the direct answer — what an answer engine lifts */
.answer{margin-top:1.75rem;max-width:46rem;border:1px solid rgba(0,150,255,.35);border-radius:14px;background:linear-gradient(180deg,rgba(0,150,255,.07),rgba(0,150,255,.02));padding:1.2rem 1.4rem;text-align:left}
.answer .microtype{margin-bottom:.5rem;color:var(--cyan);font-size:.5625rem}
.answer p{color:#e9edf2;font-size:1.0625rem;line-height:1.6}

/* sections */
.sec{padding-block:var(--secy);position:relative}
.sec.tight{padding-block:clamp(2.5rem,5vh,4rem)}
.sec.band{background:rgba(13,13,13,.55);border-block:1px solid var(--hair)}
.sec-head{max-width:46rem;margin-bottom:2.25rem}
.sec-head.center{margin-inline:auto}
.sec-head .microtype{display:block;margin-bottom:1rem}
.sec-head p{color:var(--text2);margin-top:1rem}

/* cards */
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.4rem 1.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.55rem;transition:transform .28s var(--spring),border-color .2s var(--ease)}
a.card:hover{transform:translateY(-4px);border-color:rgba(0,150,255,.55)}
.card .idx{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;color:var(--faint)}
.card h3{font-size:1.125rem}
.card p{color:var(--text2);font-size:.9375rem}
.card .more{margin-top:auto;padding-top:.6rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.stat{border:1px solid var(--line);border-radius:12px;padding:1.4rem 1rem;text-align:center}
.stat b{display:block;font-family:var(--mono);font-weight:600;font-size:clamp(1.75rem,2.4vw,2.4rem);font-variant-numeric:tabular-nums}
.stat span{font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* steps */
.steps{list-style:none;display:grid;gap:1rem;counter-reset:s}
.steps.cols{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.steps li:before{content:"0" counter(s);display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;color:var(--cyan);margin-bottom:.7rem}
.steps h3{font-size:1.125rem;margin-bottom:.4rem}
.steps p{color:var(--text2);font-size:.9375rem}

/* split: copy + visual */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.flip .split-copy{order:2}
@media(max-width:920px){.split{grid-template-columns:1fr}.split.flip .split-copy{order:0}}
.split-copy .microtype{display:block;margin-bottom:1rem}
.split-copy p,.split-copy li{color:var(--text2)}
.split-copy p{margin-top:1rem}
.split-copy ul{margin-top:1rem;list-style:none;display:flex;flex-direction:column;gap:.6rem}
.split-copy li{display:flex;gap:10px;font-size:.9375rem}
.split-copy li:before{content:"";flex-shrink:0;margin-top:.6em;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(72,223,255,.6)}
.split-copy b,.split-copy strong{color:var(--text)}
.split-copy .btn,.split-copy .textlink{margin-top:1.4rem;display:inline-flex}

/* product visuals (CSS simulations of the product) */
.vis{aspect-ratio:16/10;background:#08090c;border:1px solid var(--line);border-radius:16px;position:relative;overflow:hidden;box-shadow:0 0 60px rgba(0,150,255,.08)}
.vis:before{content:"";position:absolute;left:50%;bottom:-45%;width:90%;height:100%;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 100%,rgba(0,150,255,.2),transparent 70%);pointer-events:none}
.vis-tag{position:absolute;top:12px;left:14px;font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;color:var(--faint);z-index:2}
.v-cuts{position:absolute;inset:0;padding:2.6rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:.9rem;justify-content:center}
.v-row{display:flex;gap:5px;height:46px}
.v-row i{border-radius:8px;background:rgba(0,150,255,.4)}
.v-row i.x{background:rgba(255,255,255,.05);position:relative}
.v-row i.x:after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 47%,rgba(72,223,255,.8) 49%,rgba(72,223,255,.8) 51%,transparent 53%)}
.v-note{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.v-words{position:absolute;inset:0;display:flex;flex-direction:column;gap:1.3rem;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-.02em;padding:1rem}
.v-words b{color:var(--cyan);font-size:1.25em;text-shadow:0 0 22px rgba(72,223,255,.55)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.chips span{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;font-weight:500;color:var(--text2);background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:999px;padding:5px 12px}
.v-lib{position:absolute;inset:0;padding:2.6rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:1rem;justify-content:center}
.v-say{color:var(--text2);font-size:1rem}
.v-say b{color:#fff}
.v-shelf{display:flex;gap:10px}
.v-shelf i{flex:1;aspect-ratio:16/10;border-radius:10px;background:linear-gradient(160deg,#1c222c,#10141b);border:1px solid var(--hair)}
.v-shelf i.hit{border-color:var(--cyan);box-shadow:0 0 18px rgba(72,223,255,.35)}
.v-cast{align-self:flex-start;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;background:rgba(255,255,255,.05);border:1px solid rgba(72,223,255,.5);border-radius:8px;padding:7px 12px;color:#fff}
.v-gen{position:absolute;inset:2.6rem 1.4rem 1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.v-gen div{border-radius:10px;border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;color:var(--text2);text-align:center;padding:8px}
.v-gen .g1{background:linear-gradient(120deg,#14273a,#0e3a54)}.v-gen .g2{background:linear-gradient(120deg,#1a2338,#2b2140)}.v-gen .g3{background:linear-gradient(120deg,#0e2c33,#134b46)}.v-gen .g4{background:linear-gradient(120deg,#251d33,#12314f)}
.v-studio{position:absolute;inset:0;padding:1.2rem 1.3rem;display:flex;flex-direction:column}
.v-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.v-top span:first-child{font-family:var(--mono);font-size:.625rem;letter-spacing:.3em;color:var(--muted)}
.v-continue{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;font-family:var(--display);font-weight:800;font-size:.875rem;padding:9px 22px;border-radius:var(--rbtn);box-shadow:0 0 0 1px rgba(72,223,255,.4),0 0 28px rgba(72,223,255,.35),0 0 64px rgba(0,150,255,.25)}
.lanes{flex:1;display:flex;flex-direction:column;gap:6px;justify-content:center}
.lane{display:flex;align-items:center;gap:9px}
.lane .ln{width:62px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--muted);text-align:right;flex-shrink:0}
.lane .lt{flex:1;height:21px;border-radius:4px;background:rgba(255,255,255,.035);border:1px solid var(--hair);display:flex;gap:3px;padding:3px}
.lane .lt i{border-radius:2px;height:100%}
.lane .lt i.gap{background:transparent!important}
.k-cap i{background:rgba(0,150,255,.45)}.k-vid i{background:rgba(255,255,255,.13)}.k-br i{background:rgba(45,98,255,.45)}.k-sfx i{background:rgba(72,223,255,.3)}.k-mg i{background:rgba(6,169,255,.3)}
.v-plan{position:absolute;inset:0;padding:2.6rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;justify-content:center}
.v-line{background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:10px;padding:.6rem .9rem;font-size:.875rem;color:var(--text2)}
.v-line.hi{border-color:rgba(72,223,255,.45);color:#fff}

/* video frames */
.ba{display:flex;gap:clamp(.9rem,2.5vw,1.5rem);justify-content:center;align-items:center;flex-wrap:wrap}
.ba-frame{width:min(280px,40vw)}
.ba-tag{display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;color:var(--faint);margin-bottom:.5rem}
.ba-vid{aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0a0c10}
.ba-vid video{width:100%;height:100%;object-fit:cover}
.ba-frame.ba-aft .ba-vid{border-color:rgba(0,150,255,.45);box-shadow:0 0 34px rgba(0,150,255,.15)}
.ba-arrow{color:var(--muted);font-size:1.5rem}
.wallrow{display:grid;grid-template-columns:repeat(7,1fr);gap:.8rem;width:min(1240px,calc(100% - 2.5rem));margin-inline:auto}
.wallrow.six{grid-template-columns:repeat(6,1fr)}
@media(max-width:1000px){.wallrow,.wallrow.six{grid-template-columns:repeat(3,1fr);gap:.6rem}.wallrow .pv:nth-child(7){display:none}}
.pv{aspect-ratio:9/16;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;background:#0a0c10;transition:transform .28s var(--spring),border-color .2s var(--ease),box-shadow .28s var(--spring)}
.pv:hover{transform:translateY(-3px);border-color:rgba(0,150,255,.5);box-shadow:0 0 30px rgba(0,150,255,.15)}
.pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* home hero */
.hero{min-height:calc(100dvh - var(--bannerh));display:flex;flex-direction:column;justify-content:center;gap:1.4rem;padding-top:calc(5.5rem + var(--bannerh));padding-bottom:1rem;position:relative;overflow:hidden}
.hero-head{text-align:center;padding-inline:1.25rem}
.hero-head .sub{margin-inline:auto;max-width:48rem}
.hero-foot{text-align:center;padding-inline:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.plat-line{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,2vw,1.4rem);flex-wrap:wrap;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.plat-line b{font-family:var(--sans);font-weight:600;font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--text2)}
.marquee{overflow:hidden;padding-block:.8rem;border-top:1px solid rgba(255,255,255,.05);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.mq-track{display:flex;gap:3rem;width:max-content;animation:mq 60s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track a,.mq-track span{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#8b8f96;white-space:nowrap}
.mq-track a:hover{color:#fff}
@keyframes mq{to{transform:translateX(-50%)}}

/* pricing */
.toggle-row{display:flex;justify-content:center;margin-top:1.5rem}
.toggle{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.toggle button{border-radius:999px;padding:8px 20px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);display:flex;align-items:center;gap:8px;transition:background .2s var(--ease),color .2s var(--ease)}
.toggle button[aria-pressed="true"]{background:var(--blue);color:#fff}
.save{font-size:9px;font-weight:700;letter-spacing:.05em;background:rgba(180,255,57,.15);border:1px solid rgba(180,255,57,.5);color:var(--neon);border-radius:999px;padding:2px 8px}
.toggle button[aria-pressed="true"] .save{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);color:#fff}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
@media(max-width:960px){.tier-grid{grid-template-columns:1fr}}
.tier{--acc:#fff;--accg:rgba(255,255,255,.2);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.4rem;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .28s var(--spring),border-color .2s var(--ease)}
.tier:hover{transform:translateY(-4px);border-color:var(--acc)}
.tier:before{content:"";position:absolute;left:50%;top:-45%;width:120%;height:80%;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 0%,var(--accg),transparent 70%);pointer-events:none}
.tier.t-presence{--acc:var(--neon);--accg:rgba(180,255,57,.14)}
.tier.t-authority{--acc:var(--blue);--accg:rgba(0,150,255,.22);border-color:rgba(0,150,255,.8);box-shadow:0 0 0 1px var(--blue),0 0 44px rgba(0,150,255,.3);animation:authP 3.6s var(--ease) infinite}
@keyframes authP{0%,100%{box-shadow:0 0 0 1px var(--blue),0 0 34px rgba(0,150,255,.22),0 0 80px rgba(0,150,255,.1)}50%{box-shadow:0 0 0 1px var(--blue),0 0 54px rgba(0,150,255,.42),0 0 110px rgba(0,150,255,.18)}}
.tier.t-empire{--acc:var(--pink);--accg:rgba(234,52,127,.16)}
.rec-flag{position:absolute;top:-1px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;background:var(--blue);color:#fff;border-radius:0 0 8px 8px;padding:4px 14px;white-space:nowrap}
.tname{font-family:var(--display);font-weight:800;font-size:1.1875rem;display:flex;align-items:center;gap:9px;position:relative}
.tname i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.tag{font-family:var(--serif);font-style:italic;color:var(--text2);font-size:.9375rem;margin-top:.3rem;min-height:2.9em;position:relative}
.price-row{margin-top:.6rem;min-height:3.8rem;position:relative}
.price{font-family:var(--mono);font-weight:600;font-size:2rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price small{font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--text2)}
.was{font-family:var(--mono);color:var(--muted);text-decoration:line-through;font-size:1rem;margin-right:.4rem}
.bill-note{display:block;font-family:var(--mono);color:var(--muted);font-size:.6875rem;letter-spacing:.06em;margin-top:.2rem}
.tier ul{list-style:none;margin-top:.9rem;display:flex;flex-direction:column;gap:.55rem;flex:1;position:relative}
.tier li{display:flex;gap:9px;color:var(--text2);font-size:.875rem;line-height:1.45}
.tier li b{color:var(--text);font-weight:700}
.tick{flex-shrink:0;margin-top:6px;width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--acc) 18%,transparent);display:grid;place-items:center}
.tick:after{content:"";width:5px;height:3px;border-left:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);transform:rotate(-45deg) translateY(-.5px)}
.tier .cta{margin-top:1.1rem;display:flex;flex-direction:column;gap:.5rem;text-align:center;position:relative}
.escape{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.9375rem}
.escape a{text-decoration:underline;text-underline-offset:3px}
.escape a:hover{color:var(--text)}
.strip{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.75rem}
.strip h3{font-size:1.1875rem}
.strip p{font-size:.875rem;color:var(--text2);max-width:44rem;margin-top:.3rem}
.strip.founder{background:linear-gradient(90deg,rgba(139,61,255,.16),rgba(234,52,127,.14)),var(--card);border-color:rgba(139,61,255,.45)}

/* tables */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:620px}
.tbl caption{caption-side:top;text-align:left;padding:.9rem 1.1rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--hair)}
.tbl th,.tbl td{padding:.85rem 1.1rem;text-align:left;font-size:.875rem;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl tr:last-child td,.tbl tr:last-child th[scope=row]{border-bottom:0}
.tbl thead th{background:#0a0c10;font-family:var(--display);font-weight:800;font-size:.9375rem;white-space:nowrap}
.tbl thead th.hl{color:var(--sky)}
.tbl td{color:var(--text2)}
.tbl th[scope=row]{font-family:var(--mono);font-weight:500;font-size:.71875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tbl td.hl{color:var(--text);background:rgba(0,150,255,.05)}
.tbl td b,.tbl td strong{color:var(--text)}
.tbl a:not(.btn){color:var(--sky);text-decoration:underline;text-underline-offset:3px}
.tbl .price-cell{font-family:var(--mono);font-weight:600;font-size:1.0625rem;color:#fff}
.tbl .price-cell small{font-family:var(--sans);font-weight:400;font-size:.75rem;color:var(--text2)}
.tbl-note{margin-top:.9rem;color:var(--muted);font-size:.8125rem}

/* callout */
.callout{border:1px solid var(--line);border-left:2px solid var(--cyan);border-radius:12px;background:var(--card);padding:1.2rem 1.4rem}
.callout h3{font-size:1.0625rem;margin-bottom:.4rem}
.callout p,.callout li{color:var(--text2);font-size:.9375rem}
.callout ul{margin:.5rem 0 0 1.1rem}

/* prose (articles, long-form blocks, legal) */
.prose{max-width:46rem;min-width:0}
.prose > * + *{margin-top:1.15rem}
.prose h2{margin-top:2.75rem;font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem)}
.prose h3{margin-top:2rem}
.prose h4{font-family:var(--display);font-weight:800;font-size:1.0625rem;margin-top:1.5rem}
.prose p,.prose li{color:rgba(255,255,255,.76)}
.prose strong,.prose b{color:var(--text)}
.prose ul,.prose ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.prose a{color:var(--sky);text-decoration:underline;text-decoration-color:rgba(6,169,255,.4);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--sky)}
.prose blockquote{border-left:2px solid var(--cyan);padding-left:1.1rem;font-family:var(--serif);font-style:italic;font-size:1.1875rem;color:var(--text2)}
.prose .tbl-scroll,.prose .callout{margin-top:1.6rem}
.prose code{font-family:var(--mono);font-size:.875em;background:rgba(255,255,255,.06);border-radius:5px;padding:2px 6px}
.article-grid{display:grid;grid-template-columns:minmax(0,46rem) 15rem;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:1000px){.article-grid{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.toc{position:sticky;top:130px;border-left:1px solid var(--hair);padding-left:1.2rem}
.toc .microtype{display:block;margin-bottom:.9rem;font-size:.5625rem}
.toc a{display:block;color:var(--muted);font-size:.8125rem;padding:.3rem 0;line-height:1.4}
.toc a:hover{color:var(--text)}
.inline-cta{margin-top:2.25rem;border:1px solid rgba(0,150,255,.4);border-radius:14px;padding:1.4rem 1.5rem;background:linear-gradient(180deg,rgba(0,150,255,.08),rgba(0,150,255,.02));display:flex;gap:1.25rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.inline-cta p{margin:0;color:#e9edf2;max-width:30rem}

/* faq */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;overflow:hidden}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.35rem;font-weight:600;font-size:.9375rem;cursor:pointer;transition:background .12s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(255,255,255,.03)}
.plus{flex-shrink:0;width:20px;height:20px;position:relative;opacity:.55}
.plus:before,.plus:after{content:"";position:absolute;background:#fff;left:50%;top:50%;transition:transform .2s var(--ease)}
.plus:before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.plus:after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
details[open] .plus:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq .a{padding:0 1.35rem 1.2rem;color:var(--text2);font-size:.9375rem}
.faq .a a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}

/* final CTA */
.final{min-height:52vh;display:grid;place-items:center;text-align:center;padding-block:var(--secy);background:radial-gradient(46% 40% at 50% 62%,rgba(0,150,255,.13),transparent 70%)}
.final .human{margin-top:.7rem;font-size:1.375rem}
.final .btn{margin-top:2rem}

/* forms */
.form{display:grid;gap:1rem;max-width:34rem}
.form label{display:grid;gap:.4rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{font:inherit;font-family:var(--sans);font-size:1rem;letter-spacing:0;text-transform:none;color:#fff;background:#0a0c10;border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,150,255,.2)}
.form textarea{min-height:110px;resize:vertical}
.form .hp{position:absolute;left:-9999px}
.form-msg{font-size:.9375rem;color:var(--text2)}
.form-msg.ok{color:var(--neon)}

/* blog index */
.post{display:flex;flex-direction:column;gap:.6rem}
.post time,.post .cat{font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.post .cat{color:var(--sky)}

/* footer */
footer{border-top:1px solid var(--hair);padding-block:3.5rem 2.5rem;position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:1.2fr repeat(5,1fr);gap:2rem}
@media(max-width:1000px){.foot-top{grid-template-columns:repeat(3,1fr)}.foot-brand{grid-column:1/-1}}
@media(max-width:560px){.foot-top{grid-template-columns:repeat(2,1fr)}}
.foot-brand p{color:var(--muted);font-size:.875rem;margin-top:1rem;max-width:18rem}
.foot-col h2{font-family:var(--mono);font-weight:500;font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.foot-col a{display:block;letter-spacing:.06em;text-transform:none;font-family:var(--sans);font-size:.875rem;font-weight:400;padding:.28rem 0}
.foot-col a:hover{color:var(--text)}
.foot-legal{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--hair);display:flex;gap:1.5rem;color:#6a6a6a;font-size:.78125rem;flex-wrap:wrap}
.foot-legal a:hover,.foot-legal button:hover{color:var(--text)}
.foot-legal button{font-size:inherit;color:inherit}

/* consent banner */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:34rem;margin-inline:auto;background:rgba(10,12,16,.97);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.25rem;box-shadow:0 20px 60px rgba(0,0,0,.6);display:none}
.consent.show{display:block}
.consent p{font-size:.875rem;color:var(--text2)}
.consent p a{color:var(--sky);text-decoration:underline}
.consent .cta-row{margin-top:.9rem}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.scroll-light,.cursor-light{display:none}html.anim-ready .reveal:not(.in){opacity:1;transform:none;filter:none}}
@media print{.founder-banner,.nav,.nav-sheet,footer,.consent,.scroll-light,.cursor-light,body:before,body:after{display:none!important}body{background:#fff;color:#000}.prose p,.prose li{color:#000}}




/* ==========================================================================
   Oct 22 2026 — refresh: hero film + layouts, step icons, feature summary,
   product mockups with pop-in motion, compare table, use-case graphics.
   Mockup video slots use licensed stock footage only. Motion is driven by
   js/site.js (data-mock -> .live / .scene.on).
   ========================================================================== */
:root{--amber:#FFB020;--green:#2EE6A6;--lime:#B4FF39;--secy:clamp(6rem,13vh,10rem)}
.sec.tight{padding-block:clamp(4rem,9vh,6.5rem)}
.prose .btn-primary,.inline-cta .btn-primary,.final .btn-primary{color:#fff}
@keyframes pop{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.14);opacity:1}75%{transform:scale(.94)}100%{transform:scale(1);opacity:1}}
@keyframes popup{0%{transform:translateY(14px) scale(.6);opacity:0}60%{transform:translateY(-3px) scale(1.06);opacity:1}100%{transform:none;opacity:1}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(72,223,255,.7)}100%{box-shadow:0 0 0 18px rgba(72,223,255,0)}}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

/* ---- hero ---- */
.hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;padding:.45rem .9rem;border:1px solid rgba(72,223,255,.3);border-radius:999px;background:rgba(0,150,255,.08);color:#9fe8ff;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.hero-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.hero-head h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#fff 0%,#9fe8ff 60%,var(--sky) 100%);-webkit-background-clip:text;background-clip:text}
.hero-sub{text-align:center;padding-inline:1.25rem}
.hero-sub .sub{margin:0 auto;max-width:48rem}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.hero-film{position:relative;width:min(1180px,calc(100% - 2.5rem));margin:.4rem auto 0;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#07080a;box-shadow:0 40px 120px rgba(0,0,0,.7);aspect-ratio:16/9}
.hero-film video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
@media(max-width:600px){br.bd{display:none}}
.hero{display:flex;flex-direction:column}
.hero > *{order:5}
.hero .hero-head{order:1}.hero .hero-sub{order:2}.hero .hero-foot.cta{order:3}.hero .hero-film{order:4}.hero .hero-foot.plat{order:6}.hero .marquee{order:7}
/* B (default): the film fills the first screen edge to edge; everything else below */
body.hero-b .hero{padding-top:var(--bannerh);min-height:0;gap:0}
body.hero-b .hero .hero-film{order:0;width:100%;height:calc(100dvh - var(--bannerh));aspect-ratio:auto;margin:0 0 clamp(3rem,7vh,5rem);border:0;border-radius:0;box-shadow:none}
body.hero-b .hero .hero-film:after{content:"";position:absolute;inset:auto 0 0 0;height:18%;background:linear-gradient(transparent,#000);pointer-events:none}
body.hero-b .hero .hero-head{margin-bottom:1rem}
body.hero-b .hero .hero-foot.cta{margin-top:1.4rem}
body.hero-b .hero .hero-foot.plat{margin-top:1.6rem}
@media(max-aspect-ratio:4/3){body.hero-b .hero .hero-film{height:auto;aspect-ratio:16/9;margin-top:4.2rem}body.hero-b .hero .hero-film video{object-fit:contain}}
/* C: headline, film, then subtitle and buttons */
body.hero-c .hero .hero-film{order:2;margin-top:1rem}body.hero-c .hero .hero-sub{order:3;margin-top:1.6rem}body.hero-c .hero .hero-foot.cta{order:4}
.hero-switch{position:fixed;left:1rem;bottom:1rem;z-index:80;display:flex;gap:.3rem;padding:.3rem;border-radius:999px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);font-family:var(--mono);font-size:.65rem;letter-spacing:.08em}
.hero-switch span{padding:.35rem .5rem;color:var(--muted)}
.hero-switch button{padding:.35rem .7rem;border-radius:999px;color:var(--text2)}
.hero-switch button[aria-pressed=true]{background:#fff;color:#000}

/* ---- step icons ---- */
.steps .st-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:1rem;background:linear-gradient(145deg,rgba(0,150,255,.22),rgba(72,223,255,.06));border:1px solid rgba(72,223,255,.3);color:var(--cyan)}
.steps .st-ic svg{width:26px;height:26px}
.steps li.reveal.in .st-ic,html:not(.anim-ready) .steps .st-ic{animation:pop .7s var(--ease) both}
.steps li:nth-child(2) .st-ic{animation-delay:.12s}.steps li:nth-child(3) .st-ic{animation-delay:.24s}

/* ---- feature summary (home) ---- */
.fsum{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.fsum a{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:transform .28s var(--spring),border-color .2s}
.fsum a:hover{transform:translateY(-4px);border-color:rgba(0,150,255,.55)}
.fsum .fv{height:110px;border-radius:10px;background:#07080b;border:1px solid var(--hair);position:relative;overflow:hidden;margin-bottom:.4rem;display:grid;place-items:center}
.fsum h3{font-size:1.05rem}
.fsum p{font-size:.9rem;color:var(--text2)}
.fsum .more{margin-top:auto;font-size:.82rem;color:var(--sky);font-weight:600}
@media(max-width:1000px){.fsum{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fsum{grid-template-columns:1fr}}
/* tiny looping visuals inside the summary cards */
.fv .w{display:flex;align-items:flex-end;gap:3px;height:46px}
.fv .w i{width:6px;border-radius:2px;background:#2b3240;animation:wv 2.4s ease-in-out infinite}
.fv .w i.x{background:#e0475f;animation:wx 2.4s ease-in-out infinite}
@keyframes wv{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.8)}}
@keyframes wx{0%,35%{opacity:1;width:6px}55%,100%{opacity:0;width:0}}
.fv .cw{font-family:var(--display);font-weight:900;font-size:1.25rem;letter-spacing:-.02em;text-transform:uppercase}
.fv .cw span{display:inline-block;margin:0 .15rem;animation:cw 2.4s infinite}
.fv .cw span:nth-child(2){animation-delay:.6s}.fv .cw span:nth-child(3){animation-delay:1.2s}
@keyframes cw{0%,100%{transform:scale(1);color:#fff;background:none}15%,35%{transform:scale(1.15);color:#000;background:#F7E01A}}
.fv .ttl{font-family:var(--display);font-weight:900;font-size:1rem;background:var(--lime);color:#000;padding:.25rem .55rem;border-radius:4px;animation:popl 2.8s infinite}
@keyframes popl{0%,10%{transform:scale(.3);opacity:0}25%{transform:scale(1.12);opacity:1}35%,85%{transform:scale(1);opacity:1}100%{opacity:0}}
.fv .num{font-family:var(--display);font-weight:900;font-size:2rem;color:#fff}
.fv .num small{font-size:.9rem;color:var(--cyan)}
.fv .pip{position:absolute;inset:14px 34% 14px 34%;border-radius:8px;background:linear-gradient(160deg,#1b2a44,#0a0f18);animation:pipx 3s ease-in-out infinite}
@keyframes pipx{0%,30%{inset:14px 34% 14px 34%}45%,80%{inset:62px 36% 14px 52%}95%,100%{inset:14px 34% 14px 34%}}
.fv .bg{position:absolute;inset:14px 34% 14px 34%;border-radius:8px;background:linear-gradient(135deg,#0e3b5a,#30216b);opacity:0;animation:bgx 3s ease-in-out infinite}
@keyframes bgx{0%,30%{opacity:0}45%,80%{opacity:1}95%,100%{opacity:0}}
.fv .sty{display:flex;gap:6px}
.fv .sty i{width:30px;height:48px;border-radius:5px;border:1.5px solid #2a2f39;animation:sty 3.2s infinite}
.fv .sty i:nth-child(1){background:linear-gradient(160deg,#4a3b2f,#1a140f)}.fv .sty i:nth-child(2){background:linear-gradient(160deg,#102e52,#0b0f17);animation-delay:.8s}.fv .sty i:nth-child(3){background:linear-gradient(160deg,#c9f24d,#5c7a12);animation-delay:1.6s}.fv .sty i:nth-child(4){background:linear-gradient(160deg,#e9e4d8,#8c8575);animation-delay:2.4s}
@keyframes sty{0%,20%{border-color:var(--blue);transform:translateY(-4px)}30%,100%{border-color:#2a2f39;transform:none}}
.fv .lanes{width:80%;display:grid;gap:5px}
.fv .lanes i{height:8px;border-radius:3px;background:#164a4a;transform-origin:left;animation:ln 2.6s infinite}
.fv .lanes i:nth-child(2){background:#c58a12;width:40%;animation-delay:.2s}.fv .lanes i:nth-child(3){background:#5a3fb6;width:75%;animation-delay:.4s}.fv .lanes i:nth-child(4){background:#1d6fd6;width:55%;animation-delay:.6s}
@keyframes ln{0%{transform:scaleX(0)}35%,100%{transform:scaleX(1)}}
.fv .soc{display:flex;gap:8px}
.fv .soc i{width:34px;height:34px;border-radius:9px;border:1px solid #2a2f39;display:grid;place-items:center;font-style:normal;font-size:.62rem;font-weight:700;color:#aab2c0;animation:socp 2.4s infinite}
.fv .soc i:nth-child(2){animation-delay:.25s}.fv .soc i:nth-child(3){animation-delay:.5s}
@keyframes socp{0%,15%{transform:scale(1);border-color:#2a2f39;background:none}30%{transform:scale(1.18)}45%,90%{transform:scale(1);border-color:var(--blue);background:rgba(0,150,255,.18);color:#fff}}
.fv .frame{position:absolute;width:36px;height:64px;border:2px dashed var(--cyan);border-radius:4px;animation:rf 3s ease-in-out infinite}
.fv .face{width:22px;height:22px;border-radius:50%;background:#e0b38f;animation:rfm 3s ease-in-out infinite}
@keyframes rf{0%,100%{transform:translateX(-30px)}50%{transform:translateX(30px)}}
@keyframes rfm{0%,100%{transform:translateX(-30px)}50%{transform:translateX(30px)}}
.fv .eq{display:flex;gap:4px;align-items:center;height:46px}
.fv .eq i{width:6px;border-radius:3px;background:var(--cyan);animation:eq 1s ease-in-out infinite}
.fv .eq i:nth-child(2n){animation-delay:.2s}.fv .eq i:nth-child(3n){animation-delay:.4s}
@keyframes eq{0%,100%{height:10px}50%{height:42px}}
@media(prefers-reduced-motion:reduce){.fv *{animation:none!important}}

/* ---- phone frame ---- */
.phone{aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;border:1px solid #1d2128;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.phone video{width:100%;height:100%;object-fit:cover;display:block}
.pstage{position:relative;max-width:300px;margin-inline:auto}
.pstage.wide{max-width:none;display:grid;grid-template-columns:270px 1fr;gap:1.4rem;align-items:center}
@media(max-width:700px){.pstage.wide{grid-template-columns:1fr;max-width:300px}}

/* ---- app frame (rebuilt dashboard) ---- */
.app{position:relative;max-width:64rem;margin-inline:auto;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#0a0b0e;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(0,150,255,.06);overflow:hidden;font-size:.78rem;color:#d7dbe2;aspect-ratio:16/9.6;display:grid;grid-template-columns:150px 1fr}
.app .side{border-right:1px solid #1a1d23;background:#0d0f13;padding:.9rem .7rem;display:flex;flex-direction:column;gap:.35rem}
.app .side .lg{display:flex;align-items:center;gap:.3rem;margin-bottom:.9rem;font-family:var(--mono);font-weight:600;font-size:.82rem}
.app .side .lg i{width:12px;height:18px;border:2px solid #f2f2f2;border-radius:3px;position:relative;display:inline-block}
.app .side .lg i:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--blue);left:1.5px;top:4.5px}
.app .side .lg em{font-style:normal;color:var(--pink)}
.app .side a,.app .side span{display:block;padding:.42rem .55rem;border-radius:6px;color:#9aa3b2;font-size:.74rem}
.app .side a.on,.app .side span.on{background:var(--blue);color:#fff}
.app .side .stor{margin-top:auto;font-size:.62rem;color:#6d7483}
.app .side .stor b{display:block;height:3px;background:#1d2027;border-radius:3px;margin-top:.35rem;overflow:hidden}
.app .side .stor b:after{content:"";display:block;width:42%;height:100%;background:var(--blue)}
.app .main{position:relative;display:flex;flex-direction:column;min-width:0}
.app .top{display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;border-bottom:1px solid #1a1d23}
.app .top b{font-weight:600;font-size:.8rem}
.app .top .cr{display:flex;gap:.4rem}
.app .top .cr span{padding:.3rem .5rem;border:1px solid #23272f;border-radius:6px;font-size:.66rem;color:#aab2c0;background:#0f1115}
.app .top .cr span i{font-style:normal;color:#fff;font-weight:600}
.app .top .cr span.ai{color:#b8c6ff;border-color:#2b3350}
.app .body{position:relative;flex:1;min-height:0}
.app .scene{position:absolute;inset:0;padding:.9rem;opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.app .scene.on{opacity:1}
.app .scene h6,.app .scene .h6{font-size:.92rem;font-weight:700;margin-bottom:.15rem;font-family:var(--display)}
.app .scene .hint{font-size:.66rem;color:#8a92a1;margin-bottom:.7rem}
.app .dots{position:absolute;right:.9rem;bottom:.7rem;display:flex;gap:.35rem;z-index:3}
.app .dots i{width:14px;height:3px;border-radius:3px;background:#2a2e36;transition:background .3s}
.app .dots i.on{background:var(--sky)}
@media(max-width:520px){.app{grid-template-columns:1fr;aspect-ratio:4/3}.app .side{display:none}}
/* scene 1: a video is dragged in and dropped */
.drop{height:calc(100% - 2.6rem);border:1.5px dashed #2a2f39;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:#0d0f13;position:relative;overflow:hidden}
.drop .orb{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9b6ff,#5a46d8 60%,#2a1f7a);box-shadow:0 10px 30px rgba(90,70,216,.5)}
.drop .btn-d{padding:.45rem .8rem;border-radius:6px;background:#111;border:1px solid #2a2f39;font-weight:600;font-size:.72rem}
.drop .meta{font-size:.62rem;color:#6d7483}
.scene.on .drop{animation:hot 4.6s both}
@keyframes hot{0%,18%{border-color:#2a2f39;background:#0d0f13}24%,40%{border-color:var(--cyan);background:rgba(0,150,255,.08)}48%,100%{border-color:#2a2f39;background:#0d0f13}}
.drag{position:absolute;z-index:4;width:62px;left:-80px;top:62%;pointer-events:none;opacity:0}
.drag .thumb{aspect-ratio:9/16;border-radius:7px;overflow:hidden;border:2px solid #fff;box-shadow:0 14px 34px rgba(0,0,0,.6);transform:rotate(-8deg)}
.drag .thumb video{width:100%;height:100%;object-fit:cover}
.drag .thumb b{position:absolute;left:4px;bottom:4px;font-size:.45rem;font-family:var(--mono);background:rgba(0,0,0,.7);padding:1px 3px;border-radius:2px}
.drag svg{position:absolute;right:-12px;bottom:-14px;width:24px;height:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.scene.on .drag{animation:dragin 4.6s var(--ease) both}
@keyframes dragin{0%{left:-80px;top:70%;opacity:0}6%{opacity:1}34%{left:calc(50% + 20px);top:28%;opacity:1;transform:scale(1)}42%{left:calc(50% + 20px);top:32%;transform:scale(.4);opacity:0}100%{opacity:0}}
.drop .file{position:absolute;left:11%;bottom:.8rem;width:78%;padding:.5rem .7rem;border-radius:8px;background:#13161c;border:1px solid #262b35;display:flex;gap:.6rem;align-items:center;opacity:0}
.scene.on .drop .file{animation:popup .6s 2s var(--ease) both}
.drop .file i{width:28px;height:28px;border-radius:5px;background:linear-gradient(135deg,#1b2a44,#0a0f18);flex:none}
.drop .file span{flex:1;min-width:0}
.drop .file span b{display:block;font-size:.68rem;font-weight:600}
.drop .file span u{display:block;height:3px;background:#22262e;border-radius:3px;margin-top:.35rem;overflow:hidden;text-decoration:none}
.drop .file span u:after{content:"";display:block;height:100%;width:0;background:var(--blue)}
.scene.on .drop .file span u:after{animation:fill 1.4s 2.4s linear both}
@keyframes fill{to{width:100%}}
.drop .file em{font-style:normal;font-size:.62rem;color:var(--green);opacity:0}
.scene.on .drop .file em{animation:pop .5s 3.8s both}
/* scene 2: style + toggles pop */
.cust{display:grid;grid-template-columns:1fr 1.25fr;gap:.8rem;height:100%}
.cust .prev{border-radius:10px;overflow:hidden;background:#000;border:1px solid #1d2128}
.cust .prev video{width:100%;height:100%;object-fit:cover}
.cust .opts{display:flex;flex-direction:column;gap:.45rem;min-width:0;overflow:hidden}
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.styles div{aspect-ratio:9/13;border-radius:7px;border:1.5px solid #23272f;position:relative;overflow:hidden;font-size:.6rem;font-weight:600;display:flex;align-items:flex-end;padding:.35rem}
.styles div video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.styles div span{position:relative;z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.styles div:nth-child(1){background:linear-gradient(160deg,#4a3b2f,#1a140f)}
.styles div:nth-child(2){background:linear-gradient(160deg,#102e52,#0b0f17)}
.styles div:nth-child(3){background:linear-gradient(160deg,#c9f24d,#5c7a12)}
.scene.on .styles div.sel{animation:selp 1s .5s both}
@keyframes selp{0%{border-color:#23272f}40%{border-color:var(--cyan);transform:scale(1.08);box-shadow:0 0 0 0 rgba(72,223,255,.8)}100%{border-color:var(--blue);transform:scale(1);box-shadow:0 0 0 12px rgba(72,223,255,0)}}
.tgl{display:flex;justify-content:space-between;align-items:center;padding:.45rem .55rem;border:1px solid #1d2128;border-radius:7px;background:#0f1115}
.tgl span{font-size:.68rem;font-weight:600}
.tgl span small{display:block;font-weight:400;color:#8a92a1;font-size:.58rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw{width:24px;height:14px;border-radius:14px;background:#2a2f39;position:relative;flex:none;transition:background .3s}
.sw:after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:left .35s var(--spring)}
.sw.on{background:var(--blue);animation:ring .7s}
.sw.on:after{left:12px}
.cust .next{margin-top:auto;display:flex;gap:.4rem;align-items:center}
.cust .next b{flex:1;text-align:center;padding:.45rem;border-radius:6px;background:var(--blue);color:#fff;font-weight:600;font-size:.72rem}
.scene.on .cust .next b{animation:pop .6s 2.4s both}
.cust .next small{font-size:.58rem;color:#6d7483}
/* scene 3: processing checklist */
.proc{height:100%;display:grid;grid-template-columns:1fr 1.25fr;gap:.9rem;align-items:center}
.proc .ring{position:relative;aspect-ratio:1;max-width:150px;margin:0 auto;width:100%}
.proc .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.proc .ring circle{fill:none;stroke-width:6}
.proc .ring .bg{stroke:#1d2128}
.proc .ring .fg{stroke:var(--blue);stroke-dasharray:283;stroke-dashoffset:283;stroke-linecap:round}
.scene.on .proc .ring .fg{animation:dash 4.2s linear both}
@keyframes dash{to{stroke-dashoffset:0}}
.proc .ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:1.2rem;font-weight:800}
.proc ol{list-style:none;display:grid;gap:.45rem}
.proc li{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:#fff;opacity:0}
.proc li i{width:16px;height:16px;border-radius:50%;background:var(--blue);flex:none;display:grid;place-items:center;font-size:.55rem;font-style:normal;color:#fff}
.scene.on .proc li{animation:popup .5s var(--ease) both}
.scene.on .proc li:nth-child(1){animation-delay:.3s}.scene.on .proc li:nth-child(2){animation-delay:1s}.scene.on .proc li:nth-child(3){animation-delay:1.7s}.scene.on .proc li:nth-child(4){animation-delay:2.4s}.scene.on .proc li:nth-child(5){animation-delay:3.1s}.scene.on .proc li:nth-child(6){animation-delay:3.8s}
/* scene 4: ready + post */
.ready{display:grid;grid-template-columns:auto 1fr;gap:.9rem;height:100%}
.ready .phone{height:100%;box-shadow:none;border-radius:10px}
.ready .badge{position:absolute;top:.6rem;left:.6rem;z-index:2;padding:.25rem .55rem;border-radius:999px;background:var(--green);color:#03140d;font-weight:800;font-size:.62rem;opacity:0}
.scene.on .ready .badge{animation:pop .6s .3s both,ring 1s .8s}
.ready .r{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.ready .r b{font-size:.84rem;font-weight:700;font-family:var(--display)}
.ready .kv{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;font-size:.64rem;color:#8a92a1}
.ready .kv i{font-style:normal;color:#fff}
.ready .dl{padding:.5rem;border-radius:6px;background:var(--blue);color:#fff;text-align:center;font-weight:600;font-size:.72rem}
.ready .socials{border:1px solid #1d2128;border-radius:8px;padding:.6rem;background:#0f1115;margin-top:auto}
.ready .socials b{display:block;font-size:.7rem;margin-bottom:.4rem;font-family:var(--sans);font-weight:600}
.ready .socials .row{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.ready .socials .row span{display:flex;align-items:center;justify-content:center;padding:.45rem .2rem;border:1px solid #23272f;border-radius:6px;font-size:.6rem;color:#aab2c0}
.scene.on .ready .socials .row span{animation:socq .5s both}
.scene.on .ready .socials .row span:nth-child(1){animation-delay:1s}.scene.on .ready .socials .row span:nth-child(2){animation-delay:1.3s}.scene.on .ready .socials .row span:nth-child(3){animation-delay:1.6s}
@keyframes socq{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1);border-color:var(--blue);background:rgba(0,150,255,.14);color:#fff}}
.ready .post{margin-top:.4rem;padding:.42rem;border-radius:6px;background:#1b1e25;text-align:center;font-size:.66rem;font-weight:700;color:#8a92a1}
.scene.on .ready .post{animation:postg .5s 2.2s both}
@keyframes postg{to{background:#fff;color:#000}}
.ready .toast{position:absolute;right:1rem;bottom:2.2rem;padding:.5rem .8rem;border-radius:999px;background:var(--green);color:#03140d;font-weight:800;font-size:.68rem;opacity:0;z-index:3}
.scene.on .ready .toast{animation:pop .6s 2.9s both}

/* ---- smart cuts (matches the app's settings card) ---- */
.cutsm{display:grid;grid-template-columns:210px 1fr;gap:1.2rem;align-items:center}
.cutsm .phone .dur{position:absolute;left:.6rem;bottom:.6rem;font-family:var(--mono);font-size:.7rem;padding:.35rem .55rem;border-radius:6px;background:rgba(0,0,0,.72);color:#fff}
.cutsm .phone .dur b{color:var(--green);display:inline-block}
.cutsm.live .phone .dur b{animation:pop .6s 2.6s both}
.he{border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#0d0f13;box-shadow:0 30px 90px rgba(0,0,0,.6);font-size:.72rem;color:#d7dbe2;overflow:hidden}
.he .row{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem .9rem;border-bottom:1px solid #1a1d23}
.he .row .ic{width:26px;height:26px;border-radius:6px;background:#13213a;color:var(--sky);display:grid;place-items:center;flex:none}
.he .row .ic svg{width:14px;height:14px}
.he .row b{display:block;color:#fff;font-size:.8rem;margin-bottom:.15rem}
.he .row p{color:#8a92a1;font-size:.64rem;line-height:1.4}
.he .row .sw{margin-left:auto;margin-top:.2rem;width:30px;height:17px}.he .row .sw:after{width:13px;height:13px}.he .row .sw.on:after{left:15px}
.he .blk{margin:.7rem .9rem;padding:.7rem;border:1px solid #1d2128;border-radius:9px;background:#0a0b0e}
.he .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:#6d7483;margin-bottom:.5rem}
.he .lab em{font-style:normal;color:var(--amber);letter-spacing:0;font-family:var(--sans);font-size:.62rem;font-weight:600}
.he .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative}
.he .seg span{text-align:center;padding:.45rem 0;border-radius:6px;background:#15181e;color:#8a92a1;font-size:.64rem;position:relative;z-index:1;transition:color .3s}
.he .seg .hl{position:absolute;z-index:0;top:0;bottom:0;width:calc(25% - 3px);left:calc(25% + 1px);border-radius:6px;background:var(--blue);transition:left .6s var(--spring)}
.cutsm.live .he .seg .hl{left:calc(75% + 3px)}
.cutsm.live .he .seg span:nth-child(5){color:#fff}
.he .sl{height:4px;border-radius:4px;background:#22262e;position:relative}
.he .sl:before{content:"";position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:4px;background:var(--blue);transition:width 1.2s .5s var(--ease)}
.he .sl:after{content:"";position:absolute;top:50%;left:30%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:left 1.2s .5s var(--ease)}
.cutsm.live .he .sl:before{width:92%}.cutsm.live .he .sl:after{left:92%}
.he .tx{margin:.2rem .9rem .9rem;line-height:1.9;font-size:.7rem;color:#cfd5de}
.he .tx s{text-decoration:none;display:inline-block;padding:0 .3rem;border-radius:4px;background:rgba(224,71,95,.18);color:#f09aa8;font-family:var(--mono);font-size:.6rem;transition:all .4s var(--ease);max-width:12em;overflow:hidden;white-space:nowrap;vertical-align:middle}
.cutsm.live .he .tx s{animation:cutout .5s both}
.cutsm.live .he .tx s:nth-of-type(1){animation-delay:1.6s}.cutsm.live .he .tx s:nth-of-type(2){animation-delay:1.9s}.cutsm.live .he .tx s:nth-of-type(3){animation-delay:2.2s}.cutsm.live .he .tx s:nth-of-type(4){animation-delay:2.5s}
@keyframes cutout{0%{transform:scale(1)}40%{transform:scale(1.15);background:rgba(224,71,95,.5)}100%{transform:scale(0);max-width:0;padding:0;opacity:0}}
@media(max-width:760px){.cutsm{grid-template-columns:1fr}.cutsm .phone{max-width:200px;margin-inline:auto}}

/* ---- captions ---- */
.capm .caps{position:absolute;left:5%;right:5%;bottom:14%;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .35rem;pointer-events:none}
.capm .caps span{font-family:var(--display);font-weight:900;font-size:1.3rem;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.75);opacity:0;transform:scale(.4);text-transform:uppercase}
.capm .caps span.done{opacity:1;transform:none;transition:all .2s}
.capm .caps span.hl{opacity:1;color:#000;background:#F7E01A;padding:0 .3rem;border-radius:4px;text-shadow:none;animation:pop .35s both}
.capm .emo{position:absolute;right:14%;bottom:30%;font-size:1.8rem;opacity:0}
.capm .emo.on{animation:pop .5s both,wob .6s .5s}
.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}
.presets span{font-size:.7rem;font-family:var(--mono);padding:.6rem .65rem;border-radius:10px;background:#0f1115;border:1px solid #23272f;color:#aab2c0;display:flex;justify-content:space-between;align-items:center;transition:all .3s var(--spring)}
.presets span.on{border-color:var(--blue);color:#fff;transform:scale(1.05);box-shadow:0 0 0 4px rgba(0,150,255,.15)}
.presets span em{font-style:normal;font-family:var(--display);font-weight:800;font-size:.85rem}
.presets span:nth-child(1) em{color:#F7E01A}.presets span:nth-child(2) em{color:#FF2E9A;font-style:italic}.presets span:nth-child(3) em{color:#fff;text-shadow:0 0 8px #48DFFF}.presets span:nth-child(4) em{color:#FFB020;font-family:var(--serif)}

/* ---- hooks, titles, motion graphics ---- */
.hookm .phone video{transition:transform 1.6s var(--ease);transform-origin:50% 35%}
.hookm.live .phone video{transform:scale(1.14)}
.hookm .ttl{position:absolute;top:8%;left:6%;right:6%;text-align:center;font-family:var(--display);font-weight:900;font-size:1.25rem;line-height:1.05;letter-spacing:-.02em;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.8);opacity:0}
.hookm .ttl mark{background:var(--lime);color:#000;padding:0 .25rem;border-radius:3px}
.hookm.live .ttl{animation:pop .7s .2s both}
.hookm .gcard{position:absolute;left:7%;right:7%;bottom:8%;background:#fff;color:#000;border-radius:12px;padding:.65rem .8rem;font-family:var(--display);box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0}
.hookm.live .gcard{animation:popup .6s 1.1s var(--ease) both}
.hookm.alt .gcard{animation:none;opacity:0}
.hookm .gcard small{display:block;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#666;font-weight:700;margin-bottom:.15rem}
.hookm .gcard .big{font-size:2.1rem;font-weight:900;letter-spacing:-.04em;line-height:1}
.hookm .gcard .bar{height:7px;background:#eee;border-radius:4px;margin-top:.45rem;overflow:hidden}
.hookm .gcard .bar i{display:block;height:100%;width:0;background:var(--blue);transition:width 1.4s 1.6s var(--ease)}
.hookm.live .gcard .bar i{width:66%}
.hookm .steps3{position:absolute;left:7%;right:7%;bottom:8%;display:grid;gap:.35rem}
.hookm .steps3 span{background:#fff;color:#000;border-radius:8px;padding:.45rem .65rem;font-size:.74rem;font-weight:700;opacity:0;transform:scale(.4)}
.hookm.alt .steps3 span{animation:pop .5s both}
.hookm.alt .steps3 span:nth-child(2){animation-delay:.3s}.hookm.alt .steps3 span:nth-child(3){animation-delay:.6s}

/* ---- b-roll with picture-in-picture ---- */
.brm .phone .br{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.brm .phone .br video{width:100%;height:100%;object-fit:cover}
.brm .phone .spk{position:absolute;z-index:2;inset:0;overflow:hidden;transition:all .6s var(--spring);border-radius:0}
.brm .phone .spk video{width:100%;height:100%;object-fit:cover}
.brm.pip .phone .br{opacity:1}
.brm.pip .phone .spk{inset:auto 7% 6% auto;width:40%;height:40%;border-radius:12px;border:2px solid #fff;box-shadow:0 12px 30px rgba(0,0,0,.55)}
.brm .phone .tag{position:absolute;z-index:3;left:.6rem;top:.6rem;font-family:var(--mono);font-size:.6rem;padding:.3rem .55rem;border-radius:6px;background:var(--blue);color:#fff;opacity:0;letter-spacing:.06em}
.brm.pip .phone .tag{animation:pop .45s .2s both}
.brm .say{font-size:1rem;color:var(--text2);line-height:1.55;font-style:italic}
.brm .say span{transition:color .2s,background .2s}
.brm .say span.past{color:#e9edf2}
.brm .say span.cue.past{color:#fff;background:rgba(0,150,255,.3);border-radius:3px;font-weight:700}
.brm .src{display:flex;gap:.4rem;margin-top:1rem;flex-wrap:wrap}
.brm .src span{font-size:.68rem;padding:.45rem .7rem;border:1px solid #23272f;border-radius:999px;color:#aab2c0;background:#0f1115;transition:all .35s var(--spring)}
.brm.pip .src span:first-child{border-color:var(--blue);color:#fff;background:rgba(0,150,255,.14);transform:scale(1.08)}

/* ---- styles grid ---- */
.stymock{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.stymock div{aspect-ratio:9/14;border-radius:10px;border:1.5px solid #23272f;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:.55rem;font-size:.72rem;font-weight:600;font-family:var(--display);transition:transform .3s var(--spring),border-color .3s;background:linear-gradient(170deg,#1d2330 0%,#0a0c12 100%)}
.stymock div:hover{transform:translateY(-4px) scale(1.03);border-color:var(--blue)}
.stymock div video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stymock div span{position:relative;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.stymock div em{position:absolute;left:.55rem;top:.6rem;font-style:normal;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:#6d7483}
.stymock.live div{animation:pop .5s both}
.stymock.live div:nth-child(2){animation-delay:.08s}.stymock.live div:nth-child(3){animation-delay:.16s}.stymock.live div:nth-child(4){animation-delay:.24s}.stymock.live div:nth-child(5){animation-delay:.32s}.stymock.live div:nth-child(6){animation-delay:.4s}.stymock.live div:nth-child(7){animation-delay:.48s}.stymock.live div:nth-child(8){animation-delay:.56s}
@media(max-width:520px){.stymock{grid-template-columns:repeat(2,1fr)}}

/* ---- studio / editor ---- */
.tl{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#0a0b0e;font-size:.66rem;box-shadow:0 30px 90px rgba(0,0,0,.6);overflow:hidden}
.tl .tl-top{display:flex;justify-content:space-between;align-items:center;padding:.55rem .8rem;border-bottom:1px solid #1a1d23;color:#8a92a1}
.tl .tl-top b{color:#fff;font-weight:600}
.tl .tl-top .cont{padding:.35rem .7rem;border-radius:5px;background:var(--blue);color:#fff;font-weight:700}
.tl.live .tl-top .cont{animation:pop .5s 3.4s both,ring 1s 3.9s}
.tl .stage{display:grid;grid-template-columns:52px 190px 1fr;height:220px}
.tl .rail{border-right:1px solid #1a1d23;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 0;color:#6d7483;font-size:.42rem;font-family:var(--mono);text-transform:uppercase;overflow:hidden;line-height:1}
.tl .rail i{width:16px;height:16px;border-radius:5px;background:#15181e;display:block;margin-top:.3rem}
.tl .rail i.on{background:var(--blue)}
.tl .canvas{display:grid;place-items:center;background:radial-gradient(60% 80% at 50% 50%,#0f1218,#0a0b0e);position:relative}
.tl .canvas .phone{height:200px;width:auto;box-shadow:none;border-radius:10px}
.tl .canvas .sel{position:absolute;border:1.5px dashed var(--cyan);border-radius:4px;pointer-events:none;opacity:0}
.tl.live .canvas .sel{animation:pop .5s .6s both}
.tl .canvas .sel i{position:absolute;width:7px;height:7px;background:#fff;border:1px solid var(--cyan);border-radius:1px}
.tl .canvas .sel i:nth-child(1){left:-4px;top:-4px}.tl .canvas .sel i:nth-child(2){right:-4px;top:-4px}.tl .canvas .sel i:nth-child(3){left:-4px;bottom:-4px}.tl .canvas .sel i:nth-child(4){right:-4px;bottom:-4px}
.tl .sidep{border-right:1px solid #1a1d23;background:#0d0f13;padding:.6rem;display:flex;flex-direction:column;gap:.4rem;overflow:hidden}
.tl .sidep h6,.tl .sidep .h6{font-size:.7rem;font-weight:700;color:#fff}
.tl .sidep .fld{padding:.35rem .45rem;border:1px solid #23272f;border-radius:5px;color:#aab2c0;font-size:.58rem;background:#0f1115}
.tl .sidep .grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}
.tl .sidep .grid4 i{aspect-ratio:9/14;border-radius:5px;display:block;background:linear-gradient(160deg,#1b2a44,#0a0f18)}
.tl .sidep .grid4 i:nth-child(2){background:linear-gradient(160deg,#3a2a14,#120c05)}.tl .sidep .grid4 i:nth-child(3){background:linear-gradient(160deg,#143a2a,#05120c)}.tl .sidep .grid4 i:nth-child(4){background:linear-gradient(160deg,#3a143a,#12051a)}.tl .sidep .grid4 i:nth-child(5){background:linear-gradient(160deg,#2a3a14,#0c1205)}.tl .sidep .grid4 i:nth-child(6){background:linear-gradient(160deg,#143a3a,#051212)}
.tl.live .sidep .grid4 i:nth-child(2){animation:pick 1.2s 1.6s both}
@keyframes pick{0%{transform:none}40%{transform:scale(1.18);box-shadow:0 0 0 2px var(--cyan)}100%{transform:none;box-shadow:0 0 0 2px var(--cyan)}}
.tl .sidep .wordedit{display:flex;flex-wrap:wrap;gap:.2rem}
.tl .sidep .wordedit span{padding:.2rem .35rem;border-radius:4px;background:#13161c;color:#aab2c0;font-size:.6rem}
.tl .sidep .wordedit span.ed{background:#fff;color:#000;outline:1.5px solid var(--cyan)}
.tl .sidep .wordedit span.ed:after{content:"|";animation:blink 1s infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}
.tl .tracks{border-top:1px solid #1a1d23;padding:.55rem .6rem .75rem;display:grid;gap:.32rem;position:relative}
.tl .tr{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:.4rem;height:16px}
.tl .tr b{font-family:var(--mono);font-size:.52rem;color:#8a92a1;text-transform:uppercase;font-weight:500}
.tl .tr div{position:relative;height:100%;border-radius:3px;background:#0f1115}
.tl .tr div i{position:absolute;top:1px;bottom:1px;border-radius:3px;font-style:normal;font-size:.5rem;padding:0 .25rem;line-height:14px;white-space:nowrap;overflow:hidden;color:#fff;transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease)}
.tl.live .tr div i{transform:scaleX(1)}
.tl .c-cap i{background:#164a4a}.tl .c-ttl i{background:#c58a12;color:#000}.tl .c-gfx i{background:#5a3fb6}.tl .c-br i{background:#1d6fd6}.tl .c-vid i{background:#3a3167}.tl .c-aud i{background:#1d6fd6}
.tl .tr div i.new{transform:scale(0)!important}
.tl.live .tr div i.new{animation:popx .5s 2.6s both}
@keyframes popx{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.tl .tr div i.pick{outline:1.5px solid var(--cyan);outline-offset:1px}
.tl .play{position:absolute;top:.5rem;bottom:.7rem;left:calc(52px + 1rem);width:1.5px;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.tl.live .play{animation:playhead 7s linear infinite}
@keyframes playhead{from{left:calc(52px + 1rem)}to{left:calc(100% - .6rem)}}
@media(max-width:760px){.tl .stage{grid-template-columns:52px 1fr}.tl .sidep{display:none}}

/* ---- posting ---- */
.postm{display:grid;grid-template-columns:210px 1fr;gap:1.2rem;align-items:center}
.postm .panel{border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#0a0b0e;padding:1.1rem;box-shadow:0 30px 90px rgba(0,0,0,.6);position:relative}
.postm b.h{display:block;font-size:.9rem;font-family:var(--display);font-weight:700;margin-bottom:.2rem}
.postm p{font-size:.68rem;color:#8a92a1;margin-bottom:.8rem}
.postm .row{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:.7rem}
.postm .row span{display:flex;align-items:center;justify-content:center;padding:.65rem .2rem;border:1px solid #23272f;border-radius:10px;font-size:.66rem;color:#aab2c0}
.postm.live .row span{animation:socq .5s both}
.postm.live .row span:nth-child(1){animation-delay:.4s}.postm.live .row span:nth-child(2){animation-delay:.7s}.postm.live .row span:nth-child(3){animation-delay:1s}
.postm .cap{font-size:.66rem;color:#aab2c0;padding:.55rem;border:1px solid #23272f;border-radius:8px;background:#0f1115;margin-bottom:.6rem;line-height:1.45}
.postm .cap i{font-style:normal;color:var(--sky)}
.postm .go{padding:.55rem;border-radius:8px;background:#1b1e25;color:#8a92a1;text-align:center;font-size:.72rem;font-weight:800}
.postm.live .go{animation:postg .4s 1.5s both,pop .5s 1.5s}
.postm .done{position:absolute;right:-.6rem;top:-.9rem;padding:.5rem .85rem;border-radius:999px;background:var(--green);color:#03140d;font-weight:800;font-size:.7rem;opacity:0;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.postm.live .done{animation:pop .6s 2.2s both}
@media(max-width:760px){.postm{grid-template-columns:1fr}.postm .phone{max-width:200px;margin-inline:auto}}

/* ---- live events timeline (use-case page) ---- */
.livem{display:grid;grid-template-columns:1fr 200px;gap:1.2rem;align-items:center}
.livem .panel{border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#0a0b0e;padding:1.1rem;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.livem .ttl{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:#8a92a1;margin-bottom:.9rem}
.livem .ttl b{color:#fff}
.livem .ttl .rec{display:inline-flex;align-items:center;gap:.35rem;color:#ff5a5a;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em}
.livem .ttl .rec:before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 8px #ff5a5a;animation:blink 1.2s infinite}
.livem .bar{position:relative;height:10px;border-radius:5px;background:#1a1d23;margin:1.2rem 0 .4rem}
.livem .bar:after{content:"";position:absolute;left:0;top:0;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width 5s linear}
.livem.live .bar:after{width:100%}
.livem .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.55rem;color:#6d7483}
.livem .clips{position:relative;height:84px;margin-top:.6rem}
.livem .clip{position:absolute;width:84px;padding:.4rem .5rem;border-radius:8px;background:#fff;color:#000;font-size:.58rem;font-weight:700;line-height:1.25;opacity:0}
.livem .clip:nth-child(even){top:38px}
.livem .clip small{display:block;color:#555;font-weight:500;font-family:var(--mono);font-size:.5rem;margin-top:.15rem}
.livem.live .clip{animation:pop .55s both}
.livem.live .clip:nth-child(1){animation-delay:1.2s}.livem.live .clip:nth-child(2){animation-delay:2.4s}.livem.live .clip:nth-child(3){animation-delay:3.6s}.livem.live .clip:nth-child(4){animation-delay:4.7s}
.livem .foot{margin-top:.9rem;font-size:.66rem;color:#8a92a1;display:flex;gap:1.4rem}
.livem .foot b{color:#fff;font-family:var(--display);font-size:1.05rem;display:block}
@media(max-width:760px){.livem{grid-template-columns:1fr}.livem .phone{max-width:200px;margin-inline:auto}}

/* ---- feature section rhythm on the features page ---- */
.fsec{margin-top:var(--secy)}
.fsec:first-child{margin-top:0}
.split-copy h2 small{display:block;font-family:var(--sans);font-size:1.05rem;font-weight:500;letter-spacing:0;color:var(--text2);margin-top:.7rem;line-height:1.5}

/* ---- compare table ---- */
.cmp{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.cmp table{width:100%;border-collapse:collapse;font-size:.9375rem}
.cmp th,.cmp td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}
.cmp th{font-family:var(--display);font-weight:700;font-size:1rem;background:#13161b}
.cmp th.rt{color:var(--sky)}
.cmp td:first-child{color:var(--text);font-weight:500}
.cmp td{color:var(--text2)}
.cmp tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--green);font-weight:600}
.cmp .no{color:var(--muted)}
@media(max-width:700px){.cmp table{font-size:.85rem}.cmp th,.cmp td{padding:.7rem .6rem}}
@media(min-width:1200px){#features .fsum{grid-template-columns:repeat(5,1fr)}#features .wrap{max-width:84rem}}
.fv .cw span{padding:0 .2rem;border-radius:3px;font-size:1.05rem}
@keyframes ln{0%{transform:scaleX(.15)}35%,100%{transform:scaleX(1)}}
.he .seg{background:#15181e;border-radius:7px;padding:3px}
.he .seg span{background:transparent}
.he .seg .hl{top:3px;bottom:3px;left:calc(25% + 2px);width:calc(25% - 4px)}
.cutsm.live .he .seg .hl{left:calc(75% + 1px)}

/* ---------- Oct 23 2026: 360px pass ---------- */
/* Hero B on portrait screens: the film fills the first screen. The 16:9 cut sits in the middle over a blurred fill of itself. */
@media(max-aspect-ratio:4/3){
  body.hero-b .hero .hero-film{height:calc(100svh - var(--bannerh));aspect-ratio:auto;margin:0 0 2.5rem;display:grid;place-items:center;background:#05060a}
  body.hero-b .hero .hero-film:before{content:"";position:absolute;inset:-40px;background:url(/videos/hero-v7.jpg) center/cover;filter:blur(28px) saturate(1.3) brightness(.55);transform:scale(1.15)}
  body.hero-b .hero .hero-film video{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  body.hero-b .hero .hero-film:after{z-index:2;height:22%}
}
/* Founder banner: let the line wrap instead of running off the edge */
@media(max-width:420px){
  .fb-inner{padding:0 12px;gap:.6rem;white-space:normal}
  .fb-inner b{font-size:.7rem;line-height:1.2;min-width:0}
  .fb-cta{flex-shrink:0;white-space:nowrap;font-size:.7rem;padding:6px 10px}
}
/* Features: camera and sound cards stack */
@media(max-width:560px){#camera .fsum{grid-template-columns:1fr!important}}
/* App walkthrough mock: tall enough to show each scene on a phone */
@media(max-width:520px){.app{aspect-ratio:auto;height:440px}}
/* Live-events timeline: keep the clip chips inside the panel */
@media(max-width:560px){
  .livem .clips{height:100px}
  .livem .clip{width:76px;font-size:.55rem}
  .livem .clip:nth-child(1){left:0!important}.livem .clip:nth-child(2){left:23%!important}
  .livem .clip:nth-child(3){left:47%!important}.livem .clip:nth-child(4){left:auto!important;right:0}
  .livem .clip:nth-child(even){top:44px}
}
@media(max-width:520px){
  .cust{grid-template-columns:1fr}.cust .prev{display:none}
  .ready{grid-template-columns:44% 1fr;align-items:start}
  .ready .phone{height:auto;width:100%;aspect-ratio:9/16}
  .ready .socials .row span{font-size:.55rem;padding:.4rem .1rem}
  .ready .toast{bottom:1.4rem}
}
/* Full editor mini: lanes had zero width */
.fv .lanes{display:flex;flex-direction:column;align-items:flex-start}
.fv .lanes i{display:block;width:100%}
/* "Posted" toast sits on the scene, not inside .ready */
.s-ready .toast{position:absolute;right:1rem;bottom:2.2rem;padding:.5rem .8rem;border-radius:999px;background:var(--green);color:#03140d;font-weight:800;font-size:.68rem;opacity:0;z-index:3;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.scene.on.s-ready .toast{animation:pop .6s 2.9s both}
@media(max-width:520px){.s-ready .toast{bottom:1.6rem;right:.8rem}}
/* anchored headings land below the fixed banner + nav */
[id]{scroll-margin-top:calc(var(--bannerh) + 76px)}
/* Oct 28: use-case cards, icon + name only */
.card.uc{gap:.9rem;min-height:0;padding:1.4rem}
.card.uc h3{font-size:1.05rem}
.card.uc .more{margin-top:auto}
.uc-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--sky);background:linear-gradient(160deg,rgba(0,150,255,.16),rgba(139,61,255,.10));border:1px solid rgba(0,150,255,.28);transition:transform .35s var(--spring),color .2s,box-shadow .3s}
.uc-ic svg{width:24px;height:24px}
.card.uc:hover .uc-ic{transform:translateY(-3px) rotate(-6deg) scale(1.08);color:#fff;box-shadow:0 10px 30px rgba(0,150,255,.35)}
@media(max-width:560px){#who .grid.g4,.grid.g4:has(.uc){grid-template-columns:1fr 1fr}.card.uc{padding:1.1rem}.card.uc h3{font-size:.95rem}}
/* Oct 28: Styles rail. Previews come straight from the app; only one plays at a time */
.skit-rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem max(1.25rem,calc((100vw - 78rem)/2 + 1.25rem)) 1.5rem;scrollbar-width:thin;scrollbar-color:#2a2f39 transparent}
.skit{flex:0 0 clamp(210px,19vw,250px);scroll-snap-align:center;margin:0;display:flex;flex-direction:column;gap:.8rem}
.skit-media{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#0b0c10;border:1px solid var(--line);transition:transform .35s var(--spring),border-color .25s,box-shadow .35s}
.skit-media img,.skit-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.skit-media video{opacity:0;transition:opacity .3s}
.skit.on .skit-media video{opacity:1}
.skit.on .skit-media{transform:translateY(-6px);border-color:rgba(0,150,255,.7);box-shadow:0 22px 60px rgba(0,150,255,.22)}
.skit-play{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.skit-play:after{content:"";position:absolute;left:12px;top:9px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.skit.on .skit-play{opacity:0}
.skit figcaption b{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:.25rem}
.skit figcaption span{font-size:.86rem;color:var(--text2);line-height:1.45}
@media(max-width:600px){.skit{flex-basis:62vw}}
/* Oct 28: process graphic v4: one person (the tattoo artist) from raw to finished, real style posters, the app's final screen */
.styles.real div img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.styles.real div{background:#111}
.styles.real div span{font-size:.58rem}
.styles.real .ck{position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:.55rem;display:grid;place-items:center;z-index:2;opacity:0}
.scene.on .styles.real .ck{animation:pop .5s 1.1s both}
.styles.real div.sel{border-color:var(--blue)}
.proc2{height:calc(100% - 2.6rem);display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center}
.proc2 .phone{height:100%;border-radius:10px;box-shadow:none}
.proc2 .tag{position:absolute;left:8%;padding:.22rem .5rem;border-radius:999px;background:rgba(10,11,14,.82);border:1px solid rgba(0,150,255,.6);color:#fff;font-size:.58rem;font-weight:700;opacity:0;z-index:2}
.proc2 .t1{top:10%}.proc2 .t2{top:30%;left:auto;right:8%}.proc2 .t3{top:52%}.proc2 .t4{top:72%;left:auto;right:8%}
.scene.on .proc2 .t1{animation:pop .5s .8s both}.scene.on .proc2 .t2{animation:pop .5s 1.6s both}.scene.on .proc2 .t3{animation:pop .5s 2.4s both}.scene.on .proc2 .t4{animation:pop .5s 3.2s both}
.proc2 ol{list-style:none;display:grid;gap:.45rem}
.proc2 li{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:#fff;opacity:0}
.proc2 li i{width:16px;height:16px;border-radius:50%;background:var(--blue);flex:none;display:grid;place-items:center;font-size:.55rem;font-style:normal;color:#fff}
.scene.on .proc2 li{animation:popup .4s both}
.scene.on .proc2 li:nth-child(1){animation-delay:.3s}.scene.on .proc2 li:nth-child(2){animation-delay:.9s}.scene.on .proc2 li:nth-child(3){animation-delay:1.5s}.scene.on .proc2 li:nth-child(4){animation-delay:2.1s}.scene.on .proc2 li:nth-child(5){animation-delay:2.7s}.scene.on .proc2 li:nth-child(6){animation-delay:3.3s}
.ready .btn2{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.ready .btn2 span{padding:.45rem;border-radius:6px;text-align:center;font-weight:600;font-size:.68rem}
.ready .btn2 .dl{background:var(--blue);color:#fff}
.ready .btn2 .sh{background:#161616;border:1px solid #2a2f39;color:#d7dbe2}
.ready .socials small{display:block;font-size:.58rem;color:#8a92a1;margin:-.2rem 0 .45rem}
.s-notes .ready .r{gap:.6rem;justify-content:center}
.saved{display:flex;gap:.55rem;align-items:center;padding:.55rem .65rem;border-radius:9px;background:rgba(0,150,255,.1);border:1px solid rgba(0,150,255,.3);opacity:0}
.saved i{font-style:normal;width:26px;height:26px;border-radius:7px;background:rgba(0,150,255,.2);display:grid;place-items:center;font-size:.8rem;flex:none}
.saved b{display:block;font-size:.72rem;font-family:var(--display)}
.saved small{font-size:.58rem;color:#8a92a1}
.notes{padding:.6rem .7rem;border-radius:9px;background:#0f1115;border:1px solid #1d2128;display:grid;gap:.4rem;opacity:0}
.notes > b{font-size:.72rem;font-family:var(--display)}
.notes .sc{display:grid;grid-template-columns:52px 1fr 58px;gap:.45rem;align-items:center;font-size:.62rem;color:#aab2c0}
.notes .sc em{height:5px;border-radius:5px;background:#1d2128;position:relative;overflow:hidden}
.notes .sc em:after{content:"";position:absolute;inset:0 auto 0 0;width:0;border-radius:5px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .9s var(--ease)}
.notes .sc u{text-decoration:none;color:#fff;font-weight:600;text-align:right}
.scene.on .notes .sc em.s4:after{width:80%}.scene.on .notes .sc em.s5:after{width:100%}
.notes .sc:nth-child(3) em:after{transition-delay:.15s}.notes .sc:nth-child(4) em:after{transition-delay:.3s}
.notes .tip{font-size:.6rem;color:#d7dbe2;line-height:1.4;border-top:1px solid #1d2128;padding-top:.4rem;margin:0}
.notes .tip span{display:block;color:#f0b44c;font-weight:700;margin-bottom:.1rem}
.scene.on .saved{animation:popup .5s .3s both}.scene.on .notes{animation:popup .5s .9s both}
@media(max-width:520px){.proc2{grid-template-columns:42% 1fr;gap:.6rem}.proc2 .phone{height:auto;width:100%;aspect-ratio:9/16}.proc2 li{font-size:.62rem}.notes .sc{grid-template-columns:44px 1fr 50px}.notes .tip{font-size:.56rem}}
.proc2 .tag{font-family:var(--sans);font-style:normal;letter-spacing:0}
.styles.real div:after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.75));z-index:0}
.styles.real div span{z-index:1}
.s-ready .ready .socials{margin-top:.2rem}
.s-ready .ready .r{justify-content:center}
@media(max-width:520px){.s-cust .opts > .tgl:nth-child(4){display:none}}
/* ==== Oct 28: process graphic v5 (tattoo artist, Velvet Negative, the app's real loading / posting / recap screens) ==== */
.flow7 .phone{border-radius:12px;box-shadow:none}
.flow7 .phone img{width:100%;height:100%;object-fit:cover;display:block}
/* loading */
.ld{height:100%;display:grid;grid-template-columns:auto 1fr;gap:1.1rem}
.ld .phone{height:100%}
.scan .sweep{position:absolute;left:0;right:0;height:22%;top:-22%;background:linear-gradient(transparent,rgba(0,150,255,.35),transparent);border-bottom:1.5px solid rgba(80,180,255,.9);z-index:2;animation:sweep 2.2s linear infinite}
@keyframes sweep{to{top:100%}}
.ld-r{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;overflow:hidden;padding-top:.2rem}
.stage{position:relative;width:52px;height:52px;display:grid;place-items:center;flex:none}
.stage .spin{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(0,150,255,.2);border-top-color:var(--blue);animation:spin 1s linear infinite}
.stage .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:rgba(0,150,255,.1);border:1px solid rgba(0,150,255,.3)}
.stage .ic svg{width:20px;height:20px}
@keyframes spin{to{transform:rotate(360deg)}}
.ld-t,.ld-s{position:relative;width:100%;margin:0}
.ld-t{height:1.5rem;margin-top:.55rem;font-family:var(--display);font-weight:700;font-size:.95rem}
.ld-s{height:2.2rem;font-size:.64rem;color:#8a92a1;line-height:1.4}
.ph{position:absolute;inset:0;transition:opacity .4s}
.ph.b{opacity:0}
.scene.on .ph.a{animation:pha 8s both}.scene.on .ph.b{animation:phb 8s both}
@keyframes pha{0%,52%{opacity:1}56%,100%{opacity:0}}@keyframes phb{0%,54%{opacity:0}58%,100%{opacity:1}}
.ld .bar{position:relative;width:86%;height:5px;border-radius:5px;background:#0a0a0a;overflow:hidden;margin:.35rem 0 .7rem;flex:none}
.ld .bar u{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue);border-radius:5px}
.scene.on .ld .bar u{animation:barf 8s linear both}
@keyframes barf{0%,50%{width:0}100%{width:96%}}
.ld .bar i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:shim 1.4s linear infinite}
@keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.ld .eb{align-self:stretch;text-align:left;font-size:.55rem;text-transform:uppercase;letter-spacing:.06em;color:#6d7483;margin:.2rem 0 .35rem;display:flex;align-items:center;gap:.35rem}
.ld .eb i{width:4px;height:4px;border-radius:50%;background:var(--blue);animation:blink 1.2s infinite}
.ld .eb q{text-transform:none;font-style:italic;color:#9aa3b2;letter-spacing:0}
.bstrip{align-self:stretch;display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-bottom:.4rem}
.bstrip span{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid #23272f;opacity:0}
.bstrip img{width:100%;height:100%;object-fit:cover}
.bstrip em{position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:3px;background:var(--blue);color:#fff;font-style:normal;font-size:.5rem;display:grid;place-items:center;opacity:0}
.scene.on .bstrip span{animation:popup .45s both}.scene.on .bstrip span:nth-child(2){animation-delay:.25s}.scene.on .bstrip span:nth-child(3){animation-delay:.5s}
.scene.on .bstrip .pk{animation:popup .45s both,pkg 1s 1.3s both}
.scene.on .bstrip .pk em{animation:pop .4s 1.3s both}
@keyframes pkg{to{border-color:var(--blue);box-shadow:0 0 10px rgba(0,150,255,.45)}}
.feed{align-self:stretch;display:grid;gap:.4rem;text-align:left}
.ins{display:flex;gap:.45rem;opacity:0}
.ins .ii{width:18px;height:18px;border-radius:5px;background:rgba(0,150,255,.15);color:var(--blue);display:grid;place-items:center;font-size:.55rem;flex:none}
.ins b{display:block;font-size:.66rem;font-weight:600;color:#fff;line-height:1.3}
.ins small{display:block;font-size:.58rem;color:#8a92a1;line-height:1.35}
.scene.on .ins{animation:insin .5s both}.scene.on .ins:nth-child(1){animation-delay:1.4s}.scene.on .ins:nth-child(2){animation-delay:3.4s}.scene.on .ins:nth-child(3){animation-delay:5.4s}
@keyframes insin{from{opacity:0;transform:translateY(6px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
/* after: effects called out as they happen */
.aft{height:100%;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:stretch}
.aft .phone{height:100%}
.aft .badge{position:absolute;top:.6rem;left:.6rem;z-index:3;padding:.25rem .55rem;border-radius:999px;background:var(--green);color:#03140d;font-weight:800;font-size:.6rem;opacity:0}
.scene.on .aft .badge{animation:pop .5s .2s both}
.co{position:absolute;left:50%;bottom:12%;z-index:3;transform:translateX(-50%);white-space:nowrap;padding:.35rem .7rem;border-radius:999px;background:rgba(8,10,14,.86);border:1px solid rgba(0,150,255,.75);color:#fff;font-weight:700;font-size:.66rem;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 18px rgba(0,150,255,.35);opacity:0}
.co:empty{display:none}
.co.pop{animation:copop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes copop{0%{opacity:0;transform:translateX(-50%) scale(.5)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
.aft-r{display:flex;flex-direction:column;justify-content:center;min-width:0}
.fx{list-style:none;display:grid;gap:.3rem;margin:.6rem 0 0;padding:0;counter-reset:fx}
.fx li{position:relative;display:flex;align-items:center;gap:.55rem;padding:.38rem .55rem;border-radius:8px;border:1px solid #1d2128;background:#0f1115;font-size:.7rem;color:#6d7483;transition:all .25s}
.fx li:before{counter-increment:fx;content:counter(fx);width:17px;height:17px;border-radius:50%;background:#1d2128;color:#8a92a1;font-size:.55rem;font-weight:700;display:grid;place-items:center;flex:none;transition:all .25s}
.fx li.done{color:#aab2c0}.fx li.done:before{content:"✓";background:rgba(0,150,255,.18);color:var(--blue)}
.fx li.on{color:#fff;border-color:rgba(0,150,255,.7);background:rgba(0,150,255,.1);transform:translateX(4px);box-shadow:0 0 16px rgba(0,150,255,.18)}
.fx li.on:before{background:var(--blue);color:#fff}
/* posting: the app's tiles, then live status */
.pst{height:100%;display:grid;grid-template-columns:auto 1fr;gap:1.2rem}
.pst .phone{height:100%}
.pst-r{position:relative;min-width:0;display:flex;align-items:center}
.soc{width:100%;border-radius:14px;background:#141417;border:1px solid #2a2a30;padding:.85rem;display:flex;flex-direction:column;gap:.55rem}
.soc .st{font-size:.8rem;font-weight:600;font-family:var(--sans)}
.soc .ss{font-size:.6rem;color:#a1a1aa;margin-top:-.4rem}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.pt{position:relative;height:84px;border-radius:11px;border:1px solid #2a2a30;background:#1b1b1f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:0 .2rem;transition:all .25s}
.pt b{font-size:.62rem;font-weight:600;color:#f4f4f5}
.pt small{font-size:.5rem;color:#a1a1aa;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb{position:relative;width:30px;height:30px;border-radius:50%;background:#0b0b0d;border:1px solid #2a2a30;display:grid;place-items:center;color:#f4f4f5;flex:none}
.pb svg{width:15px;height:15px}
.pb .dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#34d399;border:2px solid #141417}
.pt .ck{position:absolute;top:5px;right:5px;width:14px;height:14px;border-radius:50%;background:#0a6ed1;color:#fff;font-style:normal;font-size:.5rem;display:grid;place-items:center;opacity:0}
.scene.on .pt.t1{animation:tsel .3s .8s both}.scene.on .pt.t2{animation:tsel .3s 1.2s both}.scene.on .pt.t3{animation:tsel .3s 1.6s both}
.scene.on .pt.t1 .ck{animation:pop .4s .8s both}.scene.on .pt.t2 .ck{animation:pop .4s 1.2s both}.scene.on .pt.t3 .ck{animation:pop .4s 1.6s both}
@keyframes tsel{to{border-color:#1e90ff;background:rgba(30,144,255,.1)}}
.soc .cta{position:relative;height:36px;border-radius:9px;background:#26262b;color:#8b8b94;font-weight:600;font-size:.7rem;display:grid;place-items:center;overflow:hidden}
.soc .cta span{position:absolute}
.soc .cta .c1{opacity:0;color:#fff}
.scene.on .soc .cta{animation:ctab .3s 1.7s both}.scene.on .soc .cta .c0{animation:fo .2s 1.7s both}.scene.on .soc .cta .c1{animation:fi .2s 1.75s both}
.scene.on .soc .cta{animation:ctab .3s 1.7s both,press .25s 2.6s}
@keyframes ctab{to{background:#0a6ed1}}@keyframes fo{to{opacity:0}}@keyframes fi{to{opacity:1}}@keyframes press{50%{transform:scale(.96)}}
.soc .fine{font-size:.52rem;color:#8b8b94;text-align:center}
.pstat{position:absolute;inset:auto 0 0 0;top:50%;transform:translateY(-50%);border-radius:14px;background:#141417;border:1px solid #2a2a30;padding:.4rem .8rem;opacity:0;pointer-events:none;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.scene.on .pstat{animation:popup .5s 3s both}
.pr{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid #1f1f24}
.pr:last-child{border-bottom:0}
.pb.sm{width:28px;height:28px}
.pn{flex:1;min-width:0}
.pn b{display:block;font-size:.68rem;font-weight:600;font-family:var(--sans)}
.pn b small{font-weight:400;color:#8b8b94}
.pn > small{font-size:.58rem;color:#8b8b94}
.pill{display:inline-flex;align-items:center;gap:.3rem;height:20px;padding:0 .5rem;border-radius:999px;font-size:.58rem;font-weight:600;color:#7cc0ff;background:rgba(30,144,255,.12)}
.pill:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.scene.on .pr .pill{animation:live .01s both}.scene.on .pr:nth-child(1) .pill{animation-delay:3.8s}.scene.on .pr:nth-child(2) .pill{animation-delay:4.3s}.scene.on .pr:nth-child(3) .pill{animation-delay:4.8s}
@keyframes live{to{color:#34d399;background:rgba(52,211,153,.12)}}
/* recap: the app's time-saved card and editor's notes */
.rc{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:.8rem;overflow:hidden}
.fs-card{position:relative;border-radius:14px;background:#111216;border:1px solid #23262d;padding:.8rem;overflow:hidden;isolation:isolate}
.fs-card:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px);background-size:14px 14px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);z-index:-1}
.ts:before{content:"";position:absolute;inset:-40% -30% auto auto;width:80%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(0,144,255,.28),transparent 70%);z-index:-1}
.fs-eb{font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#3b9cff}
.tsh{display:flex;justify-content:space-between;align-items:center;gap:.4rem}
.pillb{padding:.2rem .5rem;border-radius:999px;background:rgba(0,144,255,.14);color:#7cc0ff;font-size:.55rem;font-weight:600;white-space:nowrap}
.tsm{display:flex;align-items:center;gap:.8rem;margin-top:.6rem}
.donut{width:82px;height:82px;flex:none}
.donut .sg{fill:none;stroke-width:14;stroke-dasharray:0 400;transform:rotate(-90deg);transform-origin:60px 60px}
.scene.on .donut .sg{animation:seg .9s ease-out both}
.scene.on .donut .sg:nth-of-type(3){animation-delay:.1s}.scene.on .donut .sg:nth-of-type(4){animation-delay:.2s}.scene.on .donut .sg:nth-of-type(5){animation-delay:.3s}.scene.on .donut .sg:nth-of-type(6){animation-delay:.4s}
@keyframes seg{from{stroke-dasharray:0 400;stroke-dashoffset:calc(var(--o) * -1)}to{stroke-dasharray:var(--l) 400;stroke-dashoffset:calc(var(--o) * -1)}}
.donut .hand{transform-origin:60px 60px;animation:spin 12s linear infinite}
.hn{display:flex;align-items:baseline;gap:.3rem}
.hn .num{font-size:2.3rem;line-height:.9;font-weight:800;letter-spacing:-.05em;background:linear-gradient(180deg,#fff 30%,#9fd2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hn .u{font-weight:700;font-size:.85rem}
.hs{font-size:.62rem;color:#aab2c0;margin:.2rem 0 0}
.ts-cmp{display:inline-block;margin:.35rem 0 0;padding:.2rem .45rem;border-radius:5px;background:rgba(255,198,92,.12);color:#ffc65c;font-size:.58rem;font-weight:600;opacity:0}
.scene.on .ts-cmp{animation:popup .5s .9s both}
.stk{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0 0;padding:0}
.stk li{display:flex;align-items:center;gap:.4rem;padding:.3rem .5rem .3rem .3rem;border-radius:9px;background:#181a1f;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);transform:rotate(var(--t));opacity:0}
.stk i{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:.5rem;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent)}
.stk b{display:block;font-size:.72rem;line-height:1}
.stk span{font-size:.52rem;color:#aab2c0}
.scene.on .stk li{animation:stk .5s cubic-bezier(.34,1.56,.64,1) both}
.scene.on .stk li:nth-child(1){animation-delay:.45s}.scene.on .stk li:nth-child(2){animation-delay:.55s}.scene.on .stk li:nth-child(3){animation-delay:.65s}.scene.on .stk li:nth-child(4){animation-delay:.75s}.scene.on .stk li:nth-child(5){animation-delay:.85s}
@keyframes stk{from{opacity:0;transform:rotate(calc(var(--t)*3)) scale(.6) translateY(8px)}to{opacity:1;transform:rotate(var(--t))}}
.enh{display:flex;gap:.5rem;align-items:center}
.pen{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;background:conic-gradient(from 200deg,#3b9cff,#b06bff,#ffc65c,#3b9cff);box-shadow:0 0 0 3px #111216 inset}
.enh small{display:block;font-size:.52rem;color:#6d7483}
.en .q{display:flex;gap:.3rem;font-weight:800;font-size:.78rem;line-height:1.25;letter-spacing:-.01em;margin:.55rem 0 .45rem;opacity:0}
.en .q span{font-size:1.8rem;line-height:.6;color:var(--blue);font-weight:900}
.scene.on .en .q{animation:popup .5s .2s both}
.en .sc{display:flex;gap:.45rem;align-items:center;margin-top:.35rem;opacity:0}
.scene.on .en .sc{animation:popup .5s both}.scene.on .en .sc:nth-of-type(1){animation-delay:.4s}.scene.on .en .sc:nth-of-type(2){animation-delay:.55s}.scene.on .en .sc:nth-of-type(3){animation-delay:.7s}
.en .sc svg{width:30px;height:30px;flex:none}
.en .sc .tr{fill:none;stroke:#1d2128;stroke-width:5}
.en .sc .fl{fill:none;stroke:#34d399;stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:26px 26px;stroke-dasharray:0 126}
.scene.on .en .sc .fl{animation:ring 1.1s .5s ease-out both}
@keyframes ring{to{stroke-dasharray:calc(var(--s) * 25.1) 126}}
.en .sc text{fill:#fff;font-size:17px;font-weight:800;text-anchor:middle;dominant-baseline:middle}
.en .sc b{display:block;font-size:.66rem}
.en .sc b em{font-style:normal;font-size:.55rem;color:#34d399;margin-left:.3rem}
.en .sc small{display:block;font-size:.55rem;color:#aab2c0;line-height:1.35}
.tipc{margin-top:.55rem;padding:.45rem .55rem;border-radius:9px;border:1px dashed rgba(255,198,92,.45);background:repeating-linear-gradient(135deg,rgba(255,198,92,.06) 0 8px,transparent 8px 16px),#16181d;opacity:0}
.tipc b{display:block;font-size:.58rem;color:#ffc65c}
.tipc span{font-size:.62rem;color:#fff}
.scene.on .tipc{animation:popup .5s 1.1s both}
/* phones */
@media(max-width:620px){
  .flow7.app{height:600px}
  .ld,.aft,.pst{grid-template-columns:40% 1fr;gap:.7rem}
  .ld .phone,.aft .phone,.pst .phone{height:auto;width:100%;aspect-ratio:9/16;align-self:start}
  .ld-s{height:2.8rem}.ins small{display:none}
  .fx li{font-size:.6rem;padding:.3rem .4rem}
  .tiles{grid-template-columns:repeat(2,1fr)}.pt{height:70px}
  .rc{grid-template-columns:1fr;overflow:auto}
  .stk li:nth-child(n+4){display:none}
  .en .sc small{display:none}
}
@media(max-width:620px){.ld .eb q{display:none}}
/* Oct 28: motion graphics wall: 24 rendered templates, each plays only while on screen */
.tpl-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.7rem;width:min(1240px,calc(100% - 2.5rem));margin-inline:auto}
.tpl{aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#0b0c10;border:1px solid var(--line);transition:transform .35s var(--spring),border-color .25s}
.tpl video{width:100%;height:100%;object-fit:cover;display:block}
.tpl:hover{transform:translateY(-4px) scale(1.03);border-color:rgba(0,150,255,.6)}
@media(max-width:1000px){.tpl-grid{grid-template-columns:repeat(6,1fr)}}
/* phones: three rows that scroll sideways instead of a very tall grid */
@media(max-width:620px){.tpl-grid{width:100%;grid-template-columns:none;grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:28vw;overflow-x:auto;padding:0 1.25rem .6rem;scroll-snap-type:x proximity;scrollbar-width:none}.tpl{scroll-snap-align:start}}
@media(max-width:620px){.tpl-grid{box-sizing:border-box;max-width:100vw}}
/* keep relayouts from animated blocks local */
.app,.skit-rail,.tpl-grid,.fsum .fv,.wallrow,.hero-film{contain:layout paint}
/* Oct 28: conversion. The main button after every section, and a sticky one on phones once the hero is gone */
.sec-cta{display:flex;flex-direction:column;align-items:center;text-align:center;margin:clamp(2rem,4vw,3rem) auto 0;padding:0 1.25rem}
.sec-cta .nocc{margin-top:.75rem}
.m-cta{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:65;display:none;transform:translateY(140%);transition:transform .35s var(--spring)}
.m-cta .btn{width:100%;justify-content:center;box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.m-cta.on{transform:none}
@media(max-width:760px){.m-cta{display:block}}
/* ==== Oct 28: hero D: aurora background, drifting finished videos, one big drop zone ==== */
.hdx{display:none}
body.hero-d .hero{padding:calc(var(--bannerh) + 5rem) 0 2rem;min-height:100svh;justify-content:center;gap:0}
body.hero-d .hero > :not(.hdx):not(.marquee){display:none}
body.hero-d .hdx{display:block;position:relative;order:0}
body.hero-d .hero .marquee{order:2;margin-top:2.5rem}
.hd-bg{position:absolute;inset:-30vh -10vw -10vh;z-index:0;overflow:hidden;pointer-events:none}
.aur{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;mix-blend-mode:screen}
.aur.a1{width:55vw;height:55vw;left:-8vw;top:5vh;background:radial-gradient(circle,#0a8fff,transparent 65%);animation:aur1 18s ease-in-out infinite alternate}
.aur.a2{width:50vw;height:50vw;right:-10vw;top:0;background:radial-gradient(circle,#8b3dff,transparent 65%);animation:aur2 22s ease-in-out infinite alternate}
.aur.a3{width:40vw;height:40vw;left:30vw;bottom:-10vh;background:radial-gradient(circle,#ff2e88,transparent 65%);opacity:.3;animation:aur1 26s ease-in-out infinite alternate-reverse}
@keyframes aur1{to{transform:translate(8vw,6vh) scale(1.15)}}@keyframes aur2{to{transform:translate(-10vw,8vh) scale(.9)}}
.fcards{position:absolute;inset:0}
.fc{position:absolute;width:clamp(90px,9vw,150px);aspect-ratio:9/16;border-radius:14px;background:#111 center/cover;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px rgba(0,0,0,.6);opacity:.75;animation:fcf 14s ease-in-out infinite alternate}
.fc.c1{--r:-10deg;left:6%;top:30%}.fc.c2{--r:6deg;left:15%;top:62%;animation-delay:-3s}
.fc.c3{--r:9deg;right:7%;top:28%;animation-delay:-6s}.fc.c4{--r:-5deg;right:16%;top:63%;animation-delay:-2s}
.fc.c5{left:24%;top:16%;width:clamp(70px,6vw,100px);opacity:.45;filter:blur(1px);animation-delay:-8s}.fc.c6{right:25%;top:14%;width:clamp(70px,6vw,100px);opacity:.45;filter:blur(1px);animation-delay:-5s}
.fc.c7{left:2%;top:74%;width:clamp(60px,5vw,90px);opacity:.35;filter:blur(2px)}.fc.c8{right:3%;top:76%;width:clamp(60px,5vw,90px);opacity:.35;filter:blur(2px);animation-delay:-4s}
@keyframes fcf{to{translate:0 -16px;rotate:2.5deg}}
.hd-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1.25rem}
.hd-h{font-family:var(--display);font-weight:900;letter-spacing:-.045em;line-height:.98;font-size:clamp(2.4rem,6vw,4.6rem);margin:1.1rem 0 1.8rem;max-width:15ch}
.hd-h em{font-style:normal;background:linear-gradient(90deg,#5cc2ff,#0a8fff 50%,#8b3dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd-drop{position:relative;cursor:pointer;width:min(560px,100%);padding:2.1rem 1.5rem 1.9rem;border-radius:22px;display:flex;flex-direction:column;align-items:center;gap:.5rem;background:rgba(14,16,22,.62);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1.5px dashed rgba(140,190,255,.35);box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .3s var(--spring),border-color .25s,box-shadow .3s,background .25s;margin-bottom:1.4rem}
.hd-drop:hover,.hd-drop.over{transform:translateY(-3px) scale(1.01);border-color:#3aa9ff;box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 6px rgba(10,143,255,.12),0 0 60px rgba(10,143,255,.25)}
.hd-drop.over{background:rgba(10,143,255,.12)}
.hd-orb{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 30%,#7fd0ff,#0a8fff 55%,#3b1fb8);box-shadow:0 12px 34px rgba(10,143,255,.5);margin-bottom:.35rem;animation:orbb 2.6s ease-in-out infinite}
.hd-orb svg{width:24px;height:24px}
@keyframes orbb{50%{transform:translateY(-4px)}}
.hd-drop b{font-family:var(--display);font-size:1.15rem}
.hd-drop small{font-size:.8rem;color:var(--text2)}
.hd-file{font-size:.85rem;color:var(--green);font-weight:600;min-height:1.2em}
.hd-drop.got{border-style:solid;border-color:var(--green)}
@media(max-width:760px){.fc.c5,.fc.c6,.fc.c7,.fc.c8{display:none}.fc{width:72px;opacity:.5}.fc.c1{left:-4%;top:8%}.fc.c3{right:-4%;top:6%}.fc.c2{left:-6%;top:78%}.fc.c4{right:-6%;top:80%}.hd-drop{padding:1.6rem 1rem}}
@media (prefers-reduced-motion:reduce){.aur,.fc,.hd-orb{animation:none}}
/* Oct 28: How it works: scroll-driven walkthrough. Desktop: steps on the left, the app sticks on the right and follows the step in view. Phones: the app autoplays above a step list. */
.sy-sec .sec-head p{margin-inline:auto}
.sy{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2rem,4vw,4rem);align-items:start;margin-top:1rem}
.sy-steps{list-style:none;margin:0;padding:0 0 0 1.6rem;position:relative}
.sy-steps:before{content:"";position:absolute;left:.35rem;top:0;bottom:0;width:1px;background:linear-gradient(var(--line),var(--line) 92%,transparent)}
.sy-step{position:relative;min-height:74vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .45s var(--ease)}
.sy-step:first-child{min-height:56vh;justify-content:flex-start;padding-top:10vh}
.sy-step:last-child{min-height:62vh}
.sy-step.act{opacity:1}
.sy-step:before{content:"";position:absolute;left:calc(-1.6rem + .35rem - 5px);top:50%;width:11px;height:11px;border-radius:50%;background:#0b0c10;border:1px solid #3a3f49;transition:background .3s,border-color .3s,box-shadow .3s}
.sy-step:first-child:before{top:calc(10vh + .9rem)}
.sy-step.act:before{background:var(--sky);border-color:var(--sky);box-shadow:0 0 0 5px rgba(6,169,255,.15)}
.sy-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.sy-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(6,169,255,.1);border:1px solid rgba(6,169,255,.28);color:var(--sky)}
.sy-ic svg{width:20px;height:20px}
.sy-n{font-family:var(--mono);font-size:.78rem;color:#6d7483}
.sy-who{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .55rem;border-radius:99px;border:1px solid var(--line);color:#aab2c0}
.sy-who.rt{color:#fff;border-color:transparent;background:linear-gradient(90deg,var(--blue),var(--purple))}
.sy-step h3{font-size:clamp(1.35rem,2.2vw,1.75rem);margin-bottom:.6rem}
.sy-step p{color:var(--text2);max-width:30rem}
.sy-step p+p{margin-top:.6rem}
.sy-step a{color:var(--text,#fff);text-decoration:underline;text-decoration-color:rgba(6,169,255,.5);text-underline-offset:3px}
.sy-stage{position:sticky;top:max(5.5rem,calc(50vh - 15rem))}
.sy .app{max-width:none;grid-template-columns:1fr;margin:0}
.sy .app .side{display:none}
.sy .app .dots i{cursor:pointer;width:18px}
@media(max-width:959px){
  .sy{grid-template-columns:1fr;gap:1.5rem}
  .sy-stage{position:relative;top:0;order:-1}
  .sy-step,.sy-step:first-child,.sy-step:last-child{min-height:0;opacity:1;padding:1.1rem 0;justify-content:flex-start}
  .sy-step:before,.sy-step:first-child:before{top:1.95rem;background:var(--sky);border-color:var(--sky)}
  .sy .app .dots i{cursor:default}
}
/* hands-free vs review-first */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:68rem;margin-inline:auto}
.mode{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.6rem;display:flex;flex-direction:column;gap:.7rem}
.mode.on{border-color:rgba(6,169,255,.45);box-shadow:0 0 0 1px rgba(6,169,255,.15),0 20px 60px rgba(0,150,255,.08)}
.mode-tag{align-self:flex-start;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:99px;background:var(--sky);color:#001018;font-weight:700}
.mode-tag.alt{background:transparent;border:1px solid var(--line);color:#aab2c0;font-weight:500}
.mode h3{font-size:1.35rem}
.mode p{color:var(--text2)}
.mode ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
.mode li{position:relative;padding-left:1.4rem;font-size:.95rem}
.mode li:before{content:"✓";position:absolute;left:0;color:var(--sky);font-weight:700}
.mode-flow{margin-top:auto;display:flex;align-items:center;gap:.4rem;padding-top:1rem;flex-wrap:wrap}
.mode-flow span{font-family:var(--mono);font-size:.7rem;padding:.45rem .65rem;border-radius:8px;border:1px solid var(--line);background:#0b0c10;color:#cfd5de}
.mode-flow span.hl{border-color:var(--sky);color:#fff;background:rgba(6,169,255,.12)}
.mode-flow i{flex:1;min-width:10px;height:1px;background:linear-gradient(90deg,var(--line),var(--sky));position:relative;overflow:hidden}
.mode-flow i:after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:mflow 2.2s linear infinite}
@keyframes mflow{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.mode-vis{margin-top:auto;padding-top:.6rem}
.mode-vis .vis{aspect-ratio:16/8.5}
@media(max-width:820px){.modes{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.mode-flow i:after{animation:none}}
.ld-r>*{flex-shrink:0}
@media(min-width:960px){.sy .app{aspect-ratio:16/10.6}}
.mode-set{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .8rem;border:1px solid var(--line);border-radius:10px;background:#0b0c10;font-size:.85rem;color:#cfd5de;margin-top:.3rem}
.sw0{width:34px;height:20px;border-radius:99px;background:#2a2e36;position:relative;flex:none}
.sw0:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#8a92a1;transition:transform .3s}
.sw0.on{background:var(--blue)}.sw0.on:after{transform:translateX(14px);background:#fff}
.mode-hf{margin-top:auto;display:flex;align-items:center;gap:.7rem;padding-top:.6rem}
.mh-ph{position:relative;width:min(120px,26%);aspect-ratio:9/16;border-radius:10px;overflow:hidden;border:1px solid var(--line);flex:none}
.mh-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mh-ph b{position:absolute;left:.4rem;top:.4rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .4rem;border-radius:5px;background:rgba(0,0,0,.65);color:#cfd5de;font-weight:500}
.mh-ph.fin{border-color:var(--sky);box-shadow:0 0 30px rgba(6,169,255,.25)}
.mh-ph.fin b{background:#2fd08a;color:#001a0e;font-weight:700}
.mh-ar{flex:1;min-width:14px;height:1px;background:linear-gradient(90deg,var(--line),var(--sky));position:relative;overflow:hidden}
.mh-ar:after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:mflow 2.2s linear infinite}
.mh-live{display:flex;flex-direction:column;gap:.4rem;flex:none}
.mh-live span{display:flex;align-items:center;gap:.4rem;font-size:.72rem;padding:.35rem .55rem;border-radius:99px;background:rgba(52,211,153,.12);color:#34d399;font-weight:600;white-space:nowrap}
.mh-live i{width:6px;height:6px;border-radius:50%;background:#34d399}
@media(prefers-reduced-motion:reduce){.mh-ar:after{animation:none}}
@media(max-width:420px){.mh-live span{font-size:.62rem;padding:.3rem .45rem}}
/* Oct 28b: before/after uses its own class (".aft" belongs to the process graphic) */
.ba-frame.ba-aft{display:block}
/* hero D: the style cards are looping style previews that drift and follow the pointer a little */
.fc{overflow:hidden;opacity:.85;--d:1;transform:translate3d(calc(var(--px,0) * var(--d) * 1px),calc(var(--py,0) * var(--d) * 1px),0) rotate(var(--r,0deg));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fc video{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.fc.c1{--d:1.6}.fc.c2{--d:1.2}.fc.c3{--d:1.6}.fc.c4{--d:1.2}.fc.c5,.fc.c6{--d:.7}.fc.c7,.fc.c8{--d:.45}
.fc.c5,.fc.c6{opacity:.55}.fc.c7,.fc.c8{opacity:.4}
/* Styles: one big preview, the list of styles beside it; the selected style plays */
.sx{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.sx-stage{display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative}
.sx-stage:before{content:"";position:absolute;width:120%;aspect-ratio:1;left:-10%;top:5%;background:radial-gradient(circle,rgba(10,143,255,.22),transparent 60%);filter:blur(30px);z-index:0;pointer-events:none}
.sx-phone{position:relative;z-index:1;width:min(330px,100%);aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#0b0c10;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 6px rgba(255,255,255,.03)}
.sx-v{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s}
.sx-v.sx-fade{opacity:0}
.sx-tag{position:absolute;left:.8rem;top:.8rem;padding:.35rem .7rem;border-radius:99px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);font-size:.78rem;font-weight:700;border:1px solid rgba(255,255,255,.15)}
.sx-desc{display:none;position:relative;z-index:1;text-align:center;color:var(--text2);max-width:30rem;min-height:3em}
.sx-list{display:flex;flex-direction:column;gap:.45rem}
.sx-it{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:34px 1fr;gap:.9rem;align-items:center;padding:.5rem .8rem;border-radius:14px;border:1px solid transparent;transition:background .25s,border-color .25s;overflow:hidden}
.sx-it img{width:34px;height:auto;aspect-ratio:9/16;border-radius:7px;object-fit:cover;display:block;opacity:.6;transition:opacity .25s}
.sx-it b{display:block;font-family:var(--display);font-size:1.05rem}
.sx-it small{display:block;color:var(--text2);font-size:.85rem;line-height:1.45;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .3s,margin .3s}
.sx-it:hover{background:rgba(255,255,255,.03)}
.sx-it:hover img{opacity:1}
.sx-it.on{background:var(--card);border-color:rgba(6,169,255,.4)}
.sx-it.on img{opacity:1}
.sx-it.on small{max-height:4.5em;opacity:1;margin-top:.2rem}
.sx-it:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.sx-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--blue),var(--purple))}
.sx-it.on.run .sx-bar{animation:sxbar var(--sxd,7s) linear forwards}
@keyframes sxbar{to{width:100%}}
.sx-cta span{display:inline}
@media(max-width:820px){
  .sx{grid-template-columns:1fr}
  .sx-phone{width:min(250px,64vw)}
  .sx-desc{display:block}
  .sx-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:.5rem;padding:.2rem 1.25rem .6rem;margin-inline:calc(-1 * clamp(1.25rem,4vw,3rem));scrollbar-width:none}
  .sx-list::-webkit-scrollbar{display:none}
  .sx-it{grid-template-columns:28px auto;gap:.5rem;padding:.45rem .7rem .45rem .5rem;flex:none;scroll-snap-align:center;border-color:var(--line)}
  .sx-it img{width:28px;border-radius:5px}
  .sx-it b{font-size:.9rem;white-space:nowrap}
  .sx-it small,.sx-it.on small{display:none}
}
/* customize scene: the app's style picker (tiles, one plays, colourways under the grid) */
.cust2 .opts{gap:.5rem}
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.kt{position:relative;aspect-ratio:9/15;border-radius:8px;overflow:hidden;background:#111;box-shadow:0 0 0 1px #262a32}
.kt img,.kt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kt:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.kt span{position:absolute;left:.35rem;right:1.3rem;bottom:.35rem;z-index:1;font-size:.54rem;line-height:1.15;font-weight:600;color:#fff}
.kt .kc{position:absolute;right:.35rem;bottom:.35rem;z-index:1;width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.3);font-style:normal;font-size:.5rem;display:grid;place-items:center;color:transparent}
.scene.on .kt.sel{animation:kpick .45s 1s both}
.scene.on .kt.sel .kc{animation:kchk .4s 1.1s both}
@keyframes kpick{from{box-shadow:0 0 0 1px #262a32}to{box-shadow:0 0 0 2px var(--blue),0 0 0 4px #0a0b0e,0 0 18px rgba(10,143,255,.45)}}
@keyframes kchk{to{background:var(--blue);border-color:var(--blue);color:#fff}}
.kpanel{display:flex;align-items:center;gap:.6rem;padding:.45rem .55rem;border-radius:8px;border:1px solid #1d2128;background:#0f1115;opacity:0}
.scene.on .kpanel{animation:popup .5s 1.5s both}
.kpanel small{font-size:.56rem;color:#8a92a1;line-height:1.35}
.sws{display:flex;gap:.3rem;flex:none}
.sws i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50%);position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.sws i:after{content:"";position:absolute;inset:25%;border-radius:50%;background:var(--c)}
.sws i.mix{background:conic-gradient(#F0501E,#D4F53C,#5B8CFF,#B06BFF,#F0501E);box-shadow:0 0 0 2px var(--blue)}
.sws i.mix:after{display:none}
@media(max-width:620px){.kgrid{grid-template-columns:repeat(3,1fr)}.kt:nth-child(n+4){display:none}.kpanel small{display:none}}
.kt:nth-child(n+5){display:none}
/* features in numbers: a bento of live tiles */
.nb{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.nb-t{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#0f1218,#0a0b0f);padding:1.3rem;display:flex;flex-direction:column;min-height:240px}
.nb-t.big{grid-column:span 2}
.nb-vis{flex:1;display:flex;align-items:center;justify-content:center;min-height:90px;margin-bottom:1rem;position:relative}
.nb-n{font-family:var(--display);font-weight:900;letter-spacing:-.04em;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;background:linear-gradient(180deg,#fff,#9fb4cc);-webkit-background-clip:text;background-clip:text;color:transparent}
.nb-t.big .nb-n{font-size:clamp(3rem,6vw,4.6rem);background:linear-gradient(90deg,#5cc2ff,#0a8fff 50%,#8b3dff);-webkit-background-clip:text;background-clip:text}
.nb-l{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}
.nb-t p{color:var(--text2);font-size:.92rem;margin-top:.6rem;max-width:30rem}
.nb-mq{position:absolute;inset:-.5rem -1.3rem;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);display:flex;align-items:center}
.nb-mq div{display:flex;gap:.6rem;width:max-content;animation:nbmq 40s linear infinite}
.nb-mq img{width:78px;aspect-ratio:9/16;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
@keyframes nbmq{to{transform:translateX(-50%)}}
.nb-cap{display:grid;gap:.4rem;width:100%}
.nb-cap span{font-size:.78rem;font-weight:700;padding:.4rem .6rem;border-radius:8px;background:#151922;border:1px solid var(--line);color:#7d8696;animation:nbcap 6s infinite}
.nb-cap span:nth-child(2){animation-delay:1.5s}.nb-cap span:nth-child(3){animation-delay:3s}.nb-cap span:nth-child(4){animation-delay:4.5s}
@keyframes nbcap{0%,22%{color:#fff;border-color:var(--sky);background:rgba(6,169,255,.14)}30%,100%{color:#7d8696;border-color:var(--line);background:#151922}}
.nb-wa{display:flex;gap:.35rem;font-family:var(--display);font-weight:800;font-size:1.25rem}
.nb-wa span{display:inline-block;animation:nbwa 2.4s ease-in-out infinite}
.nb-wa span:nth-child(2){animation-delay:.3s;color:var(--sky)}.nb-wa span:nth-child(3){animation-delay:.6s}
@keyframes nbwa{0%,60%,100%{transform:none}20%{transform:translateY(-8px) scale(1.12)}40%{transform:translateY(2px)}}
.nb-ft{position:relative;width:100%;height:70px}
.nb-ft span{position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;opacity:0;animation:nbft 8s infinite}
.nb-ft span:nth-child(2){animation-delay:2s}.nb-ft span:nth-child(3){animation-delay:4s}.nb-ft span:nth-child(4){animation-delay:6s}
@keyframes nbft{0%{opacity:0;transform:translateY(8px)}6%,22%{opacity:1;transform:none}28%,100%{opacity:0;transform:translateY(-8px)}}
.nb-fx i{display:block;width:96px;aspect-ratio:9/12;border-radius:10px;background:url(/videos/flow-raw.jpg) center/cover;border:1px solid var(--line);animation:nbfx 7s steps(1) infinite}
@keyframes nbfx{0%{filter:none}20%{filter:contrast(1.4) saturate(1.5)}40%{filter:grayscale(1) contrast(1.3)}60%{filter:hue-rotate(160deg) saturate(1.4)}80%{filter:invert(1) grayscale(1)}}
.nb-hk{display:grid;grid-template-columns:repeat(4,22px);gap:.35rem}
.nb-hk i{width:22px;aspect-ratio:9/16;border-radius:4px;background:linear-gradient(160deg,#1c2a44,#0b0f17);border:1px solid var(--line);animation:nbhk 4s infinite}
.nb-hk i:nth-child(2){animation-delay:.5s}.nb-hk i:nth-child(3){animation-delay:1s}.nb-hk i:nth-child(4){animation-delay:1.5s}.nb-hk i:nth-child(5){animation-delay:2s}.nb-hk i:nth-child(6){animation-delay:2.5s}.nb-hk i:nth-child(7){animation-delay:3s}.nb-hk i:nth-child(8){animation-delay:3.5s}
@keyframes nbhk{0%,10%{border-color:var(--pink);background:linear-gradient(160deg,#ea347f,#5b1a7a);transform:translateY(-4px)}20%,100%{border-color:var(--line);transform:none}}
.nb-br{display:flex;flex-direction:column;gap:.35rem;width:100%}
.nb-br span{font-size:.78rem;padding:.4rem .6rem;border-radius:99px;border:1px solid var(--line);background:#121620;text-align:center}
.nb-br span:nth-child(2){border-color:rgba(47,208,138,.5);color:#34d399}
@media(max-width:900px){.nb{grid-template-columns:repeat(2,1fr)}.nb-t{min-height:210px}}
@media(max-width:420px){.nb{gap:.6rem}.nb-t{padding:1rem;min-height:190px}.nb-n{font-size:2rem}.nb-ft span{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){.nb-mq div,.nb-cap span,.nb-wa span,.nb-ft span,.nb-fx i,.nb-hk i{animation:none}.nb-ft span:first-child{opacity:1}}
.hdx{overflow-x:clip}
body.hero-d .hero{overflow-x:clip}
@media(max-width:520px){.ba{flex-wrap:nowrap;gap:.5rem}.ba-frame{width:42vw}.ba-arrow{font-size:1rem}}
@media(max-width:900px){.nb-wa{font-size:1rem;gap:.25rem}}
@media(max-width:520px){.ba-tag{white-space:nowrap;letter-spacing:.1em;font-size:.5rem}}
/* Oct 28c: hero headline on three lines; "Fully Edited Video Out" shifts colour */
.hero-head h1 .hl,.hd-h .hl{display:block}
.hero-head h1 em,.hd-h em{font-style:normal;color:transparent;background:linear-gradient(90deg,#5cc2ff,#0a8fff 25%,#8b3dff 50%,#ea347f 70%,#5cc2ff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:hlshift 6s ease-in-out infinite alternate}
@keyframes hlshift{from{background-position:0% 50%}to{background-position:100% 50%}}
.hd-h{max-width:none}
@media(prefers-reduced-motion:reduce){.hero-head h1 em,.hd-h em{animation:none}}
/* Clips (launch-gated): episode timeline with moments on the left, the finished clip cutting between speakers on the right */
.clx{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:1.2rem;padding:1.2rem;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,#0e1117,#090a0d);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.clx-ep{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.clx-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.8rem;flex-wrap:wrap}
.clx-file{display:flex;align-items:center;gap:.5rem;font-weight:600}
.clx-file i{width:22px;height:16px;border-radius:4px;background:linear-gradient(135deg,var(--blue),var(--purple))}
.clx-file small{color:var(--muted);font-family:var(--mono);font-weight:400}
.clx-sync{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;padding:.3rem .6rem;border-radius:99px;color:#34d399;background:rgba(52,211,153,.12)}
.clx-lanes{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:.6rem 0}
.clx-lanes .ln{display:grid;grid-template-columns:3.4rem 1fr;align-items:center;gap:.6rem}
.clx-lanes .ln b{font-size:.68rem;color:var(--muted);font-weight:600}
.clx-lanes .wv{height:28px;border-radius:6px;background:#12151c;-webkit-mask:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px);mask:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px)}
.clx-lanes .a .wv{background:linear-gradient(90deg,#0a8fff 0 9%,#1a1f29 9% 14%,#0a8fff 14% 30%,#1a1f29 30% 41%,#0a8fff 41% 47%,#1a1f29 47% 62%,#0a8fff 62% 78%,#1a1f29 78% 85%,#0a8fff 85% 100%)}
.clx-lanes .b .wv{background:linear-gradient(90deg,#1a1f29 0 9%,#b06bff 9% 14%,#1a1f29 14% 30%,#b06bff 30% 41%,#1a1f29 41% 47%,#b06bff 47% 62%,#1a1f29 62% 78%,#b06bff 78% 85%,#1a1f29 85% 100%)}
.clx-lanes .mk{position:absolute;top:.2rem;bottom:.2rem;border-radius:8px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);margin-left:4rem}
.mk.m1{left:calc((100% - 4rem) * .12);width:calc((100% - 4rem) * .2)}.mk.m2{left:calc((100% - 4rem) * .44);width:calc((100% - 4rem) * .17)}.mk.m3{left:calc((100% - 4rem) * .78);width:calc((100% - 4rem) * .12)}
.clx-lanes .ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 10px #fff;left:4rem;animation:clph 9s linear infinite}
@keyframes clph{to{left:100%}}
.clx-mo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.clx-mo li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem .8rem;border-radius:12px;border:1px solid var(--line);background:#0b0d12}
.clx-mo b{display:block;font-size:.9rem}
.clx-mo small{display:block;color:var(--text2);font-size:.78rem;margin-top:.15rem}
.clx-mo em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.clx.in .mk,.clx.in .clx-mo li{animation:clhl 9s infinite}
.clx.in .mk.m2,.clx.in .clx-mo .mo2{animation-delay:3s}.clx.in .mk.m3,.clx.in .clx-mo .mo3{animation-delay:6s}
@keyframes clhl{0%,30%{border-color:var(--sky);background:rgba(6,169,255,.1);box-shadow:0 0 0 1px rgba(6,169,255,.2)}34%,100%{border-color:var(--line);background:#0b0d12;box-shadow:none}}
.clx-ask{display:flex;align-items:center;gap:.45rem;padding:.6rem .8rem;border-radius:12px;border:1px dashed #2c3240;font-size:.85rem;color:var(--text2)}
.clx-ask b{color:#fff;font-weight:600;border-right:2px solid var(--sky);padding-right:2px;animation:clcar 1s steps(1) infinite}
.clx-ask i{margin-left:auto;font-style:normal;color:var(--muted)}
@keyframes clcar{50%{border-color:transparent}}
.clx-out{display:flex;flex-direction:column;align-items:center;gap:.8rem;justify-content:center}
.clx-ph{position:relative;width:min(240px,100%);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 50px rgba(10,143,255,.18)}
.clx-ph .cam{position:absolute;left:0;right:0;overflow:hidden;transition:none}
.clx-ph .cam video{width:100%;height:100%;object-fit:cover;display:block}
.clx-ph .ca{top:0;height:100%;animation:clca 9s infinite}
.clx-ph .cb{bottom:0;height:100%;animation:clcb 9s infinite}
@keyframes clca{0%,32%{height:100%;opacity:1}33%,65%{opacity:0;height:100%}66%,100%{opacity:1;height:50%}}
@keyframes clcb{0%,32%{opacity:0;height:100%}33%,65%{opacity:1;height:100%}66%,100%{opacity:1;height:50%}}
.clx-ph .lay{position:absolute;top:.7rem;left:.7rem;z-index:2;display:flex;align-items:center;gap:.35rem;padding:.3rem .55rem;border-radius:99px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);font-size:.62rem;font-weight:600}
.clx-ph .lay i{width:6px;height:6px;border-radius:50%;background:#34d399}
.clx-ph .lay{min-width:7.2rem}
.clx-ph .lay>span{position:absolute;left:1.3rem;white-space:nowrap}
.clx-ph .cap{position:absolute;left:0;right:0;bottom:12%;z-index:2;height:1.6em;text-align:center;font-family:var(--display);font-weight:900;font-size:1.1rem;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.clx-ph .cap>span{position:absolute;left:0;right:0}
.clx-ph .cap b{color:#ffd23f}
.clx-ph .l1,.clx-ph .c1{animation:clsh1 9s infinite}.clx-ph .l2,.clx-ph .c2{animation:clsh2 9s infinite}.clx-ph .l3,.clx-ph .c3{animation:clsh3 9s infinite}
@keyframes clsh1{0%,32%{opacity:1}33%,100%{opacity:0}}
@keyframes clsh2{0%,32%{opacity:0}33%,65%{opacity:1}66%,100%{opacity:0}}
@keyframes clsh3{0%,65%{opacity:0}66%,100%{opacity:1}}
.clx-fmt{display:flex;gap:.35rem}
.clx-fmt span{font-family:var(--mono);font-size:.68rem;padding:.3rem .55rem;border-radius:7px;border:1px solid var(--line);color:var(--muted)}
.clx-fmt span.on{border-color:var(--sky);color:#fff;background:rgba(6,169,255,.12)}
.clfs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem}
.clf{padding:1.3rem;border-radius:16px;border:1px solid var(--line);background:var(--card)}
.clf-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(6,169,255,.1);border:1px solid rgba(6,169,255,.28);color:var(--sky);margin-bottom:.8rem}
.clf-ic svg{width:20px;height:20px}
.clf h3{font-size:1.05rem;margin-bottom:.4rem}
.clf p{color:var(--text2);font-size:.93rem}
.clx-note{margin-top:1.2rem;color:var(--muted);font-size:.85rem;text-align:center}
@media(max-width:900px){.clx{grid-template-columns:1fr}.clx-out{order:-1}.clfs{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.clfs{grid-template-columns:1fr}.clx{padding:.8rem}.clx-mo small{display:none}.clx-ph{width:min(200px,60vw)}}
@media(prefers-reduced-motion:reduce){.clx-lanes .ph,.clx-ph .ca,.clx-ph .cb{animation:none}.clx-ph .cb{display:none}.clx-ph .l2,.clx-ph .c2,.clx-ph .l3,.clx-ph .c3{opacity:0}}
.sx-cta b{font-weight:inherit}
/* phones: one alignment for every section. Headings, intros and section links centre; cards keep their own left-aligned text */
@media(max-width:700px){
  .sec-head{text-align:center;margin-inline:auto}
  .sec-head p{margin-inline:auto}
  .faq .sec-head{text-align:center}
  .sec > .wrap > p:last-child:not(.clx-note){text-align:center}
  .split-copy{text-align:left}
}
.stymock div img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stymock div:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.stymock div span{z-index:2}
.stymock div.more{border-style:dashed;background:radial-gradient(circle at 50% 35%,rgba(10,143,255,.25),transparent 60%)}
.stymock div.more em{color:var(--sky)}
/* Oct 28d: b-roll library: tagged clips, a spoken line, the match lands in the video */
.lb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);grid-template-rows:auto auto;gap:1rem 1.4rem;padding:1.2rem;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,#0e1117,#090a0d)}
.lb-lib{grid-column:1;grid-row:1}
.lb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem;font-size:.85rem}
.lb-top span{font-family:var(--mono);font-size:.68rem;color:#34d399;padding:.25rem .55rem;border-radius:99px;background:rgba(52,211,153,.12)}
.lb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.lb-t{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#111}
.lb-t img{width:100%;height:100%;object-fit:cover;display:block;opacity:.75}
.lb-t span{position:absolute;left:.35rem;bottom:.35rem;right:.35rem;font-size:.6rem;font-weight:600;padding:.18rem .4rem;border-radius:6px;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-t em{position:absolute;top:.35rem;right:.35rem;font-style:normal;font-family:var(--mono);font-size:.55rem;padding:.1rem .3rem;border-radius:4px;background:rgba(0,0,0,.6);color:#cfd5de}
.lb.in .lb-t.hit{animation:lbhit 6s infinite}
.lb.in .lb-t.hit img{animation:lbimg 6s infinite}
@keyframes lbhit{0%,35%{border-color:var(--line);box-shadow:none}45%,85%{border-color:var(--sky);box-shadow:0 0 0 2px rgba(6,169,255,.35),0 0 30px rgba(6,169,255,.35)}100%{border-color:var(--line)}}
@keyframes lbimg{0%,35%{opacity:.75}45%,85%{opacity:1}}
.lb-say{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:.5rem}
.lb-line{font-size:1.05rem;line-height:1.5;color:#e6e9ee}
.lb-line mark{background:transparent;color:#fff;border-radius:4px;padding:0 .15rem}
.lb.in .lb-line mark{animation:lbmark 6s infinite}
@keyframes lbmark{0%,25%{background:transparent}35%,85%{background:rgba(6,169,255,.3)}100%{background:transparent}}
.lb-match{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--sky);opacity:0}
.lb-match i{width:7px;height:7px;border-radius:50%;background:var(--sky)}
.lb.in .lb-match{animation:lbshow 6s infinite}
@keyframes lbshow{0%,40%{opacity:0}48%,85%{opacity:1}100%{opacity:0}}
.lb-ph{grid-column:2;grid-row:1/3;position:relative;width:min(240px,100%);aspect-ratio:9/16;justify-self:center;align-self:center;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#000;box-shadow:0 0 50px rgba(10,143,255,.15)}
.lb-ph video{width:100%;height:100%;object-fit:cover;display:block}
.lb-pip{position:absolute;inset:0;opacity:0}
.lb-pip img{width:100%;height:100%;object-fit:cover;display:block}
.lb.in .lb-pip{animation:lbpip 6s infinite}
@keyframes lbpip{0%,48%{opacity:0;transform:scale(1.08)}54%,85%{opacity:1;transform:none}92%,100%{opacity:0}}
.lb-cap{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:var(--display);font-weight:900;font-size:1rem;text-shadow:0 2px 10px rgba(0,0,0,.85);z-index:2}
.lb-cap b{color:#ffd23f}
.lb-pts{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.lb-pts li{padding:1.1rem 1.2rem;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text2);font-size:.93rem}
.lb-pts b{display:block;color:#fff;font-size:1rem;margin-bottom:.25rem}
@media(max-width:900px){.lb{grid-template-columns:1fr}.lb-lib,.lb-say,.lb-ph{grid-column:1;grid-row:auto}.lb-ph{width:min(220px,60vw)}.lb-pts{grid-template-columns:1fr}}
@media(max-width:520px){.lb{padding:.8rem}.lb-grid{grid-template-columns:repeat(4,1fr);gap:.35rem}.lb-t span{display:none}.lb-t.hit span{display:block;font-size:.5rem}.lb-t em{display:none}}
/* HyperHook and Reimagine */
.hh{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.hh-card{display:grid;grid-template-columns:200px 1fr;gap:1.3rem;padding:1.3rem;border-radius:20px;border:1px solid var(--line);background:var(--card);align-items:start}
.hh-demo{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 40px rgba(139,61,255,.18)}
.hh-demo video{width:100%;height:100%;object-fit:cover;display:block}
.hh-tag{position:absolute;left:.5rem;top:.5rem;right:.5rem;font-size:.58rem;font-weight:700;padding:.25rem .45rem;border-radius:99px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);text-align:center;z-index:4}
.hh-w{position:absolute;left:0;right:0;text-align:center;font-family:var(--display);font-weight:900;letter-spacing:-.03em;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.7);opacity:0;z-index:3}
.hh-w.w1{top:30%;font-size:2.4rem}.hh-w.w2{top:44%;font-size:1.5rem;color:#ffd23f}
.hh-card.in .hh-w.w1{animation:hhslam 4s infinite}.hh-card.in .hh-w.w2{animation:hhslam 4s .35s infinite}
.hh-card.in .hh-a video{animation:hhshake 4s infinite}
@keyframes hhslam{0%{opacity:0;transform:scale(2.4)}8%{opacity:1;transform:scale(.95)}12%,70%{opacity:1;transform:none}80%,100%{opacity:0}}
@keyframes hhshake{0%,7%,20%,100%{transform:none}9%{transform:translate(4px,-3px) scale(1.04)}11%{transform:translate(-4px,2px) scale(1.04)}14%{transform:translate(2px,1px) scale(1.02)}}
.hh-b video{position:relative;z-index:2;-webkit-mask:radial-gradient(ellipse 48% 42% at 50% 52%,#000 60%,transparent 72%);mask:radial-gradient(ellipse 48% 42% at 50% 52%,#000 60%,transparent 72%)}
.hh-bg{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 20% 20%,rgba(255,210,63,.6) 0 2px,transparent 3px),radial-gradient(circle at 70% 30%,rgba(255,255,255,.7) 0 1.5px,transparent 2.5px),radial-gradient(circle at 40% 15%,rgba(255,255,255,.6) 0 1px,transparent 2px),linear-gradient(180deg,#0b1030 0%,#2a1550 55%,#120a20 100%);opacity:0}
.hh-card.in .hh-bg{animation:hhbg 6s infinite}
@keyframes hhbg{0%,20%{opacity:0}35%,90%{opacity:1}100%{opacity:0}}
.hh-card.in .hh-b video{animation:hhmask 6s infinite}
@keyframes hhmask{0%,20%{-webkit-mask-size:400% 400%;mask-size:400% 400%}35%,90%{-webkit-mask-size:100% 100%;mask-size:100% 100%}}
.hh-3d{position:absolute;left:0;right:0;top:22%;z-index:3;display:flex;flex-direction:column;align-items:center;perspective:300px;opacity:0}
.hh-3d i{font-style:normal;font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:1;color:#fff;text-shadow:0 0 18px rgba(139,61,255,.9),0 3px 0 #5b1fb8}
.hh-card.in .hh-3d{animation:hh3d 6s infinite}
@keyframes hh3d{0%,35%{opacity:0;transform:rotateY(-70deg) translateZ(40px)}45%,85%{opacity:1;transform:rotateY(0) translateZ(0)}95%,100%{opacity:0;transform:rotateY(60deg)}}
.hh-prompt{position:absolute;left:.5rem;right:.5rem;bottom:.6rem;z-index:4;font-size:.6rem;padding:.4rem .5rem;border-radius:9px;background:rgba(0,0,0,.65);border:1px solid rgba(139,61,255,.5);color:#e9e1ff}
.hh-copy h3{font-size:1.4rem;margin-bottom:.5rem}
.hh-copy p{color:var(--text2);font-size:.95rem}
.hh-styles{list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.hh-styles li{position:relative;font-size:.74rem;padding:.3rem .6rem;border-radius:99px;border:1px solid var(--line);background:#0b0d12;cursor:default}
.hh-styles li span{display:none}
.hh-styles li:hover{border-color:var(--purple)}
.hh-list{list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-direction:column;gap:.35rem}
.hh-list li{position:relative;padding-left:1.3rem;font-size:.9rem}
.hh-list li:before{content:"✓";position:absolute;left:0;color:var(--purple);font-weight:700}
@media(max-width:1100px){.hh{grid-template-columns:1fr}}
@media(max-width:560px){.hh-card{grid-template-columns:1fr;justify-items:center}.hh-demo{width:min(220px,62vw)}.hh-copy{text-align:left}}
/* AI models banner */
.mdl{padding:1.6rem;border-radius:20px;border:1px solid rgba(139,61,255,.3);background:radial-gradient(circle at 0% 0%,rgba(139,61,255,.18),transparent 50%),radial-gradient(circle at 100% 100%,rgba(10,143,255,.16),transparent 50%),#0b0c11;overflow:hidden}
.mdl-copy{max-width:46rem}
.mdl-copy h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:.5rem 0}
.mdl-copy p{color:var(--text2)}
.mdl-rail{margin:1.4rem -1.6rem 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mdl-track{display:flex;gap:.8rem;width:max-content;animation:mdlmq 32s linear infinite}
.mdl-rail:hover .mdl-track{animation-play-state:paused}
@keyframes mdlmq{to{transform:translateX(-50%)}}
.mdl-m{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1.2rem;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);min-width:150px}
.mdl-m b{font-family:var(--display);font-size:1.15rem;white-space:nowrap}
.mdl-m i{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mdl-fine{margin-top:1rem;font-size:.7rem;color:var(--faint)}
@media(max-width:700px){.mdl{padding:1.2rem;text-align:center}.mdl-copy{margin-inline:auto}.mdl-rail{margin-inline:-1.2rem}}
/* phone band */
.ph-band{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:1.6rem 2rem;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.ph-copy h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:.5rem 0}
.ph-copy p{color:var(--text2)}
.ph-steps{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.5rem;counter-reset:ps}
.ph-steps li{counter-increment:ps;display:flex;align-items:center;gap:.6rem;color:var(--text2)}
.ph-steps li:before{content:counter(ps);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;background:rgba(6,169,255,.15);color:var(--sky);flex:none}
.ph-steps b{color:#fff}
.ph-dev{justify-self:center;width:200px;aspect-ratio:9/19;border-radius:32px;padding:8px;background:#1a1c22;border:1px solid #2c3038;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.ph-scr{position:relative;width:100%;height:100%;border-radius:25px;overflow:hidden;background:#000}
.ps{position:absolute;inset:0;opacity:0;animation:psc 9s infinite}
.ps2{animation-delay:3s}.ps3{animation-delay:6s}
@keyframes psc{0%{opacity:0}4%,30%{opacity:1}36%,100%{opacity:0}}
.ps img{width:100%;height:100%;object-fit:cover;display:block}
.ps-up{position:absolute;left:.6rem;right:.6rem;bottom:1rem;font-size:.62rem;padding:.45rem .55rem;border-radius:10px;background:rgba(0,0,0,.7);display:flex;flex-direction:column;gap:.35rem}
.ps-up i{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue) 70%,#333 70%)}
.ps-ok{position:absolute;top:.8rem;left:.8rem;font-size:.6rem;font-weight:800;padding:.2rem .5rem;border-radius:99px;background:#2fd08a;color:#03140d}
.ps3{display:grid;place-items:center;background:linear-gradient(180deg,#0e1117,#05060a)}
.ps-post{display:flex;flex-direction:column;gap:.5rem;width:80%}
.ps-post b{text-align:center;margin-bottom:.3rem}
.ps-post span{display:flex;align-items:center;gap:.4rem;font-size:.72rem;padding:.45rem .6rem;border-radius:99px;background:rgba(52,211,153,.12);color:#34d399;font-weight:600}
.ps-post i{width:6px;height:6px;border-radius:50%;background:#34d399}
@media(max-width:760px){.ph-band{grid-template-columns:1fr;padding:1.3rem;text-align:center}.ph-steps{align-items:center}.ph-dev{width:170px}}
@media(max-width:760px){.ph-steps{width:fit-content;margin-inline:auto;align-items:flex-start!important;text-align:left}.ph-steps li{display:block;position:relative;padding-left:2rem}.ph-steps li:before{position:absolute;left:0;top:0}}
.ss{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ss-t{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column}
.ss-t img{width:100%;height:auto;aspect-ratio:9/12;object-fit:cover;display:block}
.ss-t b{padding:.9rem 1rem .2rem;font-family:var(--display);font-size:1.05rem}
.ss-t span{padding:0 1rem 1rem;color:var(--text2);font-size:.88rem}
@media(max-width:900px){.ss{grid-template-columns:repeat(2,1fr)}}
/* Oct 29 design pass: audience and feature pages open with the headline beside a finished video */
.hm-head{padding-bottom:clamp(2rem,5vh,3rem)}
.hm-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hm-copy h1{text-align:left}
.hm-copy .sub{margin-inline:0;text-align:left}
.hm-copy .cta-row{justify-content:flex-start}
.hm{position:relative;justify-self:center}
.hm:before{content:"";position:absolute;inset:-18% -30%;background:radial-gradient(circle,rgba(10,143,255,.28),transparent 60%);filter:blur(30px);z-index:0}
.hm-ph{position:relative;z-index:1;width:min(290px,26vw);aspect-ratio:9/16;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#0b0c10;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 7px rgba(255,255,255,.035);transform:rotate(2.5deg)}
.hm-ph video{width:100%;height:100%;object-fit:cover;display:block}
.hm-head .answer{margin-top:2.5rem;max-width:none}
@media(max-width:820px){
  .hm-grid{grid-template-columns:1fr;gap:1.6rem}
  .hm-copy h1,.hm-copy .sub{text-align:center;margin-inline:auto}
  .hm-copy .cta-row{justify-content:center}
  .hm-copy .microtype{text-align:center}
  .hm-ph{width:min(220px,58vw);transform:none}
  .hm-head .answer{margin-top:1.6rem}
}
/* content pages: centre the reading column so wide screens are not lopsided */
body:not([data-page=blog]):not([data-page=about]) .sec .prose{margin-inline:auto}
.sec .prose h2{position:relative}
.sec .prose h2:before{content:"";display:block;width:36px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--purple));margin-bottom:.9rem}
/* blog index: cards with a cover; the newest post leads */
.card.post{padding:0;gap:0}
.card.post .pc{display:block;height:170px;overflow:hidden;position:relative;background:#0b0c10}
.card.post .pc img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;opacity:.85;transition:transform .5s var(--ease),opacity .3s}
.card.post .pc:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--card))}
.card.post:hover .pc img{transform:scale(1.04);opacity:1}
.card.post .pbody{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1.4rem 1.4rem}
.card.post.feat{grid-column:span 2;flex-direction:row}
.card.post.feat .pc{height:auto;flex:0 0 44%}
.card.post.feat .pc:after{background:linear-gradient(90deg,transparent 50%,var(--card))}
.card.post.feat .pbody{justify-content:center;padding:1.6rem}
.card.post.feat h3{font-size:1.5rem}
@media(max-width:900px){.card.post.feat{grid-column:auto;flex-direction:column}.card.post.feat .pc{height:200px;flex:none}.card.post.feat .pc:after{background:linear-gradient(180deg,transparent 40%,var(--card))}}
/* blog covers: drawn, one colour per category */
.card.post .pc{display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 25% 20%,var(--c1,#0a8fff) 0,transparent 55%),radial-gradient(circle at 85% 90%,var(--c2,#8b3dff) 0,transparent 60%),#0d1017}
.card.post .pc svg{width:58px;height:58px;opacity:.9;position:relative;z-index:1;filter:drop-shadow(0 6px 20px rgba(0,0,0,.4))}
.card.post .pc i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 28px),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 28px)}
.card.post .pc:after{display:none}
.pc-comparison{--c1:rgba(234,52,127,.55);--c2:rgba(139,61,255,.5)}
.pc-how-to{--c1:rgba(10,143,255,.6);--c2:rgba(72,223,255,.35)}
.pc-guide{--c1:rgba(47,208,138,.45);--c2:rgba(10,143,255,.4)}
.pc-cost{--c1:rgba(255,198,92,.5);--c2:rgba(234,52,127,.35)}
.card.post:hover .pc svg{transform:scale(1.06);transition:transform .4s var(--ease)}
.card.post.feat .pc svg{width:90px;height:90px}
@media(max-width:900px){.card.post .pc,.card.post.feat .pc{height:140px}}
.sx-new{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;margin-left:.35rem;padding:.15rem .4rem;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff}
.sx-fresh{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem;padding:1rem 1.2rem;border-radius:14px;border:1px solid rgba(234,52,127,.35);background:linear-gradient(90deg,rgba(234,52,127,.1),rgba(139,61,255,.08) 60%,transparent);color:var(--text2)}
.sx-fresh b{color:#fff}
.sx-pulse{flex:none;width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(234,52,127,.6);animation:sxp 2s infinite}
@keyframes sxp{70%{box-shadow:0 0 0 10px rgba(234,52,127,0)}100%{box-shadow:0 0 0 0 rgba(234,52,127,0)}}
@media(max-width:820px){.sx-it b{display:flex;align-items:center}.sx-fresh{text-align:left}}
body.hero-pending .hero{visibility:hidden}
.mbr{display:none}@media(max-width:600px){.mbr{display:inline}}
.clx-ph .cam video{object-position:50% 14%}
/* Oct 29: phone version of the process graphic (the desktop app mock is hidden on phones) */
.fm{display:none}
@media(max-width:620px){
  .flow7.app{display:none!important}
  .fm{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:2rem}
  .sy .sy-stage{display:flex;justify-content:center}
}
.fm-bars{display:flex;gap:4px;width:min(290px,78vw)}
.fm-bars i{flex:1;height:3px;border-radius:3px;background:#262a33;overflow:hidden;position:relative}
.fm-bars i:after{content:"";position:absolute;inset:0;background:var(--sky);transform:scaleX(0);transform-origin:left}
.fm-bars i.done:after{transform:none}
.fm-bars i.on:after{animation:fmbar var(--fmd,5s) linear forwards}
@keyframes fmbar{to{transform:none}}
.fm-ph{position:relative;width:min(290px,78vw);aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 6px rgba(255,255,255,.03)}
.fm-ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.fm-vel{opacity:0}
.fm.s3 .fm-vel,.fm.s4 .fm-vel,.fm.s5 .fm-vel{opacity:1}
.fm.s4 .fm-ph video,.fm.s5 .fm-ph video{filter:brightness(.45)}
.fm-sweep{position:absolute;left:0;right:0;height:30%;background:linear-gradient(180deg,transparent,rgba(10,143,255,.35),transparent);top:-30%;opacity:0}
.fm.s2 .fm-sweep{opacity:1;animation:fmsw 2.2s linear infinite}
@keyframes fmsw{to{top:100%}}
.fm-o{position:absolute;inset:0;opacity:0;transition:opacity .35s;display:flex;flex-direction:column;justify-content:flex-end;padding:.7rem;pointer-events:none}
.fm.s0 .o0,.fm.s1 .o1,.fm.s2 .o2,.fm.s3 .o3,.fm.s4 .o4,.fm.s5 .o5{opacity:1}
.fm-sheet{background:rgba(12,14,19,.88);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:.75rem;display:flex;flex-direction:column;gap:.45rem;font-size:.72rem;color:#cfd5de;transform:translateY(16px);transition:transform .45s var(--ease)}
.fm.s0 .o0 .fm-sheet,.fm.s1 .o1 .fm-sheet,.fm.s2 .o2 .fm-sheet,.fm.s4 .o4 .fm-sheet,.fm.s5 .o5 .fm-sheet{transform:none}
.fm-sheet>b{color:#fff;font-size:.8rem}
.fm-prog{height:4px;border-radius:4px;background:#262a33;overflow:hidden}
.fm-prog u{display:block;height:100%;width:0;background:var(--sky)}
.fm.s0 .fm-prog u{animation:fmprog 2.4s .3s ease-out forwards}
@keyframes fmprog{to{width:100%}}
.fm-ok{display:none;color:#34d399;font-weight:700}
.fm.s0 .fm-up{animation:fmhide 0s 2.8s forwards}.fm.s0 .fm-ok{animation:fmshow 0s 2.8s forwards}
@keyframes fmhide{to{display:none}}@keyframes fmshow{to{display:block}}
.fm-sts{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.fm-st{position:relative;aspect-ratio:9/14;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px #2a2e36}
.fm-st img{width:100%;height:100%;object-fit:cover;display:block}
.fm-st b{position:absolute;left:.25rem;right:.2rem;bottom:.2rem;font-size:.48rem;line-height:1.1;color:#fff;text-shadow:0 1px 4px #000}
.fm.s1 .fm-st.sel{animation:kpick .4s 1s both}
.fm-next{align-self:stretch;text-align:center;padding:.45rem;border-radius:9px;background:var(--blue);color:#fff;font-weight:700;opacity:.5}
.fm.s1 .fm-next{animation:fmnext .3s 2s forwards}
@keyframes fmnext{to{opacity:1}}
.fm-top{position:absolute;top:.8rem;left:.8rem;right:.8rem;display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border-radius:99px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);font-size:.7rem;color:#fff}
.fm-top b{font-weight:700}.fm-top .p2{display:none}
.fm.s2 .fm-top .p1{animation:fmhide 0s 3s forwards}.fm.s2 .fm-top .p2{animation:fmshow 0s 3s forwards}
.fm-spin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--sky);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.fm-feed span{display:block;opacity:0;transform:translateY(6px)}
.fm-feed span b{display:block;color:#fff;margin-bottom:.1rem}
.fm.s2 .fm-feed .f1{animation:fmin .4s .6s forwards}.fm.s2 .fm-feed .f2{animation:fmin .4s 2.6s forwards}
@keyframes fmin{to{opacity:1;transform:none}}
.fm-ready{position:absolute;top:.8rem;left:.8rem;padding:.2rem .5rem;border-radius:99px;background:#2fd08a;color:#03140d;font-weight:800;font-size:.6rem}
.fm-cnt{position:absolute;top:.8rem;right:.8rem;padding:.2rem .5rem;border-radius:99px;background:rgba(0,0,0,.6);font-size:.6rem;color:#cfd5de;font-family:var(--mono)}
.fm-cnt b{color:#fff}
.fm-co{position:absolute;left:50%;top:22%;transform:translateX(-50%);white-space:nowrap;padding:.4rem .75rem;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--purple));color:#fff;font-weight:700;font-size:.72rem;box-shadow:0 8px 24px rgba(10,143,255,.4);opacity:0}
.fm-co.pop{animation:fmpop .45s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes fmpop{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.fm-fx{display:none}
.fm-pl{display:flex;justify-content:space-between;align-items:center;padding:.4rem .55rem;border-radius:10px;background:#151821}
.fm-pl b{color:#fff;font-weight:600}
.fm-pl em{font-style:normal;font-size:.62rem;font-weight:700;padding:.15rem .45rem;border-radius:99px;color:#34d399;background:rgba(52,211,153,.12);opacity:0}
.fm.s4 .fm-pl:nth-of-type(1) em{animation:fmshow2 .3s .6s forwards}.fm.s4 .fm-pl:nth-of-type(2) em{animation:fmshow2 .3s 1.1s forwards}.fm.s4 .fm-pl:nth-of-type(3) em{animation:fmshow2 .3s 1.6s forwards}.fm.s4 .fm-pl:nth-of-type(4) em{animation:fmshow2 .3s 2.1s forwards}
@keyframes fmshow2{to{opacity:1}}
.fm-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.fm-hr{grid-column:1/-1;font-size:.72rem}
.fm-hr b{font-family:var(--display);font-size:1.5rem;color:#fff;margin-right:.25rem}
.fm-sc{display:flex;flex-direction:column;align-items:center;padding:.4rem;border-radius:10px;background:#151821;font-size:.6rem}
.fm-sc b{font-size:1.05rem;color:#34d399}
.fm-tip{grid-column:1/-1;padding:.45rem .55rem;border-radius:9px;border:1px dashed rgba(255,198,92,.5);color:#ffd27a;font-size:.66rem}
.fm-cap{position:relative;height:1.4em;width:100%;text-align:center;font-weight:700;font-size:1rem;color:#fff}
.fm-cap span{position:absolute;left:0;right:0;opacity:0;transition:opacity .3s}
.fm.s0 .fm-cap span:nth-child(1),.fm.s1 .fm-cap span:nth-child(2),.fm.s2 .fm-cap span:nth-child(3),.fm.s3 .fm-cap span:nth-child(4),.fm.s4 .fm-cap span:nth-child(5),.fm.s5 .fm-cap span:nth-child(6){opacity:1}
@media(prefers-reduced-motion:reduce){.fm-sweep,.fm-spin{animation:none!important}}
/* Oct 29: "works on your phone": camera roll → upload → finished and posted, on one loop */
.pf{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;padding:2rem 2.4rem;border-radius:22px;border:1px solid var(--line);background:radial-gradient(circle at 85% 50%,rgba(10,143,255,.16),transparent 55%),var(--card)}
.pf-copy h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:.5rem 0}
.pf-copy p{color:var(--text2);font-size:1.05rem}
.pf-chips{display:flex;align-items:center;gap:.5rem;margin-top:1.3rem;flex-wrap:wrap}
.pf-chips span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;padding:.4rem .7rem;border-radius:99px;border:1px solid var(--line);background:#0b0c10}
.pf-chips span:last-child{border-color:rgba(52,211,153,.5);color:#34d399}
.pf-chips i{width:22px;height:1px;background:linear-gradient(90deg,var(--line),var(--sky))}
.pf-dev{justify-self:center;width:230px;aspect-ratio:9/19;border-radius:38px;padding:9px;background:#15171c;border:1px solid #2c3038;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.pf-scr{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#000}
.pf-roll,.pf-done{position:absolute;inset:0}
.pf-roll{padding:1.6rem .35rem .35rem;background:#000;animation:pfroll 9s infinite}
.pf-bar{display:flex;justify-content:space-between;align-items:baseline;padding:0 .4rem .5rem;font-size:.85rem}
.pf-bar span{font-size:.65rem;color:var(--sky)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.pf-grid i{position:relative;aspect-ratio:1;background:#222 center 20%/cover}
.pf-grid i em{position:absolute;right:3px;bottom:2px;font-style:normal;font-size:.5rem;color:#fff;text-shadow:0 1px 3px #000}
.pf-grid i.pk:after{content:"✓";position:absolute;right:4px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--blue);color:#fff;font-size:.55rem;display:grid;place-items:center;opacity:0;animation:pfck 9s infinite}
.pf-grid i.pk{animation:pfpk 9s infinite}
@keyframes pfck{0%,12%{opacity:0;transform:scale(.4)}16%,100%{opacity:1;transform:none}}
@keyframes pfpk{0%,12%{box-shadow:none}16%,100%{box-shadow:inset 0 0 0 2px var(--blue)}}
.pf-up{position:absolute;left:.5rem;right:.5rem;bottom:.6rem;padding:.55rem .6rem;border-radius:12px;background:rgba(20,22,28,.95);border:1px solid rgba(255,255,255,.1);font-size:.62rem;display:flex;flex-direction:column;gap:.35rem;opacity:0;transform:translateY(10px);animation:pfup 9s infinite}
.pf-up u{display:block;height:3px;border-radius:3px;background:#262a33;overflow:hidden}
.pf-up u i{display:block;height:100%;background:var(--sky);width:0;animation:pfprog 9s infinite}
@keyframes pfup{0%,20%{opacity:0;transform:translateY(10px)}25%,48%{opacity:1;transform:none}52%,100%{opacity:0}}
@keyframes pfprog{0%,25%{width:0}46%,100%{width:100%}}
@keyframes pfroll{0%,50%{opacity:1}55%,96%{opacity:0}100%{opacity:1}}
.pf-done{opacity:0;animation:pfdone 9s infinite}
.pf-done img{width:100%;height:100%;object-fit:cover;display:block}
.pf-badge{position:absolute;top:1.5rem;left:.7rem;padding:.2rem .5rem;border-radius:99px;background:#2fd08a;color:#03140d;font-weight:800;font-size:.58rem}
.pf-post{position:absolute;left:.5rem;right:.5rem;bottom:.6rem;display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.pf-post span{font-size:.6rem;font-weight:700;text-align:center;padding:.35rem;border-radius:99px;background:rgba(52,211,153,.18);color:#34d399;backdrop-filter:blur(6px);opacity:0;animation:pfpl 9s infinite}
.pf-post span:nth-child(2){animation-delay:.25s}.pf-post span:nth-child(3){animation-delay:.5s}.pf-post span:nth-child(4){animation-delay:.75s}
@keyframes pfdone{0%,50%{opacity:0}55%,94%{opacity:1}100%{opacity:0}}
@keyframes pfpl{0%,66%{opacity:0}70%,94%{opacity:1}100%{opacity:0}}
@media(max-width:760px){.pf{grid-template-columns:1fr;padding:1.5rem 1.2rem;text-align:center;gap:1.6rem}.pf-chips{justify-content:center}.pf-dev{width:200px}}
@media(prefers-reduced-motion:reduce){.pf-roll,.pf-done,.pf-up,.pf-up u i,.pf-post span,.pf-grid i.pk,.pf-grid i.pk:after{animation:none}.pf-roll{opacity:0}.pf-done,.pf-post span{opacity:1}}
html{overflow-x:clip}
@media(max-width:420px){.pf-chips{flex-wrap:nowrap;gap:.3rem}.pf-chips span{font-size:.6rem;padding:.35rem .5rem}.pf-chips i{width:12px}}
.hh-card{align-items:center}