/* Veritaset design tokens (docs/visibility/content_quality/DESIGN_SYSTEM.md v0.2, rules §0b/§0c/§1–§3).
   The ONLY place a colour value or a font size may be written. vt.css and the components use var(--…) only;
   web/test/tokens.test.js fails the build on any literal colour or font-size outside this file.
   Colours are named by role, never by hue, so a role is the same on every page (§0b). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 900; font-stretch: 100% 125%; font-display: swap;
  src: url(/assets/fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 900; font-stretch: 100% 125%; font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Cinzel: the wordmark only (handoff "Cinzel for the wordmark only"). */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/cinzel-latin.woff2) format("woff2"); }

:root {
  /* ---- colour roles (§2 palette, §0b roles, §0c backgrounds) ---- */
  --c-ink: #1D1B38;          /* text, dark bands, footer, the third option card */
  --c-ink-raised: #2A2850;   /* drifting tags and code chips on ink */
  --c-ink-line: #3A3860;     /* rules on ink */
  --c-on-ink: #DCDBEA;       /* body text on ink */
  --c-on-ink-quiet: #B9B8CC; /* secondary text on ink */
  --c-ground: #EDF1E6;       /* page base (soft sage) */
  --c-paper: #FFFFFF;        /* content cards, rows, tables only */
  --c-paper-soft: #F6F7F2;   /* inactive chips on paper */
  --c-track: #E9EADF;        /* bar tracks, table rules */
  --c-lime: #D9F25C;         /* first option card, call-out bands, prices on ink; never text on white */
  --c-sky: #9AD8F2;          /* hero bands */
  --c-sky-tint: #DDF1FA;     /* tinted band */
  --c-coral: #FF9471;        /* second option card, extra-use bar */
  --c-coral-tint: #FFE6DA;   /* tinted band */
  --c-blue: #3341E6;         /* links, primary text buttons */
  --c-blue-hover: #1F2AB8;
  --c-muted: #4D4B63;        /* secondary text, AA on ground and paper */
  --c-dot: rgba(29, 27, 56, 0.10);     /* dot texture on the sky tint */
  --c-glass: rgba(255, 255, 255, 0.55); /* need tiles on the sky hero */
  --c-glass-line: rgba(255, 255, 255, 0.75);
  --c-glass-panel: rgba(255, 255, 255, 0.45);  /* slider panel over a hero */
  --c-glass-panel-line: rgba(255, 255, 255, 0.70);
  --c-shadow: rgba(29, 27, 56, 0.35);
  --c-overlay: rgba(29, 27, 56, 0.86);        /* photo hero: ink gradient behind white text */
  --c-overlay-phone: rgba(29, 27, 56, 0.80);  /* photo hero on a phone: text spans the full width */
  --c-overlay-none: rgba(29, 27, 56, 0);

  /* ---- type (§3): one scale, desktop values; phone values below ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-mark: "Cinzel", "Times New Roman", serif;
  --fs-display: 64px;  --lh-display: 64px;
  --fs-h1: 48px;       --lh-h1: 52px;
  --fs-h2: 38px;       --lh-h2: 42px;
  --fs-h3: 24px;       --lh-h3: 30px;
  --fs-price-xl: 64px; --lh-price-xl: 64px;
  --fs-price: 38px;    --lh-price: 40px;
  --fs-lead: 21px;     --lh-lead: 32px;
  --fs-body: 18px;     --lh-body: 29px;
  --fs-small: 15px;    --lh-small: 22px;
  --fs-label: 13px;    --lh-label: 16px;
  --fs-nav: 15px;      --lh-nav: 22px;

  /* ---- spacing, widths (§0b width plays), radii, shadows ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 96px;
  --gutter: 32px;
  --w-text: 720px;   /* running text, FAQ, how we picked */
  --w-grid: 1100px;  /* card grids and comparisons */
  --w-wide: 1200px;  /* header, footer */
  --r-sm: 10px; --r-md: 18px; --r-panel: 22px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;
  --sh-card: 0 24px 48px -28px var(--c-shadow);
  --sh-lift: 0 24px 44px -24px var(--c-shadow);
  --motion-slow: 60s;
  --tag-slot: 340px; /* drifting price tags: one slot per tag, never less than the longest tag plus a gap */
}

@media (max-width: 640px) {
  :root {
    --fs-display: 40px;  --lh-display: 42px;
    --fs-h1: 32px;       --lh-h1: 36px;
    --fs-h2: 26px;       --lh-h2: 30px;
    --fs-h3: 20px;       --lh-h3: 26px;
    --fs-price-xl: 48px; --lh-price-xl: 48px;
    --fs-price: 28px;    --lh-price: 30px;
    --fs-lead: 18px;     --lh-lead: 28px;
    --fs-body: 17px;     --lh-body: 27px;
    --fs-small: 14px;    --lh-small: 21px;
    --fs-label: 12px;    --lh-label: 16px;
    --gutter: 16px;
  }
}

/* Veritaset redesign components (DESIGN_SYSTEM.md §4). Every colour and font size is a token from tokens.css;
   web/test/tokens.test.js fails on any literal. Built into /assets/vt.css after tokens.css by build/generate.js. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.v-body { margin: 0; background: var(--c-ground); color: var(--c-ink); font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-body); line-height: var(--lh-body); }
a { color: var(--c-blue); }
a:hover { color: var(--c-blue-hover); }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); hyphens: manual; overflow-wrap: break-word; }
h1, h2 { text-wrap: balance; }
p { margin: 0; }
.v-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v-center { text-align: center; }
.v-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---- widths (§0b width plays) ---- */
.v-wrap { width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.v-wrap--text { max-width: calc(var(--w-text) + 2 * var(--gutter)); }
.v-wrap--grid { max-width: calc(var(--w-grid) + 2 * var(--gutter)); }
.v-wrap--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }

/* ---- type roles ---- */
.v-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 900; font-stretch: 108%; letter-spacing: -0.015em; text-transform: uppercase; }
.v-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 900; font-stretch: 105%; letter-spacing: -0.015em; }
.v-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 900; font-stretch: 105%; letter-spacing: -0.01em; }
.v-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.v-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.v-muted { color: var(--c-muted); }
.v-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.v-prose > * + * { margin-top: var(--sp-4); }
.v-prose ul { margin: 0; padding-left: var(--sp-5); }
.v-prose li + li { margin-top: var(--sp-2); }

/* ---- mark and wordmark ---- */
.v-mark--on-light .v-mark__seal { fill: var(--c-ink); }
.v-mark--on-light .v-mark__v { fill: var(--c-lime); }
.v-mark--on-dark .v-mark__seal { fill: var(--c-lime); }
.v-mark--on-dark .v-mark__v { fill: var(--c-ink); }
.v-wordmark { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.v-wordmark--on-light, .v-wordmark--on-light:hover { color: var(--c-ink); }
.v-wordmark--on-dark, .v-wordmark--on-dark:hover { color: var(--c-paper); }
.v-wordmark__text { font-family: var(--font-mark); font-weight: 700; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: 0.12em; }

/* ---- agent band ---- */
.v-agentband { background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.v-agentband__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding-top: 10px; padding-bottom: 10px; }
.v-agentband a { color: var(--c-lime); font-weight: 700; text-decoration: none; }

/* ---- header and nav ---- */
.v-header { position: relative; z-index: 2; }
.v-header__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: 20px; padding-bottom: 20px; }
.v-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); font-size: var(--fs-nav); line-height: var(--lh-nav); font-weight: 600; }
.v-nav__link { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; min-height: 44px; }
.v-header--sky .v-nav__link, .v-header--sky .v-nav__link:hover { color: var(--c-ink); }
.v-header--dark .v-nav__link, .v-header--dark .v-nav__link:hover { color: var(--c-paper); }
.v-nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.v-header--dark .v-nav__link[aria-current="page"] { color: var(--c-lime); }
.v-nav__cta { background: var(--c-lime); color: var(--c-ink); text-decoration: none; padding: 12px 20px; border-radius: var(--r-pill); }
.v-nav__cta:hover { color: var(--c-ink); }

/* ---- hero bands ---- */
.v-hero { position: relative; overflow: hidden; }
.v-hero--sky { background: var(--c-sky); color: var(--c-ink); }
.v-hero--dark { background: var(--c-ink); color: var(--c-ground); }
.v-hero__in { position: relative; z-index: 1; }
.v-hero--overlap .v-hero__in { padding-bottom: 140px; }
.v-hero--tall { min-height: 860px; display: flex; flex-direction: column; }
.v-hero--tall .v-hero__in { flex: 1 1 auto; display: flex; }
.v-hero__center { max-width: calc(var(--w-text) + 2 * var(--gutter)); margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; }
.v-hero__left { max-width: calc(var(--w-grid) + 2 * var(--gutter)); margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); }
.v-hero__left > .v-hero__copy { max-width: var(--w-text); display: flex; flex-direction: column; gap: var(--sp-4); }
.v-hero__split { max-width: calc(var(--w-wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-9); display: flex; flex-wrap: wrap; gap: var(--sp-7); align-items: center; }
.v-hero__split > * { flex: 1 1 460px; min-width: 0; }
.v-hero__copy { display: flex; flex-direction: column; gap: var(--sp-5); }
.v-hero--dark .v-lead { color: var(--c-on-ink); }
.v-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.v-eyebrow a { color: inherit; }
.v-meta { font-size: var(--fs-small); line-height: var(--lh-small); }
.v-langswitch { font-size: var(--fs-small); line-height: var(--lh-small); }
.v-langswitch a { color: inherit; font-weight: 700; }
.v-hero--sky .v-meta, .v-hero--sky .v-langswitch { color: var(--c-ink); }
.v-cue { margin: 0 auto; padding-bottom: var(--sp-6); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--c-on-ink-quiet); animation: v-cue 2.4s ease-in-out infinite; }
@keyframes v-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.v-hero__tagline { margin: auto; max-width: calc(900px + 2 * var(--gutter)); padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); text-align: center; }

/* ---- drifting price tags (CSS only; stopped by reduced motion) ---- */
/* A strip along the bottom of the hero; the text column ends above it (padding on .v-hero--tags). */
.v-tags { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none; overflow: hidden; }
.v-hero--tags .v-hero__split { padding-bottom: 190px; }
.v-hero--tags .v-hero__tagline { padding-bottom: 170px; }
.v-tag { position: absolute; left: 0; max-width: calc(var(--tag-slot) - 40px); --travel: max(calc(100vw + var(--tag-slot)), calc(var(--n) * var(--tag-slot))); display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; background: var(--c-ink-raised); color: var(--c-on-ink);
  border-radius: var(--r-pill); padding: 7px 13px; font-size: var(--fs-label); line-height: var(--lh-label); opacity: 0.55;
  animation-timing-function: linear; animation-iteration-count: infinite; }
.v-tag .v-flag { border-radius: 50%; }
.v-tag__check { color: var(--c-lime); }
.v-tag--ltr { animation-name: v-drift-r; }
.v-tag--rtl { animation-name: v-drift-l; }
.v-tag__text { overflow: hidden; text-overflow: ellipsis; }
.v-tag--lane0 { top: 8px; } .v-tag--lane1 { top: 56px; } .v-tag--lane2 { top: 104px; }
@keyframes v-drift-r { from { transform: translateX(calc(-1 * var(--tag-slot))); } to { transform: translateX(calc(var(--travel) - var(--tag-slot))); } }
@keyframes v-drift-l { from { transform: translateX(calc(var(--travel) - var(--tag-slot))); } to { transform: translateX(calc(-1 * var(--tag-slot))); } }

/* ---- rotating example card ---- */
.v-excard { position: relative; background: var(--c-paper-soft); color: var(--c-ink); box-shadow: var(--sh-card); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); min-height: 330px; }
.v-excard__list { list-style: none; margin: 0; padding: 0; position: relative; min-height: 270px; }
.v-ex { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--sp-3); opacity: 0; animation-name: v-ex; animation-iteration-count: infinite; }
@keyframes v-ex { 0% { opacity: 0; transform: translateY(8px); } 1.5%, 9% { opacity: 1; transform: none; } 10.5%, 100% { opacity: 0; } }
.v-ex__q { align-self: flex-end; max-width: 85%; display: flex; align-items: center; gap: var(--sp-2); background: var(--c-ink); color: var(--c-paper);
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md); padding: 12px 16px; font-size: var(--fs-small); line-height: var(--lh-small); }
.v-ex__q .v-flag { border-radius: 50%; flex: 0 0 auto; }
.v-ex__badge { align-self: flex-start; background: var(--c-ink); color: var(--c-lime); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700; }
.v-ex__a { background: var(--c-paper); color: var(--c-ink); box-shadow: var(--sh-lift); border-radius: var(--r-md) var(--r-md) var(--r-md) 4px; padding: 16px 18px; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.v-ex__src { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--c-muted); }

/* ---- buttons ---- */
.v-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 13px 18px; border-radius: 14px;
  font-size: var(--fs-nav); line-height: var(--lh-nav); font-weight: 700; text-decoration: none; transition: transform .2s ease; }
.v-btn--lime, .v-btn--lime:hover { background: var(--c-lime); color: var(--c-ink); }
.v-btn--paper, .v-btn--paper:hover { background: var(--c-paper); color: var(--c-ink); }
.v-btn--ink, .v-btn--ink:hover { background: var(--c-ink); color: var(--c-paper); border-radius: var(--r-pill); }
.v-btn--ghost, .v-btn--ghost:hover { background: transparent; color: var(--c-ink); border: 1.5px solid var(--c-ink); border-radius: var(--r-pill); }
.v-btn:hover { transform: translateY(-2px); }
.v-install { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); max-width: 640px; }
.v-howto { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-on-ink); }
.v-howto a { color: var(--c-lime); }

/* ---- answer card ---- */
.v-answer { max-width: calc(var(--w-grid) + 2 * var(--gutter)); margin: -104px auto 0; padding: 0 var(--gutter); position: relative; z-index: 3; }
.v-answer__card { display: flex; flex-wrap: wrap; overflow: hidden; background: var(--c-paper); border-radius: var(--r-xl); box-shadow: var(--sh-card); }
.v-answer__main { flex: 1 1 520px; min-width: 0; padding: 40px; display: flex; flex-direction: column; gap: var(--sp-4); }
.v-answer__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 800; }
.v-answer__verdict { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.v-answer__second { color: var(--c-muted); }
.v-answer__price { flex: 1 1 300px; min-width: 0; background: var(--c-ink); color: var(--c-ground); padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-2); }
.v-answer__amount { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-price-xl); line-height: var(--lh-price-xl); color: var(--c-lime); font-variant-numeric: tabular-nums; }
.v-answer__note { color: var(--c-on-ink); }
.v-answer__price .v-btn { margin-top: var(--sp-4); }
.v-answer__order { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-on-ink-quiet); overflow-wrap: anywhere; }
.v-answer__order a { color: var(--c-on-ink); }

/* ---- logos ---- */
.v-logo { display: inline-flex; align-items: center; align-self: flex-start; }
/* Fixed boxes, logo contained: wide wordmarks fill the width, square icons fill the height. */
.v-logo img { object-fit: contain; object-position: left center; }
.v-logo--lg img { width: 180px; height: 40px; }
.v-logo--md img { width: 120px; height: 32px; }
.v-logo--sm img { width: 72px; height: 24px; object-position: center; }
.v-logo--on-ink { background: var(--c-ink); border-radius: var(--r-sm); padding: 6px 10px; }
.v-logo--text { font-family: var(--font-display); font-weight: 900; }
.v-logo--text.v-logo--lg { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.v-logo--text.v-logo--md, .v-logo--text.v-logo--sm { font-size: var(--fs-small); line-height: var(--lh-small); }
.v-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.v-logotile { height: 72px; display: flex; align-items: center; justify-content: center; padding: 0 var(--sp-4); background: var(--c-paper); border-radius: var(--r-md); text-decoration: none; color: var(--c-ink); transition: transform .25s ease, box-shadow .25s ease; }
.v-logotile--ink { background: var(--c-ink); }
.v-logotile img { width: 120px; height: 40px; object-fit: contain; }
.v-logotile img.v-sq, .v-logo--lg img.v-sq, .v-opcard__logo img.v-sq { width: 40px; height: 40px; }
.v-logo--md img.v-sq { width: 32px; height: 32px; }
.v-logo--sm img.v-sq { width: 24px; height: 24px; }
.v-opcard__logo--ink img.v-sq { width: 32px; height: 32px; }
.v-logotile__name { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-small); line-height: var(--lh-small); text-align: center; }
.v-logotile:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); color: var(--c-ink); }

/* ---- sections ---- */
.v-main { display: flex; flex-direction: column; }
.v-sec { padding: var(--sp-8) 0; }
.v-sec > .v-wrap { display: flex; flex-direction: column; gap: var(--sp-5); }
.v-sec--sky-tint { background-color: var(--c-sky-tint); background-image: radial-gradient(var(--c-dot) 1.2px, transparent 1.2px); background-size: 20px 20px; }
.v-sec--coral-tint { background: var(--c-coral-tint); }
.v-sec--lime { background: var(--c-lime); }
.v-sec--ink { background: var(--c-ink); color: var(--c-on-ink); }
.v-sec--ink .v-h2 { color: var(--c-paper); }
.v-sec--sky { background: var(--c-sky); }
.v-sechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.v-sechead p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.v-intro { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* ---- option cards and value cards: lime / coral / ink ---- */
.v-trio { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.v-card { flex: 1 1 300px; min-width: 0; border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: var(--sp-3); color: var(--c-ink); transition: transform .25s ease, box-shadow .25s ease; }
.v-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.v-card--lime { background: var(--c-lime); }
.v-card--coral { background: var(--c-coral); }
.v-card--ink { background: var(--c-ink); color: var(--c-on-ink); }
.v-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 900; font-stretch: 108%; text-transform: uppercase; }
.v-card--ink .v-card__title, .v-card--ink .v-card__price { color: var(--c-lime); }
.v-card__plan { font-weight: 700; }
.v-card__plan a { color: inherit; }
.v-card__caption { font-size: var(--fs-small); line-height: var(--lh-small); }
.v-card__links { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 700; }
.v-card__links a { color: var(--c-ink); }
.v-card--ink .v-card__links a { color: var(--c-lime); }
.v-card__price { margin-top: auto; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-price); line-height: var(--lh-price); font-variant-numeric: tabular-nums; }
.v-card__per { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); }

/* ---- what to watch, steps ---- */
.v-watch, .v-steps { list-style: none; margin: 0; padding: 0; }
.v-watch { display: flex; flex-direction: column; gap: var(--sp-3); }
.v-watch li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.v-watch__n { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--c-ink); color: var(--c-lime); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-small); display: flex; align-items: center; justify-content: center; }
.v-steps { display: flex; flex-wrap: wrap; gap: 28px; }
.v-steps li { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.v-steps h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 800; }
.v-steps p { color: var(--c-muted); }
.v-steps__n { width: 56px; height: 56px; border-radius: 50%; background: var(--c-lime); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); }

/* ---- what you really pay ---- */
.v-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v-bars__caption { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.v-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) 18px; background: var(--c-paper); border-radius: 22px; padding: 16px 22px; }
.v-bar .v-logo { align-self: center; width: 76px; justify-content: center; }
.v-bar__name { flex: 1 1 200px; min-width: 0; }
.v-bar__plan { font-weight: 700; }
.v-bar__sub { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.v-bar__track { flex: 2 1 240px; min-width: 0; height: 14px; background: var(--c-track); border-radius: var(--r-pill); overflow: hidden; display: flex; }
.v-bar__base { background: var(--c-ink); }
.v-bar__extra { background: var(--c-coral); }
.v-bar__total { min-width: 90px; text-align: right; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); line-height: var(--lh-h3); font-variant-numeric: tabular-nums; }
.v-bars__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.v-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.v-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.v-legend__dot--base { background: var(--c-ink); }
.v-legend__dot--extra { background: var(--c-coral); margin-left: 10px; }

/* ---- tables ---- */
.v-tablebox { position: relative; overflow-x: auto; background: var(--c-paper); border-radius: 26px; padding: 12px 18px; }
.v-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--fs-small); line-height: var(--lh-small); }
.v-table--wide { min-width: 820px; }
.v-table--narrow { min-width: 560px; }
.v-table caption { caption-side: top; text-align: left; padding: 8px 14px 12px; color: var(--c-muted); }
.v-table th { text-align: left; padding: 10px 14px; font-weight: 600; color: var(--c-muted); vertical-align: bottom; }
.v-table td { padding: 12px 14px; border-top: 1px solid var(--c-track); vertical-align: top; }
.v-table th.v-num { text-align: right; }
.v-table .v-row--top td { background: var(--c-paper-soft); }
.v-table td b { font-weight: 700; }
.v-src { display: block; color: var(--c-muted); }
.v-src a { color: var(--c-muted); }
.v-tag-inline { display: inline-block; margin-left: var(--sp-1); padding: 0 6px; border-radius: var(--r-sm); background: var(--c-paper-soft); color: var(--c-muted); font-size: var(--fs-label); line-height: var(--lh-label); }
.v-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.v-chip { font: inherit; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); border: 0; background: var(--c-paper-soft); color: var(--c-ink); cursor: pointer; }
.v-chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); }

/* ---- FAQ ---- */
.v-faq { display: flex; flex-direction: column; gap: 14px; }
.v-faq__item { background: var(--c-paper); border-radius: 20px; padding: 20px 24px; }
.v-faq__item summary { font-weight: 700; cursor: pointer; list-style: none; }
.v-faq__item summary::-webkit-details-marker { display: none; }
.v-faq__item summary::after { content: "+"; float: right; margin-left: var(--sp-3); }
.v-faq__item[open] summary::after { content: "−"; }
.v-faq__a { margin-top: 10px; color: var(--c-muted); display: flex; flex-direction: column; gap: var(--sp-2); }
.v-faq__src { font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---- flags ---- */
.v-flag { display: inline-block; flex: 0 0 auto; border-radius: 50%; }
.v-flags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.v-flagtile { display: flex; align-items: center; gap: var(--sp-3); background: var(--c-paper); border-radius: var(--r-md); padding: 12px 14px; min-height: 56px; text-decoration: none; color: var(--c-ink);
  font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; transition: transform .25s ease, box-shadow .25s ease; }
.v-flagtile:hover { color: var(--c-ink); transform: translateY(-4px); box-shadow: var(--sh-lift); }
.v-flagtile small { font-size: var(--fs-label); color: var(--c-muted); font-weight: 500; }

/* ---- need tiles (hub, glass on sky) ---- */
.v-needs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.v-needtile { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 22px; text-decoration: none; color: var(--c-ink);
  background: var(--c-glass); border: 1px solid var(--c-glass-line); transition: transform .25s ease, box-shadow .25s ease; }
.v-needtile:hover { color: var(--c-ink); transform: translateY(-4px); box-shadow: var(--sh-lift); }
.v-needtile__title, .v-needtile__price { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.v-needtile__plan { font-size: var(--fs-small); line-height: var(--lh-small); }
.v-needtile__note { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--c-muted); }

/* ---- breadcrumb ---- */
.v-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.v-crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--c-muted); }
.v-crumbs a { color: var(--c-ink); }

/* ---- ask an AI ---- */
.v-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-7); }
.v-ask__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.v-ask__links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- about blocks ---- */
.v-tiles { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.v-tile { flex: 1 1 200px; min-width: 0; background: var(--c-paper); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: var(--sp-1); }
.v-tile b { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.v-tile span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.v-split { display: flex; flex-wrap: wrap; gap: var(--sp-7); align-items: center; }
.v-split > * { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.v-contact { background: var(--c-ink); color: var(--c-on-ink); border-radius: 32px; padding: var(--sp-6); }
.v-contact h3 { color: var(--c-lime); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 900; text-transform: uppercase; }
.v-contact a { color: var(--c-lime); }
.v-btnrow { display: flex; flex-wrap: wrap; gap: 10px; }
.v-code { display: block; background: var(--c-ink-raised); color: var(--c-paper); border-radius: 12px; padding: 12px 14px; font-size: var(--fs-small); line-height: var(--lh-small); overflow-wrap: anywhere; }

/* ---- footer ---- */
.v-footer { background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.v-footer > .v-wrap { padding-top: 56px; padding-bottom: 28px; display: flex; flex-direction: column; gap: var(--sp-6); }
.v-footer__top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.v-footer__brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: 14px; }
.v-footer__col { display: flex; flex-direction: column; gap: 10px; }
.v-footer__label { color: var(--c-on-ink-quiet); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.v-footer a { color: var(--c-on-ink); text-decoration: none; }
.v-footer a:hover { color: var(--c-lime); }
.v-footer__base { border-top: 1px solid var(--c-ink-line); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); color: var(--c-on-ink-quiet); }

/* ---- motion off: reduced-motion stops every animation and lift (§0b) ---- */
@media (prefers-reduced-motion: reduce) {
  .v-tag, .v-tag--ltr, .v-tag--rtl, .v-cue { animation: none; }
  .v-tag { display: none; }
  .v-ex { animation: none; opacity: 0; }
  .v-ex:first-child { opacity: 1; }
  .v-card, .v-logotile, .v-flagtile, .v-needtile, .v-btn { transition: none; }
  .v-card:hover, .v-logotile:hover, .v-flagtile:hover, .v-needtile:hover, .v-btn:hover { transform: none; }
}

@media (max-width: 640px) {
  .v-hero--overlap .v-hero__in { padding-bottom: 96px; }
  .v-answer { margin-top: -80px; }
  .v-answer__main, .v-answer__price { padding: 22px; }
  .v-hero--tall { min-height: 640px; }
  .v-sec { padding: var(--sp-7) 0; }
  .v-bar .v-logo { width: auto; }
}

/* ---- cell content shared with the generator's helpers (source line, tags, order line) ---- */
.v-table .src, .v-faq .src { display: block; color: var(--c-muted); font-size: var(--fs-label); line-height: var(--lh-label); }
.v-table .src a { color: var(--c-muted); }
.v-table .tag { display: inline-block; margin-left: var(--sp-1); padding: 0 6px; border-radius: var(--r-sm); background: var(--c-paper-soft); color: var(--c-muted); font-size: var(--fs-label); line-height: var(--lh-label); }
.v-table .tag.promo { background: var(--c-lime); color: var(--c-ink); }
.v-table .tag.computed { background: var(--c-coral-tint); color: var(--c-ink); }
.v-table .order-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.v-table .btn-go { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-paper); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700; text-decoration: none; white-space: nowrap; }
.v-table .btn-go:hover { color: var(--c-lime); }
.v-merged h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 900; }
.v-merged h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 800; margin-top: var(--sp-5); }
.v-merged .answer { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.v-merged .meta, .v-merged .small, .v-merged .crumbs { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.v-merged .tablewrap { overflow-x: auto; background: var(--c-paper); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.v-merged table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-small); }
.v-merged th, .v-merged td { text-align: left; padding: var(--sp-2); border-top: 1px solid var(--c-track); vertical-align: top; }
.v-merged .src { display: block; color: var(--c-muted); font-size: var(--fs-label); line-height: var(--lh-label); }
.v-merged .btn-go { font-size: var(--fs-label); }

/* ---- operator cards (hub) ---- */
.v-opcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.v-opcard { background: var(--c-paper); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.v-opcard__logo { flex: 0 0 auto; width: 120px; height: 40px; display: flex; align-items: center; }
.v-opcard__logo img { width: 120px; height: 40px; object-fit: contain; object-position: left center; }
.v-opcard__logo--ink { background: var(--c-ink); border-radius: var(--r-sm); padding: 4px 8px; }
.v-opcard__logo--ink img { width: 104px; height: 32px; }
.v-details > summary { cursor: pointer; list-style: none; margin-bottom: var(--sp-4); }
.v-details > summary::-webkit-details-marker { display: none; }
@media (max-width: 760px) { .v-opcards { grid-template-columns: minmax(0, 1fr); } }
.v-needtile--static:hover { transform: none; box-shadow: none; }
.v-copy { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.v-copy__input { flex: 1 1 260px; min-width: 0; border: 0; font: inherit; font-size: var(--fs-small); }

/* ---- connect pop-up: white card on a dimmed backdrop ---- */
.v-dialog { border: 0; border-radius: var(--r-lg); padding: var(--sp-6); max-width: min(520px, calc(100vw - 2 * var(--gutter))); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--sh-card); }
.v-dialog::backdrop { background: var(--c-shadow); }
.v-dialog__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 900; margin-bottom: var(--sp-4); }
.v-cpanel { display: flex; flex-direction: column; gap: var(--sp-3); }
.v-cpanel__label { font-weight: 700; }
.v-dialog .v-copy__input, .v-cpanel .v-copy__input { background: var(--c-paper-soft); color: var(--c-ink); }
.v-hubanswer { font-weight: 600; }

/* ---- operator cards, simplified (review 2026-10-19): two type sizes per card ---- */
.v-opcard { gap: var(--sp-2); }
.v-opcard__price { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); line-height: var(--lh-h3); font-variant-numeric: tabular-nums; }
.v-opcard__line { color: var(--c-muted); }
.v-opcard__go { margin-top: auto; align-self: flex-start; }
.v-opcard__plan { min-height: calc(2 * var(--lh-small)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-opcard__plan b { font-weight: 700; }
.v-opcard__name { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* ---- need tiles: title one line, plan two lines, so prices line up across tiles ---- */
.v-needtile__title { min-height: var(--lh-h3); }
.v-needtile__plan { min-height: calc(2 * var(--lh-small)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Example answers: same box height, source line pinned to the bottom, so the stacked examples line up. */
.v-ex__a { min-height: calc(5 * var(--lh-small) + var(--lh-label) + 40px); }
.v-ex__src { margin-top: auto; }

/* ---- scenario sliders (hub) ---- */
.v-sliders { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--c-glass); border: 1px solid var(--c-glass-line); border-radius: var(--r-lg); padding: var(--sp-5); max-width: var(--w-text); }
.v-slider { display: grid; grid-template-columns: minmax(110px, auto) 1fr minmax(96px, auto); align-items: center; gap: var(--sp-3); }
.v-slider label { font-weight: 700; }
.v-slider input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--c-ink); }
.v-slider__out { font-family: var(--font-display); font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.v-sliders__toggles { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.v-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-weight: 600; }
.v-toggle input { width: 20px; height: 20px; accent-color: var(--c-ink); }
.v-sliders__live { font-weight: 700; }
.v-sliders__json code { overflow-wrap: anywhere; }
.v-needlinks a { color: var(--c-ink); font-weight: 600; }
.v-opcard--nofit .v-opcard__price { color: var(--c-muted); }
.v-chip--logo { display: inline-flex; align-items: center; justify-content: center; background: var(--c-paper); padding: 4px 12px; }
.v-chip--logo img { width: 72px; height: 24px; object-fit: contain; }
.v-chip--logo img.v-sq { width: 24px; height: 24px; }
.v-chip--logo[aria-pressed="true"] { background: var(--c-paper); box-shadow: inset 0 0 0 2px var(--c-ink); }
@media (max-width: 640px) { .v-slider { grid-template-columns: 1fr auto; } .v-slider input[type="range"] { grid-column: 1 / -1; grid-row: 2; } }
/* Code samples stay in the body face (one type pair, DESIGN_SYSTEM §0c), set off by a tint. */
.v-body code { font-family: inherit; background: var(--c-paper-soft); border-radius: var(--r-sm); padding: 0 4px; overflow-wrap: anywhere; }

/* ---- brand page ---- */
.v-leadcard { background: var(--c-paper); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: var(--sh-card); }
.v-merged ul.prose { margin: 0; padding-left: var(--sp-5); }
.v-merged li + li { margin-top: var(--sp-2); }
.v-merged .tag { display: inline-block; margin-left: var(--sp-1); padding: 0 6px; border-radius: var(--r-sm); background: var(--c-paper-soft); color: var(--c-muted); font-size: var(--fs-label); line-height: var(--lh-label); }
.v-merged .tag.promo { background: var(--c-lime); color: var(--c-ink); }
.v-merged .tag.computed { background: var(--c-coral-tint); color: var(--c-ink); }
.v-merged .btn-go { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-paper); line-height: var(--lh-label); font-weight: 700; text-decoration: none; white-space: nowrap; }
.v-merged .num { font-variant-numeric: tabular-nums; }
.v-merged caption { caption-side: top; text-align: left; padding: var(--sp-2) 0; color: var(--c-muted); }
.v-merged .tablewrap { position: relative; }

/* ---- legacy content in the new chrome (rollout) ---- */
.v-merged .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.v-merged .formula, .v-merged .code { display: block; white-space: pre-wrap; background: var(--c-paper); border-radius: var(--r-md); padding: var(--sp-4); font-size: var(--fs-small); line-height: var(--lh-small); overflow-wrap: anywhere; }
.v-merged .grid3, .v-merged .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.v-merged .card, .v-merged .step { background: var(--c-paper); border-radius: var(--r-lg); padding: var(--sp-5); }
.v-merged .card .num, .v-merged .stepn { font-family: var(--font-display); font-weight: 900; color: var(--c-muted); }
.v-merged .toc { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.v-merged details.rules summary { cursor: pointer; font-weight: 700; }
.v-merged .answer { background: var(--c-paper); border-radius: var(--r-lg); padding: var(--sp-5); }
.v-merged table.data { min-width: 640px; }
.v-merged .tablewrap { overflow-x: auto; }
.v-merged .views { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.v-merged .views button { font: inherit; font-size: var(--fs-small); min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); border: 0; background: var(--c-paper); color: var(--c-ink); cursor: pointer; }
.v-merged .views button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); }
.v-merged .order-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }

/* ---- language switcher: inline links, one native <details> menu below 480 px ---- */
.v-langmenu { display: none; position: relative; }
.v-langmenu summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.v-langmenu summary::-webkit-details-marker { display: none; }
.v-langmenu__list { position: absolute; right: 0; top: 100%; z-index: 5; display: flex; flex-direction: column; background: var(--c-paper); border-radius: var(--r-md); box-shadow: var(--sh-card); padding: var(--sp-2); }
.v-langmenu__list a { padding: var(--sp-2) var(--sp-4); min-height: 44px; display: flex; align-items: center; color: var(--c-ink); text-decoration: none; }
.v-header--dark .v-langmenu summary { color: var(--c-paper); }
@media (max-width: 480px) { .v-nav__lang { display: none; } .v-langmenu { display: block; } }

/* ---- photo hero (country hubs) ---- */
.v-hero--photo { background: var(--c-ink); color: var(--c-paper); }
.v-hero__photo { position: absolute; inset: 0; overflow: hidden; }
.v-hero__photo picture, .v-hero__photo img { display: block; width: 100%; height: 100%; }
.v-hero__photo img { object-fit: cover; transform-origin: 60% 50%; animation: v-zoom 40s ease-in-out infinite alternate; }
.v-hero__photo--crop-left img { width: 104.2%; max-width: none; margin-left: -4.2%; }
.v-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-overlay) 0%, var(--c-overlay) 50%, var(--c-overlay-none) 72%); }
@keyframes v-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.v-hero--photo .v-hero__copy { max-width: 640px; }
.v-hero--photo .v-eyebrow { color: var(--c-lime); }
.v-hero--photo .v-crumbs a, .v-hero--photo .v-crumbs li, .v-hero--photo .v-crumbs li + li::before { color: var(--c-paper); }
.v-hero--photo .v-meta, .v-hero--photo .v-langswitch, .v-hero--photo .v-needlinks, .v-hero--photo .v-needlinks a, .v-hero--photo .v-hubanswer a { color: var(--c-paper); }
.v-hero--photo .v-sliders { background: var(--c-paper); color: var(--c-ink); border: 0; box-shadow: var(--sh-card); }
.v-hero--photo .v-sliders a { color: var(--c-blue); }
.v-hero--photo .v-hero__left { padding-bottom: 190px; }
.v-hero__credit { position: absolute; right: var(--gutter); bottom: var(--sp-2); z-index: 2; margin: 0; max-width: 60%; text-align: right; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--c-on-ink); }
.v-hero__credit a { color: var(--c-on-ink); }
@media (max-width: 700px) {
  .v-hero__photo::after { background: var(--c-overlay-phone); }
  .v-hero__credit { max-width: none; left: var(--gutter); text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .v-hero__photo img { animation: none; } }

/* ---- BE round 2026-10-19: glass slider panel, styled range, four cards ---- */
.v-sliders, .v-hero--photo .v-sliders { background: var(--c-glass-panel); border: 1px solid var(--c-glass-panel-line); border-radius: var(--r-panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; color: var(--c-ink); }
.v-slider input[type="range"] { -webkit-appearance: none; appearance: none; height: 44px; background: transparent; accent-color: auto; }
.v-slider input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--c-ink) 0 var(--pct, 0%), var(--c-paper) var(--pct, 0%) 100%); }
.v-slider input[type="range"]::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: var(--c-paper); }
.v-slider input[type="range"]::-moz-range-progress { height: 8px; border-radius: var(--r-pill); background: var(--c-ink); }
.v-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--c-lime); border: 3px solid var(--c-ink); }
.v-slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--c-lime); border: 3px solid var(--c-ink); }
.v-slider input[type="range"]:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.v-slider__out { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.v-card--sky { background: var(--c-sky); }
.v-trio--4 .v-card { flex: 1 1 220px; }
.v-hero--photo .v-header { background: var(--c-overlay); }
.v-hero__credit { background: var(--c-overlay); border-radius: var(--r-sm); padding: 2px 8px; }
.v-hero--photo .v-sliders__live { color: var(--c-paper); }
.v-datemark { display: inline-block; margin-left: var(--sp-1); color: var(--c-muted); font-size: var(--fs-label); line-height: var(--lh-label); }
.v-table td.v-oplogo { width: 88px; }
.v-table td.v-oplogo .v-logo img { width: 72px; height: 24px; object-position: left center; }
.v-table td.v-oplogo .v-logo--text { font-size: var(--fs-small); }
.v-table--plans { min-width: 760px; }
.v-table--plans td:first-child .v-logo img { width: 72px; height: 24px; object-position: left center; }
.v-table--plans td:first-child .v-logo--text { font-size: var(--fs-small); }
.v-table--plans .btn-go { white-space: nowrap; }

/* ---- rollout layout fixes ---- */
.v-opcard__logo { height: 40px; padding: 4px 8px 4px 0; }
.v-opcard__logo--ink { padding: 4px 8px; }
.v-opcard__logo img, .v-opcard__logo--ink img { width: 104px; height: 32px; }
.v-opcard__logo img.v-sq, .v-opcard__logo--ink img.v-sq { width: 32px; height: 32px; }
.v-merged li, .v-merged p, .v-merged .answer { overflow-wrap: anywhere; }
.v-merged .grid3 .card h3, .v-merged .steps .step h3 { min-height: calc(2 * var(--lh-h3)); }
.v-hero--photo .v-sliders__json { color: var(--c-paper); }
.v-hero--photo .v-sliders__json code { background: var(--c-ink-raised); color: var(--c-paper); }
.v-merged td.num .src { white-space: nowrap; }