/* Proxy Creator homepage — landing D (D197, adopted as the homepage in D204):
   the professional product page. Self-contained (does not load /landing/v2/base.css): tokens, reset, layout,
   components and the DOM rendered by /landing/v2/pricing.js.
   Mobile first; breakpoints 480 / 760 / 1020. Scope: body.vd.
   Rules: Inter only (JetBrains Mono inside code), weights 400/500/600, flat cards,
   accent only on primary buttons, spec-list checks, the featured plan, the active
   tab indicator and focus rings. No motion on scroll. */

@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

/* ---------------------------------------------------------------- tokens */
:root {
  /* colour */
  --page: #ffffff;
  --band: #f8f9fb;                 /* pricing + FAQ bands only (and the screenshot canvas) */
  --ink-panel: #0d1016;            /* final CTA, calculator quote, code panel */
  --line: #e3e6eb;
  --line-strong: #d3d8df;
  --tile: #f1f3f5;
  --heading: #080a0f;
  --heading-hover: #262c38;
  --body: #414b5f;
  --muted: #5a6373;
  --accent: #ff5a0a;
  --accent-hover: #e94a00;
  --on-accent: #ffffff;
  --on-ink: #ffffff;
  --on-ink-body: #c9cfd9;
  --on-ink-muted: #9aa3b4;
  --on-ink-line: rgb(255 255 255 / .12);
  --on-ink-line-strong: rgb(255 255 255 / .3);
  --dot: rgb(8 10 15 / .06);
  --shadow-shot: 0 24px 48px -24px rgb(8 10 15 / .18);

  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-h1: 38px;  --lh-h1: 1.12;
  --fs-h2: 30px;  --lh-h2: 1.2;
  --fs-h3: 18px;  --lh-h3: 1.35;
  --fs-lead: 17px; --lh-lead: 1.55;
  --fs-body: 16px; --lh-body: 1.6;
  --fs-small: 14px; --lh-small: 1.5;
  --fs-micro: 12px;
  --fs-btn: 16px;
  --fs-btn-primary: 18.67px;
  --fs-btn-sm: 15px;
  --fs-price: 32px;
  --fs-quote-total: 40px;
  --tracking-head: -0.02em;

  /* layout */
  --container: 1328px;
  --gutter: 20px;
  --section: 56px;
  --hero-pad: 32px;
  --strip-pad: 40px;
  --gap-head: 12px;
  --gap-module: 40px;
  --gap-sub: 56px;
  --gap-grid: 16px;
  --split-gap: 40px;
  --nav-h: 64px;

  /* shape */
  --r-btn: 8px;
  --r-card: 12px;
  --r-panel: 16px;
  --r-pill: 999px;
  --pad-card: 24px;
  --pad-panel: 24px;
  --btn-h: 52px;
  --btn-h-sm: 40px;

  /* motion */
  --dur: 150ms;
}
@media (min-width: 480px) { :root { --gutter: 24px; } }
@media (min-width: 760px) {
  :root {
    --fs-h1: 56px; --lh-h1: 1.08;
    --fs-h2: 40px; --lh-h2: 1.15;
    --fs-h3: 20px;
    --fs-lead: 19px;
    --fs-price: 40px;
    --fs-quote-total: 44px;
    --section: 64px;
    --hero-pad: 56px;
    --gap-grid: 24px;
    --gap-sub: 64px;
    --pad-panel: 40px;
  }
}
@media (min-width: 1020px) { :root { --section: 96px; --hero-pad: 72px; --split-gap: 64px; --gap-sub: 80px; --pad-panel: 48px; } }

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; padding-top: var(--nav-h); background: var(--page); color: var(--body); font: 400 var(--fs-body)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--tile); color: var(--heading); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.vd .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; }
.vd .skip-link { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: var(--r-btn); background: var(--heading); color: var(--on-ink); font-weight: 600; text-decoration: none; transform: translateY(-160%); }
.vd .skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- type */
.vd h1, .vd h2, .vd h3, .vd h4 { color: var(--heading); font-weight: 600; letter-spacing: var(--tracking-head); text-wrap: balance; }
.vd h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.vd h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.vd h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vd h4 { font-size: var(--fs-body); line-height: 1.4; }
.vd .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--body); }
.vd .label { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; color: var(--muted); }
.vd .small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.vd p a, .vd .more-link a { color: var(--heading); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--dur); }
.vd p a:hover { text-decoration-color: var(--line-strong); }

/* ---------------------------------------------------------------- layout */
.vd .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.vd .section, .vd .uses { padding-block: var(--section); }
.vd .band { background: var(--band); }
.vd .sec-head { max-width: 720px; margin: 0 auto var(--gap-module); text-align: center; }
.vd .sec-head .lead { margin-top: var(--gap-head); }
.vd .sub-head { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.vd .sub-head p { margin-top: var(--gap-head); }
.vd .split { display: grid; gap: var(--gap-module); }
@media (min-width: 1020px) { .vd .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--split-gap); align-items: center; } }

/* ---------------------------------------------------------------- buttons */
.vd .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-btn); font: 600 var(--fs-btn)/1 var(--font); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur), border-color var(--dur), color var(--dur); }
.vd .btn .arr, .vd .btn .send { display: none; }
.vd .btn-primary { background: var(--accent); color: var(--on-accent); font-size: var(--fs-btn-primary); }
.vd .btn-primary:hover { background: var(--accent-hover); }
.vd .btn-secondary, .vd .btn-ink { background: var(--page); border-color: var(--line-strong); color: var(--heading); }
.vd .btn-secondary:hover, .vd .btn-ink:hover { border-color: var(--heading); }
.vd .btn-sm { height: var(--btn-h-sm); padding: 0 16px; background: var(--heading); color: var(--on-ink); font-size: var(--fs-btn-sm); }
.vd .btn-sm:hover { background: var(--heading-hover); }
.vd .btn-on-ink { background: transparent; border-color: var(--on-ink-line-strong); color: var(--on-ink); }
.vd .btn-on-ink:hover { border-color: var(--on-ink); }
.vd .btn-block { width: 100%; }
.vd .btn-row, .vd .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.vd .btn-row .btn, .vd .cta-row .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .vd .btn-row .btn, .vd .cta-row .btn { flex: 0 0 auto; } }

/* ---------------------------------------------------------------- icons, checks, tiles, chips */
.vd .ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.vd .tile { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-btn); background: var(--tile); color: var(--heading); }
.vd .tile .ico { width: 22px; height: 22px; }
.vd .check-disc { width: 20px; height: 20px; flex: none; display: inline-grid; place-items: center; }
.vd .check-disc svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vd .checks { display: grid; gap: 12px; }
.vd .checks li { display: flex; align-items: flex-start; gap: 10px; }
.vd .checks .check-disc { margin-top: 2px; }
.vd .chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--page); font-size: var(--fs-micro); font-weight: 500; line-height: 1; color: var(--muted); white-space: nowrap; }
.vd .inline-list { display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (min-width: 760px) {
  .vd .proof-figs { gap: 4px 0; }
  .vd .proof-figs li + li::before { content: "·"; margin-inline: 12px; color: var(--muted); }
}

/* ---------------------------------------------------------------- cards */
.vd .card { background: var(--page); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--pad-card); }
.vd .card-grid { display: grid; gap: var(--gap-grid); }
.vd .icon-card { display: flex; gap: 16px; align-items: flex-start; }
.vd .icon-card p { margin-top: 6px; }
@media (min-width: 760px) {
  .vd .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd .icon-card { flex-direction: column; gap: 20px; }
  .vd .icon-card p { margin-top: 8px; }
}
@media (min-width: 1020px) { .vd .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- product screenshots */
.vd .shot { position: relative; }
.vd .shot-frame { overflow: hidden; padding: var(--pad-m, 0); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--band); box-shadow: var(--shadow-shot); }
.vd .shot-frame img { width: calc(100% + 2 * var(--bleed-m, 0px)); max-width: none; margin-inline: calc(-1 * var(--bleed-m, 0px)); }
.vd .shot-stack { display: grid; gap: 12px; }
/* phone KPI crop is sliced at the top: close the card edge */
.vd .edge-top-m img { border-top: 1px solid var(--line); border-radius: 11px 11px 0 0; }
.vd .shot .chip { position: absolute; top: -12px; right: 16px; }
@media (min-width: 760px) {
  .vd .shot-frame { padding: var(--pad-d, 20px); }
  /* show only the upper part of a crop (the Targeting tab reuses the hero's generator, cropped to the form) */
  .vd .shot-crop picture { aspect-ratio: var(--crop-d); overflow: hidden; }
  .vd .shot-crop picture img { height: 100%; object-fit: cover; object-position: top; }
  .vd .shot-frame img { width: 100%; max-width: 100%; margin-inline: 0; }
  .vd .shot-stack { gap: 16px; }
  .vd .edge-top-m img { border-top: 0; border-radius: 0; }
}

/* ---------------------------------------------------------------- nav */
.vd .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); background: var(--page); border-bottom: 1px solid transparent; transition: border-color var(--dur); }
.vd .nav.is-scrolled { border-bottom-color: var(--line); }
.vd .nav-inner { height: 100%; display: flex; align-items: center; gap: 40px; }
.vd .wordmark { font-size: 19px; font-weight: 600; letter-spacing: var(--tracking-head); line-height: 1; color: var(--heading); text-decoration: none; white-space: nowrap; }
.vd .wordmark span { color: var(--accent); }
.vd .nav-links { display: none; gap: 32px; }
.vd .nav-links a { font-size: 15px; font-weight: 500; color: var(--body); text-decoration: none; transition: color var(--dur); }
.vd .nav-links a:hover, .vd .nav-links a[aria-current="true"] { color: var(--heading); }
.vd .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.vd .nav-login { display: none; align-items: center; height: var(--btn-h-sm); padding: 0 8px; font-size: 15px; font-weight: 500; color: var(--heading); text-decoration: none; }
.vd .nav-login:hover { text-decoration: underline; text-underline-offset: 3px; }
.vd .nav-toggle { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--page); transition: border-color var(--dur); }
.vd .nav-toggle:hover { border-color: var(--heading); }
.vd .nav-toggle span, .vd .nav-toggle span::before, .vd .nav-toggle span::after { display: block; width: 16px; height: 1.5px; border-radius: 1px; background: var(--heading); }
.vd .nav-toggle span { position: relative; }
.vd .nav-toggle span::before, .vd .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.vd .nav-toggle span::before { top: -5px; }
.vd .nav-toggle span::after { top: 5px; }
.vd .nav-toggle[aria-expanded="true"] span { background: transparent; }
.vd .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.vd .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.vd .mobile-menu { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 49; display: none; padding-block: 8px 20px; background: var(--page); border-block: 1px solid var(--line); }
.vd .mobile-menu.is-open { display: block; }
.vd .menu-account { display: contents; }
.vd .mobile-menu a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; color: var(--heading); text-decoration: none; }
@media (min-width: 760px) { .vd .nav-login { display: inline-flex; } }
@media (min-width: 1020px) {
  .vd .nav-links { display: flex; }
  .vd .nav-toggle, .vd .mobile-menu { display: none; }
  .vd .mobile-menu.is-open { display: none; }
}

/* ---------------------------------------------------------------- 1 · hero */
.vd .hero { position: relative; padding-block: var(--hero-pad); overflow: hidden; }
.vd .hero-grid { position: relative; display: grid; gap: 40px; }
.vd .hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 24px; }
.vd .hero-team { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.vd .hero-lead { max-width: 580px; margin-top: 20px; }
.vd .hero .cta-row { margin-top: 32px; }
.vd .micro { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); }
.vd .hero-specs { margin-top: 32px; color: var(--body); }
@media (min-width: 1020px) {
  .vd .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--split-gap); align-items: center; }
  /* the only dot-matrix trace: a faint static grid behind the right half */
  .vd .hero::before { content: ""; position: absolute; inset: 0 0 0 50%; background: radial-gradient(circle, var(--dot) 1.4px, transparent 1.6px) 0 0 / 16px 16px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, var(--heading) 40%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, var(--heading) 40%, transparent 100%); pointer-events: none; }
}

/* ---------------------------------------------------------------- 2 · proof strip */
.vd .proof { padding-block: var(--strip-pad); border-block: 1px solid var(--line); }
.vd .proof-grid { display: grid; gap: 24px; }
.vd .proof-figs, .vd .tools { margin-top: 8px; font-size: var(--fs-body); color: var(--body); }
.vd .proof-figs b { color: var(--heading); font-variant-numeric: tabular-nums; }
.vd .tools { gap: 4px 20px; font-weight: 500; color: var(--heading); }
@media (min-width: 480px) { .vd .tools { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px 28px; } }
.vd .source { margin-top: 8px; font-size: var(--fs-micro); line-height: 1.5; color: var(--muted); }
.vd .proof .label a { color: var(--heading); }

/* ------------------------------------------------- free tier strip (planned) */
/* As thin as the proof strip; plain numbers, no count-up. */
.vd .numbers { padding-block: var(--strip-pad); border-bottom: 1px solid var(--line); }
.vd .numbers-grid { display: grid; gap: 20px; }
.vd .numbers-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.vd .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
.vd .stat dt { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: var(--tracking-head); color: var(--heading); font-variant-numeric: tabular-nums; }
.vd .stat dd { margin-top: 4px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
@media (min-width: 1020px) {
  .vd .numbers-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; }
  .vd .stats { grid-template-columns: repeat(3, minmax(0, 200px)); gap: 48px; }
}
@media (min-width: 1240px) { .vd .proof-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: start; } }

/* ---------------------------------------------------------------- 4 · pricing (pricing.js DOM) */
.vd .plan-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 520px); margin: 0 auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--page); }
.vd .plan-switch button { position: relative; z-index: 1; display: grid; gap: 2px; align-content: center; min-height: 56px; padding: 8px 10px; border: 0; border-radius: var(--r-btn); background: none; text-align: center; color: var(--heading); transition: color var(--dur); }
.vd .plan-switch button b { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.vd .plan-switch button span { font-size: var(--fs-small); line-height: 1.35; color: var(--muted); transition: color var(--dur); }
.vd .plan-switch button[aria-checked="true"] { color: var(--on-ink); }
.vd .plan-switch button[aria-checked="true"] span { color: var(--on-ink-body); }
.vd .plan-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-btn); background: var(--heading); transition: transform 250ms ease; }
.vd .plan-switch[data-on="payg"] .plan-thumb { transform: translateX(100%); }

.vd .tiers { display: grid; gap: var(--gap-grid); margin-top: 40px; }
.vd .tier { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "vol per" "cpm cpm" "btn btn"; align-items: baseline; column-gap: 16px; padding: var(--pad-card); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--page); }
.vd .tier.is-featured { padding: calc(var(--pad-card) - 1px); border: 2px solid var(--accent); }
.vd .tier.is-match:not(.is-featured) { border-color: var(--heading); }
/* white on #ff5a0a is only 3.1:1, so a 14px flag sits on ink with an orange dot (the accent stays on the border) */
.vd .tier-flag { position: absolute; top: -13px; left: 20px; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--heading); color: var(--on-ink); font-size: var(--fs-small); font-weight: 600; line-height: 1; white-space: nowrap; }
.vd .tier-flag i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.vd .tier-flag.is-match-flag { background: var(--heading); color: var(--on-ink); }
.vd .tier-name { grid-area: name; font-size: var(--fs-body); font-weight: 600; color: var(--heading); }
.vd .tier-price { grid-area: price; display: flex; align-items: flex-start; justify-self: end; font-weight: 600; line-height: 1; letter-spacing: var(--tracking-head); color: var(--heading); font-variant-numeric: tabular-nums; }
.vd .tier-price .amt { font-size: var(--fs-price); }
.vd .tier-price .cur, .vd .tier-price .cents { margin-top: 3px; font-size: 18px; }
.vd .tier-price .cents { color: var(--body); }
.vd .tier-per { grid-area: per; justify-self: end; margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }
.vd .tier-vol { grid-area: vol; display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.vd .tier-vol b { font-size: var(--fs-body); font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd .tier-vol span { font-size: var(--fs-small); color: var(--muted); }
.vd .tier-vol .meter { display: none; }
.vd .tier-cpm { grid-area: cpm; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.vd .tier-cpm b { font-size: var(--fs-body); color: var(--heading); font-variant-numeric: tabular-nums; }
.vd .tier .btn { grid-area: btn; margin-top: 20px; }
.vd .roll.is-rolling { display: inline-block; animation: vd-roll 300ms ease; }
@keyframes vd-roll { 0% { opacity: 0; transform: translateY(35%); } 100% { opacity: 1; transform: none; } }
@media (min-width: 760px) {
  .vd .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd .tier { display: flex; flex-direction: column; align-items: stretch; }
  .vd .tier-price { justify-self: auto; margin-top: 16px; }
  .vd .tier-per { justify-self: auto; margin-top: 6px; }
  .vd .tier-vol { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
  .vd .tier-cpm { margin: 8px 0 24px; padding-top: 0; border-top: 0; }
  .vd .tier .btn { margin-top: auto; }
}
@media (min-width: 1020px) { .vd .tiers { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }

.vd .tiers-incl { display: grid; justify-content: center; gap: 10px; margin-top: 32px; font-size: var(--fs-body); color: var(--body); }
@media (min-width: 760px) { .vd .tiers-incl { display: flex; flex-wrap: wrap; gap: 10px 24px; } }
.vd .tiers-incl b { flex-basis: 100%; text-align: center; font-weight: 600; color: var(--heading); }
.vd .tiers-incl span { display: inline-flex; align-items: center; gap: 8px; }
.vd .tiers-fine { margin-top: 16px; text-align: center; font-size: var(--fs-small); color: var(--muted); }

/* calculator */
.vd .sub-block { margin-top: var(--gap-sub); }
.vd .calc { display: grid; gap: var(--gap-grid); }
.vd .calc-in { display: grid; gap: 28px; align-content: start; padding: var(--pad-card); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--page); }
.vd .field-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.vd .field-label output { flex-basis: 100%; font-size: var(--fs-quote-total); font-weight: 600; line-height: 1.1; letter-spacing: var(--tracking-head); color: var(--heading); font-variant-numeric: tabular-nums; }
.vd .range { position: relative; --p: 50; padding-top: 4px; }
.vd .range-bubble { display: none; }
.vd .range input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.vd .range input[type="range"]:focus-visible { outline: none; }
.vd .range input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--heading) 0 calc(var(--p) * 1%), var(--line) calc(var(--p) * 1%)); }
.vd .range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 2px solid var(--heading); border-radius: 50%; background: var(--page); }
.vd .range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--accent); }
.vd .range input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--line); }
.vd .range input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--heading); }
.vd .range input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--heading); border-radius: 50%; background: var(--page); }
.vd .range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--accent); }
.vd .range-ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }
.vd .presets { display: flex; flex-wrap: wrap; gap: 8px; }
.vd .presets button { height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--page); font-size: var(--fs-small); font-weight: 500; color: var(--heading); font-variant-numeric: tabular-nums; transition: border-color var(--dur), background-color var(--dur), color var(--dur); }
.vd .presets button:hover { border-color: var(--heading); }
.vd .presets button[aria-pressed="true"] { border-color: var(--heading); background: var(--heading); color: var(--on-ink); }
.vd .quote { display: grid; gap: 16px; align-content: start; padding: var(--pad-card); border-radius: var(--r-card); background: var(--ink-panel); color: var(--on-ink-body); }
.vd .quote .label { color: var(--on-ink-muted); }
.vd .quote-plan { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--on-ink); }
.vd .quote-total { display: flex; align-items: center; min-height: 48px; }
/* pricing.js paints the total as dot-matrix LED digits; D shows the plain number from aria-label instead */
.vd .quote-total .led { display: block; font-size: 0; line-height: 1; }
.vd .quote-total .led .dg { display: none; }
.vd .quote-total .led::before { content: attr(aria-label); font-size: var(--fs-quote-total); font-weight: 600; letter-spacing: var(--tracking-head); color: var(--on-ink); font-variant-numeric: tabular-nums; }
.vd .quote-rows { display: grid; }
.vd .quote-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--on-ink-line); font-size: var(--fs-small); }
.vd .quote-rows div:first-child { border-top: 1px solid var(--on-ink-line); }
.vd .quote-rows dt { color: var(--on-ink-muted); }
.vd .quote-rows dd { font-weight: 600; color: var(--on-ink); text-align: right; }
.vd .quote .btn { width: 100%; margin-top: 8px; }
.vd .quote-fine { font-size: var(--fs-small); color: var(--on-ink-muted); }
@media (min-width: 760px) { .vd .calc-in, .vd .quote { padding: 32px; } }
@media (min-width: 1020px) {
  .vd .calc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .vd .calc-in { grid-template-rows: auto auto 1fr; }
  .vd .calc-in > .small { align-self: end; }
}

/* comparison */
.vd .compare-block { margin-top: 48px; text-align: center; }
.vd .compare > summary { list-style: none; width: fit-content; margin-inline: auto; }
.vd .compare > summary::-webkit-details-marker { display: none; }
.vd .compare > summary .ico { width: 18px; height: 18px; transition: transform var(--dur); }
.vd .compare[open] > summary .ico { transform: rotate(45deg); }
.vd .compare-body { margin-top: 24px; text-align: left; }
.vd .cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--page); }
.vd .cmp { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--body); }
.vd .cmp th { font-weight: 500; text-align: left; }
.vd .cmp .yes { display: inline-flex; }
.vd .cmp .yes .check-disc svg { stroke: var(--heading); }
.vd .cmp-note { padding: 16px 20px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 1019.98px) {
  .vd .cmp thead { display: none; }
  .vd .cmp, .vd .cmp tbody, .vd .cmp tr, .vd .cmp th, .vd .cmp td { display: block; }
  .vd .cmp tbody tr { padding: 14px 20px; border-bottom: 1px solid var(--line); }
  .vd .cmp tr.grp { padding: 20px 20px 4px; border-bottom: 0; }
  .vd .cmp tr.grp th { font-size: var(--fs-body); font-weight: 600; color: var(--heading); }
  .vd .cmp tbody th[scope="row"] { padding-bottom: 6px; font-weight: 600; color: var(--heading); }
  .vd .cmp tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; font-size: var(--fs-small); color: var(--heading); text-align: right; }
  .vd .cmp tbody td::before { content: attr(data-col); color: var(--muted); text-align: left; }
}
@media (min-width: 1020px) {
  .vd .cmp thead th { padding: 24px 16px 16px; vertical-align: bottom; border-bottom: 1px solid var(--line); }
  .vd .cmp thead th .tier-name { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
  .vd .cmp thead th b { display: block; margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: var(--tracking-head); color: var(--heading); font-variant-numeric: tabular-nums; }
  .vd .cmp thead th small { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
  .vd .cmp thead th.is-featured { box-shadow: inset 0 2px 0 var(--accent); }
  .vd .cmp tr.grp th { padding: 24px 16px 8px; font-size: var(--fs-small); font-weight: 600; color: var(--heading); }
  .vd .cmp tbody th[scope="row"], .vd .cmp tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .vd .cmp tbody tr:last-child th, .vd .cmp tbody tr:last-child td { border-bottom: 0; }
  .vd .cmp tbody th[scope="row"] { width: 22%; color: var(--body); }
  .vd .cmp tbody td { color: var(--heading); }
}

/* ---------------------------------------------------------------- 5 · features */
.vd .tablist { display: flex; gap: 8px; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.vd .tablist::-webkit-scrollbar { display: none; }
.vd .tab { flex: none; height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--page); font-size: 15px; font-weight: 500; color: var(--body); white-space: nowrap; transition: border-color var(--dur), color var(--dur); }
.vd .tab:hover { color: var(--heading); border-color: var(--heading); }
.vd .tab[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--heading); }
.vd .tabpanel { display: grid; gap: 32px; margin-top: 32px; }
.vd .tabpanel:focus-visible { outline-offset: 8px; }
.vd .panel-copy .checks { margin-top: 16px; }
@media (min-width: 760px) {
  .vd .tablist { justify-content: center; gap: 32px; margin-inline: 0; padding: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .vd .tab { position: relative; height: 48px; padding: 0 2px; border: 0; border-radius: 0; background: none; font-size: var(--fs-body); }
  .vd .tab:hover { color: var(--heading); }
  .vd .tab[aria-selected="true"] { box-shadow: none; }
  .vd .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
  .vd .tab:focus-visible { outline-offset: -2px; }
  .vd .tabpanel { margin-top: var(--gap-module); }
}
@media (min-width: 1020px) { .vd .tabpanel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--split-gap); align-items: center; } }

.vd .also { margin-top: var(--gap-sub); padding-top: var(--gap-module); border-top: 1px solid var(--line); }
.vd .also-title { text-align: center; }
.vd .also-grid { display: grid; gap: 24px; margin-top: 32px; }
.vd .also-grid li { display: flex; gap: 16px; align-items: flex-start; }
.vd .also-grid p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--body); }
@media (min-width: 760px) { .vd .also-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap-grid); } }
@media (min-width: 1020px) { .vd .also-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- 6 · quick start */
.vd .steps { display: grid; gap: 24px; margin-top: 32px; }
.vd .steps li { display: flex; gap: 16px; align-items: flex-start; }
.vd .step-n { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: var(--fs-small); font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.vd .steps h3 { padding-top: 3px; }
.vd .steps p { margin-top: 4px; }
.vd .code { min-width: 0; border-radius: var(--r-card); background: var(--ink-panel); color: var(--on-ink-body); overflow: hidden; }
.vd .code-bar { display: flex; align-items: center; gap: 8px; padding: 0 8px; border-bottom: 1px solid var(--on-ink-line); }
.vd .code-tabs { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.vd .code-tabs::-webkit-scrollbar { display: none; }
.vd .code-tab { position: relative; flex: none; height: 48px; padding: 0 8px; border: 0; background: none; font-size: var(--fs-small); font-weight: 500; color: var(--on-ink-muted); transition: color var(--dur); }
.vd .code-tab:hover { color: var(--on-ink); }
.vd .code-tab[aria-selected="true"] { color: var(--on-ink); }
.vd .code-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--tab-pad, 8px); right: var(--tab-pad, 8px); bottom: 0; height: 2px; background: var(--accent); }
.vd .code-tab:focus-visible { outline-offset: -4px; }
.vd .code-label { flex: none; font-size: var(--fs-micro); font-weight: 500; color: var(--on-ink-muted); }
.vd .code-copy { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--on-ink-line-strong); border-radius: var(--r-btn); background: none; font-size: var(--fs-small); font-weight: 500; color: var(--on-ink); transition: border-color var(--dur); }
.vd .code-copy:hover { border-color: var(--on-ink); }
.vd .code-pane { margin: 0; padding: 20px; overflow-x: auto; font: 400 13px/1.7 var(--mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; color: var(--on-ink-body); tab-size: 2; white-space: pre; }
.vd .code-pane code { font: inherit; }
.vd .code-pane:focus-visible { outline-offset: -4px; }
@media (min-width: 760px) {
  .vd .code-bar { padding: 0 12px 0 10px; }
  .vd .code-tab { --tab-pad: 14px; padding: 0 14px; }
  .vd .code-pane { padding: 24px; }
}

/* ---------------------------------------------------------------- 7 · CTA card */
.vd .cta-card { display: grid; gap: 24px; padding: var(--pad-panel) var(--pad-card); border: 1px solid var(--line); border-radius: var(--r-card); }
.vd .cta-card p { margin-top: var(--gap-head); font-size: var(--fs-lead); line-height: var(--lh-lead); }
@media (min-width: 760px) { .vd .cta-card { padding: var(--pad-panel); } }
@media (min-width: 1020px) { .vd .cta-card { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; } }

/* ---------------------------------------------------------------- 9 · reviews */
.vd .reviews-grid { display: flex; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.vd .reviews-grid::-webkit-scrollbar { display: none; }
.vd .reviews-grid .review { flex: 0 0 86%; scroll-snap-align: start; }
.vd .review { display: flex; flex-direction: column; gap: 12px; }
.vd .review h3 { font-size: var(--fs-body); line-height: 1.4; }
.vd .review blockquote { margin: 0; color: var(--body); }
.vd .review.is-featured blockquote { font-size: 22px; line-height: 1.45; color: var(--heading); letter-spacing: -0.01em; }
.vd .review-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 12px; font-size: var(--fs-small); }
.vd .review-by p { display: grid; margin-right: auto; line-height: 1.35; }
.vd .review-by b { color: var(--heading); }
.vd .review-by p span { color: var(--muted); }
.vd .review-by a { flex-basis: 100%; margin-top: 4px; color: var(--heading); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vd .review-by a:hover { text-decoration-color: var(--line-strong); }
.vd .avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tile); font-size: 15px; font-weight: 600; color: var(--heading); }
.vd .more-link { margin-top: 32px; text-align: center; }
@media (min-width: 760px) {
  .vd .reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); margin-inline: 0; padding: 0; overflow: visible; }
  .vd .reviews-grid .review { flex: none; }
  .vd .review.is-featured { grid-column: 1 / -1; }
}
@media (min-width: 1020px) {
  .vd .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vd .review.is-featured { grid-column: 1; grid-row: 1 / span 2; padding: 32px; }
  .vd .review.is-featured blockquote { font-size: 28px; line-height: 1.4; }
}

/* ---------------------------------------------------------------- 10 · FAQ */
.vd .faq-list { max-width: 800px; margin-inline: auto; border-top: 1px solid var(--line); }
.vd .faq-item { border-bottom: 1px solid var(--line); }
.vd .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; list-style: none; cursor: pointer; }
.vd .faq-item summary::-webkit-details-marker { display: none; }
.vd .faq-item summary h3 { font-size: 17px; line-height: 1.4; }
.vd .faq-item summary .ico { width: 20px; height: 20px; color: var(--heading); transition: transform var(--dur); }
.vd .faq-item[open] summary .ico { transform: rotate(45deg); }
.vd .faq-item summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vd .faq-item summary:focus-visible { outline-offset: 4px; }
.vd .faq-item > p { max-width: 680px; padding: 0 36px 20px 0; }
@media (min-width: 760px) { .vd .faq-item summary h3 { font-size: 18px; } }

/* ---------------------------------------------------------------- 11 · final CTA */
.vd .final { padding: var(--pad-panel) var(--pad-card); border-radius: var(--r-panel); background: var(--ink-panel); color: var(--on-ink-body); text-align: center; }
.vd .final h2 { color: var(--on-ink); }
.vd .final p { max-width: 560px; margin: var(--gap-head) auto 0; font-size: var(--fs-lead); line-height: var(--lh-lead); }
.vd .final .btn-row { justify-content: center; margin-top: 32px; }
@media (min-width: 760px) { .vd .final { padding: 72px var(--pad-panel); } }

/* ---------------------------------------------------------------- 12 · footer */
.vd .foot { padding-block: var(--section) 40px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.vd .footer-grid { display: grid; gap: 40px; }
.vd .footer-brand p { margin-top: 12px; color: var(--muted); }
.vd .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.vd .footer-h { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0; color: var(--heading); }
.vd .footer-cols ul { display: grid; gap: 4px; margin-top: 12px; }
.vd .footer-cols a { display: inline-flex; align-items: center; min-height: 32px; color: var(--body); text-decoration: none; }
.vd .footer-cols a:hover { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.vd .footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); }
@media (min-width: 760px) {
  .vd .footer-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
  .vd .footer-cols { grid-template-columns: repeat(3, 160px); }
}

/* ---------------------------------------------------------------- 13 · sticky phone CTA */
.vd .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; gap: 12px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--page); visibility: hidden; }
.vd .sticky-cta.is-visible { visibility: visible; }
.vd .sticky-cta .btn { height: 48px; }
.vd .sticky-cta .btn-primary { flex: 1 1 auto; }
.vd .sticky-cta .btn-secondary { flex: 0 0 auto; }
@media (min-width: 760px) { .vd .sticky-cta { display: none; } }