/* Prow marketing site (mock). Bloom tokens from src/app/globals.css, the marketing scope (.mkt-v3), dark.
   Layout: a 1200px measure with one section rhythm (44px phone, 96px desktop), a sticky nav that becomes a
   floating pill, and real product UI as every section's visual. */
:root {
  color-scheme: dark;
  --page: #080808;
  --card: #141414;
  --surface-1: #1f1f1f;
  --surface-2: #242424;
  --popover: #262626;
  --canvas: #171717;
  --fill-1: rgba(255, 255, 255, 0.18);
  --fill-2: rgba(255, 255, 255, 0.12);
  --fill-3: rgba(255, 255, 255, 0.08);
  --fill-4: rgba(255, 255, 255, 0.05);
  --text-1: #f8fafc;
  --text-2: rgba(248, 250, 252, 0.7);
  --text-3: rgba(248, 250, 252, 0.52);
  --text-4: rgba(248, 250, 252, 0.25);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(255, 143, 180, 0.22);
  --hover-hairline: rgba(255, 255, 255, 0.1);
  --accent: #ff8fb4;
  --accent-deep: #f27ba3;
  --success: #8cd98c;
  --destructive: #ff4271;
  --ring: rgba(255, 255, 255, 0.45);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--text-1); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
input, textarea, select { font: inherit; }
/* Text fields never show a focus ring; the border steps up instead (global UI rule). */
input:focus, input:focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible { outline: none; box-shadow: none; }
:where(a, button, [role="button"], summary):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ring); border-radius: 8px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tnum { font-variant-numeric: tabular-nums; }
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 1296px; }
.wrap-narrow { max-width: 768px; }
@media (max-width: 639px) { :root { --gutter: 16px; } }

.section { position: relative; padding-block: 44px; border-top: 1px solid var(--border); }
@media (min-width: 1024px) { .section { padding-block: 96px; } }
.section[id] { scroll-margin-top: 80px; }
.eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.h2 { font-size: 2.25rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variation-settings: "opsz" 32; text-wrap: balance; }
@media (min-width: 1024px) { .h2 { font-size: 3rem; } }
.lede { max-width: 34rem; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 32px; }
.head-row .lede { margin-top: 12px; }
.glow { position: absolute; z-index: 0; pointer-events: none; width: min(720px, 92vw); aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%); }

/* ---------- reveal (only below-the-fold blocks get the pre state, from JS) ---------- */
.rv.pre { opacity: 0; transform: translateY(12px); }
.rv { transition: opacity 600ms var(--ease-out-soft), transform 700ms var(--ease-out-soft); }
@media (prefers-reduced-motion: reduce) { .rv.pre { opacity: 1; transform: none; } .rv { transition: none; } }

/* ---------- .btn-bloom (globals.css) + hover sheen + spring release ---------- */
.btn-bloom { position: relative; display: inline-flex; height: 36px; padding: 1px; gap: 0; border: none; border-radius: 999px; flex: none; background-image: linear-gradient(180deg, #d3d3d3 0%, #3f3f3f 100%); box-shadow: 0 4px 12px 0 rgba(0,0,0,.1), 0 2px 6px -2px rgba(0,0,0,.33); user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; transition: box-shadow 200ms var(--ease-out-soft), transform 380ms var(--ease-swift); }
.btn-bloom:hover { background-image: linear-gradient(180deg, #fff 0%, #737373 100%); transform: translateY(-1px); box-shadow: 0 12px 20px 0 rgba(0,0,0,.15), 0 4px 10px 0 rgba(0,0,0,.2); }
.btn-bloom:active { transform: translateY(0) scale(.95); transition-duration: 200ms, 60ms; }
.btn-bloom:focus-visible { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ring); border-radius: 999px; }
.btn-bloom > span { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; padding: 0 16px; border-radius: 999px; background: #fafafa; color: #0a0a0a; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: inset 0 -16px 24px -12px rgba(240,240,240,.15), inset 0 24px 16px -16px rgba(0,0,0,.4), inset 0 -20px 8px 0 rgba(240,240,240,1), inset 0 -1px 8px 0 #fff, inset 0 .5px .5px 0 #fff; transition: background 200ms var(--ease-out-soft); }
.btn-bloom:hover > span { background: #fff; }
.btn-bloom > span::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.9) 50%, transparent 80%); mix-blend-mode: soft-light; transform: translateX(-130%); }
@media (prefers-reduced-motion: no-preference) { .btn-bloom:hover > span::after { transform: translateX(320%); transition: transform 700ms var(--ease-out-soft); } }
.btn-bloom svg.i { width: 16px; height: 16px; transition: transform 150ms var(--ease-out-soft); }
.btn-bloom:hover svg.i { transform: translateX(2px); }
.btn-bloom.lg { height: 48px; }
.btn-bloom.lg > span { padding: 0 22px; font-size: 15.5px; }
.btn-bloom.md { height: 44px; }
.btn-bloom.md > span { padding: 0 20px; }
.btn-bloom.sm { height: 30px; }
.btn-bloom.sm > span { padding: 0 14px; font-size: 13px; }
.btn-bloom.full { width: 100%; }
.btn-bloom[disabled] { background-image: none; background: var(--fill-3); box-shadow: none; cursor: default; transform: none; }
.btn-bloom[disabled] > span { background: transparent; color: var(--text-3); box-shadow: none; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--fill-3); color: var(--text-1); font-size: 15px; font-weight: 500; transition: background 150ms var(--ease-out-soft), transform 380ms var(--ease-swift); }
.btn-ghost:hover { background: var(--fill-2); }
.btn-ghost:active { transform: scale(.97); transition-duration: 60ms; }
.btn-ghost.full { width: 100%; }

/* ---------- nav (marketing/nav.tsx) ---------- */
.mkt-skip { position: fixed; top: .75rem; left: -9999px; z-index: 60; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--page); padding: .5rem 1rem; font-size: .875rem; }
.mkt-skip:focus { left: .75rem; }
.nav-band { position: sticky; top: 0; z-index: 40; height: 64px; }
.nav { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: opacity 140ms ease-out; }
.nav .logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.nav .logo svg { width: 24px; height: 24px; }
.nav-links { display: none; align-items: center; gap: 28px; }
.nav-links a, .nav-login { font-size: 14px; color: var(--text-2); transition: color 150ms; padding-block: 12px; }
.nav-links a:hover, .nav-login:hover { color: var(--text-1); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-login { display: none; }
.nav-menu-btn { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--text-2); }
.nav-menu-btn:hover { background: var(--fill-4); color: var(--text-1); }
.nav-menu-btn svg.i { width: 20px; height: 20px; }
.nav .btn-bloom { height: 44px; }
@media (min-width: 768px) { .nav-links { display: flex; } .nav-login { display: inline-flex; } .nav-menu-btn { display: none; } }
@media (min-width: 1024px) { .nav .btn-bloom { height: 36px; } }
.nav-panel { position: absolute; left: 12px; right: 12px; top: 60px; z-index: 50; display: none; flex-direction: column; padding: 8px; border-radius: 16px; border: 1px solid var(--border); background: var(--popover); box-shadow: var(--shadow-2); }
.nav-panel.open { display: flex; }
.nav-panel a { display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 12px; font-size: 14px; color: var(--text-2); }
.nav-panel a:hover { background: var(--fill-4); color: var(--text-1); }
.nav-panel hr { width: 100%; border: 0; height: 1px; background: var(--border); margin: 4px 0; }
/* floating pill once scrolled */
.nav-band.float { pointer-events: none; }
.nav-band.float .nav { pointer-events: auto; width: max-content; max-width: calc(100% - 24px); height: 56px; margin: 4px auto 0; padding: 0 6px 0 20px; gap: 20px; border-radius: 999px; border: 1px solid var(--border); background: var(--popover); box-shadow: var(--shadow-2); }
.nav-band.float .nav-links a:not(.keep), .nav-band.float .nav-login, .nav-band.float .nav-menu-btn { display: none; }
.nav-band.float .logo span { display: none; }
@media (min-width: 640px) { .nav-band.float .logo span { display: inline; } }
.nav-band.float .nav-links { display: none; }
@media (min-width: 640px) { .nav-band.float .nav-links { display: flex; } }
.nav-band.swap .nav { opacity: 0; }

/* ---------- hero (sections/hero.tsx) ---------- */
.hero { position: relative; overflow: hidden; padding-block: 44px; }
@media (min-width: 1024px) { .hero { padding-block: 96px; } }
.hero .glow { left: 50%; top: 0; transform: translate(-50%, -12%); }
.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { font-size: 2.5rem; font-weight: 640; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; font-variation-settings: "opsz" 32; }
.hero h1 span { display: block; }
.hero h1 .pink { color: var(--accent); }
@media (min-width: 640px) { .hero h1 { font-size: 3.5rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 4.25rem; } }
.hero .lede { margin-top: 24px; max-width: 36rem; }
@media (min-width: 1024px) { .hero .lede { font-size: 1.1875rem; } }
.hero .wl { margin-top: 36px; }

/* waitlist form (marketing/waitlist-form.tsx) */
.wl { width: 100%; max-width: 34rem; margin-inline: auto; text-align: center; }
.wl.narrow { max-width: 32rem; }
.wl form { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .wl form { flex-direction: row; } }
.wl input { height: 48px; width: 100%; min-width: 0; border-radius: 999px; border: 1px solid var(--border); background: var(--fill-3); padding: 0 20px; font-size: 16px; color: var(--text-1); transition: border-color 150ms; }
.wl input::placeholder { color: var(--text-3); }
.wl input:hover, .wl input:focus { border-color: var(--border-strong); }
.wl input[aria-invalid="true"] { border-color: rgba(255, 66, 113, .6); }
.wl .btn-bloom { height: 48px; width: 100%; }
@media (min-width: 640px) { .wl .btn-bloom { width: auto; } }
.wl .btn-bloom > span { padding: 0 20px; }
.wl-helper { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; font-size: 14px; color: var(--text-2); }
.wl-helper button { color: var(--text-3); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.wl-status { font-size: 14px; color: var(--destructive); }
.wl-status:not(:empty) { margin-top: 12px; }
.wl-status.done { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--text-1); }
.wl-status.done i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-2); }

/* hero clip row (clips/hero-clip-row.tsx) */
.cliprow { position: relative; margin-top: 56px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
@media (min-width: 640px) { .cliprow { margin-top: 64px; } }
.cliprow ul { display: flex; gap: 16px; width: max-content; padding: 0 8px; margin: 0; list-style: none; }
@media (prefers-reduced-motion: no-preference) { .cliprow ul { animation: marquee 70s linear infinite; } .cliprow:hover ul { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .cliprow { overflow-x: auto; } .cliprow li.dup { display: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
.rclip { container-type: inline-size; position: relative; width: 150px; aspect-ratio: 9 / 16; flex: none; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1); }
@media (min-width: 640px) { .rclip { width: 190px; } }
@media (min-width: 1024px) { .rclip { width: 210px; } }
.rclip video, .rclip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rclip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, transparent 25%, transparent 60%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.rclip .cap { position: absolute; z-index: 1; left: 8%; right: 8%; top: 58%; text-align: center; font-size: clamp(11px, 9cqw, 22px); font-weight: 800; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.rclip .badge { position: absolute; z-index: 1; left: 7%; top: 5%; }
.score { display: inline-flex; align-items: baseline; border-radius: 999px; background: rgba(0,0,0,.55); padding: .25em .6em; font-size: clamp(11px, 7cqw, 18px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.score small { font-size: .62em; opacity: .7; }
.score.top { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,143,180,.6), 0 0 18px rgba(255,143,180,.45); }
.score.mid { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

/* platforms strip */
.platforms { border-top: 1px solid var(--border); padding-block: 22px; }
.platforms p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--text-3); text-align: center; }
.platforms b { color: var(--text-2); font-weight: 500; }
.platforms .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }

/* ---------- how it works (v3 cards) ---------- */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1024px) { .steps { margin-top: 48px; } }
@media (max-width: 1023px) {
  .steps { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; padding-bottom: 4px; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 min(460px, 78%); scroll-snap-align: start; }
}
@media (max-width: 639px) { .steps { display: grid; grid-template-columns: minmax(0, 1fr); margin-inline: 0; padding-inline: 0; overflow: visible; } .step { padding: 8px; } }
.step { min-width: 0; display: flex; flex-direction: column; padding: 10px; border-radius: 22px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(248,250,252,.04); transition: border-color 200ms var(--ease-out-soft), transform 380ms var(--ease-swift); }
@media (hover: hover) { .step:hover { border-color: var(--border-strong); transform: translateY(-2px); } }
.step .visual { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #1b1b1c; }
.step .visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.step .visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); pointer-events: none; }
.step .foot { padding: 18px 10px 12px; }
.step .foot-row { display: flex; align-items: center; gap: 12px; }
.num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fafafa; color: #0a0a0a; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: inset 0 -6px 6px -4px rgba(0,0,0,.18), inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,.1); }
.step h3 { font-size: 19px; font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; }
.step p { margin: 8px 0 0 40px; font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* ---------- editor screenshot ---------- */
.edframe { position: relative; margin-top: 48px; border-radius: 22px; padding: 10px; background: linear-gradient(180deg, #1c1c1c, #121212); border: 1px solid var(--border-strong); box-shadow: 0 50px 120px -40px rgba(0,0,0,.9), 0 0 120px -50px rgba(255,143,180,.25); }
.edframe .vp { position: relative; overflow: hidden; border-radius: 14px; }
.ed { position: absolute; left: 0; top: 0; width: 1280px; height: 740px; transform-origin: 0 0; background: var(--page); display: flex; flex-direction: column; font-size: 13.5px; }
.ed-top { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 0 10px; }
.ed-top .l, .ed-top .r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ed-ib { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--text-2); }
.ed-ib svg.i { width: 18px; height: 18px; }
.ed-ib.off { opacity: .4; }
.ed-title b { display: block; font-size: 14.5px; font-weight: 600; }
.ed-title small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.ed-title small i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.ed-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 76px 384px minmax(0, 1fr); }
.ed-rail { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }
.ed-rail span { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 0 8px; border-radius: 14px; font-size: 11px; font-weight: 500; color: var(--text-2); }
.ed-rail span i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--fill-4); }
.ed-rail span i svg.i { width: 18px; height: 18px; }
.ed-rail .ai i { color: var(--accent); }
.ed-rail .on { color: var(--text-1); }
.ed-rail .on i { background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ed-panel { display: flex; flex-direction: column; min-height: 0; padding: 0 12px 10px 4px; }
.ed-ph { padding: 8px 4px 14px; }
.ed-ph h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.ed-ph p { margin-top: 3px; font-size: 13px; color: var(--text-3); }
.ed-scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 0 4px; -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
.ed-group { border-radius: 14px; border: 1px solid var(--border); background: var(--fill-4); }
.ed-prop { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 13.5px; }
.ed-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #fafafa; }
.ed-switch::after { content: ""; position: absolute; top: 2px; left: 16px; width: 16px; height: 16px; border-radius: 50%; background: #0a0a0a; }
.ed-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--fill-3); font-size: 13px; font-weight: 500; }
.ed-pill svg.i { width: 14px; height: 14px; }
.ed-sec h3 { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 10px; }
.ed-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-main { margin: 0 8px 8px 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid var(--border); background: var(--canvas); }
.ed-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 58px 16px 0; background: radial-gradient(40% 55% at 50% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 75%); }
.glass { background-color: color-mix(in srgb, var(--popover) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ed-shape { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.ed-shape span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.ed-shape span.on { background: var(--fill-2); color: var(--text-1); }
.ed-shape em { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; }
.ed-mute { position: absolute; top: 14px; right: 14px; }
.ed-video { position: relative; flex: 1; min-height: 0; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--border-strong), 0 30px 70px -30px rgba(0,0,0,.8); }
.ed-video video, .ed-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-cap { position: absolute; left: 6%; right: 6%; top: 64%; transform: translateY(-50%); text-align: center; line-height: 1.14; font-family: "Montserrat", var(--font); font-weight: 900; text-transform: uppercase; color: #fff; text-shadow: 0 0 .06em #000, 0 0 .06em #000, 0 .07em 0 #000; font-size: 22px; }
.ed-cap .w { display: inline-block; margin: 0 .07em; transition: transform .12s, color .12s; }
.ed-cap .w.on { color: #ffd84a; transform: scale(1.12); }
.ed-play { display: flex; align-items: center; gap: 4px; margin: 12px 0 14px; padding: 5px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.ed-play b.pp { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fafafa; color: #0a0a0a; }
.ed-play b.pp svg { width: 15px; height: 15px; fill: currentColor; }
.ed-play .clock { padding: 0 8px 0 6px; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ed-play .clock b { color: var(--text-1); font-weight: 500; }
.ed-tl { flex: none; height: 234px; display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--canvas); }
.ed-tl h2 { height: 40px; flex: none; display: flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 600; }
.ed-tl .rows { flex: 1; min-height: 0; display: flex; }
.ed-tl .labels { position: relative; width: 96px; flex: none; border-right: 1px solid var(--border); }
.ed-tl .labels span { position: absolute; left: 12px; right: 6px; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.ed-tl .labels svg.i { width: 13px; height: 13px; color: var(--text-3); }
.ed-tl .lanes { position: relative; flex: 1; min-width: 0; margin: 0 16px 12px; }
.ed-ruler { position: absolute; left: 0; right: 0; top: 0; height: 26px; }
.ed-ruler i { position: absolute; bottom: 3px; width: 1px; height: 4px; background: var(--text-4); }
.ed-ruler i.M { height: 8px; background: var(--text-3); }
.ed-ruler i.M span { position: absolute; top: -15px; left: 4px; font-size: 10px; line-height: 12px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.ed-vrow { position: absolute; left: 0; right: 0; top: 30px; height: 72px; }
.ed-vb { position: absolute; top: 0; bottom: 0; overflow: hidden; border-radius: 10px; background: #241b1b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ed-vb.sel { box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(255,255,255,.18); }
.ed-vb .strip { position: absolute; left: 0; right: 0; top: 0; height: 48px; background-size: auto 48px; background-repeat: repeat-x; }
.ed-vb .wave { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: rgba(0,0,0,.55); display: flex; align-items: center; gap: 1px; overflow: hidden; padding: 0 1px; }
.ed-vb .wave i { flex: none; width: 2px; border-radius: 1px; background: rgba(248,250,252,.72); }
.ed-vb .pause { position: absolute; top: 0; bottom: 0; z-index: 1; background: repeating-linear-gradient(135deg, rgba(255,171,36,.55) 0 5px, rgba(255,171,36,.15) 5px 10px); }
.ed-vb .lab { position: absolute; top: 5px; left: 6px; z-index: 2; padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,.55); font-size: 10.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.ed-otop { position: absolute; left: 0; right: 0; top: 108px; height: 26px; }
.ed-chip { position: absolute; top: 0; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.ed-chip svg.i { width: 12px; height: 12px; opacity: .8; }
.ed-chip.text { background: color-mix(in srgb, #4dbeff 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #4dbeff 42%, transparent); }
.ed-chip.media { background: color-mix(in srgb, #f0a35e 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f0a35e 42%, transparent); }
.ed-music { position: absolute; left: 0; right: 0; top: 140px; height: 26px; border-radius: 7px; overflow: hidden; display: flex; align-items: center; background: color-mix(in srgb, #8cd98c 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #8cd98c 38%, transparent); }
.ed-music .mw { position: absolute; inset: 0; display: flex; align-items: center; gap: 1px; padding: 0 1px; }
.ed-music .mw i { flex: none; width: 2px; border-radius: 1px; background: rgba(140,217,140,.72); }
.ed-music b { position: relative; margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--canvas) 70%, transparent); font-size: 11.5px; font-weight: 600; }
.ed-head { position: absolute; top: 12px; bottom: 0; z-index: 6; width: 0; }
.ed-head::before { content: ""; position: absolute; top: 0; left: -6px; width: 12px; height: 14px; background: var(--text-1); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); border-radius: 3px 3px 6px 6px; }
.ed-head::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--text-1); }
.ed-dl.btn-bloom { margin-left: 4px; }
/* caption tiles (captions.module.css), used by the editor's Captions panel */
.ctile { position: relative; height: 84px; min-width: 0; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: #0b0b0b; box-shadow: inset 0 0 0 1px var(--border); color: #fff; isolation: isolate; }
.ctile.on { box-shadow: inset 0 0 0 1.5px var(--text-1), 0 0 0 3px var(--fill-3); }
.ctile .bd { position: absolute; inset: -12%; z-index: -1; filter: blur(10px) brightness(.5) saturate(1.2); background-size: cover; background-position: center 30%; }
.ctile .smp { white-space: nowrap; line-height: 1.14; margin-bottom: 6%; font-size: 15px; }
.ctile .smp .w { display: inline-block; margin: 0 .12em; }
.ctile .nm { position: absolute; left: 9px; bottom: 6px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
@media (max-width: 767px) { .edframe { padding: 6px; border-radius: 16px; } .edframe .vp { border-radius: 11px; } }

/* ---------- proof (sections/founder-proof.tsx, compact) ---------- */
.proof { text-align: center; }
.proof .count { margin-top: 20px; white-space: nowrap; font-size: clamp(2.5rem, 12vw, 6.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.proof .count em { font-style: normal; color: var(--accent); }
.proof .lede { margin: 16px auto 0; }
/* founder-proof.tsx: the plaque wall and its 13 receipts. Below lg a scroll strip; from lg every receipt is absolute
   against .pwall (its padding is the collage's footprint), placed per breakpoint by the generated .rN rules. */
.pwall { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 32px; }
@media (min-width: 640px) { .pwall { margin-top: 48px; } }
@media (min-width: 768px) { .pwall { margin-top: 64px; } }
@media (min-width: 1024px) { .pwall { padding-bottom: 978px; } }
@media (min-width: 1280px) { .pwall { padding-bottom: 640px; } }
.plaques { display: flex; align-items: flex-start; justify-content: center; width: 100%; max-width: 800px; }
.plaques .g { position: relative; z-index: 1; width: 60.5%; transform: rotate(-2deg); filter: drop-shadow(0 16px 32px rgba(0,0,0,.5)); }
.plaques .s { position: relative; z-index: 2; width: 46.75%; margin-left: -7.3%; transform: translateY(11.45%) rotate(2.5deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
.plaques img { display: block; width: 100%; height: auto; }
.rwall { display: flex; align-items: flex-start; gap: 16px; width: calc(100% + 2 * var(--gutter)); margin: 24px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%); }
.rwall::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .rwall { margin-top: 40px; } }
@media (min-width: 768px) { .rwall { margin-top: 56px; } }
.rcpt { flex: none; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); scroll-snap-align: center; }
.rcpt img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .rwall { position: absolute; inset: 0; display: block; width: auto; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .rcpt { position: absolute; z-index: 0; }
}
.tally { margin-top: 32px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---------- comparison ---------- */
.cmp-wrap { margin-top: 40px; overflow-x: auto; border-radius: 20px; border: 1px solid var(--border); background: var(--card); }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-size: 13px; font-weight: 600; color: var(--text-2); background: rgba(255,255,255,.015); }
.cmp thead th.prow { color: var(--text-1); }
.cmp tbody th { width: 19%; font-weight: 500; color: var(--text-3); font-size: 13.5px; }
.cmp td { color: var(--text-2); width: 20%; }
.cmp td.prow { color: var(--text-1); background: linear-gradient(180deg, rgba(255,143,180,.06), rgba(255,143,180,.02)); }
.cmp thead th.prow { background: rgba(255,143,180,.08); box-shadow: inset 0 2px 0 var(--accent); }
.cmp .yes { display: inline-flex; align-items: center; gap: 6px; }
.cmp .yes svg.i { width: 14px; height: 14px; color: var(--success); stroke-width: 2.6; }
.cmp small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-3); }
.cmp-note { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; text-align: left; font-size: 15.5px; font-weight: 500; }
.faq-item button svg.i { color: var(--text-3); transition: transform 200ms var(--ease-swift); }
.faq-item.open button svg.i { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms var(--ease-swift); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: 20px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.faq-a a { color: var(--text-1); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- final CTA ---------- */
.final { overflow: hidden; text-align: center; }
.final .glow { left: 50%; top: 0; transform: translate(-50%, -33%); }
.final .h2 { position: relative; max-width: 42rem; margin-inline: auto; }
.final .wl { position: relative; margin-top: 32px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); padding-block: 48px 32px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1023px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
.foot-brand .logo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.foot-brand .logo svg { width: 18px; height: 18px; }
.foot-brand p { margin-top: 6px; color: var(--text-3); }
.foot-brand .discord { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.foot-brand .discord:hover { color: var(--text-1); }
.foot-brand .discord svg { width: 18px; height: 18px; fill: currentColor; }
.foot-col h4 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col a { color: var(--text-2); transition: color 150ms; }
.foot-col a:hover { color: var(--text-1); }
.foot-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; font-size: 12px; color: var(--text-3); }
.foot-legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-legal a:hover { color: var(--text-1); }
.foot-legal .copy { font-variant-numeric: tabular-nums; }

/* ---------- build notes ---------- */
.notes { padding-block: 40px 56px; border-top: 1px solid var(--border); }
.notes h2 { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.notes .tw { overflow-x: auto; }
.notes table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 12.5px; }
.notes th, .notes td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.notes th { font-weight: 600; color: var(--text-3); }
.notes td { color: var(--text-2); }
.notes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-1); }

/* ---------- pricing page (pricing/clip-pricing-page.tsx) ---------- */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ph h1 { margin-top: 10px; font-size: 2.25rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .ph h1 { font-size: 3rem; } }
.ph .sub { margin-top: 12px; color: var(--text-2); font-size: 1.0625rem; max-width: 34rem; }
.period { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--fill-4); }
.period button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text-3); transition: color 150ms, background 150ms; }
.period button[aria-pressed="true"] { background: var(--fill-3); color: var(--text-1); }
.period button em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--accent-deep); }
.tiers { margin-top: 40px; display: grid; gap: 28px; max-width: 440px; margin-inline: auto; }
@media (min-width: 1024px) { .tiers { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; } }
.tier { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 24px 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(248,250,252,.04); }
.tier.feat { order: -1; border-color: var(--border-accent); background: radial-gradient(120% 55% at 50% 0%, rgba(255,143,180,.10), transparent 70%), var(--surface-2); box-shadow: var(--shadow-2); }
@media (min-width: 1024px) { .tier.feat { order: 0; margin-top: -16px; padding-bottom: 32px; } }
.tier .popular { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-accent); background: var(--popover); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tier .popular i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 1px rgba(255,143,180,.55); }
.tier h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.tier .persona { margin-top: 4px; min-height: 36px; font-size: 13.5px; line-height: 1.3; color: var(--text-3); }
.tier .price { margin-top: 4px; display: flex; align-items: baseline; gap: 6px; }
.tier .price b { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tier .price span { font-size: 13.5px; color: var(--text-3); }
.tier .billed { margin: 6px 0 18px; min-height: 18px; font-size: 13.5px; color: var(--text-3); }
.tier .notice { margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.dial { margin: 18px 0; padding: 12px 14px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--fill-4); }
.dial .dt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 12.5px; }
.dial .dt label { color: var(--text-2); font-weight: 500; }
.dial .dt span { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dial .dt span.on { color: var(--text-1); font-weight: 600; }
.dial .track { position: relative; height: 20px; display: flex; align-items: center; }
.dial .track::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--fill-3); }
.range-fill { position: absolute; left: 0; height: 4px; border-radius: 999px; background: var(--text-1); box-shadow: 0 0 10px 0 rgba(255,143,180,.55), 0 0 3px 0 rgba(255,143,180,.9); pointer-events: none; }
.range-fill[data-empty="true"] { background: var(--fill-2); box-shadow: none; }
.range { position: relative; -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; border: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 20px; background: transparent; border: none; }
.range::-moz-range-track { height: 20px; background: transparent; border: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: 2px; border: none; border-radius: 999px; background: #fafafa; box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 -1px 2px rgba(0,0,0,.18); transition: transform 100ms var(--ease-out-soft); }
.range::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 999px; background: #fafafa; }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:focus-visible { outline: none; border-radius: 999px; box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ring); }
.dial .nudge { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.ticks { margin: auto 0 0; padding: 18px 0 0; list-style: none; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); }
.ticks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; }
.ticks li i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-3); }
.tier.feat .ticks li i { background: color-mix(in srgb, var(--accent-deep) 16%, transparent); color: var(--accent-deep); }
.ticks li i svg.i { width: 11px; height: 11px; stroke-width: 3; }
.ticks b { font-weight: 600; }
.perks { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; list-style: none; padding: 0; font-size: 13px; color: var(--text-3); }
.perks li { display: inline-flex; align-items: center; gap: 6px; }
.perks svg.i { width: 14px; height: 14px; }
.packs { margin-top: 56px; }
.packs-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.packs-h h2 { font-size: 17px; font-weight: 600; }
.packs-h p { font-size: 13px; color: var(--text-3); }
.packs-g { display: grid; gap: 16px; max-width: 440px; margin-inline: auto; }
@media (min-width: 768px) { .packs-g { max-width: none; grid-template-columns: 1fr 1fr; } }
.pack { display: flex; flex-direction: column; min-width: 0; padding: 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--border); }
.pack .t { display: flex; align-items: center; gap: 10px; }
.pack .t i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--fill-3); }
.pack .t i svg.i { width: 15px; height: 15px; }
.pack .t h3 { font-size: 16px; font-weight: 600; }
.pack .amt { margin-top: 18px; font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pack .gets { margin: 6px 0 18px; font-size: 13.5px; color: var(--text-3); }
.pack .gets b { color: var(--accent-deep); font-weight: 600; }
.sel { position: relative; }
.sel select { width: 100%; height: 42px; -webkit-appearance: none; appearance: none; padding: 0 40px 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--fill-4); color: var(--text-1); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 150ms; }
.sel select:hover { border-color: var(--fill-2); }
.sel select:focus { border-color: var(--text-3); }
.sel select option { background: var(--surface-1); }
.sel svg.i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.pack .rate { min-height: 17px; margin: 8px 0 14px; font-size: 12.5px; color: var(--text-3); }
.fine { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ---------- SEO pages (tools/*, use/*, vs/*) ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); padding-top: 16px; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text-1); }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 40px 72px; }
@media (max-width: 899px) { .lp-hero { grid-template-columns: 1fr; gap: 32px; padding-block: 28px 44px; } }
.lp-hero h1 { margin-top: 12px; font-size: 2.5rem; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
@media (min-width: 1024px) { .lp-hero h1 { font-size: 3.5rem; } }
.lp-hero .lede { margin-top: 18px; }
.lp-hero .ctas { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.lp-hero .ctas small { font-size: 13px; color: var(--text-3); }
.lp-visual { position: relative; }
.lp-visual .prow-ui .tprev { border-radius: 24px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 90px -30px rgba(255,143,180,.25), inset 0 0 0 1px var(--border); max-width: 520px; margin-inline: auto; }
.benefits { display: grid; gap: 0; border-top: 1px solid var(--border); margin-top: 40px; }
.benefit { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 767px) { .benefit { grid-template-columns: 1fr; gap: 6px; } }
.benefit h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.benefit p { color: var(--text-2); font-size: 15px; line-height: 1.6; max-width: 40rem; }
.howto { margin-top: 40px; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 899px) { .howto { grid-template-columns: 1fr; } }
.howto li { padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); }
.howto li .num { margin-bottom: 14px; }
.howto h3 { font-size: 17px; font-weight: 600; }
.howto p { margin-top: 6px; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band .glow { left: 50%; top: 0; transform: translate(-50%, -40%); }
.cta-band .h2 { position: relative; }
.cta-band .lede { position: relative; margin: 14px auto 0; }
.cta-band .row { position: relative; margin-top: 28px; display: flex; justify-content: center; }
.related .prow-ui .tgrid { margin-top: 32px; }

/* ---------- tool cards (prow-ui.css + tool-cards.css, origin/feat/remove-superchat-drops) ---------- */
.prow-ui { --t1: #f8fafc; --t2: rgba(248,250,252,.70); --t3: rgba(248,250,252,.52); --t4: rgba(248,250,252,.25); --card: #1f1f1f; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.14); --ease: cubic-bezier(.22,1,.36,1); }
.prow-ui .tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1023px) { .prow-ui .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .prow-ui .tgrid { gap: 10px; } .prow-ui .tbody p { display: none; } }
.prow-ui .tcard { display: flex; flex-direction: column; text-align: left; min-width: 0; padding: 6px 6px 14px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.prow-ui .tcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--border-strong), 0 30px 60px -28px rgba(0,0,0,.75); }
.prow-ui .tprev { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: 16px; overflow: hidden; background: #0b0b0b; container-type: inline-size; isolation: isolate; }
.prow-ui .tprev::after { content: ""; position: absolute; inset: 0; z-index: 20; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.prow-ui .tprev > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 30%); transition: transform .8s var(--ease); }
.prow-ui .tcard:hover .tprev > video { transform: scale(1.04); }
.prow-ui .tbody { display: flex; flex-direction: column; gap: 3px; padding: 14px 8px 0; }
.prow-ui .tbody h3 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.prow-ui .tbody p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--t2); min-height: 2.8em; }
.prow-ui .tbody .btn-bloom { margin-top: 12px; width: 100%; height: 38px; }
.prow-ui .tbody .btn-bloom > span { font-size: 14px; pointer-events: none; }
.prow-ui .tbody .btn-bloom svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.prow-ui .tcard:hover .btn-bloom { background-image: linear-gradient(180deg, #fff 0%, #737373 100%); }
.prow-ui .shade-b { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), transparent 55%); pointer-events: none; }
.prow-ui .shade-t { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 45%); pointer-events: none; }
.prow-ui .chip-m { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 1.6cqi; height: 8cqi; padding: 0 3cqi; border-radius: 99px; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 3.8cqi; font-weight: 650; white-space: nowrap; }
.prow-ui .chip-m .spin { width: 3cqi; height: 3cqi; border-radius: 50%; border: .6cqi solid rgba(255,255,255,.3); border-top-color: #fff; animation: rot .8s linear infinite; }
.prow-ui .chip-m svg.i { width: 3.6cqi; height: 3.6cqi; }
.prow-ui .bold-cap { font-family: var(--font); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; color: #fff; -webkit-text-stroke: .9cqi #000; paint-order: stroke fill; text-shadow: 0 1cqi 0 #000; }
.prow-ui .tbadge { position: absolute; z-index: 21; left: 3cqi; bottom: 3cqi; height: 7cqi; padding: 0 2.6cqi; display: inline-flex; align-items: center; border-radius: 1.8cqi; background: #fff; color: #0a0a0a; font-size: 3.6cqi; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- AI editor (panels/ai.tsx, prompt-bar.tsx, ai-ideas.tsx, timeline-toolbar.tsx on feat/real-editor) ---------- */
.ed-rail .ai.on i { background: var(--fill-2); box-shadow: inset 0 0 0 1px rgba(255,143,180,.35), 0 0 24px -6px var(--accent); }
.ed-ph .ai-h { display: flex; align-items: center; gap: 8px; }
.ed-ph .ai-h svg.i { width: 15px; height: 15px; color: var(--accent); }
.ai-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 16px 4px; overflow: hidden; font-size: 14px; }
.ai-intro { color: var(--text-2); }
.ai-user { align-self: flex-end; max-width: 86%; padding: 9px 13px; border-radius: 18px 18px 6px 18px; background: var(--fill-3); color: var(--text-1); transition: opacity .35s var(--ease-out-soft), transform .45s var(--ease-swift); }
.ai-user.pre { opacity: 0; transform: translateY(8px); }
.ai-busy { color: var(--text-3); font-size: 13.5px; }
.shimmer-text { background: linear-gradient(90deg, var(--text-3) 0%, var(--text-1) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmerText 1.4s linear infinite; }
@keyframes shimmerText { to { background-position: -200% 0; } }
.ai-reply { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ai-reply ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-reply li, .ai-reply .ai-acts, .ai-reply .ai-cp { transition: opacity .35s var(--ease-out-soft), transform .45s var(--ease-swift); }
.ai-reply li { display: flex; align-items: flex-start; gap: 8px; }
.ai-reply li svg.i { width: 13px; height: 13px; margin-top: 4px; color: var(--success); stroke-width: 2.6; }
.ai-reply .pre { opacity: 0; transform: translateY(6px); }
.ai-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-ghost { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--fill-3); font-size: 12.5px; font-weight: 500; color: var(--text-1); }
.ed-ghost svg.i { width: 13px; height: 13px; }
.ai-cp { font-size: 11.5px; color: var(--text-3); }
.ai-dock { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.ai-ideas { display: flex; gap: 6px; overflow: hidden; }
.ai-ideas span { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--fill-4); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.ai-composer { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 8px 14px; border-radius: 22px; border: 1px solid transparent; background: var(--fill-3); transition: background .2s, border-color .2s; }
.ai-composer.focus { background: var(--fill-2); border-color: var(--border-strong); }
.ai-input { position: relative; min-height: 36px; padding: 7px 0; font-size: 14.5px; line-height: 1.45; }
.ai-input .ph { position: absolute; left: 0; top: 7px; color: var(--text-3); }
.ai-input .typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--text-1); opacity: 0; }
.ai-composer.focus .ai-input .typed::after { opacity: 1; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ai-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ai-model { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--fill-3); font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.ai-model svg.i { width: 12px; height: 12px; }
.ai-send.btn-bloom { width: 36px; height: 36px; }
.ai-send.btn-bloom > span { padding: 0; }
.ai-send.btn-bloom svg.i { width: 15px; height: 15px; }
.ai-send.press { transform: scale(.9); transition-duration: 60ms; }
.ed-video video { transition: transform .9s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 40%; }
.ed-video.zoom video { transform: scale(1.3); }
.ed-cap.beast { font-size: 24.6px; text-shadow: 0 0 .08em #000, 0 0 .08em #000, 0 .1em 0 #000, 0 0 .02em #000; }
.ed-cap.beast .w.on { color: #ff3b3b; transform: scale(1.12); }
.ed-tbar { height: 40px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 10px; }
.ed-tbar .tb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.ed-tbar .tb.ico { padding: 0 6px; }
.ed-tbar .tb.off { opacity: .4; }
.ed-tbar .tb svg.i { width: 14px; height: 14px; }
.ed-tbar .sep { width: 1px; height: 16px; margin: 0 6px; background: var(--border); }
.ed-tbar .grow { flex: 1; }
.ed-aipill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; margin-right: 4px; border-radius: 999px; border: 1px solid var(--border-accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 12px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.ed-aipill svg.i { width: 12px; height: 12px; color: var(--accent); }
.ed-tbar .zoombar { position: relative; width: 70px; height: 4px; border-radius: 99px; background: var(--fill-3); }
.ed-tbar .zoombar i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 99px; background: var(--text-2); }
.ed-aichange { position: absolute; top: -3px; bottom: -3px; z-index: 4; border-radius: 11px; box-shadow: inset 0 0 0 2px var(--accent), 0 0 18px -2px rgba(255,143,180,.55); transition: opacity .4s var(--ease-out-soft); }
.ed-aichange b { position: absolute; top: -9px; left: 8px; padding: 0 5px; border-radius: 5px; background: var(--accent); color: #2a0512; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; line-height: 15px; }
.ed-aichange.pre { opacity: 0; }

/* ---------- community (sections/community.tsx) ---------- */
.community { max-width: 42rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 24px; text-align: center; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(248,250,252,.04); }
@media (min-width: 640px) { .community { padding-inline: 40px; } }
.community .cm-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-3); color: var(--text-2); }
.community .cm-ico svg { width: 24px; height: 24px; fill: currentColor; }
.community .lede { margin-inline: auto; }
.community .cm-btn { margin-top: 8px; height: 44px; padding: 0 20px; }
@media (min-width: 1024px) { .community .cm-btn { height: 36px; } }
.community .cm-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ed.phone { height: 524px; }

/* ---- tool-cards.css previews (verbatim) ---- */
@property --tcn { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --tcx { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

/* ---------- Previews: every loop opens on its payoff ---------- */
.prow-ui .tprev .vx-tag, .prow-ui .tprev .vx-glow, .prow-ui .tprev .vx-score, .prow-ui .tprev .vx-num, .prow-ui .tprev .cx, .prow-ui .tprev .cx-lbl.b,
.prow-ui .tprev .rx-frame, .prow-ui .tprev .rx-frame video, .prow-ui .tprev .rx-cap, .prow-ui .tprev .rx-chip .to,
.prow-ui .tprev .hx-reel, .prow-ui .tprev .hx-best, .prow-ui .tprev .tx-find, .prow-ui .tprev .tx-corners, .prow-ui .tprev .tx-flash, .prow-ui .tprev .tx-dim,
.prow-ui .tprev .br-ins, .prow-ui .tprev .br-tl .b, .prow-ui .tprev .br-tag, .prow-ui .tprev .au-noisy, .prow-ui .tprev .au-clean, .prow-ui .tprev .au-tag,
.prow-ui .tprev .up, .prow-ui .tprev .gx-panel, .prow-ui .tprev .gx-num, .prow-ui .tprev .px-row > i.cut, .prow-ui .tprev .px-tag,
.prow-ui .tprev .tx2-bg, .prow-ui .tprev .tx2-sub, .prow-ui .tprev .tx2-title, .prow-ui .tprev .tx2-arrow, .prow-ui .tprev .tx2-v { animation-delay: -2.8s; }
/* staggered pieces keep their stagger, shifted onto the payoff */
.prow-ui .tprev .gx-bar i { animation-delay: var(--d); }
.prow-ui .tprev .cr-s { animation-delay: calc(var(--k) * .18s - 2.8s); }

/* 1. Virality predictor: one big score lands */
.prow-ui .vx-tag { left: 4cqi; top: 4cqi; animation: tc-vxtag 6s var(--ease) infinite; }
@keyframes tc-vxtag { 0%, 24% { opacity: 1; } 28%, 100% { opacity: 0; } }
.prow-ui .vx-glow { position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(140,217,140,0); animation: tc-vxglow 6s var(--ease) infinite; }
@keyframes tc-vxglow { 0%, 40% { box-shadow: inset 0 0 0 0 rgba(140,217,140,0); } 46% { box-shadow: inset 0 0 0 2.2cqi rgba(140,217,140,.85), inset 0 0 18cqi rgba(140,217,140,.45); } 70%, 100% { box-shadow: inset 0 0 0 1cqi rgba(140,217,140,.0), inset 0 0 14cqi rgba(140,217,140,.0); } }
.prow-ui .vx-score { position: absolute; z-index: 5; left: 0; right: 0; bottom: 6cqi; display: flex; flex-direction: column; align-items: center; gap: 2cqi; animation: tc-vxscore 6s cubic-bezier(.2,1.4,.4,1) infinite; }
@keyframes tc-vxscore { 0%, 26% { opacity: 0; transform: translateY(8cqi) scale(.8); } 32%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(3cqi); } }
.prow-ui .vx-num { font-size: 34cqi; line-height: .85; letter-spacing: -.05em; counter-reset: n var(--tcn); animation: tc-vxnum 6s cubic-bezier(.2,.8,.2,1) infinite; text-shadow: 0 1cqi 0 #000, 0 0 10cqi rgba(140,217,140,.75); }
.prow-ui .vx-num::after { content: counter(n); }
@keyframes tc-vxnum { 0%, 28% { --tcn: 0; } 44%, 100% { --tcn: 99; } }
.prow-ui .vx-pill { padding: 1.4cqi 3.6cqi; border-radius: 99px; background: #8cd98c; color: #0b2a0f; font-size: 4.2cqi; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 6cqi rgba(140,217,140,.6); }

/* 2. AI captions: wipe from the raw clip to the captioned one */
.prow-ui .cx { position: absolute; inset: 0; animation: tc-wipe 6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes tc-wipe { 0%, 8% { --tcx: 0%; } 40%, 90% { --tcx: 100%; } 100% { --tcx: 0%; } }
.prow-ui .cx-before { position: absolute; top: 0; bottom: 0; right: 0; left: var(--tcx); z-index: 3; backdrop-filter: grayscale(1) brightness(.7) contrast(.9); -webkit-backdrop-filter: grayscale(1) brightness(.7) contrast(.9); }
.prow-ui .cx-line { position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--tcx); width: .8cqi; margin-left: -.4cqi; background: #fff; box-shadow: 0 0 4cqi rgba(255,255,255,.8); }
.prow-ui .cx-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8cqi; height: 8cqi; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 2cqi 6cqi rgba(0,0,0,.4); }
.prow-ui .cx-caps { position: absolute; z-index: 4; inset: 0; clip-path: inset(0 calc(100% - var(--tcx)) 0 0); }
.prow-ui .cx-caps .kc { position: absolute; left: 6%; right: 6%; top: 60%; text-align: center; font-size: 11.5cqi; line-height: 1.02; }
.prow-ui .kc span { display: inline-block; margin: 0 .8cqi; opacity: 0; transform: scale(.4) translateY(4cqi); transition: opacity .1s, transform .3s cubic-bezier(.2,1.7,.4,1), color .1s; }
.prow-ui .kc span.in { opacity: 1; transform: none; }
.prow-ui .kc span.on { color: #ffe14d; transform: scale(1.14) rotate(-2deg); }
.prow-ui .cx-lbl { top: 4cqi; z-index: 6; transition: opacity .2s; }
.prow-ui .cx-lbl.b { right: 4cqi; animation: tc-cxb 6s linear infinite; }
@keyframes tc-cxb { 0%, 30% { opacity: 1; } 38%, 92% { opacity: 0; } 100% { opacity: 1; } }
.prow-ui .cx-lbl.a { left: 4cqi; background: #fff; color: #0a0a0a; }

/* 3. Reframe: the wide shot morphs into a vertical clip */
.prow-ui .rx-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(5cqi) brightness(.45) saturate(1.3); }
.prow-ui .rx-frame { position: absolute; z-index: 3; left: 50%; top: 50%; width: 100%; height: 56.25%; transform: translate(-50%, -50%); overflow: hidden; border-radius: 0; box-shadow: 0 0 0 .6cqi rgba(255,255,255,0); animation: tc-rxframe 6s cubic-bezier(.7,0,.25,1) infinite; }
@keyframes tc-rxframe {
  0%, 18% { width: 100%; height: 56.25%; border-radius: 0; box-shadow: 0 0 0 .6cqi rgba(255,255,255,0); }
  24% { box-shadow: 0 0 0 .6cqi rgba(255,255,255,1); }
  42%, 88% { width: 56.25%; height: 100%; border-radius: 3cqi; box-shadow: 0 0 0 .6cqi rgba(255,255,255,.9), 0 4cqi 12cqi rgba(0,0,0,.6); }
  100% { width: 100%; height: 56.25%; border-radius: 0; box-shadow: 0 0 0 .6cqi rgba(255,255,255,0); } }
.prow-ui .rx-frame video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; animation: tc-rxtrack 6s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes tc-rxtrack { 0%, 42% { object-position: 50% 50%; } 55%, 66% { object-position: 34% 50%; } 78%, 88% { object-position: 66% 50%; } 100% { object-position: 50% 50%; } }
.prow-ui .rx-cap { position: absolute; left: 4%; right: 4%; bottom: 14%; text-align: center; font-size: 9cqi; line-height: 1; animation: tc-rxcap 6s var(--ease) infinite; }
@keyframes tc-rxcap { 0%, 44% { opacity: 0; transform: scale(.6); } 50%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.prow-ui .rx-chip { left: 50%; top: 4cqi; transform: translateX(-50%); }
.prow-ui .rx-chip b { font-weight: 800; }
.prow-ui .rx-chip .to { animation: tc-rxto 6s steps(1) infinite; }
@keyframes tc-rxto { 0%, 30% { opacity: .45; } 31%, 100% { opacity: 1; } }

/* 4. Hooks & titles: hooks spin like a slot machine and land on the best one */
.prow-ui .hx-box { position: absolute; z-index: 4; left: 6%; right: 6%; top: 6%; height: 21cqi; border-radius: 4cqi; background: #fff; overflow: hidden; box-shadow: 0 3cqi 10cqi rgba(0,0,0,.45); }
.prow-ui .hx-reel { display: flex; flex-direction: column; animation: tc-hxspin 6s cubic-bezier(.2,.9,.25,1.12) infinite; }
.prow-ui .hx-reel span { flex: none; height: 21cqi; display: grid; place-items: center; padding: 0 4cqi; text-align: center; color: #0a0a0a; font-weight: 850; font-size: 6.6cqi; line-height: 1.08; letter-spacing: -.02em; }
@keyframes tc-hxspin { 0%, 6% { transform: translateY(0); filter: none; } 12% { filter: blur(.8cqi); } 30% { transform: translateY(-105cqi); filter: blur(.8cqi); } 36%, 90% { transform: translateY(-105cqi); filter: none; } 100% { transform: translateY(0); filter: none; } }
.prow-ui .hx-best { position: absolute; z-index: 5; left: 50%; top: calc(6% + 23cqi); display: inline-flex; align-items: center; gap: 1.6cqi; padding: 1.4cqi 3.4cqi; border-radius: 99px; background: #8cd98c; color: #0b2a0f; font-size: 4cqi; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 6cqi rgba(140,217,140,.6); animation: tc-hxbest 6s cubic-bezier(.2,1.6,.4,1) infinite; }
@keyframes tc-hxbest { 0%, 35% { opacity: 0; transform: translateX(-50%) scale(.4); } 41%, 90% { opacity: 1; transform: translateX(-50%) scale(1); } 96%, 100% { opacity: 0; transform: translateX(-50%) scale(1); } }

/* 5. Translate & dub: the same line, in language after language */
.prow-ui .dx-lang { left: 50%; top: 4cqi; transform: translateX(-50%); }
.prow-ui .dx-lang svg { width: 4cqi; height: 4cqi; }
.prow-ui .dx-word { position: absolute; z-index: 5; left: 5%; right: 5%; bottom: 22%; text-align: center; font-size: 10.5cqi; line-height: 1.05; }
.prow-ui .dx-word.flip, .prow-ui .dx-lang .nm.flip { display: inline-block; animation: tc-dxflip .5s cubic-bezier(.2,1.4,.4,1); }
.prow-ui .dx-word.flip { display: block; }
@keyframes tc-dxflip { 0% { opacity: 0; transform: translateY(5cqi) scale(.85); } 100% { opacity: 1; transform: none; } }
.prow-ui .dx-wave { position: absolute; z-index: 5; left: 50%; bottom: 7%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2cqi; height: 9cqi; }
.prow-ui .dx-wave i { width: 1.4cqi; height: 30%; border-radius: 99px; background: #fff; animation: tc-wave .9s ease-in-out infinite; animation-delay: calc(var(--k) * -0.11s); }
@keyframes tc-wave { 0%, 100% { height: 22%; } 50% { height: 100%; } }

/* 6. Thumbnail maker: frame grabbed, then (v2 below) the thumbnail is built and versions fan out */
.prow-ui .tx-find { left: 4cqi; top: 4cqi; animation: tc-txfind 6s linear infinite; }
@keyframes tc-txfind { 0%, 22% { opacity: 1; } 24%, 100% { opacity: 0; } }
.prow-ui .tx-corners { position: absolute; z-index: 4; inset: 14% 12%; animation: tc-txfind 6s linear infinite; background:
  linear-gradient(#fff,#fff) top left / 7cqi .8cqi no-repeat, linear-gradient(#fff,#fff) top left / .8cqi 7cqi no-repeat,
  linear-gradient(#fff,#fff) top right / 7cqi .8cqi no-repeat, linear-gradient(#fff,#fff) top right / .8cqi 7cqi no-repeat,
  linear-gradient(#fff,#fff) bottom left / 7cqi .8cqi no-repeat, linear-gradient(#fff,#fff) bottom left / .8cqi 7cqi no-repeat,
  linear-gradient(#fff,#fff) bottom right / 7cqi .8cqi no-repeat, linear-gradient(#fff,#fff) bottom right / .8cqi 7cqi no-repeat; }
.prow-ui .tx-flash { position: absolute; inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; animation: tc-txflash 6s linear infinite; }
@keyframes tc-txflash { 0%, 22% { opacity: 0; } 23% { opacity: .9; } 30%, 100% { opacity: 0; } }
.prow-ui .tx-dim { position: absolute; inset: 0; z-index: 3; background: rgba(8,8,8,.72); opacity: 0; animation: tc-txdim 6s var(--ease) infinite; }
@keyframes tc-txdim { 0%, 23% { opacity: 0; } 28%, 92% { opacity: 1; } 99%, 100% { opacity: 0; } }
.prow-ui .tx-count { left: 50%; bottom: 5cqi; transform: translateX(-50%); z-index: 7; animation: tc-txcount 6s var(--ease) infinite; animation-delay: -2.8s; }
@keyframes tc-txcount { 0%, 64% { opacity: 0; } 70%, 92% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* ----- new tool cards ----- */
/* AI B-roll: the cut-away arrives on the right word, the voice keeps going */
.prow-ui .br-ins { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 100% 0 0); animation: tc-brins 6s cubic-bezier(.7,0,.3,1) infinite; }
.prow-ui .br-ins video { width: 100%; height: 100%; object-fit: cover; }
@keyframes tc-brins { 0%, 20% { clip-path: inset(0 100% 0 0); } 30%, 78% { clip-path: inset(0 0 0 0); } 88%, 100% { clip-path: inset(0 0 0 100%); } }
.prow-ui .br-tag { left: 4cqi; top: 4cqi; z-index: 5; animation: tc-brtag 6s var(--ease) infinite; }
@keyframes tc-brtag { 0%, 26% { opacity: 0; transform: translateY(-2cqi); } 32%, 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; } }
.prow-ui .br-cap { position: absolute; z-index: 5; left: 6%; right: 6%; bottom: 20%; text-align: center; font-size: 8.4cqi; line-height: 1.05; }
.prow-ui .br-cap em { font-style: normal; color: #ffe14d; }
.prow-ui .br-tl { position: absolute; z-index: 5; left: 6%; right: 6%; bottom: 6%; height: 7cqi; display: grid; grid-template-rows: 1fr 1fr; gap: .8cqi; }
.prow-ui .br-tl i { display: block; border-radius: 1cqi; }
.prow-ui .br-tl .a { background: rgba(255,255,255,.35); }
.prow-ui .br-tl .b { margin-left: 38%; width: 36%; background: #ff8fb4; box-shadow: 0 0 4cqi rgba(255,143,180,.7); transform-origin: left; animation: tc-brb 6s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes tc-brb { 0%, 20% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }

/* Clean audio: the noise collapses, the voice stays */
.prow-ui .au { position: absolute; z-index: 5; left: 6%; right: 6%; bottom: 8%; height: 22cqi; }
.prow-ui .au-noisy, .prow-ui .au-clean { position: absolute; inset: 0; display: flex; align-items: center; gap: .9cqi; }
.prow-ui .au-noisy i, .prow-ui .au-clean i { flex: 1; border-radius: 99px; }
.prow-ui .au-noisy i { background: rgba(255,92,92,.9); height: var(--h); animation: tc-aujit .5s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -0.07s); }
@keyframes tc-aujit { to { height: calc(var(--h) * .55); } }
.prow-ui .au-noisy { animation: tc-aunoisy 6s var(--ease) infinite; }
@keyframes tc-aunoisy { 0%, 30% { opacity: 1; transform: none; } 38%, 92% { opacity: 0; transform: scaleY(.2); } 100% { opacity: 1; } }
.prow-ui .au-clean i { background: #fff; height: var(--h); box-shadow: 0 0 2cqi rgba(255,255,255,.5); }
.prow-ui .au-clean { animation: tc-auclean 6s var(--ease) infinite; }
@keyframes tc-auclean { 0%, 32% { opacity: 0; transform: scaleY(.3); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.prow-ui .au-tag { left: 50%; top: 4cqi; transform: translateX(-50%); z-index: 6; animation: tc-autag 6s var(--ease) infinite; }
.prow-ui .au-tag .on { width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: #8cd98c; box-shadow: 0 0 3cqi #8cd98c; }
@keyframes tc-autag { 0%, 34% { opacity: 0; } 40%, 92% { opacity: 1; } 100% { opacity: 0; } }
.prow-ui .au-vid { filter: saturate(1.1); }

/* Video upscaler: a wipe from blocky 480p to crisp 4K */
.prow-ui .up { position: absolute; inset: 0; animation: tc-wipe 6s cubic-bezier(.65,0,.35,1) infinite; }
.prow-ui .up-low { position: absolute; top: 0; bottom: 0; right: 0; left: var(--tcx); z-index: 3; overflow: hidden; }
.prow-ui .up-low video { position: absolute; top: 0; right: 0; height: 100%; width: 100cqi; min-width: 0; object-fit: cover; object-position: 50% 50%; }
.prow-ui .up .cx-line { z-index: 5; }
.prow-ui .up-lbl { top: 4cqi; z-index: 6; }
.prow-ui .up-lbl.l { right: 4cqi; }
.prow-ui .up-lbl.r { left: 4cqi; background: #fff; color: #0a0a0a; }

/* Animated graphics: what you say becomes a chart */
.prow-ui .gx-panel { position: absolute; z-index: 5; left: 5%; top: 8%; width: 50%; padding: 4cqi; border-radius: 4cqi; background: rgba(12,12,12,.66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; animation: tc-gxpanel 6s cubic-bezier(.2,1.3,.4,1) infinite; }
@keyframes tc-gxpanel { 0%, 16% { opacity: 0; transform: translateY(4cqi) scale(.92); } 24%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.prow-ui .gx-num { display: block; font-size: 11cqi; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #8cd98c; counter-reset: n var(--tcn); animation: tc-gxnum 6s cubic-bezier(.2,.8,.2,1) infinite; text-shadow: 0 0 5cqi rgba(140,217,140,.6); }
.prow-ui .gx-num::before { content: "+" counter(n) "%"; }
@keyframes tc-gxnum { 0%, 22% { --tcn: 0; } 48%, 100% { --tcn: 212; } }
.prow-ui .gx-lbl { display: block; font-size: 3.6cqi; font-weight: 650; opacity: .75; margin: .6cqi 0 3cqi; }
.prow-ui .gx-bars { display: flex; align-items: flex-end; gap: 2.4cqi; height: 20cqi; }
.prow-ui .gx-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1cqi; height: 100%; justify-content: flex-end; font-size: 3cqi; font-weight: 700; opacity: .85; }
.prow-ui .gx-bar i { display: block; width: 100%; height: var(--h); border-radius: 1.2cqi 1.2cqi .4cqi .4cqi; background: rgba(255,255,255,.85); transform-origin: bottom; animation: tc-gxbar 6s cubic-bezier(.2,1.2,.4,1) infinite; }
.prow-ui .gx-bar:last-child i { background: #8cd98c; box-shadow: 0 0 4cqi rgba(140,217,140,.6); }
@keyframes tc-gxbar { 0%, 24% { transform: scaleY(0); } 42%, 100% { transform: scaleY(1); } }

/* Remove pauses: the ums and dead air drop out and the take tightens */
.prow-ui .px { position: absolute; z-index: 5; left: 5%; right: 5%; bottom: 6%; padding: 3cqi; border-radius: 3.6cqi; background: rgba(12,12,12,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.prow-ui .px-row { display: flex; align-items: center; gap: .8cqi; height: 9cqi; }
.prow-ui .px-row > i { height: 100%; border-radius: 1cqi; background: rgba(255,255,255,.85); flex: var(--g) 1 0; }
.prow-ui .px-row > i.cut { background: repeating-linear-gradient(135deg, rgba(255,66,113,.85) 0 1.2cqi, rgba(255,66,113,.45) 1.2cqi 2.4cqi); position: relative; animation: tc-pxcut 6s cubic-bezier(.7,0,.3,1) infinite; }
.prow-ui .px-row > i.cut::after { content: attr(data-w); position: absolute; left: 50%; top: -5.4cqi; transform: translateX(-50%); font: 800 3.2cqi var(--font); color: #ff7b98; font-style: normal; white-space: nowrap; }
@keyframes tc-pxcut { 0%, 24% { flex-grow: var(--g); opacity: 1; margin: 0; } 40%, 92% { flex-grow: 0; flex-basis: 0; opacity: 0; margin: 0 -.4cqi; } 100% { flex-grow: var(--g); opacity: 1; } }
.prow-ui .px-tag { left: 50%; top: 4cqi; transform: translateX(-50%); z-index: 6; animation: tc-autag 6s var(--ease) infinite; }
.prow-ui .px-tag b { color: #8cd98c; }

/* Clip to carousel: the clip becomes swipeable slides */
.prow-ui .cr-bg { filter: blur(4cqi) brightness(.45) saturate(1.2); transform: scale(1.2); }
.prow-ui .tcard:hover .tprev > video.cr-bg { transform: scale(1.24); }
.prow-ui .cr { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; perspective: 200cqi; }
.prow-ui .cr-s { position: absolute; width: 56%; aspect-ratio: 4/5; border-radius: 3cqi; overflow: hidden; box-shadow: 0 4cqi 12cqi rgba(0,0,0,.55); display: flex; flex-direction: column; justify-content: flex-end; padding: 4cqi; color: #0a0a0a; font-weight: 850; letter-spacing: -.02em; line-height: 1.05; animation: tc-crs 6s cubic-bezier(.2,1.1,.3,1) infinite; }
.prow-ui .cr-s.v { color: #fff; justify-content: flex-end; background: #000; }
.prow-ui .cr-s.v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.prow-ui .cr-s.v b { position: relative; font-size: 7cqi; text-shadow: 0 .6cqi 2cqi rgba(0,0,0,.6); }
.prow-ui .cr-s .n { font-size: 3.2cqi; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 2cqi; position: relative; }
.prow-ui .cr-s b { font-size: 6.4cqi; }
.prow-ui .cr-s.p1 { background: #ffe14d; }
.prow-ui .cr-s.p2 { background: #ff8fb4; }
@keyframes tc-crs { 0%, 14% { opacity: 0; transform: translateX(60%) rotate(8deg); } 26%, 90% { opacity: 1; transform: translateX(var(--sx)) rotate(var(--r)) scale(var(--s)); } 98%, 100% { opacity: 0; } }
.prow-ui .cr-dots { position: absolute; z-index: 6; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; gap: 1.4cqi; }
.prow-ui .cr-dots i { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: rgba(255,255,255,.4); }
.prow-ui .cr-dots i:first-child { background: #fff; }

/* Thumbnail maker v2: subject cut out over a bold colour, white outline, title slam */
.prow-ui .tx2 { position: absolute; z-index: 6; left: 5%; right: 5%; top: 50%; aspect-ratio: 16/9; transform: translateY(-50%); }
.prow-ui .tx2-v { position: absolute; inset: 0; border-radius: 2.6cqi; overflow: hidden; box-shadow: 0 4cqi 12cqi rgba(0,0,0,.6), 0 0 0 .3cqi rgba(255,255,255,.25); animation: tc-tx2v 6s cubic-bezier(.2,1.2,.4,1) infinite; }
.prow-ui .tx2-v.b { animation-name: tc-tx2b; }
.prow-ui .tx2-v.c { animation-name: tc-tx2c; }
@keyframes tc-tx2v { 0%, 24% { opacity: 0; transform: scale(1.25); } 30%, 92% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes tc-tx2b { 0%, 54% { opacity: 0; transform: none; } 64%, 92% { opacity: 1; transform: translate(-15%, -22%) rotate(-8deg) scale(.74); } 99%, 100% { opacity: 0; } }
@keyframes tc-tx2c { 0%, 58% { opacity: 0; transform: none; } 68%, 92% { opacity: 1; transform: translate(15%, -24%) rotate(8deg) scale(.74); } 99%, 100% { opacity: 0; } }
.prow-ui .tx2-bg { position: absolute; inset: 0; background: radial-gradient(70% 90% at 70% 60%, #ffd23f 0%, #ff8a00 55%, #e2361f 100%); }
.prow-ui .tx2-v.b .tx2-bg { background: radial-gradient(70% 90% at 70% 60%, #6ee7ff 0%, #2f6bff 60%, #1b1464 100%); }
.prow-ui .tx2-v.c .tx2-bg { background: radial-gradient(70% 90% at 70% 60%, #b8ff6a 0%, #19b36b 60%, #064a3a 100%); }
.prow-ui .tx2-bg::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 72% 58%, rgba(255,255,255,.14) 0 6deg, transparent 6deg 18deg); }
.prow-ui .tx2-sub { position: absolute; right: -4%; bottom: -6%; height: 118%; filter: drop-shadow(.7cqi 0 0 #fff) drop-shadow(-.7cqi 0 0 #fff) drop-shadow(0 .7cqi 0 #fff) drop-shadow(0 -.7cqi 0 #fff) drop-shadow(0 2cqi 3cqi rgba(0,0,0,.45)); }
.prow-ui .tx2-v.a .tx2-sub { animation: tc-tx2sub 6s cubic-bezier(.2,1.5,.4,1) infinite; animation-delay: -2.8s; }
@keyframes tc-tx2sub { 0%, 28% { transform: translateY(20%) scale(.8); } 36%, 100% { transform: none; } }
.prow-ui .tx2-title { position: absolute; left: 4%; top: 12%; width: 54%; font-size: 9.4cqi; line-height: .88; transform: rotate(-4deg); }
.prow-ui .tx2-title em { display: block; font-style: normal; color: #ffe14d; font-size: 1.22em; }
.prow-ui .tx2-v.a .tx2-title { animation: tc-tx2t 6s cubic-bezier(.2,1.6,.4,1) infinite; animation-delay: -2.8s; }
@keyframes tc-tx2t { 0%, 36% { opacity: 0; transform: rotate(-4deg) scale(2); } 42%, 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
.prow-ui .tx2-arrow { position: absolute; left: 36%; top: 52%; width: 26%; overflow: visible; filter: drop-shadow(0 .6cqi 0 #000); }
.prow-ui .tx2-v.a .tx2-arrow { animation: tc-tx2a 6s var(--ease) infinite; animation-delay: -2.8s; }
@keyframes tc-tx2a { 0%, 44% { opacity: 0; transform: translate(-3cqi, -3cqi) scale(.6); } 50%, 100% { opacity: 1; transform: none; } }
.prow-ui .tx2-dur { position: absolute; right: 2cqi; bottom: 2cqi; z-index: 2; padding: .4cqi 1.2cqi; border-radius: 1cqi; background: rgba(0,0,0,.82); color: #fff; font-size: 3.2cqi; font-weight: 700; }

/* Reduced motion: hold every preview on its payoff frame instead of letting the loops collapse to
   their base styles. globals.css (@layer base) and prow-ui.css shorten every animation to ~0ms with
   !important; an !important in an earlier layer beats both, so this sits in Tailwind's first layer. */
@layer theme {
  @media (prefers-reduced-motion: reduce) {
    .prow-ui .tprev *, .prow-ui .tprev *::before, .prow-ui .tprev *::after {
      animation-duration: 6s !important; animation-iteration-count: infinite !important; animation-play-state: paused !important;
    }
    .prow-ui .tprev .dx-wave i, .prow-ui .tprev .au-noisy i, .prow-ui .tprev .chip-m .spin { animation: none !important; }
  }
}

/* ---------- 2026-10-11 pass ---------- */
/* AI editor: the punch-in lives only on the edited section and centres on the speaker's face */
.ed-video video { transition: transform .32s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 44%; }
.ed-cap { top: 69%; }
.ed-aichange { transition: opacity .4s var(--ease-out-soft), box-shadow .25s, background-color .25s; }
.ed-aichange.live { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 2px var(--accent), 0 0 26px 0 rgba(255,143,180,.75); }

/* Thumbnail maker: the arrow is drawn in thumbnail space and lands on the bug */
.prow-ui .tx2-arrow { left: 0; top: 0; width: 100%; height: 100%; filter: drop-shadow(0 .5cqi 0 #000); }
.prow-ui .tx2-v.a .tx2-arrow { animation: none; }
.prow-ui .tx2-arrow .sh { stroke-dasharray: 1; stroke-dashoffset: 0; }
.prow-ui .tx2-arrow .hd { transform-box: fill-box; transform-origin: 60% 40%; }
.prow-ui .tx2-v.a .tx2-arrow .sh { animation: tc-tx2draw 6s var(--ease) infinite; animation-delay: -2.8s; }
.prow-ui .tx2-v.a .tx2-arrow .hd { animation: tc-tx2head 6s cubic-bezier(.2,1.6,.4,1) infinite; animation-delay: -2.8s; }
@keyframes tc-tx2draw { 0%, 43.9% { stroke-dashoffset: 1; opacity: 0; } 44% { stroke-dashoffset: 1; opacity: 1; } 51%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes tc-tx2head { 0%, 50% { opacity: 0; transform: scale(.3); } 55%, 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .prow-ui .tx2-v.a .tx2-arrow .sh, .prow-ui .tx2-v.a .tx2-arrow .hd { animation: none; } }

/* Proof: receipts ring the plaques instead of stacking under them */
@media (min-width: 1024px) {
  .pwall { padding-bottom: 210px; }
  .plaques { max-width: 720px; }
  .plaques .g { z-index: 30; }
  .plaques .s { z-index: 31; }
}
@media (min-width: 1024px) and (max-width: 1151px) { #track-record > .wrap { zoom: .8; } }
@media (min-width: 1152px) and (max-width: 1279px) { #track-record > .wrap { zoom: .9; } }

/* ==== v12 tool previews: the clip stays vertical (as a Short) and the tool's own UI sits around it ====
   Every loop is 6s and, like the v11 cards, opens on its payoff (delay -2.8s); reduced motion holds that frame. */
.prow-ui .tprev.tv { background: #0b0b0b; }
.prow-ui .tv-bg { position: absolute; inset: -8%; z-index: 0; background-size: cover; background-position: center; filter: blur(7cqi) brightness(.3) saturate(1.3); }
.prow-ui .tv-ph { position: absolute; z-index: 2; top: 8cqi; height: 84cqi; aspect-ratio: 9 / 16; border-radius: 4.2cqi; overflow: hidden; background: #000; box-shadow: 0 0 0 .4cqi rgba(255,255,255,.16), 0 4cqi 12cqi -2cqi rgba(0,0,0,.85); transition: transform .5s var(--ease); }
.prow-ui .tv-ph.l { left: 5cqi; }
.prow-ui .tv-ph.r { right: 4cqi; }
.prow-ui .tv-ph.c { left: 50%; translate: -50% 0; }
.prow-ui .tcard:hover .tv-ph { transform: translateY(-1cqi); }
.prow-ui .tv-ph > video, .prow-ui .tv-ins video, .prow-ui .tv-low video, .prow-ui .tv-src .f video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prow-ui .tv-side { position: absolute; z-index: 3; left: 57cqi; right: 4cqi; top: 8cqi; bottom: 8cqi; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqi; color: #fff; font-size: 3.5cqi; }
.prow-ui .tv-k { font-size: 2.9cqi; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.prow-ui .tv-more { font-size: 3cqi; font-weight: 600; color: rgba(255,255,255,.5); }
.prow-ui .tv-side ul, .prow-ui .tv-side ol { list-style: none; margin: 0; padding: 0; display: grid; }
.prow-ui .tv .chip-m svg.i { stroke: currentColor; fill: none; stroke-width: 2.6; }

/* Virality: the posted clip gets scanned, then the score and its four signals land */
.prow-ui .tv-scan { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(to bottom, transparent, rgba(140,217,140,.3) 80%, rgba(140,217,140,.85)); border-bottom: .4cqi solid #8cd98c; opacity: 0; animation: tv-scan 6s linear infinite -2.8s; }
@keyframes tv-scan { 0% { transform: translateY(-100%); opacity: 1; } 26% { transform: translateY(460%); opacity: 1; } 28%, 100% { transform: translateY(460%); opacity: 0; } }
.prow-ui .tv-scoring { left: 50%; top: 3cqi; translate: -50% 0; animation: tv-out 6s infinite -2.8s; }
@keyframes tv-out { 0%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
.prow-ui .tv-vnum { display: flex; align-items: baseline; gap: .6cqi; font-size: 15cqi; font-weight: 900; line-height: .9; letter-spacing: -.05em; color: #8cd98c; text-shadow: 0 0 6cqi rgba(140,217,140,.45); }
.prow-ui .tv-vnum .n { counter-reset: n var(--tcn); animation: tv-vnum 6s cubic-bezier(.2,.8,.2,1) infinite -2.8s; }
.prow-ui .tv-vnum .n::after { content: counter(n); }
.prow-ui .tv-vnum small { font-size: 4cqi; font-weight: 700; letter-spacing: 0; color: rgba(255,255,255,.45); text-shadow: none; }
@keyframes tv-vnum { 0%, 28% { --tcn: 0; } 42%, 100% { --tcn: 98; } }
.prow-ui .tv-sig { gap: 2cqi; margin-top: 1cqi; }
.prow-ui .tv-sig li { display: grid; gap: .9cqi; font-size: 3.3cqi; font-weight: 600; color: rgba(255,255,255,.82); }
.prow-ui .tv-sig li i { position: relative; height: 1.3cqi; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.prow-ui .tv-sig li i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: #8cd98c; transform-origin: left; animation: tv-bar 6s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--i) * .12s - 2.8s); }
@keyframes tv-bar { 0%, 28% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }

/* Captions: the same words in three styles; the picker shows which one is on */
.prow-ui .tv-cap { position: absolute; z-index: 3; left: 4%; right: 4%; bottom: 19%; text-align: center; opacity: 0; }
.prow-ui .tv-cap.s1, .prow-ui .tv-styles li.s1::before { animation: tv-st1 6s infinite -2.8s; }
.prow-ui .tv-cap.s2, .prow-ui .tv-styles li.s2::before { animation: tv-st2 6s infinite -2.8s; }
.prow-ui .tv-cap.s3, .prow-ui .tv-styles li.s3::before { animation: tv-st3 6s infinite -2.8s; }
@keyframes tv-st1 { 0%, 32.9% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes tv-st2 { 0%, 32.9% { opacity: 0; } 33%, 65.9% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tv-st3 { 0%, 65.9% { opacity: 0; } 66%, 100% { opacity: 1; } }
.prow-ui .tv-cap .kc { font-size: 5.6cqi; line-height: 1.12; }
.prow-ui .tv-cap .kc span { margin: 0 .5cqi; }
.prow-ui .tv-cap.s1 .kc { font-family: var(--font); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; color: #fff; -webkit-text-stroke: .7cqi #000; paint-order: stroke fill; text-shadow: 0 .8cqi 0 #000; }
.prow-ui .tv-cap.s1 .kc span.on { color: #ff3b3b; transform: scale(1.15) rotate(-2deg); }
.prow-ui .tv-cap.s2 .kc { font-family: Montserrat, var(--font); font-weight: 800; color: #fff; text-shadow: 0 .5cqi 1.6cqi rgba(0,0,0,.85); }
.prow-ui .tv-cap.s2 .kc span.on { color: #ffd400; transform: none; }
.prow-ui .tv-cap.s3 .kc span { padding: .3cqi 1cqi; border-radius: .8cqi; background: #000; color: #fff; font-weight: 800; }
.prow-ui .tv-cap.s3 .kc span.on { background: #fff; color: #000; transform: scale(1.06); }
.prow-ui .tv-styles { gap: 1.6cqi; }
.prow-ui .tv-styles li { position: relative; padding: 2cqi 2.4cqi; border-radius: 2cqi; background: rgba(255,255,255,.05); }
.prow-ui .tv-styles li::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 .35cqi rgba(255,255,255,.4); opacity: 0; }
.prow-ui .tv-styles li b { position: relative; font-size: 3.6cqi; }
.prow-ui .tv-styles li.s1 b { font-weight: 900; text-transform: uppercase; color: #ff4d4d; -webkit-text-stroke: .35cqi #000; paint-order: stroke fill; }
.prow-ui .tv-styles li.s2 b { font-family: Montserrat, var(--font); font-weight: 800; color: #ffd400; }
.prow-ui .tv-styles li.s3 b { padding: .2cqi 1cqi; border-radius: .6cqi; background: #fff; color: #000; font-weight: 800; }

/* Hooks: the stream sits letterboxed like a real Short; candidate hooks cycle in the title band and the best one lands */
.prow-ui .tv-ph > video.band { top: 40%; bottom: auto; height: auto; aspect-ratio: 540 / 300; }
.prow-ui .tv-hk-top { position: absolute; z-index: 2; left: 6%; right: 6%; top: 10%; height: 27%; overflow: hidden; }
.prow-ui .tv-hk-reel { height: 500%; display: flex; flex-direction: column; animation: tv-hkreel 6s cubic-bezier(.7,0,.3,1) infinite -2.8s; }
.prow-ui .tv-hk-reel span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 4.3cqi; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
@keyframes tv-hkreel { 0%, 6% { transform: translateY(0); } 8%, 14% { transform: translateY(-20%); } 16%, 22% { transform: translateY(-40%); } 24%, 30% { transform: translateY(-60%); } 32%, 96% { transform: translateY(-80%); } 100% { transform: translateY(0); } }
.prow-ui .tv-hk-best { left: 50%; top: 76%; translate: -50% 0; background: #8cd98c; color: #0a0a0a; backdrop-filter: none; animation: tv-pop 6s infinite -2.8s; }
@keyframes tv-pop { 0%, 32% { opacity: 0; transform: scale(.6); } 36%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.prow-ui .tv-rank { gap: 1cqi; }
.prow-ui .tv-rank li { position: relative; display: flex; align-items: center; gap: 1.6cqi; padding: 1.2cqi 1.8cqi; border-radius: 1.8cqi; font-size: 3.2cqi; color: rgba(255,255,255,.62); }
.prow-ui .tv-rank li::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.13); opacity: 0; animation: tv-rk 6s infinite; animation-delay: calc(var(--i) * .48s - 2.8s); }
@keyframes tv-rk { 0%, 7.9% { opacity: 1; } 8%, 100% { opacity: 0; } }
.prow-ui .tv-rank li.best::before { background: rgba(140,217,140,.2); box-shadow: inset 0 0 0 .35cqi rgba(140,217,140,.7); animation: tv-rkbest 6s infinite -2.8s; }
@keyframes tv-rkbest { 0%, 31.9% { opacity: 0; } 32%, 96% { opacity: 1; } 100% { opacity: 0; } }
.prow-ui .tv-rank li b, .prow-ui .tv-rank li span { position: relative; }
.prow-ui .tv-rank li b { min-width: 4.2cqi; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.prow-ui .tv-rank li.best b { color: #8cd98c; }
.prow-ui .tv-rank li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Translate: the clip's own line, in every language */
.prow-ui .tv-ph .dx-word { left: 5%; right: 5%; bottom: 17%; font-size: 5.4cqi; line-height: 1.12; }
.prow-ui .tv-langs { gap: .5cqi; }
.prow-ui .tv-langs li { padding: .9cqi 1.8cqi; border-radius: 1.6cqi; font-size: 3.3cqi; color: rgba(255,255,255,.5); transition: background .3s, color .3s; }
.prow-ui .tv-langs li.on { background: rgba(255,255,255,.14); color: #fff; font-weight: 650; }

/* Reframe: the wide original with the crop window, and the vertical output following whoever talks */
.prow-ui .tv-src { position: absolute; z-index: 2; left: 4cqi; width: 38cqi; top: 50%; translate: 0 -50%; display: grid; gap: 1.6cqi; }
.prow-ui .tv-src .f { position: relative; aspect-ratio: 540 / 454; border-radius: 1.6cqi; overflow: hidden; box-shadow: 0 0 0 .35cqi rgba(255,255,255,.16); }
.prow-ui .tv-win { position: absolute; z-index: 2; top: 0; bottom: 0; left: 7.8%; width: 47.3%; border: .45cqi solid #fff; border-radius: .8cqi; box-shadow: 0 0 0 40cqi rgba(0,0,0,.55); animation: tv-win 6s cubic-bezier(.6,0,.3,1) infinite -2.8s; }
@keyframes tv-win { 0%, 18% { left: 7.8%; } 26%, 66% { left: 52.7%; } 74%, 100% { left: 7.8%; } }
.prow-ui .tv-ph > video.track { animation: tv-trk 6s cubic-bezier(.6,0,.3,1) infinite -2.8s; }
@keyframes tv-trk { 0%, 18% { object-position: 15% 50%; } 26%, 66% { object-position: 100% 50%; } 74%, 100% { object-position: 15% 50%; } }
.prow-ui .tv-arrow { position: absolute; z-index: 2; left: 43.2cqi; top: 50%; width: 5cqi; height: 5cqi; translate: 0 -50%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.prow-ui .tv-ar { left: 3cqi; top: 3cqi; }
.prow-ui .tv-trk { left: 50%; bottom: 4cqi; translate: -50% 0; }
.prow-ui .tv-trk i { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: #8cd98c; box-shadow: 0 0 0 .8cqi rgba(140,217,140,.25); }

/* Clean audio: the voice keeps going while the train and the crowd get pulled out */
.prow-ui .tv-stem { position: relative; display: grid; grid-template-columns: 10cqi 1fr; align-items: center; gap: 1.4cqi; font-size: 3.2cqi; font-weight: 600; }
.prow-ui .tv-stem .w { display: flex; align-items: center; gap: .5cqi; height: 7cqi; transform-origin: center; }
.prow-ui .tv-stem .w i { flex: 1; height: var(--h); border-radius: 99px; background: #fff; animation: tv-wv .8s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.13s); }
@keyframes tv-wv { to { transform: scaleY(.45); } }
.prow-ui .tv-stem.rm .w i { background: #ff8a8a; }
.prow-ui .tv-stem.rm .w { animation: tv-rmw 6s infinite -2.8s; }
.prow-ui .tv-stem.rm.two .w, .prow-ui .tv-stem.rm.two em { animation-delay: -2.5s; }
@keyframes tv-rmw { 0%, 28% { transform: none; opacity: 1; } 36%, 94% { transform: scaleY(.08); opacity: .35; } 100% { transform: none; opacity: 1; } }
.prow-ui .tv-stem em { position: absolute; right: 0; top: 50%; translate: 0 -50%; padding: .4cqi 1.2cqi; border-radius: 99px; background: rgba(0,0,0,.7); color: #8cd98c; font-size: 2.6cqi; font-style: normal; font-weight: 700; opacity: 0; animation: tv-in 6s infinite -2.8s; }
@keyframes tv-in { 0%, 32% { opacity: 0; } 38%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* Remove pauses: the gaps collapse out of the timeline and get struck off the list */
.prow-ui .tv-px-tl { position: absolute; z-index: 3; left: 5%; right: 5%; bottom: 5%; height: 5cqi; display: flex; gap: .6cqi; padding: .8cqi; border-radius: 1.4cqi; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.prow-ui .tv-px-tl i { flex: var(--g) 1 0; min-width: 0; border-radius: .6cqi; background: rgba(255,255,255,.88); }
.prow-ui .tv-px-tl i.cut { background: repeating-linear-gradient(45deg, #ff6b6b 0 .8cqi, #c94b4b .8cqi 1.6cqi); animation: tv-cut 6s cubic-bezier(.7,0,.3,1) infinite -2.8s; }
@keyframes tv-cut { 0%, 22% { flex-grow: var(--g); opacity: 1; } 34%, 94% { flex-grow: 0; opacity: 0; } 100% { flex-grow: var(--g); opacity: 1; } }
.prow-ui .tv-cuts { gap: 1.2cqi; }
.prow-ui .tv-cuts li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1cqi; padding: 1.3cqi 1.8cqi; border-radius: 1.6cqi; background: rgba(255,255,255,.06); font-size: 3.2cqi; }
.prow-ui .tv-cuts li b { font-weight: 750; color: #ff8a8a; }
.prow-ui .tv-cuts li span { position: relative; transition: opacity .3s; }
.prow-ui .tv-cuts li span::after { content: ""; position: absolute; left: -.4cqi; right: -.4cqi; top: 52%; height: .3cqi; background: rgba(255,255,255,.75); transform-origin: left; animation: tv-strike 6s infinite; animation-delay: calc(var(--i) * .15s - 2.8s); }
@keyframes tv-strike { 0%, 24% { transform: scaleX(0); } 32%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.prow-ui .tv-total { display: grid; gap: .4cqi; animation: tv-in 6s infinite -2.8s; }
.prow-ui .tv-total b { font-size: 9cqi; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #8cd98c; }
.prow-ui .tv-total span { font-size: 3cqi; color: rgba(255,255,255,.6); }

/* Upscale: a wipe between the blocky 480p source and the sharp result */
.prow-ui .tv-ph.up { animation: tv-wipe 6s cubic-bezier(.6,0,.3,1) infinite -2.8s; }
@keyframes tv-wipe { 0%, 14% { --tcx: 100%; } 34%, 90% { --tcx: 50%; } 100% { --tcx: 100%; } }
.prow-ui .tv-low { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--tcx)) 0 0); }
.prow-ui .tv-line { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--tcx); width: .5cqi; translate: -50% 0; background: #fff; box-shadow: 0 0 2cqi rgba(0,0,0,.6); }
.prow-ui .tv-q.l { left: 3cqi; top: 3cqi; }
.prow-ui .tv-q.r { right: 3cqi; top: 3cqi; }

/* B-roll: the line names New York, so New York cuts in; the side shows what was found */
.prow-ui .tv-ins { position: absolute; inset: 0; z-index: 2; opacity: 0; animation: tv-ins 6s infinite -2.8s; }
@keyframes tv-ins { 0%, 29.9% { opacity: 0; } 30%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
.prow-ui .tv-br-cap { position: absolute; z-index: 4; left: 5%; right: 5%; bottom: 15%; text-align: center; font-size: 5.2cqi; line-height: 1.08; -webkit-text-stroke-width: .6cqi; }
.prow-ui .tv-br-cap em { font-style: normal; color: #ffe14d; }
.prow-ui .tv-tiles { display: grid; gap: 2cqi; }
.prow-ui .tv-tiles figure { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 2cqi; background-size: cover; background-position: center; box-shadow: inset 0 0 0 .35cqi rgba(255,255,255,.12); }
.prow-ui .tv-tiles figure.b { opacity: .55; }
.prow-ui .tv-tiles figure.a::after { content: ""; position: absolute; inset: -.7cqi; border-radius: 2.5cqi; box-shadow: 0 0 0 .5cqi #ffe14d; opacity: 0; animation: tv-ins 6s infinite -2.8s; }
.prow-ui .tv-tiles figcaption { position: absolute; left: 1.4cqi; bottom: 1.2cqi; padding: .3cqi 1.1cqi; border-radius: 99px; background: rgba(0,0,0,.7); font-size: 2.8cqi; font-weight: 700; }

/* Graphics: the number they say becomes a chart callout over the clip */
.prow-ui .tv-gx { position: absolute; z-index: 4; left: 42cqi; right: 5cqi; bottom: 12cqi; display: grid; gap: 1cqi; padding: 3.2cqi; border-radius: 3cqi; background: rgba(12,12,12,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 .35cqi rgba(255,255,255,.1), 0 4cqi 10cqi rgba(0,0,0,.5); animation: tv-gxin 6s infinite -2.8s; }
@keyframes tv-gxin { 0%, 18% { opacity: 0; transform: translateY(4cqi) scale(.96); } 26%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.prow-ui .tv-gx .n { font-size: 10cqi; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #8cd98c; counter-reset: n var(--tcn); animation: tv-gxnum 6s cubic-bezier(.2,.8,.2,1) infinite -2.8s; }
.prow-ui .tv-gx .n::before { content: "+" counter(n) "%"; }
@keyframes tv-gxnum { 0%, 22% { --tcn: 0; } 40%, 100% { --tcn: 212; } }
.prow-ui .tv-gx > span { font-size: 3.2cqi; font-weight: 600; line-height: 1.2; color: rgba(255,255,255,.72); }
.prow-ui .tv-gx .bars { display: flex; align-items: flex-end; gap: 2cqi; height: 13cqi; margin-top: 1cqi; }
.prow-ui .tv-gx .bars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .6cqi; height: 100%; font-size: 2.6cqi; color: rgba(255,255,255,.55); }
.prow-ui .tv-gx .bars i { width: 100%; height: var(--h); border-radius: .8cqi .8cqi .3cqi .3cqi; background: rgba(255,255,255,.3); transform-origin: bottom; animation: tv-grow 6s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--i) * .12s - 2.8s); }
.prow-ui .tv-gx .bars div:last-child i { background: #8cd98c; }
@keyframes tv-grow { 0%, 22% { transform: scaleY(0); } 36%, 100% { transform: scaleY(1); } }

/* Thumbnails: best frames found in the clip become three finished thumbnails */
.prow-ui .tv-thumbs { display: grid; gap: 1.8cqi; }
.prow-ui .tv-thumbs figure { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 1.8cqi; overflow: hidden; animation: tv-tpop 6s cubic-bezier(.2,1.4,.4,1) infinite; animation-delay: calc(var(--i) * .15s - 2.8s); }
.prow-ui .tv-thumbs figure.a { background: radial-gradient(circle at 70% 40%, #ffd23a, #ff6a13 70%); }
.prow-ui .tv-thumbs figure.b { background: radial-gradient(circle at 70% 40%, #8ec5ff, #2f5bff 70%); }
.prow-ui .tv-thumbs figure.c { background: radial-gradient(circle at 70% 40%, #ff8fb4, #d1123f 70%); }
.prow-ui .tv-thumbs img { position: absolute; right: -6%; bottom: 0; height: 112%; width: auto; }
.prow-ui .tv-thumbs b { position: absolute; left: 6%; top: 50%; translate: 0 -50%; width: 58%; font-size: 4.2cqi; line-height: .95; -webkit-text-stroke-width: .5cqi; }
.prow-ui .tv-thumbs b em { display: block; font-style: normal; color: #ffe14d; }
.prow-ui .tv-thumbs figure span { position: absolute; right: 1.2cqi; top: 1.2cqi; padding: .3cqi 1.1cqi; border-radius: 99px; background: #8cd98c; color: #0a0a0a; font-size: 2.5cqi; font-weight: 800; }
@keyframes tv-tpop { 0%, 26% { opacity: 0; transform: translateX(4cqi) scale(.9); } 34%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Carousel: the clip's points become swipeable slides */
.prow-ui .tv-slides { position: relative; height: 46cqi; }
.prow-ui .tv-sl { position: absolute; top: 0; left: 0; width: 30cqi; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; gap: 1cqi; padding: 3cqi; border-radius: 2.4cqi; background: #111; box-shadow: 0 0 0 .35cqi rgba(255,255,255,.12), 0 3cqi 8cqi rgba(0,0,0,.6); animation: tv-fan 6s cubic-bezier(.2,1,.3,1) infinite; animation-delay: calc(var(--i) * .12s - 2.8s); }
.prow-ui .tv-sl[style*="--i:1"] { background: #ffe14d; color: #111; }
.prow-ui .tv-sl[style*="--i:2"] { background: #ff8fb4; color: #111; }
.prow-ui .tv-sl span { font-size: 2.6cqi; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.prow-ui .tv-sl b { font-size: 4cqi; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
@keyframes tv-fan { 0%, 20% { opacity: 0; transform: translateY(6cqi) rotate(0); } 32%, 94% { opacity: 1; transform: translateX(calc(var(--i) * 4.5cqi)) translateY(calc(var(--i) * 2.5cqi)) rotate(calc(var(--i) * 5deg)); } 100% { opacity: 0; } }
.prow-ui .tv-dots { display: flex; gap: 1cqi; }
.prow-ui .tv-dots i { width: 1.4cqi; height: 1.4cqi; border-radius: 50%; background: rgba(255,255,255,.3); }
.prow-ui .tv-dots i:first-child { background: #fff; }

/* ==== v13 AI editor run: a 3-step plan in the chat, the AI's status on the timeline, dead space that
   collapses, a captions track that fills in and a zoom on the punchline ==== */
[data-aied].still *, [data-aied].still *::before, [data-aied].still *::after { transition: none !important; }
.ai-plan { align-self: stretch; padding: 10px 12px 12px; border-radius: 14px; background: var(--fill-4); box-shadow: inset 0 0 0 1px var(--border); transition: opacity .35s var(--ease-out-soft), transform .45s var(--ease-swift); }
.ai-plan-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; font-size: 13px; }
.ai-plan-h b { font-weight: 650; }
.ai-plan-h span { font-size: 12.5px; color: var(--text-3); }
.ai-plan ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ai-plan li { display: flex; align-items: flex-start; gap: 9px; }
.ai-plan li > div { display: grid; gap: 1px; min-width: 0; }
.ai-plan li span { font-size: 13.5px; color: var(--text-2); }
.ai-plan li small { font-size: 11.5px; color: var(--text-3); }
.ai-plan li.run span, .ai-plan li.done span { color: var(--text-1); }
.ai-plan li.run small { color: var(--accent); }
.ai-plan .st { flex: none; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--fill-3); font-style: normal; }
.ai-plan .st b { font-size: 10.5px; font-weight: 700; color: var(--text-3); }
.ai-plan li.run .st b, .ai-plan li.done .st b { display: none; }
.ai-plan li.run .st::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--accent); animation: rot .8s linear infinite; }
.ai-plan li.done .st { background: color-mix(in srgb, var(--success) 22%, transparent); }
.ai-plan li.done .st::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
.ai-sum { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-1); transition: opacity .35s var(--ease-out-soft), transform .45s var(--ease-swift); }

.ed-agent { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 12px; white-space: nowrap; }
.ed-agent svg.i { width: 12px; height: 12px; color: var(--accent); }
.ed-agent b { font-weight: 650; color: var(--text-1); }
.ed-agent span { color: var(--text-2); }
.ed-agent.live svg.i { animation: edpulse 1s ease-in-out infinite; }
@keyframes edpulse { 50% { opacity: .3; } }

.ed-vb { transition: left .6s var(--ease-swift), width .6s var(--ease-swift); }
.ed-music { transition: right .6s var(--ease-swift); }
.ed-vb .pause { transition: width .6s var(--ease-swift); }
[data-aied].hit .ed-vb .pause { background: repeating-linear-gradient(135deg, rgba(255,66,113,.85) 0 5px, rgba(255,66,113,.3) 5px 10px); box-shadow: inset 0 0 0 1px #ff4271; animation: edblink .4s ease-in-out 3; }
@keyframes edblink { 50% { opacity: .35; } }
.ed-chip.cap { padding: 0 6px; background: color-mix(in srgb, #4dbeff 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #4dbeff 42%, transparent); font-size: 11px; font-weight: 600; transform-origin: left center; transition: opacity .25s var(--ease-out-soft), transform .3s var(--ease-swift); }
.ed-chip.cap.pre { opacity: 0; transform: scaleX(.3); }
.ed-cap { transition: opacity .3s var(--ease-out-soft); }
.ed-cap.off { opacity: 0; }
.ed-play .clock em { font-style: normal; }
/* phones show the AI panel only: keep the prompt in view by dropping the detail lines */
.ed.phone .ai-intro, .ed.phone .ai-cp, .ed.phone .ai-plan li small { display: none; }
.ed.phone .ai-plan { padding: 8px 10px 10px; }
.ed.phone .ai-plan ol { gap: 6px; }
.ed.phone .ai-chat { gap: 12px; }

/* v14: captions sit lower and smaller; the zoom is a slow push-in driven per frame from JS */
.ed-cap { top: 78%; font-size: 18px; }
.ed-cap.beast { font-size: 20px; }
.ed-video video { transition: none; will-change: transform; }
/* v15: no zoom; captions sit in the clip's blurred bottom band (79-100% of the frame) */
.ed-cap { top: 89%; }
.ed-video video { transform: none; }
/* v17: the proof section ends where its last receipt does (tally line removed) */
.proof { padding-bottom: 24px; }
@media (min-width: 1024px) { .proof .pwall { padding-bottom: 196px; } }
/* v21: the Virality card counts up from 0 each time it comes into view, rising as it counts, in Prow pink */
.prow-ui .tv-vnum { color: var(--accent); text-shadow: 0 0 6cqi rgba(255,143,180,.45); }
.prow-ui .tv-sig li i::after { background: var(--accent); }
.prow-ui .tv-scan { background: linear-gradient(to bottom, transparent, rgba(255,143,180,.28) 80%, rgba(255,143,180,.85)); border-bottom-color: var(--accent); }
@keyframes tv-vnum2 { 0%, 26% { --tcn: 0; opacity: 0; transform: translateY(35%); } 32% { opacity: 1; transform: none; } 58%, 100% { --tcn: 98; opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .prow-ui .tprev.tv .tv-vnum .n { display: inline-block; animation: tv-vnum2 6s cubic-bezier(.22,1,.36,1) infinite; }
  .prow-ui .tprev.tv .tv-vnum .n, .prow-ui .tprev.tv .tv-scan, .prow-ui .tprev.tv .tv-scoring { animation-delay: 0s; }
  .prow-ui .tprev.tv .tv-sig li i::after { animation-delay: calc(var(--i) * .12s); }
  .prow-ui .tprev.tv:not(.inview) .tv-vnum .n, .prow-ui .tprev.tv:not(.inview) .tv-scan, .prow-ui .tprev.tv:not(.inview) .tv-scoring, .prow-ui .tprev.tv:not(.inview) .tv-sig li i::after { animation: none; }
  .prow-ui .tprev.tv:not(.inview) .tv-vnum .n { opacity: 0; }
}

/* v22: the floating header keeps the full set of links (and Log in) whenever there is room for them */
@media (min-width: 900px) {
  .nav-band.float .nav-links a:not(.keep) { display: inline-flex; }
  .nav-band.float .nav-links { gap: 22px; }
}
@media (min-width: 1100px) { .nav-band.float .nav-login { display: inline-flex; } }
/* v23: the floating header gets room to breathe: wider pill, logo left, buttons right, links spaced like the full header */
@media (min-width: 900px) {
  .nav-band.float .nav { width: min(880px, calc(100% - 64px)); justify-content: space-between; padding: 0 8px 0 26px; }
  .nav-band.float .nav-links { gap: 28px; }
  .nav-band.float .nav-right { gap: 18px; }
}
@media (min-width: 1280px) { .nav-band.float .nav { width: 960px; } .nav-band.float .nav-links { gap: 32px; } }

/* v24: Tools dropdown (desktop + floating header) and the expandable list in the phone menu */
.nav-dd { position: relative; display: flex; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 4px; padding-block: 12px; font-size: 14px; color: var(--text-2); background: none; border: 0; cursor: pointer; transition: color 150ms; }
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { color: var(--text-1); }
.nav-dd-btn svg.i { width: 14px; height: 14px; transition: transform .2s var(--ease-swift, ease); }
.nav-dd.open .nav-dd-btn svg.i { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 60; width: 600px; padding: 10px; border-radius: 20px; background: var(--popover, #161616); border: 1px solid var(--border); box-shadow: 0 24px 60px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(.98); transform-origin: 50% 0; transition: opacity .18s ease-out, transform .22s var(--ease-swift, ease), visibility 0s .22s; }
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .18s ease-out, transform .22s var(--ease-swift, ease), visibility 0s; }
.nav-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav-dd-item, .nav-pd-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--text-1); text-decoration: none; transition: background .15s; }
.nav-dd-item:hover, .nav-dd-item:focus-visible, .nav-dd-item[aria-current="page"] { background: var(--fill-4, rgba(255,255,255,.06)); }
.nav-dd-item img, .nav-pd-item img { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #0b0b0b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.nav-dd-item span, .nav-pd-item span { display: grid; gap: 1px; min-width: 0; }
.nav-dd-item b, .nav-pd-item b { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.nav-dd-item small, .nav-pd-item small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-dd-item[aria-current="page"] b { color: var(--accent); }
.nav-dd-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 11px; border-radius: 12px; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none; transition: color .15s, background .15s; }
.nav-dd-all:hover { color: var(--text-1); background: var(--fill-4, rgba(255,255,255,.06)); }
.nav-dd-all svg.i { width: 14px; height: 14px; }
.nav-band.float .nav-dd-menu { top: calc(100% + 14px); }
/* phone menu */
.nav-pd { border: 0; }
.nav-pd summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.nav-pd summary::-webkit-details-marker { display: none; }
.nav-pd summary svg.i { width: 18px; height: 18px; transition: transform .2s; }
.nav-pd[open] summary svg.i { transform: rotate(180deg); }
.nav-pd-list { display: grid; gap: 2px; padding: 4px 0 8px; }
.nav-pd-item { padding: 8px 6px; }
.nav-pd-all { display: block; padding: 10px 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .nav-dd-menu, .nav-dd.open .nav-dd-menu, .nav-dd-btn svg.i { transition: none; } }
/* the header's own link rules (.nav-links a, the floating pill's show/hide) must not reach the menu's links */
.nav-links .nav-dd-menu .nav-dd-item { display: flex !important; padding: 8px 10px; color: var(--text-1); font-size: inherit; }
.nav-links .nav-dd-menu .nav-dd-all { display: flex !important; padding: 11px; color: var(--text-2); }
.nav-links .nav-dd-menu .nav-dd-all:hover { color: var(--text-1); }