/* ContentVeo marketing site — hand-written, no build step.
   Dark cinematic theme (pass 2, 2026-11): near-black page, white headings, grey copy, dark cards with 1px borders,
   soft violet / amber / rose glows behind media. Brand = the violet of the V mark (#A78BFA → #7C3AED).
   Sections: tokens · base · layout · buttons · header/menu · hero · sections · components · pricing · faq ·
   prose (docs, articles) · footer · motion. */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg: #08080a;
  --bg-soft: #0e0e11;
  --bg-tint: #110e19;
  --surface: #141417;    /* cards */
  --surface-2: #1b1b1f;  /* raised elements inside cards, inputs */
  --surface-3: #26262c;
  --ink: #f6f6f8;
  --ink-2: #dedee5;
  --ink-3: #a6a6b2;      /* body copy: 8.3:1 on --bg, 7.6:1 on --surface */
  --ink-4: #8c8c99;      /* small meta text: 5.9:1 on --bg, 5.4:1 on --surface */
  --line: #222228;
  --line-2: #2e2e35;
  --violet: #7c3aed;
  --violet-2: #8b5cf6;
  --violet-3: #a78bfa;
  --violet-ink: #c4b5fd; /* violet text on dark: 10:1 */
  --violet-soft: #1d1530;
  --violet-line: #3b2b66;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --ok: #34d399;
  --grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --max: 1200px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 44px -14px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.4), 0 40px 90px -24px rgb(0 0 0 / 0.85);
  --shadow-violet: 0 10px 30px -10px rgb(124 58 237 / 0.7);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.6 var(--font);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
strong { font-weight: 600; color: var(--ink-2); }
code { font: 500 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 0.1em 0.35em; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line); }
::selection { background: rgb(124 58 237 / 0.55); color: #fff; }
:focus-visible { outline: 2px solid var(--violet-3); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--violet); color: #fff; font-weight: 600; }
.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; }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
section { padding: 128px 0; }
section.tight { padding: 72px 0; }
section.flush-top { padding-top: 0; }
section.soft { background: var(--bg-soft); border-block: 1px solid #16161a; }
@media (max-width: 720px) { section { padding: 80px 0; } section.tight { padding: 56px 0; } .wrap, .wrap-narrow { width: calc(100% - 32px); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: #cfcfd8; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--grad); }
.eyebrow:has(> .ic)::before { display: none; }
.eyebrow > .ic { width: 16px; height: 16px; color: var(--violet-3); }
.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin-top: 16px; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 650; }
.section-head p { margin-top: 16px; color: var(--ink-3); font-size: 18px; line-height: 1.6; }
.section-head p a, .text-link { color: var(--violet-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--violet-line); text-underline-offset: 3px; }
.section-head p a:hover, .text-link:hover { text-decoration-color: currentColor; }
.section-foot { margin-top: 40px; text-align: center; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn-primary { background: var(--violet); color: #fff; box-shadow: var(--shadow-violet), inset 0 1px 0 rgb(255 255 255 / 0.18); }
.btn-primary:hover { background: var(--violet-2); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { border-color: #45454f; background: var(--surface-3); }
.btn-dark { background: #fff; color: #0a0a0c; }
.btn-dark:hover { background: #ece8ff; }
.btn-light { background: #fff; color: #0a0a0c; }
.btn-light:hover { background: #ece8ff; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }
.arrow::after { content: '→'; font-weight: 500; transition: transform .15s; }
a:hover > .arrow::after, .arrow:hover::after { transform: translateX(2px); }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--violet-ink); font-size: 15px; font-weight: 600; }
.more::after { content: '→'; transition: transform .15s; }
a:hover .more::after, .more:hover::after { transform: translateX(3px); }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(8 8 10 / 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; border-radius: 10px; }
.brand img { border-radius: 8px; }
/* The one wordmark (same as the app's <Logo>): "Content" in ink, "Veo" in the V mark's violet gradient. */
.wordmark { color: var(--ink); font-weight: 650; font-size: 18px; letter-spacing: -0.03em; line-height: 1; }
.veo, .grad-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0 auto 0 12px; padding: 0; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--ink-3); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 6px; }
.nav-signin { padding: 8px 12px; color: var(--ink-2); font-size: 14.5px; font-weight: 500; border-radius: 999px; }
.nav-signin:hover { background: var(--surface-2); }

/* Mobile menu: <details>, works without JavaScript */
.menu { display: none; position: relative; }
.menu summary {
  list-style: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 16px; height: 1.75px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -5px; } .menu-icon::after { top: 5px; }
.menu[open] .menu-icon { background: transparent; }
.menu[open] .menu-icon::before { transform: translateY(5px) rotate(45deg); }
.menu[open] .menu-icon::after { transform: translateY(-5px) rotate(-45deg); }
.menu-panel {
  position: fixed; left: 12px; right: 12px; top: 76px; z-index: 60;
  padding: 10px; border-radius: 20px; border: 1px solid var(--line-2); background: #111114; box-shadow: var(--shadow-lg);
  max-height: calc(100dvh - 92px); overflow-y: auto;
}
/* Closed <details> content is still laid out inside a contained box in Chromium; keep it out of the page width */
.menu:not([open]) .menu-panel { display: none; }
.menu-panel ul { list-style: none; padding: 0; margin: 0; }
.menu-panel li a { display: block; padding: 13px 14px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--ink-2); }
.menu-panel li a:hover { background: var(--surface-2); }
.menu-panel .menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 4px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .menu { display: block; }
}
@media (max-width: 460px) { .nav-signin { display: none; } .nav { gap: 12px; } }

/* ── Hero ───────────────────────────────────────────────── */
.hero { position: relative; padding: 88px 0 0; text-align: center; isolation: isolate; overflow-x: clip; }
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 820px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 50% at 50% 0%, rgb(124 58 237 / 0.30), transparent 70%),
    radial-gradient(30% 35% at 14% 30%, rgb(245 158 11 / 0.07), transparent 70%),
    radial-gradient(30% 35% at 86% 28%, rgb(244 63 94 / 0.07), transparent 70%);
}
.hero::after { /* fine grid, fades out */
  content: ''; position: absolute; inset: 0 0 auto; height: 720px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .5;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 80%);
}
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.04); color: var(--ink-3); font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.pill b { padding: 3px 9px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-ink); font-size: 12px; font-weight: 600; }
.pill:hover { border-color: #45454f; }
.hero h1 {
  margin: 26px auto 0; max-width: 940px;
  font-size: clamp(44px, 7.2vw, 84px); line-height: 1; letter-spacing: -0.048em; font-weight: 650;
}
.hero h1 .grad-text { padding-bottom: 0.08em; }
.lead { margin: 24px auto 0; max-width: 640px; color: var(--ink-3); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; }
.hero-form {
  display: flex; align-items: center; gap: 8px; margin: 36px auto 0; max-width: 520px; padding: 6px 6px 6px 20px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); box-shadow: var(--shadow-md);
  transition: border-color .15s, box-shadow .15s;
}
.hero-form:focus-within { border-color: var(--violet-3); box-shadow: var(--shadow-md), 0 0 0 4px rgb(167 139 250 / 0.22); }
.hero-form input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 16px var(--font); }
.hero-form input::placeholder { color: #8c8c99; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; color: var(--ink-4); font-size: 14px; }
.hero-meta li { display: inline-flex; align-items: center; gap: 7px; list-style: none; }
.hero-meta li::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--violet-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23c4b5fd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.hero-meta { padding: 0; }
@media (max-width: 540px) {
  .hero { padding-top: 56px; }
  .hero-form { flex-direction: column; align-items: stretch; padding: 8px; border-radius: 22px; }
  .hero-form input { padding: 0 12px; text-align: center; }
}

/* Video play/pause control (added by site.js) */
.vid-toggle {
  position: absolute; right: 10px; top: 10px; z-index: 3; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(10 10 16 / 0.55); color: #fff; cursor: pointer; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vid-toggle svg { width: 14px; height: 14px; }
.vid-toggle:hover { background: rgb(10 10 16 / 0.75); }

/* ── Steps ──────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 22px; border-radius: 10px;
  background: var(--violet-soft); color: var(--violet-ink); font-size: 15px; font-weight: 700;
}
.step h3 { font-size: 20px; letter-spacing: -0.02em; }
.step p { margin-top: 8px; color: var(--ink-3); font-size: 15.5px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* Long step list (how-it-works page) */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl; }
.timeline > li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 20px; padding-bottom: 48px; }
.timeline > li::before {
  counter-increment: tl; content: counter(tl);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--violet); color: #fff; font-weight: 700; font-size: 17px; box-shadow: var(--shadow-violet);
}
.timeline > li::after { content: ''; position: absolute; left: 21.5px; top: 52px; bottom: 6px; width: 1px; background: var(--line-2); }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::after { display: none; }
.timeline h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.03em; padding-top: 6px; }
.timeline .tl-body { grid-column: 2; color: var(--ink-3); font-size: 17px; }
.timeline .tl-body > * + * { margin-top: 14px; }
@media (max-width: 560px) { .timeline > li { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 14px; } .timeline > li::after { left: 21.5px; } }

/* ── Feature bands ──────────────────────────────────────── */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 64px; align-items: center; }
.band + .band { margin-top: 112px; }
.band.reverse .band-media { order: -1; }
.band h3, .band h2 { margin-top: 14px; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -0.035em; }
.band-copy > p { margin-top: 16px; color: var(--ink-3); font-size: 17px; }
.band-copy .btn, .band-copy .more { margin-top: 28px; }
.band-media { position: relative; padding: 28px; border-radius: var(--radius-lg); background: radial-gradient(80% 70% at 85% 0%, rgb(124 58 237 / 0.20), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgb(245 158 11 / 0.08), transparent 60%), var(--surface); border: 1px solid var(--line); }
.band-media.dark { background: radial-gradient(80% 80% at 80% 0%, #2a1856, #0f0d18 70%); border-color: var(--line); }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.checks li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--violet-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.4' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.checks.on-dark li { color: #e6e6ef; }
figure { margin: 0; }
.media-img { border-radius: 14px; box-shadow: var(--shadow-md); outline: 1px solid rgb(255 255 255 / 0.06); }
figcaption { margin-top: 12px; color: var(--ink-4); font-size: 13.5px; }
.band-media.dark figcaption { color: #b9b4cc; }
.reframe { display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 16px; align-items: end; }
.reframe .phone { width: 100%; border-radius: 16px; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.row-3 .phone { width: 100%; border-radius: 16px; box-shadow: var(--shadow-md); }
.row-3 figcaption, .row-4 figcaption { text-align: center; margin-top: 10px; }
.row-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.row-4 .phone { width: 100%; border-radius: 14px; box-shadow: var(--shadow-md); }
.media-phone { max-width: 290px; margin-inline: auto; }
.media-phone .phone { width: 100%; }
@media (max-width: 960px) {
  .band, .band.reverse { grid-template-columns: 1fr; gap: 36px; }
  .band.reverse .band-media { order: 0; }
  .band + .band { margin-top: 80px; }
}
@media (max-width: 560px) {
  .band-media { padding: 16px; }
  .reframe { grid-template-columns: 1fr; }
  .reframe .out { width: 60%; margin-inline: auto; }
  .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Cards & grids ──────────────────────────────────────── */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; margin-top: 48px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }
.card { padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.card h3 { font-size: 18px; letter-spacing: -0.02em; line-height: 1.3; }
.card p { margin-top: 8px; color: var(--ink-3); font-size: 15.5px; }
.card .checks { margin-top: 16px; }
.card .checks li { font-size: 15px; }
.card-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 12px; background: var(--violet-soft); color: var(--violet-ink); }
.card-icon svg { width: 20px; height: 20px; }
a.card { display: block; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.card:hover { border-color: var(--violet-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
a.card .more { margin-top: 18px; }
.card.soft { background: var(--bg-soft); box-shadow: none; }
.card-media { margin: -28px -28px 22px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-soft); }
.card-media { position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
a.card:hover .card-media img { transform: scale(1.04); }
.card-media .tag { left: 12px; bottom: 12px; }

/* Spec list (what you get) */
.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.spec { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec:nth-child(4n) { border-right: 0; }
.spec:nth-last-child(-n+4) { border-bottom: 0; }
.spec dt { color: var(--ink-4); font-size: 13.5px; font-weight: 500; }
.spec dd { margin: 6px 0 0; color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
@media (max-width: 860px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec:nth-child(4n) { border-right: 1px solid var(--line); }
  .spec:nth-child(2n) { border-right: 0; }
  .spec:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .spec:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Platform / integration cards */
.int-card { display: flex; flex-direction: column; }
.int-head { display: flex; align-items: center; gap: 12px; }
.int-card dl { margin: 18px 0 0; display: grid; gap: 12px; }
.int-card dt { color: var(--ink-4); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.int-card dd { margin: 3px 0 0; color: var(--ink-2); font-size: 15px; }

/* Dark band (trust / CTA) */
.dark-band { position: relative; overflow: hidden; isolation: isolate; padding: 72px 56px; border-radius: 28px; background: #100e17; border: 1px solid var(--line); color: #fff; }
.dark-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 80% at 85% 0%, rgb(124 58 237 / 0.45), transparent 70%), radial-gradient(45% 70% at 0% 100%, rgb(167 139 250 / 0.22), transparent 70%); }
.dark-band h2 { color: #fff; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -0.04em; }
.dark-band p { color: #c9c6d8; font-size: 18px; }
.dark-band .eyebrow { color: #c4b5fd; }
.cta-band { text-align: center; }
.cta-band p { margin: 16px auto 32px; max-width: 600px; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.25); box-shadow: none; }
.cta-band .btn-secondary:hover { border-color: rgb(255 255 255 / 0.5); }
.trust-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trust-item { padding: 22px; border-radius: 16px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.09); }
.trust-item h3 { color: #fff; font-size: 16.5px; }
.trust-item p { margin-top: 6px; color: #b9b5ca; font-size: 14.5px; }
.dark-band .more { color: #d8ccff; margin-top: 26px; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .dark-band { padding: 48px 22px; border-radius: 22px; } .trust-list { grid-template-columns: 1fr; } }

/* ── Pricing ────────────────────────────────────────────── */
.billing-note { margin-top: 18px; color: var(--ink-4); font-size: 14px; text-align: center; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 48px auto 0; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.plan-featured { border: 1.5px solid var(--violet); box-shadow: 0 24px 50px -24px rgb(124 58 237 / 0.45); }
.plan-badge { position: absolute; top: -12px; left: 24px; padding: 4px 10px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 12px; font-weight: 600; }
.plan h3 { font-size: 17px; letter-spacing: -0.015em; }
.plan-for { margin-top: 4px; color: var(--ink-4); font-size: 14px; min-height: 42px; }
.price { margin-top: 18px; font-size: 44px; font-weight: 650; letter-spacing: -0.045em; line-height: 1; }
.card p.price { color: var(--ink); }
.price span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-4); }
.price-alt { margin-top: 8px; color: var(--ink-4); font-size: 13.5px; min-height: 20px; }
.plan .minutes { margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14.5px; color: var(--ink-2); }
.plan .minutes b { display: block; color: var(--ink); font-size: 18px; letter-spacing: -0.02em; }
.plan .checks { margin-top: 18px; gap: 10px; flex: 1; align-content: start; }
.plan .checks li { font-size: 14.5px; }
.plan .btn { margin-top: 24px; width: 100%; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 460px; gap: 22px; } .plan-for { min-height: 0; } }
.price-was { margin-right: 8px; color: var(--ink-4); font-size: 0.55em; font-weight: 500; letter-spacing: -0.02em; text-decoration: line-through; text-decoration-thickness: 2px; }
.price-offer { display: inline-block; margin-top: 14px; padding: 3px 10px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-ink); font-size: 12.5px; font-weight: 600; align-self: flex-start; }
.price-offer + .price { margin-top: 12px; }
.price-alt strong { color: var(--ink-2); font-weight: 600; }
.plans-free { max-width: 1040px; margin: 22px auto 0; padding: 16px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; text-align: center; }
.plans-free a { color: var(--violet-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ai-note { max-width: 1040px; margin: 0 auto 28px; text-align: center; }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; margin-top: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; }
.table caption { padding: 16px 20px; text-align: left; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.table th, .table td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table thead th { border-top: 0; background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 600; }
.table tbody th { color: var(--ink-2); font-weight: 500; }
.table td { color: var(--ink-3); }
.table .yes { color: var(--ok); font-weight: 600; }
.table .no { color: #7c7c88; }
.table tbody th[scope="row"], .table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.table thead th:first-child { background: var(--surface-2); }
.swipe-hint { display: none; color: var(--ink-4); font-weight: 400; font-size: 13px; }
@media (max-width: 720px) { .swipe-hint { display: inline; } .table th, .table td { padding: 12px 14px; } .table tbody th[scope="row"] { max-width: 150px; } }
.table .group th { background: var(--bg-tint); color: var(--violet-ink); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-layout { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: 28px; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none;
  color: var(--ink); font-size: 17px; font-weight: 550; letter-spacing: -0.015em; border-radius: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 8v10M8 13h10' stroke='%23c9c9d2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/26px no-repeat;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 44px 24px 0; color: var(--ink-3); font-size: 16px; }
.faq .answer > * + * { margin-top: 10px; }
.faq .answer ul { padding-left: 20px; display: grid; gap: 6px; }
.faq .answer a { color: var(--violet-ink); text-decoration: underline; text-decoration-color: var(--violet-line); text-underline-offset: 3px; }
.faq-group + .faq-group { margin-top: 64px; }
.faq-group h2 { font-size: 24px; letter-spacing: -0.025em; margin-bottom: 8px; }
.toc { position: sticky; top: 96px; display: grid; gap: 4px; padding: 0; list-style: none; }
.toc a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--ink-3); font-size: 15px; font-weight: 500; }
.toc a:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 900px) { .toc { position: static; display: flex; flex-wrap: wrap; gap: 8px; } .toc a { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; } }

/* ── Subpage hero & breadcrumbs ─────────────────────────── */
.page-hero { position: relative; padding: 72px 0 64px; isolation: isolate; }
.page-hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; pointer-events: none; background: radial-gradient(55% 60% at 50% 0%, rgb(167 139 250 / 0.18), transparent 70%); }
.page-hero.center { text-align: center; }
.page-hero h1 { margin-top: 16px; max-width: 880px; font-size: clamp(38px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 650; }
.page-hero .lead { margin: 20px 0 0; max-width: 660px; }
.page-hero.center h1, .page-hero.center .lead { margin-inline: auto; }
.page-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-hero.center .hero-cta { justify-content: center; }
.page-hero.center .eyebrow { justify-content: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; color: var(--ink-4); font-size: 13.5px; }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: #55555f; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.page-hero.center .crumbs { justify-content: center; }

/* Callouts */
.note { padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); font-size: 15.5px; }
.note.violet { background: var(--violet-soft); border-color: var(--violet-line); color: var(--ink-2); }
.note a { color: var(--violet-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Retention table / key-value lists */
.kv { display: grid; gap: 0; margin-top: 32px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.kv > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 24px; padding: 18px 22px; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--ink); font-weight: 550; }
.kv dd { margin: 0; color: var(--ink-3); }
@media (max-width: 640px) { .kv > div { grid-template-columns: 1fr; } }

/* ── Prose: legal documents & articles ─────────────────── */
.doc, .article { width: min(760px, 100% - 40px); margin: 0 auto; padding: 64px 0 112px; color: #b9b9c4; font-size: 17px; line-height: 1.78; }
.article { width: min(720px, 100% - 40px); font-size: 18px; line-height: 1.75; }
.doc h1, .article h1 { margin: 14px 0 16px; font-size: clamp(36px, 5vw, 52px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 650; }
.doc h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 23px; line-height: 1.3; letter-spacing: -0.025em; }
.doc h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.015em; }
.doc h4 { margin: 0 0 6px; font-size: 15.5px; letter-spacing: -0.01em; }
.article h2 { margin: 48px 0 12px; font-size: 28px; line-height: 1.25; letter-spacing: -0.03em; }
.article h3 { margin: 30px 0 8px; font-size: 20px; }
.doc p, .article p { margin: 0 0 16px; }
.doc p:last-child { margin-bottom: 0; }
.doc strong, .article strong { color: var(--ink); }
.doc a:not(.btn), .article a:not(.btn) { color: var(--violet-ink); text-decoration: underline; text-decoration-color: var(--violet-line); text-underline-offset: 3px; }
.doc a:not(.btn):hover, .article a:not(.btn):hover { text-decoration-color: currentColor; }
.doc ul, .doc ol, .article ul, .article ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.doc ul ul { margin: 8px 0 0; }
.doc li::marker, .article li::marker { color: var(--violet); }
.doc .muted { color: var(--ink-4); }
.doc .mono, .doc .mono * { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.doc-head { margin-bottom: 40px; }
.doc-eyebrow { margin: 0; }
.doc-strong { color: var(--ink); font-weight: 600; }
.doc-num { color: var(--violet-ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-label { font-size: 12.5px !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4) !important; }
.doc-section { padding: 40px 0; border-top: 1px solid var(--line); }
.doc-section-accent { padding: 32px; margin: 8px 0; border: 1px solid var(--violet-line); border-radius: 20px; background: var(--bg-tint); }
.doc-section-accent + .doc-section { border-top: 0; }
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.doc-card { padding: 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.doc-card p { font-size: 15px; }
.doc-note { margin: 16px 0; padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 15.5px; }
.doc-note > * + * { margin-top: 6px; }
.doc-callout { margin: 16px 0; padding: 14px 18px; border-radius: 12px; background: var(--violet-soft); border: 1px solid var(--violet-line); font-size: 15px; color: var(--ink-2); }
.doc-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-row:first-child { padding-top: 0; }
.doc-kv { font-size: 15px; }
.doc-table { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 14px; }
.doc table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15px; }
.doc th { text-align: left; font-weight: 600; color: var(--ink); padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.doc td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.doc td.mono { color: var(--violet-ink); white-space: nowrap; }
.doc-cta, .doc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 32px; }
.doc .crumbs, .article .crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; font-size: 13.5px; line-height: 1.5; }
.doc .crumbs a, .article .crumbs a { color: var(--ink-3); text-decoration: none; }
.doc .crumbs a:hover, .article .crumbs a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 640px) {
  .doc, .article { padding: 44px 0 80px; width: calc(100% - 32px); }
  .doc { font-size: 16px; } .article { font-size: 17px; }
  .doc-grid { grid-template-columns: 1fr; }
  .doc-section-accent { padding: 22px; }
  .doc-row { flex-direction: column; }
}

/* Articles */
.post-meta { color: var(--ink-4); font-size: 14.5px; }
.article .post-meta { margin: 0 0 32px; }
.article .lede { font-size: 21px; line-height: 1.6; color: var(--ink-2); }
.article figure { margin: 32px 0; }
.article figure img { border-radius: 16px; box-shadow: var(--shadow-md); }
.article figure.portrait img { max-width: 300px; }
.article .note { margin-top: 32px; }
.article-foot { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.article-foot h2 { margin-top: 0; font-size: 20px; }
.related { display: grid; gap: 10px; margin-top: 14px; padding: 0; list-style: none; }
.related a { color: var(--violet-ink); font-weight: 500; }
.post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.post-card { display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s, transform .2s; }
.post-card:hover { border-color: var(--violet-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.post-card .body { padding: 22px 22px 24px; }
.post-card h2 { font-size: 20px; line-height: 1.25; letter-spacing: -0.025em; }
.post-card p { margin-top: 8px; color: var(--ink-3); font-size: 15px; }
.post-card .post-meta { margin-top: 14px; font-size: 13.5px; }
@media (max-width: 900px) { .post-list { grid-template-columns: 1fr; } .post-card { flex-direction: row; } .post-card .thumb { width: 34%; aspect-ratio: auto; flex-shrink: 0; } }
@media (max-width: 520px) { .post-card { flex-direction: column; } .post-card .thumb { width: 100%; aspect-ratio: 16 / 9; } }

/* 404 */
.not-found { min-height: calc(100vh - 68px - 340px); display: grid; place-items: center; text-align: center; padding: 96px 0; }
.not-found .code { font-size: clamp(72px, 14vw, 128px); font-weight: 700; line-height: 1; letter-spacing: -0.06em; }
.not-found h1 { margin-top: 12px; font-size: clamp(26px, 3.4vw, 34px); }
.not-found p { margin: 14px auto 0; max-width: 440px; color: var(--ink-3); }
.not-found .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { padding: 80px 0 40px; border-top: 1px solid var(--line); background: #0b0b0e; color: var(--ink-3); font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 32px; }
.footer-grid h2 { margin-bottom: 14px; color: var(--ink); font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a:hover { color: var(--ink); }
.footer-about { margin-top: 16px; max-width: 320px; line-height: 1.6; }
.footer-company { margin-top: 12px; max-width: 320px; font-size: 13.5px; color: var(--ink-4); }
.footer-company a { text-decoration: underline; text-underline-offset: 3px; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-2); color: var(--ink-4); font-size: 13.5px; }
@media (max-width: 1040px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } }

/* ══ v4 components (2026-11 revamp) ═════════════════════════════════════════════════════════
   Icons come from /assets/icons.svg (Lucide "i-*", Simple Icons "b-*"). Motion is transform/opacity
   only, runs while in view (.live, set by site.js) and is off under prefers-reduced-motion. */

/* Icons */
.ic { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.ic-sm { width: 16px; height: 16px; } .ic-lg { width: 24px; height: 24px; }
.bi { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.bi-youtube, .bi-youtubeshorts { color: #ff0000; } .bi-tiktok { color: #fff; } .bi-instagram { color: #ff0069; }
.bi-facebook { color: #0866ff; } .bi-linkedin { color: #0a66c2; } .bi-x { color: #fff; } .bi-googledrive { color: #4285f4; }
.icon-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--violet-soft); color: var(--violet-ink); flex-shrink: 0; }
.icon-tile .ic { width: 22px; height: 22px; }
.icon-tile.white { background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.icon-tile.white .bi { width: 22px; height: 22px; }
.card-icon .ic { width: 20px; height: 20px; }

/* Phone frame for 9:16 media */
.phone {
  position: relative; margin: 0; flex: 0 0 auto; width: 190px; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 22px; background: #111; box-shadow: var(--shadow-lg); outline: 1px solid rgb(255 255 255 / 0.09); outline-offset: -1px;
  transform: translateZ(0);
}
.phone img, .phone video { width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  background: rgb(10 10 16 / 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; white-space: nowrap;
}
.tag .ic, .tag .bi { width: 13px; height: 13px; }
.tag.light { background: rgb(255 255 255 / 0.92); color: #0a0a0c; box-shadow: var(--shadow-sm); }
.tag.tl { left: 10px; top: 10px; } .tag.br { right: 10px; bottom: 10px; } .tag.bl { left: 10px; bottom: 10px; } .tag.tr { right: 10px; top: 10px; }

/* Attribution for the NASA-sourced example clips */
.attrib { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 18px auto 0; max-width: 720px; color: var(--ink-4); font-size: 12.5px; line-height: 1.5; text-align: center; }
.attrib .ic { width: 14px; height: 14px; margin-top: 2px; }
.attrib.left { justify-content: flex-start; text-align: left; margin-left: 0; }
.dark-band .attrib, .band-media.dark .attrib { color: #a9a4bd; }

/* Header extras */
.menu-panel li a { display: flex; align-items: center; gap: 12px; }
.menu-panel li a .ic { color: var(--violet-ink); width: 19px; height: 19px; }

/* ── Hero v4 ── */
.hero h1 { font-size: clamp(42px, 6.6vw, 80px); }
.hero-meta li::before { display: none; }
.hero-meta .ic { width: 16px; height: 16px; color: var(--violet); }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.chip.violet { background: var(--violet-soft); border-color: var(--violet-line); color: var(--violet-ink); }
.chip.ok { background: rgb(52 211 153 / 0.12); border-color: rgb(52 211 153 / 0.3); color: var(--ok); }
.chip .ic, .chip .bi { width: 13px; height: 13px; }

/* Crop box: the 9:16 window ContentVeo chose. --x / --w / --h are % of the 16:9 frame. */
.crop {
  position: absolute; top: 0; left: var(--x, 33%); width: var(--w, 31.6%); height: var(--h, 100%); z-index: 2;
  border: 2px solid #fff; border-radius: 6px; box-shadow: 0 0 0 999px rgb(15 13 24 / 0.55), 0 0 0 1px rgb(124 58 237 / 0.6);
  transition: left .7s cubic-bezier(.2,.8,.2,1), width .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1), opacity .4s;
}
.crop::before, .crop::after { /* corner brackets */
  content: ''; position: absolute; inset: 8px; border: 2.5px solid transparent; border-radius: 4px;
  border-top-color: var(--violet-3); border-left-color: var(--violet-3);
  -webkit-mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat; mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat;
}
.crop::after { border-color: transparent; border-bottom-color: var(--violet-3); border-right-color: var(--violet-3);
  -webkit-mask-position: bottom right; mask-position: bottom right; }
.crop-tag { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; }
.crop-tag.chip { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: var(--shadow-violet); }

/* ── Platform strip (real logos) ── */
.logo-strip { padding: 64px 0 0; text-align: center; }
.logo-strip > .wrap > p { color: var(--ink-4); font-size: 14px; font-weight: 500; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.logo-row a, .logo-row span.lr {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 15px; font-weight: 550; box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s;
}
.logo-row .bi { width: 22px; height: 22px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.logo-row a:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-md); }
.logo-row a:hover .bi { transform: scale(1.12) rotate(-6deg); }
.pop > * { transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .pop:not(.in) > * { opacity: 0; transform: translateY(14px) scale(.96); }

/* ── Showcase: real output in phone frames ── */
.showcase { position: relative; }
.show-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 56px; padding: 0; list-style: none; }
.show-item { display: grid; gap: 12px; }
.show-item:nth-child(even) { margin-top: 44px; }
.show-item .phone { width: 100%; border-radius: 20px; }
.show-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px; color: var(--ink-3); font-size: 13px; font-weight: 550; }
.show-meta .bis { display: inline-flex; gap: 4px; }
.show-meta .bis .bi { width: 15px; height: 15px; }
.score-chip { display: inline-flex; align-items: center; gap: 4px; }
.score-chip .ic { width: 13px; height: 13px; }
@media (max-width: 1000px) {
  .show-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -16px; padding: 4px 16px 18px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .show-item { flex: 0 0 42vw; max-width: 200px; scroll-snap-align: center; }
  .show-item:nth-child(even) { margin-top: 0; }
}
.scroll-hint { display: none; margin-top: 6px; color: var(--ink-4); font-size: 13px; text-align: center; }
@media (max-width: 1000px) { .scroll-hint { display: block; } }

/* ── Bento of capabilities, each with a live visual ── */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; margin-top: 56px; }
.bento > .tile { position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.tile.span-2 { grid-column: span 2; }
.tile h3 { margin-top: 16px; font-size: 20px; line-height: 1.25; letter-spacing: -0.025em; }
.tile p { margin-top: 8px; color: var(--ink-3); font-size: 15.5px; }
.tile .viz { position: relative; margin: 22px -26px -26px; padding: 22px 26px 26px; flex: 1; display: grid; align-content: center; background: radial-gradient(90% 90% at 80% 0%, rgb(124 58 237 / 0.13), transparent 60%), #0d0c11; border-top: 1px solid var(--line); min-height: 220px; }
.tile-head { display: flex; align-items: center; gap: 12px; }
.tile-head .icon-tile { width: 40px; height: 40px; border-radius: 12px; }
.tile-head .eyebrow::before { display: none; }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile.span-2 { grid-column: span 2; } }
@media (max-width: 680px) { .bento { grid-template-columns: 1fr; } .tile.span-2 { grid-column: auto; } .bento > .tile { padding: 22px; } .tile .viz { margin: 20px -22px -22px; padding: 20px 18px 22px; } }

/* viz: moments on a timeline */
.vz-moments { display: grid; gap: 14px; }
.vz-prompt { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); font-size: 13.5px; color: var(--ink-3); max-width: 460px; }
.vz-prompt .ic { color: var(--violet); width: 16px; height: 16px; }
.vz-prompt > span:not(.go) { white-space: nowrap; }
.vz-prompt b { color: var(--ink); font-weight: 550; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vz-prompt .go { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--violet); color: #fff; flex-shrink: 0; }
.vz-prompt .go .ic { color: #fff; width: 15px; height: 15px; }
.vz-track { position: relative; height: 78px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.vz-track .bars { position: absolute; inset: 14px 12px; display: flex; align-items: center; gap: 2px; }
.vz-track .bars i { flex: 1; height: var(--h); border-radius: 2px; background: #34343c; }
.vz-seg { position: absolute; top: 8px; bottom: 8px; left: var(--l); width: var(--w); border-radius: 9px; background: rgb(124 58 237 / 0.14); border: 1.5px solid var(--violet); transform-origin: left; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s; transition-delay: calc(var(--i) * 0.35s + .3s); }
.vz-seg .chip { position: absolute; top: -1px; left: 50%; translate: -50% -110%; }
.vz-time { display: flex; justify-content: space-between; color: var(--ink-4); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.vz-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--violet); box-shadow: 0 0 12px 2px rgb(124 58 237 / 0.35); }
.vz-moments .vz-track { margin-top: 26px; overflow: visible; }
.vz-moments .vz-track .bars { overflow: hidden; }
.js .anim:not(.in) .vz-seg { transform: scaleX(0); opacity: 0; }
.live .vz-scan { animation: scan-x 6s linear infinite; }
@keyframes scan-x { from { transform: translateX(0); } to { transform: translateX(var(--track-w, 600px)); } }

/* viz: score list */
.vz-score { display: grid; gap: 10px; }
.vz-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vz-row img { width: 34px; height: 48px; border-radius: 7px; object-fit: cover; }
.vz-bar { height: 8px; border-radius: 99px; background: #2a2a31; overflow: hidden; }
.vz-bar b { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--grad); transform-origin: left; transform: scaleX(var(--v)); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * .15s + .2s); }
.js .anim:not(.in) .vz-bar b { transform: scaleX(0); }
.vz-row .n { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.vz-row .t { font-size: 13px; font-weight: 550; color: var(--ink-2); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* viz: caption styles on a real frame */
.vz-caps { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.vz-caps .phone { width: 150px; border-radius: 18px; }
.vz-caps .phone img { object-position: var(--ox, 50%) 50%; }
.capline { position: absolute; left: 8px; right: 8px; bottom: 26%; text-align: center; font-weight: 800; font-size: 14px; line-height: 1.25; letter-spacing: -0.01em; transition: opacity .3s, transform .3s; }
.capline span { padding: 2px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cap-black .capline span { background: #000; color: #fff; }
.cap-outline .capline span { color: #fff; padding: 0; text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000; }
.cap-bold .capline span { background: var(--violet); color: #fff; border-radius: 4px; }
.capline em { font-style: normal; color: #fde047; }
.cap-black .capline em, .cap-outline .capline em { color: #fde047; }
.seg-btns { display: grid; gap: 6px; }
.seg-btns button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font: 550 14px var(--font); text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.seg-btns button .sw { width: 26px; height: 18px; border-radius: 5px; flex-shrink: 0; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.seg-btns .sw.black { background: #000; color: #fff; } .seg-btns .sw.outline { background: #d9d6e3; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; } .seg-btns .sw.bold { background: var(--violet); color: #fff; }
.seg-btns button[aria-pressed="true"] { border-color: var(--violet); background: var(--violet-soft); color: var(--violet-ink); }
.seg-btns button:hover { border-color: var(--violet-line); }
@media (max-width: 400px) { .vz-caps { grid-template-columns: 1fr; justify-items: center; } .vz-caps .seg-btns { width: 100%; } }

/* viz: covers */
.vz-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cover { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #111; box-shadow: var(--shadow-md); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover .ct { position: absolute; left: 8px; right: 8px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #fff; }
.cover.pop-style .ct { bottom: 16%; font-size: 15px; text-transform: uppercase; text-align: center; }
.cover.pop-style .ct span { background: #fde047; color: #111; padding: 1px 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cover.cine-style::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.85)); }
.cover.cine-style .ct { z-index: 1; bottom: 10%; font-size: 14px; font-weight: 700; text-align: left; letter-spacing: 0; }
.cover.cine-style .ct small { display: block; margin-bottom: 4px; font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd; }
.cover.min-style img { filter: saturate(.75); }
.cover.min-style .ct { top: 9%; font-size: 14px; font-weight: 700; text-align: center; color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / 0.5); }
.cover .pick { position: absolute; right: 7px; top: 7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgb(255 255 255 / 0.9); color: var(--violet); }
.cover .pick .ic { width: 12px; height: 12px; stroke-width: 3; }
.cover.chosen { outline: 3px solid var(--violet); outline-offset: 2px; }
.live .vz-covers .cover { animation: cover-bob 6s ease-in-out infinite; }
.live .vz-covers .cover:nth-child(2) { animation-delay: -2s; } .live .vz-covers .cover:nth-child(3) { animation-delay: -4s; }
@keyframes cover-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* viz: post copy per platform */
.vz-copy { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.vz-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.vz-tabs button { display: grid; place-items: center; flex: 1; height: 34px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; opacity: .55; transition: opacity .2s, background-color .2s; }
.vz-tabs button .bi { width: 17px; height: 17px; }
.vz-tabs button[aria-pressed="true"] { opacity: 1; background: var(--surface-3); box-shadow: var(--shadow-sm); }
.vz-tabs button:hover { opacity: 1; }
.vz-panes { position: relative; display: grid; padding: 14px 16px 16px; }
.vz-pane { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; visibility: hidden; }
.vz-pane.on { opacity: 1; transform: none; visibility: visible; }
.vz-pane .lbl { color: var(--ink-4); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.vz-pane .ttl { margin-top: 4px; color: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.35; }
.vz-pane .cap { margin-top: 6px; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.vz-pane .tags { margin-top: 8px; color: var(--violet-ink); font-size: 13px; font-weight: 550; }

/* viz: calendar */
.vz-cal { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.vz-cal-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.vz-cal-head .ic { width: 16px; height: 16px; color: var(--violet); }
.vz-cal-head .chip { margin-left: auto; }
.vz-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.vz-day { min-height: 150px; padding: 8px 6px; border-right: 1px solid var(--line); }
.vz-day:last-child { border-right: 0; }
.vz-day > span { display: block; color: var(--ink-4); font-size: 11.5px; font-weight: 600; text-align: center; }
.vz-post { position: relative; margin-top: 8px; border-radius: 9px; overflow: hidden; aspect-ratio: 9 / 13; background: #111; box-shadow: var(--shadow-sm); transition: opacity .45s, transform .55s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(var(--i) * 0.18s + .2s); }
.vz-post img { width: 100%; height: 100%; object-fit: cover; }
.vz-post .bi { position: absolute; left: 4px; bottom: 4px; width: 14px; height: 14px; padding: 2px; box-sizing: content-box; border-radius: 5px; background: rgb(10 10 16 / 0.75); }
.vz-post .tm { position: absolute; right: 4px; top: 4px; padding: 1px 5px; border-radius: 99px; background: rgb(10 10 16 / 0.6); color: #fff; font-size: 9.5px; font-weight: 600; }
.js .anim:not(.in) .vz-post { opacity: 0; transform: translateY(-14px) scale(.9); }
@media (max-width: 560px) { .vz-day { min-height: 118px; padding: 6px 3px; } .vz-post .tm { display: none; } }

/* viz: notifications */
.vz-notes { display: grid; gap: 10px; }
.note-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * .3s + .2s); }
.note-card .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
.note-card .icon-tile .ic { width: 18px; height: 18px; }
.note-card > div { min-width: 0; }
.note-card b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.note-card > div > span { display: block; color: var(--ink-4); font-size: 12.5px; }
.note-card > .chip { flex-shrink: 0; align-self: center; }
.js .anim:not(.in) .note-card { opacity: 0; transform: translateX(24px); }
.live .bell .ic { animation: ring-bell 3.2s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ring-bell { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 86% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }

/* viz: face tracking box on a wide frame */
.vz-track-face { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #111; box-shadow: var(--shadow-md); }
.vz-track-face img { width: 100%; height: 100%; object-fit: cover; }
.vz-track-face .crop { box-shadow: 0 0 0 999px rgb(15 13 24 / 0.45); }
.live .vz-track-face .crop { animation: face-follow 6s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes face-follow { 0% { transform: translateX(-95%); opacity: .5; } 30%, 100% { transform: translateX(0); opacity: 1; } }

/* ── Before / after reframing ── */
.ba { margin-top: 56px; }
.ba-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.42fr); gap: 28px; align-items: center; padding: 28px; border-radius: 28px; background: radial-gradient(80% 90% at 85% 0%, #2a1856, #0f0d18 70%); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.ba-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.ba-frame img, .ba-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-frame .crop { transition: left .8s cubic-bezier(.65,0,.2,1), width .8s cubic-bezier(.65,0,.2,1), height .8s cubic-bezier(.65,0,.2,1); }
.ba figcaption { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #c9c6d8; font-size: 13.5px; font-weight: 500; }
.ba figcaption .ic { width: 16px; height: 16px; color: var(--violet-3); }
.ba-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--violet); color: #fff; box-shadow: 0 0 0 8px rgb(124 58 237 / 0.18); }
.ba-arrow .ic { width: 22px; height: 22px; }
.live .ba-arrow { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.ba-tall .phone { width: 100%; max-width: 270px; margin-inline: auto; border-radius: 22px; outline: 2px solid rgb(255 255 255 / 0.12); transition: opacity .3s; }
.ba-tall .phone.swap { opacity: .25; }
.ba-tall figcaption { justify-content: center; }
.ba-picks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 720px; margin: 22px auto 0; padding: 0; list-style: none; }
.ba-picks button { position: relative; display: grid; gap: 6px; justify-items: center; width: 100%; padding: 6px 6px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink-3); font: 550 12px/1.3 var(--font); transition: border-color .2s, box-shadow .2s, transform .2s; }
.ba-picks img { width: 100%; aspect-ratio: 9 / 12; object-fit: cover; border-radius: 9px; }
.ba-picks button:hover { transform: translateY(-2px); border-color: var(--violet-line); }
.ba-picks button[aria-pressed="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px rgb(124 58 237 / 0.18); color: var(--violet-ink); }
@media (max-width: 860px) {
  .ba-stage { grid-template-columns: 1fr; gap: 18px; padding: 16px; border-radius: 22px; }
  .ba-arrow { margin-inline: auto; transform: rotate(90deg); }
  .live .ba-arrow { animation: none; }
  .ba-tall .phone { max-width: 210px; }
}
@media (max-width: 560px) { .ba-picks { gap: 6px; } .ba-picks button { padding: 4px 4px 6px; font-size: 10.5px; } .ba-picks span { display: none; } }

/* ── Flow: 5-step how-it-works with a filling line ── */
.flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 56px 0 0; padding: 0; list-style: none; }
.flow::before { content: ''; position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; background: var(--line-2); }
.flow::after { content: ''; position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; background: var(--grad); transform-origin: left; transform: scaleX(1); transition: transform 2.2s cubic-bezier(.4,0,.2,1) .2s; }
.js .flow:not(.in)::after { transform: scaleX(0); }
.flow > li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--violet-ink); box-shadow: var(--shadow-md); transition: transform .5s cubic-bezier(.3,1.5,.5,1), background-color .4s, color .4s; transition-delay: calc(var(--i) * .4s + .2s); }
.flow-ic .ic { width: 26px; height: 26px; }
.flow-ic::after { content: attr(data-n); position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 11.5px; font-weight: 700; box-shadow: 0 0 0 3px var(--bg); }
.flow.in .flow-ic { background: var(--violet-soft); }
.js .flow:not(.in) .flow-ic { transform: scale(.7); }
.flow h3 { margin-top: 18px; font-size: 17px; letter-spacing: -0.02em; }
.flow > li > p { flex-grow: 1; }
.flow p { margin-top: 6px; color: var(--ink-3); font-size: 14.5px; line-height: 1.55; }
.flow .mini { width: 100%; margin-top: 16px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-height: 74px; display: grid; align-content: center; gap: 6px; }
.mini-up { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); font-weight: 550; }
.mini-up .bi, .mini-up .ic { width: 15px; height: 15px; }
.mini-bar { height: 6px; border-radius: 99px; background: #2a2a31; overflow: hidden; }
.mini-bar b { display: block; height: 100%; border-radius: 99px; background: var(--grad); transform-origin: left; }
.live .mini-bar b { animation: fill 3.2s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes fill { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.mini-wave { display: flex; align-items: center; gap: 2px; height: 30px; }
.mini-wave i { flex: 1; height: var(--h); border-radius: 2px; background: #34343c; }
.mini-wave i.sel { background: var(--violet-3); }
.live .mini-wave i.sel { animation: pulse-bar 1.6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 80ms); }
@keyframes pulse-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
.mini-cap { font-size: 12.5px; font-weight: 800; text-align: center; }
.mini-cap span { background: #000; color: #fff; padding: 2px 5px; }
.mini-cap span:nth-child(2) { color: #fde047; }
.live .mini-cap span { animation: word-in 2.4s steps(1) infinite; }
.live .mini-cap span:nth-child(2) { animation-delay: .3s; } .live .mini-cap span:nth-child(3) { animation-delay: .6s; }
@keyframes word-in { 0% { opacity: .15; } 15%, 100% { opacity: 1; } }
.mini-ok { display: flex; justify-content: center; gap: 6px; }
.mini-ok span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.mini-ok .y { background: rgb(52 211 153 / 0.14); color: var(--ok); } .mini-ok .n { background: var(--bg-soft); color: var(--ink-4); }
.mini-ok .ic { width: 13px; height: 13px; }
.live .mini-ok .y { animation: tap 2.8s ease-in-out infinite; }
@keyframes tap { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(.92); } 80% { transform: scale(1.06); } }
.mini-logos { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; }
.mini-logos .bi { width: 17px; height: 17px; }
.live .mini-logos .bi { animation: hop 3s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms); }
@keyframes hop { 0%, 40%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } 60% { transform: translateY(0); } }
@media (max-width: 960px) {
  .flow { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin-inline: auto; }
  .flow::before, .flow::after { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; }
  .flow::after { transform-origin: top; transform: scaleY(1); }
  .js .flow:not(.in)::after { transform: scaleY(0); }
  .flow > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; padding-bottom: 28px; }
  .flow > li > *:not(.flow-ic) { grid-column: 2; }
  .flow-ic { grid-row: 1 / span 3; }
  .flow h3 { margin-top: 4px; }
  .flow .mini { margin-top: 12px; }
}

/* ── Auto Pilot pipeline ── */
.pipe { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto minmax(30px, 1fr) auto minmax(30px, 1fr) auto; align-items: start; gap: 0; margin-top: 48px; }
.pipe-node { display: grid; justify-items: center; gap: 10px; text-align: center; width: 150px; }
.pipe-node .box { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.pipe-node .box .bi, .pipe-node .box .ic { width: 34px; height: 34px; }
.pipe-node .box img { width: 44px; height: 44px; border-radius: 12px; }
.pipe-node b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pipe-node span { color: var(--ink-4); font-size: 13px; line-height: 1.4; }
.pipe-node .box.brand-box::after { content: ''; position: absolute; inset: -6px; border-radius: 28px; border: 2px solid transparent; border-top-color: var(--violet-3); border-right-color: var(--violet-3); }
.live .pipe-node .box.brand-box::after { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pipe-link { position: relative; height: 2px; margin: 41px 6px 0; background: repeating-linear-gradient(90deg, var(--violet-line) 0 6px, transparent 6px 11px); overflow: hidden; }
.pipe-link::after { content: ''; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet-3); opacity: 0; }
.live .pipe-link::after { animation: travel 2.4s cubic-bezier(.5,0,.5,1) infinite; animation-delay: var(--d, 0s); }
@keyframes travel { 0% { transform: translateX(-10px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(var(--len, 160px)); opacity: 0; } }
.pipe-clips { display: flex; gap: 4px; }
.pipe-clips i { width: 18px; height: 32px; border-radius: 4px; background: var(--grad); opacity: .85; }
.pipe-clips i:nth-child(2) { opacity: .6; } .pipe-clips i:nth-child(3) { opacity: .4; }
.pipe-logos { display: grid; grid-template-columns: repeat(3, 18px); gap: 6px; }
.pipe-logos .bi { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .pipe { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .pipe-node { width: auto; max-width: 260px; }
  .pipe-link { width: 2px; height: 40px; margin: 10px auto; background: repeating-linear-gradient(180deg, var(--violet-line) 0 6px, transparent 6px 11px); }
  .pipe-link::after { left: -3px; top: 0; }
  .live .pipe-link::after { animation-name: travel-y; }
  @keyframes travel-y { 0% { transform: translateY(-10px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
}

/* ── Feature list with icons (compact) ── */
.ifeat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin-top: 48px; }
.ifeat > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-content: start; }
.ifeat .icon-tile { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; }
.ifeat .icon-tile .ic { width: 20px; height: 20px; }
.ifeat h3 { font-size: 16.5px; letter-spacing: -0.015em; padding-top: 2px; }
.ifeat p { color: var(--ink-3); font-size: 15px; }
@media (max-width: 900px) { .ifeat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ifeat { grid-template-columns: 1fr; } }

/* Trust items with icons (dark band) */
.trust-item .ic { width: 22px; height: 22px; color: #c4b5fd; margin-bottom: 12px; }

/* CTA band with clip posters */
.cta-band.with-clips { padding-inline: 72px; }
.cta-clips { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta-clips img { position: absolute; width: 120px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; opacity: .55; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6); }
.cta-clips img:nth-child(1) { left: 3%; top: 16%; transform: rotate(-8deg); }
.cta-clips img:nth-child(2) { left: 11%; top: 52%; transform: rotate(5deg); width: 96px; opacity: .35; }
.cta-clips img:nth-child(3) { right: 3%; top: 14%; transform: rotate(7deg); }
.cta-clips img:nth-child(4) { right: 11%; top: 54%; transform: rotate(-5deg); width: 96px; opacity: .35; }
@media (max-width: 1000px) { .cta-clips { display: none; } .cta-band.with-clips { padding-inline: 22px; } }

/* Page hero with media on the right */
.page-hero.split .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.page-hero.split .hero-media { position: relative; display: flex; justify-content: center; gap: 14px; }
.page-hero.split .hero-media .phone { width: 200px; }
.page-hero.split .hero-media .phone:nth-child(2) { margin-top: 56px; width: 180px; }
.hero-media .attrib { position: absolute; left: 0; right: 0; bottom: -40px; }
@media (max-width: 900px) {
  .page-hero.split .wrap { grid-template-columns: 1fr; gap: 40px; }
  .page-hero.split .hero-media .phone { width: 42vw; max-width: 200px; }
  .page-hero.split .hero-media .phone:nth-child(2) { width: 38vw; max-width: 180px; }
}

/* Integration cards with real logos */
.int-logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm); flex-shrink: 0; }
.int-logo .bi { width: 26px; height: 26px; }
.int-logo .ic { width: 24px; height: 24px; color: var(--violet-ink); }
.int-card .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
a.card .more, .card .more { margin-top: auto; padding-top: 18px; }
.card { display: flex; flex-direction: column; }

/* Orbit of logos (integrations hero) */
.orbit { position: relative; width: 340px; height: 340px; margin-inline: auto; }
.orbit::before, .orbit::after { content: ''; position: absolute; border-radius: 50%; border: 1px dashed var(--violet-line); }
.orbit::before { inset: 0; } .orbit::after { inset: 70px; }
.orbit-center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 28px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.orbit-center img { width: 56px; height: 56px; border-radius: 14px; }
.orbit-ring { position: absolute; inset: 0; }
.live .orbit-ring { animation: spin 40s linear infinite; }
.orbit-ring > span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  transform: rotate(calc(var(--i) * 60deg)) translateY(-170px) rotate(calc(var(--i) * -60deg)); }
.orbit-ring > span .bi { width: 26px; height: 26px; }
.live .orbit-ring > span > svg { animation: spin 40s linear infinite reverse; }
@media (max-width: 420px) { .orbit { width: 280px; height: 280px; } .orbit::after { inset: 56px; } .orbit-ring > span { transform: rotate(calc(var(--i) * 60deg)) translateY(-140px) rotate(calc(var(--i) * -60deg)); width: 50px; height: 50px; margin: -25px; } }

/* Compare & misc */
.vs-head { display: flex; align-items: center; gap: 8px; }
.yes .ic, .no .ic { width: 18px; height: 18px; }
.footer-platforms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; list-style: none; padding: 0; }
.footer-platforms li { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.footer-platforms .bi { width: 15px; height: 15px; }
.footer-grid ul.footer-platforms { display: flex; gap: 6px; }


/* How-it-works step bands */
.steps-detail .band h2 { display: flex; align-items: center; gap: 14px; }
.band h2 .step-ic { display: grid; flex-shrink: 0; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--violet-soft); color: var(--violet-ink); vertical-align: -8px; }
.band h2 .step-ic .ic { width: 22px; height: 22px; }
.band-copy > p + p { margin-top: 12px; }
.steps-detail .band-media .vz-notes { max-width: 460px; margin-inline: auto; }
.note-card .mini-bar { max-width: 100%; }


/* About: strip of real clips */
.about-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin: 0 auto; }
.about-strip .phone { width: 100%; border-radius: 18px; }
.about-strip .phone:nth-child(even) { transform: translateY(24px); }
.about-strip + .attrib { margin-top: 40px; }
section.flush-top + section.flush-top { padding-top: 0; }
@media (max-width: 640px) { .about-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-strip .phone:nth-child(n+4) { display: none; } }
/* 404 */
.nf-visual { position: relative; display: grid; justify-items: center; margin-bottom: 18px; }
.nf-visual .phone { width: 120px; border-radius: 18px; transform: rotate(-4deg); }
.nf-visual .chip { position: absolute; bottom: -10px; }
.not-found .btn .ic { margin-right: 2px; }
.post-meta { display: inline-flex; align-items: center; gap: 6px; }
.post-meta .ic { width: 14px; height: 14px; }
.btn .ic-sm { width: 16px; height: 16px; }


/* FAQ topic icons */
.toc a { display: flex; align-items: center; gap: 10px; }
.toc a .ic { width: 17px; height: 17px; color: var(--violet-ink); }
.faq-group h2 { display: flex; align-items: center; gap: 12px; }
.faq-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--violet-soft); color: var(--violet-ink); }
.faq-ic .ic { width: 19px; height: 19px; }


/* Pricing icons */
.plan h3 { display: flex; align-items: center; gap: 10px; }
.plan-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--violet-soft); color: var(--violet-ink); }
.plan-ic .ic { width: 18px; height: 18px; }
.plan-featured .plan-ic { background: var(--violet); color: #fff; }
.table td.yes .ic { color: var(--ok); stroke-width: 2.5; }
.table td.no .ic { color: #6b6b78; }

/* Generic in-view looping visuals pause off-screen */
.anim:not(.live) *, .anim:not(.live)::before, .anim:not(.live)::after { animation-play-state: paused !important; }

.card-icon { align-self: flex-start; }

/* ══ Pass 2 (2026-11): cinematic, video-led components ══════════════════════════════════════════
   Link pill · hero actions · product-tour carousel (.reel) · browser frame · floating pill · AI cards ·
   workflow card · review callouts · clip marquee · CTA with background video. All motion is
   transform/opacity, runs only while in view, and is off under prefers-reduced-motion. */

/* Soft glow panels behind media (opus-style warm blur, in our violet family) */
.tint-violet { background: radial-gradient(70% 90% at 15% 0%, rgb(124 58 237 / 0.42), transparent 62%), radial-gradient(60% 80% at 100% 100%, rgb(167 139 250 / 0.16), transparent 60%), #131118; }
.tint-amber { background: radial-gradient(70% 90% at 10% 0%, rgb(245 158 11 / 0.26), transparent 62%), radial-gradient(70% 90% at 100% 100%, rgb(244 63 94 / 0.16), transparent 62%), radial-gradient(60% 60% at 60% 40%, rgb(124 58 237 / 0.10), transparent 70%), #16120f; }
.tint-rose { background: radial-gradient(70% 90% at 90% 0%, rgb(244 63 94 / 0.26), transparent 62%), radial-gradient(70% 90% at 0% 100%, rgb(124 58 237 / 0.22), transparent 62%), #151014; }
.tint-teal { background: radial-gradient(70% 90% at 10% 100%, rgb(20 184 166 / 0.22), transparent 62%), radial-gradient(70% 90% at 90% 0%, rgb(124 58 237 / 0.28), transparent 62%), #0f1215; }

/* ── Link pill: paste a video link → app sign-up with ?video= ── */
.linkpill {
  display: flex; align-items: center; gap: 10px; width: min(100%, 580px); height: 62px; padding: 6px 6px 6px 20px;
  border-radius: 999px; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.13);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 50px -18px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.06);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.linkpill:focus-within { border-color: var(--violet-3); background: rgb(255 255 255 / 0.08); box-shadow: 0 18px 50px -18px rgb(0 0 0 / 0.8), 0 0 0 4px rgb(167 139 250 / 0.22); }
.linkpill > .ic { width: 19px; height: 19px; color: #8c8c99; }
.linkpill input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 16px var(--font); text-overflow: ellipsis; }
.linkpill input::placeholder { color: #8c8c99; opacity: 1; }
.linkpill .btn { min-height: 50px; padding: 0 24px; flex-shrink: 0; }
.linkpill.sm { height: 56px; width: min(100%, 470px); }
.linkpill.sm .btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; }

.hero { padding-top: 76px; }
.hero h1 { margin-top: 24px; font-size: clamp(42px, 6.4vw, 84px); line-height: .98; letter-spacing: -0.05em; }
.hero .lead { max-width: 700px; margin-top: 22px; color: #b0b0bc; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; }
.hero-actions .or { color: var(--ink-4); font-size: 15px; font-weight: 500; }
.btn-ghost { background: rgb(255 255 255 / 0.03); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.07); border-color: #45454f; }
.hero-actions .btn-ghost { min-height: 62px; padding: 0 26px; }
.hero-meta { margin-top: 20px; }
.hero-meta .ic { color: var(--violet-3); }
@media (max-width: 760px) {
  .hero { padding-top: 64px; }
  .hero-actions { flex-direction: column; gap: 10px; margin-top: 32px; }
  .hero-actions .linkpill { flex-wrap: wrap; height: auto; padding: 8px; border-radius: 24px; }
  .hero-actions .linkpill > .ic { margin-left: 10px; }
  .hero-actions .linkpill input { height: 46px; }
  .hero-actions .linkpill .btn { width: 100%; }
  .hero-actions .btn-ghost { min-height: 48px; }
}

/* ── Browser-like frame for app screen recordings ── */
.browser { position: relative; border-radius: 14px; overflow: hidden; background: #f4f4f7; box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.10); }
.browser-bar { position: relative; display: flex; align-items: center; height: 36px; padding: 0 14px; background: #1c1c21; border-bottom: 1px solid #0a0a0c; }
.browser-bar .dots { display: flex; gap: 6px; }
.browser-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #3b3b43; }
.browser-bar .url {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: min(46%, 320px); height: 22px; padding: 0 10px; border-radius: 7px; background: #2a2a31; color: #a0a0ab; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
}
.browser-bar .url .ic { width: 11px; height: 11px; }
.browser > video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #f4f4f7; }
@media (max-width: 560px) {
  .browser { border-radius: 9px; }
  .browser-bar { height: 24px; padding: 0 9px; }
  .browser-bar .dots { gap: 4px; } .browser-bar .dots i { width: 6px; height: 6px; }
  .browser-bar .url { height: 15px; font-size: 9px; border-radius: 5px; width: 52%; }
  .browser-bar .url .ic { width: 8px; height: 8px; }
}

/* ── Product tour carousel ── */
.reel-section { position: relative; padding: 44px 0 0; isolation: isolate; }
.reel-section::before { content: ''; position: absolute; inset: 0 0 20%; z-index: -1; pointer-events: none; background: radial-gradient(45% 50% at 50% 45%, rgb(124 58 237 / 0.18), transparent 70%); }
.reel { position: relative; --half: min(500px, 50vw - 110px); }
.reel-view { position: relative; }
.reel-track {
  position: relative; display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px calc(50% - var(--half)) 26px;
}
.reel-track::-webkit-scrollbar { display: none; }
.reel-slide { flex: 0 0 calc(var(--half) * 2); min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.reel-card { position: relative; padding: clamp(10px, 3.2vw, 36px); border-radius: 30px; border: 1px solid rgb(255 255 255 / 0.07); transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.js .reel-slide:not(.is-active) .reel-card { opacity: .42; transform: scale(.955); cursor: pointer; }
.js .reel-slide:not(.is-active) .reel-card:hover { opacity: .6; }
.reel-nav {
  position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 50px; height: 50px; margin-top: -38px; padding: 0;
  border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.16); background: rgb(20 20 24 / 0.7); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s, transform .2s;
}
.reel-nav:hover { background: rgb(40 40 46 / 0.9); transform: scale(1.06); }
.reel-nav .ic { width: 20px; height: 20px; }
.reel-nav.prev { left: max(12px, calc(50% - var(--half) - 82px)); }
.reel-nav.next { right: max(12px, calc(50% - var(--half) - 82px)); }
.reel-bar { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(100% - 32px, 980px); margin: 4px auto 0; }
.reel-tabs { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.reel-tabs::-webkit-scrollbar { display: none; }
.reel-tabs button, .reel-pause {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 44px; padding: 0 16px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-3); font: 550 14px var(--font); white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.reel-tabs button .ic { width: 17px; height: 17px; }
.reel-tabs button:hover, .reel-pause:hover { color: var(--ink); border-color: #45454f; }
.reel-tabs button[aria-selected="true"] { background: var(--surface-2); border-color: #3d3d46; color: var(--ink); }
.reel-tabs button[aria-selected="true"] .ic { color: var(--violet-3); }
.reel-tabs .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; }
.reel-tabs button[aria-selected="true"] .prog { opacity: 1; }
.reel-pause { justify-content: center; width: 44px; padding: 0; }
.reel-pause .ic { width: 17px; height: 17px; }
.reel .attrib { margin-top: 18px; padding-inline: 16px; }
html:not(.js) .reel-bar, html:not(.js) .reel-nav { display: none; }
@media (max-width: 760px) {
  .reel { --half: calc(50vw - 24px); }
  .reel-track { gap: 10px; padding-bottom: 18px; }
  .reel-card { border-radius: 18px; }
  .js .reel-slide:not(.is-active) .reel-card { transform: none; }
  .reel-nav { display: none; }
  .reel-bar { justify-content: flex-start; width: 100%; padding: 0 16px; }
  .reel-tabs { flex: 1; }
  .reel-tabs button { height: 40px; padding: 0 13px; font-size: 13.5px; }
  .reel-pause { height: 40px; width: 40px; }
}

/* Reframe slide: wide source → 9:16 clip. Sized in container units so it scales with the slide. */
.rf { position: relative; aspect-ratio: 16 / 10; container-type: inline-size; overflow: hidden; background: radial-gradient(60% 80% at 30% 40%, rgb(20 184 166 / 0.10), transparent 70%), radial-gradient(50% 70% at 82% 50%, rgb(124 58 237 / 0.18), transparent 70%), #0c0d10; }
.rf-wide { position: absolute; left: 5cqw; top: 9cqw; width: 55cqw; aspect-ratio: 16 / 9; border-radius: 1.4cqw; overflow: hidden; background: #000; box-shadow: 0 3cqw 6cqw -2cqw rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.1); }
.rf-wide video { width: 100%; height: 100%; object-fit: cover; }
.rf-wide .crop { border-radius: .7cqw; }
.rf-wide .crop-tag { bottom: 1.2cqw; font-size: max(8px, 1.15cqw); padding: .35cqw .9cqw; }
.rf-wide .crop-tag .ic { width: max(9px, 1.3cqw); height: max(9px, 1.3cqw); }
.rf-src { position: absolute; left: 1.2cqw; top: 1.2cqw; z-index: 3; font-size: max(8px, 1.1cqw); background: rgb(10 10 14 / 0.7); border-color: rgb(255 255 255 / 0.14); color: #e6e6ec; }
.rf-dots { position: absolute; left: 61.5cqw; top: 23.5cqw; display: flex; gap: 1.1cqw; }
.rf-dots i { width: .9cqw; height: .9cqw; border-radius: 50%; background: rgb(255 255 255 / 0.5); }
.rf-tall { position: absolute; right: 7.5cqw; top: 7cqw; width: 23cqw; }
.rf-tall .phone { width: 100%; border-radius: 2.4cqw; outline: 2px solid rgb(255 255 255 / 0.14); box-shadow: 0 4cqw 8cqw -3cqw rgb(76 29 149 / 0.7); }
.rf-score { position: absolute; right: -4.5cqw; top: -2.4cqw; display: inline-flex; align-items: baseline; gap: .4cqw; padding: .9cqw 1.3cqw; border-radius: 1.2cqw; background: rgb(24 24 30 / 0.92); border: 1px solid rgb(255 255 255 / 0.12); color: #fff; font-size: max(10px, 2.1cqw); font-weight: 700; letter-spacing: -0.02em; box-shadow: var(--shadow-md); }
.rf-score .ic { align-self: center; width: max(10px, 1.8cqw); height: max(10px, 1.8cqw); color: var(--violet-3); }
.rf-score small { color: var(--ink-4); font-size: .6em; font-weight: 600; }
.rf-ratio { position: absolute; left: 0; right: 0; bottom: -3.6cqw; text-align: center; color: #e6e6ec; font-size: max(9px, 1.5cqw); font-weight: 650; }
.rf-pub { position: absolute; left: 5cqw; top: 44.5cqw; display: flex; gap: 1.1cqw; margin: 0; padding: 0; list-style: none; }
.rf-pub li { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw; background: rgb(28 28 34 / 0.95); border: 1px solid rgb(255 255 255 / 0.1); }
.rf-pub .bi { width: 2.3cqw; height: 2.3cqw; }
.reel:not(.is-paused) .is-active .rf .crop { animation: rf-crop 8s cubic-bezier(.45,0,.25,1) both; }
.reel:not(.is-paused) .is-active .rf .crop-tag { animation: rf-fade 8s both; }
.reel:not(.is-paused) .is-active .rf-tall { animation: rf-tall 8s cubic-bezier(.2,.8,.2,1) both; }
.reel:not(.is-paused) .is-active .rf-score { animation: rf-pop 8s cubic-bezier(.3,1.5,.5,1) both; }
.reel:not(.is-paused) .is-active .rf-pub li { animation: rf-pub 8s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 90ms); }
.reel:not(.is-paused) .is-active .rf-dots i { animation: rf-dot 1.4s ease-in-out infinite; }
.rf-dots i:nth-child(2) { animation-delay: .15s !important; } .rf-dots i:nth-child(3) { animation-delay: .3s !important; } .rf-dots i:nth-child(4) { animation-delay: .45s !important; } .rf-dots i:nth-child(5) { animation-delay: .6s !important; }
@keyframes rf-crop { 0% { transform: translateX(-105%); border-style: dashed; } 18% { transform: translateX(95%); border-style: dashed; } 30%, 100% { transform: translateX(0); border-style: solid; } }
@keyframes rf-fade { 0%, 30% { opacity: 0; } 36%, 100% { opacity: 1; } }
@keyframes rf-tall { 0%, 30% { opacity: 0; transform: translateX(-30%) scale(.7); } 42%, 100% { opacity: 1; transform: none; } }
@keyframes rf-pop { 0%, 46% { opacity: 0; transform: scale(.6); } 54%, 100% { opacity: 1; transform: none; } }
@keyframes rf-pub { 0%, 62% { opacity: 0; transform: translateY(40%) scale(.6); } 70%, 100% { opacity: 1; transform: none; } }
@keyframes rf-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ── Floating link pill (appears after the hero, hides at the final CTA / footer) ── */
.float-cta {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; width: min(470px, 100% - 24px);
  transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s linear .45s;
}
.float-cta.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s; }
.float-cta .linkpill { width: 100%; background: rgb(22 22 26 / 0.78); border-color: rgb(255 255 255 / 0.16); box-shadow: 0 20px 50px -12px rgb(0 0 0 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.07); }
html:not(.js) .float-cta { display: none; }
@media (max-width: 420px) {
  .float-cta .linkpill { padding-left: 14px; gap: 8px; }
  .float-cta .linkpill > .ic { display: none; }
  .float-cta .linkpill .btn { padding: 0 14px; font-size: 14px; }
}

/* ── "AI that understands your video": two big media cards ── */
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.ai-card h3 { margin-top: 26px; font-size: clamp(22px, 2.2vw, 26px); letter-spacing: -0.03em; }
.ai-card > p { margin-top: 10px; max-width: 560px; color: var(--ink-3); font-size: 16px; line-height: 1.6; }
.ai-media { position: relative; display: grid; align-items: center; min-height: 400px; padding: clamp(18px, 3vw, 32px); border-radius: 26px; border: 1px solid rgb(255 255 255 / 0.07); overflow: hidden; container-type: inline-size; }
.ai .attrib { margin-top: 36px; }
/* (a) moments */
.ai-find { display: grid; grid-template-columns: minmax(0, 1fr) 36%; gap: 6cqw; align-items: center; }
.ai-label { color: #fff; font-size: 14px; font-weight: 600; }
.ai-prompt { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 11px 14px; border-radius: 12px; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.14); color: #fff; font-size: 14.5px; font-weight: 500; }
.ai-prompt .ic { width: 16px; height: 16px; color: #d6c9ff; flex-shrink: 0; }
.ai-prompt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.ai-tags li { padding: 5px 10px; border-radius: 8px; background: rgb(255 255 255 / 0.1); color: #e8e8ee; font-size: 12.5px; font-weight: 550; }
.ai-strip { position: relative; height: 64px; margin-top: 22px; border-radius: 12px; overflow: hidden; outline: 2px solid rgb(255 255 255 / 0.85); outline-offset: 2px; background: #000; }
.ai-strip img { display: block; height: 100%; width: auto; max-width: none; }
.ai-strip::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgb(8 8 10 / 0.45); -webkit-mask: linear-gradient(90deg, #000 33%, transparent 33% 67%, #000 67%); mask: linear-gradient(90deg, #000 33%, transparent 33% 67%, #000 67%); }
.ai-sel { position: absolute; z-index: 2; top: 0; bottom: 0; left: 33%; width: 34%; border: 2.5px solid #fbbf24; border-radius: 8px; box-shadow: 0 0 22px rgb(251 191 36 / 0.45); }
.ai-sel .chip { position: absolute; right: 4px; top: 4px; padding: 1px 7px; font-size: 11px; background: rgb(10 10 14 / 0.8); border-color: transparent; color: #fff; }
.ai-scan { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; opacity: 0; }
.ai-time { display: flex; justify-content: space-between; margin-top: 10px; color: #c7c7d1; font-size: 12px; font-variant-numeric: tabular-nums; }
.ai-time span:nth-child(2) { color: #fde68a; font-weight: 600; }
.ai-out .phone { width: 100%; border-radius: 18px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.8); }
.live .ai-strip img { animation: strip-pan 9s ease-in-out infinite alternate; }
.live .ai-scan { animation: scan-pass 4.5s cubic-bezier(.45,0,.25,1) infinite; }
.live .ai-sel { animation: sel-lock 4.5s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes strip-pan { from { transform: translateX(0); } to { transform: translateX(-40%); } }
@keyframes scan-pass { 0% { left: 0; opacity: 0; } 5% { opacity: 1; } 55% { left: 100%; opacity: 1; } 60%, 100% { left: 100%; opacity: 0; } }
@keyframes sel-lock { 0%, 50% { opacity: 0; transform: scale(1.12); } 62%, 100% { opacity: 1; transform: none; } }
/* (b) framing */
.ai-frame { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.ai-wide { position: relative; flex: 0 0 56%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.9); }
.ai-wide video { width: 100%; height: 100%; object-fit: cover; }
.track-box { position: absolute; top: 4%; bottom: 4%; left: var(--x); width: var(--w); border: 2px solid #4ade80; border-radius: 6px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35), 0 0 18px rgb(74 222 128 / 0.35); }
.track-box::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgb(74 222 128 / 0.55); border-radius: 3px; }
.track-box span { position: absolute; left: 50%; top: -1px; translate: -50% -100%; padding: 1px 7px; border-radius: 5px 5px 0 0; background: #4ade80; color: #052e16; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.live .track-box { animation: track-drift 7s ease-in-out infinite; }
@keyframes track-drift { 0%, 100% { transform: translateX(0); } 22% { transform: translateX(-4%); } 46% { transform: translateX(3%); } 70% { transform: translateX(1%); } }
.ai-dots { display: flex; gap: 6px; flex-shrink: 0; }
.ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 0.55); }
.live .ai-dots i { animation: rf-dot 1.4s ease-in-out infinite; }
.ai-dots i:nth-child(2) { animation-delay: .15s !important; } .ai-dots i:nth-child(3) { animation-delay: .3s !important; } .ai-dots i:nth-child(4) { animation-delay: .45s !important; }
.ai-tall { flex: 0 0 28%; display: grid; justify-items: center; gap: 10px; }
.ai-tall .phone { width: 100%; border-radius: 16px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.85); }
.ai-tall figcaption { margin: 0; color: #fff; font-size: 15px; font-weight: 650; }
@media (max-width: 960px) { .ai-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }
@media (max-width: 560px) {
  .ai-media { min-height: 0; border-radius: 20px; }
  .ai-find { grid-template-columns: minmax(0, 1fr) 34%; gap: 14px; }
  .ai-prompt { font-size: 13px; padding: 9px 10px; }
  .ai-tags li { font-size: 11.5px; padding: 4px 8px; }
  .ai-strip { height: 48px; }
  .ai-time { font-size: 10.5px; }
  .ai-time span:nth-child(2) { display: none; }
  .ai-wide { border-radius: 8px; }
  .track-box span { font-size: 9px; }
}

/* ── Workflow automation card (Auto Pilot) ── */
.flowcard { position: relative; margin-top: 64px; padding: clamp(28px, 5vw, 64px) clamp(20px, 4.5vw, 64px); border-radius: 32px; border: 1px solid rgb(255 255 255 / 0.07); overflow: hidden; }
.fc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr) 104px minmax(0, 1fr); align-items: start; }
.fc-visual { display: grid; place-items: center; height: 200px; }
.fc-step h3 { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 21px; letter-spacing: -0.025em; }
.fc-step h3 .ic { width: 22px; height: 22px; color: #e9ddff; }
.fc-step p { margin-top: 10px; color: #b8b8c3; font-size: 15px; line-height: 1.6; }
.fc-link { display: flex; align-items: center; justify-content: center; gap: 3px; height: 200px; color: rgb(255 255 255 / 0.65); }
.fc-link .dash { width: 18px; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); background-size: 9px 2px; }
.fc-link .sync { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: rgb(255 255 255 / 0.09); border: 1px solid rgb(255 255 255 / 0.16); color: #fff; }
.fc-link .sync .ic { width: 18px; height: 18px; }
.fc-link .chev { width: 16px; height: 16px; margin-left: -4px; }
.live .fc-link .dash { animation: dash-run .9s linear infinite; }
.live .fc-link .sync .ic { animation: spin 3.2s linear infinite; }
@keyframes dash-run { to { background-position: 9px 0; } }
.fc-drive { width: min(100%, 250px); padding: 12px; border-radius: 16px; background: rgb(14 14 18 / 0.82); border: 1px solid rgb(255 255 255 / 0.1); box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.8); }
.fc-drive-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; color: #fff; font-size: 13px; font-weight: 600; }
.fc-drive-head .bi { width: 16px; height: 16px; }
.fc-file { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px; border-radius: 10px; }
.fc-file + .fc-file { margin-top: 4px; }
.fc-file img { width: 50px; height: 28px; border-radius: 5px; object-fit: cover; }
.fc-file b { display: block; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-file small { display: block; color: var(--ink-4); font-size: 11.5px; }
.fc-file.is-new { background: rgb(124 58 237 / 0.18); border: 1px solid rgb(167 139 250 / 0.3); }
.fc-file .chip { padding: 1px 7px; font-size: 10.5px; }
.live .fc-file.is-new { animation: file-in 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes file-in { 0% { opacity: 0; transform: translateY(-10px); } 10%, 100% { opacity: 1; transform: none; } }
.fc-stack { position: relative; width: 190px; height: 190px; }
.fc-stack img, .fc-stack .phone { position: absolute; top: 50%; left: 50%; width: 92px; aspect-ratio: 9 / 16; height: auto; border-radius: 12px; object-fit: cover; box-shadow: 0 20px 40px -14px rgb(0 0 0 / 0.85); }
.fc-stack img:nth-child(1) { translate: -102% -50%; rotate: -9deg; opacity: .75; }
.fc-stack img:nth-child(2) { translate: 2% -50%; rotate: 9deg; opacity: .75; }
.fc-stack .phone { translate: -50% -52%; width: 104px; z-index: 1; border-radius: 13px; outline: 2px solid rgb(255 255 255 / 0.18); }
.fc-stack .tag { font-size: 10px; padding: 3px 7px; left: 6px; top: 6px; }
.fc-sched { display: flex; align-items: center; gap: 14px; }
.fc-sched img { width: 90px; aspect-ratio: 9 / 16; height: auto; border-radius: 12px; object-fit: cover; box-shadow: 0 20px 40px -14px rgb(0 0 0 / 0.85); }
.fc-sched-info { display: grid; gap: 10px; }
.fc-sched-info > b { color: #fff; font-size: 14px; font-weight: 600; }
.fc-logos { display: flex; }
.fc-logos .bi { box-sizing: content-box; width: 14px; height: 14px; padding: 6px; border-radius: 50%; background: #1e1e24; border: 1.5px solid #2f2a26; }
.fc-logos .bi + .bi { margin-left: -7px; }
.live .fc-logos .bi { animation: hop 3s ease-in-out infinite; }
.fc-logos .bi:nth-child(2) { animation-delay: .12s; } .fc-logos .bi:nth-child(3) { animation-delay: .24s; } .fc-logos .bi:nth-child(4) { animation-delay: .36s; } .fc-logos .bi:nth-child(5) { animation-delay: .48s; } .fc-logos .bi:nth-child(6) { animation-delay: .6s; }
.fc-time { color: #d9d9e1; font-size: 13px; line-height: 1.3; }
.fc-time b { display: block; color: #fff; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
@media (max-width: 980px) {
  .fc-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .fc-step { text-align: center; }
  .fc-step h3 { justify-content: center; margin-top: 22px; }
  .fc-link { height: 84px; transform: rotate(90deg); }
}

/* ── Review: the real review dialog with callouts that follow the recording ── */
.review { margin-top: 56px; }
.review-stage { max-width: 1100px; margin-inline: auto; padding: clamp(10px, 4vw, 52px); border-radius: 32px; border: 1px solid rgb(255 255 255 / 0.07); }
.review-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1100px; margin: 16px auto 0; padding: 0; list-style: none; }
.review-points button {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; height: 100%; padding: 18px;
  border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font: 400 14.5px/1.55 var(--font); text-align: left; cursor: pointer; overflow: hidden;
  transition: border-color .3s, background-color .3s;
}
.review-points button:hover { border-color: var(--line-2); }
.review-points .icon-tile { width: 38px; height: 38px; border-radius: 11px; }
.review-points .icon-tile .ic { width: 19px; height: 19px; }
.review-points b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.review-points button[aria-current="true"] { border-color: var(--violet-line); background: #17131f; }
.review-points .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (max-width: 980px) { .review-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .review-points { grid-template-columns: 1fr; } .review-stage { border-radius: 20px; } }

/* ── Real-output marquee ── */
.marquee { position: relative; margin-top: 56px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee::-webkit-scrollbar { display: none; }
.marquee.run { overflow: hidden; }
.mq-track { display: flex; align-items: flex-start; width: max-content; margin: 0; padding: 8px 0 12px; list-style: none; }
.mq-item { flex: 0 0 auto; width: max(176px, 16vw); margin-right: max(16px, 1.7vw); }
.mq-item .phone { width: 100%; border-radius: 22px; }
.mq-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 0 4px; color: var(--ink-3); font-size: 13.5px; font-weight: 550; }
.mq-meta .bis { display: inline-flex; gap: 5px; }
.mq-meta .bis .bi { width: 16px; height: 16px; }
.marquee.run .mq-track { animation: mq 70s linear infinite; }
.marquee.run:hover .mq-track, .marquee.run:focus-within .mq-track, .marquee.is-paused .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.marquee { padding-bottom: 52px; }
.mq-toggle.vid-toggle { top: auto; bottom: 6px; right: auto; left: 50%; margin-left: -16px; z-index: 3; background: var(--surface-2); border: 1px solid var(--line-2); }
@media (max-width: 560px) { .mq-item .phone { border-radius: 18px; } }

/* ── Final CTA over a blurred background video ── */
.cta-video { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 10vw, 128px) 24px; border-radius: 32px; border: 1px solid var(--line); background: #0c0b10; text-align: center; }
.cta-bg { position: absolute; inset: -10%; z-index: -2; width: 120%; height: 120%; max-width: none; object-fit: cover; filter: blur(26px) saturate(1.25) brightness(.55); }
.cta-video::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 50% 50%, rgb(8 8 10 / 0.25), rgb(8 8 10 / 0.82)), radial-gradient(60% 70% at 50% 0%, rgb(124 58 237 / 0.35), transparent 70%); }
.cta-video h2 { color: #fff; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 650; }
.cta-video p { margin: 16px auto 0; max-width: 600px; color: #d0d0d9; font-size: 18px; }
.cta-video .linkpill { margin: 36px auto 0; text-align: left; }
.cta-video .cta-alt { margin-top: 18px; color: #b9b9c4; font-size: 15px; }
.cta-video .cta-alt a { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.35); text-underline-offset: 3px; }
.cta-video .cta-alt a:hover { text-decoration-color: #fff; }
.cta-video .vid-toggle { top: 16px; right: 16px; }
@media (max-width: 560px) {
  .cta-video { border-radius: 22px; padding-inline: 14px; }
  .cta-video .linkpill { flex-wrap: wrap; height: auto; padding: 8px; border-radius: 22px; }
  .cta-video .linkpill > .ic { margin-left: 10px; }
  .cta-video .linkpill input { height: 46px; }
  .cta-video .linkpill .btn { width: 100%; }
}

/* Group play/pause control (site.js) sits in the media panel's corner */
[data-group] { position: relative; }
[data-group] > .vid-toggle { top: 14px; right: 14px; }
[data-group].is-paused *, [data-group].is-paused *::before, [data-group].is-paused *::after,
.marquee.is-paused *, .reel.is-paused .rf * { animation-play-state: paused !important; }
.browser > .vid-toggle { top: 46px; }
@media (max-width: 560px) { .browser > .vid-toggle { top: 32px; } }

/* App recordings on subpages */
.app-shot { margin-top: 56px; }
.app-shot .review-stage { max-width: 1100px; }
.band-media .browser { box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.1); }
.band-media.has-browser { padding: clamp(10px, 2.4vw, 28px); }

/* ── Motion ─────────────────────────────────────────────── */
@keyframes float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vz-scan { display: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media print {
  .site-header, .site-footer, .hero-form, .linkpill, .float-cta, .reel-nav, .reel-bar, .vid-toggle, .menu { display: none !important; }
  body { color: #000; background: #fff; }
}