/* cutline.co — home page.

   Structure follows the "Cutline Homepage Skeleton" (nav, hero, proof strip,
   product switcher, live demo, audience split, differentiator, workflow,
   feature grid, results, engine updates, pricing, FAQ, footer). The visual
   language is the portal's own, so the replicas framed into the page sit on
   it without a seam: Lato, the #07F8C4 mint, #fafafa surfaces with a 2px
   inner white ring and a soft drop, pill controls, liquid-glass chrome. */

@font-face{font-family:'Lato';src:url('/fonts/lato-semibold-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Nordique Pro';src:url('/fonts/nordique-pro-semi-bold-demo.otf') format('opentype');font-weight:600 700;font-style:normal;font-display:swap}

:root{
  --ink:#111827;
  --muted:#6b7280;
  --faint:#9ca3af;
  --line:#e5e7eb;
  --mint:#07F8C4;
  --mint-soft:#9dffe3;
  --mint-deep:#047857;
  --ground:#ffffff;
  --surface:linear-gradient(to bottom,#ffffff 0%,#fafafa 8%,#fafafa 25%,#fafafa 100%);
  --ring:inset #fff 0 0 0 2px, rgb(19 19 19 / 9%) 0 5px 15px 0;
  --ring-lg:inset #fff 0 0 0 2px, rgb(45 47 52 / 13%) 0 2px 25px 0;
  --glass:rgb(255 255 255 / 65%);
  --radius:26px;
  --wrap:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:'Lato',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ─────────────────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font:700 12.5px/1 'Lato',sans-serif;letter-spacing:.02em;color:var(--ink)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(87,243,195,.22)}
.eyebrow--plain::before{display:none}
h1,h2,h3{margin:0;text-wrap:balance}
.h2{font:600 clamp(30px,4vw,44px)/1.12 'Lato',sans-serif;letter-spacing:-.025em}
.lede{margin:14px 0 0;max-width:60ch;font:400 17px/1.6 'Lato',sans-serif;color:var(--muted);text-wrap:pretty}
.section{padding:120px 0 0}
.section--tight{padding-top:56px}
.section-head{margin-bottom:44px}
.section-head.center{text-align:center}
.section-head.center .lede{margin-left:auto;margin-right:auto}

/* ── buttons (portal pill controls) ───────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;border:0;cursor:pointer;
  font:600 14px/1 'Open Sans','Lato',sans-serif;white-space:nowrap;transition:transform .18s var(--ease),background .18s ease,box-shadow .18s ease}
.btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.btn-dark{background:#000;color:#fff}
.btn-dark:hover{background:#1a1a1a}
.btn-quiet{background:#fff;color:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
.btn-glass{background:#fcfcfcd9;color:#111;box-shadow:#fff 0 0 0 1px,rgb(19 19 19 / 15%) 0 10px 20px 0}
.btn-sm{height:34px;padding:0 16px;font-size:13px}
.btn .arrow{transition:transform .2s var(--ease)}

/* ── 1 · nav ──────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;transition:background .25s ease,box-shadow .25s ease}
.nav.is-stuck{background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 rgba(17,24,39,.06)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:1320px;margin:0 auto;padding:14px 32px}
.brand{display:inline-flex;align-items:center;gap:7px}
.brand img{width:19px;height:19px}
.brand span{font:600 21px/1 'Nordique Pro','Lato',sans-serif;letter-spacing:.3px;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.nav-links{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(17,24,39,.06)}
.nav-links a{padding:7px 14px;border-radius:999px;font:500 14px 'Lato',sans-serif;color:#374151;transition:background .15s ease,color .15s ease}
.nav-links a:hover{background:#f3f4f6;color:var(--ink)}
.nav-actions{display:flex;gap:8px;justify-self:end}

/* ── 2 · hero ─────────────────────────────────────────────────────── */
.hero{position:relative;padding:72px 0 0;text-align:center}
.beta-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 13px;border-radius:999px;background:#fff;
  box-shadow:inset #fff 0 0 0 2px,rgba(19,19,19,.05) 0 2px 6px,0 0 0 1px rgba(17,24,39,.05);font:600 13px 'Lato',sans-serif;color:var(--ink);transition:transform .2s var(--ease)}
.beta-pill .live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px rgba(7,248,196,.9);animation:breathe 2.4s ease-in-out infinite}
.beta-pill b{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:12px}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}
/* Headline: carried over unchanged from the previous home page. */
.hero .qe-center{margin:26px 0 0}
/* Rotating headline. The supplied rule carried a margin-left:212px that was
   compensating for the ClickFunnels container — dropped here, since .qe-center
   already centres the line. Rotator width trimmed to 10ch (longest word is
   "Streamers") so the line reads centred rather than sitting left of it. */
.qe-center{ width:100%; display:flex; justify-content:center; align-items:center; }

.qe-rotator-wrap{
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:700;
  font-size:clamp(26px,3.5vw,38px);
  line-height:1.25;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  text-align:left;
  letter-spacing:0.01rem;
}
.qe-static{ display:inline-flex; align-items:center; }

.qe-rotator{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:10ch;
  height:1.25em;
  overflow:visible;
}
.qe-word{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(calc(-50% + 10px));
  opacity:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  white-space:nowrap;
  will-change:transform,opacity,filter;
}
.qe-in{ animation:qeIn 550ms ease forwards; }
.qe-out{ animation:qeOut 550ms ease forwards; }

@keyframes qeIn{
  from{ opacity:0; transform:translateY(calc(-50% + 10px)); filter:blur(0px); }
  to  { opacity:1; transform:translateY(-50%);               filter:blur(0px); }
}
@keyframes qeOut{
  from{ opacity:1; transform:translateY(-50%);               filter:blur(0px); }
  to  { opacity:0; transform:translateY(calc(-50% - 10px));  filter:blur(3px); }
}

/* Phones: the one-line headline is wider than the screen, so the static
   part wraps and the rotating word gets its own centred line. */
@media (max-width:640px){
  .qe-rotator-wrap{ flex-direction:column; white-space:normal; text-align:center; font-size:30px; line-height:1.2; }
  .qe-static{ display:block; }
  .qe-rotator{ width:100%; height:1.2em; justify-content:center; }
  .qe-word{ left:0; right:0; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .qe-in,.qe-out{ animation:none; }
  .qe-word{ opacity:1; transform:translateY(-50%); }
  .qe-out{ display:none; }
}
.hero-sub{
  margin:2px auto 0;max-width:56ch;
  font:400 17px/1.6 'Lato',sans-serif;color:#6b7280;text-wrap:pretty;
}

.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ── hero: stream in, clip out ──────────────────────────────────────── */
.s2c{display:grid;grid-template-columns:minmax(0,1fr) 84px 270px;align-items:center;gap:18px;max-width:1040px;margin:56px auto 0;text-align:left}
.s2c-stream{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#0b0f14;
  box-shadow:0 1px 2px rgba(5,46,36,.05),0 4px 10px rgba(5,46,36,.07),0 12px 28px rgba(5,46,36,.10),0 28px 64px rgba(5,46,36,.14)}
.s2c-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2c-live{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:rgba(12,12,14,.7);color:#fff;font:800 11.5px 'Lato',sans-serif;letter-spacing:.04em}
.s2c-live i{width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.9);animation:breathe 2s ease-in-out infinite}
.s2c-live b{font-weight:700;color:#d1d5db;letter-spacing:0;font-variant-numeric:tabular-nums}
.s2c-moment{position:absolute;left:50%;bottom:34px;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;white-space:nowrap;
  font:700 13px 'Lato',sans-serif;color:#fff;background:rgba(3,248,194,.55);border:1px solid rgba(3,248,194,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-shadow:0 1px 3px rgba(0,0,0,.3);
  opacity:0;transform:translate(-50%,8px) scale(.9);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.3)}
.s2c-moment svg{width:12px;height:12px}
.s2c.m .s2c-moment{opacity:1;transform:translate(-50%,0) scale(1);animation:s2cPing 1s ease .1s 1}
@keyframes s2cPing{0%{box-shadow:0 0 0 0 rgba(3,248,194,.6)}100%{box-shadow:0 0 0 18px rgba(3,248,194,0)}}
.s2c-track{position:absolute;left:14px;right:14px;bottom:14px;height:5px;border-radius:999px;background:rgba(255,255,255,.28)}
.s2c-mark{position:absolute;top:-3px;bottom:-3px;left:78%;width:0;border-radius:4px;background:#07F8C4;box-shadow:0 0 10px rgba(7,248,196,.8);transition:width .6s cubic-bezier(.2,.8,.2,1),left .6s cubic-bezier(.2,.8,.2,1)}
.s2c.m .s2c-mark{left:70%;width:9%}
.s2c-link svg{width:100%;height:24px;overflow:visible}
.s2c-link path{fill:none;stroke:#111827;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.s2c-line{transition:stroke-dashoffset .5s ease}
.s2c-arrow{transition:stroke-dashoffset .25s ease .45s}
.s2c.c .s2c-link path{stroke-dashoffset:0}
.s2c-phone{padding:9px;border-radius:40px;background:#0b0f14;box-shadow:0 2px 4px rgba(5,46,36,.06),0 18px 40px rgba(5,46,36,.16),0 38px 84px rgba(5,46,36,.2)}
.s2c-screen{position:relative;aspect-ratio:9/16;border-radius:32px;overflow:hidden;background:#111827}
.s2c-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font:600 12.5px 'Lato',sans-serif;color:#9ca3af;transition:opacity .3s ease}
.s2c-wait span{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.15);border-top-color:#07F8C4;animation:s2cSpin .9s linear infinite}
@keyframes s2cSpin{to{transform:rotate(360deg)}}
.s2c.c .s2c-wait{opacity:0}
.s2c-clip{position:absolute;inset:0;opacity:0;transform:scale(.9);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.25,1.15)}
.s2c.c .s2c-clip{opacity:1;transform:none}
.s2c-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25);filter:blur(16px) brightness(.9)}
.s2c-fg{position:absolute;left:50%;top:50%;width:170%;max-width:none;transform:translate(-50%,-50%)}
.s2c-cap{position:absolute;left:50%;top:19%;width:92%;transform:translateX(-50%);text-align:center;font:600 13.5px/1.32 "TikTok Sans","Lato",sans-serif;color:#000;
  opacity:0;filter:blur(6px);transition:opacity .45s ease,filter .45s ease}
.s2c-cap span{background:#fff;padding:3px 8px;border-radius:7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.s2c.k .s2c-cap{opacity:1;filter:none}
.s2c-ui{position:absolute;left:14px;right:14px;bottom:16px;display:flex;flex-direction:column;gap:6px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.s2c.p .s2c-ui{opacity:1;transform:none}
.s2c-handle{font:800 13px 'Lato',sans-serif}
.s2c-views{display:inline-flex;align-items:center;gap:5px;font:700 13px 'Lato',sans-serif;font-variant-numeric:tabular-nums}
.s2c-views svg{width:13px;height:13px}
.s2c-steps{display:flex;justify-content:center;gap:8px;margin-top:22px}
.s2c-steps span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#f3f4f6;color:#9ca3af;font:700 12.5px 'Lato',sans-serif;transition:background .3s ease,color .3s ease}
.s2c-steps span::before{content:"";width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #d1d5db;transition:background .3s ease,box-shadow .3s ease}
.s2c-steps span.on{background:#111827;color:#fff}
.s2c-steps span.on::before{box-shadow:none;background:#07F8C4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat}
@media (max-width:860px){
  .s2c{grid-template-columns:1fr;gap:0;max-width:560px;position:relative;padding-bottom:110px}
  .s2c-link{display:none}
  .s2c-phone{position:absolute;right:-6px;bottom:0;width:42%;padding:6px;border-radius:28px}
  .s2c-screen{border-radius:23px}
  .s2c-cap{font-size:10px}
  .s2c-moment{bottom:24px;font-size:11.5px;padding:6px 11px;left:38%}
}
@media (max-width:640px){
  .s2c{margin-top:40px;padding-bottom:120px}
  .s2c-steps span{font-size:11.5px;padding:5px 10px}
}

/* Audience switch — the portal's segmented chips. */
.seg{display:inline-flex;gap:4px;margin:34px auto 14px;padding:4px;border-radius:999px;background:#f3f4f6;box-shadow:inset 0 1px 2px rgba(17,24,39,.06)}
.seg button{border:0;background:transparent;padding:8px 16px;border-radius:999px;font:600 13px 'Lato',sans-serif;color:var(--muted);cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:rgb(19 19 19 / 12%) 0 4px 12px,inset #fff 0 0 0 1px}

/* The onboarding agent's prompt box (cutlineonboarding agent-setup.css
   .ag9-box), one-to-one, so what is typed here reads as the same field it
   lands in. */
.ag9-box{position:relative;max-width:680px;margin:0 auto;text-align:left;border-radius:24px;background:var(--glass);border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 0 1px rgba(17,24,39,.06),0 18px 48px rgb(28 36 48 / 14%),0 2px 8px rgb(28 36 48 / 5%);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);transition:box-shadow .2s ease}
.ag9-box:focus-within{box-shadow:0 0 0 1px rgba(87,243,195,.35),0 8px 28px rgba(87,243,195,.18),inset 0 0 0 1px rgba(255,255,255,.65),0 18px 48px rgb(28 36 48 / 10%)}
.ag9-textarea{display:block;width:100%;border:0;outline:0;resize:none;background:transparent;font:500 16px/1.5 'Lato',Arial,sans-serif;color:var(--ink);padding:18px 20px 6px;min-height:96px}
.ag9-textarea::placeholder{color:var(--faint)}
.ag9-controls{display:flex;align-items:center;gap:8px;padding:8px 10px 10px 14px}
.ag9-label{display:inline-flex;align-items:center;gap:6px;font:600 12.5px 'Lato',sans-serif;color:var(--muted)}
.ag9-label svg{width:11px;height:11px;color:var(--mint)}
.ag9-spacer{flex:1}
.ag9-send{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 6px rgb(17 24 39 / 25%);transition:opacity .2s ease,transform .15s ease}
.ag9-send:disabled{opacity:.35;cursor:default;box-shadow:none}
.ag9-send svg{width:14px;height:14px}
/* Creator: the box collapses to a one-line "paste your channel link" field,
   send button inline. Height animates so switching audience doesn't jump. */
.ag9-box{display:flex;flex-direction:column}
.ag9-link-icon{display:none}
.ag9-textarea{transition:min-height .3s var(--ease),padding .3s var(--ease)}
.ag9-box.is-link{flex-direction:row;align-items:center;max-width:560px;border-radius:999px;padding:0 7px 0 18px}
.ag9-box.is-link .ag9-link-icon{display:block;width:16px;height:16px;flex-shrink:0;color:var(--faint)}
.ag9-box.is-link .ag9-textarea{min-height:0;height:52px;padding:14px 12px;white-space:nowrap;overflow:hidden}
.ag9-box.is-link .ag9-controls{padding:0}
.ag9-box.is-link .ag9-label,.ag9-box.is-link .ag9-spacer{display:none}
.ag9-note{margin:16px auto 0;font:500 13px 'Lato',sans-serif;color:var(--faint)}
.ag9-note a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* Hero media — the portal tour, in the glass card the old site used. */
/* The card lifts out of the top of the green panel, as on the old site:
   the panel starts lower and the card is pulled up past its edge. */
.showcase{position:relative;display:flow-root;margin:240px auto 0;max-width:1240px;padding:0 48px 40px;border-radius:36px;
  background:linear-gradient(150deg,#5ef2c4 0%,#9dffe3 40%,#d8fff4 100%);isolation:isolate}
/* A touch wider than the reading column on desktop. */
@media (min-width:1240px){.showcase{margin-left:-40px;margin-right:-40px;padding-bottom:48px}}
.showcase::after{content:"";position:absolute;inset:0;z-index:-1;background:url('/img/showcase-poster.jpg') center/cover;opacity:.9;border-radius:inherit}
.shot{max-width:1080px;margin:-180px auto 0;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.55);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  box-shadow:rgba(0,0,0,.20) 0 16px 48px 0,rgba(0,0,0,.06) 0 0 0 1px;
  opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s ease,transform .9s var(--ease)}
.shot.in{opacity:1;transform:none}
.shot-slot{position:relative;aspect-ratio:16/10}
.shot-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;pointer-events:none}
.showcase-note{margin:22px 0 0;font:600 14px 'Lato',sans-serif;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(5,46,36,.25)}
.steps-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.steps-legend span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.55);
  font:600 12px 'Lato',sans-serif;color:#065f46;transition:background .3s ease,color .3s ease}
.steps-legend span.on{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(5,46,36,.12)}

/* ── 3 · proof strip ──────────────────────────────────────────────── */
.proof{padding:88px 0 0;text-align:center}
.proof p{max-width:62ch;margin:0 auto;font:500 16px/1.6 'Lato',sans-serif;color:var(--muted)}
.proof p b{color:var(--ink);font-weight:700}
.marquee{margin-top:32px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 46s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
/* Stream row: the source streams, drawn as the portal's project-grid
   thumbnails (cutlineprojects .cl-project-thumbnail + .cl-thumb-chips),
   running the opposite way above the clips cut from them. */
/* Edges: tiles blur and fade as they leave the screen, not just fade. The
   blur is a backdrop layer on each side whose own mask ramps it in, so it
   strengthens toward the edge; the row's mask then fades it out. */
.marquee--streams{position:relative;padding:14px 0 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.marquee--streams::before,.marquee--streams::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:2;pointer-events:none;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.marquee--streams::before{left:0;-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent);mask-image:linear-gradient(90deg,#000 30%,transparent)}
.marquee--streams::after{right:0;-webkit-mask-image:linear-gradient(270deg,#000 30%,transparent);mask-image:linear-gradient(270deg,#000 30%,transparent)}
.marquee--clips{margin-top:16px}
.marquee-track--rev{animation-direction:reverse;animation-duration:130s}
.stile{position:relative;flex:0 0 auto;width:440px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#f8fafc,#e2e8f0);
  box-shadow:0 14px 38px rgba(148,163,184,.22)}
.stile img{width:100%;height:100%;object-fit:cover}
.stile .views{position:absolute;left:12px;bottom:12px;font-size:13px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  background:rgba(12,12,14,.74);color:#fff;font:700 12px 'Lato',sans-serif;font-variant-numeric:tabular-nums}
.stile .views svg{width:12px;height:12px}
@media (max-width:640px){.stile{width:300px;border-radius:16px}}
.tile{position:relative;flex:0 0 auto;width:132px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#111827;box-shadow:0 10px 24px rgba(17,24,39,.14)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .views{position:absolute;left:10px;bottom:9px;display:inline-flex;align-items:center;gap:5px;color:#fff;font:700 12px 'Lato',sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.tile .views svg{width:13px;height:13px}

/* ── shared portal surfaces ───────────────────────────────────────── */
.panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--ring)}
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:700 11px 'Lato',sans-serif;letter-spacing:.03em}
.tag-stack{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tag-pro{color:#065f46;background:rgba(7,248,196,.14);box-shadow:inset 0 0 0 1px rgba(7,248,196,.4)}
.tag-all{color:#374151;background:#f3f4f6;box-shadow:inset 0 0 0 1px #e5e7eb}
.tag-creator{color:#6d28d9;background:rgba(139,92,246,.10);box-shadow:inset 0 0 0 1px rgba(139,92,246,.25)}
.frame{position:relative;border-radius:22px;overflow:hidden}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent}

/* ── 4 · product switcher ─────────────────────────────────────────── */
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:999px;background:#f3f4f6;box-shadow:inset 0 1px 2px rgba(17,24,39,.06)}
.tab{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:10px 18px;border-radius:999px;cursor:pointer;
  font:600 14px 'Lato',sans-serif;color:var(--muted);transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:rgb(19 19 19 / 12%) 0 4px 12px,inset #fff 0 0 0 1px}
.tab:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.tab .glyph{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#9dffe3,#07F8C4);color:#fff}
.tab .glyph svg{width:11px;height:11px}
.tab .glyph--bolt svg{width:13px;height:13px}
.product{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px;align-items:center;margin-top:14px;padding:40px;border-radius:32px;min-height:500px;
  background:linear-gradient(180deg,rgba(0,255,232,.10) 0%,rgba(0,255,186,.06) 22%,#fafafa 70%);box-shadow:inset #fff 0 0 0 2px}
.product[hidden]{display:none}

.product.enter > *{animation:rise .5s var(--ease) both}
.product.enter > *:nth-child(2){animation-delay:.06s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.product h3{margin:14px 0 0;font:700 clamp(24px,2.6vw,32px)/1.15 'Lato',sans-serif;letter-spacing:-.02em}
.product p{margin:14px 0 0;font:400 16px/1.65 'Lato',sans-serif;color:var(--muted);text-wrap:pretty}
.product .quote{margin-top:16px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:var(--ring);font:500 14px/1.55 'Lato',sans-serif;color:#374151}
.product .quote b{display:block;margin-bottom:4px;font:700 11px 'Lato',sans-serif;letter-spacing:.04em;color:var(--faint);text-transform:uppercase}
.product .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.product .frame{aspect-ratio:760/500;background:rgba(255,255,255,.35)}
.product .frame.r-901{aspect-ratio:901/513}
/* Auto Clipping: the animation bleeds to the panel's top, right and bottom
   edges, so the pushed-off stream is cut by the panel itself. */
#prod-auto{overflow:hidden}
#prod-auto .frame.r-901{align-self:stretch;aspect-ratio:auto;min-height:340px;margin:-40px -40px -40px 0;border-radius:0;background:none}
@media (max-width:1060px){#prod-auto .frame.r-901{aspect-ratio:901/513;min-height:0;margin:0 -28px -28px}}
/* Safari: a single-column grid item sized only by aspect-ratio (iframe inside,
   no intrinsic size) collapsed to ~49x28px on iPhone — the animations showed as
   a tiny thumbnail. Give every product frame an explicit width; the Auto
   Clipping one also spans its -28px side margins. */
@media (max-width:1060px){
  .product .frame{width:100%;align-self:start;justify-self:stretch}
  #prod-auto .frame.r-901{width:calc(100% + 56px)}
}
.product .frame.r-680{aspect-ratio:680/494;background:#fff}
#prod-manual .frame.r-680{background:none}

/* ── 5 · live demo ────────────────────────────────────────────────── */
.chips{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:220px;padding:12px 18px;border-radius:18px;border:0;cursor:pointer;text-align:left;
  background:#fff;box-shadow:inset 0 0 0 1px #e5e7eb;transition:box-shadow .2s ease,transform .2s var(--ease)}
.chip-btn b{font:700 15px 'Lato',sans-serif}
.chip-btn small{font:500 12px 'Lato',sans-serif;color:var(--muted)}
.chip-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px #111827,0 10px 24px rgba(17,24,39,.08)}
.demo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;padding:36px;border-radius:32px;background:var(--surface);box-shadow:var(--ring)}
.vplayer{position:relative;width:290px;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#0b0f14;box-shadow:0 30px 60px rgba(5,46,36,.22)}
.vplayer .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25);filter:blur(16px) brightness(.9)}
.vplayer .fg{position:absolute;left:50%;top:50%;width:175%;max-width:none;transform:translate(-50%,-50%)}
.vplayer .fg.still{width:100%;height:100%;object-fit:cover;transform:translate(-50%,-50%)}
.bubble{position:absolute;left:50%;top:19%;transform:translateX(-50%);width:92%;text-align:center;font:600 14px/1.32 "TikTok Sans","Lato",sans-serif;color:#000;z-index:2}
.bubble span{background:#fff;padding:3px 8px;border-radius:7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vplayer .views{position:absolute;left:14px;bottom:16px;display:inline-flex;align-items:center;gap:6px;color:#fff;font:700 14px 'Lato',sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.45);z-index:2;font-variant-numeric:tabular-nums}
.vplayer .views svg{width:16px;height:16px}
.vplayer .fade-swap{transition:opacity .35s ease}
.demo-side h3{font:700 22px/1.25 'Lato',sans-serif;letter-spacing:-.015em}
.demo-side .sub{margin:6px 0 0;font:500 14px 'Lato',sans-serif;color:var(--muted)}
.carousel{display:flex;gap:14px;margin:22px 0 0;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.ccard{flex:0 0 auto;width:138px;scroll-snap-align:start;border:0;padding:0;background:none;cursor:pointer;text-align:left}
.ccard .ph{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#111827;box-shadow:0 10px 24px rgba(17,24,39,.12);transition:box-shadow .25s ease}
.ccard[aria-pressed="true"] .ph{box-shadow:0 0 0 3px var(--mint),0 10px 24px rgba(17,24,39,.12)}
.ccard img{width:100%;height:100%;object-fit:cover}
.ccard .type{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:999px;background:rgba(12,12,14,.74);color:#5ff5cf;font:700 10.5px 'Lato',sans-serif}
.ccard .cap{margin-top:8px;font:600 12px/1.35 'Lato',sans-serif;color:#374151;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── 6 · audience split ───────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.aud{display:flex;flex-direction:column;padding:32px;border-radius:32px;background:var(--surface);box-shadow:var(--ring);overflow:hidden}
.aud h3{margin:14px 0 0;font:700 26px/1.2 'Lato',sans-serif;letter-spacing:-.02em}
.aud p{margin:12px 0 0;font:400 15px/1.65 'Lato',sans-serif;color:var(--muted)}
.aud .visual{margin:24px 0 0;flex:1;min-height:260px;border-radius:22px;position:relative;overflow:hidden}
.aud .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.aud--clipper .visual{background:none;box-shadow:none;display:flex;align-items:center;justify-content:center;gap:18px;padding:24px}
.aud--creator .visual{aspect-ratio:16/10;min-height:0;flex:none;box-shadow:0 18px 40px rgba(17,24,39,.12),0 0 0 1px rgba(17,24,39,.05);
  background:linear-gradient(150deg,#5ef2c4,#d8fff4)}
.aud--creator .visual.visual--pro{aspect-ratio:auto;flex:1;display:flex;align-items:center;gap:16px;padding:18px;background:linear-gradient(180deg,rgba(0,255,232,.10),#fafafa 80%);box-shadow:inset 0 0 0 1px rgba(7,248,196,.16)}
.visual--pro .visual--agent{flex:1;min-width:0;aspect-ratio:450/500;border-radius:16px;background:transparent}
.visual--pro .payout{width:200px;flex-shrink:0}
@media (max-width:640px){.aud--creator .visual.visual--pro{flex-direction:column}.visual--pro .visual--agent{width:100%;min-height:300px}.visual--pro .payout{width:100%}}
.mini-clip{position:relative;width:150px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;box-shadow:0 20px 40px rgba(5,46,36,.2);flex-shrink:0}
.mini-clip img{width:100%;height:100%;object-fit:cover}
.mini-clip .views{position:absolute;left:10px;bottom:10px;color:#fff;font:700 12px 'Lato',sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.5);display:flex;gap:5px;align-items:center}
.mini-clip .views svg{width:13px;height:13px}
.payout{display:flex;flex-direction:column;gap:10px;width:210px}
.stat{padding:12px 14px;border-radius:16px;background:var(--surface);box-shadow:inset #fff 0 0 0 2px,rgba(19,19,19,.12) 0 5px 15px 0}
.stat .l{font:500 11px 'Lato',sans-serif;color:var(--muted)}
.stat .v{font:700 20px 'Lato',sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .t{font:500 11px 'Lato',sans-serif;color:#0e9762}
.out-row{display:flex;flex-wrap:wrap;gap:6px}
.out-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid #e5e7eb;font:500 11.5px 'Lato',sans-serif}
.out-pill svg{width:12px;height:12px}

/* ── 7 · differentiator ───────────────────────────────────────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vs-card{padding:30px;border-radius:32px}
.vs-card h3{font:700 20px 'Lato',sans-serif;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.vs-card p{margin:12px 0 0;font:400 15px/1.65 'Lato',sans-serif;color:var(--muted)}
.vs-card--them{background:#f6f7f9;box-shadow:inset 0 0 0 1px #eceef2}
.vs-card--them h3{color:#4b5563}
.vs-card--us{background:#fff;box-shadow:0 0 0 1px #eceef2,rgba(5,46,36,.08) 0 18px 40px}
.vs-x,.vs-ok{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.vs-x{background:#e5e7eb;color:#6b7280}
.vs-ok{background:linear-gradient(135deg,#9dffe3,#07F8C4);color:#04422f}
.vs-x svg,.vs-ok svg{width:11px;height:11px}
.phone{position:relative;width:180px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#0b0f14}
.vs-card--them .phone{filter:saturate(.75);box-shadow:0 16px 32px rgba(17,24,39,.14)}
.vs-card--us .phone{box-shadow:0 24px 48px rgba(5,46,36,.22)}
.phone .center{position:absolute;left:50%;top:50%;width:178%;max-width:none;transform:translate(-50%,-50%)}
.phone .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25);filter:blur(14px) brightness(.9)}
.karaoke{position:absolute;left:0;right:0;bottom:22%;text-align:center;font:900 22px/1 'Lato',sans-serif;color:#fff;letter-spacing:.01em;text-transform:uppercase;
  -webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:0 3px 0 #000}
.karaoke .hi{color:#ffe600}
.phone .bubble{font-size:10.5px;top:18%}
.phone .views{position:absolute;left:10px;bottom:10px;color:#fff;font:700 11.5px 'Lato',sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.5);display:flex;gap:5px;align-items:center}
.phone .views svg{width:12px;height:12px}
.vs-foot{margin:18px 0 0;text-align:center;font:500 13px 'Lato',sans-serif;color:var(--faint)}

/* ── 8 · workflow ─────────────────────────────────────────────────── */
.flow{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
.flow-steps{display:flex;flex-direction:column;gap:6px;position:sticky;top:100px}
.flow-step{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:16px;background:transparent;cursor:pointer;text-align:left;
  font:600 15px 'Lato',sans-serif;color:var(--muted);transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.flow-step:hover{background:#f6f7f9;color:var(--ink)}
.flow-step .n{font:700 11px 'Lato',sans-serif;color:var(--ink);width:14px;font-variant-numeric:tabular-nums}
.flow-step .bar{margin-left:auto;width:28px;height:3px;border-radius:2px;background:#e5e7eb;overflow:hidden}
.flow-step .bar i{display:block;height:100%;width:0;background:var(--mint)}
.flow-step[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--ring)}
.flow-step[aria-selected="true"] .n{color:var(--ink)}
.flow-step[aria-selected="true"] .bar i{animation:fill var(--step-ms,9000ms) linear forwards}
.flow.paused .flow-step[aria-selected="true"] .bar i{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.flow-panel{padding:22px;border-radius:32px;background:var(--surface);box-shadow:var(--ring)}
.flow-copy{min-height:150px}
.flow-copy h3{font:700 24px/1.2 'Lato',sans-serif;letter-spacing:-.02em}
.flow-copy p{margin:10px 0 0;font:400 15px/1.65 'Lato',sans-serif;color:var(--muted);max-width:62ch}
.flow-copy ul{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px}
.flow-copy li{display:grid;grid-template-columns:auto 1fr;gap:10px;font:400 14px/1.55 'Lato',sans-serif;color:var(--muted)}
.flow-copy li::before{content:"";width:6px;height:6px;border-radius:50%;margin-top:.6em;background:var(--mint);box-shadow:0 0 6px rgba(7,248,196,.7)}
.flow-copy li b{color:var(--ink);font-weight:700}
.flow-copy.swap{animation:rise .4s var(--ease) both}
.flow .frame{margin-top:14px;aspect-ratio:760/500}
/* Phones: the animation stacks each scene vertically (showcase-flow.html,
   max-width:520px), so the frame turns portrait to fit it. */
@media (max-width:640px){.flow .frame{aspect-ratio:380/560}}

/* ── 9 · feature grid ─────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{display:flex;flex-direction:column;padding:22px;border-radius:26px;background:var(--surface);box-shadow:var(--ring)}
.feat .fx{height:150px;margin-bottom:18px;border-radius:18px;background:linear-gradient(150deg,#effdf8,#fbfffd);box-shadow:inset 0 0 0 1px rgba(7,248,196,.16);
  display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;position:relative}
.feat h3{margin:10px 0 0;font:700 18px 'Lato',sans-serif;letter-spacing:-.01em}
.feat p{margin:6px 0 0;font:400 14px/1.6 'Lato',sans-serif;color:var(--muted)}
/* mini portal pieces */
.fx-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--surface);box-shadow:inset #fff 0 0 0 2px,rgba(19,19,19,.12) 0 5px 15px;width:100%}
.fx-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#d8fff4,#5ef2c4);display:flex;align-items:center;justify-content:center;font:700 12px 'Lato',sans-serif;color:#065f46;flex-shrink:0}
img.fx-av{object-fit:cover;background:#e5e7eb}
.fx-av--add{background:#fff;box-shadow:inset 0 0 0 1px #e5e7eb;color:#374151;font-size:14px}
.fx-name{font:600 12.5px 'Lato',sans-serif;line-height:1.2}
.fx-name small{display:block;font:500 10.5px 'Lato',sans-serif;color:var(--muted)}
.auto-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 11px 'Lato',sans-serif;color:#065f46;background:rgba(7,248,196,.12);box-shadow:inset 0 0 0 1px rgba(7,248,196,.25)}
.auto-pill i{width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 6px rgba(7,248,196,.8);animation:breathe 2.4s ease-in-out infinite}
.fx-stack{display:flex;flex-direction:column;gap:8px;width:100%}
.fx-stack--tight{gap:5px}
.fx-stack--tight .fx-row{padding:6px 10px}
.fx-stack--tight .fx-av{width:24px;height:24px;font-size:11px}
.fx-chat{display:flex;flex-direction:column;gap:8px;width:100%}
.fx-u{align-self:flex-end;max-width:85%;padding:7px 11px;border-radius:14px;background:rgb(17 24 39 / 6%);font:500 12px/1.4 'Lato',sans-serif}
.fx-a{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font:500 12px/1.5 'Lato',sans-serif;color:#1f2937}
.fx-a svg{width:11px;height:11px;color:#111827}
.fx-ts{padding:0 5px;border-radius:5px;background:rgb(17 24 39 / 7%);font-weight:700;font-variant-numeric:tabular-nums}
.fx-an{width:100%;padding:12px 14px;border-radius:16px;background:var(--surface);box-shadow:inset #fff 0 0 0 2px,rgba(19,19,19,.12) 0 5px 15px}
.fx-an-top{display:flex;justify-content:space-between;align-items:center;font:700 12px 'Lato',sans-serif}
.fx-live{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font:600 10.5px 'Lato',sans-serif;color:#03986e;background:rgba(87,243,195,.14)}
.fx-live i{width:5px;height:5px;border-radius:50%;background:#07F8C4}
.fx-an-n{font:800 20px 'Lato',sans-serif;letter-spacing:-.01em;margin-top:2px}
.fx-an svg{width:100%;height:40px;display:block;margin-top:4px}
.fx-chan{flex-direction:column;align-items:stretch;gap:8px}
.fx-chan-top{display:flex;align-items:center;gap:10px}
.fx-av--brand{background:#fff;box-shadow:inset 0 0 0 1px #e5e7eb}
.fx-av--brand img{width:60%;height:60%;object-fit:contain}
.fx-name small svg{width:9px;height:9px;vertical-align:-1px;margin-right:3px}
.fx-src{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow:hidden;padding-left:2px}
.fx-src-l{font:600 10.5px 'Lato',sans-serif;color:var(--faint);margin-right:2px}
.fx-src-avs{display:inline-flex}
.fx-src-avs img{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-5px}
.fx-src-avs img:first-child{margin-left:0}
.fx-src-names{font:600 10.5px 'Lato',sans-serif;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-hl{position:relative;width:100%;max-width:230px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(148,163,184,.3)}
.fx-hl img{width:100%;height:100%;object-fit:cover}
.fx-dur{position:absolute;right:8px;bottom:8px;font:600 10.5px 'Lato',sans-serif;color:#e5e7eb;background:rgba(12,12,14,.74);border-radius:999px;padding:2px 7px}
.fx-up{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;font:600 10.5px 'Lato',sans-serif;color:#fca5a5;background:rgba(12,12,14,.74);border-radius:999px;padding:3px 8px}
.fx-up svg{width:11px;height:11px}
.fx-idea{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:#fff;border:1px solid #eef0f3;font:600 12px 'Lato',sans-serif;width:100%}
.fx-idea svg{width:11px;height:11px;color:var(--mint);flex-shrink:0}
.fx-clipit{display:flex;flex-direction:column;align-items:center;gap:14px}
.clip-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;font:700 13px 'Lato',sans-serif;color:#0f172a;background:linear-gradient(135deg,#9dffe3,#07F8C4);box-shadow:0 8px 20px rgba(7,248,196,.25)}
.live-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 11px 'Lato',sans-serif;color:#991b1b;background:rgba(239,68,68,.12)}
.live-pill i{width:5px;height:5px;border-radius:50%;background:#ef4444}
.fx-tl{width:100%}
.fx-bar{position:relative;height:8px;border-radius:999px;background:rgba(185,192,201,.32);margin:18px 6px 12px}
.fx-bar .sel{position:absolute;top:-3px;bottom:-3px;left:38%;width:26%;border-radius:6px;background:rgba(7,248,196,.25);box-shadow:inset 0 0 0 2px var(--mint)}
.fx-bar .h{position:absolute;top:-6px;width:6px;height:20px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px rgba(17,24,39,.12),0 2px 6px rgba(17,24,39,.18)}
.fx-range{display:flex;justify-content:center;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font:700 11px 'Lato',sans-serif;white-space:nowrap}
.chip-n{background:#f9fafb;border:1px solid #e5e7eb;color:#374151}
.chip-g{background:rgba(87,243,195,.14);border:1px solid rgba(87,243,195,.45);color:#047857}
.fx-avs{display:flex;align-items:center}
.fx-avs span{width:36px;height:36px;border-radius:50%;margin-left:-10px;border:3px solid #fff;box-shadow:0 4px 10px rgba(17,24,39,.12);overflow:hidden;background:#e5e7eb}
.fx-avs span:first-child{margin-left:0}
.fx-avs img{width:100%;height:100%;object-fit:cover}
.fx-avs .more{display:flex;align-items:center;justify-content:center;font:700 11px 'Lato',sans-serif;color:#065f46;background:linear-gradient(135deg,#d8fff4,#5ef2c4)}

/* ── 10 · actual results ───────────────────────────────────────────── */
.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.res-stat{padding:26px 24px;border-radius:26px;background:var(--surface);box-shadow:var(--ring);text-align:center}
.res-n{font:800 clamp(34px,4vw,48px)/1 'Lato',sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.res-l{margin-top:8px;font:500 14px 'Lato',sans-serif;color:var(--muted)}
.res-clips{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
.res-clip .ph{aspect-ratio:9/16;border-radius:22px;background:#111827;display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 14px 32px rgba(17,24,39,.14)}
.res-clip .ph span{font:600 12px 'Lato',sans-serif;color:#6b7280}
.res-clip .ph img,.res-clip .ph video{width:100%;height:100%;object-fit:cover}
.res-meta{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.res-meta b{font:800 16px 'Lato',sans-serif;font-variant-numeric:tabular-nums}
.res-meta small{font:500 12.5px 'Lato',sans-serif;color:var(--muted)}
/* Placeholder blocks until the real results are in. */
.sk{display:block;background:linear-gradient(90deg,#eceef1 25%,#f6f7f9 50%,#eceef1 75%);background-size:200% 100%;animation:skShimmer 2.4s ease-in-out infinite;border-radius:10px}
.res-n.sk{width:58%;height:44px;margin:0 auto;border-radius:12px}
.res-clip .ph.sk{box-shadow:none;background:linear-gradient(90deg,#eceef1 25%,#f6f7f9 50%,#eceef1 75%);background-size:200% 100%}
.sk-line{height:14px;width:70%}
.sk-line.sk-sm{height:11px;width:50%;margin-top:4px}
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (max-width:860px){.res-stats{grid-template-columns:1fr}.res-clips{grid-template-columns:1fr 1fr}}

/* ── 11 · engine updates ──────────────────────────────────────────── */
.updates{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.updates::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,var(--mint),#d8fff4)}
.update{position:relative;padding-top:32px}
.update::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px var(--mint),0 0 0 4px #fff}
.update time{font:700 12px 'Lato',sans-serif;color:#03986e;letter-spacing:.02em}
.update h3{margin:8px 0 0;font:700 17px/1.3 'Lato',sans-serif}
.update p{margin:6px 0 0;font:400 14px/1.6 'Lato',sans-serif;color:var(--muted)}

/* ── 12 · pricing ─────────────────────────────────────────────────── */
.pricing-cta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:-12px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:30px;border-radius:30px;background:var(--surface);box-shadow:var(--ring)}
.plan--pro{background:linear-gradient(180deg,rgba(0,255,232,.16) 0%,rgba(0,255,186,.08) 30%,#fafafa 80%);box-shadow:inset #fff 0 0 0 2px,rgba(7,248,196,.35) 0 0 0 1px,rgba(5,46,36,.12) 0 24px 50px;transform:translateY(-8px)}
.plan .price{margin:18px 0 0;font:700 44px/1 'Lato',sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan .price small{font:600 15px 'Lato',sans-serif;color:var(--muted);letter-spacing:0}
.plan .price.soft{font-size:30px;color:#374151}
.plan .for{margin:8px 0 0;font:500 14px 'Lato',sans-serif;color:var(--muted)}
.plan ul{margin:22px 0 26px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;font:500 14px/1.45 'Lato',sans-serif;color:#374151}
.plan li svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:#03986e}
.plan .btn{margin-top:auto;width:100%}
.plans--two{grid-template-columns:repeat(2,1fr);max-width:860px;margin:0 auto}
.plan h3{margin:0;font:700 20px 'Lato',sans-serif}
.plan li.no{color:var(--faint)}
.plan li.no svg{color:var(--faint)}
.btn.is-disabled{opacity:.55;pointer-events:none;cursor:default}
.plans-note{margin:26px 0 0;text-align:center;font:500 13px 'Lato',sans-serif;color:var(--faint)}

/* ── 13 · FAQ ─────────────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto}
.faq details{border-radius:20px;transition:background .2s ease}
.faq details + details{margin-top:4px}
.faq details:hover,.faq details[open]{background:#fafafa}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font:700 16px/1.4 'Lato',sans-serif;color:#374151}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary,.faq summary:hover{color:var(--ink)}
.faq summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:16px}
.faq .sign{position:relative;width:14px;height:14px;flex-shrink:0}
.faq .sign::before,.faq .sign::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;border-radius:2px;background:var(--faint);transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s ease}
.faq .sign::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .sign::after{transform:translate(-50%,-50%);opacity:0}
.faq .ans{padding:0 20px 20px;font:400 15px/1.7 'Lato',sans-serif;color:var(--muted)}
.faq .ans p{margin:0 0 10px}
.faq .ans a{color:#03986e;text-decoration:underline;text-underline-offset:3px}

/* YouTube data notice — kept visible without login for Google OAuth review. */
.ytdata{max-width:820px;margin:56px auto 0;padding:28px 30px;border-radius:26px;background:var(--surface);box-shadow:var(--ring)}
.ytdata h3{font:700 18px 'Lato',sans-serif}
.ytdata p,.ytdata li{font:400 14px/1.7 'Lato',sans-serif;color:var(--muted)}
.ytdata p{margin:10px 0 0}
.ytdata ul{margin:10px 0 0;padding-left:18px}
.ytdata li b{color:#374151}
.ytdata a{color:#03986e;text-decoration:underline;text-underline-offset:3px}

/* ── closing CTA + footer ─────────────────────────────────────────── */
.closing{margin-top:120px;padding:64px 40px;border-radius:36px;text-align:center;background:linear-gradient(150deg,#5ef2c4 0%,#9dffe3 45%,#d8fff4 100%)}
.closing h2{color:#052e24}
.closing p{margin:14px auto 0;max-width:48ch;font:400 16px/1.6 'Lato',sans-serif;color:#04624a}
.closing .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px}
.footer{margin-top:80px;padding:48px 0 56px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.footer h4{margin:0 0 12px;font:700 13px 'Lato',sans-serif;color:var(--ink)}
.footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.footer li,.footer p{font:400 14px 'Lato',sans-serif;color:var(--muted)}
.footer a:hover{color:var(--ink)}
.footer p{margin:10px 0 0}
.footer-base{margin-top:36px;font:400 13px 'Lato',sans-serif;color:var(--faint)}

/* ── reveal on scroll ─────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1060px){
  .nav-links{display:none}
  .nav-inner{grid-template-columns:1fr auto}
  .product{grid-template-columns:1fr;padding:28px;min-height:0}
  .grid{grid-template-columns:1fr 1fr}
  .updates{grid-template-columns:1fr 1fr;row-gap:32px}
  .updates::before{display:none}
  .vs-card{grid-template-columns:1fr}
  .vs-card .phone{justify-self:center}
}
@media (max-width:860px){
  .split,.vs,.plans,.plans--two{grid-template-columns:1fr}
  .plan--pro{transform:none}
  .flow{grid-template-columns:1fr}
  .flow-steps{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
  .flow-steps::-webkit-scrollbar{display:none}
  .flow-step{flex:0 0 auto;width:auto}
  .flow-step .bar{display:none}
  .demo{grid-template-columns:1fr;justify-items:center;padding:24px}
  .demo-side{width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav-inner{padding:12px 16px}
  .section{padding-top:88px}
  .hero{padding-top:48px}
  .showcase{margin-top:calc(.18 * (100vw - 56px) + 40px);padding:0 12px 22px;border-radius:24px}
  .shot{border-radius:14px;margin-top:calc(-.18 * (100vw - 56px))}
  .steps-legend{display:none}
  .seg{margin-top:26px}
  .hero-cta .btn{flex:1 1 140px}
  .grid,.updates{grid-template-columns:1fr}
  .aud,.vs-card,.flow-panel,.plan{padding:22px;border-radius:24px}
  .flow-panel{padding:18px}
  .aud--clipper .visual{flex-direction:column}
  .vplayer{width:240px}
  .closing{padding:44px 20px;border-radius:26px}
  .chip-btn{min-width:0;flex:1}
  #features .tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:22px}
  #features .tab:last-child:nth-child(odd){grid-column:1/-1}
  .tab{justify-content:center;padding:10px 8px;font-size:13px}
  .tab .glyph{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s !important;animation-iteration-count:1 !important;transition-duration:.01s !important}
  .marquee-track{animation:none}
  .reveal,.shot{opacity:1;transform:none}
}
.tag-stack .tag{letter-spacing:0}