/* ==========================================================================
   /ai-agents "Viewfinder": page styles on top of the scrollcraft floor.
   Tokens first (dark is the default, light under html[data-theme="light"]), then chrome, the two layout modes,
   one block per act, the signature roll, the footer, and the no-script / fallback / reduced-motion rules.
   Never restyle .sc-stage, .sc-copy or [data-sc-*] mechanics: that is the engine.

   Layout modes (set in the page <head> before first paint):
   html.vf-cinema  wide and tall enough, motion allowed: the hero, the cookie act and the contact sheet pin.
   html.vf-stack   narrow, short or reduced-motion screens: every act flows, text never sits on an image,
                   and the scroll is never held without a visible change. No script behaves like stack.
   ========================================================================== */

/* @font-face lives in the page <head> with content-versioned URLs (the same URLs the preloads use).
   Images are passed in as versioned custom properties (--vf-wall) for the same reason:
   everything under /agents/ is cached for a year, so only versioned URLs may be referenced. */

/* ------------------------------------------------------------------ tokens */
:root {
  --sc-canvas: #08090c;
  --sc-surface: #11131a;
  --sc-ink: #eef0f6;
  --sc-ink-soft: #b2b8c6;      /* 9.4:1 on the canvas */
  --sc-accent: #9aa2ff;        /* indigo, light step: lines, accents and small text on the dark ground */
  --sc-accent-ink: #08090c;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 13%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 24%, transparent);
  --sc-section: clamp(4rem, 2.5rem + 4.5vw, 7.5rem);
  --vf-brand: #4f46e5;         /* indigo, deep step: filled buttons, always with white text (6.3:1) */
  --vf-brand-hover: #5a52f0;
  --vf-raised: #171a23;
  --vf-ok: #4fd1a5;
  --vf-warn: #f5b454;
  --vf-tint: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  /* Code, terminals, the viewfinder screen and the film roll stay dark in both themes. */
  --vf-code-bg: #0a0b10;
  --vf-code-ink: #e9ebf2;
  --vf-code-soft: #9ba2b3;
  --vf-code-line: rgb(255 255 255 / 0.1);
  --vf-glow: color-mix(in oklab, var(--sc-accent) 16%, transparent);
  --sc-font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --sc-font-text: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --vf-bar-h: 64px;
  color-scheme: dark;
}
html[data-theme="light"] {
  --sc-canvas: #f5f6f8;
  --sc-surface: #ffffff;
  --sc-ink: #0d0f14;
  --sc-ink-soft: #4a5060;      /* 7.4:1 on the canvas */
  --sc-accent: #4f46e5;        /* 6.0:1 on the canvas */
  --sc-accent-ink: #ffffff;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 11%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 20%, transparent);
  --sc-shadow-color: 228 30% 40%;
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --vf-brand: #4f46e5;
  --vf-brand-hover: #4338ca;
  --vf-raised: #ffffff;
  --vf-ok: #08754f;
  --vf-warn: #b45309;
  --vf-tint: color-mix(in oklab, var(--sc-ink) 4%, transparent);
  --vf-code-bg: #11131a;
  --vf-glow: color-mix(in oklab, var(--sc-accent) 10%, transparent);
  color-scheme: light;
}

body.vf {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-stretch: 100%;
  letter-spacing: 0.002em;
  overflow-x: clip;
}
.vf ::selection { background: color-mix(in oklab, var(--sc-accent) 40%, transparent); color: var(--sc-ink); }
.vf :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 6px; }
/* Zero specificity on purpose: every component class (buttons above all) must win over this default. */
:where(.vf a) { color: inherit; }
.vf .sc-display { font-stretch: 112%; font-weight: 680; letter-spacing: var(--sc-track-tight); }
.vf h1.sc-display { font-weight: 720; }
.vf .sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.65; max-width: 60ch; }
.vf code, .vf .mono { font-family: var(--sc-font-mono); font-size: 0.86em; letter-spacing: 0; }
.vf .accent { color: var(--sc-accent); }
.vf img { max-width: 100%; height: auto; }
.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; }
html[data-theme="light"] .sc-grain { opacity: 0.03; }
/* Anchors land below the fixed bar. */
.vf main [id] { scroll-margin-top: calc(var(--vf-bar-h) + 1.25rem); }

/* ----------------------------------------------------------------- buttons */
.vf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 46px; padding: 0 1.25rem; border-radius: var(--sc-r-pill); border: 1px solid transparent;
  font: 620 var(--sc-t-sm)/1 var(--sc-font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast), color var(--sc-d-fast);
}
.vf-btn:active { transform: translateY(1px) scale(0.985); }
.vf-btn--primary { background: var(--vf-brand); color: #fff; box-shadow: var(--sc-e2), inset 0 1px 0 rgba(255,255,255,0.18); }
.vf-btn--primary:hover { background: var(--vf-brand-hover); color: #fff; }
.vf-btn--ghost { border-color: var(--sc-hairline-strong); color: var(--sc-ink); background: color-mix(in oklab, var(--sc-surface) 50%, transparent); }
.vf-btn--ghost:hover { border-color: color-mix(in oklab, var(--sc-ink) 45%, transparent); }
/* One-click installs: the ink colour itself, so they never compete with the indigo sign-up button. */
.vf-btn--install { background: var(--sc-ink); color: var(--sc-canvas); }
.vf-btn--install:hover { background: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-accent)); color: var(--sc-canvas); }
.vf-btn--lg { min-height: 52px; padding: 0 1.6rem; font-size: 1rem; }
.vf-btn svg { width: 16px; height: 16px; }

/* A real, copyable command. Not a terminal costume: it is the command you run. */
.vf-cmd {
  display: flex; align-items: center; gap: 0.75rem; max-width: 100%;
  padding: 0.6rem 0.6rem 0.6rem 1rem; border-radius: var(--sc-r-md);
  background: color-mix(in oklab, var(--sc-surface) 88%, transparent);
  border: 1px solid var(--sc-hairline-strong);
  font-family: var(--sc-font-mono); font-size: 0.8rem; color: var(--sc-ink);
  box-shadow: var(--sc-edge);
}
.vf-cmd__text { flex: 1; min-width: 0; font-size: inherit; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.vf-cmd__text::-webkit-scrollbar { display: none; }
.vf-cmd__prompt { color: var(--sc-accent); user-select: none; margin-right: 0.6ch; }
/* Stacked: the command over two lines (shell continuation), Copy on the right. Never cropped. */
.vf-cmd--stack { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text copy"; align-items: center; }
.vf-cmd--stack .vf-cmd__text { grid-area: text; overflow: visible; white-space: normal; line-height: 1.55; }
.vf-cmd--stack .vf-copy { grid-area: copy; }
.vf-cmd__line { display: block; white-space: nowrap; }
.vf-cmd__line + .vf-cmd__line { padding-left: 2.1ch; }
.vf-cmd__cont { color: var(--sc-ink-soft); user-select: none; }
.vf-copy {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 68px; height: 34px; padding: 0 0.8rem; border-radius: var(--sc-r-sm);
  border: 1px solid var(--sc-hairline-strong); background: var(--vf-raised); color: var(--sc-ink);
  font: 600 0.76rem/1 var(--sc-font-text); cursor: pointer; white-space: nowrap;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast);
}
.vf-copy:hover { background: color-mix(in oklab, var(--vf-raised) 80%, var(--sc-ink) 10%); }
.vf-copy[data-copied] { color: var(--vf-ok); }
.vf-btn[data-copied] { color: #fff; }
.vf-btn--ghost[data-copied] { color: var(--vf-ok); }

/* The client switcher: the five clients the ads name, each with its one action and its next step. */
.vf-switch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; width: 100%; max-width: 40rem; text-align: left; }
.vf-switch__tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.vf-switch__tab {
  padding: 0.45rem 0.8rem; border-radius: var(--sc-r-pill); border: 1px solid transparent; background: transparent;
  color: var(--sc-ink-soft); font: 600 0.8rem/1 var(--sc-font-text); cursor: pointer; white-space: nowrap;
  transition: color var(--sc-d-fast), background-color var(--sc-d-fast), border-color var(--sc-d-fast);
}
.vf-switch__tab:hover { color: var(--sc-ink); background: var(--vf-tint); }
.vf-switch__tab[aria-selected="true"] { color: var(--sc-ink); background: var(--sc-surface); border-color: var(--sc-hairline-strong); box-shadow: var(--sc-edge); }
.vf-switch__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; align-content: start; min-height: 6.5rem; }
.vf-switch__panel[hidden] { display: none; }
.vf-switch__row { display: flex; align-items: center; min-height: 4.5rem; padding: 0.6rem; border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-surface) 88%, transparent); box-shadow: var(--sc-edge); }
.vf-switch .vf-cmd { min-height: 4.5rem; }
.vf-switch__help { margin: 0; font-size: 0.84rem; color: var(--sc-ink-soft); }

/* --------------------------------------------------------------- top bar */
.vf-bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--vf-bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--sc-gutter);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 88%, transparent), color-mix(in oklab, var(--sc-canvas) 0%, transparent));
}
.vf-bar.is-scrolled { background: color-mix(in oklab, var(--sc-canvas) 84%, transparent); backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--sc-hairline); }
.vf-bar__mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; color: var(--sc-ink); }
.vf-bar__mark svg { width: 28px; height: 28px; }
.vf-bar__nav { display: flex; align-items: center; gap: 0.25rem; }
.vf-bar__link { padding: 0.5rem 0.75rem; border-radius: var(--sc-r-sm); color: color-mix(in oklab, var(--sc-ink) 78%, var(--sc-ink-soft)); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 540; }
.vf-bar__link:hover { color: var(--sc-ink); }
.vf-bar .vf-btn { min-height: 38px; padding: 0 1rem; margin-left: 0.35rem; }
@media (max-width: 760px) { .vf-bar__link--wide { display: none; } }

/* Theme toggle (partials/theme-toggle.ejs). The site stylesheet is not loaded here, so its rules live here too. */
.sr-theme-toggle {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; padding: 0; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--sc-ink-soft); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms ease;
}
.sr-theme-toggle:hover { color: var(--sc-ink); background: var(--vf-tint); }
.sr-theme-toggle:active { transform: scale(0.92); }
.sr-theme-toggle svg { width: 20px; height: 20px; overflow: visible; }
.sr-tt-core, .sr-tt-cut, .sr-tt-rays, .sr-tt-star { transform-box: fill-box; transform-origin: center; }
.sr-tt-core { transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.sr-tt-cut { transition: transform 520ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.sr-tt-rays { transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 260ms ease; }
.sr-tt-star { opacity: 0; transform: scale(0); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 160ms, opacity 200ms ease 160ms; }
/* Dark is this page's default, so "not light" means the moon (also before the theme script runs). */
html:not([data-theme="light"]) .sr-tt-core { transform: scale(1.55); }
html:not([data-theme="light"]) .sr-tt-cut { transform: translate(-7px, 3px); }
html:not([data-theme="light"]) .sr-tt-rays { transform: rotate(-70deg) scale(0.4); opacity: 0; }
html:not([data-theme="light"]) .sr-tt-star { opacity: 1; transform: scale(1); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.sr-theme-blend, html.sr-theme-blend *, html.sr-theme-blend *::before, html.sr-theme-blend *::after {
  transition: background-color 420ms ease, border-color 420ms ease, color 420ms ease, fill 420ms ease, box-shadow 420ms ease !important;
}

/* Shared panel chrome. */
.vf-panel { position: relative; border-radius: var(--sc-r-lg); overflow: hidden; background: var(--sc-surface); border: 1px solid var(--sc-hairline); box-shadow: var(--sc-e2), var(--sc-edge); }
.vf-panel__label { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.95rem; border-bottom: 1px solid var(--sc-hairline); font: 500 0.72rem/1.3 var(--sc-font-mono); color: var(--sc-ink-soft); }
.vf-panel__label b { color: var(--sc-ink); font-weight: 600; }
.vf-agent__dots { display: inline-flex; gap: 5px; margin-right: 0.4rem; }
.vf-agent__dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in oklab, var(--sc-ink) 20%, transparent); }

/* ============================================================ ACT 1: hero */
.vf-hero .sc-stage { overflow: hidden; }
.vf-hero__plane { position: absolute; pointer-events: none; will-change: transform; }
.vf-hero__wall {
  inset: -8% -6%; background: var(--vf-wall) center / cover no-repeat;
  transform: translate3d(0, calc(var(--sc-p, 0) * -5%), 0) scale(calc(1.08 - var(--sc-p, 0) * 0.06));
  opacity: calc(1 - var(--sc-p, 0) * 0.18);
}
html[data-theme="light"] .vf-hero__wall { opacity: calc(0.55 - var(--sc-p, 0) * 0.1); filter: saturate(0.9); }
.vf-hero__glow {
  inset: 0; background:
    radial-gradient(60% 55% at 72% 46%, var(--vf-glow), transparent 70%),
    radial-gradient(70% 80% at 12% 60%, color-mix(in oklab, var(--sc-canvas) 92%, transparent), transparent 75%),
    linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 30%, transparent), var(--sc-canvas) 96%);
}
.vf-hero__tiles { inset: 0; }
.vf-tile {
  position: absolute; width: var(--w); aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  box-shadow: var(--sc-e3); outline: 1px solid color-mix(in oklab, var(--sc-ink) 12%, transparent);
  transform: translate3d(0, calc((var(--sc-p, 0) - 0.5) * var(--rate) * -1px), 0);
  opacity: var(--o, 0.9);
}
.vf-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vf-tile--target { --o: 1; }
/* The subject sits clear of the copy column (which ends at about 48% of the stage). */
.vf-tile.vf-tile--target { --w: 21vw !important; left: 52% !important; top: 12% !important; }

/* The viewfinder: four corner brackets that glide onto the target, a focus patch, a readout. */
.vf-finder { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.vf-finder__frame { position: absolute; left: var(--fx, 6%); top: var(--fy, 12%); width: var(--fw, 88%); height: var(--fh, 76%); }
.vf-finder__corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--sc-accent); opacity: 0.95; }
.vf-finder__corner--tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.vf-finder__corner--tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.vf-finder__corner--bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.vf-finder__corner--br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.vf-finder__patch { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid color-mix(in oklab, var(--sc-accent) 70%, transparent); border-radius: 50%; }
.vf-finder__patch::before, .vf-finder__patch::after { content: ""; position: absolute; background: var(--sc-accent); opacity: 0.8; }
.vf-finder__patch::before { left: 50%; top: -9px; bottom: -9px; width: 1px; }
.vf-finder__patch::after { top: 50%; left: -9px; right: -9px; height: 1px; }
.vf-finder__readout {
  position: absolute; left: 0; bottom: -30px; display: flex; gap: 1rem; white-space: nowrap;
  font: 500 0.72rem/1 var(--sc-font-mono); color: var(--sc-accent); letter-spacing: 0.02em;
}
.vf-finder__readout b { color: var(--sc-ink); font-weight: 600; }

/* Shutter: six blades that close and open over the frame on the snap. */
.vf-shutter { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; opacity: 0; }
.vf-shutter svg { width: min(46vmin, 420px); height: auto; overflow: visible; }
.vf-hero .vf-shutter { place-items: start; }
.vf-hero .vf-shutter svg { position: absolute; left: var(--vf-sx, 50%); top: var(--vf-sy, 50%); width: var(--vf-ss, min(46vmin, 420px)); transform: translate(-50%, -50%); }
.vf-shutter__blade { transform-origin: 0 0; fill: #0b0d12; stroke: rgb(255 255 255 / 0.22); stroke-width: 1; }
.vf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; mix-blend-mode: soft-light; }

/* Copy column: the lead corner, centred in the height below the bar so it never runs under it. Never fades. */
.vf-hero__copy { z-index: 8; }
html.vf-cinema .vf-hero__copy {
  top: var(--vf-bar-h); bottom: 0; display: flex; flex-direction: column; justify-content: center;
  padding-block: 3vh 5vh; max-width: min(44rem, 46vw);
}
.vf-hero__kicker { margin: 0 0 1rem; font: 600 0.95rem/1.35 var(--sc-font-text); color: var(--sc-accent); letter-spacing: 0.005em; }
.vf .vf-hero__copy h1 { margin: 0 0 var(--sc-5); font-size: min(clamp(2.6rem, 1rem + 4.6vw, 5.75rem), 10.5vh); font-stretch: 104%; line-height: 0.98; }
.vf-hero__copy .sc-body { margin: 0 0 var(--sc-6); color: color-mix(in oklab, var(--sc-ink) 80%, var(--sc-ink-soft)); }
.vf-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); align-items: center; margin-bottom: var(--sc-5); }
.vf-hero__trust { margin: var(--sc-4) 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.84rem; color: var(--sc-ink-soft); }
.vf-hero__trust > * { display: inline-flex; align-items: center; gap: 0.45rem; }
.vf-hero__trust > *::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vf-ok); }
.vf-hero__trust a { color: var(--sc-ink-soft); text-decoration: underline; text-decoration-color: var(--sc-hairline-strong); text-underline-offset: 3px; }
.vf-hero__trust a:hover { color: var(--sc-ink); }

/* The agent window: real markup, a sample session with a real capture. */
.vf-agent {
  position: absolute; z-index: 7; right: var(--sc-gutter); bottom: 5vh; width: min(26rem, 31vw);
  border-radius: var(--sc-r-lg); overflow: hidden;
  background: color-mix(in oklab, var(--vf-raised) 92%, transparent); border: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e3), var(--sc-edge);
  backdrop-filter: blur(10px) saturate(1.15);
  transform: translate3d(0, calc((var(--sc-p, 0) - 0.5) * -26px), 0);
}
.vf-agent__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--sc-hairline); font: 500 0.74rem/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.vf-agent__label { margin-left: auto; color: var(--sc-ink-soft); }
.vf-agent__body { padding: 0.8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; font-size: 0.82rem; line-height: 1.5; }
.vf-msg { padding: 0.6rem 0.75rem; border-radius: var(--sc-r-md); background: var(--vf-tint); }
.vf-msg--user { justify-self: end; max-width: 88%; background: color-mix(in oklab, var(--vf-brand) 26%, transparent); }
html[data-theme="light"] .vf-msg--user { background: color-mix(in oklab, var(--vf-brand) 12%, transparent); }
.vf-call { font: 500 0.74rem/1.5 var(--sc-font-mono); color: var(--sc-ink-soft); padding: 0.55rem 0.7rem; border-radius: var(--sc-r-sm); border: 1px dashed var(--sc-hairline-strong); }
.vf-call b { color: var(--sc-accent); font-weight: 600; }
.vf-call__status { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; color: var(--sc-ink-soft); }
.vf-call__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--vf-warn); }
.vf-agent[data-state="captured"] .vf-call__status i { background: var(--vf-ok); }
.vf-attach { position: relative; border-radius: var(--sc-r-md); overflow: hidden; aspect-ratio: 16 / 9; background: var(--vf-code-bg); outline: 1px solid var(--sc-hairline); }
.vf-attach img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity 420ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); }
.vf-agent[data-state="captured"] .vf-attach img { opacity: 1; transform: none; }
.vf-attach::before {
  content: "capturing"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 0.7rem/1 var(--sc-font-mono); color: var(--vf-code-soft);
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgb(255 255 255 / 0.03) 10px 20px);
  transition: opacity 300ms var(--sc-ease-out);
}
.vf-agent[data-state="captured"] .vf-attach::before { opacity: 0; }
html[data-theme="light"] .vf-attach { background: #eceef3; }
html[data-theme="light"] .vf-attach::before { color: #6b7180; background: repeating-linear-gradient(135deg, transparent 0 10px, rgb(13 15 20 / 0.035) 10px 20px); }
.vf-reply { opacity: 0; transform: translateY(6px); transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); }
.vf-agent[data-state="captured"] .vf-reply { opacity: 1; transform: none; }

/* The capture in flight: a real image element moved by transform from the tile to the attachment. */
.vf-fly { position: absolute; z-index: 9; border-radius: 10px; overflow: hidden; pointer-events: none; opacity: 0; box-shadow: var(--sc-e3); }
.vf-fly img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Hero finder: only when the hero is animated (cinema, script running). */
.vf-hero .vf-finder { display: none; }
.vf-hero-live .vf-hero .vf-finder { display: block; }
.vf-hero-live .vf-hero .vf-finder__frame { inset: 0; left: 0; top: 0; width: 100%; height: 100%; }
.vf-hero-live .vf-hero .vf-finder__corner,
.vf-hero-live .vf-hero .vf-finder__patch,
.vf-hero-live .vf-hero .vf-finder__readout { left: 0; top: 0; right: auto; bottom: auto; margin: 0; will-change: transform; }
.vf-hero-live .vf-hero .vf-finder__readout { opacity: var(--vf-lock, 0); transition: opacity 200ms var(--sc-ease-out); }

/* A cinema page resized narrower keeps its pin, but the copy gets the stage to itself: nothing overlaps it. */
@media (max-width: 1099px) {
  html.vf-cinema .vf-hero__tiles, html.vf-cinema .vf-agent, html.vf-cinema .vf-fly, html.vf-cinema .vf-hero .vf-finder, html.vf-cinema .vf-hero .vf-shutter { display: none; }
  html.vf-cinema .vf-hero__copy { max-width: min(44rem, calc(100vw - 2 * var(--sc-gutter))); }
}

/* Hero, stack: copy first, then the sample session below it (beside it on wide-but-short screens). */
:is(html.vf-stack, html:not(.js)) .vf-hero [data-sc-stage] {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); align-items: center;
  padding: calc(var(--vf-bar-h) + clamp(1.75rem, 6vw, 4rem)) var(--sc-gutter) clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
}
:is(html.vf-stack, html:not(.js)) .vf-hero__copy { position: relative; inset: auto; left: auto; bottom: auto; max-width: 44rem; }
:is(html.vf-stack, html:not(.js)) .vf-hero__tiles,
:is(html.vf-stack, html:not(.js)) .vf-hero__wall,
:is(html.vf-stack, html:not(.js)) .vf-hero .vf-finder,
:is(html.vf-stack, html:not(.js)) .vf-hero .vf-shutter,
:is(html.vf-stack, html:not(.js)) .vf-hero .vf-flash,
:is(html.vf-stack, html:not(.js)) .vf-fly { display: none; }
:is(html.vf-stack, html:not(.js)) .vf-agent { position: relative; right: auto; bottom: auto; z-index: 1; width: 100%; max-width: 34rem; transform: none; }
@media (min-width: 1000px) {
  :is(html.vf-stack, html:not(.js)) .vf-hero [data-sc-stage] { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  :is(html.vf-stack, html:not(.js)) .vf-agent { justify-self: end; }
}

/* ================================================= hosted, not local: the band */
.vf-band { position: relative; z-index: 2; border-block: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-surface) 60%, var(--sc-canvas)); }
.vf-band__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem 2rem; align-items: baseline; padding-block: 1.5rem; }
.vf-band__proof { grid-column: 1 / -1; margin: 0 0 0.6rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; font-size: 0.9rem; color: var(--sc-ink-soft); }
.vf-band__proof b { color: var(--sc-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.vf-band__q { margin: 0; font-size: 1.05rem; font-weight: 680; font-stretch: 106%; white-space: nowrap; }
.vf-band__a { margin: 0; max-width: 72ch; color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.6; }
.vf-band__link { color: var(--sc-accent); font-weight: 600; font-size: 0.92rem; white-space: nowrap; text-underline-offset: 3px; }
@media (max-width: 960px) { .vf-band__inner { grid-template-columns: minmax(0, 1fr); } }

/* ================================================ ACT 2: cookie walls cleared */
/* The visuals run on --vf-k (0 to 1). vf.js sets it from the scroll on cinema screens and plays it over time on
   stack screens, and marks the matching step. Both images are SnapRender captures of the same page, cookie
   banner blocking off and on; the dialog is cut from the first. */
.vf-clean__grid { width: 100%; max-width: var(--sc-maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.vf-clean__copy h2 { margin: 0 0 var(--sc-4); }
.vf .vf-clean__copy h2 { font-size: clamp(2.1rem, 1.1rem + 2.3vw, 3.4rem); line-height: 1.02; }
.vf-clean__copy .sc-body { margin: 0 0 var(--sc-6); font-size: 1rem; }
.vf-clean__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; counter-reset: vf-step; }
.vf-clean__step {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.15rem; align-items: center;
  padding: 0.8rem 1rem; border-radius: 14px; border: 1px solid transparent; opacity: 0.85;
  transition: opacity 300ms var(--sc-ease-out), background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out);
}
.vf-clean__step[data-step="1"] { --vf-c: var(--vf-warn); }
.vf-clean__step[data-step="2"] { --vf-c: var(--sc-accent); }
.vf-clean__step[data-step="3"] { --vf-c: var(--vf-ok); }
.vf-clean__step::before {
  counter-increment: vf-step; content: counter(vf-step); grid-row: 1 / span 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  font: 650 0.95rem/1 var(--sc-font-mono); color: var(--sc-ink-soft); border: 1.5px solid var(--sc-hairline-strong);
  transition: background-color 300ms, border-color 300ms, color 300ms;
}
.vf-clean__step b { font-size: 1.08rem; font-weight: 660; color: var(--sc-ink); }
.vf-clean__step span { font-size: 0.92rem; color: var(--sc-ink-soft); }
.vf-clean__step.is-done { opacity: 0.85; }
.vf-clean__step.is-done::before { content: "✓"; color: var(--vf-c); border-color: color-mix(in oklab, var(--vf-c) 60%, transparent); }
.vf-clean__step.is-on { opacity: 1; background: color-mix(in oklab, var(--vf-c) 12%, transparent); border-color: color-mix(in oklab, var(--vf-c) 55%, transparent); }
.vf-clean__step.is-on::before { content: counter(vf-step); background: var(--vf-c); border-color: var(--vf-c); color: #0b0c10; }
html[data-theme="light"] .vf-clean__step.is-on::before { color: #fff; }

.vf-panel--returns { width: 100%; margin: 0; justify-self: end; }
.vf-seen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0c10;
  --k: var(--vf-k, 0);
  --vf-hunt: clamp(0, calc((var(--k) - 0.06) / 0.16), 1);
  --vf-lift: clamp(0, calc((var(--k) - 0.4) / 0.2), 1);
  --vf-clear: clamp(0, calc((var(--k) - 0.4) / 0.14), 1);
  --vf-snap: clamp(0, calc((var(--k) - 0.7) / 0.12), 1);
}
.vf-seen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vf-seen__raw { opacity: calc(1 - var(--vf-clear)); }
/* Find: everything but the dialog dims, so the eye goes straight to it. */
.vf-seen__shade { position: absolute; inset: 0; pointer-events: none; background: rgb(6 7 10 / calc(var(--vf-hunt) * (1 - var(--vf-lift)) * 0.62)); }
.vf-seen__dialog {
  inset: auto !important; left: 0.833% !important; top: 37.889% !important; width: 35.139% !important; height: auto !important;
  object-fit: fill !important; transform-origin: 30% 0; z-index: 1;
  transform: translate3d(calc(var(--vf-lift) * -6%), calc(var(--vf-lift) * -42%), 0) scale(calc(1 + var(--vf-hunt) * 0.03 - var(--vf-lift) * 0.12)) rotate(calc(var(--vf-lift) * -5deg));
  opacity: calc(1 - var(--vf-lift) * var(--vf-lift));
  box-shadow: 0 calc(var(--vf-lift) * 34px) calc(var(--vf-lift) * 60px) rgb(0 0 0 / 0.5);
  border-radius: 4px;
}
.vf-seen__box {
  position: absolute; z-index: 2; left: calc(0.833% - 7px); top: calc(37.889% - 7px); width: calc(35.139% + 14px); height: calc(60.778% + 14px);
  border: 3px solid #f5b454; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 4px rgb(245 180 84 / 0.22), 0 0 34px rgb(245 180 84 / 0.35);
  opacity: calc(var(--vf-hunt) * (1 - var(--vf-lift)));
  transform: scale(calc(1.08 - var(--vf-hunt) * 0.08));
}
.vf-seen__boxtag {
  position: absolute; left: -3px; top: -36px; padding: 0.45rem 0.7rem; border-radius: 7px;
  font: 700 0.78rem/1 var(--sc-font-mono); color: #1a1205; background: #f5b454; white-space: nowrap;
}
/* Capture: viewfinder brackets snap onto the clean page, a short flash, and the receipt. */
.vf-seen__frame { position: absolute; inset: 5%; z-index: 2; pointer-events: none; opacity: var(--vf-snap); transform: scale(calc(1.06 - var(--vf-snap) * 0.06)); }
.vf-seen__frame i { position: absolute; width: 34px; height: 34px; border: 3px solid #4fd1a5; }
.vf-seen__frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.vf-seen__frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.vf-seen__frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.vf-seen__frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.vf-seen__flash { position: absolute; inset: 0; z-index: 3; background: #fff; pointer-events: none; opacity: calc(var(--vf-snap) * (1 - var(--vf-snap)) * 1.4); }
.vf-seen__done {
  position: absolute; z-index: 4; right: 0.75rem; top: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px;
  font: 700 0.78rem/1 var(--sc-font-mono); color: #062b1d; background: #4fd1a5;
  opacity: var(--vf-snap); transform: translateY(calc((1 - var(--vf-snap)) * 8px));
}

/* The step that is happening, named on the picture: only where the step list sits below it. */
.vf-seen__phase { display: none; position: absolute; z-index: 4; left: 0.75rem; bottom: 0.75rem; padding: 0.45rem 0.7rem; border-radius: 8px; font: 700 0.76rem/1 var(--sc-font-mono); color: #fff; background: rgb(8 9 12 / 0.82); }

/* Cinema: pinned, copy and steps on the left, the capture as large as the frame allows on the right. */
html.vf-cinema .vf-clean .sc-stage { display: grid; align-content: center; padding: calc(var(--vf-bar-h) + 3vh) var(--sc-gutter) calc(3vh + 64px); }
html.vf-cinema .vf-panel--returns { max-width: calc((100vh - var(--vf-bar-h) - 64px - 6vh - 2.6rem) * 1.6); }
/* Stack: a normal section. On narrow screens the panel sits between the copy and the steps, so the step that
   is happening is always right under the picture. */
:is(html.vf-stack, html:not(.js)) .vf-clean [data-sc-stage] { padding: var(--sc-section) var(--sc-gutter); }
@media (max-width: 960px) {
  .vf-clean__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sc-5); }
  .vf-clean__copy { display: contents; }
  .vf-clean__copy h2, .vf-clean__copy .sc-body { margin-bottom: 0; }
  .vf-clean__copy .sc-body { order: 1; }
  .vf-panel--returns { order: 2; }
  .vf-clean__steps { order: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .vf-clean__step { grid-template-columns: minmax(0, 1fr); padding: 0.65rem 0.7rem; row-gap: 0.4rem; align-items: start; }
  .vf-clean__step::before { grid-row: auto; width: 2rem; height: 2rem; font-size: 0.85rem; }
  .vf-clean__step span { font-size: 0.84rem; }
  .vf-seen__phase { display: block; }
  .vf-seen__phase:empty { display: none; }
  html.vf-cinema .vf-panel--returns { max-width: calc((100vh - var(--vf-bar-h) - 64px - 6vh - 2.6rem) * 1.6); justify-self: center; }
}
@media (max-width: 560px) {
  .vf-clean__steps { grid-template-columns: minmax(0, 1fr); }
  .vf-clean__step { grid-template-columns: 2rem minmax(0, 1fr); align-items: center; }
  .vf-clean__step::before { grid-row: 1 / span 2; }
  .vf-panel__label { font-size: 0.66rem; }
}

/* ===================================================== ACT 3: agents at work */
.vf-uses__head { max-width: 46rem; }
.vf-uses__head h2 { margin: 0 0 var(--sc-4); }
.vf-uses__head .sc-body { margin: 0; }
.vf-uses { margin-top: var(--sc-7); border-top: 1px solid var(--sc-hairline); }
.vf-use {
  display: grid; grid-template-columns: 10rem minmax(0, 0.9fr) minmax(0, 1.25fr) auto; grid-template-areas: "who title text pills";
  gap: 0.75rem 2rem; align-items: start; padding: 1.6rem 0; border-bottom: 1px solid var(--sc-hairline);
}
.vf-use__who { grid-area: who; margin: 0.2rem 0 0; font-size: 0.88rem; font-weight: 600; color: var(--sc-accent); }
.vf-use__title { grid-area: title; margin: 0; font-size: 1.25rem; font-weight: 640; font-stretch: 104%; line-height: 1.25; letter-spacing: var(--sc-track-snug); }
.vf-use__text { grid-area: text; margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.6; }
.vf-use__text a { color: var(--sc-accent); white-space: nowrap; text-underline-offset: 3px; }
/* The loop as a row of pills; the steps SnapRender performs are the filled ones. */
.vf-pills { grid-area: pills; list-style: none; margin: 0.1rem 0 0; padding: 0; display: flex; align-items: center; }
.vf-pills li {
  position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 0.85rem; border-radius: var(--sc-r-pill);
  border: 1px solid var(--sc-hairline-strong); font: 600 0.82rem/1 var(--sc-font-text); color: var(--sc-ink-soft); white-space: nowrap;
}
.vf-pills li.is-us { border-color: transparent; background: var(--vf-brand); color: #fff; box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--vf-brand) 90%, transparent); }
.vf-pills li + li { margin-left: 1.5rem; }
.vf-pills li + li::before { content: ""; position: absolute; left: calc(-1.5rem + 4px); top: 50%; width: calc(1.5rem - 10px); height: 1.5px; background: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.vf-pills li + li::after { content: ""; position: absolute; left: -9px; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left: 5px solid color-mix(in oklab, var(--sc-ink) 40%, transparent); border-right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .vf-use.sc-in .vf-pills li { animation: vf-pill 0.7s var(--sc-ease-out) both; }
  .vf-use.sc-in .vf-pills li:nth-child(2) { animation-delay: 0.15s; }
  .vf-use.sc-in .vf-pills li:nth-child(3) { animation-delay: 0.3s; }
  .vf-use.sc-in .vf-pills li:nth-child(4) { animation-delay: 0.45s; }
}
@keyframes vf-pill { from { opacity: 0.2; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1240px) {
  .vf-use { grid-template-columns: 9rem minmax(0, 1fr); grid-template-areas: "who title" "who text" "who pills"; gap: 0.6rem 1.5rem; }
  .vf-pills { margin-top: 0.4rem; }
}
@media (max-width: 640px) {
  .vf-use { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "title" "text" "pills"; gap: 0.45rem; padding: 1.3rem 0; }
  .vf-pills { flex-wrap: wrap; row-gap: 0.5rem; }
  .vf-pills li { height: 30px; padding: 0 0.7rem; font-size: 0.78rem; }
  .vf-pills li + li { margin-left: 1.25rem; }
  .vf-pills li + li::before { left: calc(-1.25rem + 3px); width: calc(1.25rem - 9px); }
}

/* ==================================================== ACT 4: sets itself up */
.vf-connect .sc-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-8); }
.vf-onboard { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.vf-onboard__copy h2 { margin: 0 0 var(--sc-4); }
.vf-onboard__copy .sc-body { margin: 0; }
.vf-onboard__steps { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: vf-on; }
.vf-onboard__step {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.2rem; align-items: start;
  padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-surface) 55%, transparent);
  transition: border-color 300ms var(--sc-ease-out), background-color 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out);
}
.vf-onboard__step::before {
  counter-increment: vf-on; content: counter(vf-on); grid-row: 1 / span 3; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; font: 650 0.9rem/1 var(--sc-font-mono); color: var(--sc-accent); border: 1.5px solid color-mix(in oklab, var(--sc-accent) 50%, transparent);
  transition: background-color 300ms, color 300ms;
}
.vf-onboard__step b { font-size: 1.04rem; font-weight: 650; padding-top: 0.35rem; }
.vf-onboard__step > span { color: var(--sc-ink-soft); font-size: 0.93rem; line-height: 1.55; }
.vf-onboard__step.is-on { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge); }
.vf-onboard__step.is-on::before { background: var(--vf-brand); border-color: var(--vf-brand); color: #fff; }
.vf-prompt { margin-top: 0.55rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; padding: 0.85rem; border-radius: 12px; background: var(--vf-code-bg); border: 1px solid var(--vf-code-line); }
.vf-prompt p { margin: 0; max-height: 9.6em; overflow-y: auto; font: 0.74rem/1.6 var(--sc-font-mono); color: var(--vf-code-ink); scrollbar-width: thin; }
.vf-prompt__copy { justify-self: start; min-height: 40px; }

.vf-term { margin: 0; border-radius: var(--sc-r-lg); overflow: hidden; background: var(--vf-code-bg); border: 1px solid var(--vf-code-line); box-shadow: var(--sc-e3); }
.vf-term__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.95rem; border-bottom: 1px solid var(--vf-code-line); font: 500 0.74rem/1 var(--sc-font-mono); color: var(--vf-code-soft); }
.vf-term__head .vf-agent__dots i { background: rgb(255 255 255 / 0.2); }
.vf-term__tag { margin-left: auto; }
.vf-term__log { list-style: none; margin: 0; padding: 1rem 1.1rem 0.5rem; display: grid; gap: 0.55rem; font: 0.76rem/1.55 var(--sc-font-mono); color: var(--vf-code-ink); }
.vf-term__log li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 0.6rem; overflow-wrap: anywhere; }
.vf-term__log li > span:first-child { color: var(--vf-code-soft); }
.vf-term__out, .vf-term__ok { display: block !important; padding-left: 3.8rem; }
.vf-term__out { color: var(--vf-code-soft); }
.vf-term__ok { color: #4fd1a5; }
.vf-term__ok::before { content: "✓ "; }
.vf-term__say { color: #c7cbff; }
.vf-term__cmd > span:first-child { color: #9aa2ff !important; }
.vf-term__shot { margin: 0.35rem 1.1rem 1.1rem 4.9rem; border-radius: 8px; overflow: hidden; outline: 1px solid var(--vf-code-line); }
.vf-term__shot img { display: block; width: 100%; height: auto; }
/* Playback (vf.js adds is-1, is-2, is-3 once the session is in view); everything shows without script or motion. */
html.js .vf-term [data-at] { opacity: 0.32; transform: none; transition: opacity 380ms var(--sc-ease-out), transform 380ms var(--sc-ease-out); }
html.js .vf-term.is-1 [data-at="1"],
html.js .vf-term.is-2 [data-at="1"], html.js .vf-term.is-2 [data-at="2"],
html.js .vf-term.is-3 [data-at] { opacity: 1; transform: none; }

.vf-manual { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-4); }
.vf-manual__title { margin: 0; font-size: var(--sc-t-lg); font-weight: 650; font-stretch: 106%; }
.vf-clients { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--sc-5); }
.vf-clients__tabs { display: grid; gap: 0.35rem; align-content: start; }
.vf-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%;
  padding: 0.8rem 0.95rem; border-radius: var(--sc-r-md); border: 1px solid transparent;
  background: transparent; color: var(--sc-ink-soft); font: 580 0.95rem/1.2 var(--sc-font-text); text-align: left; cursor: pointer;
  transition: background-color var(--sc-d-fast), color var(--sc-d-fast), border-color var(--sc-d-fast);
}
.vf-tab:hover { color: var(--sc-ink); background: var(--vf-tint); }
.vf-tab[aria-selected="true"] { color: var(--sc-ink); background: var(--sc-surface); border-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); box-shadow: var(--sc-e2), var(--sc-edge); }
.vf-tab small { font: 500 0.66rem/1 var(--sc-font-mono); color: var(--sc-accent); white-space: nowrap; }
.vf-clients__panel { border-radius: var(--sc-r-lg); background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); box-shadow: var(--sc-e2), var(--sc-edge); padding: clamp(1.1rem, 2vw, 1.7rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-4); align-content: start; min-height: 20rem; }
.vf-clients__panel[hidden] { display: none; }
.vf-clients__panel h4 { margin: 0; font-size: var(--sc-t-lg); font-stretch: 108%; font-weight: 650; letter-spacing: var(--sc-track-snug); }
.vf-cmd--line { font-size: 0.78rem; }
.vf-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; counter-reset: step; color: var(--sc-ink-soft); font-size: 0.95rem; }
.vf-steps li { position: relative; padding-left: 1.95rem; }
.vf-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0.05rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font: 600 0.7rem/1 var(--sc-font-mono); color: var(--sc-accent); border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.vf-steps code { padding: 0.08rem 0.35rem; border-radius: 5px; background: var(--vf-tint); color: var(--sc-ink); }
.vf-snippet { margin: 0; padding: 0.9rem 1rem; border-radius: var(--sc-r-md); background: var(--vf-code-bg); border: 1px solid var(--vf-code-line); font: 0.78rem/1.6 var(--sc-font-mono); color: var(--vf-code-ink); overflow-x: auto; }
.vf-panel-actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.vf-panel-note { font-size: 0.82rem; color: var(--sc-ink-soft); }
.vf-listed { margin: 0; font-size: 0.86rem; color: var(--sc-ink-soft); }

.vf-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); }
.vf-way { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; align-content: start; padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); }
.vf-way h3 { margin: 0; display: grid; gap: 0.3rem; font-size: 1.12rem; font-weight: 660; font-stretch: 106%; }
.vf-way h3 small { font: 500 0.74rem/1.2 var(--sc-font-text); color: var(--sc-accent); letter-spacing: 0.01em; }
.vf-way p { margin: 0; color: var(--sc-ink-soft); font-size: 0.92rem; line-height: 1.6; }
.vf-way__code { margin: 0; padding: 0.8rem 0.9rem; border-radius: var(--sc-r-md); background: var(--vf-code-bg); border: 1px solid var(--vf-code-line); font: 0.72rem/1.65 var(--sc-font-mono); color: var(--vf-code-ink); overflow-x: auto; white-space: pre; }
.vf-way__quote { padding: 0.7rem 0.85rem; border-radius: var(--sc-r-md); background: var(--vf-code-bg); color: var(--vf-code-soft) !important; font: 0.74rem/1.5 var(--sc-font-mono) !important; }
.vf-way__quote b { color: #4fd1a5; font-weight: 600; }

.vf-guides { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.vf-guides__label { margin-right: 0.5rem; font-size: 0.86rem; font-weight: 650; color: var(--sc-ink); }
.vf-guides a { padding: 0.5rem 0.8rem; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); text-decoration: none; font-size: 0.86rem; transition: border-color var(--sc-d-fast), background-color var(--sc-d-fast); }
.vf-guides a:hover { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 8%, transparent); }
.vf-agentnote { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; margin: 0; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); font-size: 0.9rem; }
.vf-agentnote a { color: var(--sc-accent); text-underline-offset: 3px; }
@media (max-width: 1060px) { .vf-onboard { grid-template-columns: minmax(0, 1fr); } .vf-term { max-width: 44rem; } }
@media (max-width: 860px) {
  .vf-clients, .vf-ways { grid-template-columns: minmax(0, 1fr); }
  .vf-clients__tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 0.25rem; max-width: 100%; }
  .vf-term__log li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .vf-term__out, .vf-term__ok { padding-left: 3.2rem; }
  .vf-term__shot { margin-left: 4.3rem; }
}

/* ========================================================= ACT 5: the demo */
.vf-peak .sc-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); }
.vf-peak__head { max-width: 46rem; }
.vf-peak__head h2 { margin: 0 0 var(--sc-3); }
.vf-peak__head .sc-body { margin: 0; }
.vf-try { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--sc-5); align-items: start; }
.vf-scope { position: relative; width: 100%; align-self: start; border-radius: var(--sc-r-lg); background: #06070a; border: 1px solid var(--sc-hairline); aspect-ratio: 16 / 10; overflow: hidden; box-shadow: var(--sc-e3), var(--sc-edge); }
.vf-scope__finder { position: absolute; inset: 6%; z-index: 2; }
.vf-scope__finder .vf-finder__corner { width: 30px; height: 30px; border-color: #9aa2ff; }
.vf-scope__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity 260ms var(--sc-ease-out), filter 900ms var(--sc-ease-out); }
.vf-scope[data-state="busy"] .vf-scope__img { opacity: 0.35; filter: grayscale(1) blur(2px); }
.vf-scope[data-state="done"][data-device="phone"] .vf-scope__img { object-fit: contain; background: #06070a; }
.vf-scope .vf-shutter svg { width: 46%; }
.vf-scope__tag { position: absolute; z-index: 3; right: 0.8rem; top: 0.8rem; padding: 0.3rem 0.55rem; border-radius: var(--sc-r-sm); font: 600 0.66rem/1 var(--sc-font-mono); color: #e9ebf2; background: rgb(8 9 12 / 0.78); }
.vf-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-3); align-content: start; }
.vf-field { display: flex; gap: 0.5rem; padding: 0.4rem; border-radius: var(--sc-r-pill); background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); box-shadow: var(--sc-edge); }
.vf-field:focus-within { border-color: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.vf-field input { flex: 1; min-width: 0; height: 46px; padding: 0 0.9rem; border: 0; outline: 0; background: transparent; color: var(--sc-ink); font: 500 1rem/1 var(--sc-font-text); caret-color: var(--sc-accent); }
.vf-field input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.vf-form__row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.vf-seg { display: inline-flex; padding: 3px; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); }
.vf-seg__opt { padding: 0.42rem 0.8rem; border: 0; border-radius: var(--sc-r-pill); background: transparent; color: var(--sc-ink-soft); font: 600 0.78rem/1 var(--sc-font-text); cursor: pointer; }
.vf-seg__opt[aria-checked="true"] { background: var(--vf-brand); color: #fff; }
.vf-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vf-chip { padding: 0.45rem 0.72rem; border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong); background: transparent; color: var(--sc-ink); font: 500 0.76rem/1 var(--sc-font-mono); cursor: pointer; transition: border-color var(--sc-d-fast), background-color var(--sc-d-fast); }
.vf-chip:hover { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 8%, transparent); }
.vf-result { margin: 0; padding: 0.9rem 1rem; border-radius: var(--sc-r-md); background: var(--vf-code-bg); border: 1px solid var(--vf-code-line); font: 0.74rem/1.6 var(--sc-font-mono); color: var(--vf-code-soft); min-height: 6.5rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.vf-result b { color: #9aa2ff; font-weight: 600; }
.vf-result .ok { color: #4fd1a5; }
.vf-result .warn { color: #f5b454; }
.vf-result a { color: #c7cbff; }
.vf-next { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: var(--sc-r-md); border: 1px solid color-mix(in oklab, var(--vf-ok) 50%, transparent); background: color-mix(in oklab, var(--vf-ok) 8%, transparent); }
.vf-next[hidden] { display: none; }
.vf-next p { margin: 0; font-size: 0.92rem; color: var(--sc-ink); font-weight: 560; }
.vf-next__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vf-next__actions .vf-btn { min-height: 42px; }
.vf-try__note { margin: 0; font-size: 0.84rem; color: var(--sc-ink-soft); }
.vf-try__note a { color: var(--sc-accent); }
@media (max-width: 860px) {
  .vf-try { grid-template-columns: minmax(0, 1fr); }
  .vf-result { min-height: 5rem; }
}

/* ================================================== ACT 6: the contact sheet */
.vf-sheet__head { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 30rem); gap: 0.75rem 3rem; align-items: end; justify-content: space-between; }
.vf-sheet__head h2 { margin: 0; }
.vf-sheet__head .sc-body { margin: 0; }
.vf-rail { display: flex; gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; }
.vf-frame { flex: 0 0 min(30rem, 78vw); display: grid; grid-template-rows: auto 1fr; gap: 0.85rem; }
.vf-frame__view { position: relative; border-radius: var(--sc-r-md); overflow: hidden; background: var(--vf-code-bg); border: 1px solid var(--sc-hairline); aspect-ratio: 16 / 10; box-shadow: var(--sc-e2); }
.vf-frame__view > img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
/* Captures of web pages sit in a slim browser frame with the address. */
.vf-frame__view--web { padding-top: 28px; background: var(--sc-surface); }
.vf-frame__bar { position: absolute; inset: 0 0 auto 0; height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: color-mix(in oklab, var(--sc-surface) 90%, var(--sc-ink)); border-bottom: 1px solid var(--sc-hairline); font: 500 0.68rem/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.vf-frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-hairline-strong); }
.vf-frame__bar span { margin-left: 8px; }
.vf-frame__pair { display: grid; grid-template-columns: 1fr 0.42fr; gap: 0.5rem; padding: 0.5rem; height: 100%; }
.vf-frame__pair img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 6px; }
.vf-frame__text { margin: 0; padding: 0.9rem 1rem; height: 100%; overflow: hidden; font: 0.72rem/1.6 var(--sc-font-mono); color: var(--vf-code-soft); white-space: pre-wrap; mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.vf-frame__text b { color: var(--vf-code-ink); }
.vf-frame__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; padding: 0.4rem; height: 100%; }
.vf-frame__grid img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 5px; }
.vf-frame__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; padding: 0.5rem; height: 100%; align-content: center; }
.vf-frame__strip figure { margin: 0; display: grid; gap: 0.3rem; }
.vf-frame__strip img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: top; border-radius: 5px; }
.vf-frame__strip figcaption { font: 500 0.62rem/1 var(--sc-font-mono); color: var(--vf-code-soft); }
.vf-frame__strip figure.changed img { outline: 2px solid #f5b454; outline-offset: -2px; }
.vf-label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
.vf-label__name { font: 600 0.82rem/1.3 var(--sc-font-mono); color: var(--sc-accent); }
.vf-label__what { font-size: 0.98rem; color: var(--sc-ink); }

/* Cinema: pinned; the title stays put while the strip travels under it, the pair centred in the frame. */
html.vf-cinema .vf-sheet .sc-stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; row-gap: clamp(1.5rem, 4vh, 2.75rem); padding: calc(var(--vf-bar-h) + 2vh) 0 calc(2vh + 64px); }
html.vf-cinema .vf-sheet__head { width: 100%; max-width: calc(var(--sc-maxw)); margin: 0 auto; padding: 0 var(--sc-gutter); box-sizing: border-box; }
html.vf-cinema .vf-rail { padding: 0 var(--sc-gutter); }
html.vf-cinema .vf-frame { flex-basis: min(32rem, 38vw, calc((100vh - var(--vf-bar-h) - 64px - 4vh - 13rem) * 1.6)); }
@media (prefers-reduced-motion: no-preference) {
  html.vf-cinema .vf-sheet .vf-frame__view { opacity: max(0.6, min(1, calc((var(--sc-p, 0) * 7) - var(--i, 0) + 1.8))); }
}
/* Stack: a swipeable row under the title. */
:is(html.vf-stack, html:not(.js)) .vf-sheet [data-sc-stage] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); padding: var(--sc-section) 0; }
:is(html.vf-stack, html:not(.js)) .vf-sheet__head { padding: 0 var(--sc-gutter); }
:is(html.vf-stack, html:not(.js)) .vf-rail { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--sc-gutter) 0.75rem; scroll-padding-inline: var(--sc-gutter); scrollbar-width: thin; }
:is(html.vf-stack, html:not(.js)) .vf-frame { flex-basis: min(24rem, 80vw); scroll-snap-align: start; }
@media (max-width: 860px) { .vf-sheet__head { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================== ACT 7: pricing and answers */
.vf-proof .sc-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(4rem, 3rem + 3vw, 6.5rem); }
.vf-code__head, .vf-vs__head, .vf-price__head, .vf-faq__head { max-width: 46rem; }
.vf-code__head h2, .vf-vs__head h2, .vf-price__head h2, .vf-faq__head h2 { margin: 0 0 var(--sc-4); }
.vf-code__head .sc-body, .vf-vs__head .sc-body, .vf-price__head .sc-body { margin: 0; }

.vf-code__box { margin-top: var(--sc-6); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sc-5); }
.vf-code__box .vf-panel { background: var(--vf-code-bg); border-color: var(--vf-code-line); }
.vf-code__box .vf-panel__label { color: var(--vf-code-soft); border-color: var(--vf-code-line); }
.vf-code__box .vf-panel__label b { color: var(--vf-code-ink); }
.vf-code__tabs { display: flex; gap: 0.3rem; padding: 0.4rem; border-bottom: 1px solid var(--vf-code-line); overflow-x: auto; }
.vf-code__tabs button { padding: 0.45rem 0.8rem; border-radius: var(--sc-r-sm); border: 0; background: transparent; color: var(--vf-code-soft); font: 500 0.78rem/1 var(--sc-font-mono); cursor: pointer; white-space: nowrap; }
.vf-code__tabs button[aria-selected="true"] { background: rgb(255 255 255 / 0.08); color: var(--vf-code-ink); }
.vf-code__pane { margin: 0; padding: 1rem 1.1rem; font: 0.78rem/1.65 var(--sc-font-mono); color: var(--vf-code-ink); overflow-x: auto; min-height: 14rem; }
.vf-code__pane[hidden] { display: none; }
.vf-tok-k { color: #c7a6ff; } .vf-tok-s { color: #9fe0b5; } .vf-tok-c { color: #8c93a6; } .vf-tok-n { color: #f5c07a; }
@media (max-width: 960px) { .vf-code__box { grid-template-columns: minmax(0, 1fr); } }

/* A local browser MCP and SnapRender: different jobs, so a plain comparison, not a scorecard. */
.vf-vs__scroll { margin-top: var(--sc-6); overflow-x: auto; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); background: var(--sc-surface); }
.vf-vs__table { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: 0.95rem; }
.vf-vs__table th, .vf-vs__table td { padding: 0.85rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sc-hairline); }
.vf-vs__table tr:last-child th, .vf-vs__table tr:last-child td { border-bottom: 0; }
.vf-vs__table thead th { font-weight: 650; color: var(--sc-ink); }
.vf-vs__table thead small { display: block; margin-top: 0.2rem; font-weight: 500; font-size: 0.8rem; color: var(--sc-ink-soft); }
.vf-vs__table tbody th { width: 26%; font-weight: 560; color: var(--sc-ink-soft); }
.vf-vs__table td { color: var(--sc-ink-soft); }
.vf-vs__table .is-us { background: color-mix(in oklab, var(--vf-brand) 9%, transparent); color: var(--sc-ink); font-weight: 560; }
.vf-vs__table thead .is-us { color: var(--sc-accent); }
/* Phones: each row becomes a question with the two answers under it, labelled. */
@media (max-width: 640px) {
  .vf-vs__table { min-width: 0; }
  .vf-vs__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .vf-vs__table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--sc-hairline); }
  .vf-vs__table tbody tr:last-child { border-bottom: 0; }
  .vf-vs__table tbody th { grid-column: 1 / -1; width: auto; padding: 0.8rem 0.9rem 0.2rem; border: 0; color: var(--sc-ink); font-weight: 650; }
  .vf-vs__table td { padding: 0.35rem 0.9rem 0.8rem; border: 0; font-size: 0.9rem; }
  .vf-vs__table td::before { content: attr(data-col); display: block; margin-bottom: 0.2rem; font-size: 0.72rem; font-weight: 600; color: var(--sc-ink-soft); }
  .vf-vs__table td.is-us::before { color: var(--sc-accent); }
}

.vf-price__table { margin-top: var(--sc-6); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--sc-hairline-strong); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); overflow: hidden; }
.vf-plan { padding: 1.3rem 1.1rem; display: grid; gap: 0.4rem; align-content: start; background: var(--sc-surface); }
.vf-plan--free { background: color-mix(in oklab, var(--vf-brand) 10%, var(--sc-surface)); }
.vf-plan--best { background: color-mix(in oklab, var(--vf-ok) 9%, var(--sc-surface)); }
.vf-plan__name { font-size: 0.92rem; font-weight: 650; color: var(--sc-accent); }
.vf-plan__price { font-size: var(--sc-t-xl); font-weight: 700; font-stretch: 108%; letter-spacing: var(--sc-track-snug); }
.vf-plan__price small { font-size: 0.85rem; font-weight: 500; color: var(--sc-ink-soft); }
.vf-plan__qty { color: var(--sc-ink); font-size: 0.9rem; }
.vf-plan__each { font: 600 0.78rem/1.3 var(--sc-font-mono); color: var(--sc-ink-soft); }
.vf-plan--best .vf-plan__each { color: var(--vf-ok); }
@media (max-width: 1100px) {
  .vf-price__table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-plan--free { grid-column: 1 / -1; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; column-gap: 1.5rem; }
  .vf-plan--free .vf-plan__name { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .vf-price__table { grid-template-columns: minmax(0, 1fr); }
  .vf-plan--free { grid-template-columns: minmax(0, 1fr); }
}
.vf-price__foot { margin-top: var(--sc-4); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; color: var(--sc-ink-soft); font-size: 0.92rem; }
.vf-price__foot a:not(.vf-btn) { color: var(--sc-accent); text-underline-offset: 3px; }

.vf-compare { margin-top: var(--sc-7); }
.vf-compare h3 { margin: 0 0 var(--sc-4); font-size: var(--sc-t-lg); font-weight: 650; font-stretch: 106%; }
.vf-compare__scroll { overflow-x: auto; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); background: var(--sc-surface); }
.vf-compare__table { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: 0.92rem; }
.vf-compare__table th, .vf-compare__table td { padding: 0.8rem 1rem; text-align: right; border-bottom: 1px solid var(--sc-hairline); white-space: nowrap; }
.vf-compare__table thead th { font-size: 0.82rem; font-weight: 600; color: var(--sc-ink-soft); }
.vf-compare__table th[scope="row"], .vf-compare__table thead th:first-child { text-align: left; }
.vf-compare__table tbody th { font-weight: 600; color: var(--sc-ink); }
.vf-compare__table td { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.vf-compare__table td.is-low { color: var(--sc-ink); font-weight: 700; }
.vf-compare__table tr:last-child th, .vf-compare__table tr:last-child td { border-bottom: 0; }
.vf-compare__table tr.is-us { background: color-mix(in oklab, var(--vf-brand) 12%, transparent); }
.vf-compare__table tr.is-us th { color: var(--sc-accent); }
.vf-compare__table tr.is-us td { color: var(--sc-ink); font-weight: 650; }
.vf-compare__note { margin: var(--sc-3) 0 0; max-width: 72ch; font-size: 0.8rem; line-height: 1.55; color: var(--sc-ink-soft); }
.vf-compare__note a { color: var(--sc-accent); }

.vf-faq__list { margin-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.vf-faq__list details { border-bottom: 1px solid var(--sc-hairline); }
.vf-faq__list summary { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font-weight: 600; font-size: 1.05rem; }
.vf-faq__list summary::-webkit-details-marker { display: none; }
.vf-faq__list summary::after { content: "+"; position: absolute; right: 0.4rem; top: 1.05rem; color: var(--sc-accent); font: 500 1.2rem/1 var(--sc-font-mono); transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.vf-faq__list details[open] summary::after { transform: rotate(45deg); }
.vf-faq__list details p { margin: 0 0 1.2rem; max-width: 68ch; color: var(--sc-ink-soft); line-height: 1.65; }
.vf-faq__list details a { color: var(--sc-accent); }

/* =========================================================== ACT 8: close */
.vf-close { padding-bottom: calc(var(--sc-section) + 2rem); }
.vf-close__inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sc-5); width: 100%; max-width: 54rem; margin: 0 auto; text-align: center; }
.vf-close__inner h2 { margin: 0; }
.vf .vf-close__inner h2 { font-size: clamp(2.2rem, 1.2rem + 3vw, 4.2rem); line-height: 1; }
.vf-close__inner .sc-body { margin: 0 auto; }
.vf-close__actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sc-5); width: 100%; }
.vf-close__more { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; font-size: 0.9rem; }
.vf-close__more a { color: var(--sc-accent); text-underline-offset: 3px; }

/* ------------------------------------------------------------- phone fit */
@media (max-width: 560px) {
  /* Commands wrap inside their box; Copy stays on the right of the first line. */
  .vf-cmd--stack { grid-template-areas: "text copy"; align-items: start; }
  .vf-cmd--stack .vf-cmd__line { white-space: normal; overflow-wrap: break-word; word-break: normal; }
  .vf-cmd--stack .vf-cmd__line + .vf-cmd__line { padding-left: 0; }
  .vf-cmd--stack .vf-cmd__cont { display: none; }
  .vf-cmd--line .vf-cmd__text { white-space: normal; overflow-wrap: break-word; line-height: 1.5; }
  .vf-way__code, .vf-code__pane, .vf-snippet { white-space: pre-wrap; overflow-wrap: anywhere; }
  .vf-hero__actions { flex-wrap: nowrap; gap: 0.5rem; margin-bottom: var(--sc-4); }
  .vf-hero__actions .vf-btn--lg { flex: 1 1 0; min-width: 0; padding: 0 0.8rem; font-size: 0.92rem; min-height: 48px; }
  .vf-hero__copy .sc-body { margin-bottom: var(--sc-5); font-size: 0.98rem; }
  .vf .vf-hero__copy h1 { font-size: clamp(2.3rem, 9.6vw, 2.8rem); }
  .vf-hero__kicker { font-size: 0.86rem; }
  .vf-hero__trust { font-size: 0.8rem; gap: 0.3rem 0.9rem; }
  .vf-switch__tabs { gap: 0.1rem; flex-wrap: nowrap; }
  .vf-switch__tab { padding: 0.42rem 0.45rem; font-size: 0.74rem; }
  .vf-chips .vf-chip:nth-child(4) { display: none; }
  .vf-try__note { display: none; }
  .vf-scope { aspect-ratio: 16 / 9; }
  .vf-peak__head .sc-body { font-size: 0.95rem; }
}

/* ======================================================= signature: the roll */
.vf-roll {
  position: fixed; left: 50%; bottom: 14px; z-index: 50; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px;
  background: rgb(6 7 9 / 0.88); border: 1px solid rgb(255 255 255 / 0.16);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 300ms var(--sc-ease-out);
}
.vf-roll.is-on { opacity: 1; }
.vf-roll.is-off { opacity: 0; pointer-events: none; }
.vf-roll__label { font: 600 0.62rem/1 var(--sc-font-mono); color: #9ba2b3; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 0.4rem 0 0.2rem; }
.vf-roll__frame {
  position: relative; width: 52px; height: 34px; padding: 0; border-radius: 5px; overflow: hidden; cursor: pointer;
  border: 1px solid rgb(255 255 255 / 0.16); background: repeating-linear-gradient(90deg, #0d0f14 0 6px, #0a0b0f 6px 12px);
  transition: transform 200ms var(--sc-ease-out), border-color 200ms;
}
.vf-roll__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; opacity: 0; transform: scale(1.15); transition: opacity 300ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); }
.vf-roll__frame.is-exposed img { opacity: 1; transform: none; }
.vf-roll__frame.is-now { border-color: #9aa2ff; box-shadow: 0 0 0 1px #9aa2ff; transform: translateY(-2px); }
.vf-roll__frame.is-yours { border-color: #9aa2ff; }
.vf-roll__frame:focus-visible { outline: 2px solid #9aa2ff; outline-offset: 2px; }
.vf-roll__frame[data-vf-yours]:not(.is-yours) { border-style: dashed; border-color: rgb(154 162 255 / 0.55); background: transparent; }
.vf-roll__now { display: inline-flex; align-items: baseline; gap: 0.5rem; min-width: 11.5rem; padding: 0 0.5rem 0 0.6rem; border-left: 1px solid rgb(255 255 255 / 0.14); font: 500 0.74rem/1 var(--sc-font-text); color: #e9ebf2; white-space: nowrap; }
.vf-roll__now b { font: 600 0.68rem/1 var(--sc-font-mono); color: #9aa2ff; }
.vf-blink { position: fixed; inset: 0; z-index: 49; pointer-events: none; background: #000; opacity: 0; }
@media (max-width: 760px) {
  .vf-roll { bottom: 10px; gap: 5px; padding: 6px 8px; }
  .vf-roll__label { display: none; }
  .vf-roll__frame { width: 10px; height: 10px; border-radius: 50%; }
  .vf-roll__frame img { display: none; }
  .vf-roll__frame.is-exposed { background: #9aa2ff; border-color: #9aa2ff; }
  .vf-roll__frame.is-now { transform: scale(1.3); box-shadow: none; }
  .vf-roll__now { min-width: 0; font-size: 0.7rem; }
}

/* ======================================================= footer (themed chrome) */
.vf-foot { position: relative; z-index: 2; background: var(--sc-canvas); border-top: 1px solid var(--sc-hairline); }
/* The shared footer partial (views/partials/footer.ejs) carries the analytics beacon and CTA attribution.
   Its utility classes are inert here (this page does not load the CSS framework), so it is styled by
   structure: footer > container > [column grid, bottom bar]. tests/ai-agents-page.test.ts pins that shape. */
.vf-foot footer { padding: clamp(3rem, 6vw, 5rem) var(--sc-gutter) 6rem; }
.vf-foot footer > div { max-width: var(--sc-maxw); margin: 0 auto; }
.vf-foot footer > div > div:first-child { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem; }
.vf-foot footer h4 { margin: 0 0 1rem; font-size: 0.84rem; font-weight: 650; color: var(--sc-ink); }
.vf-foot footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.vf-foot footer li a { color: var(--sc-ink-soft); text-decoration: none; font-size: 0.86rem; }
.vf-foot footer li a:hover { color: var(--sc-ink); }
.vf-foot footer > div > div:last-child { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; color: var(--sc-ink-soft); font-size: 0.82rem; }
.vf-foot footer > div > div:last-child > div { display: flex; align-items: center; gap: 0.6rem; }
.vf-foot footer > div > div:last-child svg { width: 22px; height: 22px; }
.vf-foot footer > div > div:last-child span { color: var(--sc-ink); font-weight: 650; }
.vf-foot footer > div > div:last-child p { margin: 0; }
@media (max-width: 960px) { .vf-foot footer > div > div:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vf-foot footer > div > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================== no script, no engine, no motion */
/* Content must never depend on the engine: without JavaScript (or if the engine fails to load) every cue and
   reveal shows in its settled state, every client guide is readable, and the cookie example shows before and after. */
html:not(.js) [data-sc-cue], html.vf-fallback [data-sc-cue] { opacity: 1 !important; transform: none !important; }
html:not(.js) [data-sc-in], html:not(.js) [data-sc-stagger] > *,
html.vf-fallback [data-sc-in], html.vf-fallback [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
html:not(.js) [data-sc-reveal], html.vf-fallback [data-sc-reveal] { clip-path: none !important; }
html:not(.js) .vf-clients__panel[hidden] { display: grid; }
html:not(.js) .vf-switch__panel[hidden] { display: grid; }
html:not(.js) .vf-code__pane[hidden] { display: block; }
html:not(.js) .vf-roll { display: none; }
html:not(.js) .vf-seen__dialog, html:not(.js) .vf-seen__box, html:not(.js) .vf-seen__shade,
html.vf-fallback .vf-seen__dialog, html.vf-fallback .vf-seen__box, html.vf-fallback .vf-seen__shade { display: none; }
html:not(.js) .vf-seen__raw, html.vf-fallback .vf-seen__raw {
  inset: auto 0.7rem 0.7rem auto !important; width: 34% !important; height: auto !important; opacity: 1 !important;
  border-radius: 6px; outline: 2px solid #f5b454; z-index: 5;
}
html:not(.js) .vf-seen__done, html.vf-fallback .vf-seen__done { opacity: 1; transform: none; }
html.vf-fallback .vf-term [data-at] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vf-hero__wall, .vf-tile, .vf-agent { transform: none !important; }
  .vf-shutter, .vf-flash, .vf-blink, .vf-fly, .vf-seen__flash { display: none !important; }
  .vf-attach img, .vf-reply { opacity: 1 !important; transform: none !important; transition: none; }
  .vf-scope__img { transition: none; }
  .vf-seen__dialog, .vf-seen__box, .vf-seen__shade { display: none; }
  .vf-seen__raw { inset: auto 0.7rem 0.7rem auto !important; width: 34% !important; height: auto !important; opacity: 1 !important; border-radius: 6px; outline: 2px solid #f5b454; z-index: 5; }
  .vf-seen__done, .vf-seen__frame { opacity: 1; transform: none; }
  .vf-clean__step { opacity: 1; }
  html.js .vf-term [data-at] { opacity: 1; transform: none; transition: none; }
}

/* ============================================= round 3 review fixes (design, cross-browser, accessibility) */
/* One left edge for every act: the content column of .sc-wrap. */
:root { --vf-col: max(var(--sc-gutter), calc((100vw - var(--sc-maxw)) / 2 + var(--sc-gutter))); }
html.vf-cinema .vf-hero__copy { left: var(--vf-col); }
html.vf-cinema .vf-clean .sc-stage { padding-inline: var(--vf-col); }
html.vf-cinema .vf-clean__grid { max-width: none; margin: 0; }
html.vf-cinema .vf-rail { padding-inline: var(--vf-col); }
html.vf-cinema .vf-sheet__head { max-width: none; padding-inline: var(--vf-col); }
/* Section headings stay below the H1. */
.vf h2.sc-display--lg { font-size: clamp(2.2rem, 1.3rem + 2.4vw, 3.75rem); line-height: 1; }
/* The pinned acts have their final size from the first paint (no layout shift while the engine mounts). */
html.vf-cinema #eyes { height: 125vh; }
html.vf-cinema #clean { height: 180vh; }
html.vf-cinema #tools { height: 200vh; }
html.vf-cinema [data-vf-pin] > [data-sc-stage] { position: sticky; top: 0; height: 100vh; overflow: clip; }
/* Hero: the client tabs sit inside the command box, so the column reads as one action. */
.vf-hero .vf-switch { border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); background: color-mix(in oklab, var(--sc-surface) 88%, transparent); padding: 0.35rem 0.35rem 0.55rem; gap: 0.2rem; }
.vf-hero .vf-switch__tab { border: 0; background: none; box-shadow: none; padding: 0.35rem 0.55rem; border-radius: 6px; }
.vf-hero .vf-switch__tab[aria-selected="true"] { background: none; box-shadow: inset 0 -2px 0 var(--sc-accent); color: var(--sc-ink); border-radius: 0; }
.vf-hero .vf-switch .vf-cmd, .vf-hero .vf-switch__row { border: 0; box-shadow: none; background: none; min-height: 3.6rem; padding-left: 0.65rem; }
.vf-hero .vf-switch__panel { min-height: 5.4rem; }
.vf-hero .vf-switch__help { padding-left: 0.65rem; }
.vf-agent { bottom: 3.5vh; width: min(24rem, 29vw); }
.vf-agent__head { white-space: nowrap; }
.vf-agent__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vf-bar__mark svg { flex: none; }
@media (max-width: 380px) { .vf-bar .vf-btn { padding: 0 0.75rem; font-size: 0.84rem; } }
/* "Or connect it yourself": the command is as wide as it needs, readable size. */
.vf-clients__panel .vf-cmd--line { width: fit-content; max-width: 100%; justify-self: start; font-size: 0.8125rem; }
.vf-cmd__text { font-size: 0.8125rem; }
.vf-tab small, .vf-scope__tag, .vf-frame__strip figcaption { font-size: 0.72rem; }
@media (min-width: 861px) and (max-width: 1180px) { .vf-chips .vf-chip:nth-child(4) { display: none; } }
.vf-compare__scroll, .vf-faq__list { max-width: 58rem; }
@media (max-width: 640px) {
  .vf-compare__table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--sc-surface); }
  .vf-compare__scroll { mask-image: linear-gradient(90deg, #000 82%, transparent); }
}
/* Light theme: atmosphere, not fog; cards visible; result box light. */
html[data-theme="light"] .vf-hero__wall { opacity: calc(0.3 - var(--sc-p, 0) * 0.08); filter: grayscale(0.35) contrast(0.9); }
html[data-theme="light"] .vf-way { background: #fff; border-color: color-mix(in oklab, var(--sc-ink) 14%, transparent); box-shadow: var(--sc-e1); }
html[data-theme="light"] .vf-finder__readout { color: #3730a3; background: rgb(255 255 255 / 0.85); padding: 0.2rem 0.4rem; border-radius: 4px; }
/* Keyboard: the bars never cover a focused element; hidden roll frames are not tab stops; reveals open on focus. */
html { scroll-padding-top: calc(var(--vf-bar-h) + 0.5rem); scroll-padding-bottom: 5rem; }
.vf-roll { visibility: hidden; transition: opacity 300ms var(--sc-ease-out), visibility 0s linear 300ms; }
.vf-roll.is-on { visibility: visible; transition: opacity 300ms var(--sc-ease-out), visibility 0s; }
.vf-roll.is-off { visibility: hidden; transition: opacity 300ms var(--sc-ease-out), visibility 0s linear 300ms; }
[data-sc-in]:focus-within { opacity: 1 !important; transform: none !important; }
@media (max-width: 760px) {
  .vf-roll__frame { width: 24px; height: 24px; border: 0; background: none; display: grid; place-items: center; }
  .vf-roll__frame::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgb(154 162 255 / 0.55); }
  .vf-roll__frame.is-exposed { background: none; }
  .vf-roll__frame.is-exposed::before { background: #9aa2ff; }
}
/* Safari before 18 needs the prefixed blur. */
.vf-bar.is-scrolled { -webkit-backdrop-filter: saturate(1.2) blur(12px); }
.vf-agent { -webkit-backdrop-filter: blur(10px) saturate(1.15); }
.vf-roll { -webkit-backdrop-filter: blur(10px); }
/* Smallest phones (320 to 374 px): nothing may stick out of the page. */
@media (max-width: 374px) {
  .vf-bar__mark { font-size: 0; gap: 0; }
  .vf-bar__mark svg { width: 30px; height: 30px; }
  .vf-switch__tabs { overflow-x: auto; scrollbar-width: none; }
  .vf-switch__tabs::-webkit-scrollbar { display: none; }
  .vf-switch__tab { padding: 0.4rem 0.38rem; font-size: 0.72rem; }
  .vf-roll__now { display: none; }
  .vf-roll__frame { width: 20px; }
}

/* "Sets itself up": the session stays beside the steps while they switch, compact enough to fit the screen. */
@media (min-width: 1061px) {
  .vf-term { position: sticky; top: calc(var(--vf-bar-h) + 1.5rem); }
  .vf-term__log { gap: 0.4rem; padding-top: 0.85rem; }
  .vf-term__shot { max-width: 18rem; }
}