/* ══════════════════════════════════════════════════════════════════════
   VODLIX 2026 — DESIGN SYSTEM
   The locked system: tokens, type, components. Mobile-first throughout —
   every @container query only ever ADDS as room appears, and there is not
   one max-width query in this file.

   Load order on a page:
     <link rel="stylesheet" href="vodlix-2026.css">
     <script src="vodlix-2026.js" defer></script>
   The script renders the shared header/footer and wires rails, tabs,
   accordions, the mobile menu and the sticky-nav flip.
   ══════════════════════════════════════════════════════════════════════ */

/* ======================================================================
   VODLIX 2026 — THE LOCKED SYSTEM. One design, both modes.
   Font: HYBRID — Merriweather Sans display + Noto Sans body.
   Header: GLASS. Buttons: pills, colour token (red default; black, white
   sanctioned). Borders not shadows; colour-only hovers; Lucide stroke 2.
   ==================================================================== */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
.theme-v2[data-mode="light"], :root[data-mode="light"] {
  --bg:#fbfbfc; --surface:#ffffff; --ink:#0c0c0e; --sub:#3a3a42; --faint:#8f8f99;
  --line:#e7e7ec; --brand:#E61D2C; --brand-hover:#DB1223; --brand-tint:#FDEDEE;
  --on-brand:#fff; --r-btn:999px; --r-card:16px; --ctl-sm:26px;
  /* The owner's chosen gradient (2026-09-12, "love the new colors, save it"): the hero's
     two-glow structure over the logo's reds, never a plain linear one ("bland").
     For the one dominant surface of a composition. --brand-glow sits behind a mark or a
     headline on a dark ground, and dark grounds are #000000 ("an ick of grey"). Buttons
     stay flat --brand. */
  --brand-gradient:radial-gradient(120% 90% at 15% 20%,#FF5A4E 0%,transparent 55%),radial-gradient(100% 80% at 85% 15%,#F89436 0%,transparent 55%),linear-gradient(160deg,#E61D2C 0%,#DB1223 55%,#B80F1C 100%);
  --brand-glow:radial-gradient(ellipse at center,rgba(230,29,44,.55) 0%,rgba(0,0,0,0) 70%);
  --track:#ececf1; --num:tabular-nums; --h-tracking:-0.02em;
  --alert-bg:#FDEDEE; --alert-line:#F7C0C4;
  --banner-bg:#101014; --banner-ink:#ffffff;
  --footer-bg:#101014; --footer-ink:#ffffff; --footer-sub:#d3d3dc; --footer-line:rgba(255,255,255,.14);
  --glass-bg:rgba(255,255,255,.66); --glass-line:rgba(255,255,255,.5); --glass-inset:rgba(255,255,255,.5);
  /* Pill glass on LIGHT surfaces: white glass disappears on a white bar,
     so the pill carries a frosted-ink wash + a real hairline there. */
  --pill-bg:rgba(12,12,14,.055); --pill-line:rgba(12,12,14,.10);
  --navglass-bg:rgba(251,251,252,.72);
  --menu-ink:#0c0c0e;
  /* Icons: semantic, so they lift on dark instead of going bland. */
  --ok:#16c150; --ok-tint:rgba(22,193,80,.14);
  /* `--ok` read as TEXT on `--ok-tint` measures ~2:1 (fine for a check
     icon, not for a label) — `-ink` is the darkened reading colour. */
  --ok-ink:#166534;
  /* Severity/priority hues — red is already --brand; orange reuses the
     gradient accent (#f89436, already in the palette), yellow reuses the
     comparison-table "partial" mark (#eab308, already in the palette).
     The raw hue is too light to read as TEXT on its own pale tint here
     (measured ~2:1) — `-ink` is a darkened reading colour for that one
     job, same idea as --ok going darker on light / brighter on dark. */
  --orange:#f89436; --orange-tint:rgba(248,148,54,.16); --orange-ink:#9a3412;
  --warn:#eab308; --warn-tint:rgba(234,179,8,.14); --warn-ink:#854d0e;
  --icon-muted:#8f8f99;
  --icon-chip-bg:var(--brand-tint); --icon-chip-line:transparent;
  --btn-soft:#f1f1f4; --btn-soft-hover:#e6e6ec;
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f8f99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* PRIMARY = dark. Red is the alternate accent, not the default. */
  --btn-bg-default:#0c0c0e; --btn-ink-default:#ffffff; --btn-hover-default:#26262c;
}
.theme-v2[data-mode="dark"], :root[data-mode="dark"] {
  --bg:#0e0e11; --surface:#16161a; --ink:#f5f5f7; --sub:#c6c6cf; --faint:#71717c;
  --line:#26262c; --brand:#E61D2C; --brand-hover:#F03935; --brand-tint:rgba(230,29,44,.14);
  --on-brand:#fff; --r-btn:999px; --r-card:16px; --ctl-sm:26px;
  --track:#2c2c33; --num:tabular-nums; --h-tracking:-0.02em;
  --alert-bg:rgba(230,29,44,.10); --alert-line:rgba(230,29,44,.35);
  --banner-bg:#16161a; --banner-ink:#f5f5f7;
  --footer-bg:#16161a; --footer-ink:#f5f5f7; --footer-sub:#c6c6cf; --footer-line:#26262c;
  --glass-bg:rgba(22,22,26,.62); --glass-line:rgba(255,255,255,.08); --glass-inset:rgba(255,255,255,.06);
  --pill-bg:rgba(255,255,255,.08); --pill-line:rgba(255,255,255,.14);
  --navglass-bg:rgba(14,14,17,.72);
  --menu-ink:#ffffff;
  /* Same hues, lifted for an ink background: #16a34a and #8f8f99 were
     chosen against white and read as sludge on #0e0e11. */
  --ok:#39e575; --ok-tint:rgba(57,229,117,.24); --ok-ink:#39e575;
  --part:#facc15; --part-tint:rgba(250,204,21,.18);
  --orange:#f89436; --orange-tint:rgba(248,148,54,.20); --orange-ink:#f89436;
  --warn:#eab308; --warn-tint:rgba(234,179,8,.20); --warn-ink:#eab308;
  --icon-muted:#b9b9c3;
  --icon-chip-bg:rgba(230,29,44,.20); --icon-chip-line:rgba(230,29,44,.34);
  --btn-soft:#26262c; --btn-soft-hover:#33333b;
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9ba7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* Inverted on dark so the primary never sinks into the page. */
  --btn-bg-default:#f5f5f7; --btn-ink-default:#0c0c0e; --btn-hover-default:#d9d9de;
}
/* Type scale — LOCKED */
.theme-v2, :root {
  --fs-h1:44px; --fs-h2:28px; --fs-lede:18px; --fs-h3:17px;
  --fs-body:15.5px; --fs-small:13px; --fs-btn:14.5px;
  --ff-display:'Merriweather Sans', system-ui, sans-serif; --ff-body:'Noto Sans', system-ui, sans-serif;
  font-family: var(--ff-body), 'Noto Sans Arabic','Noto Sans SC','Noto Sans JP', sans-serif;
  color:var(--ink);
  /* Text that is currently brand red — active menu item, links, secondary
     button label, prices on white pills. Switch with the "Accent text"
     control. Surfaces, borders and tint backgrounds stay --brand. */
  --accent-ink:var(--brand);
}
.theme-v2[data-accent="black"], :root[data-accent="black"] { --accent-ink:#0c0c0e; }
.theme-v2[data-mode="dark"][data-accent="black"], :root[data-mode="dark"][data-accent="black"] { --accent-ink:#ffffff; }
/* The footer is dark in BOTH modes — black accent there would vanish. */
.theme-v2[data-accent="black"] .d-footer, :root[data-accent="black"] .d-footer { --accent-ink:#ffffff; }
.d-hero h1, .t-h1, .t-h2, .card h5, .price h5, .stat b,
.d-footer .brand, .s-h2, .split__copy h3, .article__head h1, .prose h2, .cmp__h1 {
  font-family: var(--ff-display), 'Noto Sans Arabic','Noto Sans SC','Noto Sans JP', sans-serif;
}
/* Shell */
.shell { max-width:1060px; margin:0 auto; }
/* ── Stage: banner + GLASS nav sitting ON the animated gradient hero ── */
.stage {
  background:
    radial-gradient(120% 90% at 15% 20%, #E61D2C 0%, transparent 55%),
    radial-gradient(100% 80% at 85% 15%, #f89436 0%, transparent 55%),
    radial-gradient(110% 95% at 70% 85%, #ff0000 0%, transparent 60%),
    radial-gradient(95% 90% at 25% 80%, #eeab6e 0%, transparent 55%),
    #E61D2C;
  background-size:170% 170%;
  animation:p26grad 16s ease-in-out infinite alternate;
  padding:0 0 44px;
}
@keyframes p26grad { from { background-position:0% 0%; } to { background-position:100% 100%; } }
/* Banner is ONE compact line on a phone: short copy + the pill, no
   wrapping, no tall black block. The full sentence appears from 860px. */
.d-banner { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:10px;
  background:var(--banner-bg); color:var(--banner-ink); padding:8px 12px; font-size:12.5px; text-align:center; }
.d-banner__long { display:none; }
/* min-width:0 lets the copy actually truncate instead of pushing the
   pill and the language globe off a narrow phone. */
.d-banner__short { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (min-width: 860px) {
  .d-banner { padding:9px 14px; }
  .d-banner__long { display:inline; }
  .d-banner__short { display:none; }
}
/* Every small control in the banner is the SAME height — icon or no
   icon. Height is a token; padding only sets the horizontal rhythm. A
   control that changes size because someone put a glyph in it is a bug,
   not a variant. */
.d-banner a { display:inline-flex; align-items:center; justify-content:center; height:var(--ctl-sm);
  border-radius:999px; background:#fff; color:#000; font-size:12px; font-weight:600;
  padding:0 13px; line-height:1; text-decoration:none; white-space:nowrap; flex:0 0 auto; }
/* GLASS MENU — LOCKED. The glass sits ONLY behind the centered rounded
   menu; logo and CTAs stand directly on the hero. Menu text is SHARP ink. */
/* NO outer margin, ever — margin sits outside the bar and lets the page
   background bleed through as a white band above the nav. All breathing
   room is padding, inside the bar's own paint. */
.d-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  margin:0; padding:12px 16px 0; }
.d-nav__logo { display:flex; align-items:center; justify-self:start; }
.d-nav__logo img { height:26px; width:auto; display:block; }
.d-nav__logo .fallback { font-weight:700; font-size:17px; letter-spacing:-.01em; color:#fff; }
.d-nav__logo .fallback b { color:#fff; }
.d-nav__menu { display:none; justify-self:center; align-items:center; gap:2px;
  padding:5px 6px; border-radius:999px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-inset); }
@container (min-width: 700px){ .d-nav__menu{display:flex;} }
.d-nav__menu a { color:var(--menu-ink); font-size:13.5px; font-weight:500; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px; padding:8px 14px; border-radius:999px;
  transition:background .15s ease, color .15s ease; }
.d-nav__menu a:hover { background:var(--brand-tint); color:var(--accent-ink); }
.d-nav__menu a[aria-current] { color:var(--accent-ink); font-weight:600; }
.d-nav__menu svg { color:currentColor; }
.d-nav__actions { display:flex; gap:8px; align-items:center; justify-self:end; }
/* Mobile: menu pill hides < 700px container, burger takes over. Same glass. */
.d-nav__burger { display:none; width:38px; height:38px; border-radius:999px; align-items:center; justify-content:center;
  cursor:pointer; color:var(--menu-ink);
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--glass-line); }
@container (width < 700px){ .d-nav__burger{display:inline-flex;} }
.d-nav__mobilemenu { grid-column:1 / -1; display:grid; gap:2px; padding:8px; border-radius:16px; margin-top:8px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-inset); }
.d-nav__mobilemenu[hidden] { display:none; }
.d-nav__mobilemenu a { color:var(--menu-ink); font-size:14px; font-weight:500; text-decoration:none; padding:10px 14px; border-radius:10px;
  transition:background .15s ease, color .15s ease; }
.d-nav__mobilemenu a:hover { background:var(--brand-tint); color:var(--accent-ink); }
.d-nav__mobilemenu a[aria-current] { color:var(--accent-ink); font-weight:600; }
.d-nav__logo .lg-ico { display:none; }
.d-nav__scrim[hidden] { display:none; }
.d-nav__btn { display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 14px;
  border-radius:999px; border:1.5px solid var(--brand); font-size:14px; font-weight:500; text-decoration:none; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
/* On the gradient hero the CTAs follow the hero button rules: white primary,
   white-outline ghost — red-on-red is never allowed. */
.stage .d-nav__btn--primary { background:#fff; border-color:#fff; color:#0c0c0e; }
.stage .d-nav__btn--primary:hover { background:rgba(255,255,255,.9); border-color:rgba(255,255,255,.9); }
/* Dropdown — the one we kept. Hover-open, floating (the one allowed shadow). */
.vdd { position:relative; }
.vdd__panel { position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.14); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s ease, transform .15s ease, visibility .15s; z-index:6; }
[data-mode="dark"] .vdd__panel { box-shadow:0 10px 30px rgba(0,0,0,.5); }
.vdd:hover .vdd__panel, .vdd:focus-within .vdd__panel { opacity:1; visibility:visible; transform:none; }
.vdd__panel a { display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--ink); text-decoration:none; }
.vdd__panel a b { display:block; font-size:13.5px; }
.vdd__panel a span { display:block; font-size:12px; color:var(--faint); }
.vdd__panel a:hover { background:var(--brand-tint); color:var(--accent-ink); }
/* Hero copy directly on the gradient */
.d-hero { color:#fff; text-align:center; padding:44px 26px 8px; }
.d-eyebrow { display:inline-block; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.18); color:#fff; font-size:12.5px; font-weight:600; margin-bottom:14px; }
.d-hero h1 { overflow-wrap:break-word; font-size:clamp(28px, 6cqi, var(--fs-h1)); font-weight:700; line-height:1.1; letter-spacing:var(--h-tracking); margin-bottom:10px; }
.d-hero p { color:rgba(255,255,255,.88); font-size:var(--fs-lede); line-height:1.6; max-width:520px; margin:0 auto 20px; }
.d-hero .row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.d-hero .btn:not(.btn--ghost) { background:#fff; border-color:#fff; color:#0c0c0e; }
.d-hero .btn:not(.btn--ghost):hover { background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.92); }
.d-hero .btn--ghost { border-color:rgba(255,255,255,.45); color:#fff; background:transparent; }
.d-hero .btn--ghost:hover { background:rgba(255,255,255,.16); border-color:#fff; color:#fff; }
/* Buttons — pill, colour-only transitions. Colour is a TOKEN. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:var(--fs-btn); font-weight:600; text-decoration:none; cursor:pointer;
  padding:11px 22px; border-radius:var(--r-btn);
  border:1px solid var(--btn-border, var(--btn-bg-default));
  background:var(--btn-bg, var(--btn-bg-default));
  color:var(--btn-ink, var(--btn-ink-default));
  transition:background .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { background:var(--btn-bg-hover, var(--btn-hover-default)); border-color:var(--btn-bg-hover, var(--btn-hover-default)); }
/* Alternate accent — the red pill. Same shape, used when a section needs
   brand energy rather than the default dark primary. */
.btn--accent { --btn-bg:var(--brand); --btn-border:var(--brand); --btn-ink:var(--on-brand); --btn-bg-hover:var(--brand-hover); }
/* Every variant below MUST restate background on :hover — the base
   .btn:hover fill would otherwise leak through and turn them red. */

/* Secondary — soft filled, no competing outline. A red border next to a
   red primary reads as two primaries; a neutral fill reads as second-tier. */
.btn--secondary { background:var(--btn-soft); border-color:transparent; color:var(--ink); }
.btn--secondary:hover { background:var(--btn-soft-hover); border-color:transparent; color:var(--ink); }
/* Outline — hairline only, neutral. Hover fills soft; the border stays
   neutral (a black/red outline on hover was the "slacky" look). */
.btn--ghost { background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover { background:var(--btn-soft); border-color:var(--line); color:var(--ink); }
/* An open dropdown trigger stays visibly pressed. */
.btn--ghost[aria-expanded="true"] { background:var(--btn-soft); border-color:var(--line); color:var(--ink); }
.btn--sm { padding:8px 16px; font-size:13.5px; }
.btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
/* Sanctioned colour tokens (scoped demos below; site-wide via [data-btn]) */
.btnc-black { --btn-bg:#0c0c0e; --btn-border:#0c0c0e; --btn-ink:#ffffff; --btn-bg-hover:#26262c; }
[data-mode="dark"] .btnc-black { --btn-bg:#f5f5f7; --btn-border:#f5f5f7; --btn-ink:#0c0c0e; --btn-bg-hover:#d9d9de; }
.btnc-white { --btn-bg:#ffffff; --btn-border:var(--line); --btn-ink:#0c0c0e; --btn-bg-hover:#f1f1f4; }
.d-btnrow { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn-dark-stage { background:#101014; border-radius:14px; padding:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
/* Badges */
.d-badges { display:flex; gap:8px; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; }
.badge--brand { background:var(--brand-tint); color:var(--accent-ink); }
.badge--solid { background:var(--brand); color:var(--on-brand); }
.badge--ok { background:var(--ok-tint); color:var(--ok-ink); }
.badge--orange { background:var(--orange-tint); color:var(--orange-ink); }
.badge--warn { background:var(--warn-tint); color:var(--warn-ink); }
.badge--neutral { background:var(--track); color:var(--sub); }
.badge--line { border:1px solid var(--line); color:var(--sub); background:transparent; }
/* Type */
.d-type { display:grid; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; }
.d-type .t-h1 { font-size:var(--fs-h1); font-weight:700; letter-spacing:var(--h-tracking); line-height:1.12; }
.d-type .t-h2 { font-size:var(--fs-h2); font-weight:600; letter-spacing:var(--h-tracking); }
.d-type .t-body { font-size:var(--fs-body); color:var(--ink); line-height:1.65; max-width:560px; }
.d-type .t-lede { font-size:var(--fs-lede); color:var(--ink); line-height:1.55; }
.d-type .t-small { font-size:var(--fs-small); color:var(--faint); }
.d-type .t-num { font-size:26px; font-weight:700; font-variant-numeric:var(--num); }
.d-type .t-num span { font-size:13px; color:var(--faint); font-weight:500; }
/* Palette */
.d-pal { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.sw { border-radius:12px; border:1px solid var(--line); overflow:hidden; background:var(--surface); }
.sw__chip { height:48px; }
.sw__meta { padding:8px 10px; font-size:11px; color:var(--sub); line-height:1.45; }
.sw__meta b { display:block; color:var(--ink); font-size:11.5px; }
/* Stats */
.d-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@container (min-width: 640px){ .d-stats{grid-template-columns:repeat(4,1fr);} }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 18px; }
.stat b { display:block; font-size:24px; font-weight:700; font-variant-numeric:var(--num); letter-spacing:var(--h-tracking); }
.stat span { font-size:12.5px; color:var(--faint); }
/* Cards — border hover only, brand hint, no lift */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; transition:border-color .15s ease; }
.card:hover { border-color:rgba(230,29,44,.45); }
.card__ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--icon-chip-bg); border:1px solid var(--icon-chip-line); color:var(--accent-ink); margin-bottom:12px; }
.card h5 { font-size:var(--fs-h3); font-weight:600; margin-bottom:6px; }
.card p { font-size:13.5px; color:var(--ink); line-height:1.6; }
/* Pricing */
.price { background:var(--surface); border:1px solid var(--brand); border-radius:var(--r-card); padding:22px; position:relative; }
.price__badge { position:absolute; top:-11px; left:20px; background:var(--brand); color:var(--on-brand); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:999px; }
.price h5 { font-size:17px; font-weight:700; margin:4px 0 2px; }
.price .amt { font-size:34px; font-weight:700; font-variant-numeric:var(--num); letter-spacing:var(--h-tracking); }
.price .amt span { font-size:13px; color:var(--faint); font-weight:500; letter-spacing:0; }
.price ul { list-style:none; padding:14px 0 0; margin:12px 0 0; border-top:1px solid var(--line); display:grid; gap:8px; }
.price li { display:flex; gap:9px; align-items:center; font-size:13.5px; }
.price li svg { color:var(--ok); flex:0 0 auto; }
.price .btn { width:100%; margin-top:16px; }
/* A single plan card standing alone (premium-support): centred, phone-wide. */
.price--solo { max-width:460px; margin:0 auto; }
.price__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.price__sub { font-size:12.5px; color:var(--faint); margin-top:4px; }
.price__sub strong { color:var(--ink); }
/* Tabs */
.d-tabs { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.d-tabs__bar { display:flex; gap:2px; padding:8px 10px 0; border-bottom:1px solid var(--line); }
.d-tabs__bar button { font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); background:none; border:0; cursor:pointer; padding:9px 14px; border-bottom:2px solid transparent; }
.d-tabs__bar button[aria-selected="true"] { color:var(--accent-ink); border-bottom-color:var(--accent-ink); }
.d-tabs__body { padding:16px 18px; font-size:13.5px; color:var(--ink); line-height:1.6; }
/* Accordion */
.d-acc { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
.d-acc + .d-acc { margin-top:8px; }
.d-acc button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; font:inherit; font-size:14px; font-weight:600; color:var(--ink); background:none; border:0; cursor:pointer; padding:14px 16px; text-align:left; }
.d-acc button svg { transition:transform .18s ease; color:var(--icon-muted); flex:0 0 auto; }
.d-acc button[aria-expanded="true"] svg { transform:rotate(180deg); }
.d-acc div[hidden] { display:none; }
.d-acc div { padding:0 16px 14px; font-size:13.5px; color:var(--ink); line-height:1.6; }
/* Alert */
.alert { display:flex; gap:10px; align-items:flex-start; background:var(--alert-bg); border:1px solid var(--alert-line); border-radius:var(--r-card); padding:13px 15px; font-size:13.5px; line-height:1.55; color:var(--ink); }
.alert svg { color:var(--accent-ink); flex:0 0 auto; margin-top:1px; }
.alert b { font-weight:600; }
/* Testimonial */
.quote { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; }
.quote p { font-size:15px; line-height:1.65; }
.quote footer { display:flex; align-items:center; gap:10px; margin-top:14px; }
.quote .avatar { width:36px; height:36px; border-radius:50%; background:var(--icon-chip-bg); border:1px solid var(--icon-chip-line); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.quote .who b { display:block; font-size:13.5px; }
.quote .who span { font-size:12px; color:var(--faint); }
/* Table — svg inline-block guard (Preflight trap) */
.d-tablewrap { border:1px solid var(--line); border-radius:var(--r-card); overflow-x:auto; background:var(--surface); }
.d-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.d-table th, .d-table td { padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; }
.d-table thead th { background:var(--bg); font-size:12px; font-weight:700; }
.d-table td:not(:first-child), .d-table th:not(:first-child) { text-align:center; font-variant-numeric:var(--num); }
.d-table tbody tr:last-child td { border-bottom:0; }
.d-table td svg, .d-table th svg { display:inline-block; vertical-align:middle; }
/* Row-severity tint — the same red/orange/yellow/green as the `.badge`
   in the row's first cell, extended across the row so the whole line
   reads at a glance (the familiar traffic-light order), not just the
   pill. First use: /help's response-time table. */
.d-table tr.is-crit td, .d-table tr.is-crit th { background:var(--brand-tint); }
.d-table tr.is-high td, .d-table tr.is-high th { background:var(--orange-tint); }
.d-table tr.is-med  td, .d-table tr.is-med  th { background:var(--warn-tint); }
.d-table tr.is-low  td, .d-table tr.is-low  th { background:var(--ok-tint); }
/* Semantic icon colours — never hardcode a hex on an <svg>. */
.ico-ok { color:var(--ok); }
.ico-muted { color:var(--icon-muted); }
/* Form */
.d-form { display:grid; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; }
/* Form card furniture (calculator): a title + lede, uppercase group labels
   between clusters of fields, and a two-up row from 560px. */
.d-form h3 { font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.d-form__lead { font-size:13.5px; color:var(--sub); margin-top:-8px; line-height:1.5; }
.d-form__group { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:6px 0 -6px; }
.d-form__row { display:grid; gap:14px; }
@media (min-width:560px) { .d-form__row { grid-template-columns:1fr 1fr; } }
.field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.field__hint { display:block; font-size:12px; color:var(--faint); margin-top:5px; line-height:1.45; }
/* an input with a unit suffix ("min", "$") */
.field__unit { position:relative; }
.field__unit input { padding-right:52px; }
.field__unit > span { position:absolute; top:50%; right:14px; transform:translateY(-50%); font-size:12.5px; color:var(--faint); pointer-events:none; }
/* One control look for every field. Selects must be listed explicitly —
   a native <select> outside .field falls back to OS chrome, which is what
   the filter row was doing. appearance:none + a tokenised chevron keeps
   them identical in both modes. */
.field input, .field select, .field textarea, .selectrow select {
  width:100%; font:inherit; font-size:14.5px; color:var(--ink); padding:11px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease; }
.field select, .selectrow select {
  -webkit-appearance:none; appearance:none; padding-right:36px; cursor:pointer;
  background-image:var(--sel-arrow); background-repeat:no-repeat; background-position:right 13px center; }
.field select:hover, .selectrow select:hover { border-color:var(--icon-muted); }
.field input:focus, .field select:focus, .field textarea:focus, .selectrow select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }
.togglerow { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink); }
.tgl { position:relative; width:46px; height:26px; border-radius:999px; border:1px solid var(--line); background:var(--track); cursor:pointer; padding:0; transition:background .2s, border-color .2s; }
.tgl::before { content:""; position:absolute; inset:-9px; }
.tgl::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s cubic-bezier(.4,0,.2,1); }
.tgl[aria-checked="true"] { background:var(--brand); border-color:var(--brand); }
.tgl[aria-checked="true"]::after { transform:translateX(20px); }
/* The ONE allowed shadow: genuinely floating things. */
.float-demo { position:relative; display:inline-block; }
.float { position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.14); z-index:5; }
[data-mode="dark"] .float { box-shadow:0 10px 30px rgba(0,0,0,.5); }
.float a { display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--ink); text-decoration:none; }
.float a:hover { background:var(--brand-tint); color:var(--accent-ink); }
/* Footer — real vodlix.com structure, themed */
.d-footer { background:var(--footer-bg); color:var(--footer-sub); border-radius:var(--r-card); border:1px solid var(--line); padding:26px 24px 0; }
.d-footer__grid { display:grid; gap:20px; grid-template-columns:1fr 1fr; }
@container (min-width: 760px){ .d-footer__grid { grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; } }
.d-footer__brandcol img { height:28px; width:auto; display:block; }
.d-footer .brand { font-weight:700; font-size:16px; color:var(--footer-ink); }
.d-footer .brand b { color:var(--accent-ink); }
.d-footer__brandcol p { font-size:12.5px; line-height:1.6; margin-top:10px; max-width:220px; }
.d-footer__social { display:flex; gap:10px; margin-top:14px; }
.d-footer__social a { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--footer-line); color:var(--footer-ink); }
.d-footer__social a:hover { border-color:var(--accent-ink); color:var(--accent-ink); }
.d-footer h6 { color:var(--footer-ink); font-size:12.5px; font-weight:700; margin-bottom:8px; letter-spacing:.02em; }
.d-footer a.lnk { display:block; color:var(--footer-ink); text-decoration:none; font-size:13px; padding:3px 0; }
.d-footer a.lnk:hover { color:var(--accent-ink); }
.d-footer__bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; border-top:1px solid var(--footer-line); margin-top:20px; padding:14px 0; font-size:12px; }
/* Logo tiles — the correct asset per surface. The surface tile is LIVE:
   it swaps light-bg/dark-bg with the mode toggle. */
.d-logos { display:grid; gap:14px; }
@container (min-width: 680px){ .d-logos{grid-template-columns:1fr 1fr;} }
@container (min-width: 980px){ .d-logos{grid-template-columns:1fr 1fr 1fr 1fr;} }
[data-mode="light"] .lg-dark { display:none; }
[data-mode="dark"] .lg-light { display:none; }
/* Mobile preview — a 375px container; the SAME markup re-renders itself
   through the container queries. Not a mock. */
.mob-wrap { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; align-items:flex-start; }
/* ── STICKY NAV — scroll-flip demo ──────────────────────────────────
   Two scenarios, because the answer differs per page:
   home  = an animated gradient sits behind the nav at rest;
   inner = plain page background, nothing behind the nav at all.
   data-look is computed in JS: "hero" only while on-hero AND not stuck. */
.navdemos { display:grid; gap:14px; }
@container (min-width: 620px){ .nb__menu{display:flex;} }
/* AT REST over the gradient — glass pill, everything white. */
.navbar[data-look="hero"] .nb__menu { background:var(--glass-bg); border-color:var(--glass-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); }
/* THE BAR LOOK — on an inner page at rest, and on every page once stuck. */
.navbar[data-look="bar"] .lg-hero { display:none; }
/* WHAT IT FLIPS TO once stuck — FROSTED GLASS BAR (final): page tint
   at 72% + blur, hairline, soft inset. Calm, premium, unbreakable. */
.navbar[data-stuck="true"] { background:var(--navglass-bg); border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(1.8); backdrop-filter:blur(18px) saturate(1.8);
  box-shadow:inset 0 1px 0 var(--glass-inset), 0 8px 24px rgba(12,12,14,.05); }
.navbar[data-stuck="true"] .nb__menu { background:var(--pill-bg); border-color:var(--pill-line);
  -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 1px 0 var(--glass-inset); }
/* ══════════════════════════════════════════════════════════════════
   MOBILE-FIRST. Every block below is authored for the phone FIRST;
   @container queries only ever ADD to it as room appears. There is not
   a single max-width query in this file.

   SWIPE RAILS — on a phone, a row of cards becomes a horizontal snap
   rail instead of stacking into an endless column. The rail bleeds to
   the screen edge so the next card peeks, which is what tells a thumb
   it can swipe. At container width the exact same markup becomes a grid.
   ══════════════════════════════════════════════════════════════════ */
.rail {
  display:grid; grid-auto-flow:column; grid-auto-columns:80%;
  gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:2px 20px 14px; margin:0 -20px;      /* edge bleed */
  scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail > * { scroll-snap-align:center; min-width:0; }
.rail--wide { grid-auto-columns:88%; }
/* Dots — only meaningful while the rail is a rail. */
.raildots { display:flex; gap:6px; justify-content:center; margin-top:-4px; }
.raildots i { width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .2s ease, width .2s ease; }
.raildots i[data-on] { background:var(--accent-ink); width:18px; border-radius:999px; }
.railhint { display:flex; align-items:center; justify-content:center; gap:5px; font-size:11.5px; color:var(--faint); margin-top:8px; }
@container (min-width: 680px){
  .rail { grid-auto-flow:row; grid-template-columns:repeat(2,1fr); grid-auto-columns:auto;
          overflow:visible; padding:0; margin:0; scroll-snap-type:none; }
  .rail--3 { grid-template-columns:repeat(3,1fr); }
  .raildots, .railhint { display:none; }
}
@container (min-width: 980px){
  .rail--4 { grid-template-columns:repeat(4,1fr); }
}
/* TABLES on a phone: the row label must never scroll away, or the
   numbers you swipe to stop meaning anything. */
.d-table th:first-child, .d-table td:first-child {
  position:sticky; left:0; z-index:1; background:var(--surface);
  box-shadow:1px 0 0 var(--line); }
.d-table thead th:first-child { background:var(--bg); }
.d-tablewrap { scroll-snap-type:x proximity; }
.d-table th:not(:first-child), .d-table td:not(:first-child) { scroll-snap-align:end; min-width:96px; }
/* Comparison states (pricing calculator): the best-fit column, cells a
   plan cannot serve, an allowance the numbers overshoot, a sub-line. */
.d-table th.is-best { color:var(--brand); }
.d-table thead th.is-best, .d-table td.is-best { background:var(--brand-tint); }
.d-table td.is-off { color:var(--faint); }
.d-table td { position:relative; } /* anchors .sr-only helpers inside a scrolled cell */
.d-table .is-over { color:var(--brand); font-weight:600; }
.d-table td small { display:block; font-size:11.5px; color:var(--faint); font-weight:400; margin-top:2px; }
.d-table thead th small { display:block; font-size:10.5px; font-weight:500; text-transform:none; color:var(--faint); margin-top:2px; }
/* ── Pricing calculator: form left, results right from 960px ─────────── */
.calc { display:grid; gap:20px; align-items:start; }
@media (min-width:960px) { .calc { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; } }
.calc__results { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-width:0; }
.calc__results > * { min-width:0; }
.calc .d-table th:not(:first-child), .calc .d-table td:not(:first-child) { min-width:112px; }
.calc__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.calc__head h3 { font-size:17px; font-weight:700; }
.calc__pick { display:grid; gap:14px; }
@media (min-width:640px) { .calc__pick { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }
.calc__kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.calc__kpi { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface); min-width:0; }
.calc__kpi small { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; }
.calc__kpi b { display:block; font-size:20px; font-weight:700; letter-spacing:var(--h-tracking); font-variant-numeric:var(--num); line-height:1.15; }
.calc__kpi span { font-size:12px; color:var(--faint); }
.calc__kpi.is-over b { color:var(--brand); }
.calc__explain { display:grid; gap:8px; list-style:none; font-size:13px; color:var(--sub); line-height:1.5; }
.calc__explain b { color:var(--ink); }

/* ── The Plan Finder — /ott-pricing-calculator, 0.0.155 ─────────────────
   Head → four numbered setup steps (left) → best-fit card with allowance
   meters, KPI trio, the plan ladder rail (right). Same Alpine model as
   before; only the presentation changed. Everything on DS tokens. */
.pf-head { padding: 40px 0 8px; }
@media (min-width: 900px) { .pf-head { padding: 56px 0 12px; } }
.pf-head .eyebrow { margin-bottom: 10px; }
.pf-head h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; max-width: 18ch; }
.pf-head p { font-size: var(--fs-lede); color: var(--sub); max-width: 58ch; margin: 14px 0 0; line-height: 1.55; }
.pf-head--center { text-align: center; }
.pf-head--center h1, .pf-head--center p { margin-left: auto; margin-right: auto; }
.pf-head--center .pf-trust { justify-content: center; }
.pf-head__sub { font-size: 15px !important; margin-top: 8px !important; }
.pf-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 13px; color: var(--faint); }
.pf-trust span { display: inline-flex; align-items: center; gap: 6px; }
.pf-trust svg { color: var(--ok); }
.pf { display: grid; gap: 22px; align-items: start; }
@media (min-width: 980px) { .pf { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 32px; } }
.pf-setup { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pf-step { padding: 20px 22px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.pf-step:first-child { border-top: 0; }
.pf-step__h { display: flex; align-items: center; gap: 12px; }
.pf-step__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--brand-tint); color: var(--brand); border: 1px solid var(--alert-line); flex: 0 0 auto; }
.pf-step__h b { font-size: 15px; font-weight: 700; color: var(--ink); }
.pf-step__h small { color: var(--faint); font-size: 12.5px; margin-left: auto; }
.pf-row { display: grid; gap: 12px; }
@media (min-width: 560px) { .pf-row { grid-template-columns: 1fr 1fr; } }
.pf .field label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pf .field label span { color: var(--faint); font-weight: 500; font-size: 12px; text-align: end; }
.pf-stepper { display: grid; grid-template-columns: 1fr auto; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; }
.pf-stepper:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.pf .pf-stepper input { border: 0; background: transparent; border-radius: 0; box-shadow: none; -moz-appearance: textfield; }
.pf .pf-stepper input::-webkit-outer-spin-button, .pf .pf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-stepper div { display: flex; border-left: 1px solid var(--line); }
.pf-stepper button { width: 36px; min-height: 40px; border: 0; background: transparent; color: var(--sub); font: inherit; font-size: 17px; cursor: pointer; }
.pf-stepper button:hover { background: var(--track); color: var(--ink); }
.pf-stepper button + button { border-left: 1px solid var(--line); }
.pf-slide header { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.pf-slide header .pf-chipin { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; background: var(--surface); }
.pf .pf-slide header .pf-chipin input { width: 7ch; border: 0; background: transparent; padding: 3px 0; font-weight: 700; font-size: 13px; text-align: end; font-variant-numeric: tabular-nums; -moz-appearance: textfield; box-shadow: none; }
.pf-slide header .pf-chipin input::-webkit-outer-spin-button, .pf-slide header .pf-chipin input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-slide header .pf-chipin span { color: var(--faint); font-weight: 500; font-size: 12px; }
.pf-slide input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--brand) var(--fill, 0%), var(--track) var(--fill, 0%)); outline: none; }
.pf-slide input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.pf-slide input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.pf-slide input[type=range]:focus-visible { box-shadow: 0 0 0 3px var(--brand-tint); }
.pf-slide small { display: flex; justify-content: space-between; color: var(--faint); font-size: 11.5px; margin-top: 6px; }
.pf-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .pf-tiles { grid-template-columns: repeat(3, 1fr); } }
.pf-tile { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg); display: grid; gap: 8px; cursor: pointer; position: relative; text-align: start; font: inherit; color: var(--ink); }
.pf-tile svg { color: var(--sub); }
.pf-tile b { font-size: 13px; font-weight: 600; line-height: 1.25; display: block; }
.pf-tile small { color: var(--faint); font-size: 11.5px; display: block; }
.pf-tile[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); }
.pf-tile[aria-pressed="true"] svg { color: var(--brand); }
.pf-tile[aria-pressed="true"]::after { content: ""; position: absolute; top: 10px; inset-inline-end: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 4px var(--surface); }
.pf-tile:disabled { cursor: default; }
.pf-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.segctl--wide { display: grid; grid-auto-flow: column; width: 100%; }
.segctl--wide button { padding: 8px 6px; }
.pf-actions { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; background: var(--bg); font-size: 13px; color: var(--sub); }
.pf-actions .spacer { flex: 1; }
.pf-actions button { font: inherit; font-size: 13px; color: var(--sub); background: none; border: 0; padding: 0; cursor: pointer; }
.pf-actions button:hover { color: var(--ink); }
.pf-actions b { color: var(--ink); }
.pf-results { display: grid; gap: 16px; min-width: 0; }
.pf-results > * { min-width: 0; }
.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-bar h2 { font-size: 20px; letter-spacing: -0.02em; margin: 0; }
.pf-bar p { color: var(--faint); font-size: 13px; margin: 2px 0 0; }
.pf-fit { border: 1px solid var(--brand); border-radius: 20px; background: var(--surface); padding: 22px; display: grid; gap: 18px; position: relative; overflow: hidden; }
.pf-fit::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--brand); }
.pf-fit__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pf-fit__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.pf-fit__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; }
.pf-fit__name { font-family: var(--ff-display); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 8px 0 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: var(--ink); }
.pf-fit__name .chip { font-family: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--track); color: var(--sub); letter-spacing: 0; }
.pf-fit__for { color: var(--sub); font-size: 14px; margin: 8px 0 0; max-width: 40ch; }
.pf-price { text-align: end; }
.pf-price b { font-family: var(--ff-display); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; display: block; font-variant-numeric: tabular-nums; color: var(--ink); }
.pf-price span { color: var(--faint); font-size: 13px; }
.pf-price small { display: block; margin-top: 6px; color: var(--sub); font-size: 12.5px; }
.pf-meters { display: grid; gap: 12px; }
@media (min-width: 640px) { .pf-meters { grid-template-columns: 1fr 1fr; gap: 16px; } }
.pf-meter { display: grid; gap: 7px; }
.pf-meter header { display: flex; justify-content: space-between; font-size: 13px; }
.pf-meter header b { font-weight: 600; color: var(--ink); }
.pf-meter header span { color: var(--faint); font-variant-numeric: tabular-nums; }
.pf-meter .bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; position: relative; }
.pf-meter .bar i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w, 0%); background: var(--ok); border-radius: 999px; transition: width .25s ease; }
.pf-meter .bar i.tight { background: var(--brand); }
.pf-meter small { color: var(--faint); font-size: 12px; }
.pf-why { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-why li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink); }
.pf-why svg { flex: 0 0 auto; margin-top: 2px; color: var(--ok); }
.pf-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pf-cta .btn { flex: 1 1 auto; }
.pf-cta a.pf-cta__more { flex: 1 1 100%; text-align: center; font-size: 13px; color: var(--sub); text-decoration: none; }
.pf-cta a.pf-cta__more:hover { color: var(--brand); }
.pf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pf-kpi { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface); min-width: 0; }
.pf-kpi small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.pf-kpi b { display: block; font-family: var(--ff-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); }
.pf-kpi span { font-size: 12px; color: var(--faint); display: block; margin-top: 4px; }
.pf-kpi .up { color: var(--ok); }
[data-mode="dark"] .pf-kpi .up { color: var(--ok); }
.pf-kpi .down { color: var(--brand); }
[data-mode="dark"] .pf-kpi .down { color: var(--brand); }
@media (max-width: 420px) { .pf-kpis { grid-template-columns: 1fr 1fr; } .pf-kpis .pf-kpi:last-child { grid-column: 1 / -1; } }
.pf-ladder { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(172px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pf-rung { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface); display: grid; gap: 10px; scroll-snap-align: start; position: relative; min-width: 0; align-content: start; }
.pf-rung .grp { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pf-rung .nm { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; color: var(--ink); }
.pf-rung .nm span { font-family: var(--ff-display); font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: -0.02em; white-space: nowrap; }
.pf-rung .mini { display: grid; gap: 5px; }
.pf-rung .mini div { height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.pf-rung .mini i { display: block; height: 100%; width: var(--w, 0%); background: var(--ok); }
.pf-rung .mini i.over { background: var(--brand); }
.pf-rung .st { font-size: 12px; color: var(--sub); line-height: 1.35; }
.pf-rung .st.over { color: var(--brand); font-weight: 600; }
[data-mode="dark"] .pf-rung .st.over { color: var(--brand); }
.pf-rung--best { border-color: var(--brand); background: var(--brand-tint); }
.pf-rung--best .st { color: var(--brand); font-weight: 700; }
.pf-rung--off { opacity: .55; }
.pf-rung--off .mini i { background: var(--faint); }
.pf-over { display: grid; gap: 10px; }
@media (min-width: 640px) { .pf-over { grid-template-columns: repeat(3, 1fr); } }
.pf-over div { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 13px; color: var(--sub); background: var(--surface); }
.pf-over b { display: block; color: var(--ink); margin-bottom: 4px; font-size: 14px; }

/* Two-plan results table (the old page's shape, on the DS table) */
.pf-pair .d-table th:not(:first-child), .pf-pair .d-table td:not(:first-child) { min-width: 150px; text-align: center; }
.pf-pair .d-table thead th b { display: block; font-size: 16px; font-weight: 700; margin-top: 4px; }
.pf-pair .d-table thead th small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-top: 3px; }
.pf-pair .d-table thead th { padding-top: 16px; padding-bottom: 14px; }
.pf-pair__badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pf-pair .is-best .pf-pair__badge { color: var(--brand); }
.pf-pair .d-table td { padding-top: 12px; padding-bottom: 12px; }
.pf-pair .d-table td > span:first-child { font-weight: 600; }
.pf-pair .d-table td small { white-space: normal; }
.pf-pair .d-table td.is-off > span:first-child { font-weight: 500; }
.pf-pair__total th, .pf-pair__total td { font-weight: 700; }
.pf-pair__total td > span:first-child { font-size: 16px; }
.pf-pair__cta td { border-bottom: 0; }
.pf-guide { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.pf-guide h3, .vlx-type-ds .pf-guide h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.pf-table { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 26px; }
.pf-table .d-table th:first-child { white-space: nowrap; min-width: 150px; }
.pf-table .d-table th:not(:first-child), .pf-table .d-table td:not(:first-child) { min-width: 124px; }
.pf-table .d-table td small, .pf-table .d-table td > span { white-space: nowrap; }
.pf-table > summary { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--sub); display: inline-flex; align-items: center; gap: 6px; }
.pf-table > summary::-webkit-details-marker { display: none; }
.pf-table > summary svg { transition: transform .18s ease; }
.pf-table[open] > summary svg { transform: rotate(180deg); }
.pf-table .d-tablewrap { margin-top: 12px; }

/* ══════════════════════════════════════════════════════════════════
   ELEMENT LIBRARY — every block mobile-first.
   ══════════════════════════════════════════════════════════════════ */

/* Layout + spacing */
.lay { display:grid; gap:10px; }
/* Breadcrumbs */
.crumbs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; }
.crumbs a { color:var(--sub); text-decoration:none; padding:3px 2px; border-radius:6px; }
.crumbs a:hover { color:var(--ink); }
.crumbs svg { color:var(--icon-muted); flex:0 0 auto; }
.crumbs [aria-current] { color:var(--ink); font-weight:600; }
/* On a phone a deep trail wraps into a mess — scroll it on one line. */
.crumbs--scroll { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:0 20px; }
.crumbs--scroll::-webkit-scrollbar { display:none; }
.crumbs--scroll > * { flex:0 0 auto; }
/* Pagination */
.pager { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pager a, .pager span { min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; }
.pager a:hover { background:var(--btn-soft); }
.pager [aria-current] { background:var(--btn-bg-default); border-color:var(--btn-bg-default); color:var(--btn-ink-default); }
.pager .gap { border:0; color:var(--faint); min-width:20px; }
.pager [aria-disabled] { opacity:.4; pointer-events:none; }
/* Steps / process */
.steps { display:grid; gap:0; }
.step { display:grid; grid-template-columns:auto 1fr; gap:14px; padding-bottom:20px; position:relative; }
.step:last-child { padding-bottom:0; }
.step__n { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; background:var(--btn-bg-default); color:var(--btn-ink-default); z-index:1; }
.step:not(:last-child)::before { content:""; position:absolute; left:15px; top:32px; bottom:2px; width:1px; background:var(--line); }
.step h6 { font-size:14.5px; font-weight:600; margin-bottom:3px; }
.step p { font-size:13px; color:var(--sub); line-height:1.55; }
/* Logo cloud */
.cloud { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@container (min-width: 560px){ .cloud{grid-template-columns:repeat(4,1fr);} }
.cloud div { border:1px solid var(--line); border-radius:12px; background:var(--surface); height:56px;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:var(--faint); letter-spacing:.04em; }
/* CTA band */
/* The quiet closer. Gradient is reserved for the hero — a second gradient
   slab further down the page just competes with it. */
.ctaband { border-radius:var(--r-card); padding:30px 20px; text-align:center;
  background:var(--surface); border:1px solid var(--line); }
.ctaband h5 { font-size:20px; font-weight:700; letter-spacing:var(--h-tracking); color:var(--ink); }
.ctaband p { font-size:13.5px; color:var(--sub); margin:6px auto 18px; max-width:44ch; line-height:1.6; }
/* Article: byline, TOC, share, tags */
.byline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--sub); }
.byline .avatar { width:32px; height:32px; border-radius:50%; background:var(--icon-chip-bg); border:1px solid var(--icon-chip-line);
  color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.byline b { color:var(--ink); font-weight:600; }
.byline .dot { color:var(--faint); }
.toc { align-self:start; }
.toc h6 { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.toc__list { display:grid; border-left:1px solid var(--line); }
.toc a { display:block; font-size:13.5px; line-height:1.45; color:var(--sub); text-decoration:none;
  padding:7px 0 7px 15px; margin-left:-1px; border-left:2px solid transparent;
  transition:color .15s ease, border-color .15s ease; }
.toc a:hover { color:var(--ink); border-left-color:var(--line); }
.toc a[aria-current] { color:var(--ink); font-weight:600; border-left-color:var(--ink); }
.toc a.sub { padding-left:28px; font-size:13px; }
@container (min-width: 720px){ .toc{position:sticky; top:74px;} }
.share { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.share span { font-size:12.5px; color:var(--faint); }
.share a { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; }
.share a:hover { background:var(--btn-soft); }
.tags { display:flex; gap:7px; flex-wrap:wrap; }
.tag { font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; border:1px solid var(--line);
  color:var(--sub); text-decoration:none; }
.tag:hover { background:var(--btn-soft); color:var(--ink); }
/* Post card */
.post { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  display:grid; transition:border-color .15s ease; }
.post:hover { border-color:rgba(230,29,44,.45); }
.post__img { height:120px; background:var(--btn-soft); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--icon-muted); }
.post__body { padding:16px; display:grid; gap:6px; }
.post__body h6 { font-size:15px; font-weight:600; line-height:1.35; }
.post__body p { font-size:13px; color:var(--sub); line-height:1.55; }
.post__meta { font-size:11.5px; color:var(--faint); }
/* Forms extras */
.inline-form { display:grid; gap:8px; }
@container (min-width: 520px){ .inline-form{grid-template-columns:1fr auto;} }
.searchbox { position:relative; }
.searchbox svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--icon-muted); }
.searchbox input { padding-left:38px; }
.selectrow { display:grid; gap:8px; }
@container (min-width: 520px){ .selectrow{grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); justify-content:start;} }
@container (min-width: 520px){ .selectrow select{min-width:170px;} }
/* Segmented / pricing toggle */
.segctl { display:inline-flex; background:var(--track); border-radius:999px; padding:4px; gap:2px; }
.segctl button { font:inherit; font-size:13px; font-weight:600; border:0; cursor:pointer; padding:7px 15px;
  border-radius:999px; background:transparent; color:var(--sub); }
.segctl button[aria-pressed="true"] { background:var(--surface); color:var(--ink); }
/* Callouts */
.note { display:flex; gap:10px; align-items:flex-start; border-radius:var(--r-card); padding:13px 15px;
  font-size:13.5px; line-height:1.55; border:1px solid; }
.note svg { flex:0 0 auto; margin-top:1px; }
.note--info { background:var(--brand-tint); border-color:var(--alert-line); color:var(--ink); }
.note--info svg { color:var(--accent-ink); }
.note--ok { background:var(--ok-tint); border-color:var(--ok); color:var(--ink); }
.note--ok svg { color:var(--ok); }
.note--warn { background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.45); color:var(--ink); }
.note--warn svg { color:#eab308; }
/* Progress + meter */
.meter { display:grid; gap:6px; }
.meter__bar { height:8px; border-radius:999px; background:var(--track); overflow:hidden; }
.meter__bar i { display:block; height:100%; border-radius:999px; background:var(--accent-ink); }
.meter__row { display:flex; justify-content:space-between; font-size:12.5px; color:var(--sub); }
.meter__row b { color:var(--ink); font-variant-numeric:var(--num); }
/* Avatar group */
.avatars { display:flex; align-items:center; }
.avatars span { width:32px; height:32px; border-radius:50%; border:2px solid var(--surface); margin-left:-9px;
  background:var(--icon-chip-bg); color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; }
.avatars span:first-child { margin-left:0; }
.avatars em { font-style:normal; font-size:12.5px; color:var(--sub); margin-left:10px; }
/* Empty state */
.empty { text-align:center; padding:34px 20px; border:1px dashed var(--line); border-radius:var(--r-card); background:var(--surface); }
.empty .ico { width:44px; height:44px; border-radius:12px; margin:0 auto 12px; background:var(--icon-chip-bg);
  border:1px solid var(--icon-chip-line); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; }
.empty h6 { font-size:15px; font-weight:600; margin-bottom:4px; }
.empty p { font-size:13px; color:var(--sub); max-width:38ch; margin:0 auto 14px; line-height:1.55; }
/* Cookie banner + modal (the two floating things) */
.cookie { display:grid; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:16px 18px; box-shadow:0 10px 30px rgba(0,0,0,.14); }
@container (min-width: 640px){ .cookie{grid-template-columns:1fr auto; align-items:center;} }
.cookie p { font-size:13px; color:var(--ink); line-height:1.55; }
.cookie .row { display:flex; gap:8px; flex-wrap:wrap; }
.modal { border-radius:var(--r-card); border:1px solid var(--line); background:var(--surface); padding:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.18); max-width:420px; }
.modal h6 { font-size:16px; font-weight:700; margin-bottom:6px; }
.modal p { font-size:13.5px; color:var(--sub); line-height:1.55; margin-bottom:16px; }
.modal .row { display:flex; gap:8px; flex-wrap:wrap; }
/* Tooltip */
.tip { position:relative; display:inline-flex; }
.tip__b { font-size:11.5px; font-weight:600; padding:6px 10px; border-radius:8px; background:#0c0c0e; color:#fff; white-space:nowrap; }
[data-mode="dark"] .tip__b { background:#f5f5f7; color:#0c0c0e; }
/* Media embed */
.embed { position:relative; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/9; background:#101014; display:flex; align-items:center; justify-content:center; }
.embed .play { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; color:#fff; }
/* Timeline */
.tl { display:grid; gap:0; }
.tl__i { display:grid; grid-template-columns:auto 1fr; gap:14px; padding-bottom:18px; position:relative; }
.tl__i:last-child { padding-bottom:0; }
.tl__d { width:11px; height:11px; border-radius:50%; background:var(--accent-ink); margin-top:5px; z-index:1; }
.tl__i:not(:last-child)::before { content:""; position:absolute; left:5px; top:16px; bottom:0; width:1px; background:var(--line); }
.tl__i time { display:block; font-size:11.5px; color:var(--faint); font-weight:600; }
.tl__i h6 { font-size:14px; font-weight:600; margin:2px 0 3px; }
.tl__i p { font-size:13px; color:var(--sub); line-height:1.55; }
/* Language switcher */
.langs { display:flex; gap:6px; flex-wrap:wrap; }
.langs button { font:inherit; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; }
.langs button:hover { background:var(--btn-soft); }
.langs button[aria-pressed="true"] { background:var(--btn-bg-default); border-color:var(--btn-bg-default); color:var(--btn-ink-default); }
/* Section header helper used across the library */
.eyebrow { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:8px; }
/* A kicker that is a SENTENCE stays above the title (owner's reference) but
   takes sentence shape: no caps, no tracking, 14px semibold. The
   page-builder renderers pick it by measuring `subtitle` (>58 chars —
   phrases in the content top out at 56, sentences start at 59). */
.eyebrow--sentence { font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;
  line-height:1.5; max-width:60ch; }

/* Jump index — the page is long; this is review scaffolding, not a site
   component. Scrolls on one line on a phone, same as the breadcrumbs. */
.jump { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:13px 20px 12px; margin:0 -22px 4px;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:8;
  background:var(--glass-bg); -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); }
/* Complete page compositions — real elements cloned into a scrolling
   frame, so a whole page can be judged rather than a parts bin. The frame
   is a query container, so everything inside lays itself out for the
   frame's width, not the browser's. */
.compo { display:grid; gap:16px; }
@container (min-width: 900px){ .compo{grid-template-columns:1fr 1fr;} }
@container (min-width: 900px){ .compo__wide{grid-column:1/-1;} }
/* ── PAGE-BUILDER BLOCKS — the real dynamic_page set (~180 entries) ── */
/* Media + text split. The single most-used block on the site. Stacks on a
   phone with the media FIRST; alternates side on wider containers. */
.split { display:grid; gap:20px; align-items:center; }
@container (min-width: 720px){
  .split { grid-template-columns:1fr 1fr; gap:40px; }
  .split--right .split__media { order:2; }
  .split--narrow { grid-template-columns:1fr 2fr; }
  /* No media (a text-only content_block) — one full-width column
     instead of the copy alone in the grid's left half. */
  .split--solo { grid-template-columns:1fr; }
}
.split__media { border-radius:var(--r-card); aspect-ratio:4/3; background:var(--btn-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--icon-muted); }
.split__copy h3 { font-size:var(--fs-h2); font-weight:600; letter-spacing:var(--h-tracking); margin-bottom:8px; }
.split__copy p { font-size:var(--fs-body); color:var(--ink); line-height:1.65; margin-bottom:16px; }
/* Centred content_block: a .sechead over body copy and, optionally, one
   piece of media. The copy is NOT part of the .sechead — a sechead is a
   heading plus one lede line, and pouring five paragraphs into its 8px
   grid gaps at lede size is how the centred block came out ragged. */
.sec-copy { max-width:880px; margin:0 auto; text-align:center;
  font-size:var(--fs-lede); color:var(--ink); line-height:1.75; }
.sec-copy p { margin:0 0 1em; }
.sec-copy > :last-child { margin-bottom:0; }
.sec-copy p:empty { display:none; }          /* markdown + nl2br leaves these */
.sec-copy > br { display:none; }
.sec-cta { display:flex; justify-content:center; margin-top:20px; }
.sec-media { max-width:900px; margin:24px auto 0; border-radius:var(--r-card); }
.sec-media img, .sec-media object { display:block; width:100%; height:auto; border-radius:var(--r-card); }

/* Icon feature grid */
.fgrid { display:grid; gap:18px; }
@container (min-width: 560px){ .fgrid{grid-template-columns:repeat(2,1fr);} }
@container (min-width: 860px){ .fgrid{grid-template-columns:repeat(3,1fr);} }
/* The CP also offers a FOUR-across variant of the same block (`4_blocks`),
   used for short label-and-line tiles rather than icon features. Same
   component, one more column — it only takes the fourth at 860px, where
   three would leave the tiles too narrow to read. */
@container (min-width: 860px){ .fgrid--4{grid-template-columns:repeat(4,1fr);} }
.fgrid > div { text-align:center; }
.fgrid .ico { width:48px; height:48px; margin:0 auto 12px; border-radius:12px; background:var(--icon-chip-bg);
  border:1px solid var(--icon-chip-line); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; }
.fgrid h6 { font-size:15px; font-weight:600; margin-bottom:5px; }
.fgrid p { font-size:13px; color:var(--sub); line-height:1.55; }
/* Vertical tabs — a left rail on desktop, a scrolling strip on a phone */
.vtabs { display:grid; gap:16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:16px; }
@container (min-width: 720px){ .vtabs{grid-template-columns:230px 1fr; gap:24px;} }
.vtabs__rail { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.vtabs__rail::-webkit-scrollbar { display:none; }
@container (min-width: 720px){ .vtabs__rail{flex-direction:column; overflow:visible;} }
.vtabs__rail button { flex:0 0 auto; text-align:left; font:inherit; font-size:13.5px; font-weight:600; color:var(--sub);
  background:transparent; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease; }
.vtabs__rail button:hover { color:var(--ink); }
.vtabs__rail button[aria-selected="true"] { background:var(--btn-soft); color:var(--ink); }
.vtabs__pane { font-size:13.5px; color:var(--ink); line-height:1.65; }
/* A pane that carries MEDIA (the page-builder tabs set: one screenshot per
   tab) is copy + picture, not a picture alone — a phone mockup centred in
   an empty 730px pane is 480px of nothing. The copy takes the measure, the
   media only the width it needs. Portrait art (phone mockups) is capped by
   HEIGHT; a landscape screenshot hits max-width first and fills its column. */
.vtabs__pane:has(img) { display:grid; gap:18px; align-items:center; }
@container (min-width: 720px){ .vtabs__pane:has(img){ grid-template-columns:minmax(0,1fr) auto; gap:32px; } }
.vtabs__copy { min-width:0; max-width:46ch; }
.vtabs__title { font-size:var(--fs-h3); font-weight:600; line-height:1.3; margin:0 0 8px; letter-spacing:-0.01em; }
@container (min-width: 720px){ .vtabs__title{ font-size:20px; } }
.vtabs__pane p { margin:0; font-size:var(--fs-body); line-height:1.65; }
.vtabs__pane img { display:block; width:auto; height:auto; max-width:100%;
  max-height:min(48vh, 380px); margin-inline:auto; border-radius:12px; justify-self:center; }
@container (min-width: 720px){ .vtabs__pane img{ max-height:min(50vh, 400px); justify-self:end; } }
/* ── Showcase tabs — `.vtabs--showcase` (redesigned 2026-08-18) ──────
   A stage and a story. LEFT: the heading, then the tabs as a numbered
   vertical TRACK — a hairline rail whose red segment fills as the showcase
   auto-advances; each item is collapsed to its numeral + title until
   active, when its description unfolds. RIGHT: the active screenshot on a
   soft rounded STAGE, rising out of the bottom edge (a deliberate crop,
   so it reads as product rather than a pasted image). Screens crossfade.
   Hairlines and tokens only: no shadow, no gradient.

   Behaviour (script owns it, CSS only reflects state): `.is-auto` while
   the auto-advance is live; the active button carries `.is-anim` for one
   cycle so its rail fills over --vtabs-ms. Any click/focus drops
   `.is-auto` and the active segment goes solid; reduced-motion never
   starts. Markup: .vtabs__side (sechead + rail) and .vtabs__stage. */
.vtabs--showcase { display:grid; gap:24px; border:0; background:transparent; padding:0; border-radius:0; --vtabs-ms:6000ms; }
@container (min-width: 720px){
  .vtabs--showcase { grid-template-columns:minmax(0,420px) auto; justify-content:center; gap:clamp(28px,4vw,64px); align-items:start; }   /* the pair sits centred in the measure */
}
.vtabs--showcase .vtabs__side { display:grid; gap:22px; min-width:0; }
.vtabs--showcase .sechead { margin-bottom:0; }

/* the track */
.vtabs--showcase .vtabs__rail { flex-direction:column; gap:0; overflow:visible; margin:0; padding:0; }
.vtabs--showcase .vtabs__rail button {
  position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:10px; align-items:baseline;
  white-space:normal; text-align:start; padding:16px 12px 16px 22px; border-radius:0; background:transparent;
  color:var(--ink); border:0; }
.vtabs--showcase .vtabs__rail button::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:2px; background:var(--line); }
.vtabs--showcase .vtabs__rail button:first-child::before { border-radius:2px 2px 0 0; }
.vtabs--showcase .vtabs__rail button:last-child::before  { border-radius:0 0 2px 2px; }
.vtabs--showcase .vtabs__rail button::after  { content:""; position:absolute; inset-inline-start:0; top:0; width:2px; height:0; background:var(--brand); }
.vtabs--showcase .vtabs__rail button i { font-style:normal; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--faint); font-variant-numeric:var(--num); }
.vtabs--showcase .vtabs__rail button b { display:block; font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.3; color:var(--sub); transition:color .15s ease; }
.vtabs--showcase .vtabs__rail button span { display:block; grid-column:2; font-size:var(--fs-body); font-weight:400; line-height:1.6; color:var(--ink);
  max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .25s cubic-bezier(.2,.8,.25,1), opacity .2s ease, margin-top .25s cubic-bezier(.2,.8,.25,1); }
.vtabs--showcase .vtabs__rail button:hover b { color:var(--ink); }
.vtabs--showcase .vtabs__rail button[aria-selected="true"] { background:transparent; }
.vtabs--showcase .vtabs__rail button[aria-selected="true"] i { color:var(--brand); }
.vtabs--showcase .vtabs__rail button[aria-selected="true"] b { color:var(--ink); }
.vtabs--showcase .vtabs__rail button[aria-selected="true"] span { max-height:12em; opacity:1; margin-top:8px; }
/* the red segment: solid once manual, filling while auto */
.vtabs--showcase:not(.is-auto) .vtabs__rail button[aria-selected="true"]::after { height:100%; }
.vtabs--showcase.is-auto .vtabs__rail button.is-anim::after { animation:vtabs-fill var(--vtabs-ms) linear forwards; }
@keyframes vtabs-fill { from { height:0 } to { height:100% } }
.vtabs--showcase .vtabs__rail button:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; border-radius:10px; }

/* the stage — no panel: the screenshot stands alone at full height, top-aligned
   with the heading, capped by height. Panes share one grid cell so the crossfade
   never shifts layout. */
.vtabs--showcase .vtabs__stage { position:relative; display:grid; grid-template-rows:minmax(0,1fr); min-width:0; }
.vtabs--showcase .vtabs__pane { grid-area:1/1; display:flex; justify-content:center; align-items:flex-start; min-width:0; }
@container (min-width: 720px){ .vtabs--showcase .vtabs__pane { justify-content:flex-start; } }   /* against the list, not centred in a column it does not fill */
.vtabs--showcase .vtabs__pane img { display:block; width:auto; height:auto; max-width:100%; max-height:min(48vh, 400px); margin:0; border-radius:0; }
@container (min-width: 720px){ .vtabs--showcase .vtabs__pane img { max-height:min(60vh, 500px); } }
/* crossfade (Alpine x-transition classes) */
.vtabs-enter { transition:opacity .22s cubic-bezier(.2,.8,.25,1), transform .22s cubic-bezier(.2,.8,.25,1); }
.vtabs-enter-start { opacity:0; transform:translateY(12px); }
.vtabs-enter-end   { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .vtabs--showcase .vtabs__rail button span { transition:none; }
  .vtabs-enter { transition:none; }
}
/* Dark CTA band — the contact_sales / vodlix_meet shape, most-used CTA */
.darkband { background:var(--banner-bg); color:var(--banner-ink); border-radius:var(--r-card); padding:22px;
  display:grid; gap:14px; align-items:center; }
@container (min-width: 640px){ .darkband{grid-template-columns:1fr auto;} }
.darkband h5 { font-size:18px; font-weight:700; letter-spacing:var(--h-tracking); }
.darkband p { font-size:13.5px; color:#c6c6cf; margin-top:4px; }
/* Two actions on the band: white primary + a hairline ghost that stays
   legible on ink in both modes (the page-level .btn--ghost would take the
   light-mode ink and vanish). */
.darkband__actions { display:flex; flex-wrap:wrap; gap:10px; }
.btnc-ghost { --btn-bg:transparent; --btn-border:rgba(255,255,255,.38); --btn-ink:#ffffff; --btn-bg-hover:rgba(255,255,255,.10); }
/* Logo marquee — the live component: two duplicated groups, edge mask,
   grayscale until hover, and a static wrapped grid under reduced motion. */
.marquee { overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track { display:flex; width:max-content; animation:marq 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
.marquee__group { display:flex; gap:34px; padding-right:34px; align-items:center; }
.marquee__item { font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--faint);
  white-space:nowrap; filter:grayscale(1); transition:color .2s ease, filter .2s ease; }
.marquee:hover .marquee__item { color:var(--sub); filter:none; }
@keyframes marq { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee__track { animation:none; flex-wrap:wrap; width:auto; }
  .marquee__group[aria-hidden] { display:none; }
}
/* Mega-menu panel — the features 4-column shape */
.mega { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.14); display:grid; gap:4px; }
@container (min-width: 720px){ .mega{grid-template-columns:repeat(2,1fr);} }
@container (min-width: 980px){ .mega{grid-template-columns:repeat(4,1fr);} }
.mega a { display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:10px; text-decoration:none;
  transition:background .15s ease; }
.mega a:hover { background:var(--btn-soft); }
.mega .ico { flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--icon-chip-bg);
  border:1px solid var(--icon-chip-line); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; }
.mega b { display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.mega span { display:block; font-size:12px; color:var(--sub); line-height:1.45; margin-top:2px; }
.mega__foot { grid-column:1/-1; border-top:1px solid var(--line); margin-top:6px; padding:10px 10px 2px;
  font-size:12.5px; color:var(--sub); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
/* Browser-chrome mockup (home carousel slides) */
.chrome { border-radius:12px 12px var(--r-card) var(--r-card); overflow:hidden; border:1px solid var(--line); }
.chrome__bar { background:#26262c; padding:8px 12px; display:flex; align-items:center; gap:8px; }
.chrome__bar i { width:8px; height:8px; border-radius:50%; background:#4a4a55; }
.chrome__url { flex:1; text-align:center; font-size:10px; color:#9b9ba7; background:#1b1b21; border-radius:5px; padding:3px 8px; }
.chrome__shot { aspect-ratio:16/9; background:var(--btn-soft); display:flex; align-items:center; justify-content:center; color:var(--icon-muted); }
/* ── BLOG / EDITORIAL KIT (real components) ───────────────────────── */
/* Blog list card — horizontal on wide, media-first stacked on a phone.
   The live site has TWO card shapes (list + related); this is the one
   shape both collapse to. */
.bcard { display:grid; gap:14px; padding:18px 0; border-bottom:1px dashed var(--line); }
@container (min-width: 720px){ .bcard{grid-template-columns:1fr 240px; align-items:center;} }
.bcard__media { border-radius:12px; aspect-ratio:16/9; background:var(--btn-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--icon-muted); order:-1; }
@container (min-width: 720px){ .bcard__media{order:0;} }
.bcard h6 { font-size:17px; font-weight:600; line-height:1.3; margin:8px 0 6px; }
.bcard p { font-size:13.5px; color:var(--sub); line-height:1.6; }
/* Author bio card (sticky sidebar on article pages) */
.authorcard { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:18px;
  display:grid; gap:10px; justify-items:start; }
.authorcard img, .authorcard .ph { width:56px; height:56px; border-radius:50%; background:var(--icon-chip-bg);
  border:1px solid var(--icon-chip-line); color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; }
.authorcard b { font-size:14.5px; }
.authorcard span { font-size:12.5px; color:var(--faint); }
.authorcard p { font-size:13px; color:var(--sub); line-height:1.55; }
/* Category tab strip + inline search (blog_nav) */
.cattabs { display:grid; gap:12px; }
@container (min-width: 720px){ .cattabs{grid-template-columns:1fr 260px; align-items:center;} }
.cattabs__strip { display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.cattabs__strip::-webkit-scrollbar { display:none; }
.cattabs__strip a { flex:0 0 auto; font-size:14px; font-weight:700; color:var(--sub); text-decoration:none;
  padding-bottom:8px; border-bottom:2px solid transparent; white-space:nowrap; }
.cattabs__strip a:hover { color:var(--ink); }
.cattabs__strip a[aria-current] { color:var(--ink); border-bottom-color:var(--accent-ink); }
/* ── FORM KIT (cxf / cf2 / register v2 primitives) ────────────────── */
.pills { display:flex; gap:8px; flex-wrap:wrap; }
.pills label { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; cursor:pointer;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink);
  transition:background .15s ease, border-color .15s ease; }
.pills label:hover { background:var(--btn-soft); }
.pills input { accent-color:var(--brand); margin:0; flex:0 0 auto; width:auto; }
/* DS FIX (landing pages, 2026-08-20) — UPSTREAM ME: `width:auto` added.
   `flex:0 0 auto` alone did NOT stop the stretch it claims to stop. Inside a
   `.field`, `.field input` (0,1,1, declared earlier) sets `width:100%`;
   `flex-basis:auto` then resolves to that width and `flex-shrink:0` refuses to
   give it back. Measured on /early-access at 375px: the radio was 259px wide,
   its label text started at x=324 and ran to x=403 — off the side of a 375px
   viewport, giving the page a horizontal scrollbar. */
.pills input:checked + span { color:var(--accent-ink); }
.pills label:has(input:checked) { border-color:var(--brand); background:var(--brand-tint); }
.otp { display:flex; gap:8px; }
.otp input { width:44px; height:52px; text-align:center; font:inherit; font-size:19px; font-weight:700;
  color:var(--ink); border:1px solid var(--line); border-radius:12px; background:var(--bg);
  font-variant-numeric:var(--num); transition:border-color .15s ease, box-shadow .15s ease; }
.otp input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }
.strength { display:grid; gap:6px; }
.strength__segs { display:flex; gap:5px; }
.strength__segs i { flex:1; height:5px; border-radius:999px; background:var(--track); }
.strength__segs i[data-on="1"] { background:#eab308; }
.strength__segs i[data-on="2"] { background:var(--ok); }
.strength small { font-size:12px; color:var(--sub); }
.stepper { display:flex; align-items:center; gap:0; }
.stepper__s { display:grid; justify-items:center; gap:6px; flex:0 0 auto; }
.stepper__dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; border:1px solid var(--line); background:var(--surface); color:var(--sub); }
.stepper__s[data-on] .stepper__dot { background:var(--btn-bg-default); border-color:var(--btn-bg-default); color:var(--btn-ink-default); }
.stepper__lbl { font-size:11.5px; color:var(--faint); white-space:nowrap; }
.stepper__s[data-on] .stepper__lbl { color:var(--ink); font-weight:600; }
.stepper__line { flex:1 1 auto; height:1px; background:var(--line); margin:0 8px; margin-bottom:20px; min-width:16px; }
.progress { height:10px; border-radius:999px; background:var(--track); overflow:hidden; }
.progress i { display:block; height:100%; border-radius:999px; background:var(--accent-ink); transition:width .6s ease; }
.rangerow { display:grid; gap:8px; }
.rangerow header { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--sub); }
.rangerow header b { color:var(--ink); font-variant-numeric:var(--num); border:1px solid var(--line);
  border-radius:8px; padding:3px 10px; font-size:12.5px; }
input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:999px;
  background:var(--track); outline:none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--btn-bg-default); border:2px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer; }
input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--btn-bg-default);
  border:2px solid var(--surface); cursor:pointer; }
/* Integration / payment-gateway grid */
.pgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@container (min-width: 560px){ .pgrid{grid-template-columns:repeat(4,1fr);} }
.pgrid div { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:14px 10px;
  display:grid; gap:7px; justify-items:center; text-align:center; transition:border-color .15s ease; }
.pgrid div:hover { border-color:rgba(230,29,44,.45); }
.pgrid .ico { width:30px; height:30px; border-radius:8px; background:var(--icon-chip-bg);
  border:1px solid var(--icon-chip-line); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; }
.pgrid span { font-size:12px; font-weight:600; color:var(--ink); }
/* Filter sidebar + removable chips */
.filters { display:grid; gap:14px; }
@container (min-width: 720px){ .filters{grid-template-columns:210px 1fr; gap:24px;} }
.filters__side { display:grid; gap:9px; align-content:start; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface); padding:16px; }
.filters__side h6 { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.filters__side label { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink); cursor:pointer; }
.filters__side input { accent-color:var(--brand); }
.chip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:6px 8px 6px 13px;
  border-radius:999px; background:var(--btn-soft); color:var(--ink); border:0; }
.chip button { border:0; background:transparent; color:var(--icon-muted); cursor:pointer; display:inline-flex;
  padding:2px; border-radius:50%; }
.chip button:hover { color:var(--accent-ink); }
/* Skeleton loader — absent on the live site; added because every one of
   these API-driven lists currently pops in with no loading state. */
.skel { display:grid; gap:10px; }
.skel i { display:block; height:12px; border-radius:6px; background:
  linear-gradient(90deg, var(--track) 25%, var(--btn-soft-hover) 37%, var(--track) 63%);
  background-size:400% 100%; animation:skel 1.4s ease infinite; }
.skel i.tall { height:110px; border-radius:12px; }
@keyframes skel { 0%{background-position:100% 50%} 100%{background-position:0 50%} }
@media (prefers-reduced-motion: reduce){ .skel i{animation:none} }
/* 404 */
.nf { text-align:center; padding:32px 20px; }
.nf b { display:block; font-size:64px; font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.nf h6 { font-size:17px; font-weight:600; margin:10px 0 6px; }
.nf p { font-size:13.5px; color:var(--sub); max-width:40ch; margin:0 auto 16px; line-height:1.55; }
.nf .links { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
/* Retired-pattern callout */
.retire { border:1px solid var(--line); border-left:3px solid var(--icon-muted); border-radius:0 var(--r-card) var(--r-card) 0;
  background:var(--surface); padding:14px 16px; font-size:13px; color:var(--ink); line-height:1.6; }
/* Blog article layout — TOC rail, dashed body divider (as today), prose */
.article { display:grid; gap:20px; }
@container (min-width: 820px){ .article{grid-template-columns:210px 1fr; gap:34px;} }
.article__body { min-width:0; }
@container (min-width: 820px){ .article__body{border-left:1px dashed var(--line); padding-left:26px;} }
.prose h2 { font-size:22px; font-weight:600; letter-spacing:var(--h-tracking); margin:22px 0 8px; }
.prose h3 { font-size:16.5px; font-weight:600; margin:18px 0 6px; }
.prose p { font-size:15.5px; line-height:1.72; color:var(--ink); margin-bottom:14px; }
.prose ul { margin:0 0 14px 0; padding-left:18px; display:grid; gap:6px; }
.prose li { font-size:15px; line-height:1.6; color:var(--ink); }
.prose blockquote { margin:18px 0; padding:14px 18px; border-left:2px solid var(--ink);
  background:var(--btn-soft); border-radius:0 12px 12px 0; font-size:15px; line-height:1.65; }
.prose figure { margin:18px 0; }
.prose figure > div { border-radius:12px; aspect-ratio:16/9; background:var(--btn-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--icon-muted); }
.prose figcaption { font-size:12px; color:var(--faint); margin-top:7px; text-align:center; }
/* Spec sheet */
.spec { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow-x:auto; }
@media (prefers-reduced-motion: reduce){ *{transition-duration:.01ms !important; animation:none !important;} }

/* ══════════════════════════════════════════════════════════════════════
   REVIEW SCAFFOLDING — belongs to the docs pages, NOT to the system.
   Drop everything below this line when porting into the Statamic build.
   ══════════════════════════════════════════════════════════════════════ */

body { background:#ececef; padding:20px 12px 60px; }
.shell__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; padding:8px 6px 18px;
  font-family:'Noto Sans',sans-serif; }
.shell__kicker { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:6px; }
.shell__title { font-family:'Merriweather Sans',sans-serif; font-size:26px; font-weight:700; letter-spacing:-.02em; color:#17171a; }
.shell__sub { font-size:13.5px; color:#5b5b66; margin-top:6px; max-width:60ch; line-height:1.6; }
.segs { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.seg { display:inline-flex; align-items:center; gap:4px; background:#fff; border:1px solid #dcdce2; border-radius:999px; padding:4px; }
.seg span { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8f8f99; padding:0 8px 0 10px; }
.seg button { font:inherit; font-size:13px; font-weight:600; color:#55555f; background:none; border:0; cursor:pointer; padding:7px 14px; border-radius:999px; }
.seg button[aria-pressed="true"] { background:#0c0c0e; color:#fff; }
.seg--inline { background:var(--surface); border-color:var(--line); }
.seg--inline span { color:var(--faint); }
.seg--inline button { color:var(--sub); }
.seg--inline button[aria-pressed="true"] { background:var(--btn-bg-default); color:var(--btn-ink-default); }
.page { background:var(--bg); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  container-type:inline-size; min-width:0; transition:background .2s ease; }
.demo { display:grid; gap:28px; padding:0 22px 30px; min-width:0; }
.demo section, .demo section > * { min-width:0; }
.demo section > h4 { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.s-h2 { font-size:var(--fs-h2); font-weight:600; letter-spacing:var(--h-tracking); margin-bottom:4px; }
.s-sub { font-size:var(--fs-small); color:var(--faint); margin-bottom:14px; }
.px { font-size:11px !important; font-weight:700; letter-spacing:0 !important; color:var(--faint);
  background:var(--track); border-radius:999px; padding:2px 8px; margin-left:8px;
  vertical-align:middle; white-space:nowrap; display:inline-block; }
.logo-tile { border:1px solid var(--line); border-radius:var(--r-card); padding:26px 20px 16px; display:grid; gap:16px;
  justify-items:center; text-align:center; }
.logo-tile img { height:30px; width:auto; display:block; }
.logo-tile span { font-size:12.5px; color:var(--faint); line-height:1.5; }
.logo-tile--surface { background:var(--surface); }
.logo-tile--dark { background:#101014; }
.logo-tile--dark span { color:#8f8f99; }
.logo-tile--grad { background:
  radial-gradient(120% 90% at 15% 20%, #E61D2C 0%, transparent 55%),
  radial-gradient(100% 80% at 85% 15%, #f89436 0%, transparent 55%), #E61D2C; }
.logo-tile--grad span { color:rgba(255,255,255,.85); }
.logo-tile--grad span b { color:#fff; }
.logo-tile--icon { background:var(--surface); }
.logo-icons { display:flex; align-items:center; gap:12px; }
.logo-icons img { height:36px; width:auto; display:block; }
.icon-chip { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:12px; border:1px solid var(--line); background:#fff; }
.icon-chip img { height:30px; }
.icon-chip--dark { background:#101014; border-color:#101014; }
.mob-fig { display:grid; gap:8px; justify-items:center; }
.mob-fig figcaption { font-size:12px; color:var(--faint); text-align:center; max-width:375px; }
.mob-screen { width:375px; max-width:100%; border:1px solid var(--line); border-radius:26px; overflow:hidden;
  background:var(--bg); container-type:inline-size; }
.mob-screen .stage { padding-bottom:34px; }
.mob-body { padding:16px; display:grid; gap:16px; }
.navdemo { border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--surface); min-width:0; }
.navdemo__label { padding:9px 14px; font-size:12px; font-weight:700; color:var(--sub); border-bottom:1px solid var(--line); background:var(--bg); }
.navdemo__scroll { height:380px; overflow-y:auto; position:relative; container-type:inline-size; background:var(--bg); }
.nav-sentinel { position:absolute; top:0; left:0; width:1px; height:1px; }
.navbar { position:sticky; top:0; z-index:6; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid transparent; transition:background .2s ease, border-color .2s ease, backdrop-filter .2s ease; }
.nb__logo { justify-self:start; display:flex; align-items:center; }
.nb__logo img { height:22px; width:auto; display:block; }
.nb__menu { justify-self:center; display:none; align-items:center; gap:2px; padding:4px 5px; border-radius:999px;
  transition:background .2s ease, border-color .2s ease; border:1px solid transparent; }
.nb__menu a { font-size:12.5px; font-weight:500; text-decoration:none; padding:6px 11px; border-radius:999px;
  display:inline-flex; align-items:center; gap:3px; transition:background .15s ease, color .15s ease; }
.nb__cta { justify-self:end; display:flex; gap:7px; align-items:center; }
.nb__btn { display:inline-flex; align-items:center; height:32px; padding:0 13px; border-radius:999px;
  font-size:12.5px; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.navbar[data-look="hero"] .nb__menu a { color:var(--menu-ink); }
.navbar[data-look="hero"] .nb__menu a:hover { background:var(--brand-tint); color:var(--accent-ink); }
.navbar[data-look="hero"] .nb__btn--primary { background:#fff; border-color:#fff; color:#0c0c0e; }
.navbar[data-look="hero"] .lg-bar { display:none; }
.navbar[data-look="bar"] .nb__menu a { color:var(--ink); }
.navbar[data-look="bar"] .nb__menu a:hover { background:var(--btn-soft); }
.navbar[data-look="bar"] .nb__btn--primary { background:var(--btn-bg-default); border-color:var(--btn-bg-default); color:var(--btn-ink-default); }
.navbar[data-look="bar"] .nb__btn--primary:hover { background:var(--btn-hover-default); border-color:var(--btn-hover-default); }
.navdemo__hero { padding:52px 20px 60px; text-align:center; color:#fff; }
.navdemo__hero--grad { background:
  radial-gradient(120% 90% at 15% 20%, #E61D2C 0%, transparent 55%),
  radial-gradient(100% 80% at 85% 15%, #f89436 0%, transparent 55%),
  radial-gradient(110% 95% at 70% 85%, #ff0000 0%, transparent 60%), #E61D2C;
  margin-top:-53px; padding-top:105px; }
.navdemo__hero h3 { font-size:22px; font-weight:700; letter-spacing:var(--h-tracking); }
.navdemo__hero p { font-size:13px; opacity:.9; margin-top:6px; }
.navdemo__page { padding:26px 20px; }
.navdemo__page h3 { font-size:20px; font-weight:700; color:var(--ink); letter-spacing:var(--h-tracking); }
.navdemo__page p { font-size:13px; color:var(--sub); margin-top:6px; line-height:1.6; }
.navdemo__filler { padding:16px 20px 30px; display:grid; gap:10px; }
.navdemo__filler div { height:56px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.lay__bar { border:1px dashed var(--line); border-radius:10px; background:var(--brand-tint); color:var(--accent-ink);
  font-size:11.5px; font-weight:700; padding:8px 12px; text-align:center; }
.space-scale { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.space-scale div { text-align:center; font-size:10.5px; color:var(--faint); }
.space-scale i { display:block; background:var(--accent-ink); border-radius:3px; margin-bottom:5px; opacity:.85; }
.jump::-webkit-scrollbar { display:none; }
.jump a { flex:0 0 auto; font-size:12px; font-weight:600; color:var(--sub); text-decoration:none;
  padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface); white-space:nowrap; }
.jump a:hover { color:var(--ink); background:var(--btn-soft); }
.demo section { scroll-margin-top:64px; }
.compo figure { display:grid; gap:8px; min-width:0; }
.compo figcaption { font-size:12px; color:var(--faint); text-align:center; }
.compo__frame { height:560px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-card);
  container-type:inline-size; background:var(--bg); scrollbar-width:thin; }
.compo__pad { padding:20px; display:grid; gap:22px; }
.compo__title h2 { font-size:var(--fs-h2); font-weight:600; letter-spacing:var(--h-tracking); }
.compo__title p { font-size:var(--fs-lede); color:var(--ink); margin-top:6px; line-height:1.5; }
.retire b { font-weight:700; }
.retire code { font-size:12px; background:var(--track); padding:1px 5px; border-radius:5px; }
.article__head { display:grid; gap:12px; margin-bottom:8px; }
.article__head h1 { font-size:clamp(26px, 5cqi, var(--fs-h1)); font-weight:700; line-height:1.15; letter-spacing:var(--h-tracking); }
.spec table { width:100%; border-collapse:collapse; font-size:13.5px; }
.spec th, .spec td { text-align:left; padding:10px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.spec tr:last-child td { border-bottom:0; }
.spec th { width:180px; font-size:12px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.spec td { color:var(--ink); line-height:1.55; }
.spec td b { color:var(--ink); font-weight:600; }
.swatch { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:4px; border:1px solid var(--line); }


/* ══════════════════════════════════════════════════════════════════════
   PAGE CHROME — a real page, not a demo panel. Header is full-bleed and
   sticky from the first pixel so nothing shifts when it flips; the hero
   pulls up underneath it rather than the nav changing geometry.
   ══════════════════════════════════════════════════════════════════════ */
:root { --navh:58px; }
html { -webkit-text-size-adjust:100%; }
html { background:var(--bg); }
body.pg { margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-body), 'Noto Sans Arabic','Noto Sans SC','Noto Sans JP', sans-serif; }

.pg .d-banner { border-radius:0; }
.pg .d-nav { position:sticky; top:0; z-index:50; margin:0; padding:10px 12px; min-height:var(--navh);
  border-radius:0; background:transparent; border:0; border-bottom:1px solid transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
  transition:background .2s ease, border-color .2s ease; }
/* Stuck = FROSTED GLASS BAR (final, 2026-08-15). One clean sheet:
   high-opacity page tint + strong blur — content shimmers through
   subtly, never shouts. No masks, no JS measuring, nothing to break. */
.pg .d-nav[data-stuck="true"] { background:var(--navglass-bg); border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(1.8); backdrop-filter:blur(18px) saturate(1.8);
  box-shadow:inset 0 1px 0 var(--glass-inset), 0 8px 24px rgba(12,12,14,.05); }

.pg .d-nav__menu { position:relative; background:var(--pill-bg); border:1px solid var(--pill-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 var(--glass-inset); }
/* Over a gradient hero the .pg pill tint above (--pill-bg, a 5.5% DARK wash)
   plus saturate(1.5) reads as a saturated block of the hero colour — a red pill
   on a red hero. On the marketing site the page behind is white so it looks
   right; a landing page with a gradient hero is the case it was never designed
   for. Use the near-white glass while the nav is over the hero. */
.pg .d-nav[data-look="hero"] .d-nav__menu { background:var(--glass-bg); border-color:var(--glass-line); }
.pg .d-nav[data-look="bar"] .d-nav__menu { background:transparent; border-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }

.d-nav[data-look="hero"] .lg-bar { display:none; }
.d-nav[data-look="bar"] .lg-hero { display:none; }
.pg .d-nav[data-look="hero"] .d-nav__btn--primary { background:#fff; border-color:#fff; color:#0c0c0e; }
.pg .d-nav[data-look="hero"] .d-nav__btn--primary:hover { background:rgba(255,255,255,.9); border-color:rgba(255,255,255,.9); }
.pg .d-nav[data-look="bar"] .d-nav__btn--primary { background:var(--btn-bg-default); border-color:var(--btn-bg-default); color:var(--btn-ink-default); }
.pg .d-nav[data-look="bar"] .d-nav__btn--primary:hover { background:var(--btn-hover-default); border-color:var(--btn-hover-default); }
.pg .d-nav[data-look="bar"] .d-nav__burger { background:transparent; border-color:var(--line); }

/* Containers + section rhythm */
.wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
@container (min-width: 0px){ }
@media (min-width: 720px){ .wrap{padding:0 24px;} }
@media (min-width: 1080px){ .wrap{padding:0 32px;} }
.wrap--narrow { max-width:880px; }
.wrap--prose { max-width:720px; }
.section { padding:44px 0; container-type:inline-size; }
@media (min-width: 720px){ .section{padding:64px 0;} }
.section--tight { padding:28px 0; }
.section--alt { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sechead { display:grid; gap:8px; margin-bottom:24px; max-width:60ch; }
.sechead--center { justify-items:center; text-align:center; margin-left:auto; margin-right:auto; }
.sechead h2 { font-size:var(--fs-h2); font-weight:600; letter-spacing:var(--h-tracking); }
.sechead p { font-size:var(--fs-lede); color:var(--sub); line-height:1.55; }
.sechead h1 { font-size:var(--fs-h1); font-weight:600; letter-spacing:var(--h-tracking); line-height:1.12; } /* page-head */
/* A standfirst UNDER the heading, for the blocks whose kicker reads as an
   answer to the title rather than a label above it. Sentence case on
   purpose: `.eyebrow` is tracked and uppercased, which is right for a
   two-word label and wrong for a sentence. */
.sechead p.sechead__lead { font-size:var(--fs-lede); font-weight:600; color:var(--brand); line-height:1.5; }

/* Hero pulls up under the sticky nav */
.hero-under { margin-top:calc(-1 * var(--navh)); padding-top:calc(var(--navh) + 40px); }

/* Docs mode switch — review affordance, floats bottom-right */
.modeswitch { position:fixed; right:14px; bottom:14px; z-index:100; display:grid; gap:6px; justify-items:end; }
.modeswitch__pill { display:inline-flex; gap:3px; padding:4px;
  border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.16); }
.modeswitch__pill span { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); align-self:center; padding:0 6px 0 9px; }
.modeswitch button { font:inherit; font-size:12px; font-weight:600; border:0; cursor:pointer; padding:6px 13px;
  border-radius:999px; background:transparent; color:var(--sub); }
.modeswitch button[aria-pressed="true"] { background:var(--btn-bg-default); color:var(--btn-ink-default); }

/* Docs gallery index */
.gal { display:grid; gap:14px; }
@media (min-width: 720px){ .gal{grid-template-columns:repeat(2,1fr);} }
@media (min-width: 1080px){ .gal{grid-template-columns:repeat(3,1fr);} }
.galcard { display:grid; gap:10px; padding:18px; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .15s ease; }
.galcard:hover { border-color:rgba(230,29,44,.45); }
.galcard .ico { width:38px; height:38px; border-radius:10px; background:var(--icon-chip-bg);
  border:1px solid var(--icon-chip-line); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; }
.galcard b { font-size:15px; font-weight:600; }
.galcard span { font-size:13px; color:var(--sub); line-height:1.55; }

/* ══════════════════════════════════════════════════════════════════════
   COMPARISON SYSTEM — "Vodlix vs <competitor>".
   Replaces the 74-entry platform_comparison table, which was a wide
   sticky-header grid that on a phone became a horizontal scroll with no
   row context. Here the SAME data has two presentations: a scored card
   pair at the top for the skim, and a per-category breakdown below that
   collapses to accordions on a phone instead of scrolling sideways.
   ══════════════════════════════════════════════════════════════════════ */
.cmp__h1 { font-size:clamp(28px, 6cqi, var(--fs-h1)); font-weight:700; line-height:1.12; letter-spacing:var(--h-tracking); }
.cmp__h1 em { font-style:normal; opacity:.55; font-weight:600; }

/* Verdict — the two-up scoreboard */
.verdict { display:grid; gap:12px; }
@container (min-width: 700px){ .verdict{grid-template-columns:1fr auto 1fr; align-items:stretch;} }
.vs { display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
  letter-spacing:.1em; color:var(--faint); }
.vcol { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:20px; display:grid; gap:12px; align-content:start; }
/* The Vodlix verdict — the INK CARD, picked from chat mockups. No border
   tricks: our card is the dark object, the competitor simply recedes. */
.vcol--us { background:#101014; border-color:#101014; color:#f5f5f7; }
.vcol--us .vcol__score { color:#fff; }
.vcol--us .vcol__score span { color:#9b9ba7; }
.vcol--us .vbar__row { color:#c6c6cf; }
.vcol--us .vbar__row b { color:#fff; }
.vcol--us .vbar__track { background:rgba(255,255,255,.14); }
.vcol--us .btn { background:var(--brand); border-color:var(--brand); color:#fff; }
.vcol--us .btn:hover { background:var(--brand-hover); border-color:var(--brand-hover); }
.vcol:not(.vcol--us) { opacity:.62; }
.vcol__name { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vcol__name b { font-size:16px; font-weight:700; }
.vcol__score { font-size:28px; font-weight:700; font-variant-numeric:var(--num); letter-spacing:var(--h-tracking); }
.vcol__score span { font-size:13px; color:var(--faint); font-weight:500; }
.vbars { display:grid; gap:9px; }
.vbar { display:grid; gap:5px; }
.vbar__row { display:flex; justify-content:space-between; font-size:12.5px; color:var(--sub); }
.vbar__row b { color:var(--ink); font-variant-numeric:var(--num); }
.vbar__track { height:6px; border-radius:999px; background:var(--track); overflow:hidden; }
.vbar__track i { display:block; height:100%; border-radius:999px; background:var(--icon-muted); }
.vcol--us .vbar__track i { background:var(--brand); }

/* Category breakdown — table with room, accordions on a phone */
.cmp__cats { display:grid; gap:10px; }
.cmpcat { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
.cmpcat__btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font:inherit; font-size:14.5px; font-weight:600; color:var(--ink); background:none; border:0; cursor:pointer;
  padding:15px 18px; text-align:left; }
.cmpcat__btn svg { color:var(--icon-muted); transition:transform .18s ease; flex:0 0 auto; }
.cmpcat__btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.cmpcat__tally { font-size:12px; font-weight:700; color:var(--faint); font-variant-numeric:var(--num); }
.cmpcat__body[hidden] { display:none; }
.cmprow { display:grid; grid-template-columns:1fr; gap:6px; padding:13px 18px; border-top:1px solid var(--line); }
@container (min-width: 640px){ .cmprow{grid-template-columns:1fr 110px 110px; align-items:center; gap:12px;} }
.cmprow__f { font-size:13.5px; color:var(--ink); }
.cmprow__f small { display:block; font-size:12px; color:var(--faint); margin-top:2px; line-height:1.45; }
.cmprow__v { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
@container (min-width: 640px){ .cmprow__v{justify-content:center;} }
/* On a phone each value needs its own label — a bare tick in a column with
   no visible header means nothing. */
.cmprow__v::before { content:attr(data-who) ""; font-weight:600; color:var(--faint); font-size:11.5px; }
@container (min-width: 640px){ .cmprow__v::before{display:none;} }
.cmprow__v--yes { color:var(--ok); }
.cmprow__v--no { color:var(--icon-muted); }
.cmprow__v--part { color:#eab308; }
.cmphead { display:none; }
@container (min-width: 640px){
  .cmphead { display:grid; grid-template-columns:1fr 110px 110px; gap:12px; padding:10px 18px;
    background:var(--bg); border-top:1px solid var(--line); font-size:11px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
  .cmphead span:not(:first-child) { text-align:center; }
}

/* Honesty panel — where the competitor genuinely wins */
.fair { border:1px solid var(--line); border-left:2px solid var(--icon-muted); border-radius:0 var(--r-card) var(--r-card) 0;
  background:var(--surface); padding:18px 20px; display:grid; gap:8px; }
.fair h6 { font-size:14.5px; font-weight:600; }
.fair ul { list-style:none; display:grid; gap:7px; }
.fair li { display:flex; gap:9px; font-size:13.5px; color:var(--ink); line-height:1.55; }
.fair li svg { color:var(--icon-muted); flex:0 0 auto; margin-top:3px; }

/* Migration strip */
.migrate { display:grid; gap:12px; }
@container (min-width: 720px){ .migrate{grid-template-columns:repeat(3,1fr);} }
.migrate div { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:18px; display:grid; gap:7px; }
.migrate b { font-size:14.5px; font-weight:600; }
.migrate p { font-size:13px; color:var(--sub); line-height:1.55; }
.migrate .n { width:26px; height:26px; border-radius:50%; background:var(--btn-bg-default); color:var(--btn-ink-default);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }

/* Competitor switcher */
.cmpswitch { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; margin:0 -20px; padding-left:20px; padding-right:20px; }
.cmpswitch::-webkit-scrollbar { display:none; }
.cmpswitch a { flex:0 0 auto; font-size:13px; font-weight:600; text-decoration:none; padding:8px 15px;
  border-radius:999px; border:1px solid var(--line); color:var(--sub); background:var(--surface); white-space:nowrap; }
.cmpswitch a:hover { color:var(--ink); background:var(--btn-soft); }
.cmpswitch a[aria-current] { background:var(--btn-bg-default); border-color:var(--btn-bg-default); color:var(--btn-ink-default); }

/* ── Real-page nav sizing ──────────────────────────────────────────────
   On the docs page the nav lives inside a query container. On a real page
   it does not, so the @container rules never match and the menu stayed
   hidden. The header wrapper is display:contents (so the sticky nav's
   containing block is the body, not a 100px-tall wrapper) and the nav
   switches on a viewport query instead — still mobile-first, no max-width. */
[data-site-header] { display:contents; }
.pg .d-nav__menu { display:none; }
.pg .d-nav__burger { display:inline-flex; }
@media (min-width: 860px){
  .pg .d-nav__menu { display:flex; }
  .pg .d-nav__burger { display:none; }
  .pg .d-nav__mobilemenu { display:none; }
}
/* ── Mobile header, locked 2026-08-15 ──────────────────────────────
   Phone: icon-only mark (white over hero, coloured on the bar), and the
   burger opens a BOTTOM SHEET — thumb-reachable links + the trial CTA
   over a scrim — instead of a dropdown under the bar. From 860px the
   full wordmark returns and the sheet retires. */
.pg .d-nav__logo .lg-hero, .pg .d-nav__logo .lg-bar { display:none; }
.pg .d-nav[data-look="hero"] .lg-ico-hero { display:block; height:30px; }
.pg .d-nav[data-look="bar"] .lg-ico-bar { display:block; height:30px; }
@media (min-width: 860px) {
  .pg .d-nav__logo .lg-ico { display:none !important; }
  .pg .d-nav[data-look="hero"] .lg-hero { display:block; }
  .pg .d-nav[data-look="bar"] .lg-light { display:block; }
  /* DS FIX (landing pages, 2026-08-20) — UPSTREAM ME.
     The line above is (0,4,0) and re-shows `.lg-light` unconditionally, so it
     beats `[data-mode="dark"] .lg-light{display:none}` (0,2,0). In dark mode
     the bar therefore painted the DARK-INK logo on the dark bar — invisible —
     and `.lg-dark` was never re-shown at all. Pick the mode-correct mark. */
  :root[data-mode="dark"] .pg .d-nav[data-look="bar"] .lg-light { display:none; }
  :root[data-mode="dark"] .pg .d-nav[data-look="bar"] .lg-dark { display:block; }
}
/* Mobile top-bar icon tabs: [icon logo] [Features Platforms Pricing More]
   — labels under 17px glyphs, riding the same glass pill language. The
   trial CTA leaves the mobile bar (the page carries plenty); More opens
   the sheet. Desktop keeps the text pill + CTA, no tabs. */
.d-nav__tabs { display:none; }
.pg .d-nav__tabs { display:flex; gap:2px;
  justify-self:center; align-items:stretch; padding:4px 5px; border-radius:999px; background:var(--pill-bg); border:1px solid var(--pill-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 var(--glass-inset); }
.pg .d-nav[data-look="hero"] .d-nav__tabs { background:var(--glass-bg); border-color:var(--glass-line); }
/* every tab the same width — icons space evenly, app-tab-bar style */
.d-nav__tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:62px; padding:6px 0; border-radius:999px; border:0; background:none; cursor:pointer;
  flex:0 0 auto;
  color:var(--menu-ink); text-decoration:none; font-family:inherit; }
.d-nav__tab span { font-size:10px; font-weight:400; letter-spacing:.01em; line-height:1; }
.d-nav__tab svg { display:block; stroke-width:1.75; }
.d-nav__tab[aria-current] { background:var(--brand-tint); color:var(--accent-ink); }
/* width-stepped reveal: the pill shows every tab that fits */
.d-nav__tab--use-cases, .d-nav__tab--blog, .d-nav__tab--help { display:none; }
@media (min-width: 480px) { .d-nav__tab--use-cases { display:flex; } }
@media (min-width: 620px) { .d-nav__tab--blog { display:flex; } }
@media (min-width: 740px) { .d-nav__tab--help { display:flex; } }
.pg .d-nav__actions .d-nav__btn--primary { display:none; }
/* 360px phones (Galaxy S8 and friends): logo + 4 tabs + Start exceeded
   the line. Tabs tighten rather than the pill wrapping or clipping. */
@media (max-width: 400px) {
  .d-nav__tab { width:53px; }
  .d-nav__tab span { font-size:9px; }
  .pg .d-nav__tabs { padding:4px; }
  .pg .d-nav__ctatab { padding:0 11px; }
}
/* mobile CTA: a plain TEXT pill — "Start" on the narrowest screens,
   "Start Trial" from 520px; retires when the desktop button returns */
.d-nav__ctatab { display:none; }
.pg .d-nav__ctatab { display:flex; align-items:center; align-self:center; padding:0 14px; height:40px;
  border-radius:999px; background:var(--btn-bg-default); color:var(--btn-ink-default);
  text-decoration:none; font-size:12.5px; font-weight:600; white-space:nowrap; }
.pg .d-nav__ctal { display:none; }
@media (min-width: 520px) {
  .pg .d-nav__ctal { display:inline; }
  .pg .d-nav__ctas { display:none; }
}
@media (min-width: 860px) {
  .pg .d-nav { padding:10px 20px; }
  .pg .d-nav__tabs { display:none; }
  .pg .d-nav__actions .d-nav__btn--primary { display:inline-flex; }
  .pg .d-nav__ctatab { display:none; }
}
/* ── LANGUAGE SWITCHER — one list, three surfaces ─────────────────────
   Desktop: a globe button in the actions cluster opening a panel of the
   12 sites. Mobile: a row in the bottom sheet that swaps to a language
   section (same machinery as the mega sections). Footer: the locale line
   expands a grid in place. Native names only — never flags. */
.d-nav__lang { position:relative; display:none; }
@media (min-width: 860px) { .d-nav__lang { display:block; } }
.d-nav__langbtn { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px;
  border-radius:999px; border:1px solid var(--pill-line); background:var(--pill-bg);
  color:var(--menu-ink); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); }
.d-nav__langbtn:hover { border-color:var(--border-strong, var(--line)); }
.d-nav__lang[data-open="true"] .d-nav__langbtn { background:var(--btn-soft); }
.d-nav__langpanel { position:absolute; top:calc(100% + 10px); right:0; z-index:70;
  width:min(340px, calc(100vw - 32px)); background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:10px; box-shadow:0 24px 60px rgba(12,12,14,.16);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .2s ease, visibility .16s; }
[data-mode="dark"] .d-nav__langpanel { box-shadow:0 24px 60px rgba(0,0,0,.55); }
.d-nav__lang[data-open="true"] .d-nav__langpanel { opacity:1; visibility:visible; transform:none; }
.d-nav__langgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
.d-nav__langgrid a { padding:8px 9px; border-radius:8px; font-size:12.5px; color:var(--ink);
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-nav__langgrid a:hover { background:var(--btn-soft); }
.d-nav__langgrid a[aria-current] { background:var(--brand-tint); color:var(--accent-ink); font-weight:600; }
/* Banner placement: the control rides in the announcement strip next to
   Book a Meeting. Inverted colours (the banner is ink), compact enough
   that the phone's single 43px line still fits copy + pill + globe. */
.d-nav__lang--banner { display:block; flex:0 0 auto; }
.d-nav__lang--banner .d-nav__langbtn { height:var(--ctl-sm); padding:0 9px; gap:5px; font-size:11.5px;
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:var(--banner-ink);
  -webkit-backdrop-filter:none; backdrop-filter:none; }
.d-nav__lang--banner .d-nav__langbtn:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.3); }
.d-nav__lang--banner[data-open="true"] .d-nav__langbtn { background:#fff; color:#0c0c0e; border-color:#fff; }
.d-nav__lang--banner .d-nav__langpanel { top:calc(100% + 8px); }
@media (max-width: 420px) {
  .d-nav__lang--banner .d-nav__langbtn span { display:none; }
  .d-nav__lang--banner .d-nav__langbtn { padding:0 7px; }
  /* the button sits at the right edge of the strip, so an anchored panel
     would hang off-screen — pin it to the viewport instead */
  .d-nav__lang--banner .d-nav__langpanel { position:fixed; top:calc(var(--bannerh, 43px) + 7px);
    left:10px; right:10px; width:auto; transform:translateY(6px); }
  .d-nav__lang--banner .d-nav__langgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .d-nav__lang--banner .d-nav__langgrid a { padding:12px; font-size:14px; border-radius:10px; }
}
/* mobile sheet row */
.d-nav__sheetlang[hidden] { display:none; }
.d-nav__sheetlang { display:flex; align-items:center; gap:10px; width:100%; margin-top:8px;
  padding:13px 14px; border-radius:12px; border:0; border-top:1px solid var(--line);
  background:none; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; text-align:left; }
.d-nav__sheetlang span { flex:1; }
.d-nav__sheetlang svg:last-child { color:var(--faint); }
.d-nav__sheetsec[data-sec="lang"] .d-nav__langgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.d-nav__sheetsec[data-sec="lang"] .d-nav__langgrid a { padding:12px 12px; font-size:14px; border-radius:10px; }
/* footer expander */
.f5__loc { border:0; background:none; font:inherit; cursor:pointer; }
.f5__loc:hover { color:#c6c6cf; }
.f5__loc svg:last-child { transition:transform .18s ease; }
.f5__loc[aria-expanded="true"] svg:last-child { transform:rotate(180deg); }
.f5__langgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px;
  padding:12px 0 4px; border-top:1px solid rgba(255,255,255,.1); margin-top:4px; }
.f5__langgrid[hidden] { display:none; }
.f5__langgrid a { padding:8px 10px; border-radius:8px; font-size:12.5px; color:#c6c6cf; text-decoration:none; }
.f5__langgrid a:hover { background:rgba(255,255,255,.06); color:#fff; }
.f5__langgrid a[aria-current] { color:#fff; font-weight:600; }
@container (min-width: 620px) { .f5__langgrid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@container (min-width: 1040px) { .f5__langgrid { grid-template-columns:repeat(6,minmax(0,1fr)); } }

.d-nav__sheetgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.d-nav__sheetgrid[hidden] { display:none; }
.d-nav__sheetsec { display:grid; gap:2px; }
.d-nav__sheetsec[hidden] { display:none; }
.d-nav__sheetsec .vdd__aside { margin-top:8px; }
.d-nav__sheetback { display:flex; align-items:center; gap:7px; padding:2px 4px 10px;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink);
  background:none; border:0; cursor:pointer; }
.d-nav__tile { display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:15px 6px; border-radius:14px; background:var(--bg); border:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-size:12px; font-weight:400; }
.d-nav__tile svg { stroke-width:1.75; }
.d-nav__tile[aria-current] { background:var(--brand-tint); color:var(--accent-ink); border-color:transparent; }
.pg .d-nav__scrim { position:fixed; inset:0; z-index:140; background:rgba(12,12,14,.45); }
.pg .d-nav__mobilemenu { position:fixed; left:10px; right:10px; bottom:10px; z-index:141;
  max-height:min(74vh, 640px); overflow:auto; overscroll-behavior:contain;
  margin:0; padding:12px; border-radius:22px; background:var(--surface); border:1px solid var(--line);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 24px 60px rgba(12,12,14,.30); animation:sheetUp .26s cubic-bezier(.22,.9,.3,1); }
.pg .d-nav__mobilemenu[hidden] { display:none; }
@keyframes sheetUp { from { transform:translateY(26px); opacity:0; } }
.d-nav__grab { display:block; width:36px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 10px; }
.pg .d-nav__mobilemenu a { font-size:15px; padding:13px 16px; border-radius:12px; }
.d-nav__sheetcta { margin-top:8px; justify-content:center; background:var(--btn-bg-default); color:var(--btn-ink-default); border-color:var(--btn-bg-default); }
/* DS FIX (landing pages, 2026-08-20) — UPSTREAM ME.
   `.d-nav__mobilemenu a` (0,1,1) sets `color:var(--menu-ink)` and outranks
   `.d-nav__sheetcta` (0,1,0), so the sheet's CTA took the menu ink instead of
   the button ink. In dark mode that is near-white text on the near-white
   `--btn-bg-default` — the one CTA in the mobile sheet, unreadable. */
.d-nav__mobilemenu a.d-nav__sheetcta { color:var(--btn-ink-default); }
@media (min-width: 860px) { .pg .d-nav__scrim { display:none; } }

/* ── Footer + menu on a real page ──────────────────────────────────────
   The footer grid is written as an @container rule, so on a real page —
   where nothing above it declares a container — it never matched and the
   columns collapsed. The wrapper becomes the container. Same class of bug
   as the nav menu; anything using @container needs a container ancestor. */
[data-site-footer] { container-type:inline-size; display:block; }

/* Glass stays behind the menu on EVERY page, hero or not. Without it the
   bar look was a row of bare links on a flat background. */
.pg .d-nav[data-look="bar"] .d-nav__menu {
  background:var(--pill-bg); border:1px solid var(--pill-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 var(--glass-inset); }
/* The pill NEVER goes flat: stuck, it keeps its liquid glass — content
   scrolling under the bar ghosts through the pill. */
.pg .d-nav[data-stuck="true"] .d-nav__menu { background:var(--pill-bg); border-color:var(--pill-line);
  -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 1px 0 var(--glass-inset); }

/* ══════════════════════════════════════════════════════════════════════
   UX KIT — overlays, feedback, motion.
   Native confirm()/alert() are banned across Vodlix, so the modal is the
   only sanctioned way to ask. On a phone it becomes a bottom sheet, which
   is reachable by thumb; a centred dialog is not.
   ══════════════════════════════════════════════════════════════════════ */
.sheet[hidden] { display:none; }
.sheet { position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center; }
@media (min-width: 640px){ .sheet { align-items:center; } }
.sheet__backdrop { position:absolute; inset:0; background:rgba(12,12,14,.45);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); animation:fadeIn .18s ease both; }
.sheet__panel { position:relative; width:100%; max-width:460px; background:var(--surface);
  border:1px solid var(--line); border-radius:20px 20px 0 0; padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.28); animation:sheetUp .22s cubic-bezier(.2,.8,.25,1) both; }
@media (min-width: 640px){
  .sheet__panel { border-radius:var(--r-card); margin:20px; animation:sheetIn .18s cubic-bezier(.2,.8,.25,1) both; }
}
.sheet__grab { width:38px; height:4px; border-radius:999px; background:var(--line); margin:0 auto 14px; }
@media (min-width: 640px){ .sheet__grab { display:none; } }
.sheet__panel h5 { font-size:17px; font-weight:700; margin-bottom:6px; }
.sheet__panel p { font-size:13.5px; color:var(--sub); line-height:1.6; margin-bottom:18px; }
.sheet__row { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.sheet__x { position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--sub); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.sheet__x:hover { background:var(--btn-soft); color:var(--ink); }
body.is-locked { overflow:hidden; }

/* Drawer — side panel for filters and settings */
.drawer[hidden] { display:none; }
.drawer { position:fixed; inset:0; z-index:200; }
.drawer__backdrop { position:absolute; inset:0; background:rgba(12,12,14,.45); animation:fadeIn .18s ease both; }
.drawer__panel { position:absolute; top:0; right:0; bottom:0; width:min(360px, 88vw); background:var(--surface);
  border-left:1px solid var(--line); padding:20px; overflow-y:auto;
  box-shadow:-20px 0 60px rgba(0,0,0,.22); animation:drawerIn .24s cubic-bezier(.2,.8,.25,1) both; }

/* Toasts */
.toasts { position:fixed; left:0; right:0; bottom:14px; z-index:300; display:grid; gap:8px;
  justify-items:center; pointer-events:none; padding:0 14px; }
@media (min-width: 640px){ .toasts { left:auto; right:16px; justify-items:end; } }
.toast { pointer-events:auto; display:flex; align-items:center; gap:10px; max-width:min(420px, 92vw);
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 15px;
  box-shadow:0 12px 34px rgba(0,0,0,.18); font-size:13.5px; color:var(--ink); line-height:1.45;
  animation:toastIn .22s cubic-bezier(.2,.8,.25,1) both; }
.toast[data-leaving] { animation:toastOut .18s ease both; }
.toast svg { flex:0 0 auto; }
.toast--ok svg { color:var(--ok); }
.toast--err svg { color:var(--brand); }
.toast--info svg { color:var(--icon-muted); }

/* Motion. One easing, one distance, and nothing moves on hover. */
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes sheetUp  { from { transform:translateY(14px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes sheetIn  { from { transform:scale(.97); opacity:0 }      to { transform:none; opacity:1 } }
@keyframes drawerIn { from { transform:translateX(18px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes toastIn  { from { transform:translateY(8px); opacity:0 }  to { transform:none; opacity:1 } }
@keyframes toastOut { to   { transform:translateY(6px); opacity:0 } }

/* Scroll reveal — entrance only, never on scroll-back, and completely off
   when the reader asked for less motion. */
[data-reveal] { opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.25,1); }
[data-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .sheet__panel, .sheet__backdrop, .drawer__panel, .drawer__backdrop, .toast { animation:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   COMPARISON TABLE v2 — a real table system, not stacked accordions.
   The Vodlix column is a dark rail running the full height of the table —
   the eye finds "our column" before reading a single row. Desktop is a
   strict 3-column grid; on a phone the feature name takes its own row and
   the two value cells sit under a sticky mini-header, so a tick is never
   floating without context.
   ══════════════════════════════════════════════════════════════════════ */
.ctable { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
.ctable__grid { display:grid; grid-template-columns:1fr 1fr; }
@container (min-width: 680px){ .ctable__grid { grid-template-columns:1.5fr 1fr 1fr; } }

/* Sticky column header — the phone keeps it while scrolling rows */
.ctable__head { display:grid; grid-template-columns:1fr 1fr; position:sticky; top:calc(var(--navh)); z-index:5;
  background:var(--surface); border-bottom:1px solid var(--line); }
@container (min-width: 680px){ .ctable__head { grid-template-columns:1.5fr 1fr 1fr; } }
.ctable__corner { display:none; padding:16px 20px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); align-self:center; }
@container (min-width: 680px){ .ctable__corner { display:block; } }
.ctable__col { padding:14px 12px; text-align:center; display:grid; gap:2px; justify-items:center; }
.ctable__col b { font-size:15px; font-weight:700; }
.ctable__col span { font-size:11.5px; color:var(--faint); }
/* The Vodlix rail — the RED CAP, picked from the chat mockups. Brand
   appears exactly once, as the column's header; the body below carries a
   whisper of wash. Colour where it means something, table stays clean. */
.ctable__col--us { background:var(--brand); border-radius:12px 12px 0 0; }
.ctable__col--us b { font-family:var(--ff-display); color:#fff; }
.ctable__col--us span { color:rgba(255,255,255,.78); }

/* Category divider spans everything */
.ctable__cat { grid-column:1 / -1; display:flex; align-items:center; gap:10px; padding:18px 20px 10px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.ctable__cat::after { content:""; flex:1; height:1px; background:var(--line); }
.ctable__cat em { font-style:normal; color:var(--accent-ink); font-variant-numeric:var(--num); letter-spacing:0; }

/* Rows */
.ctable__f { grid-column:1 / -1; padding:12px 20px 2px; font-size:14px; font-weight:600; color:var(--ink); }
.ctable__f small { display:block; font-size:12.5px; font-weight:400; color:var(--faint); margin-top:2px; line-height:1.5; }
@container (min-width: 680px){
  .ctable__f { grid-column:auto; padding:13px 20px; border-bottom:1px solid var(--line); }
}
.ctable__v { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 12px 14px;
  font-size:12.5px; font-weight:600; border-bottom:1px solid var(--line); }
@container (min-width: 680px){ .ctable__v { padding:13px 12px; } }
.ctable__v--us { color:var(--ink); font-weight:700; background:var(--cap-wash, rgba(230,29,44,.045)); }
:root[data-mode="dark"] .ctable__v--us { --cap-wash:rgba(230,29,44,.09); }
.ctable__grid > .ctable__v--us:last-child { border-bottom:0; }

/* Value marks — filled circles, not bare strokes. Readable at arm's length. */
.mark { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; flex:0 0 auto; }
/* A 12px glyph at stroke 2 renders ~1px — too faint to carry meaning.
   CSS stroke-width beats the SVG attribute, so every mark sharpens here. */
.mark svg { stroke-width:3; }
/* Solid fill + white glyph — the construction that reads at arm's length.
   The tick colour is a TOKEN with two sanctioned values, switched by the
   floating "Tick" toggle: green (default) or ink. Red is brand, never
   status; partial is solid amber; "no" stays the quietest thing in the row. */
.mark--yes { background:var(--mark-yes-bg, #16c150); color:var(--mark-yes-ink, #fff); }
:root[data-marks="ink"] .mark--yes, [data-marks="ink"] .mark--yes {
  background:var(--mark-ink-bg, var(--ink)); color:var(--mark-ink-glyph, var(--surface)); }
.mark--no { background:var(--track); color:var(--icon-muted); }
.mark--part { background:#eab308; color:#fff; }
/* Ink ticks on a dark surface must invert, or they vanish into the card. */
.pv1__card--ink, .on-dark { --mark-ink-bg:#f5f5f7; --mark-ink-glyph:#101014; }

.ctable__v i { font-style:normal; }
.ctable__v--no i { color:var(--faint); font-weight:500; }
/* Footer row of the table: repeat the CTA where the decision happens */
.ctable__end { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; }
@container (min-width: 680px){ .ctable__end { grid-template-columns:1.5fr 1fr 1fr; } }
.ctable__end > div { padding:16px 12px; display:flex; justify-content:center; }
.ctable__end .spacer { display:none; }
@container (min-width: 680px){ .ctable__end .spacer { display:block; } }
.ctable__end .us { background:var(--cap-wash, rgba(230,29,44,.045)); border-radius:0 0 12px 12px; }
.ctable__end .us .btn { background:var(--brand); border-color:var(--brand); color:#fff; }
.ctable__end .us .btn:hover { background:var(--brand-hover); border-color:var(--brand-hover); }

/* ══════════════════════════════════════════════════════════════════════
   PRICING VARIANTS
   ══════════════════════════════════════════════════════════════════════ */
/* V1 — cards, but the featured plan is an INK CARD. */
.pv1 { display:grid; gap:14px; align-items:stretch; }
@container (min-width: 860px){ .pv1 { grid-template-columns:repeat(3,1fr); } }
.pv1__card { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:26px 24px;
  display:grid; gap:0; align-content:start; position:relative; }
.pv1__card--ink { background:#101014; border-color:#101014; color:#f5f5f7; }
@container (min-width: 860px){ .pv1__card--ink { margin:-14px 0; padding-top:40px; padding-bottom:40px; } }
.pv1__tag { position:absolute; top:16px; right:18px; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--brand); color:#fff; }
.pv1__name { font-family:var(--ff-display); font-size:15px; font-weight:700; }
.pv1__for { font-size:12.5px; color:var(--faint); margin-top:2px; }
.pv1__card--ink .pv1__for { color:#9b9ba7; }
.pv1__amount { font-family:var(--ff-display); font-size:44px; font-weight:700; letter-spacing:var(--h-tracking);
  font-variant-numeric:var(--num); margin-top:16px; line-height:1; }
.pv1__amount sub { font-size:13px; font-weight:500; color:var(--faint); vertical-align:baseline; }
.pv1__card--ink .pv1__amount sub { color:#9b9ba7; }
.pv1__feats { list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:9px; }
.pv1__card--ink .pv1__feats { border-top-color:#26262c; }
.pv1__feats li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.5; }
.pv1__feats .mark { width:19px; height:19px; margin-top:0; }
.pv1__feats li.off { color:var(--faint); }
.pv1__card .btn { width:100%; margin-top:20px; }

/* V2 — the ledger. One sheet, plans as columns, prices in the header. */
.pv2 { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
.pv2__scroll { overflow-x:auto; scrollbar-width:thin; }
.pv2 table { width:100%; border-collapse:collapse; min-width:640px; }
.pv2 th, .pv2 td { padding:13px 18px; border-bottom:1px solid var(--line); font-size:13.5px; text-align:center; }
.pv2 th:first-child, .pv2 td:first-child { text-align:left; position:sticky; left:0; background:var(--surface);
  box-shadow:1px 0 0 var(--line); min-width:150px; }
.pv2 thead th { vertical-align:bottom; padding-top:22px; }
.pv2__plan { display:grid; gap:2px; justify-items:center; }
.pv2__plan i { font-style:normal; font-size:12px; font-weight:600; color:var(--faint); letter-spacing:.04em; text-transform:uppercase; }
.pv2__plan b { font-family:var(--ff-display); font-size:30px; font-weight:700; letter-spacing:var(--h-tracking);
  font-variant-numeric:var(--num); }
.pv2__plan b sub { font-size:12px; font-weight:500; color:var(--faint); }
.pv2__plan .btn { margin-top:8px; }
.pv2 th[data-hot], .pv2 td[data-hot] { background:var(--brand-tint); }
.pv2 thead th[data-hot] { border-top:2px solid var(--brand); }
.pv2 tbody tr:last-child td { border-bottom:0; }
.pv2 td .mark { vertical-align:middle; }

/* V3 — pick a plan, see one plan. Rail + detail. */
.pv3 { display:grid; gap:16px; }
@container (min-width: 860px){ .pv3 { grid-template-columns:280px 1fr; align-items:start; } }
.pv3__rail { display:grid; gap:8px; }
.pv3__opt { text-align:left; font:inherit; cursor:pointer; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); padding:16px 18px; display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  align-items:center; transition:border-color .15s ease, background .15s ease; }
.pv3__opt:hover { border-color:var(--icon-muted); }
.pv3__opt[aria-selected="true"] { background:var(--btn-soft); border-color:var(--line); }
.pv3__opt b { font-size:14.5px; font-weight:700; }
.pv3__opt i { font-style:normal; grid-row:span 2; font-family:var(--ff-display); font-size:20px; font-weight:700;
  font-variant-numeric:var(--num); }
.pv3__opt span { font-size:12px; color:var(--faint); }
.pv3__detail { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:28px; display:grid; gap:18px; }
.pv3__detail[hidden] { display:none; }
.pv3__detail header { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pv3__detail h3 { font-family:var(--ff-display); font-size:22px; font-weight:700; letter-spacing:var(--h-tracking); }
.pv3__detail .amt { font-family:var(--ff-display); font-size:36px; font-weight:700; font-variant-numeric:var(--num); letter-spacing:var(--h-tracking); }
.pv3__detail .amt sub { font-size:13px; font-weight:500; color:var(--faint); }
.pv3__cols { display:grid; gap:8px 22px; }
@container (min-width: 640px){ .pv3__cols { grid-template-columns:1fr 1fr; } }
.pv3__cols div { display:flex; gap:9px; align-items:center; font-size:13.5px; }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER VARIANTS
   ══════════════════════════════════════════════════════════════════════ */
/* F1 — the statement. One question, one input, six links. */
.f1 { background:#101014; color:#fff; padding:56px 0 0; }
.f1 h2 { font-family:var(--ff-display); font-size:clamp(30px, 5.5cqi, 52px); font-weight:700;
  letter-spacing:var(--h-tracking); line-height:1.08; max-width:16ch; }
.f1 h2 em { font-style:normal; color:var(--brand); }
.f1__form { display:grid; gap:8px; max-width:420px; margin-top:24px; }
@container (min-width: 560px){ .f1__form { grid-template-columns:1fr auto; } }
.f1__form input { font:inherit; font-size:14.5px; color:#fff; padding:13px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); outline:none; }
.f1__form input::placeholder { color:#71717c; }
.f1__form input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(230,29,44,.22); }
.f1__meta { display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding:20px 0 26px; }
.f1__links { display:flex; flex-wrap:wrap; gap:6px 22px; }
.f1__links a { color:#c6c6cf; text-decoration:none; font-size:13px; }
.f1__links a:hover { color:#fff; }
.f1__legal { font-size:12px; color:#71717c; }

/* F2 — the quiet one. Light, hairline, links in one breath. */
.f2 { background:var(--bg); border-top:1px solid var(--line); padding:34px 0 26px; }
.f2__top { display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center; justify-content:space-between; }
.f2__logo img { height:22px; display:block; }
.f2__nav { display:flex; flex-wrap:wrap; gap:4px 22px; }
.f2__nav a { font-size:13.5px; font-weight:500; color:var(--ink); text-decoration:none; }
.f2__nav a:hover { color:var(--accent-ink); }
.f2__bar { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--faint); }
.f2__bar .d-footer__social { margin:0; }
.f2__bar .d-footer__social a { border-color:var(--line); color:var(--sub); width:28px; height:28px; }
.f2__bar .d-footer__social a:hover { border-color:var(--accent-ink); color:var(--accent-ink); }

/* F3 — the monogram. Slim links, then the wordmark AS the footer. */
.f3 { background:#101014; color:#fff; padding:44px 0 0; overflow:hidden; }
.f3__grid { display:flex; flex-wrap:wrap; gap:18px 44px; justify-content:space-between; align-items:flex-start; }
.f3__brand { max-width:250px; display:grid; gap:14px; justify-items:start; }
.f3__brand p { font-size:13px; color:#9b9ba7; line-height:1.6; }
.f3__cols { display:flex; flex-wrap:wrap; gap:8px 44px; }
.f3__cols a { display:block; font-size:13px; color:#c6c6cf; text-decoration:none; padding:4px 0; }
.f3__cols a:hover { color:#fff; }
.f3__cols h6 { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#71717c; margin-bottom:6px; }
.f3__bar { display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; font-size:12px; color:#71717c;
  border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding:16px 0 8px; }
.f3__mark { display:block; width:100%; height:auto; margin-top:8px; margin-bottom:-2%; opacity:.999; }
.f3__mark img { display:block; width:100%; height:auto; transform:translateY(12%); }
/* F4 — the same monogram footer WITHOUT the bleeding edge wordmark: it
   simply ends on the legal bar. One modifier, no duplicated block. */
.f3--grounded { padding-bottom:10px; }
.f3--grounded .f3__bar { padding-bottom:14px; }

/* ── F5 "the masthead" ────────────────────────────────────────────────
   Brand moves OUT of the left column into a full-width band above the
   links, which frees the row into three zones: details | links | legal.
   Mobile-first: everything stacks; the three zones and the inner link
   columns only appear when the container has room. */
.f5 { background:#101014; color:#fff; padding:38px 0 10px; }
.f5__top { display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:space-between;
  padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.1); }
.f5__id { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.f5__id img { height:26px; display:block; }
.f5__id p { font-size:13px; color:#9b9ba7; line-height:1.55; max-width:44ch; }
.f5__zones { display:grid; gap:28px; padding-top:26px; }
/* Links now own the full width — six columns, no side rail. */
.f5__links { padding-top:26px; }
/* The company strip: contact details inline above the legal bar, with
   the brand social marks opposite. */
.f5__strip { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1); margin-top:30px; padding-top:20px; }
.f5__contact { display:flex; flex-wrap:wrap; align-items:center; gap:9px 20px; }
.f5__coname { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#71717c; }
.f5__contact a, .f5__contact em { display:inline-flex; align-items:center; gap:7px; font-style:normal;
  font-size:12.5px; color:#c6c6cf; text-decoration:none; }
.f5__contact a:hover { color:#fff; }
.f5__contact svg { flex:0 0 auto; color:#71717c; }
/* Brand marks: Simple Icons glyphs (solid fill, no stroke) in a hairline
   circle that inverts on hover. */
.f5__social { display:flex; gap:8px; margin:0; }
.f5__social a { display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; border:1px solid rgba(255,255,255,.16); color:#c6c6cf; transition:.15s ease; }
.f5__social svg { width:14px; height:14px; display:block; fill:currentColor; }
.f5__social a:hover { background:#fff; border-color:#fff; color:#101014; }
.f5__h { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#71717c; margin-bottom:12px; }
.f5__det { display:grid; gap:11px; }
.f5__det a, .f5__det p { display:flex; align-items:flex-start; gap:9px; font-size:13px;
  color:#c6c6cf; text-decoration:none; line-height:1.5; }
.f5__det svg { flex:0 0 auto; margin-top:2px; color:#71717c; }
.f5__det a:hover { color:#fff; }
.f5__det .d-footer__social { margin-top:16px; }
.f5__det .d-footer__social a { border-color:rgba(255,255,255,.16); color:#c6c6cf; }
.f5__det .d-footer__social a:hover { border-color:#fff; color:#fff; }
/* The closing bar: entity line, legal rail, locale. Three parts on one
   rule, wrapping to stacked rows on a phone. Legal lives HERE, never as
   a column — it is fine print, not navigation. */
.f5__bar { display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1); margin-top:32px; padding:18px 0 8px; }
.f5__co { font-size:12px; color:#71717c; line-height:1.5; }
.f5__co b { color:#9b9ba7; font-weight:600; }
.f5__rail { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
.f5__rail a { position:relative; font-size:12px; color:#9b9ba7; text-decoration:none; }
.f5__rail a:hover { color:#fff; }
.f5__rail a + a::before { content:"·"; position:absolute; left:-8px; color:#3a3a44; }
.f5__loc { display:flex; align-items:center; gap:7px; font-size:12px; color:#71717c; }
.f5__loc svg { color:#5a5a64; }
@container (min-width: 620px) { .f5__links.fcols { grid-template-columns:repeat(2,1fr); gap:20px; } }
@container (min-width: 860px) { .f5__links.fcols { grid-template-columns:repeat(3,1fr); gap:22px; } }
@container (min-width: 1120px) { .f5__links.fcols { grid-template-columns:repeat(6,1fr); gap:18px; } }
@container (min-width: 760px) {
  .f5__zones { grid-template-columns:225px minmax(0,1fr); gap:44px; }
  /* 2x2 first — but that ragged second row leaves a hole under the
     shortest group, so the link zone goes to ONE row as soon as it fits. */
  .f5__zones .fcols { grid-template-columns:repeat(2,1fr); gap:18px 24px; align-content:start; }
}
@container (min-width: 1040px) {
  .f5__zones .fcols { grid-template-columns:repeat(3,1fr); gap:20px; }
}
@container (min-width: 1180px) {
  .f5__zones { grid-template-columns:205px minmax(0,1fr); gap:40px; }
  .f5__zones .fcols { grid-template-columns:repeat(5,1fr); gap:18px; }
}

/* Variant page scaffolding */
.vlabel { display:flex; align-items:baseline; gap:12px; margin:44px 0 16px; }
.vlabel b { font-family:var(--ff-display); font-size:19px; font-weight:700; letter-spacing:var(--h-tracking); }
.vlabel span { font-size:13px; color:var(--sub); }
.vlabel .k { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--accent-ink); text-transform:uppercase; }

/* ── Pricing controls — tabs, currency, period. One bar, every variant. ──
   On a phone the tab strip scrolls and the two switches share a row. */
.pctrl { display:grid; gap:12px; margin-bottom:22px; }
@container (min-width: 820px){ .pctrl { grid-template-columns:1fr auto auto; align-items:center; } }
.pctrl__tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:0 20px 2px; }
@container (min-width: 820px){ .pctrl__tabs { margin:0; padding:0; } }
.pctrl__tabs::-webkit-scrollbar { display:none; }
.pctrl__tabs button { flex:0 0 auto; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  padding:9px 17px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  color:var(--sub); white-space:nowrap; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.pctrl__tabs button:hover { color:var(--ink); background:var(--btn-soft); }
.pctrl__tabs button[aria-selected="true"] { background:var(--btn-bg-default); border-color:var(--btn-bg-default); color:var(--btn-ink-default); }
.pctrl__row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pane[hidden] { display:none; }

/* PAYG card — rates, not a monthly price */
.payg { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:26px 24px; display:grid; gap:16px; align-content:start; }
.payg h5 { font-family:var(--ff-display); font-size:16px; font-weight:700; }
.payg p { font-size:13px; color:var(--sub); line-height:1.55; }
.payg__rates { display:grid; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.payg__rates div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:11px 15px;
  font-size:13.5px; border-bottom:1px solid var(--line); }
.payg__rates div:last-child { border-bottom:0; }
.payg__rates b { font-family:var(--ff-display); font-size:16px; font-variant-numeric:var(--num); }
.payg__rates span { color:var(--sub); }
.payg__zero { font-family:var(--ff-display); font-size:36px; font-weight:700; letter-spacing:var(--h-tracking); }
.payg__zero sub { font-size:13px; font-weight:500; color:var(--faint); }

/* ── Footer link columns with a mobile accordion ─────────────────────
   The URLs stay — discovery matters — but on a phone each column is a
   collapsed group instead of today's four stacked lists. On wider screens
   the same markup locks open as plain columns. */
.fcols { display:grid; gap:4px; }
@container (min-width: 760px){ .fcols { grid-template-columns:repeat(4,1fr); gap:20px; } }
.fgroup { border-bottom:1px solid var(--fg-line, rgba(255,255,255,.12)); }
@container (min-width: 760px){ .fgroup { border-bottom:0; } }
.fgroup__btn { width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px;
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-head, #fff); background:none; border:0; cursor:pointer; padding:14px 2px; text-align:left; }
.fgroup__btn svg { color:var(--fg-dim, #71717c); transition:transform .18s ease; flex:0 0 auto; }
.fgroup__btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.fgroup__body { display:grid; gap:2px; padding:0 2px 14px; }
.fgroup__body[hidden] { display:none; }
.fgroup__body a { font-size:13.5px; color:var(--fg-link, #c6c6cf); text-decoration:none; padding:5px 0; }
.fgroup__body a:hover { color:var(--fg-head, #fff); }
@container (min-width: 760px){
  .fgroup__btn { cursor:default; pointer-events:none; padding:0 0 10px; }
  .fgroup__btn svg { display:none; }
  .fgroup__body[hidden] { display:grid; }   /* columns lock open with room */
}
/* Light-footer palette for the group component */
.f2 .fgroup, .fcols--light .fgroup { --fg-line:var(--line); --fg-head:var(--ink); --fg-link:var(--sub); --fg-dim:var(--faint); }
.fcols--light .fgroup__body a:hover { color:var(--accent-ink); }


/* ── Icons on dark surfaces — regardless of page mode ─────────────────
   The rule: icon colour follows the SURFACE it sits on, not the page.
   On white the tints stay soft; on ink the same values turn to sludge,
   so hue and opacity both lift. `.on-dark` applies the set to any future
   dark panel without new CSS. */
.pv1__card--ink, .on-dark {
  --ok:#39e575; --ok-tint:rgba(57,229,117,.24);
  --part:#facc15; --part-tint:rgba(250,204,21,.18);
  --icon-muted:#c6c6cf; --track:rgba(255,255,255,.16);
}

/* Plan-group tabs, bar style — the alternative to the pills. Text on a
   hairline with a 2px ink underline; the strip still scrolls on a phone. */
.pctrl__tabs--bar { gap:0; border-bottom:1px solid var(--line); padding-bottom:0; }
.pctrl__tabs--bar button { border:0; background:transparent; border-radius:0; padding:11px 16px;
  font-size:14px; color:var(--sub); border-bottom:2px solid transparent; margin-bottom:-1px; }
.pctrl__tabs--bar button:hover { background:transparent; color:var(--ink); }
.pctrl__tabs--bar button[aria-selected="true"] { background:transparent; color:var(--ink); border-bottom-color:var(--ink); }

/* The full comparison table — every plan, every marketing feature, one
   sheet. Reuses the ledger; adds group rows and a wider floor. */
.pvfull table { min-width:880px; }
.pvfull__cat td { background:var(--bg) !important; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); text-align:left !important; padding:14px 18px 8px; }
.pvfull tbody td { font-size:13px; }

/* ══════════════════════════════════════════════════════════════════════
   RIBBON HERO — an original take on the swept-ribbon hero.

   Reference technique (stripe.com/gb, inspected 2026-08-06): a WebGL
   canvas, 2× DPR, with a static PNG fallback. None of their code is used
   here — this is our own Canvas 2D implementation of the same idea, in
   the Vodlix palette, so it stays inside the no-build constraint.

   How ours works: ~26 "strands", each a ribbon whose spine is a sum of
   two sines and whose thickness pinches at both ends. The whole field is
   rotated so it sweeps corner to corner. Everything is painted into a
   half-scale offscreen buffer and upscaled — that IS the blur, and it
   costs a quarter of the pixels.

   Gradient stays hero-only (§11): this is a hero component.
   ══════════════════════════════════════════════════════════════════════ */
.ribbon { position:relative; isolation:isolate; overflow:hidden; background:var(--surface); }
.ribbon__canvas { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
/* Fallback + first-paint surface: a still of the same palette, so the
   hero is never empty before JS runs, under reduced motion, or if the
   2D context is refused. */
.ribbon__still { position:absolute; inset:0; z-index:0; background:
  radial-gradient(60% 80% at 92% 6%, rgba(248,148,54,.8) 0%, transparent 55%),
  radial-gradient(65% 75% at 80% 46%, rgba(230,29,44,.8) 0%, transparent 58%),
  radial-gradient(55% 65% at 99% 78%, rgba(238,171,110,.7) 0%, transparent 60%); }
.ribbon__canvas + .ribbon__still { transition:opacity .6s ease; }
.ribbon[data-live="1"] .ribbon__still { opacity:0; }
.ribbon__inner { position:relative; z-index:1; }

/* Content sits left; the ribbon owns the right. Under 900px the ribbon
   moves behind the copy and drops opacity so the type stays readable. */
.ribbon__copy { max-width:34rem; padding:64px 0 72px; }
.ribbon__copy h1 { font-family:var(--ff-display); font-size:clamp(32px, 6cqi, 56px); font-weight:700;
  line-height:1.08; letter-spacing:var(--h-tracking); color:var(--ink); }
.ribbon__copy h1 em { font-style:normal; color:var(--brand); }
.ribbon__copy p { font-size:var(--fs-lede); color:var(--ink); line-height:1.55; margin:14px 0 22px; max-width:44ch; }
.ribbon__eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--sub); margin-bottom:16px; }
.ribbon__eyebrow b { color:var(--ink); font-weight:600; font-variant-numeric:var(--num); }
@media (max-width: 900px){
  /* The sheet becomes a corner wash behind full-width copy. Kept strong
     enough to read as brand, light enough to keep the type crisp. */
  .ribbon__canvas, .ribbon__still { opacity:.6; }
  .ribbon__copy { padding:40px 0 48px; }
}

/* ── Ribbon tuner — review scaffolding, not a site component ────────── */
.tuner { position:fixed; right:14px; top:90px; z-index:120; width:264px; max-height:calc(100vh - 180px);
  overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px; box-shadow:0 14px 40px rgba(0,0,0,.18); display:grid; gap:12px; }
@media (max-width: 1000px){ .tuner { position:static; width:auto; max-height:none; box-shadow:none; margin:16px 20px; } }
.tuner h6 { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.tuner label { display:grid; gap:5px; font-size:12px; font-weight:600; color:var(--ink); }
.tuner label span b { float:right; font-variant-numeric:var(--num); color:var(--sub); font-weight:600; }
.tuner input[type="range"] { width:100%; }
.tuner select { font:inherit; font-size:13px; padding:7px 10px; border-radius:9px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); }
.tuner .cols { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.tuner input[type="color"] { width:100%; height:34px; padding:2px; border:1px solid var(--line);
  border-radius:9px; background:var(--bg); cursor:pointer; }
.tuner .bgrow { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.tuner .out { font-family:monospace; font-size:10.5px; line-height:1.5; background:var(--btn-soft);
  border-radius:10px; padding:10px; word-break:break-all; max-height:110px; overflow-y:auto; color:var(--sub); }

/* ══════════════════════════════════════════════════════════════════════
   LIVE HERO — "the product, running". A real Vodlix player playing in
   the hero, its glow tinting the page, a poster rail that swaps one tile
   every few seconds, a ticking delivery counter, and a card that leans
   toward the pointer. Alive = something is playing.
   ══════════════════════════════════════════════════════════════════════ */
.lh { position:relative; overflow:hidden; background:var(--bg); }
.lh__glow { position:absolute; right:-10%; top:-20%; width:60vw; height:60vw; max-width:760px; max-height:760px;
  border-radius:50%; opacity:0; transition:background 2.4s ease, opacity 1.6s ease; pointer-events:none; }
.lh__grid { position:relative; display:grid; gap:34px; align-items:center; padding:56px 0 64px; }
@container (min-width: 880px){ .lh__grid { grid-template-columns:1.05fr 1fr; } }
.lh__copy h1 { font-family:var(--ff-display); font-size:clamp(30px, 5.2cqi, 50px); font-weight:700;
  line-height:1.1; letter-spacing:var(--h-tracking); color:var(--ink); }
.lh__copy h1 em { font-style:normal; color:var(--brand); }
.lh__copy p { font-size:var(--fs-lede); color:var(--ink); line-height:1.55; margin:14px 0 20px; max-width:42ch; }
.lh__eyebrow { font-size:13px; color:var(--sub); margin-bottom:14px; }
.lh__eyebrow b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

.lh__stage { perspective:1000px; }
.lh__tilt { transition:transform .35s ease; transform-style:preserve-3d; }
.lh__player { position:relative; border-radius:16px; overflow:hidden; background:#101014;
  box-shadow:0 24px 60px rgba(16,16,20,.25); aspect-ratio:16/9; }
.lh__player video, .lh__player canvas, .lh__player .vodlix-player { width:100%; height:100%; display:block; object-fit:cover; }
.lh__badge { position:absolute; top:10px; right:12px; z-index:5; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  color:#fff; background:var(--brand); border-radius:999px; padding:3px 9px; }
.lh__badge i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#fff; margin-right:5px;
  animation:lhblink 1.6s ease infinite; }
@keyframes lhblink { 0%,100%{opacity:1} 50%{opacity:.35} }
.lh__title { position:absolute; left:12px; top:10px; z-index:5; font-size:11.5px; font-weight:600; color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.5); }

.lh__rail { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:12px; }
.lh__rail div { aspect-ratio:2/3; border-radius:8px; transition:opacity .6s ease, background 1s ease; }

@media (prefers-reduced-motion: reduce){
  .lh__tilt { transition:none; transform:none !important; }
  .lh__badge i { animation:none; }
}
@media (max-width: 880px){
  .lh__grid { padding:40px 0 48px; }
}

/* Live hero background ribbon — the saved silk resting behind the product */
.lh__bg { position:absolute; inset:0; pointer-events:none; }
.lh__bg .ribbon__canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ── The constellation — what a customer gets, as live surfaces ─────── */
.ct { position:relative; padding-bottom:30px; }
/* The TV is a television: locked 16:9 frame. Content distributes
   vertically inside it so the shelf breathes at any width. */
.ct__tv { width:100%; aspect-ratio:16/9; display:flex; flex-direction:column;
  justify-content:space-evenly; background:#101014; border-radius:16px; padding:12px 14px;
  box-shadow:0 24px 60px rgba(16,16,20,.25); }
.ct__tv .ct__label { margin-bottom:4px; }
.ct__tv .ct__row { margin-bottom:0; min-height:0; }
@container (min-width: 720px){ .ct__tv { width:calc(100% - 78px); } }
.ct__tvbar { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:#fff; margin-bottom:10px; }
.ct__tvbar i { width:7px; height:7px; border-radius:50%; background:var(--brand); }
.ct__label { font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9b9ba7; margin:0 0 6px; }
.ct__label .ct__live { font-size:9px; color:#fff; background:var(--brand); border-radius:999px; padding:1px 7px; margin-left:6px; letter-spacing:.05em; }
.ct__row { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px; }
.ct__row:last-child { margin-bottom:0; }
.ct__row div { aspect-ratio:16/10; border-radius:6px; background:#1b1b21 center/cover no-repeat;
  transition:opacity .55s ease; }

.ct__phone { position:absolute; right:-4px; bottom:-6px; width:96px; background:#0c0c0e;
  border:2px solid #26262c; border-radius:16px; padding:6px 5px 7px; z-index:3;
  box-shadow:0 18px 44px rgba(16,16,20,.35); }
@container (min-width: 720px){ .ct__phone { right:0; top:40px; bottom:auto; width:120px; } }
.ct__reel { aspect-ratio:9/15; border-radius:10px; background:#1b1b21 center/cover no-repeat;
  position:relative; transition:opacity .4s ease; }
.ct__reelui { position:absolute; right:9px; bottom:34px; display:grid; gap:7px; color:#fff; z-index:2; }
.ct__reelui svg { filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.ct__reelcap { margin:6px 2px 0; font-size:8.5px; color:#9b9ba7; }

.ct__chips { display:contents; }
.ct__chip { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:11px 14px; min-width:158px; z-index:2; }
.ct__chip--aud { position:absolute; left:8px; bottom:2px; }
.ct__chip--pay { position:absolute; right:112px; bottom:-14px; transition:opacity .4s ease; }
@container (max-width: 719.9px){
  .ct { padding-bottom:0; }
  .ct__chips { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; padding-right:104px; }
  .ct__chip--aud, .ct__chip--pay { position:static; min-width:0; }
}
.ct__chip p { margin:0; }
.ct__k { font-size:10px; color:var(--faint); }
.ct__k b { color:var(--ok); font-weight:600; }
.ct__v { font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:1px !important; }
.ct__pay { font-size:12.5px; font-weight:600; margin-top:3px !important; display:flex; align-items:center; gap:6px; }
.ct__pay svg { color:var(--ok); flex:0 0 auto; }
.ct__dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#16c150; margin-right:5px; }

/* Logo wordmark fallback — shown only if the SVGs fail to load, so the
   header never renders a broken-image icon. */
.d-nav__wordmark { display:none; font-family:var(--ff-display); font-weight:700; font-size:18px;
  letter-spacing:.02em; color:var(--ink); }
.d-nav[data-look="hero"] .d-nav__wordmark { color:#fff; }
.d-nav__logo[data-fail] img { display:none !important; }
.d-nav__logo[data-fail] .d-nav__wordmark { display:inline; }

/* Organic poster tiles — drawn, not photographed. Each is a duotone card
   with display type; continue-watching carries a progress bar, live rows
   a LIVE chip. No image requests anywhere in the hero. */
.ct__row div { position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:5px 6px; }
.ct__row div b { font-family:var(--ff-display); font-size:7.5px; font-weight:700; color:#fff;
  line-height:1.15; letter-spacing:.01em; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.ct__prog { position:absolute; left:0; right:0; bottom:0; height:2.5px; background:rgba(255,255,255,.22); }
.ct__prog i { display:block; height:100%; background:#fff; opacity:.9; }
.ct__lc { position:absolute; top:4px; left:4px; font-size:6.5px; font-weight:700; color:#fff;
  background:var(--brand); border-radius:99px; padding:1px 5px; letter-spacing:.05em; }
.ct__reel { display:flex; align-items:flex-end; padding:8px; }
.ct__reel b { font-family:var(--ff-display); font-size:9.5px; font-weight:700; color:#fff;
  line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.4); position:relative; z-index:1; }
.ct__reel em { position:absolute; top:7px; left:7px; font-style:normal; font-size:6.5px; font-weight:700;
  color:#fff; background:rgba(255,255,255,.22); border-radius:99px; padding:1px 6px; letter-spacing:.06em; }

/* Watermark initial — the drawn key art inside every tile */
.ct__mark { position:absolute; top:4px; right:5px; font-style:normal; line-height:0;
  color:rgba(255,255,255,.42); pointer-events:none; }
.ct__mark svg { display:block; }
.ct__mark--reel { top:auto; bottom:30px; right:auto; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.38); }

/* ══════════════════════════════════════════════════════════════════════
   SCROLL STORY — one pinned dark stage, five chapters. On chapter change
   the current elements fly out (staggered) and the next set flies in;
   scrolling back reverses the direction. JS adds .story--live (desktop,
   motion allowed) or .story--static (mobile / reduced motion / no JS
   decision → the same five chapters as plain stacked sections).
   ══════════════════════════════════════════════════════════════════════ */
.story { position:relative; }
.story__copy { display:none; }
.story__stage { position:relative; background:#101014; border-radius:18px;
  box-shadow:0 24px 60px rgba(16,16,20,.25); overflow:hidden; }
.story__scene { padding:24px; display:flex; flex-direction:column; justify-content:center; gap:15px; }
.story__scap h3 { font-size:19px; letter-spacing:var(--h-tracking); color:#fff; margin-bottom:5px; }
.story__scap p { font-size:13.5px; color:#b9b9c3; line-height:1.6; max-width:52ch; }

/* stage furniture */
.story__tvbar { display:flex; align-items:center; gap:8px; font-size:12px; color:#d3d3dc; }
.story__tvbar i { width:8px; height:8px; border-radius:50%; background:var(--brand); }
.story__lbl { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#8f8f99; }
.story__livechip { background:var(--brand); color:#fff; font-size:9px; font-weight:800;
  border-radius:999px; padding:2px 7px; margin-left:7px; letter-spacing:.06em; vertical-align:1px; }
.story__row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.story__row > div { position:relative; aspect-ratio:16/10; border-radius:9px; overflow:hidden;
  display:flex; align-items:flex-end; padding:8px; }
.story__row b { font-size:10.5px; font-weight:700; color:#fff; line-height:1.2;
  text-shadow:0 1px 6px rgba(0,0,0,.4); }
.story__big { display:flex; justify-content:space-between; align-items:baseline; }
.story__big span { font-size:12px; color:#8f8f99; }
.story__big b { font-size:33px; color:#fff; letter-spacing:-0.02em; font-variant-numeric:var(--num); }
.story__bars { display:flex; align-items:flex-end; gap:7px; height:104px; }
.story__bars i { flex:1; border-radius:5px 5px 0 0; background:#343c52; display:block; }
.story__bars i.hot { background:var(--brand); }
.story__cap { font-size:11.5px; color:#8f8f99; line-height:1.55; }
.story__chips { display:flex; flex-wrap:wrap; gap:9px; }
.story__chipp { border-radius:10px; padding:9px 13px; font-size:12px; font-weight:600; color:#fff; }
.story__pbar { height:5px; border-radius:3px; background:#26262c; position:relative; }
.story__pbar i { position:absolute; left:0; top:0; bottom:0; width:58%; border-radius:3px; background:var(--brand); }
.story__pbar em { position:absolute; left:70%; top:-3px; width:3px; height:11px; border-radius:2px; background:#EF9F27; }
.story__prompt { background:#1a1a20; border-radius:10px; padding:11px 13px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.5; color:#d3d3dc; }
.story__caret { display:inline-block; width:7px; height:13px; background:#d3d3dc;
  vertical-align:-2px; margin-left:3px; animation:stCaret 1s steps(1) infinite; }
@keyframes stCaret { 50% { opacity:0; } }
.story__play { width:54px; height:54px; border-radius:50%; background:var(--brand);
  display:flex; align-items:center; justify-content:center; margin:0 auto; color:#fff; }
.story__meta { display:flex; justify-content:space-between; font-size:11px; color:#8f8f99; }

/* Mobile-first: the BASE presentation is the five chapters stacked
   inside the slab — what every phone gets, unconditionally. The pinned
   choreography exists only at >=861px, so a narrow viewport can never
   render a collapsed desktop stage regardless of what JS decides. */
.story__stage { padding:4px 0; }
.story__scene + .story__scene { border-top:1px solid rgba(255,255,255,.08); }

@media (min-width:861px) {
  .story--live { height:470vh; }
  .story--live .story__pin { position:sticky; top:0; height:100vh;
    display:flex; align-items:center; overflow:hidden; }
  .story--live .story__pin .wrap { width:100%; }
  .story--live .story__grid { display:grid; grid-template-columns:minmax(250px,330px) minmax(0,1fr);
    gap:clamp(32px,5vw,64px); align-items:center; }
  .story--live .story__copy { display:block; }
  .story--live .story__stage { padding:0; height:min(440px,60vh); }
  .story--live .story__scene { position:absolute; inset:0; pointer-events:none; border-top:0; }
  .story--live .story__scap { display:none; }

  .story--live .sv { opacity:0; transform:translate3d(70px,26px,0);
    transition:transform .6s cubic-bezier(.22,.9,.3,1), opacity .45s ease;
    transition-delay:calc(var(--i,0)*60ms); }
  .story--live.story--rev .sv { transform:translate3d(-70px,-26px,0); }
  .story--live .sv--grow { transform:translate3d(0,34px,0) scaleY(.2); transform-origin:50% 100%; }
  .story--live .sv--bloom { transform:translate3d(70px,26px,0) scale(.45); }
  .story--live .is-in .sv { opacity:1; transform:none; }
  .story--live .is-out .sv { opacity:0; transform:translate3d(-70px,-26px,0);
    transition-delay:calc(var(--i,0)*40ms); }
  .story--live.story--rev .is-out .sv { transform:translate3d(70px,26px,0); }
}

/* ══════════════════════════════════════════════════════════════════════
   SELL SECTIONS — customize / tracking / Vertex. Mobile-first: single
   column everywhere; the two-column split only appears at ≥861px.
   ══════════════════════════════════════════════════════════════════════ */
.sell { display:grid; gap:24px; }
.sell__eyebrow { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:10px; }
.sell__copy h2 { font-size:clamp(23px,2.6vw,32px); letter-spacing:var(--h-tracking); margin-bottom:12px; }
.sell__copy > p { font-size:15px; color:var(--sub); line-height:1.65; max-width:46ch; }
.sell__points { margin:14px 0 0; list-style:none; display:grid; gap:8px; }
.sell__points li { display:flex; gap:9px; font-size:13.5px; color:var(--sub); line-height:1.55; }
.sell__points svg { flex:0 0 auto; margin-top:2px; color:var(--ok); }
/* The same list as a standalone two-up grid (a "what's included" block). */
.sell__points--cols { max-width:880px; margin-left:auto; margin-right:auto; gap:14px; }
@media (min-width:640px) { .sell__points--cols { grid-template-columns:1fr 1fr; gap:16px 32px; } }
@media (min-width:861px) {
  .sell { grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(36px,5vw,72px); align-items:center; }
  .sell--flip .sell__demo { order:-1; }
}

/* customizer: a mini app that restyles itself from the chips below */
.cz__app { background:#101014; border-radius:18px; padding:14px; display:flex; flex-direction:column;
  gap:11px; --a:var(--brand); --r:12px; box-shadow:0 20px 50px rgba(16,16,20,.22); }
.cz__app--serif .cz__banner b, .cz__app--serif .cz__top span { font-family:Georgia,"Times New Roman",serif; }
.cz__top { display:flex; align-items:center; gap:8px; order:1; }
.cz__top i { width:9px; height:9px; border-radius:50%; background:var(--a); }
.cz__top span { font-size:12.5px; font-weight:700; color:#d3d3dc; flex:1; }
.cz__btn { background:var(--a); color:#fff; font-size:10.5px; font-weight:700; padding:5px 12px;
  border-radius:var(--r); transition:border-radius .35s; }
.cz__banner { order:2; border-radius:var(--r); padding:20px 16px; display:flex; align-items:center; gap:12px;
  background:linear-gradient(150deg, var(--a) 0%, rgba(16,16,20,.92) 130%); transition:border-radius .35s; }
.cz__banner b { display:block; font-size:16px; color:#fff; letter-spacing:-0.01em; }
.cz__banner span { font-size:11.5px; color:rgba(255,255,255,.75); }
.cz__banner > div { flex:1; }
.cz__play { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); color:#101014;
  display:flex; align-items:center; justify-content:center; }
.cz__shelf { order:3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.cz__shelf i { aspect-ratio:16/10; border-radius:var(--r); display:block; transition:border-radius .35s; }
.cz__app--shelf-first .cz__banner { order:4; }
.cz__app--nobanner .cz__banner { display:none; }
.cz__ctl { display:grid; gap:10px; margin-top:14px; }
.cz__grp { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cz__grp > span { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); min-width:62px; }
.cz__chip { font:inherit; font-size:12.5px; font-weight:600; min-height:36px; padding:7px 14px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; }
.cz__chip[aria-pressed="true"] { background:var(--btn-bg-default); color:var(--btn-ink-default);
  border-color:var(--btn-bg-default); }
.cz__dot { width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.cz__dot[aria-pressed="true"] { border-color:var(--ink); box-shadow:inset 0 0 0 2.5px var(--bg); }

/* tracking: dark panel, ticking KPIs, realtime event feed */
.trk__panel { background:#101014; border-radius:18px; padding:14px; box-shadow:0 20px 50px rgba(16,16,20,.22); }
.trk__kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.trk__kpi { background:#1a1a20; border-radius:10px; padding:10px 11px; }
.trk__kpi span { display:block; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#8f8f99; margin-bottom:3px; }
.trk__kpi b { font-size:16px; color:#fff; font-variant-numeric:var(--num); letter-spacing:-0.01em; }
.trk__feed { display:grid; gap:7px; min-height:232px; align-content:start; }
.trk__ev { display:flex; align-items:center; gap:10px; background:#16161b; border:1px solid #23232a;
  border-radius:10px; padding:9px 11px; animation:trkIn .45s cubic-bezier(.22,.9,.3,1) both; }
@keyframes trkIn { from { opacity:0; transform:translateY(-9px); } }
.trk__ev i { flex:0 0 auto; width:27px; height:27px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; color:#fff; }
.trk__ev b { display:block; font-size:12px; color:#f5f5f7; line-height:1.3; }
.trk__ev span { font-size:11px; color:#8f8f99; }
.trk__ev em { margin-left:auto; font-style:normal; font-size:10.5px; color:#8f8f99; white-space:nowrap; }

/* Vertex: subscriber card + lifecycle timeline that lights up */
.vx__card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:18px; }
.vx__head { display:flex; align-items:center; gap:12px; }
.vx__av { flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--brand-tint);
  color:var(--brand); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.vx__head b { display:block; font-size:15px; color:var(--ink); }
.vx__head span { font-size:12.5px; color:var(--faint); }
.vx__badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.vx__badge { font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px;
  background:var(--btn-soft); color:var(--ink); }
.vx__badge--ok { background:var(--ok-tint); color:var(--ink); }
.vx__stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0 4px; }
.vx__stat { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 11px; }
.vx__stat span { display:block; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); margin-bottom:2px; }
.vx__stat b { font-size:14.5px; color:var(--ink); font-variant-numeric:var(--num); }
.vx__tl { list-style:none; margin:12px 0 0; }
.vx__tl li { position:relative; padding:8px 0 8px 27px; font-size:13px; color:var(--faint);
  line-height:1.45; transition:color .3s; }
.vx__tl li::before { content:""; position:absolute; left:6.5px; top:0; bottom:0; width:2px; background:var(--line); }
.vx__tl li:first-child::before { top:50%; }
.vx__tl li:last-child::before { bottom:50%; }
.vx__tl li::after { content:""; position:absolute; left:1.5px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--line); transition:.3s; }
.vx__tl li b { font-weight:600; color:inherit; }
.vx__tl li.on { color:var(--ink); }
.vx__tl li.on::after { border-color:var(--brand); background:var(--brand-tint); }
.vx__tl li.on.ok::after { border-color:var(--ok); background:var(--ok-tint); }


/* ══ MEGA MENUS (desktop) — real vodlix.com content, Stripe-grade ══
   Anchored to the menu pill; each tab opens a panel of icon rows, the
   Features panel carries a Services side rail + view-all line. Hover or
   keyboard focus opens; the 10px padding-top keeps the hover chain
   unbroken between pill and panel. */
.vdd--mega { position:static; }
/* Panels are ANCHORED TO THEIR OWN TAB and clamped inside the menu pill
   — `--mega-left` is measured per tab by positionMegaPanels() below.
   They used to be centred on the bar (left:50% + translateX(-50%)),
   which put the Help panel ~236px away from the Help tab and let a wide
   panel hang past the pill entirely. The centred fallback stays as the
   custom-property default so the panel is still sane before JS runs. */
.vdd__mega { position:absolute; top:100%; left:var(--mega-left, 50%); z-index:70; padding-top:10px;
  transform:translateX(var(--mega-shift, -50%)) translateY(6px); opacity:0; visibility:hidden;
  transition:opacity .16s ease, transform .2s ease, visibility .16s; }
.vdd--mega:hover .vdd__mega, .vdd--mega:focus-within .vdd__mega {
  opacity:1; visibility:visible; transform:translateX(var(--mega-shift, -50%)); }
.vdd__box { background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:14px; box-shadow:0 24px 60px rgba(12,12,14,.16); }
[data-mode="dark"] .vdd__box { box-shadow:0 24px 60px rgba(0,0,0,.55); }
.vdd__cols { display:flex; gap:14px; align-items:stretch; }
.vdd__grid { display:grid; gap:2px 10px; flex:1; min-width:0; }
.vdd__item { display:flex; gap:11px; align-items:flex-start; padding:9px 10px; border-radius:999px;
  text-decoration:none; }
.vdd__item:hover { background:var(--btn-soft); }
.vdd__item i { flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--brand-tint); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.vdd__item b { display:block; font-size:13.5px; color:var(--ink); line-height:1.3; }
.vdd__item em { display:block; font-style:normal; font-size:12px; color:var(--faint); line-height:1.45; }
.vdd__aside { flex:0 0 188px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; }
.vdd__aside > b { display:block; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.vdd__aside a { display:block; font-size:13px; color:var(--ink); text-decoration:none;
  padding:7px 8px; border-radius:8px; }
.vdd__aside a:hover { background:var(--btn-soft); }
.vdd__ctaline { display:flex; align-items:center; justify-content:flex-end; gap:6px;
  margin-top:10px; padding-top:12px; border-top:1px solid var(--line);
  font-size:13px; font-weight:600; color:var(--brand); text-decoration:none; }
.vdd__ctaline:hover { color:var(--brand-hover); }