/* =========================================================================
   Home Viture — immersive gradient preview (2026-08)
   VITURE design language: Void #000 / Obsidian #0c0c0c grounds, one Aurora
   Wash (orange -> pink -> violet) + a Signal Blue gradient + Ultra Violet
   #581dff as the only color, big bold Inter, product-imagery-dominant, and
   fixed ambient gradient blooms that drift on scroll so sections flow into
   one another. Scoped to body.vt.
   ========================================================================= */

body.vt {
	--vt-void: #000000;
	--vt-obsidian: #0c0c0c;
	--vt-panel: #131316;
	--vt-slate: #5b5c5d;
	--vt-ash: #7e7e7f;
	--vt-violet: #581dff;
	--vt-white: #ffffff;
	--vt-text: #f3f3f5;
	--vt-muted: #a6a6ad;
	--vt-line: rgba(255,255,255,0.10);
	--vt-line-2: rgba(255,255,255,0.16);
	--vt-accent: #2f6bff;
	--vt-accent-rgb: 47,107,255;
	--vt-accent-tint: #9ec2ff;
	--vt-accent-tint-rgb: 120,160,255;
	--vt-accent-d: #2559e6;
	--vt-accent-l: #4a7dff;
	--vt-aurora: linear-gradient(120deg, #ff6a3d 0%, #ff3d77 40%, #a13dff 72%, #581dff 100%);
	--vt-signal: linear-gradient(150deg, var(--vt-accent) 0%, var(--vt-accent-tint) 100%);

	--vt-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--vt-max: 1320px;
	--vt-gutter: clamp(20px, 5vw, 56px);

	margin: 0;
	background: var(--vt-void);
	color: var(--vt-text);
	font-family: var(--vt-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: -0.011em;
	font-feature-settings: "ss01" on, "cv11" on;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
/* Sticky-header offset: the fixed announce bar + nav are ~102px tall, so
   in-page anchor jumps (#routes, #apis, #top ...) must land below them
   instead of tucking under the sticky header. */
html:has(body.vt) { scroll-padding-top: 116px; scroll-behavior: smooth; }
body.vt *, body.vt *::before, body.vt *::after { box-sizing: border-box; }
body.vt img { max-width: 100%; display: block; }
body.vt a { color: inherit; text-decoration: none; }
/* Admin-bar offset lives on .vt-topwrap only (see Nav section). A second
   offset here on the relative .vt-nav slid it out of the wrapper's painted
   background for logged-in users; removed 2026-09-01. */

/* -------------------------------------------------------------------------
   Ambient flow — fixed aurora + signal blooms behind everything
   ------------------------------------------------------------------------- */
body.vt .vt-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.vt .vt-bloom { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.34; will-change: transform; }
body.vt .vt-bloom--aurora { width: 60vw; height: 60vw; left: -16vw; top: -24vh; background: radial-gradient(circle at 40% 40%, rgba(var(--vt-accent-rgb),0.42), rgba(88,29,255,0.16) 50%, transparent 74%); }
body.vt .vt-bloom--signal { width: 58vw; height: 58vw; right: -20vw; top: 40vh; background: radial-gradient(circle, rgba(46,123,255,0.40), rgba(var(--vt-accent-rgb),0.14) 52%, transparent 74%); }
body.vt .vt-bloom--violet { width: 62vw; height: 62vw; left: 12vw; bottom: -34vh; background: radial-gradient(circle, rgba(60,90,255,0.34), rgba(88,29,255,0.12) 54%, transparent 76%); }
/* everything above the ambient */
body.vt .vt-nav, body.vt header.vt-hero, body.vt .vt-section,
body.vt .vt-statement, body.vt .vt-cta, body.vt .vt-footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { body.vt .vt-bloom { will-change: auto; } }

/* -------------------------------------------------------------------------
   Atoms
   ------------------------------------------------------------------------- */
body.vt .vt-wrap { width: 100%; max-width: var(--vt-max); margin: 0 auto; padding-left: var(--vt-gutter); padding-right: var(--vt-gutter); }

/* VITURE eyebrow: taller + slimmer (~1.6vw), light weight */
body.vt .vt-eyebrow { display: inline-block; font-size: clamp(16px, 1.6vw, 25px); font-weight: 400; letter-spacing: 0; line-height: 1.2; color: rgba(255,255,255,0.9); margin: 0 0 22px; }
body.vt .vt-eyebrow--signal { color: var(--vt-accent-tint); }

/* VITURE type: calm medium weight at large sizes, tight tracking */
body.vt .vt-display { font-weight: 500; font-size: clamp(46px, 6.6vw, 96px); line-height: 1.04; letter-spacing: -0.035em; margin: 0; }
body.vt .vt-heading { font-weight: 500; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
body.vt .vt-grad-text { background: var(--vt-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.vt .vt-grad-text--signal { background: var(--vt-signal); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons — rounded, aurora fill is the accent */
body.vt .vt-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--vt-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; padding: 15px 28px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease; }
body.vt .vt-btn--lg { padding: 19px 38px; font-size: 17.5px; }
body.vt .vt-btn--grad { background: var(--vt-aurora); background-size: 160% 160%; color: #fff; box-shadow: 0 10px 34px -12px rgba(161,61,255,0.6); }
body.vt .vt-btn--grad:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -12px rgba(161,61,255,0.75); }
body.vt .vt-btn--ghost { background: rgba(255,255,255,0.04); color: var(--vt-text); border-color: var(--vt-line-2); }
body.vt .vt-btn--ghost:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); }

body.vt .vt-ghostlink { font-size: 14px; font-weight: 500; color: var(--vt-muted); transition: color .2s ease; }
body.vt .vt-ghostlink:hover { color: var(--vt-white); }
body.vt .vt-textlink { display: inline-block; font-size: 15px; font-weight: 600; color: var(--vt-white); border-bottom: 2px solid; border-image: var(--vt-aurora) 1; padding-bottom: 3px; transition: opacity .2s ease; }
body.vt .vt-textlink--signal { border-image: var(--vt-signal) 1; }
body.vt .vt-textlink:hover { opacity: 0.7; }

body.vt a:focus-visible, body.vt button:focus-visible { outline: 2px solid #7fb0ff; outline-offset: 3px; border-radius: 6px; }

body.vt .vt-ph { position: relative; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 14px, transparent 14px 28px), var(--vt-panel); }
body.vt .vt-ph-note { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vt-slate); text-align: center; padding: 12px; }
body.vt .vt-ph-media { width: 100%; height: 100%; min-height: 220px; border-radius: inherit; }

body.vt .vt-section { padding: clamp(72px, 11vw, 150px) 0; }
body.vt .vt-head { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; }
body.vt .vt-head-sub { font-size: 18px; line-height: 1.55; color: var(--vt-muted); margin: 20px 0 0; }
/* Light contrast band (mirrors the .vt-net light treatment). Applied to the
   Native dealers region section; its image cards read well on the light field. */
body.vt .vt-lite { background: #eceef2; color: #14151a; }
body.vt .vt-lite .vt-eyebrow { color: rgba(20,21,26,0.55); }
body.vt .vt-lite .vt-heading { color: #14151a; }
body.vt .vt-lite .vt-head-sub { color: rgba(20,21,26,0.62); }
/* Cards on the light band read as white blocks (like the homepage picker). */
body.vt .vt-lite .vt-card { background: #fff; border-color: rgba(20,30,60,0.08); box-shadow: 0 30px 60px -46px rgba(20,30,60,0.4); }
body.vt .vt-lite .vt-card h3 { color: #14151a; }
body.vt .vt-lite .vt-card p { color: rgba(20,21,26,0.62); }
body.vt .vt-lite .vt-card-k { color: var(--vt-accent); }
body.vt .vt-lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--vt-muted); margin: 22px 0 26px; max-width: 46ch; }

/* Reveal */
body.vt .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
body.vt .reveal.d1 { transition-delay: .08s; } body.vt .reveal.d2 { transition-delay: .16s; }
body.vt .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { body.vt .reveal { opacity: 1; transform: none; transition: none; } }

/* -------------------------------------------------------------------------
   Nav
   ------------------------------------------------------------------------- */
/* Fixed top bar (announcement + nav): transparent over hero on load, white on scroll */
/* ONE background layer for the whole bar (announce + nav together). The
   scrolled color lives only here; children never paint their own bg, so the
   strip can never split into separately-fading sections. The load-state hero
   gradient sits on a pseudo-element and cross-fades via opacity (animatable),
   avoiding the gradient-to-solid snap. */
body.vt .vt-topwrap { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; transition: background-color .35s ease; }
body.vt .vt-topwrap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(4,5,14,0.82) 0%, rgba(4,5,14,0.55) 62%, rgba(4,5,14,0) 100%); opacity: 1; transition: opacity .35s ease; }
body.vt.admin-bar .vt-topwrap { top: 32px; }
@media (max-width: 782px) { body.vt.admin-bar .vt-topwrap { top: 46px; } }
body.vt .vt-topwrap.is-scrolled { background-color: #eceef2; }
body.vt .vt-topwrap.is-scrolled::before { opacity: 0; }

/* Announcement bar */
body.vt .vt-announce { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: rgba(255,255,255,0.86); transition: color .35s ease; }
body.vt .vt-announce span { color: #86b0ff; font-weight: 600; transition: color .35s ease; }
body.vt .vt-announce:hover span { text-decoration: underline; }
body.vt .vt-topwrap.is-scrolled .vt-announce { color: #23242a; }
body.vt .vt-topwrap.is-scrolled .vt-announce span { color: var(--vt-accent); }

/* Nav */
body.vt .vt-nav { position: relative; background: transparent; border-bottom: 1px solid transparent; transition: border-color .35s ease, box-shadow .35s ease; }
body.vt .vt-topwrap.is-scrolled .vt-nav { border-bottom-color: rgba(0,0,0,0.07); box-shadow: 0 10px 30px -18px rgba(0,0,0,0.45); }
body.vt .vt-nav-inner { max-width: var(--vt-max); margin: 0 auto; padding: 14px var(--vt-gutter) 4px; display: flex; align-items: center; gap: 24px; }
/* Full-color gold logo over the dark hero; darkened to black text on the light
   scrolled nav (the gold+white-text PNG has no legible reading on light gray). */
body.vt .vt-logo img { height: 56px; width: auto; }
/* Scrolled white bar swaps to the gold-dice + black-wordmark logo variant. */
body.vt .vt-logo .vt-logo-dark { display: none; }
body.vt .vt-topwrap.is-scrolled .vt-logo .vt-logo-light { display: none; }
body.vt .vt-topwrap.is-scrolled .vt-logo .vt-logo-dark { display: block; }
body.vt .vt-menu { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 40px); margin: 0 auto; }
body.vt .vt-menu a { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.82); text-shadow: 0 1px 12px rgba(0,0,0,0.4); transition: color .2s ease, text-shadow .35s ease; }
body.vt .vt-menu a:hover { color: #fff; }
body.vt .vt-topwrap.is-scrolled .vt-menu a { color: #34353b; text-shadow: none; }
body.vt .vt-topwrap.is-scrolled .vt-menu a:hover { color: #000; }
body.vt .vt-nav-right { display: flex; align-items: center; gap: 20px; }
body.vt .vt-nav-right .vt-ghostlink { color: rgba(255,255,255,0.82); text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
body.vt .vt-nav-right .vt-ghostlink:hover { color: #fff; }
body.vt .vt-topwrap.is-scrolled .vt-nav-right .vt-ghostlink { color: #34353b; text-shadow: none; }
body.vt .vt-topwrap.is-scrolled .vt-nav-right .vt-ghostlink:hover { color: #000; }
/* Header Contact: gold key-accent pill, same recipe as the gold icon boxes.
   Deeper gold text once the bar scrolls to white so contrast holds. */
body.vt .vt-nav-right .vt-contact-pill { display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: #1a1206; padding: 9px 20px; border-radius: 999px; background: #E8B93E; border: 1px solid #E8B93E; box-shadow: 0 10px 26px -12px rgba(232,185,62,0.8); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
body.vt .vt-nav-right .vt-contact-pill:hover { background: #F5C858; border-color: #F5C858; transform: translateY(-1px); }
body.vt .vt-btn--blue { background: var(--vt-accent); color: #fff; padding: 14px 28px; font-size: 15px; border-radius: 999px; box-shadow: 0 8px 22px -12px rgba(var(--vt-accent-rgb),0.8); }
body.vt .vt-btn--blue:hover { background: var(--vt-accent-d); transform: translateY(-1px); }
body.vt .vt-burger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
body.vt .vt-burger span { width: 22px; height: 2px; background: #fff; transition: transform .25s ease, opacity .25s ease, background .35s ease; }
body.vt .vt-topwrap.is-scrolled .vt-burger span { background: #111; }
body.vt .vt-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.vt .vt-burger.is-open span:nth-child(2) { opacity: 0; }
body.vt .vt-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.vt .vt-drawer { position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px); background: rgba(12,12,14,0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-left: 1px solid var(--vt-line); z-index: 70; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; gap: 4px; padding: 96px 32px 40px; }
body.vt .vt-drawer.is-open { transform: none; }
body.vt .vt-drawer a { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid var(--vt-line); }
body.vt .vt-drawer-cta { margin-top: 20px; border: none; text-align: center; }
body.vt .vt-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 65; opacity: 0; transition: opacity .3s ease; }
body.vt .vt-drawer-backdrop.is-open { opacity: 1; }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
/* VITURE hero = scroll-driven full-bleed slider (tall outer, sticky inner) */
/* Auto-advancing hero: one viewport tall, slides rotate on a timer (JS), so
   there is no scroll-jack and every slide is reachable without scrolling. */
body.vt .vt-hero { position: relative; height: var(--vt-hero-h, 100vh); min-height: 620px; background: var(--vt-void); }
body.vt .vt-hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* Slides stack and crossfade */
body.vt .vt-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s ease; }
body.vt .vt-slide.is-active { opacity: 1; visibility: visible; }
body.vt .vt-slide-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
body.vt .vt-slide-bg video { width: 100%; height: 100%; object-fit: cover; }
body.vt .vt-slide-bg--video { background: #06070e; }
body.vt .vt-slide-bg--ai { background: radial-gradient(120% 120% at 74% 18%, #123a72 0%, #0c1f45 42%, #060c22 78%, #06070e 100%); }
body.vt .vt-slide-bg--latam { background: radial-gradient(120% 120% at 78% 16%, #3f2168 0%, #26184e 40%, #100c2a 76%, #06070e 100%); }
/* Left-weighted scrim so copy stays legible */
body.vt .vt-slide-scrim { position: absolute; inset: 0; z-index: 1; background:
	linear-gradient(to right, rgba(5,6,16,0.88) 0%, rgba(5,6,16,0.52) 32%, rgba(5,6,16,0.14) 60%, transparent 78%),
	linear-gradient(to bottom, transparent 52%, rgba(5,6,14,0.55) 86%, var(--vt-void) 100%); }
body.vt .vt-hero-grid { position: relative; z-index: 2; height: 100%; width: 100%; max-width: var(--vt-max); margin: 0 auto; padding: 0 var(--vt-gutter); display: flex; }
body.vt .vt-hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: left; width: min(58%, 720px); padding-top: clamp(110px, 14vh, 160px); padding-bottom: clamp(120px, 16vh, 184px); }
body.vt .vt-hero-copy .vt-eyebrow { margin: 0; color: #dfe2e9; font-size: clamp(17px, 1.6vw, 26px); font-weight: 400; letter-spacing: 0; }
body.vt .vt-hero-lower { margin: 14px 0 0; }
body.vt .vt-hero .vt-display { font-size: clamp(44px, 5.6vw, 82px); line-height: 0.96; letter-spacing: -0.04em; font-weight: 600; color: #fff; text-shadow: 0 2px 40px rgba(4,5,16,0.5); }
body.vt .vt-hero-cap { margin: 26px 0 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--vt-muted); max-width: 38ch; }
/* Hero CTA row: left-aligned pills */
body.vt .vt-slide .vt-hero-cta { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; margin-top: 34px; }
body.vt .vt-slide .vt-btn { border-radius: 999px; padding: 17px 38px; font-size: 16.5px; }
/* Progress dashes (VITURE) */
body.vt .vt-slider-nav { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(26px, 4vh, 46px); display: flex; justify-content: center; gap: 14px; }
body.vt .vt-dash { width: clamp(48px, 6vw, 82px); height: 3px; padding: 0; border: none; border-radius: 999px; background: rgba(255,255,255,0.24); cursor: pointer; overflow: hidden; }
body.vt .vt-dash span { display: block; height: 100%; width: 0%; background: #fff; border-radius: 999px; }
body.vt .vt-dash.is-done span { width: 100%; }
/* generic cta row (reused by the bottom CTA section) */
body.vt .vt-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 42px; }

/* -------------------------------------------------------------------------
   Logo carousel (under hero)
   ------------------------------------------------------------------------- */
/* Fade logos out at both edges so they dissolve instead of hard-cutting. Mask sits on the
   static section (not the moving track) so the fade holds at fixed screen edges. The centered
   label is short and unaffected by the horizontal gradient. */
body.vt .vt-marquee { position: relative; z-index: 1; padding: clamp(48px, 6vw, 88px) 0; overflow: hidden; background: var(--vt-void); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); }
body.vt .vt-marquee-track { display: flex; width: max-content; animation: vt-marquee 60s linear infinite; }
body.vt .vt-marquee:hover .vt-marquee-track { animation-play-state: paused; }
body.vt .vt-marquee-group { display: flex; align-items: center; gap: clamp(52px, 6.5vw, 100px); padding-right: clamp(52px, 6.5vw, 100px); flex: 0 0 auto; }
body.vt .vt-marquee img { height: clamp(40px, 4.2vw, 52px); width: auto; max-width: 260px; object-fit: contain; }
/* Red Rake's file is a full-bleed wordmark with no internal padding, so the shared height renders it oversized */
body.vt .vt-marquee img[src*="red-rake"] { height: clamp(24px, 2.4vw, 30px); }
body.vt .vt-marquee-link { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
body.vt .vt-marquee-link:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: -2px; }
@keyframes vt-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body.vt .vt-marquee-track { animation: none; flex-wrap: wrap; gap: 32px; justify-content: center; } }

/* -------------------------------------------------------------------------
   Section 1: The Network (bento + blue dome)
   ------------------------------------------------------------------------- */
/* White section */
body.vt .vt-net { position: relative; overflow: hidden; background: #eceef2; color: #14151a; }
body.vt .vt-net-glow { display: none; }
body.vt .vt-net .vt-wrap { position: relative; z-index: 1; }
body.vt .vt-net-head { max-width: 940px; margin-bottom: clamp(36px, 5vw, 60px); }
body.vt .vt-net .vt-eyebrow { color: rgba(20,21,26,0.55); }
body.vt .vt-net-head .vt-heading { color: #14151a; }
body.vt .vt-muted-line { color: var(--vt-muted); }
body.vt .vt-bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: minmax(196px, 1fr); gap: 18px; }
body.vt .vt-bento-card { position: relative; border: 1px solid rgba(20,30,60,0.08); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -46px rgba(20,30,60,0.4); }
body.vt .vt-bento-feature { grid-row: span 2; display: flex; flex-direction: column; }
body.vt .vt-bento-media { flex: 1; min-height: 200px; background-size: cover; background-position: center top; }
body.vt .vt-bento-cap { padding: 26px 28px 30px; }
body.vt .vt-bento-cap h3 { font-size: clamp(20px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.02em; color: #14151a; margin: 0 0 10px; }
body.vt .vt-bento-cap p { font-size: 15px; line-height: 1.55; color: rgba(20,21,26,0.6); margin: 0; }
body.vt .vt-bento-stat { display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; background: linear-gradient(158deg, #ffffff, #eef1f7); transition: transform .3s ease, box-shadow .3s ease; }
body.vt .vt-bento-stat:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(20,30,60,0.45); }
body.vt .vt-bento-n { font-size: clamp(46px, 5vw, 78px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(160deg, #14151a 0%, var(--vt-accent) 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #14151a; }
body.vt .vt-bento-l { position: relative; margin-top: 16px; padding-top: 16px; font-size: 15px; color: rgba(20,21,26,0.58); }
body.vt .vt-bento-l::before { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--vt-accent), #86b0ff); }

/* -------------------------------------------------------------------------
   Benefit-led section (why operators choose us)
   ------------------------------------------------------------------------- */
body.vt .vt-why { position: relative; overflow: hidden; background: var(--vt-void); }
body.vt .vt-why-glow { position: absolute; left: 50%; top: -28%; width: min(130vw, 1500px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(var(--vt-accent-rgb),0.26) 0%, rgba(var(--vt-accent-rgb),0.08) 42%, transparent 62%); filter: blur(30px); }
body.vt .vt-why .vt-wrap { position: relative; z-index: 1; }
body.vt .vt-why-head { max-width: 900px; margin-bottom: clamp(40px, 5vw, 64px); }
body.vt .vt-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Bento: one wide feature card on top (the production / "we run the floor"
   shot), two supporting cards below. Reads with hierarchy instead of three
   equal columns. Collapses to a single column at <=940px (see media query). */
body.vt .vt-why-grid .vt-why-card--0 { grid-column: 1 / -1; min-height: clamp(380px, 40vw, 560px); }
body.vt .vt-why-card--0 .vt-why-card-txt h3 { font-size: clamp(26px, 2.6vw, 38px); }
body.vt .vt-why-card--0 .vt-why-card-txt p { max-width: 46ch; }
/* Design-led image cards, each with its own gradient wash */
body.vt .vt-why-card { position: relative; overflow: hidden; border-radius: 18px; min-height: clamp(340px, 44vh, 460px); display: flex; flex-direction: column; justify-content: space-between; padding: 32px; border: 1px solid var(--vt-line); }
body.vt .vt-why-card-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
body.vt .vt-why-card:hover .vt-why-card-bg { transform: scale(1.06); }
body.vt .vt-why-card::after { content: ""; position: absolute; inset: 0; z-index: 1; }
body.vt .vt-why-card--0::after { background: linear-gradient(180deg, transparent 0%, rgba(6,9,26,0.28) 30%, rgba(4,6,18,0.82) 52%, rgba(2,3,11,0.97) 74%, #010208 100%); }
body.vt .vt-why-card--1::after { background: linear-gradient(180deg, transparent 0%, rgba(74,32,132,0.34) 34%, rgba(12,7,28,0.92) 62%, rgba(5,3,14,0.99) 100%); }
body.vt .vt-why-card--2::after { background: linear-gradient(180deg, transparent 0%, rgba(20,66,150,0.34) 34%, rgba(6,12,34,0.92) 62%, rgba(3,6,18,0.99) 100%); }
body.vt .vt-why-card > * { position: relative; z-index: 2; }
/* The bg span is a direct child too; keep it absolutely filling the card and
   behind the scrim (the > * rule above would otherwise collapse it to 0x0). */
body.vt .vt-why-card > .vt-why-card-bg { position: absolute; inset: 0; z-index: 0; }
body.vt .vt-why-n { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; color: rgba(255,255,255,0.9); }
body.vt .vt-why-card-txt h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; color: #fff; min-height: 1.2em; }
body.vt .vt-why-card-txt p { font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.62; color: rgba(255,255,255,0.86); margin: 0; max-width: 34ch; }

/* -------------------------------------------------------------------------
   Two APIs — angled twin screens (Productivity layout)
   ------------------------------------------------------------------------- */
body.vt .vt-screens-sec { position: relative; overflow: hidden; background: var(--vt-void); }
body.vt .vt-screens-glow { position: absolute; left: 50%; bottom: -30%; width: min(150vw, 1800px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(40,96,235,0.5) 0%, rgba(40,96,235,0.14) 42%, transparent 60%); filter: blur(26px); }
body.vt .vt-screens-sec .vt-wrap { position: relative; z-index: 1; }
body.vt .vt-screens { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
/* API panels rebuilt in the route-focus style: a themed gradient panel per side,
   benefit heading + strap + link up top, feature cards at the base. */
body.vt .vt-apanel { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--vt-line-2); border-radius: 24px; padding: clamp(26px, 3vw, 46px); overflow: hidden; box-shadow: 0 60px 130px -50px rgba(0,0,0,0.9); }
body.vt .vt-apanel-head { margin-bottom: clamp(30px, 4.5vw, 60px); }
body.vt .vt-apanel-k { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236,239,247,0.62); margin-bottom: 12px; }
body.vt .vt-apanel-title { font-size: clamp(26px, 2.8vw, 40px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; color: #fff; margin: 0 0 14px; }
body.vt .vt-apanel-strap { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(236,239,247,0.82); max-width: 48ch; margin: 0 0 16px; }
body.vt .vt-apanel-link { font-size: 14px; font-weight: 600; color: #fff; border-bottom: 2px solid rgba(255,255,255,0.5); padding-bottom: 2px; }
body.vt .vt-apanel-link:hover { border-color: #fff; }
body.vt .vt-apanel-minis { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 16px); }
body.vt .vt-apanel-mini { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); border-radius: 14px; padding: clamp(14px, 1.5vw, 20px); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.vt .vt-apanel-mini-ico { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px; color: #e6c063; background: linear-gradient(158deg, rgba(201,152,47,0.26), rgba(255,255,255,0.02)); border: 1px solid rgba(var(--vt-accent-tint-rgb),0.30); box-shadow: 0 0 20px -8px rgba(var(--vt-accent-rgb),0.85), inset 0 1px 0 rgba(255,255,255,0.14); }
body.vt .vt-apanel-mini-ico .vt-ico { width: 20px; height: 20px; filter: drop-shadow(0 0 5px rgba(201,152,47,0.9)); }
body.vt .vt-apanel-mini-k { display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 5px; }
body.vt .vt-apanel-mini-p { display: block; font-size: 13px; line-height: 1.45; color: rgba(236,239,247,0.72); }
body.vt .vt-screen { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 640px; width: 100%; }
body.vt .vt-screen-frame { width: 100%; border-radius: 16px; overflow: hidden; background: #0b0f1e; border: 1px solid var(--vt-line-2); box-shadow: 0 60px 120px -50px rgba(0,0,0,0.9); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
body.vt .vt-screen--left .vt-screen-frame { transform: rotateY(15deg) translateZ(-20px); }
body.vt .vt-screen--right .vt-screen-frame { transform: rotateY(-15deg) translateZ(-20px); }
body.vt .vt-screen:hover .vt-screen-frame { transform: rotateY(0deg) translateZ(30px); }
body.vt .vt-screen-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #131a2e; }
body.vt .vt-screen-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
body.vt .vt-screen-bar span:nth-child(1) { background: #ff5f57; }
body.vt .vt-screen-bar span:nth-child(2) { background: #febc2e; }
body.vt .vt-screen-bar span:nth-child(3) { background: #28c840; }
body.vt .vt-screen-bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: var(--vt-muted); }
body.vt .vt-screen-body { padding: 24px; min-height: 250px; }
body.vt .vt-screen-body--seamless { display: flex; flex-direction: column; gap: 14px; }
body.vt .vt-sb-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; }
body.vt .vt-sb-row span { font-size: 13px; color: var(--vt-muted); }
body.vt .vt-sb-row b { font-size: 14px; font-weight: 600; color: #dfe6f5; }
body.vt .vt-code { margin: 0; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.75; color: #c9d4ee; white-space: pre; overflow: auto; text-align: left; }
body.vt .vt-code .c { color: #6b7a9e; }
body.vt .vt-code .k { color: #86b0ff; }
body.vt .vt-code .s { color: #7fd6a3; }
body.vt .vt-code .n { color: #e0a86b; }
body.vt .vt-screen-cap { margin-top: 30px; max-width: 42ch; }
body.vt .vt-screen-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236,239,247,0.6); margin: 0 0 10px; }
body.vt .vt-screen-cap h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
body.vt .vt-screen-cap p { font-size: 15.5px; line-height: 1.55; color: var(--vt-muted); margin: 0 0 14px; }

/* -------------------------------------------------------------------------
   Section 2: Two APIs (centered + blue dome)
   ------------------------------------------------------------------------- */
body.vt .vt-apis { position: relative; overflow: hidden; background: var(--vt-void); }
body.vt .vt-apis-glow { position: absolute; left: 50%; top: 4%; width: min(120vw, 1400px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(var(--vt-accent-rgb),0.4) 0%, rgba(var(--vt-accent-rgb),0.12) 38%, transparent 60%); filter: blur(30px); }
body.vt .vt-apis .vt-wrap { position: relative; z-index: 1; }
body.vt .vt-api-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
body.vt .vt-api-card { border: 1px solid var(--vt-line); border-radius: 18px; background: rgba(18,26,54,0.5); padding: clamp(30px, 3.4vw, 46px); }
body.vt .vt-api-card h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 14px; }
body.vt .vt-api-card p { font-size: 16px; line-height: 1.55; color: var(--vt-muted); margin: 0 0 20px; }
body.vt .vt-api-link { font-size: 14px; font-weight: 600; color: var(--vt-accent-tint); }
body.vt .vt-api-link:hover { color: #fff; }

/* -------------------------------------------------------------------------
   Choose your route: three fanned gradient panels (VITURE Productivity style)
   + focus overlay (sketch layout: title / strap / three minis / next arrow)
   ------------------------------------------------------------------------- */
body.vt .vt-rfan { position: relative; overflow: hidden; background: var(--vt-void); padding: clamp(72px, 10vw, 150px) var(--vt-gutter) clamp(90px, 11vw, 170px); }
body.vt .vt-rfan-glow { position: absolute; left: 50%; bottom: -38%; width: min(150vw, 1900px); aspect-ratio: 1.4; transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(40,96,235,0.5) 0%, rgba(40,96,235,0.14) 44%, transparent 62%); filter: blur(26px); }
body.vt .vt-rfan-head { position: relative; z-index: 3; text-align: center; max-width: 760px; margin: 0 auto clamp(44px, 6vw, 80px); }
/* Shared gradient themes: dome of color rising from the bottom of a near-black panel */
body.vt .vt-grad--blue { background: radial-gradient(120% 100% at 50% 118%, rgba(var(--vt-accent-rgb),0.8) 0%, rgba(var(--vt-accent-rgb),0.22) 46%, transparent 68%), #08090f; }
body.vt .vt-grad--violet { background: radial-gradient(120% 100% at 50% 118%, rgba(88,29,255,0.8) 0%, rgba(88,29,255,0.24) 46%, transparent 68%), #08080f; }
body.vt .vt-grad--aurora { background:
	radial-gradient(90% 80% at 22% 122%, rgba(255,138,61,0.5) 0%, transparent 55%),
	radial-gradient(120% 100% at 62% 118%, rgba(255,77,141,0.62) 0%, rgba(123,43,255,0.3) 52%, transparent 72%), #0a070f; }
/* Stage: center card forward, side cards angled in, Productivity-style */
body.vt .vt-rfan-stage { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; perspective: 2400px; }
body.vt .vt-rfan-card { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; width: min(32vw, 460px); aspect-ratio: 16 / 10.4; padding: clamp(20px, 2.2vw, 34px); border: 1px solid var(--vt-line-2); border-radius: 20px; overflow: hidden; color: inherit; font: inherit; cursor: pointer; will-change: transform, filter; transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, filter .5s ease; backface-visibility: hidden; }
body.vt .vt-rfan-card--1 { width: min(40vw, 580px); z-index: 3; transform: translateZ(90px); box-shadow: 0 80px 160px -36px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.06); }
/* Private Tables (featured middle card) — live-studio photo background, with a
   violet-tinted bottom scrim so the LIVE ROUTE / label / strap stay legible.
   Overrides the .vt-grad--violet flat gradient set in the markup. */
body.vt .vt-rfan:not(.vt-rfan--deck) .vt-rfan-card--1 {
	background:
		linear-gradient(to top, rgba(9,8,18,0.95) 0%, rgba(12,8,26,0.66) 34%, rgba(22,13,48,0.3) 60%, rgba(30,16,70,0.1) 100%),
		radial-gradient(120% 92% at 50% 122%, rgba(88,29,255,0.5) 0%, transparent 60%),
		url('../img/private-tables-card.jpg') center 25% / cover no-repeat,
		#08080f;
}
body.vt .vt-rfan-card--0 { transform-origin: right center; transform: rotateY(27deg) scale(0.92) translateZ(-40px); z-index: 1; margin-right: clamp(-72px, -3.6vw, -34px); filter: brightness(0.55) saturate(0.9); }
/* Shared Tables (left) fan card — live-studio photo background with a blue-tinted
   bottom scrim so the LIVE ROUTE / label / strap stay legible.
   Overrides the .vt-grad--blue flat gradient set in the markup. */
body.vt .vt-rfan:not(.vt-rfan--deck) .vt-rfan-card--0 {
	background:
		linear-gradient(to top, rgba(9,10,16,0.95) 0%, rgba(10,12,26,0.66) 34%, rgba(14,20,44,0.3) 60%, rgba(20,30,66,0.1) 100%),
		radial-gradient(120% 92% at 50% 122%, rgba(var(--vt-accent-rgb),0.5) 0%, transparent 60%),
		url('../img/shared-tables-card.jpg') center 25% / cover no-repeat,
		#08090f;
}
body.vt .vt-rfan-card--2 { transform-origin: left center; transform: rotateY(-27deg) scale(0.92) translateZ(-40px); z-index: 1; margin-left: clamp(-72px, -3.6vw, -34px); filter: brightness(0.55) saturate(0.9); }
/* The right card fans away to the right and its left edge is clipped; anchor its
   text to the readable right side so the label stays fully visible. */
body.vt .vt-rfan-card--2 { align-items: flex-end; text-align: right; }
/* Studio Hosting (right) fan card — live studio-floor photo with an aurora-tinted
   bottom scrim. Overrides the .vt-grad--aurora gradient set in the markup. */
body.vt .vt-rfan:not(.vt-rfan--deck) .vt-rfan-card--2 {
	background:
		linear-gradient(to top, rgba(10,7,15,0.95) 0%, rgba(26,10,26,0.66) 34%, rgba(48,18,44,0.3) 60%, rgba(60,24,60,0.1) 100%),
		radial-gradient(120% 92% at 50% 122%, rgba(255,77,141,0.42) 0%, transparent 60%),
		url('../img/studio-hosting-card.jpg') center 30% / cover no-repeat,
		#0a070f;
}
body.vt .vt-rfan-card--0:hover { transform: rotateY(26deg) scale(0.93) translateZ(-24px); filter: brightness(0.75); }
body.vt .vt-rfan-card--2:hover { transform: rotateY(-26deg) scale(0.93) translateZ(-24px); filter: brightness(0.75); }
body.vt .vt-rfan-card--1:hover { transform: translateZ(120px) translateY(-6px); box-shadow: 0 70px 150px -40px rgba(40,96,235,0.55); }
body.vt .vt-rfan-k { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236,239,247,0.66); margin-bottom: 10px; }
body.vt .vt-rfan-name { font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; color: #fff; margin-bottom: 8px; }
body.vt .vt-rfan-short { font-size: 15px; line-height: 1.5; color: rgba(236,239,247,0.72); }

/* ---- Rotatable route fan ------------------------------------------------- *
 * The card photo is bound to the card identity (via inline --card-img), so the
 * three position classes (pos-l / pos-c / pos-r) only place the card in the 3D
 * fan. Prev/next controls (vt-rfan-nav) rotate which route sits in the center,
 * driven by viture.js. Used on every route fan (homepage + Live Dealer
 * Solutions), so it is scoped to body.vt, not body.home. The static
 * .vt-rfan-card--0/1/2 rules above are the legacy non-rotatable variant and are
 * no longer used by any served page. */
body.vt .vt-rfan-card[data-theme="blue"]   { --card-tint: rgba(var(--vt-accent-rgb),0.5); }
body.vt .vt-rfan-card[data-theme="violet"] { --card-tint: rgba(88,29,255,0.5); }
body.vt .vt-rfan-card[data-theme="aurora"] { --card-tint: rgba(255,77,141,0.42); }
body.vt .vt-rfan:not(.vt-rfan--deck) .vt-rfan-card {
	background:
		linear-gradient(to top, rgba(9,9,17,0.95) 0%, rgba(12,10,24,0.66) 34%, rgba(20,16,44,0.3) 60%, rgba(26,18,60,0.1) 100%),
		radial-gradient(120% 92% at 50% 122%, var(--card-tint, rgba(88,29,255,0.42)) 0%, transparent 60%),
		var(--card-img, none) center 25% / cover no-repeat,
		#08080f;
}
/* order keeps the featured (pos-c) card in the middle slot no matter which
   DOM card is active; width bumps make the panels larger. */
/* Front card: no translateZ magnification. Under the stage perspective a
   translateZ(90px) card is scaled up by the browser and its text rasterizes
   fuzzy; the card already reads as forward via its width, z-index and shadow. */
body.vt .vt-rfan-card.pos-c { order: 1; width: min(46vw, 700px); z-index: 3; margin: 0; transform: translateZ(0); filter: none; box-shadow: 0 80px 160px -36px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.06); align-items: flex-start; text-align: left; }
body.vt .vt-rfan-card.pos-l { order: 0; width: min(37vw, 560px); transform-origin: right center; transform: rotateY(27deg) scale(0.92) translateZ(-40px); z-index: 1; margin: 0 clamp(-84px,-4.2vw,-40px) 0 0; filter: brightness(0.55) saturate(0.9); align-items: flex-start; text-align: left; }
body.vt .vt-rfan-card.pos-r { order: 2; width: min(37vw, 560px); transform-origin: left center; transform: rotateY(-27deg) scale(0.92) translateZ(-40px); z-index: 1; margin: 0 0 0 clamp(-84px,-4.2vw,-40px); filter: brightness(0.55) saturate(0.9); align-items: flex-end; text-align: right; }
/* 4th+ card waits off-stage; the rotation JS cycles it through the 3 slots. */
body.vt .vt-rfan-card.pos-x { display: none; }
body.vt .vt-rfan-card.pos-c:hover { transform: translateZ(0) translateY(-6px); box-shadow: 0 70px 150px -40px rgba(40,96,235,0.55); }
body.vt .vt-rfan-card.pos-l:hover { transform: rotateY(26deg) scale(0.93) translateZ(-24px); filter: brightness(0.8); }
body.vt .vt-rfan-card.pos-r:hover { transform: rotateY(-26deg) scale(0.93) translateZ(-24px); filter: brightness(0.8); }

/* Click affordance: a "View details" chip on every card, filled on hover. */
body.vt .vt-rfan-cue { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 8px 15px; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: #fff; background: rgba(255,255,255,0.09); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .22s ease, border-color .22s ease, color .22s ease; }
body.vt .vt-rfan-cue::before { content: "+"; font-size: 15px; line-height: 1; font-weight: 700; }
body.vt .vt-rfan-card:hover .vt-rfan-cue { background: #fff; color: #0a0d18; border-color: #fff; }

/* Prev/next controls that rotate the fan (chevrons, functional carousel nav).
   Overlaid over the fan and pinned to the sides, sitting on top of the two
   dimmed side cards. Centered on the stage vertically, held within the viewport
   horizontally (the side cards can run wider than the screen), and styled loud
   so they read as the primary way to browse the routes. */
body.vt .vt-rfan-stage { position: relative; }
body.vt .vt-rfan-nav { position: absolute; z-index: 8; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(94vw, 1240px); display: flex; justify-content: space-between; align-items: center; margin: 0; pointer-events: none; }
body.vt .vt-rfan-arrow { pointer-events: auto; width: clamp(54px, 4.6vw, 72px); height: clamp(54px, 4.6vw, 72px); border-radius: 999px; border: 2px solid rgba(255,255,255,0.92); background: rgba(9,12,22,0.74); color: #fff; font-family: var(--vt-sans); font-size: clamp(30px, 2.7vw, 42px); line-height: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 34px -8px rgba(0,0,0,0.85), 0 0 0 6px rgba(9,12,22,0.28); transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
body.vt .vt-rfan-arrow:hover { background: var(--vt-accent); border-color: var(--vt-accent); color: #0a0d18; transform: scale(1.07); box-shadow: 0 16px 40px -8px rgba(0,0,0,0.9), 0 0 0 6px rgba(var(--vt-accent-rgb),0.24); }
body.vt .vt-rfan-arrow:active { transform: scale(1); }

/* Deck variant: a spread hand of 5 uniform cards (scoped so the homepage
   3-card route fan is untouched). Cards fan out, lift and straighten on hover. */
body.vt .vt-rfan--deck .vt-rfan-stage { perspective: 2000px; }
body.vt .vt-rfan--deck .vt-rfan-card,
body.vt .vt-rfan--deck .vt-rfan-card--0,
body.vt .vt-rfan--deck .vt-rfan-card--1,
body.vt .vt-rfan--deck .vt-rfan-card--2,
body.vt .vt-rfan--deck .vt-rfan-card--3,
body.vt .vt-rfan--deck .vt-rfan-card--4 { width: clamp(200px, 19vw, 300px); aspect-ratio: 1 / 1; margin: 0 clamp(-34px, -2.2vw, -15px); padding: clamp(22px, 1.9vw, 32px); transform-origin: bottom center; filter: none; box-shadow: 0 34px 80px -34px rgba(0,0,0,0.85); transform: rotate(var(--deck-rot, 0deg)) translateY(var(--deck-ty, 0px)); }
/* Fallback spread for exactly five cards; viture.js re-computes a symmetric
   spread for whatever the actual card count is (so 3- and 4-card fans center). */
body.vt .vt-rfan--deck .vt-rfan-card--0 { --deck-rot: -15deg; --deck-ty: 30px; z-index: 1; }
body.vt .vt-rfan--deck .vt-rfan-card--1 { --deck-rot: -7.5deg; --deck-ty: 8px; z-index: 2; }
body.vt .vt-rfan--deck .vt-rfan-card--2 { --deck-rot: 0deg; --deck-ty: 0px; z-index: 3; }
body.vt .vt-rfan--deck .vt-rfan-card--3 { --deck-rot: 7.5deg; --deck-ty: 8px; z-index: 2; }
body.vt .vt-rfan--deck .vt-rfan-card--4 { --deck-rot: 15deg; --deck-ty: 30px; z-index: 1; }
/* Deck fan cards carry a game-tile image; a marker shows where art is still needed. */
body.vt .vt-rfan--deck .vt-rfan-card.has-tile { background: linear-gradient(to top, rgba(5,7,16,0.97) 0%, rgba(6,8,18,0.5) 32%, rgba(6,8,18,0.08) 58%, transparent 80%), var(--tile) center top / cover no-repeat, #0a0c15; }
body.vt .vt-rfan--deck .vt-rfan-card.needs-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 12px, transparent 12px 24px), linear-gradient(162deg, #1a2036, #0b0e1a); }
body.vt .vt-rfan--deck .vt-rfan-card .vt-rfan-needimg-note { position: absolute; top: 16px; left: 16px; right: 16px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
body.vt .vt-rfan--deck .vt-rfan-card.has-tile .vt-rfan-needimg-note { display: none; }
body.vt .vt-rfan--deck .vt-rfan-card:hover,
body.vt .vt-rfan--deck .vt-rfan-card--0:hover,
body.vt .vt-rfan--deck .vt-rfan-card--1:hover,
body.vt .vt-rfan--deck .vt-rfan-card--2:hover,
body.vt .vt-rfan--deck .vt-rfan-card--3:hover,
body.vt .vt-rfan--deck .vt-rfan-card--4:hover { transform: rotate(0deg) translateY(-22px) scale(1.05); z-index: 10; box-shadow: 0 60px 110px -32px rgba(0,0,0,0.92); filter: brightness(1.08); }
body.vt .vt-rfan--deck .vt-rfan-k { font-size: 10px; margin-bottom: 6px; }
body.vt .vt-rfan--deck .vt-rfan-name { font-size: clamp(20px, 1.7vw, 27px); }
body.vt .vt-rfan--deck .vt-rfan-short { display: none; }
/* Cards right of center are covered on their left, so mirror their label to the
   visible right edge; left cards keep the default left label. Keeps every name legible. */
body.vt .vt-rfan--deck .vt-rfan-card--3,
body.vt .vt-rfan--deck .vt-rfan-card--4 { align-items: flex-end; text-align: right; }
/* viture.js tags each card is-left / is-right by its computed position so the
   label always sits on the visible edge, whatever the card count. */
body.vt .vt-rfan--deck .vt-rfan-card.is-right { align-items: flex-end; text-align: right; }
body.vt .vt-rfan--deck .vt-rfan-card.is-left { align-items: flex-start; text-align: left; }
@media (max-width: 940px) {
	/* Mobile: swipe carousel instead of a stacked list. Native scroll-snap so a
	   flick moves card to card; a slice of the next card peeks to signal it. */
	body.vt .vt-rfan--deck .vt-rfan-stage { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 16px; perspective: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px clamp(20px, 12vw, 90px) 24px; scroll-padding-inline: clamp(20px, 12vw, 90px); }
	body.vt .vt-rfan--deck .vt-rfan-stage::-webkit-scrollbar { display: none; }
	body.vt .vt-rfan--deck .vt-rfan-card,
	body.vt .vt-rfan--deck .vt-rfan-card--0,
	body.vt .vt-rfan--deck .vt-rfan-card--1,
	body.vt .vt-rfan--deck .vt-rfan-card--2,
	body.vt .vt-rfan--deck .vt-rfan-card--3,
	body.vt .vt-rfan--deck .vt-rfan-card--4 { width: clamp(230px, 74vw, 300px); margin: 0; transform: none; aspect-ratio: 1 / 1; flex: 0 0 auto; scroll-snap-align: center; align-items: flex-start; text-align: left; }
	/* Carousel cards stand alone, so keep every label on the left edge (override
	   the fan's JS-driven is-left/is-right edge-label swap). */
	body.vt .vt-rfan--deck .vt-rfan-card.is-left,
	body.vt .vt-rfan--deck .vt-rfan-card.is-right { align-items: flex-start; text-align: left; }
	body.vt .vt-rfan--deck .vt-rfan-card:hover { transform: none; }
}
/* Focus overlay: panel almost fills the screen */
body.vt .vt-focus { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 2.5vw, 36px); }
body.vt .vt-focus[hidden] { display: none; }
body.vt .vt-focus-backdrop { position: absolute; inset: 0; background: rgba(4,6,16,0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
body.vt .vt-focus.is-open .vt-focus-backdrop { opacity: 1; }
body.vt .vt-focus-panel { position: relative; z-index: 1; width: 100%; height: 100%; max-height: 100%; border: 1px solid var(--vt-line-2); border-radius: 28px; overflow: hidden; box-shadow: 0 90px 180px -50px rgba(0,0,0,0.92); transform: scale(0.94) translateY(12px); opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .32s ease; }
body.vt .vt-focus.is-open .vt-focus-panel { transform: scale(1) translateY(0); opacity: 1; }
/* Per-card focus-panel image (set via data-bg on the fan card), with left +
   bottom scrims so the title, strap and minis stay legible over it. */
body.vt .vt-focus-panel.has-bg { background: linear-gradient(100deg, rgba(6,8,20,0.92) 0%, rgba(6,8,20,0.66) 34%, rgba(6,8,20,0.24) 60%, transparent 82%), linear-gradient(180deg, transparent 40%, rgba(6,8,20,0.5) 68%, rgba(5,7,18,0.94) 100%), var(--panel-bg) center / cover no-repeat, #07070f; }
/* No image yet: mark it so it's obvious art is still needed. */
body.vt .vt-focus-panel.needs-img::before { content: "Image needed"; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 4; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); padding: 6px 14px; border: 1px dashed rgba(255,255,255,0.32); border-radius: 999px; }
/* Studio Hosting focus panel (aurora theme) — same studio-floor photo as its fan
   card, with left + bottom scrims and the aurora glow, on-theme and legible. */
body.vt.home .vt-focus-panel.vt-grad--aurora {
	background:
		linear-gradient(to top, rgba(10,7,15,0.9) 0%, rgba(26,10,26,0.34) 42%, transparent 72%),
		linear-gradient(100deg, rgba(10,7,15,0.93) 0%, rgba(20,8,20,0.5) 40%, transparent 80%),
		radial-gradient(120% 80% at 50% 122%, rgba(255,77,141,0.4) 0%, transparent 60%),
		url('../img/studio-hosting-card.jpg') center 26% / cover no-repeat,
		#0a070f;
}
/* Shared Tables focus panel (blue theme) — same live-studio photo as its fan card,
   with left + bottom scrims and the accent glow so it stays on-theme and legible. */
body.vt.home .vt-focus-panel.vt-grad--blue {
	background:
		linear-gradient(to top, rgba(9,10,16,0.9) 0%, rgba(10,12,26,0.34) 42%, transparent 72%),
		linear-gradient(100deg, rgba(9,10,16,0.93) 0%, rgba(10,12,26,0.5) 40%, transparent 80%),
		radial-gradient(120% 80% at 50% 122%, rgba(var(--vt-accent-rgb),0.4) 0%, transparent 60%),
		url('../img/shared-tables-card.jpg') center 26% / cover no-repeat,
		#08090f;
}
/* Private Tables focus panel (violet theme) — same live-studio photo as its fan
   card, with a left scrim (for the title + strap) and a bottom scrim (for the
   mini row), plus the violet glow so it stays on-theme and legible. */
body.vt.home .vt-focus-panel.vt-grad--violet {
	background:
		linear-gradient(to top, rgba(8,8,18,0.9) 0%, rgba(12,8,26,0.34) 42%, transparent 72%),
		linear-gradient(100deg, rgba(8,8,18,0.93) 0%, rgba(10,8,22,0.5) 40%, transparent 80%),
		radial-gradient(120% 80% at 50% 122%, rgba(88,29,255,0.45) 0%, transparent 60%),
		url('../img/private-tables-card.jpg') center 26% / cover no-repeat,
		#08080f;
}
/* A card that supplies its own data-bg (e.g. the Aggregator's RNG suppliers
   image) must beat the per-theme homepage panel photos above. */
body.vt.home .vt-focus-panel.has-bg { background: linear-gradient(100deg, rgba(6,8,20,0.92) 0%, rgba(6,8,20,0.66) 34%, rgba(6,8,20,0.24) 60%, transparent 82%), linear-gradient(180deg, transparent 40%, rgba(6,8,20,0.5) 68%, rgba(5,7,18,0.94) 100%), var(--panel-bg) center / cover no-repeat, #07070f; }
/* Sketch layout: title top-left, strap mid-left, minis along the bottom */
body.vt .vt-focus-inner { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: clamp(28px, 4.5vw, 72px); overflow-y: auto; transition: opacity .18s ease; }
body.vt .vt-focus-inner.is-swap { opacity: 0; }
body.vt .vt-focus-title { font-size: clamp(38px, 5.4vw, 84px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; color: #fff; margin: 0; }
body.vt .vt-focus-mid { margin: auto 0; padding: clamp(20px, 3vh, 40px) 0; }
body.vt .vt-focus-strap { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: rgba(236,239,247,0.88); max-width: 560px; margin: 0 0 18px; }
/* Focus-panel CTA: a full button so the next step is obvious. */
body.vt .vt-focus-link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #0a0d18; background: #fff; padding: 15px 32px; border-radius: 999px; box-shadow: 0 12px 34px -14px rgba(0,0,0,0.62); transition: transform .2s ease, box-shadow .2s ease; }
body.vt .vt-focus-link:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(0,0,0,0.74); }
body.vt .vt-focus-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body.vt .vt-focus-cta2 { display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.36); padding: 14px 28px; border-radius: 999px; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
body.vt .vt-focus-cta2:hover { background: rgba(255,255,255,0.16); border-color: #fff; transform: translateY(-2px); }
body.vt .vt-focus-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); width: 100%; max-width: 1060px; }
/* Mini cards are links (clickable to the route page) — the gold icon boxes are
   the Vivo Gold key-accent color (#C9982F), not the blue system accent. */
body.vt .vt-focus-mini { display: block; color: inherit; text-decoration: none; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); border-radius: 16px; padding: clamp(16px, 1.8vw, 26px); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
body.vt a.vt-focus-mini { cursor: pointer; }
body.vt a.vt-focus-mini:hover { transform: translateY(-4px); border-color: rgba(201,152,47,0.55); background: rgba(201,152,47,0.09); }
body.vt .vt-focus-mini-ico { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px; color: #e6c063; background: linear-gradient(158deg, rgba(201,152,47,0.26), rgba(255,255,255,0.02)); border: 1px solid rgba(201,152,47,0.48); box-shadow: 0 0 22px -8px rgba(201,152,47,0.9), inset 0 1px 0 rgba(255,255,255,0.14); }
body.vt .vt-focus-mini-ico .vt-ico { width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(201,152,47,0.9)); }
body.vt .vt-showcase .vt-focus-mini-ico .vt-ico { width: 28px; height: 28px; }
body.vt .vt-focus-mini-k { display: block; font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; letter-spacing: -0.01em; color: #fff; margin-bottom: 8px; }
body.vt .vt-focus-mini-p { display: block; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: rgba(236,239,247,0.8); }
/* Next arrow: circular, right edge, per the sketch */
body.vt .vt-focus-next { position: absolute; right: clamp(18px, 2.6vw, 40px); bottom: clamp(18px, 2.6vw, 40px); z-index: 2; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s ease, transform .2s ease; }
body.vt .vt-focus-next:hover { background: rgba(255,255,255,0.22); transform: translateX(3px); }
body.vt .vt-focus-close { position: absolute; top: 18px; right: 20px; z-index: 2; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0,0,0,0.35); color: #fff; font-size: 25px; line-height: 1; cursor: pointer; transition: background .2s ease; }
body.vt .vt-focus-close:hover { background: rgba(0,0,0,0.6); }

/* -------------------------------------------------------------------------
   Section 4: Find your route (light section, gradient flagship card)
   ------------------------------------------------------------------------- */
body.vt .vt-find { position: relative; z-index: 1; background: #eceef2; color: #14151a; padding: clamp(72px, 10vw, 140px) 0; }
body.vt .vt-eyebrow--dark { color: rgba(20,21,26,0.55); }
body.vt .vt-find-head { text-align: center; max-width: 760px; margin: 0 auto clamp(44px, 5vw, 68px); }
body.vt .vt-find-h2 { font-size: clamp(36px, 4.4vw, 58px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; color: #14151a; margin: 0; }
body.vt .vt-find-sub { margin: 18px auto 0; font-size: 17px; line-height: 1.55; color: rgba(20,21,26,0.6); max-width: 52ch; }
body.vt .vt-find-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
body.vt .vt-find-card { background: #fff; border-radius: 20px; padding: 26px 24px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform .3s ease, box-shadow .3s ease; }
body.vt .vt-find-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(20,30,60,0.4); }
body.vt .vt-find-media { width: 100%; aspect-ratio: 16 / 11; border-radius: 12px; background-size: cover; background-position: center top; background-color: #dfe1e7; margin-bottom: 22px; }
body.vt .vt-find-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #14151a; margin: 0 0 6px; }
body.vt .vt-find-card p { font-size: 14px; line-height: 1.5; color: rgba(20,21,26,0.6); margin: 0 0 22px; }
body.vt .vt-find-buy { margin-top: auto; background: #e6e6ec; color: #14151a; border-radius: 999px; padding: 11px 24px; font-size: 14px; font-weight: 600; transition: background .2s ease; }
body.vt .vt-find-buy:hover { background: #d7d7df; }
/* Gradient flagship card (The Beast analog) */
body.vt .vt-find-card--feature { position: relative; overflow: hidden; background: linear-gradient(152deg, #0a1030 0%, #14225e 28%, #33257f 50%, #7a3bd0 72%, #e0662f 100%); color: #fff; padding: 22px 24px 24px; }
body.vt .vt-find-card--feature:hover { box-shadow: 0 40px 80px -36px rgba(90,40,210,0.55); }
body.vt .vt-find-card--feature h3 { color: #fff; }
body.vt .vt-find-card--feature p { color: rgba(255,255,255,0.72); }
body.vt .vt-find-pill { background: rgba(0,0,0,0.42); color: #fff; border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 600; margin-bottom: 26px; }
body.vt .vt-find-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 6px 0 24px; }
body.vt .vt-find-steps span { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 6px 12px; }
body.vt .vt-find-cta { margin-top: auto; background: var(--vt-accent); color: #fff; border-radius: 999px; padding: 12px 26px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 26px -12px rgba(var(--vt-accent-rgb),0.85); transition: background .2s ease, transform .2s ease; }
body.vt .vt-find-cta:hover { background: var(--vt-accent-d); transform: translateY(-1px); }

/* -------------------------------------------------------------------------
   Statement
   ------------------------------------------------------------------------- */
body.vt .vt-statement { position: relative; overflow: hidden; padding: clamp(90px, 13vw, 180px) 0 clamp(26px, 4vw, 48px); text-align: center; }
/* One continuous gradient zone: the blue glow lives on the wrapper that holds
   the statement AND the map, so it washes down behind the map with no seam. */
body.vt .vt-mapzone { position: relative; overflow: hidden; }
body.vt .vt-mapzone::before { content: ""; position: absolute; left: 50%; top: 0; width: min(160vw, 2000px); aspect-ratio: 1.5; transform: translate(-50%, -46%); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(40,96,235,0.34) 0%, rgba(40,96,235,0.12) 42%, transparent 66%); filter: blur(30px); }
body.vt .vt-mapzone > * { position: relative; z-index: 1; }
body.vt .vt-statement-h2 { position: relative; z-index: 1; font-size: clamp(40px, 6.4vw, 92px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.04; margin: 0; }
body.vt .vt-statement-sub { font-size: 17px; color: var(--vt-ash); margin: 30px 0 0; }

/* -------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------- */
body.vt .vt-cta { position: relative; overflow: hidden; padding: clamp(80px, 12vw, 160px) 0; text-align: center; }
body.vt .vt-cta-glow { position: absolute; left: 50%; bottom: -55%; width: min(140vw, 1600px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(var(--vt-accent-rgb),0.42) 0%, rgba(var(--vt-accent-rgb),0.12) 40%, transparent 62%); filter: blur(26px); }
body.vt .vt-cta-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
body.vt .vt-cta .vt-btn { border-radius: 999px; padding: 18px 40px; font-size: 17px; }
body.vt .vt-cta-h2 { font-size: clamp(38px, 5.2vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; margin: 0; }
body.vt .vt-cta-sub { font-size: 18px; color: var(--vt-muted); margin: 22px auto 0; max-width: 46ch; }
body.vt .vt-cta .vt-hero-cta { margin-top: 34px; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
body.vt .vt-footer { padding: clamp(56px, 8vw, 88px) 0 40px; }
body.vt .vt-foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
body.vt .vt-foot-brand img { height: 56px; width: auto; margin-bottom: 18px; }
body.vt .vt-foot-brand p { font-size: 15px; line-height: 1.55; color: var(--vt-ash); max-width: 40ch; margin: 0; }
body.vt .vt-foot-col h6 { font-size: 14px; font-weight: 600; color: var(--vt-white); margin: 0 0 16px; }
body.vt .vt-foot-col a { display: block; font-size: 15px; padding: 6px 0; color: var(--vt-muted); }
body.vt .vt-foot-col a:hover { color: var(--vt-white); }
body.vt .vt-foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; color: var(--vt-ash); }
body.vt .vt-foot-bottom a:hover { color: var(--vt-white); }

/* Awards and recognition strip — sits above the footer columns. Uniform-height
   logo lockups, each with a caption (result + category) underneath. Horizontal,
   scrollable when the row overflows (2026-09). Separated by spacing, not a
   divider rule, to keep the footer seamless. */
body.vt .vt-foot-awards { margin-bottom: clamp(40px, 5vw, 60px); }
body.vt .vt-foot-awards-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-ash); margin: 0 0 20px; }
/* Wrap rather than scroll so the mixed-width logos never overflow or jumble on
   narrow screens; each logo keeps a uniform cap-height with its caption below. */
body.vt .vt-foot-awards-track { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(22px, 3vw, 44px); }
body.vt .vt-foot-award { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 11px; margin: 0; max-width: 100%; }
body.vt .vt-foot-award-logo { height: clamp(38px, 3.6vw, 48px); width: auto; max-width: 100%; object-fit: contain; }
body.vt .vt-foot-award-cap { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.82); text-align: center; max-width: 22ch; }
@media (max-width: 560px) {
	body.vt .vt-foot-awards-track { gap: 22px clamp(20px, 6vw, 32px); }
	body.vt .vt-foot-award-logo { height: 40px; }
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 940px) {
	body.vt .vt-menu, body.vt .vt-nav-right { display: none; }
	body.vt .vt-burger { display: flex; margin-left: auto; }
	/* Compact mobile header: smaller logo + tighter padding so the nav row is
	   not a tall band with dead space under the announce strip. */
	body.vt .vt-logo img { height: 44px; }
	body.vt .vt-nav-inner { padding: 9px var(--vt-gutter); }
	/* Inner-page heroes: clear the fixed header (announce ~40 + nav ~62 = ~102)
	   so the breadcrumb sits just under the nav with no gap. Doubled class
	   outranks the base .vt-phero shorthand padding regardless of source order. */
	body.vt .vt-phero.vt-phero { padding-top: 110px; }
	/* Hero slider: copy spans, scrim darkens the whole frame for legibility */
	body.vt .vt-hero-copy { width: 100%; max-width: 640px; padding-top: clamp(150px, 24vh, 220px); }
	body.vt .vt-slide-scrim { background:
		linear-gradient(to right, rgba(5,6,16,0.82) 0%, rgba(5,6,16,0.58) 46%, rgba(5,6,16,0.34) 100%),
		linear-gradient(to bottom, transparent 46%, rgba(5,6,14,0.6) 84%, var(--vt-void) 100%); }
	/* Bento → single column, feature card no longer row-spanning */
	body.vt .vt-bento { grid-template-columns: 1fr 1fr; }
	body.vt .vt-bento-feature { grid-column: 1 / -1; grid-row: auto; }
	body.vt .vt-api-cards { grid-template-columns: 1fr; }
	body.vt .vt-why-grid { grid-template-columns: 1fr; }
	/* Twin screens stack + un-angle on small screens */
	body.vt .vt-screens { grid-template-columns: 1fr; perspective: none; }
	body.vt .vt-screen--left .vt-screen-frame,
	body.vt .vt-screen--right .vt-screen-frame { transform: none; }
	/* Route fan: stacked upright cards, focus panel full-bleed with stacked minis */
	body.vt .vt-rfan-stage { flex-direction: column; perspective: none; gap: 18px; }
	body.vt .vt-rfan-card,
	body.vt .vt-rfan-card--0,
	body.vt .vt-rfan-card--1,
	body.vt .vt-rfan-card--2 { width: 100%; max-width: 460px; aspect-ratio: auto; min-height: 190px; margin-left: auto; margin-right: auto; transform: none; filter: none; align-items: flex-start; text-align: left; }
	body.vt .vt-rfan-card--0:hover, body.vt .vt-rfan-card--1:hover, body.vt .vt-rfan-card--2:hover { transform: translateY(-4px); filter: none; }
	body.vt .vt-rfan-card.pos-x { display: flex; }
	body.vt .vt-rfan-card.pos-l,
	body.vt .vt-rfan-card.pos-c,
	body.vt .vt-rfan-card.pos-x,
	body.vt .vt-rfan-card.pos-r { width: 100%; max-width: 460px; aspect-ratio: auto; min-height: 190px; margin: 0 auto; transform: none; filter: none; align-items: flex-start; text-align: left; box-shadow: none; }
	body.vt .vt-rfan-card.pos-l:hover, body.vt .vt-rfan-card.pos-c:hover, body.vt .vt-rfan-card.pos-r:hover { transform: translateY(-4px); filter: none; }
	body.vt .vt-rfan-nav { display: none; }
	body.vt .vt-focus { padding: 8px; }
	body.vt .vt-focus-panel { border-radius: 18px; }
	body.vt .vt-focus-minis { grid-template-columns: 1fr; max-width: 100%; padding-bottom: 76px; }
	body.vt .vt-focus-next { bottom: 14px; right: 14px; }
	body.vt .vt-find-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	body.vt .vt-bento { grid-template-columns: 1fr; }
	body.vt .vt-find-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	body.vt .vt-stats { grid-template-columns: 1fr 1fr; }
	body.vt .vt-foot-cols { grid-template-columns: 1fr 1fr; }
	body.vt .vt-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) { body.vt .vt-foot-cols { grid-template-columns: 1fr; } }

/* =========================================================================
   SITE-WIDE BLOCK LIBRARY (2026-08 flow rebuild)
   New reusable vt- blocks for inner pages. Same ground, blooms, corners,
   spacing and motion as the viture homepage. Scoped to body.vt.
   ========================================================================= */

/* ---- Left-aligned section head variant + eyebrow-dark on light sections ---- */
body.vt .vt-head--left { max-width: 820px; margin-left: 0; margin-right: 0; text-align: left; }
body.vt .vt-head--left .vt-lede { margin-left: 0; }
body.vt .vt-section--tight { padding: clamp(56px, 8vw, 104px) 0; }
body.vt .vt-section--light { background: #eceef2; color: #14151a; }
body.vt .vt-section--light .vt-heading, body.vt .vt-section--light .vt-head-sub { color: #14151a; }
body.vt .vt-section--light .vt-eyebrow { color: rgba(20,21,26,0.55); }
body.vt .vt-section--light .vt-head-sub { color: rgba(20,21,26,0.6); }
body.vt .vt-section--light .vt-card { background: #fff; border-color: rgba(20,30,60,0.08); box-shadow: 0 30px 60px -46px rgba(20,30,60,0.4); }
body.vt .vt-section--light .vt-card h3 { color: #14151a; }
body.vt .vt-section--light .vt-card p { color: rgba(20,21,26,0.62); }
body.vt .vt-section--light .vt-card-k { color: var(--vt-accent); }

/* ---- Inner-page hero (smaller than the homepage slider) ---- */
body.vt .vt-phero { position: relative; overflow: hidden; padding: clamp(116px, 13vh, 140px) 0 clamp(20px, 3vw, 40px); background: var(--vt-void); }
/* Heroes no longer carry a CTA row, so the first panel after the hero sits
   closer to the strapline. Adjacency keeps between-section rhythm untouched. */
body.vt .vt-phero + .vt-section { padding-top: clamp(36px, 5vw, 64px); }
body.vt .vt-phero-glow { position: absolute; left: 50%; top: -20%; width: min(140vw, 1500px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(var(--vt-accent-rgb),0.28) 0%, rgba(88,29,255,0.10) 44%, transparent 64%); filter: blur(30px); }
body.vt .vt-phero .vt-wrap { position: relative; z-index: 1; }
body.vt .vt-phero-inner { max-width: 900px; }
/* Optional hero background image (e.g. Live Dealer Games): cover image + a
   left-to-dark scrim so the left-aligned copy stays legible. */
body.vt .vt-phero--media .vt-phero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; }
body.vt .vt-phero--media .vt-phero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(5,6,16,0.95) 0%, rgba(5,6,16,0.78) 40%, rgba(5,6,16,0.42) 72%, rgba(5,6,16,0.58) 100%), linear-gradient(to bottom, rgba(5,6,16,0.25), rgba(5,6,16,0.82)); }
/* Full-bleed media hero (Asia pilot, rolled out to all second-level pages
   2026-08; regional template opts in per region via the hero_media flag):
   image edge to edge at ~80vh, copy bottom-aligned on the constrained wrap. Scrim reuses the existing rgba(5,6,16)
   base only, near-opaque behind the copy fading to transparent right, plus
   the established bottom fade into the void so the flat sections below
   connect without a seam. */
body.vt .vt-phero--full { min-height: 80vh; display: flex; align-items: flex-end; padding-bottom: clamp(44px, 6vw, 72px); }
body.vt .vt-phero--full .vt-wrap { width: 100%; }
body.vt .vt-phero--full .vt-phero-bg::after { background:
	linear-gradient(100deg, rgba(5,6,16,0.96) 0%, rgba(5,6,16,0.84) 38%, rgba(5,6,16,0.46) 64%, rgba(5,6,16,0.08) 88%, rgba(5,6,16,0) 100%),
	linear-gradient(to bottom, transparent 58%, rgba(5,6,14,0.55) 86%, var(--vt-void) 100%); }

/* Hero gradient burst (photo-free hero): a radial aurora bloom + soft conic rays. */
body.vt .vt-phero-burst { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 94%); mask-image: linear-gradient(to bottom, #000 48%, transparent 94%); }
body.vt .vt-phero-burst::before { content: ""; position: absolute; left: 50%; top: -18%; width: min(140vw, 1500px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(var(--vt-accent-rgb),0.26) 0%, rgba(88,29,255,0.14) 32%, rgba(255,61,119,0.05) 54%, transparent 70%); filter: blur(40px); }
body.vt .vt-phero-burst::after { content: ""; position: absolute; left: 50%; top: 42%; width: min(120vw, 1200px); aspect-ratio: 1; transform: translate(-50%, -50%); background: conic-gradient(from 200deg at 50% 50%, transparent 0deg, rgba(var(--vt-accent-rgb),0.1) 44deg, transparent 96deg, rgba(255,106,61,0.06) 168deg, transparent 214deg, rgba(88,29,255,0.09) 304deg, transparent 360deg); filter: blur(56px); opacity: 0.4; }

/* Showcase panel: a static, full-width take on the fan pop-out panel. Bold media
   (image/video, blank placeholder for now) + a title/strap and key-fact boxes. */
/* Hero alignment (Asia pilot, rolled out site-wide 2026-08): the panel caps
   at the .vt-wrap CONTENT width so it shares the text column's edges instead
   of overshooting by a gutter each side, and sits close under the hero. */
body.vt .vt-showcase-sec { padding: clamp(10px, 1.6vw, 22px) 0 clamp(6px, 1vw, 16px); }
body.vt .vt-showcase { position: relative; max-width: calc(var(--vt-max) - 2 * var(--vt-gutter)); margin: 0 auto; width: calc(100% - 2 * var(--vt-gutter)); min-height: clamp(560px, 82vh, 800px); border: 1px solid var(--vt-line-2); border-radius: 28px; overflow: hidden; display: flex; align-items: stretch; box-shadow: 0 60px 130px -50px rgba(0,0,0,0.85); }
/* Pickers size to their card count (2- and 3-card pickers were leaving empty
   columns in the shared 4-col grid; regional, aggregator, technology, etc). */
@media (min-width: 981px) {
	body.vt .vt-picker:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
	body.vt .vt-picker:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* Private Tables hero: single-dealer editorial shot; anchor to the top of the
   frame so her head is never cropped when the 80vh hero crops vertically. */
body.vt.page-template-template-private-tables .vt-phero-bg { background-position: center top; }
/* North America + Social Sweepstakes heroes reuse the square standing-dealer
   shot; anchor to the top so her face is framed, not cropped, in the 80vh hero. */
body.vt.page-north-america .vt-phero-bg,
body.vt.page-social-sweepstakes .vt-phero-bg { background-position: center top; }
/* Aggregator integration panel: a single Seamless API card runs the full
   content width (the shared .vt-screens grid is 2-up), minis 4-across, and
   the icon boxes take the Vivo Gold key-accent treatment. */
body.vt.page-template-template-aggregator .vt-screens { grid-template-columns: 1fr; }
@media (min-width: 981px) { body.vt.page-template-template-aggregator .vt-apanel-minis { grid-template-columns: repeat(4, 1fr); } }
body.vt .vt-showcase-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; }
body.vt .vt-showcase-bg video, body.vt .vt-showcase-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.vt .vt-showcase::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(102deg, rgba(6,8,20,0.94) 0%, rgba(6,8,20,0.74) 30%, rgba(6,8,20,0.32) 54%, transparent 76%), linear-gradient(180deg, transparent 36%, rgba(6,8,20,0.55) 64%, rgba(5,7,18,0.94) 100%), radial-gradient(100% 100% at 8% 104%, rgba(var(--vt-accent-rgb),0.32) 0%, transparent 56%); }
body.vt .vt-showcase-inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; padding: clamp(32px, 4vw, 64px); }
/* Showcase whose image has been promoted into the hero (route + regional pages):
   panel chrome stands down so the copy reads as a supporting text section
   leading into the cards below, not a second full-bleed panel. */
body.vt .vt-showcase--flat { min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
body.vt .vt-showcase--flat .vt-showcase-inner { padding: 0; }
body.vt .vt-showcase--flat .vt-focus-minis { max-width: none; }
body.vt .vt-showcase-title { font-size: clamp(34px, 4.6vw, 64px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; color: #fff; margin: 12px 0 0; max-width: 20ch; }
/* Strap + facts pushed to the bottom, leaving open space in the middle for the image. */
body.vt .vt-showcase-strap { margin-top: auto; padding-top: clamp(40px, 8vh, 96px); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: rgba(236,239,247,0.92); max-width: 60ch; }
body.vt .vt-showcase-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(22px, 2.4vw, 32px); }
/* Showcase title smaller than the modal's (which is sized for 2-word titles), so a
   short title sits on one line and the panel keeps its breathing space. */
body.vt .vt-showcase .vt-focus-title { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.03; letter-spacing: -0.03em; max-width: 18ch; }
/* Bigger, more legible feature boxes in the showcase (scoped; focus panel unchanged). */
body.vt .vt-showcase .vt-focus-mini { padding: clamp(18px, 1.9vw, 28px); }
body.vt .vt-showcase .vt-focus-mini-ico { width: 46px; height: 46px; margin-bottom: 16px; }
body.vt .vt-showcase .vt-focus-mini-k { font-size: clamp(18px, 1.55vw, 22px); margin-bottom: 9px; }
body.vt .vt-showcase .vt-focus-mini-p { font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.55; color: rgba(236,239,247,0.86); }
body.vt .vt-showcase-fact { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: clamp(16px, 1.6vw, 24px); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.vt .vt-showcase-fact-n { display: block; font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; color: #fff; line-height: 1; }
body.vt .vt-showcase-fact-l { display: block; font-size: 13px; line-height: 1.4; color: rgba(236,239,247,0.76); margin-top: 8px; }
@media (max-width: 760px) { body.vt .vt-showcase-facts { grid-template-columns: 1fr 1fr; } }

/* Placeholders neutralized site-wide (no stock imagery yet): render as a quiet
   surface, not a striped/labeled box. Real images override via intake or inline bg. */
/* Pending image slots read as clean labeled placeholders: subtle panel +
   dashed frame + the caption label naming the image. Applies to why-card
   backgrounds too (their scrim is dropped below so the placeholder shows). */
body.vt .vt-ph { background: rgba(255,255,255,0.022); border: 1px dashed rgba(255,255,255,0.18); border-radius: inherit; }
/* Filled media placeholders: once a real image is set inline, drop the dashed
   placeholder chrome and the "Image · ..." caption so the photo reads clean. */
body.vt .vt-ph[style*="background-image"],
body.vt .vt-split-media[style*="background-image"],
body.vt .vt-flow-bg[style*="background-image"] { border-style: solid; border-color: var(--vt-line); background-size: cover; background-position: center top; }
body.vt [style*="background-image"] > .vt-ph-note { display: none; }
/* Sizing for converted image-slot placeholders (game tiles, picker cards) */
body.vt .vt-gametile-ph { position: absolute; inset: 0; z-index: 0; }
body.vt .vt-pick-media.vt-ph { min-height: 118px; }

/* Centered mid-page CTA bands. */
body.vt .vt-midcta { text-align: center; }
body.vt .vt-midcta .vt-head-sub { max-width: 56ch; margin-left: auto; margin-right: auto; }
body.vt .vt-midcta .vt-hero-cta { justify-content: center; margin-top: 26px; }
/* Trust chips under the final CTA. */
body.vt .vt-cta-tags { justify-content: center; margin-top: clamp(24px, 3vw, 40px); }

/* Marquee label (turns the anonymous logo strip into a labeled row) */
body.vt .vt-marquee-label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 20px; }

/* ===== Feature icon-bullet list (bespoke glowing glyphs) ===== */
body.vt .vt-feat { display: flex; flex-direction: column; gap: 2px; }
body.vt .vt-feat-item { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
body.vt .vt-feat-item:last-child { border-bottom: 0; }
body.vt .vt-featico { position: relative; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #e6c063; background: linear-gradient(158deg, rgba(201,152,47,0.18), rgba(255,255,255,0.02)); border: 1px solid rgba(var(--vt-accent-tint-rgb),0.30); box-shadow: 0 0 24px -8px rgba(201,152,47,0.85), inset 0 1px 0 rgba(255,255,255,0.14); }
body.vt .vt-featico::after { content: ""; position: absolute; inset: -7px; border-radius: 17px; background: radial-gradient(62% 62% at 68% 28%, rgba(201,152,47,0.40), transparent 72%); z-index: -1; filter: blur(7px); }
body.vt .vt-featico .vt-ico { width: 23px; height: 23px; filter: drop-shadow(0 0 5px rgba(201,152,47,0.95)); }
body.vt .vt-feat-k { display: block; font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
body.vt .vt-feat-p { display: block; font-size: 13.5px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* Diagram wrapper: opt out of the 4:3 image-box (aspect/overflow/border) so the
   flow diagram sizes to its own content and never clips the last group.
   Double class to outrank the later .vt-split-media rule regardless of order. */
body.vt .vt-split-media.vt-split-media--flow { aspect-ratio: auto; overflow: visible; border: 0; border-radius: 0; background: none; }

/* Two diagrams side by side (route pages + LDS parent integration section) */
body.vt .vt-apiflow-2up { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
body.vt .vt-apiflow-2up .vt-apiflow { max-width: 100%; }
body.vt .vt-apiflow-col { display: flex; flex-direction: column; }
body.vt .vt-apiflow-col .vt-eyebrow { margin-bottom: 8px; }
body.vt .vt-apiflow-h { font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 0 0 8px; }
body.vt .vt-apiflow-lead { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.62); margin: 0 0 22px; max-width: 44ch; }
body.vt .vt-apiflow-more { text-align: center; margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 860px) { body.vt .vt-apiflow-2up { grid-template-columns: 1fr; gap: 40px; max-width: 480px; margin: 0 auto; } }

/* ===== API integration-flow diagram (coded, animated vertical flow) ===== */
body.vt .vt-apiflow { position: relative; width: 100%; max-width: 480px; margin: 0 auto; background: linear-gradient(180deg, rgba(20,22,28,0.92), rgba(12,13,17,0.96)); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(0,0,0,0.9); }
body.vt .vt-apiflow-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
body.vt .vt-apiflow-dots { display: inline-flex; gap: 6px; }
body.vt .vt-apiflow-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
body.vt .vt-apiflow-barlabel { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.66); }
body.vt .vt-apiflow-body { padding: clamp(18px, 3vw, 26px); }
body.vt .vt-apiflow-main { position: relative; display: flex; flex-direction: column; gap: 16px; padding-left: 30px; }
body.vt .vt-apiflow-spine { position: absolute; left: 10px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(var(--vt-accent-tint-rgb),0.10), rgba(var(--vt-accent-tint-rgb),0.34), rgba(var(--vt-accent-tint-rgb),0.10)); }
body.vt .vt-apiflow-spine i { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--vt-accent-tint); box-shadow: 0 0 14px 3px rgba(var(--vt-accent-rgb),0.9); }
body.vt .vt-apiflow-group { position: relative; border: 1px dashed rgba(255,255,255,0.16); border-radius: 12px; padding: 14px 16px 16px; transition: border-color .3s ease, background .3s ease; }
body.vt .vt-apiflow-group::before { content: ""; position: absolute; left: -24px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: #12141b; border: 2px solid rgba(var(--vt-accent-tint-rgb),0.5); }
body.vt .vt-apiflow-group.is-active { border-style: solid; border-color: rgba(var(--vt-accent-rgb),0.55); background: rgba(var(--vt-accent-rgb),0.06); }
body.vt .vt-apiflow-group.is-active::before { background: var(--vt-accent); border-color: var(--vt-accent); box-shadow: 0 0 10px rgba(var(--vt-accent-rgb),0.85); }
body.vt .vt-apiflow-gk { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 12px; }
body.vt .vt-apiflow-nodes { display: flex; flex-wrap: wrap; gap: 10px; }
body.vt .vt-apiflow-node { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; padding: 9px 14px; }
body.vt .vt-apiflow-node.is-active { color: var(--vt-accent-tint); border-color: var(--vt-accent); background: rgba(var(--vt-accent-rgb),0.14); box-shadow: 0 0 18px -2px rgba(var(--vt-accent-rgb),0.5); }
body.vt .vt-apiflow-foot { margin: 0; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: rgba(255,255,255,0.55); }

@media (prefers-reduced-motion: no-preference) {
	body.vt .vt-apiflow-node.is-active { animation: vt-apiflow-pulse 2.6s ease-in-out infinite; }
	body.vt .vt-apiflow-spine i { animation: vt-apiflow-signal 3.2s ease-in-out infinite; }
	@keyframes vt-apiflow-pulse { 0%, 100% { box-shadow: 0 0 18px -2px rgba(var(--vt-accent-rgb),0.35); } 50% { box-shadow: 0 0 26px 2px rgba(var(--vt-accent-rgb),0.7); } }
	@keyframes vt-apiflow-signal { 0% { top: -2px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }
}

/* Sticky conversion button (bottom-left to clear the site event bar bottom-right) */
body.vt .vt-stickycta {
	position: fixed; left: 20px; bottom: 20px; z-index: 70;
	display: inline-flex; align-items: center;
	font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #fff;
	background: var(--vt-accent); border-radius: 999px; padding: 13px 24px;
	box-shadow: 0 14px 34px -10px rgba(var(--vt-accent-rgb),0.85);
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
body.vt .vt-stickycta:hover { background: var(--vt-accent-l); transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(var(--vt-accent-rgb),0.95); }
@media (max-width: 600px) { body.vt .vt-stickycta { left: 12px; bottom: 12px; font-size: 13px; padding: 11px 20px; } }

/* Social-proof logo strip */
body.vt .vt-proofstrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 66px); }
body.vt .vt-proofstrip img {
	height: clamp(22px, 2.8vw, 32px); width: auto; max-width: 148px; object-fit: contain;
	opacity: 0.62; filter: grayscale(1) brightness(1.7); transition: opacity .2s ease;
}
body.vt .vt-proofstrip img:hover { opacity: 1; }
body.vt .vt-phero h1 { font-weight: 600; font-size: clamp(51px, 6.3vw, 84px); line-height: 1.04; letter-spacing: -0.03em; margin: 0; color: #fff; }
body.vt .vt-phero-strap { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; color: var(--vt-muted); margin: 24px 0 0; max-width: 56ch; }
body.vt .vt-phero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
body.vt .vt-phero-cta .vt-btn { border-radius: 999px; padding: 15px 30px; }

/* ---- Breadcrumbs ---- */
body.vt .vt-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--vt-ash); margin: 0 0 22px; }
body.vt .vt-crumbs a { color: var(--vt-muted); }
body.vt .vt-crumbs a:hover { color: var(--vt-white); }
body.vt .vt-crumbs span[aria-hidden] { color: var(--vt-slate); }

/* ---- Split: media + copy row ---- */
body.vt .vt-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
body.vt .vt-split--flip .vt-split-media { order: 2; }
body.vt .vt-split + .vt-split { margin-top: clamp(48px, 7vw, 96px); }
body.vt .vt-split-media { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; border: 1px solid var(--vt-line); background-size: cover; background-position: center top; }
body.vt .vt-split-copy h2, body.vt .vt-split-copy h3 { font-weight: 500; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 18px; color: #fff; }
body.vt .vt-split-copy p { font-size: 16px; line-height: 1.6; color: var(--vt-muted); margin: 0 0 16px; }
body.vt .vt-split-copy .vt-eyebrow { margin-bottom: 16px; }

/* ---- Generic feature/benefit cards ---- */
body.vt .vt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
body.vt .vt-cards--2 { grid-template-columns: repeat(2, 1fr); }
body.vt .vt-cards--4 { grid-template-columns: repeat(4, 1fr); }
body.vt .vt-card { position: relative; border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.035) 46%, rgba(255,255,255,0.02) 100%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 60px -44px rgba(0,0,0,0.9); padding: clamp(24px, 2.6vw, 36px); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; }
body.vt .vt-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.24); background: linear-gradient(160deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 42px 80px -44px rgba(0,0,0,0.92); }
body.vt .vt-card:hover { transform: translateY(-4px); border-color: var(--vt-line-2); box-shadow: 0 40px 80px -50px rgba(var(--vt-accent-rgb),0.5); }
/* Link cards (e.g. regional depth): reset anchor styling + a text affordance. */
body.vt a.vt-card { color: inherit; text-decoration: none; }
body.vt .vt-card-more { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--vt-accent-tint); }
/* Media card variant: a full-bleed game panel at the top, padded copy below. */
body.vt .vt-card--media { padding: 0; overflow: hidden; }
body.vt .vt-card--media .vt-card-media { display: block; width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center top; }
body.vt .vt-card--media h3 { margin: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px) 10px; }
body.vt .vt-card--media p { margin: 0 clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 30px); }
body.vt .vt-lite .vt-card-more { color: var(--vt-accent); }
body.vt .vt-card-k { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-accent-tint); margin-bottom: 14px; }
body.vt .vt-card h3 { font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; color: #fff; }
body.vt .vt-card p { font-size: 15px; line-height: 1.55; color: var(--vt-muted); margin: 0; }
body.vt .vt-card > .vt-textlink { margin-top: 16px; }

/* ---- Comparison table ---- */
body.vt .vt-compare-wrap { overflow-x: auto; border: 1px solid var(--vt-line); border-radius: 18px; -webkit-overflow-scrolling: touch; }
body.vt .vt-compare { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 15px; }
body.vt .vt-compare th, body.vt .vt-compare td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--vt-line); vertical-align: top; }
body.vt .vt-compare thead th { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #fff; background: rgba(var(--vt-accent-rgb),0.08); }
body.vt .vt-compare thead th:first-child { color: var(--vt-muted); background: transparent; }
body.vt .vt-compare tbody th { font-weight: 600; color: #dfe6f5; width: 26%; }
body.vt .vt-compare td { color: var(--vt-muted); }
body.vt .vt-compare tr:last-child th, body.vt .vt-compare tr:last-child td { border-bottom: none; }
body.vt .vt-compare .vt-yes { color: #7fd6a3; font-weight: 600; }
body.vt .vt-compare .vt-no { color: var(--vt-slate); }

/* ---- Steps / how-it-works ---- */
body.vt .vt-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: vtstep; }
body.vt .vt-steps--3 { grid-template-columns: repeat(3, 1fr); }
body.vt .vt-step { position: relative; border: 1px solid var(--vt-line); border-radius: 18px; background: rgba(19,19,22,0.6); padding: clamp(24px, 2.6vw, 34px); }
body.vt .vt-step-n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; font-size: 18px; font-weight: 600; color: #fff; background: radial-gradient(120% 120% at 50% 118%, rgba(var(--vt-accent-rgb),0.9), rgba(var(--vt-accent-rgb),0.15) 60%, transparent), #0b0f1e; border: 1px solid var(--vt-line-2); margin-bottom: 18px; }
body.vt .vt-step h3 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: #fff; }
body.vt .vt-step p { font-size: 14.5px; line-height: 1.55; color: var(--vt-muted); margin: 0; }

/* ---- Region grid ---- */
body.vt .vt-regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.vt .vt-region { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; border-radius: 18px; border: 1px solid var(--vt-line-2); padding: 28px; color: inherit; }
body.vt .vt-region::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(6,8,20,0.1) 0%, rgba(10,14,40,0.5) 55%, rgba(6,10,32,0.95) 100%); }
body.vt .vt-region-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
body.vt .vt-region:hover .vt-region-bg { transform: scale(1.06); }
body.vt .vt-region > * { position: relative; z-index: 1; }
body.vt .vt-region-k { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-accent-tint); margin-bottom: 8px; }
body.vt .vt-region h3 { font-size: clamp(21px, 2vw, 27px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; color: #fff; }
body.vt .vt-region p { font-size: 14px; line-height: 1.5; color: rgba(236,239,247,0.74); margin: 0; }

/* Region picker (VITURE "find your" style): equal-height cards, one featured
   with the aurora gradient, the rest light and taking the gradient on hover.
   Flag tiles are country-code placeholders for now (swap for flag SVGs later). */
body.vt .vt-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
body.vt .vt-pick { position: relative; display: flex; flex-direction: column; min-height: 460px; border-radius: 24px; padding: 26px; background: #fff; border: 1px solid rgba(20,30,60,0.08); box-shadow: 0 30px 60px -46px rgba(20,30,60,0.4); color: #14151a; overflow: hidden; text-align: center; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, background .5s ease, border-color .5s ease, color .5s ease; }
body.vt .vt-pick:hover { transform: translateY(-6px); }
body.vt .vt-pick--feature, body.vt .vt-pick:hover { background: linear-gradient(150deg, #0a1024 0%, #191634 38%, #a13dff 98%, #ff6a3d 122%); border-color: transparent; color: #fff; box-shadow: 0 44px 90px -42px rgba(88,29,255,0.6); }
body.vt .vt-pick-badge { align-self: flex-start; font-size: 12px; font-weight: 600; color: #14151a; background: rgba(20,30,60,0.06); border-radius: 999px; padding: 7px 14px; margin-bottom: 6px; transition: background .5s ease, color .5s ease; }
body.vt .vt-pick--feature .vt-pick-badge, body.vt .vt-pick:hover .vt-pick-badge { background: rgba(255,255,255,0.18); color: #fff; }
body.vt .vt-pick-media { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 22px 0; }
/* Image variant of the picker media: a cover dealer photo instead of flag tiles. */
/* Full-bleed photo header: breaks out of the card padding to the top edges;
   the card's overflow + radius round the top corners. Fixed height keeps the
   cards short and even. */
body.vt .vt-pick-media--img { position: relative; flex: none; padding: 0; overflow: hidden; height: clamp(180px, 19vw, 230px); margin: -28px -28px 18px; }
body.vt .vt-pick-media--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.vt .vt-picker--img .vt-pick { min-height: 0; padding: 28px; }
/* Badge lifted onto the image as a standout callout (image-picker only). */
body.vt .vt-picker--img .vt-pick { position: relative; }
body.vt .vt-picker--img .vt-pick-badge { position: absolute; top: 30px; left: 28px; z-index: 4; margin: 0; background: var(--vt-accent); color: #fff; font-weight: 700; padding: 8px 16px; box-shadow: 0 12px 30px -10px rgba(var(--vt-accent-rgb),0.75); }
body.vt .vt-picker--img .vt-pick--feature .vt-pick-badge,
body.vt .vt-picker--img .vt-pick:hover .vt-pick-badge { background: var(--vt-accent); color: #fff; }
body.vt .vt-pick-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; height: 44px; padding: 0 14px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: #14151a; background: rgba(20,30,60,0.06); border: 1px solid rgba(20,30,60,0.12); border-radius: 8px; transition: background .5s ease, color .5s ease, border-color .5s ease; }
body.vt .vt-pick--feature .vt-pick-flag, body.vt .vt-pick:hover .vt-pick-flag { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.26); color: #fff; }
body.vt .vt-pick-body { display: flex; flex-direction: column; align-items: center; }
body.vt .vt-pick-k { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(20,21,26,0.5); margin-bottom: 6px; transition: color .5s ease; }
body.vt .vt-pick--feature .vt-pick-k, body.vt .vt-pick:hover .vt-pick-k { color: rgba(255,255,255,0.72); }
body.vt .vt-pick-name { font-size: clamp(22px, 2vw, 27px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
body.vt .vt-pick-sub { font-size: 14px; line-height: 1.5; color: rgba(20,21,26,0.6); margin-bottom: 18px; transition: color .5s ease; }
body.vt .vt-pick--feature .vt-pick-sub, body.vt .vt-pick:hover .vt-pick-sub { color: rgba(255,255,255,0.82); }
body.vt .vt-pick-cta { font-size: 14px; font-weight: 600; color: #14151a; background: rgba(20,30,60,0.08); border-radius: 999px; padding: 11px 22px; transition: background .5s ease, color .5s ease; }
body.vt .vt-pick--feature .vt-pick-cta, body.vt .vt-pick:hover .vt-pick-cta { background: rgba(255,255,255,0.18); color: #fff; }
@media (max-width: 980px) { body.vt .vt-picker { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body.vt .vt-picker { grid-template-columns: 1fr; } body.vt .vt-pick { min-height: 360px; } }

/* ---- FAQ accordion (native details/summary, FAQPage schema in template) ---- */
body.vt .vt-faq { max-width: 860px; margin: 0 auto; }
body.vt .vt-faq-item { border: 1px solid var(--vt-line); border-radius: 14px; background: rgba(19,19,22,0.6); margin-bottom: 12px; overflow: hidden; }
body.vt .vt-faq-item[open] { border-color: var(--vt-line-2); }
body.vt .vt-faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; font-size: clamp(16px, 1.5vw, 18px); font-weight: 600; letter-spacing: -0.01em; color: #fff; }
body.vt .vt-faq-q::-webkit-details-marker { display: none; }
body.vt .vt-faq-q::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--vt-accent-tint); transition: transform .25s ease; line-height: 1; }
body.vt .vt-faq-item[open] .vt-faq-q::after { transform: rotate(45deg); }
body.vt .vt-faq-a { padding: 0 24px 24px; font-size: 15.5px; line-height: 1.6; color: var(--vt-muted); }
body.vt .vt-faq-a p { margin: 0 0 12px; } body.vt .vt-faq-a p:last-child { margin-bottom: 0; }

/* ---- Spec / fact table (key/value rows) ---- */
body.vt .vt-spec { border: 1px solid var(--vt-line); border-radius: 18px; overflow: hidden; }
body.vt .vt-spec-row { display: grid; grid-template-columns: 34% 1fr; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--vt-line); }
body.vt .vt-spec-row:last-child { border-bottom: none; }
body.vt .vt-spec-k { font-size: 14px; font-weight: 600; color: #dfe6f5; }
body.vt .vt-spec-v { font-size: 15px; color: var(--vt-muted); }

/* ---- Tags / pills ---- */
body.vt .vt-tags { display: flex; flex-wrap: wrap; gap: 9px; }
body.vt .vt-tag { font-size: 13px; font-weight: 500; color: rgba(236,239,247,0.82); background: rgba(255,255,255,0.05); border: 1px solid var(--vt-line-2); border-radius: 999px; padding: 8px 15px; }
/* News category filter pill bar */
body.vt .vt-newsfilter { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 clamp(28px, 4vw, 44px); }
body.vt .vt-newsfilter a { font-size: 13px; font-weight: 500; color: rgba(236,239,247,0.82); background: rgba(255,255,255,0.05); border: 1px solid var(--vt-line-2); border-radius: 999px; padding: 8px 15px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
body.vt .vt-newsfilter a:hover { color: #fff; border-color: var(--vt-line-strong, rgba(255,255,255,0.24)); }
body.vt .vt-newsfilter a.is-active { background: var(--vt-accent); border-color: transparent; color: #fff; }

/* ---- Logo grid (suppliers / partners static) ---- */
body.vt .vt-logogrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
body.vt .vt-logotile { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border: 1px solid var(--vt-line); border-radius: 12px; background: rgba(255,255,255,0.03); padding: 18px; }
body.vt .vt-logotile img { max-height: 40px; width: auto; object-fit: contain; }
body.vt .vt-logotile span { font-size: 13px; font-weight: 600; color: var(--vt-muted); text-align: center; }

/* ---- Guide / article layout (resources) ---- */
body.vt .vt-article { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
body.vt .vt-toc { position: sticky; top: 120px; font-size: 14px; }
body.vt .vt-toc-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-ash); margin: 0 0 14px; }
body.vt .vt-toc a { display: block; padding: 7px 0; color: var(--vt-muted); border-left: 2px solid var(--vt-line); padding-left: 14px; }
body.vt .vt-toc a:hover { color: #fff; border-color: var(--vt-accent-tint); }
body.vt .vt-prose { max-width: 720px; }
body.vt .vt-prose > *:first-child { margin-top: 0; }
body.vt .vt-prose h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; color: #fff; margin: 48px 0 18px; scroll-margin-top: 120px; }
body.vt .vt-prose h3 { font-size: clamp(20px, 2vw, 25px); font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 34px 0 12px; }
body.vt .vt-prose p, body.vt .vt-prose li { font-size: 16.5px; line-height: 1.68; color: var(--vt-muted); }
body.vt .vt-prose p { margin: 0 0 20px; }
body.vt .vt-prose ul, body.vt .vt-prose ol { margin: 0 0 22px; padding-left: 22px; }
body.vt .vt-prose li { margin-bottom: 10px; }
body.vt .vt-prose strong { color: #dfe6f5; font-weight: 600; }
body.vt .vt-prose a { color: var(--vt-accent-tint); border-bottom: 1px solid rgba(158,194,255,0.35); }
body.vt .vt-prose a:hover { color: #fff; }
body.vt .vt-prose blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid; border-image: var(--vt-aurora) 1; font-size: 18px; color: #dfe6f5; }

/* ---- Related cards (guides / news) ---- */
body.vt .vt-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
body.vt .vt-related-card { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.035) 46%, rgba(255,255,255,0.02) 100%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; }
body.vt .vt-related-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.24); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 42px 80px -44px rgba(0,0,0,0.92); }
body.vt .vt-related-card:hover { transform: translateY(-4px); border-color: var(--vt-line-2); }
body.vt .vt-related-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background-color: #0a1224; background-size: cover; background-position: center top; }
/* When a card supplies its thumbnail as --vt-thumb, show the whole image
   (contain, never cropped) over a blurred cover backdrop of the same image, so
   portrait/square promo graphics keep their top-and-bottom text and there are
   no bare letterbox bars. Cards that set an inline background-image instead
   (e.g. resource guides) fall back to the plain cover rule above. */
body.vt .vt-related-media::before { content: ""; position: absolute; inset: 0; background-image: var(--vt-thumb); background-size: cover; background-position: center; filter: blur(24px) saturate(1.15); transform: scale(1.18); opacity: 0.5; }
body.vt .vt-related-media::after { content: ""; position: absolute; inset: 0; background-image: var(--vt-thumb); background-size: contain; background-repeat: no-repeat; background-position: center; }
body.vt .vt-related-body { padding: 22px 24px 26px; }
body.vt .vt-related-k { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vt-accent-tint); }
body.vt .vt-related-body h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 10px 0 8px; }
body.vt .vt-related-body p { font-size: 14.5px; line-height: 1.5; color: var(--vt-muted); margin: 0; }

/* ---- Megamenu (desktop) + nav additions ---- */
body.vt .vt-menu { position: static; }
/* Static so the mega panel anchors to .vt-nav (full-width, position:relative)
   and centers on screen, instead of centring on the parent button (which threw
   the left-most menus off the left edge of the viewport). */
body.vt .vt-has-mega { position: static; }
body.vt .vt-menu-parent { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; font-family: var(--vt-sans); font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.82); text-shadow: 0 1px 12px rgba(0,0,0,0.4); cursor: pointer; padding: 0; transition: color .2s ease; }
body.vt .vt-menu-parent:hover { color: #fff; }
body.vt .vt-topwrap.is-scrolled .vt-menu-parent { color: #34353b; text-shadow: none; }
body.vt .vt-topwrap.is-scrolled .vt-menu-parent:hover { color: #000; }
body.vt .vt-menu-parent::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.6; transition: transform .2s ease; }
body.vt .vt-has-mega[data-open="true"] .vt-menu-parent::after { transform: rotate(-135deg) translateY(-1px); }
body.vt .vt-mega { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); width: min(880px, 92vw); background: rgba(12,12,14,0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--vt-line-2); border-radius: 20px; box-shadow: 0 50px 110px -40px rgba(0,0,0,0.9); padding: 26px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 80; }
body.vt .vt-has-mega[data-open="true"] .vt-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* Invisible hover-bridge across the ~55px gap between the trigger row and the
   panel, so moving the pointer down to the panel never crosses a dead zone
   that fires mouseleave. Inherits the panel's pointer-events (none when the
   panel is closed, auto when open) so it never blocks the nav triggers, logo
   or CTA. Sits just below the trigger baseline, so sibling menus stay hoverable. */
/* Bridge height must stay BELOW the menu text row: the slimmed nav (4px
   bottom padding) puts the triggers ~20px above the nav's bottom edge, so a
   tall bridge overlaps them and blocks hover on sibling menus. 30px covers
   the 14px panel gap plus the nav's bottom padding zone only. */
body.vt .vt-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }
body.vt .vt-mega-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; }
body.vt .vt-mega-main { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; }
body.vt .vt-mega-main--1 { grid-template-columns: 1fr; }
body.vt .vt-mega-col h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-ash); margin: 0 0 12px; }
body.vt .vt-mega-links { display: grid; gap: 4px; }
body.vt .vt-mega-links--2 { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
body.vt .vt-mega-link { display: block; padding: 10px 12px; border-radius: 10px; transition: background .2s ease; }
body.vt .vt-mega-link:hover { background: rgba(255,255,255,0.05); }
body.vt .vt-mega-link b { display: block; font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
body.vt .vt-mega-link span { display: block; font-size: 13px; color: var(--vt-muted); margin-top: 2px; }
body.vt .vt-mega-promo { border-radius: 16px; padding: 24px; background: radial-gradient(120% 100% at 50% 118%, rgba(var(--vt-accent-rgb),0.5) 0%, rgba(var(--vt-accent-rgb),0.12) 50%, transparent 72%), #08090f; border: 1px solid var(--vt-line-2); display: flex; flex-direction: column; }
body.vt .vt-mega-promo-k { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-accent-tint); margin-bottom: 10px; }
body.vt .vt-mega-promo h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 0 0 8px; }
body.vt .vt-mega-promo p { font-size: 13.5px; line-height: 1.5; color: var(--vt-muted); margin: 0 0 16px; }
body.vt .vt-mega-pips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
body.vt .vt-mega-pips span { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 5px 11px; }
body.vt .vt-mega-promo .vt-btn { margin-top: auto; }

/* Plain (non-mega) nav item */
body.vt .vt-menu-plain { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.82); text-shadow: 0 1px 12px rgba(0,0,0,0.4); transition: color .2s ease; }
body.vt .vt-menu-plain:hover { color: #fff; }
body.vt .vt-topwrap.is-scrolled .vt-menu-plain { color: #34353b; text-shadow: none; }
body.vt .vt-topwrap.is-scrolled .vt-menu-plain:hover { color: #000; }

/* Footer marks + legal row */
body.vt .vt-foot-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
body.vt .vt-foot-marks span { font-size: 12px; color: var(--vt-ash); }
body.vt .vt-foot-marks strong { display: block; color: var(--vt-muted); font-weight: 600; font-size: 13px; }
/* Certification / license marks: Gaming Labs is a white-ground logo (rounded so
   it reads as a chip), Gaming Curacao is transparent and sits on the dark field. */
body.vt .vt-foot-marks img.vt-foot-mark { height: 38px; width: auto; margin: 0; display: block; }
body.vt .vt-foot-mark--labs { border-radius: 5px; }
body.vt .vt-foot-mark--curacao { height: 42px; }
body.vt .vt-foot-social { display: flex; gap: 10px; margin-top: 22px; }
/* Mid-page CTA band (vivo_vt_cta_band): a contained pill with the aurora
   (purple-red) gradient, dark-washed on the left so the copy stays legible. */
body.vt .vt-ctaband { position: relative; padding: clamp(34px, 4.5vw, 68px) 0; background: transparent; }
body.vt .vt-ctaband-pill { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 46px); flex-wrap: wrap; padding: clamp(28px, 3.4vw, 46px) clamp(30px, 3.8vw, 60px); border-radius: clamp(30px, 4vw, 60px); background: linear-gradient(92deg, rgba(9,7,24,0.66) 0%, rgba(9,7,24,0.22) 42%, rgba(9,7,24,0) 66%), var(--vt-aurora); background-size: 100% 100%, 150% 150%; box-shadow: 0 48px 110px -46px rgba(161,61,255,0.62), inset 0 1px 0 rgba(255,255,255,0.28); }
body.vt .vt-ctaband-glow { position: absolute; right: -8%; top: -60%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,61,119,0.55), transparent 66%); filter: blur(46px); pointer-events: none; }
body.vt .vt-ctaband-txt { position: relative; z-index: 1; margin: 0; font-size: clamp(20px, 2.1vw, 30px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.14; color: #fff; max-width: 26ch; text-shadow: 0 2px 22px rgba(0,0,0,0.4); }
body.vt .vt-ctaband-actions { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
body.vt .vt-ctaband-actions .vt-btn { border-radius: 999px; }
body.vt .vt-ctaband-pill .vt-btn--blue { background: #fff; color: #14121f; border-color: #fff; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.5); }
body.vt .vt-ctaband-pill .vt-btn--blue:hover { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); }
body.vt .vt-ctaband-pill .vt-btn--ghost { border-color: rgba(255,255,255,0.65); color: #fff; }
body.vt .vt-ctaband-pill .vt-btn--ghost:hover { background: rgba(255,255,255,0.16); border-color: #fff; }
@media (max-width: 720px) {
	body.vt .vt-ctaband-txt { max-width: none; }
	/* The actions row is flex:0 0 auto for desktop layout; on narrow screens
	   that stops the buttons shrinking and the second one runs off screen.
	   Let the row take the full pill width and the buttons share/wrap it. */
	body.vt .vt-ctaband-actions { flex: 1 1 100%; min-width: 0; }
	body.vt .vt-ctaband-actions .vt-btn { flex: 1 1 auto; min-width: 0; text-align: center; }
}
body.vt .vt-foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* Responsible-gambling marks (18+, BeGambleAware) in the legal bar. The source
   logos are black on transparent, so they are inverted to white to read on the
   dark footer. Inline height on each img keeps sizing cache-proof; these rules
   add the invert, the muted-to-full hover, and a divider from the legal links. */
body.vt .vt-foot-rg-group { display: inline-flex; align-items: center; gap: 18px; padding-right: 20px; margin-right: 4px; border-right: 1px solid var(--vt-line); }
body.vt .vt-foot-rg { display: inline-flex; align-items: center; }
body.vt .vt-foot-rg-mark { width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.72; transition: opacity 0.2s ease; }
body.vt .vt-foot-rg:hover .vt-foot-rg-mark { opacity: 1; }
@media (max-width: 600px) {
	body.vt .vt-foot-rg-group { padding-right: 0; margin-right: 0; border-right: 0; flex-basis: 100%; }
}

/* Drawer submenu (mobile accordion) */
body.vt .vt-drawer-group { border-bottom: 1px solid var(--vt-line); }
body.vt .vt-drawer-parent { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; font-family: var(--vt-sans); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: #fff; padding: 12px 0; cursor: pointer; }
body.vt .vt-drawer-parent::after { content: "+"; font-size: 26px; color: var(--vt-accent-tint); transition: transform .2s ease; }
body.vt .vt-drawer-group.is-open .vt-drawer-parent::after { transform: rotate(45deg); }
body.vt .vt-drawer-sub { display: none; padding: 0 0 14px 4px; }
body.vt .vt-drawer-group.is-open .vt-drawer-sub { display: block; }
body.vt .vt-drawer-sub a { display: block; font-size: 16px; font-weight: 500; color: var(--vt-muted); padding: 9px 0; border: none; }
body.vt .vt-drawer-sub a:hover { color: #fff; }

/* ---- News archive grid + single ---- */
body.vt .vt-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
body.vt .vt-post-hero { max-width: 780px; margin: 0 auto; }
body.vt .vt-post-meta { font-size: 13px; color: var(--vt-ash); margin: 0 0 16px; }
body.vt .vt-post-body { max-width: 720px; margin: 0 auto; }
/* Single posts lead with a text-only header (no image at the top). */
body.vt .vt-share { display: flex; align-items: center; gap: 16px; max-width: 720px; margin: 0 auto 34px; padding-bottom: 26px; border-bottom: 1px solid var(--vt-line); }
body.vt .vt-share-label { font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: var(--vt-ash); }
body.vt .vt-share-links { display: flex; gap: 10px; margin-left: auto; }
body.vt .vt-share-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); color: var(--vt-muted); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
body.vt .vt-share-btn:hover { color: #fff; border-color: rgba(var(--vt-accent-tint-rgb),0.5); background: rgba(var(--vt-accent-rgb),0.12); }
body.vt .vt-share-btn svg { width: 17px; height: 17px; }
body.vt .vt-share-btn.is-copied { color: #7fd6a3; border-color: rgba(127,214,163,0.5); background: rgba(127,214,163,0.10); }
/* Full-bleed image hero for single posts (title over the featured image) */
body.vt .vt-post-hero-media { position: relative; min-height: clamp(440px, 66vh, 660px); display: flex; align-items: flex-end; background-size: cover; background-position: center top; }
body.vt .vt-post-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,15,0.45) 0%, rgba(6,8,15,0.10) 42%, rgba(6,8,15,0.88) 100%); }
body.vt .vt-post-hero-media .vt-wrap { position: relative; padding-top: clamp(120px, 20vh, 220px); padding-bottom: clamp(36px, 6vh, 76px); }
body.vt .vt-post-hero-inner { max-width: 900px; }
body.vt .vt-post-hero-media h1 { font-size: clamp(32px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 10px 0 14px; color: #fff; text-shadow: 0 2px 34px rgba(0,0,0,0.55); }
body.vt .vt-post-hero-media .vt-post-meta { color: rgba(255,255,255,0.82); }
/* Breadcrumb + share bar below the hero */
body.vt .vt-post-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 720px; margin: 0 auto 34px; padding-bottom: 22px; border-bottom: 1px solid var(--vt-line); }
body.vt .vt-post-bar .vt-crumbs { margin: 0; }
body.vt .vt-post-bar .vt-share-links { margin-left: auto; }

/* ---- Meeting form ---- */
body.vt .vt-form { max-width: 640px; border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; padding: clamp(24px, 2.4vw, 34px); background: rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 90px -46px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08); }
body.vt .vt-field { position: relative; margin-bottom: 14px; }
/* Floating label: sits inside the field, floats up on focus / when filled. */
body.vt .vt-field label { position: absolute; left: 17px; top: 15px; font-size: 15px; font-weight: 500; color: var(--vt-muted); margin: 0; pointer-events: none; transition: transform .16s ease, color .16s ease; transform-origin: left center; }
body.vt .vt-field input, body.vt .vt-field select, body.vt .vt-field textarea { width: 100%; font-family: var(--vt-sans); font-size: 15px; color: #fff; background: rgba(6,9,20,0.42); border: 1px solid var(--vt-line-2); border-radius: 12px; padding: 22px 16px 8px; }
body.vt .vt-field textarea { min-height: 130px; resize: vertical; padding-top: 26px; }
body.vt .vt-field input:focus, body.vt .vt-field select:focus, body.vt .vt-field textarea:focus { outline: none; border-color: #7fb0ff; background: rgba(6,9,20,0.6); }
body.vt .vt-field:has(input:focus) label,
body.vt .vt-field:has(input:not(:placeholder-shown)) label,
body.vt .vt-field:has(textarea:focus) label,
body.vt .vt-field:has(textarea:not(:placeholder-shown)) label,
body.vt .vt-field:has(select:focus) label,
body.vt .vt-field:has(select) label { transform: translateY(-10px) scale(0.78); color: var(--vt-accent-tint); }
body.vt .vt-form-note { font-size: 13px; color: var(--vt-ash); margin-top: 10px; }
body.vt .vt-form-status { margin-top: 16px; font-size: 15px; }

/* ---- Responsive for new blocks ---- */
@media (max-width: 940px) {
	body.vt .vt-split { grid-template-columns: 1fr; }
	body.vt .vt-split--flip .vt-split-media { order: 0; }
	body.vt .vt-cards, body.vt .vt-cards--4 { grid-template-columns: 1fr 1fr; }
	body.vt .vt-steps, body.vt .vt-steps--3 { grid-template-columns: 1fr 1fr; }
	body.vt .vt-regions { grid-template-columns: 1fr 1fr; }
	body.vt .vt-logogrid { grid-template-columns: repeat(4, 1fr); }
	body.vt .vt-article { grid-template-columns: 1fr; }
	body.vt .vt-toc { position: static; display: none; }
	body.vt .vt-related, body.vt .vt-news-grid { grid-template-columns: 1fr 1fr; }
	body.vt .vt-mega { display: none; }
}
@media (max-width: 620px) {
	body.vt .vt-cards, body.vt .vt-cards--2, body.vt .vt-cards--4 { grid-template-columns: 1fr; }
	body.vt .vt-steps, body.vt .vt-steps--3 { grid-template-columns: 1fr; }
	body.vt .vt-regions { grid-template-columns: 1fr; }
	body.vt .vt-logogrid { grid-template-columns: repeat(2, 1fr); }
	body.vt .vt-related, body.vt .vt-news-grid { grid-template-columns: 1fr; }
	body.vt .vt-spec-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   Refinement pass (2026-08): continuity, sparkle, image strips
   ============================================================ */

/* Continuity — dark sections share the one fixed ambient + starfield
   instead of each painting opaque black (kills the inter-section seams). */
body.vt .vt-hero, body.vt .vt-marquee, body.vt .vt-why,
body.vt .vt-screens-sec, body.vt .vt-apis, body.vt .vt-rfan,
body.vt .vt-phero { background: transparent; }

/* Sparkle — a fixed, subtle starfield over the void. Static relative to the
   viewport so it reads as quiet depth behind the scrolling content. */
body.vt .vt-ambient::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background-image:
		radial-gradient(1.6px 1.6px at 6% 12%, rgba(255,255,255,.7), transparent 60%),
		radial-gradient(1.2px 1.2px at 18% 64%, rgba(190,208,255,.6), transparent 60%),
		radial-gradient(1.4px 1.4px at 27% 28%, rgba(255,255,255,.5), transparent 60%),
		radial-gradient(1px 1px at 38% 82%, rgba(200,215,255,.55), transparent 60%),
		radial-gradient(1.6px 1.6px at 46% 16%, rgba(255,255,255,.6), transparent 60%),
		radial-gradient(1.1px 1.1px at 54% 52%, rgba(180,200,255,.5), transparent 60%),
		radial-gradient(1.3px 1.3px at 63% 34%, rgba(255,255,255,.55), transparent 60%),
		radial-gradient(1px 1px at 71% 74%, rgba(200,215,255,.5), transparent 60%),
		radial-gradient(1.5px 1.5px at 79% 20%, rgba(255,255,255,.6), transparent 60%),
		radial-gradient(1.1px 1.1px at 86% 58%, rgba(190,208,255,.55), transparent 60%),
		radial-gradient(1.4px 1.4px at 93% 38%, rgba(255,255,255,.5), transparent 60%),
		radial-gradient(1px 1px at 12% 44%, rgba(255,255,255,.45), transparent 60%),
		radial-gradient(1.2px 1.2px at 33% 6%, rgba(200,215,255,.5), transparent 60%),
		radial-gradient(1px 1px at 58% 90%, rgba(255,255,255,.45), transparent 60%),
		radial-gradient(1.3px 1.3px at 88% 84%, rgba(190,208,255,.5), transparent 60%),
		radial-gradient(1px 1px at 96% 10%, rgba(255,255,255,.5), transparent 60%);
	opacity: .55; animation: vt-twinkle 7s ease-in-out infinite;
}
@keyframes vt-twinkle { 0%, 100% { opacity: .4; } 50% { opacity: .68; } }
@media (prefers-reduced-motion: reduce) { body.vt .vt-ambient::after { animation: none; opacity: .5; } }

/* Image strip — a dark band of imagery to break up lower pages (placeholders,
   wired to Site Images intake later). */
body.vt .vt-strip { position: relative; z-index: 1; padding: clamp(6px,1vw,16px) 0; }
body.vt .vt-strip-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px,1vw,14px); }
body.vt .vt-strip-cell { position: relative; aspect-ratio: 5/4; border-radius: 14px; overflow: hidden; border: 1px solid var(--vt-line); }
body.vt .vt-strip-cell .vt-ph { position: absolute; inset: 0; }
body.vt .vt-strip-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.vt .vt-strip-cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); pointer-events: none; }
body.vt .vt-strip-cap { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); }
@media (max-width: 760px) { body.vt .vt-strip-row { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Refinement v2 (2026-08): more sparkle, strip reveal, flow timeline
   ============================================================ */

/* More sparkle — brighter primary field + a second finer denser layer. */
body.vt .vt-ambient::after { opacity: .88; }
@keyframes vt-twinkle { 0%, 100% { opacity: .62; } 50% { opacity: .98; } }
body.vt .vt-ambient::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background-image:
		radial-gradient(1px 1px at 3% 30%, rgba(255,255,255,.6), transparent 60%),
		radial-gradient(1px 1px at 15% 8%, rgba(200,215,255,.55), transparent 60%),
		radial-gradient(1px 1px at 23% 50%, rgba(255,255,255,.5), transparent 60%),
		radial-gradient(1px 1px at 31% 88%, rgba(190,208,255,.5), transparent 60%),
		radial-gradient(1px 1px at 42% 40%, rgba(255,255,255,.55), transparent 60%),
		radial-gradient(1px 1px at 49% 72%, rgba(200,215,255,.5), transparent 60%),
		radial-gradient(1px 1px at 61% 12%, rgba(255,255,255,.55), transparent 60%),
		radial-gradient(1px 1px at 67% 60%, rgba(190,208,255,.5), transparent 60%),
		radial-gradient(1px 1px at 74% 46%, rgba(255,255,255,.5), transparent 60%),
		radial-gradient(1px 1px at 82% 78%, rgba(200,215,255,.5), transparent 60%),
		radial-gradient(1px 1px at 90% 24%, rgba(255,255,255,.55), transparent 60%),
		radial-gradient(1px 1px at 97% 66%, rgba(190,208,255,.5), transparent 60%);
	opacity: .6; animation: vt-twinkle2 9s ease-in-out infinite;
}
@keyframes vt-twinkle2 { 0%, 100% { opacity: .42; } 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) { body.vt .vt-ambient::before { animation: none; opacity: .5; } }

/* Strip cells reveal in sequence on scroll. */
body.vt .vt-strip-cell:nth-child(2).reveal { transition-delay: .08s; }
body.vt .vt-strip-cell:nth-child(3).reveal { transition-delay: .16s; }
body.vt .vt-strip-cell:nth-child(4).reveal { transition-delay: .24s; }

/* Flow timeline — staggered 50% steps on a connector that draws on scroll. */
body.vt .vt-flow { position: relative; max-width: 920px; margin: clamp(30px,5vw,60px) auto 0; }
body.vt .vt-flow-line { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,0.10); border-radius: 2px; }
body.vt .vt-flow-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 2px; background: linear-gradient(180deg, var(--vt-accent), #7a3bd0 68%, #ff6a3d); box-shadow: 0 0 16px rgba(var(--vt-accent-rgb),0.6); }
body.vt .vt-flow-step { position: relative; width: 50%; box-sizing: border-box; padding-bottom: clamp(26px,4vw,46px); }
body.vt .vt-flow-step:last-child { padding-bottom: 0; }
body.vt .vt-flow-step:nth-child(odd) { padding-right: clamp(36px,4vw,58px); text-align: right; }
body.vt .vt-flow-step:nth-child(even) { margin-left: 50%; padding-left: clamp(36px,4vw,58px); }
body.vt .vt-flow-node { position: absolute; top: 2px; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 600; color: #fff; background: #0b0f1e; border: 1px solid var(--vt-line-2); z-index: 2; transition: box-shadow .45s ease, border-color .45s ease, transform .45s ease, background .45s ease; }
body.vt .vt-flow-step:nth-child(odd) .vt-flow-node { right: -24px; }
body.vt .vt-flow-step:nth-child(even) .vt-flow-node { left: -24px; }
body.vt .vt-flow-step.is-lit .vt-flow-node { background: radial-gradient(120% 120% at 50% 118%, rgba(var(--vt-accent-rgb),0.95), rgba(122,59,208,0.55) 60%, #0b0f1e); border-color: rgba(130,158,255,0.65); box-shadow: 0 0 30px -4px rgba(var(--vt-accent-rgb),0.85); transform: scale(1.08); }
body.vt .vt-flow-card { position: relative; border: 1px solid var(--vt-line); border-radius: 20px; background: linear-gradient(158deg, rgba(24,26,40,0.72), rgba(11,12,20,0.62)); padding: clamp(22px,2.4vw,32px); overflow: hidden; transition: transform .45s ease, border-color .45s ease; }
body.vt .vt-flow-card::before { content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1px; background: linear-gradient(158deg, rgba(var(--vt-accent-rgb),0.55), rgba(122,59,208,0.3) 45%, transparent 62%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
body.vt .vt-flow-step.is-lit .vt-flow-card { transform: translateY(-2px); }
body.vt .vt-flow-step.is-lit .vt-flow-card::before { opacity: 1; }
body.vt .vt-flow-card h3 { font-size: clamp(19px,2vw,25px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 9px; color: #fff; }
body.vt .vt-flow-card p { font-size: 15px; line-height: 1.58; color: var(--vt-muted); margin: 0; }
@media (max-width: 680px) {
	body.vt .vt-flow-line { left: 23px; }
	body.vt .vt-flow-step, body.vt .vt-flow-step:nth-child(odd), body.vt .vt-flow-step:nth-child(even) { width: 100%; margin-left: 0; padding-left: 60px; padding-right: 0; text-align: left; }
	body.vt .vt-flow-step:nth-child(odd) .vt-flow-node, body.vt .vt-flow-step:nth-child(even) .vt-flow-node { left: 0; right: auto; }
}

/* Image space inside each timeline card (placeholder, wired to intake later). */
body.vt .vt-flow-media { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--vt-line); }
body.vt .vt-flow-media .vt-ph { position: absolute; inset: 0; }
body.vt .vt-flow-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.vt .vt-flow-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 46%, rgba(0,0,0,.5)); pointer-events: none; }

/* Flow v3 — fill the empty side with a large ghost numeral, bigger media,
   richer/taller cards with a gradient-lit active state (fan-overlay feel). */
body.vt .vt-flow { counter-reset: vtflow; }
body.vt .vt-flow-step { counter-increment: vtflow; }
body.vt .vt-flow-step::before {
	content: counter(vtflow, decimal-leading-zero); position: absolute; top: 50%; transform: translateY(-50%);
	font-size: clamp(120px, 15vw, 210px); font-weight: 700; line-height: .8; letter-spacing: -0.05em;
	color: rgba(120,150,255,0.06); z-index: 0; pointer-events: none; -webkit-user-select: none; user-select: none;
	transition: color .5s ease;
}
body.vt .vt-flow-step.is-lit::before { color: rgba(120,150,255,0.12); }
body.vt .vt-flow-step:nth-child(odd)::before { left: calc(100% + 30px); }
body.vt .vt-flow-step:nth-child(even)::before { right: calc(100% + 30px); text-align: right; }
body.vt .vt-flow-media { aspect-ratio: 3 / 2; margin-bottom: 20px; border-radius: 14px; }
body.vt .vt-flow-card { padding: clamp(24px, 2.6vw, 38px); }
body.vt .vt-flow-card h3 { font-size: clamp(22px, 2.5vw, 32px); margin-bottom: 12px; }
body.vt .vt-flow-card p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.62; }
body.vt .vt-flow-step.is-lit .vt-flow-card { background: linear-gradient(158deg, rgba(32,38,78,0.85) 0%, rgba(52,36,102,0.55) 55%, rgba(11,12,20,0.72) 100%); }
@media (max-width: 680px) { body.vt .vt-flow-step::before { display: none; } }

/* Flow v4 — large alternating image-bg panels (fan-panel layout), numerals in-panel. Overrides v2/v3. */
body.vt .vt-flow { max-width: 1120px; }
body.vt .vt-flow-line { z-index: 0; }
body.vt .vt-flow-step { width: 60%; padding-bottom: clamp(30px,4vw,58px); text-align: left; }
body.vt .vt-flow-step:nth-child(odd) { margin-left: 0; padding-right: 0; }
body.vt .vt-flow-step:nth-child(even) { margin-left: 40%; padding-left: 0; }
body.vt .vt-flow-step::before { display: none; }
body.vt .vt-flow-panel { position: relative; z-index: 1; min-height: clamp(340px, 42vh, 470px); border-radius: 22px; overflow: hidden; border: 1px solid var(--vt-line); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px,3vw,46px); transition: transform .5s ease, border-color .5s ease; }
body.vt .vt-flow-bg { position: absolute; inset: 0; z-index: 0; }
body.vt .vt-flow-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(158deg, rgba(18,24,58,0.5) 0%, rgba(40,28,84,0.42) 42%, rgba(6,7,16,0.92) 100%); transition: background .5s ease; }
body.vt .vt-flow-num { position: absolute; top: clamp(20px,2.4vw,30px); left: clamp(24px,2.6vw,36px); z-index: 2; font-size: clamp(42px,4.8vw,66px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: rgba(255,255,255,0.92); text-shadow: 0 2px 22px rgba(0,0,0,0.5); }
body.vt .vt-flow-body { position: relative; z-index: 2; }
body.vt .vt-flow-body h3 { font-size: clamp(24px,2.6vw,34px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; color: #fff; }
body.vt .vt-flow-body p { font-size: clamp(15px,1.15vw,17px); line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0; max-width: 46ch; }
body.vt .vt-flow-step.is-lit .vt-flow-panel { transform: translateY(-3px); border-color: rgba(120,150,255,0.42); }
body.vt .vt-flow-step.is-lit .vt-flow-panel::after { background: linear-gradient(158deg, rgba(40,48,112,0.62) 0%, rgba(72,42,132,0.5) 42%, rgba(8,9,20,0.9) 100%); }
@media (max-width: 760px) {
	body.vt .vt-flow-line { display: none; }
	body.vt .vt-flow-step, body.vt .vt-flow-step:nth-child(odd), body.vt .vt-flow-step:nth-child(even) { width: 100%; margin-left: 0; }
}

/* Comparison table — larger, clearer, with section definition + featured column. */
body.vt .vt-compare { font-size: 16.5px; min-width: 720px; }
body.vt .vt-compare th, body.vt .vt-compare td { padding: 20px 26px; }
body.vt .vt-compare thead th { font-size: 15px; padding-top: 22px; padding-bottom: 22px; background: rgba(var(--vt-accent-rgb),0.10); }
body.vt .vt-compare thead th:first-child { background: transparent; }
body.vt .vt-compare tbody th { font-size: 15.5px; color: #fff; width: 22%; }
body.vt .vt-compare tbody td { color: #ccd4e3; font-size: 16px; line-height: 1.5; }
body.vt .vt-compare tbody tr:nth-child(even) { background: rgba(255,255,255,0.022); }
body.vt .vt-compare th + th, body.vt .vt-compare td + td { border-left: 1px solid rgba(255,255,255,0.06); }
body.vt .vt-compare td.is-feat { background: linear-gradient(180deg, rgba(122,59,208,0.16), rgba(var(--vt-accent-rgb),0.08)); color: #fff; }
body.vt .vt-compare thead th.is-feat { background: linear-gradient(180deg, rgba(122,59,208,0.30), rgba(var(--vt-accent-rgb),0.16)); box-shadow: inset 0 2px 0 rgba(150,120,255,0.65); }


/* Seam fix — inner-page hero fades to transparent at the bottom instead of a
   clipped radial glow, so it blends into the continuous ambient (no hard edge). */
body.vt .vt-phero { background: linear-gradient(180deg, rgba(30,48,104,0.55) 0%, rgba(16,26,58,0.34) 46%, rgba(6,7,16,0) 88%); }
body.vt .vt-phero-glow { display: none; }

/* Game tiles — replace the useless stat chips on games pages with real tiles. */
body.vt .vt-gametiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
body.vt .vt-gametile { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid var(--vt-line); background: linear-gradient(158deg, rgba(24,26,40,0.7), rgba(11,12,20,0.6)); display: flex; flex-direction: column; justify-content: flex-end; transition: transform .35s ease, border-color .35s ease; }
body.vt .vt-gametile:hover { transform: translateY(-4px); border-color: rgba(120,150,255,0.4); }
body.vt .vt-gametile .vt-ph { position: absolute; inset: 0; z-index: 0; }
body.vt .vt-gametile img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
body.vt .vt-gametile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, rgba(4,5,12,0.86)); pointer-events: none; }
body.vt .vt-gametile-cap { position: relative; z-index: 2; padding: 14px 16px; }
body.vt .vt-gametile-name { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #fff; line-height: 1.2; }
body.vt .vt-gametile-cat { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(180,200,255,0.7); margin-top: 4px; }
@media (max-width: 980px) { body.vt .vt-gametiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { body.vt .vt-gametiles { grid-template-columns: repeat(2, 1fr); } }

/* Homepage markets map — full-width immersive band under the statement. */
body.vt .vt-mapband { position: relative; z-index: 1; padding: clamp(20px,4vw,64px) 0 clamp(60px,8vw,110px); }
body.vt .vt-mapband .vt-map-head { text-align: center; max-width: 720px; margin: 0 auto clamp(24px,3vw,44px); }
body.vt .vt-mapband .v2-markets-wrap { max-width: 1500px; margin: 0 auto; padding: 0 clamp(16px,3vw,40px); }

/* =========================================================================
   Interactive studio map (D3 / TopoJSON) — ported from homepage-krea.css,
   rescoped body.home-krea -> body.vt. --kr-* vars resolved to literals /
   --vt-* tokens. Achromatic (white/gold) accents remapped to the VITURE
   blue accent (var(--vt-accent) family) so markers, active states and route pills
   read blue. The .vt-mapband band rules above are the layout wrapper and
   are intentionally left untouched.
   ========================================================================= */
body.vt .v2-markets-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1500px; margin: 0 auto 20px; padding: 0 clamp(16px,3vw,40px); }
body.vt .v2-studio-pill { font-size: 13px; font-weight: 500; padding: 8px 15px; border: 1px solid #262626; border-radius: 9999px; background: transparent; color: #a3a3a3; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
body.vt .v2-studio-pill:hover { color: var(--vt-white); border-color: #404040; }
body.vt .v2-studio-pill.is-active { background: var(--vt-accent); color: #ffffff; border-color: var(--vt-accent); }
body.vt .v2-markets-wrap { position: relative; width: 100%; height: clamp(440px, 48vw, 640px); border: 1px solid #171717; border-radius: 24px; overflow: hidden; background: #0b0f15; }
body.vt .v2-markets-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.vt .v2-markets-svg .country { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.12); stroke-width: 0.5; transition: fill .48s ease; }
body.vt .v2-markets-svg .country.is-highlighted { fill: rgba(212,165,68,0.28); }
body.vt .studio-marker .core { fill: var(--vt-accent); stroke: #0c0c0c; stroke-width: 1; }
body.vt .studio-marker.is-active .core { fill: var(--vt-accent-tint); filter: drop-shadow(0 0 6px rgba(var(--vt-accent-rgb),0.85)); }
body.vt .studio-label { fill: var(--vt-white); font-family: var(--vt-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; }
body.vt .v2-markets-panel { position: absolute; top: 16px; right: 16px; bottom: 16px; width: min(340px, 82%); background: rgba(8,10,16,0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid #262626; border-radius: 14px; padding: 26px 22px; overflow: auto; transform: translateX(calc(100% + 22px)); opacity: 0; transition: transform .4s ease, opacity .4s ease; }
body.vt .v2-markets-panel.is-open { transform: none; opacity: 1; }
body.vt .v2-markets-panel-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: var(--vt-white); font-size: 22px; line-height: 1; cursor: pointer; opacity: 0.6; }
body.vt .v2-markets-panel-close:hover { opacity: 1; }
body.vt .v2-markets-panel-region { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vt-accent-tint); }
body.vt .v2-markets-panel-city { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; margin: 6px 0 2px; }
body.vt .v2-markets-panel-country { font-size: 14px; color: #737373; margin-bottom: 14px; }
body.vt .v2-markets-panel-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #a3a3a3; margin-bottom: 8px; }
body.vt .v2-markets-panel-live-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--vt-accent); box-shadow: 0 0 0 3px rgba(var(--vt-accent-rgb),0.28); }
body.vt .v2-markets-panel-block { margin-top: 10px; border-top: 1px solid #262626; padding-top: 9px; }
body.vt .v2-markets-panel-label { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #525252; margin: 0 0 6px; }
body.vt .v2-markets-panel-tables-row { display: flex; align-items: center; gap: 12px; }
body.vt .v2-markets-panel-tables-count { font-size: 34px; font-weight: 600; letter-spacing: -0.025em; }
body.vt .v2-markets-panel-tables-track { flex: 1; height: 4px; background: #262626; border-radius: 9999px; overflow: hidden; }
body.vt .v2-markets-panel-tables-fill { display: block; height: 100%; background: var(--vt-accent); border-radius: 9999px; transition: width .5s ease; }
body.vt .v2-markets-panel-langs, body.vt .v2-markets-panel-games, body.vt .v2-markets-panel-routes { display: flex; flex-wrap: wrap; gap: 6px; }
body.vt .v2-markets-lang-pill, body.vt .v2-markets-game-pill, body.vt .v2-markets-route-pill { font-size: 12px; padding: 4px 10px; border: 1px solid #262626; border-radius: 9999px; color: #d4d4d5; }
body.vt .v2-markets-route-pill { border-color: rgba(var(--vt-accent-rgb),0.6); color: var(--vt-accent-tint); }
body.vt .v2-markets-panel-spec { font-size: 14px; line-height: 1.5; color: #a3a3a3; margin: 0; }
body.vt .v2-markets-panel-cta { margin-top: 18px; width: 100%; }
@media (max-width: 620px) {
	body.vt .v2-markets-panel { position: static; width: auto; transform: none; opacity: 1; margin-top: 16px; }
}

/* Book-a-meeting — compact "what happens next" (replaces the heavy timeline). */
body.vt .vt-nextsteps { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 16px; }
body.vt .vt-nextsteps li { display: flex; gap: 14px; align-items: flex-start; }
body.vt .vt-nextsteps-n { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; background: radial-gradient(120% 120% at 50% 118%, rgba(var(--vt-accent-rgb),0.9), rgba(var(--vt-accent-rgb),0.15) 60%, transparent), #0b0f1e; border: 1px solid var(--vt-line-2); }
body.vt .vt-nextsteps li div { font-size: 15px; color: var(--vt-muted); line-height: 1.5; }
body.vt .vt-nextsteps li strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }

/* News single — editorial heading size (was rendering at display scale). */
body.vt .vt-post-hero { max-width: 820px; }
body.vt .vt-post-hero h1 { font-size: clamp(23px, 2.5vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; margin: 6px 0 12px; color: #fff; }
body.vt .vt-post-meta { font-size: 14px; letter-spacing: 0.02em; color: var(--vt-muted); margin: 0; }

/* Event bar — floating dismissible CTA (SBC Summit Lisbon). */
body.vt .vt-eventbar { position: fixed; right: 20px; bottom: 20px; z-index: 80; max-width: min(92vw, 620px); opacity: 0; transform: translateX(28px); transition: opacity .5s ease, transform .5s ease; }
body.vt .vt-eventbar[hidden] { display: none; }
body.vt .vt-eventbar.is-in { opacity: 1; transform: translateX(0); }
body.vt .vt-eventbar-inner { display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 18px; background: rgba(12,18,38,0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(120,150,255,0.28); border-radius: 999px; box-shadow: 0 24px 60px -22px rgba(0,0,0,0.85); }
body.vt .vt-eventbar-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vt-accent); animation: vt-ebar-pulse 2s ease-in-out infinite; }
body.vt .vt-eventbar-txt { margin: 0; font-size: 14px; color: #c2c9d8; line-height: 1.3; }
body.vt .vt-eventbar-txt strong { color: #fff; font-weight: 600; }
body.vt .vt-eventbar-cta { flex: none; font-size: 13px; font-weight: 600; color: #fff; background: var(--vt-accent); border-radius: 999px; padding: 9px 16px; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(var(--vt-accent-rgb),0.85); }
body.vt .vt-eventbar-cta:hover { background: var(--vt-accent-l); }
body.vt .vt-eventbar-close { flex: none; background: none; border: none; color: var(--vt-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }
body.vt .vt-eventbar-close:hover { color: #fff; }
@keyframes vt-ebar-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(var(--vt-accent-rgb),0.28); } 50% { box-shadow: 0 0 0 7px rgba(var(--vt-accent-rgb),0.04); } }
@media (max-width: 560px) { body.vt .vt-eventbar-inner { border-radius: 18px; gap: 10px; padding-left: 14px; } body.vt .vt-eventbar-txt { font-size: 12.5px; } }

/* Build-your-casino promo modal (homepage) — centered, dismissible. */
body.vt .vt-promo { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
body.vt .vt-promo[hidden] { display: none; }
body.vt .vt-promo-backdrop { position: absolute; inset: 0; background: rgba(4,5,14,0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .34s ease; }
body.vt .vt-promo.is-open .vt-promo-backdrop { opacity: 1; }
body.vt .vt-promo-card { position: relative; z-index: 1; width: min(440px, 100%); border-radius: 22px; padding: 42px 34px 34px; border: 1px solid rgba(120,150,255,0.28); box-shadow: 0 34px 90px -22px rgba(0,0,0,0.8); transform: translateY(18px) scale(.98); opacity: 0; transition: transform .34s cubic-bezier(.2,.7,.2,1), opacity .34s ease; }
body.vt .vt-promo.is-open .vt-promo-card { transform: none; opacity: 1; }
body.vt .vt-promo-close { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: rgba(255,255,255,0.7); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
body.vt .vt-promo-close:hover { color: #fff; }
body.vt .vt-promo-k { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 14px; }
body.vt .vt-promo-title { color: #fff; font-size: clamp(28px, 5vw, 38px); line-height: 1.02; margin: 0 0 12px; }
body.vt .vt-promo-p { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,0.86); margin: 0 0 26px; }
body.vt .vt-promo-cta .vt-btn { width: 100%; }

/* ============================================================
   Map section v2 — full-bleed map, bigger pills, fan-style panel
   ============================================================ */
body.vt .vt-mapband { padding: 0 0 clamp(50px,7vw,96px); }
body.vt .vt-map-intro { text-align: center; max-width: 780px; margin: 0 auto; padding: clamp(6px,1.4vw,18px) 24px clamp(22px,3vw,34px); font-size: clamp(17px,1.5vw,21px); line-height: 1.5; color: #c4ccdb; }
body.vt .vt-mapband .v2-markets-nav { max-width: none; margin: 0 auto 22px; padding: 0 clamp(16px,4vw,56px); gap: 10px; }
body.vt .vt-mapband .v2-markets-wrap { max-width: none; width: 100%; margin: 0; padding: 0; }

/* Pills — bigger, legible, exciting */
body.vt .v2-studio-pill { font-size: 16px; font-weight: 600; padding: 12px 24px; border-color: rgba(255,255,255,0.14); color: #c3cad8; }
body.vt .v2-studio-pill:hover { color: #fff; border-color: rgba(120,150,255,0.5); background: rgba(var(--vt-accent-rgb),0.08); }
body.vt .v2-studio-pill.is-active { background: var(--vt-accent); color: #fff; border-color: var(--vt-accent); box-shadow: 0 12px 28px -10px rgba(var(--vt-accent-rgb),0.9); transform: translateY(-1px); }

/* Map canvas — full-bleed and taller */
body.vt .v2-markets-wrap { height: clamp(520px, 58vw, 820px); border-radius: 0; border-left: none; border-right: none; }
body.vt .studio-label { font-size: 12.5px; }

/* Studio panel — fan-style: dealer image header, gradient, bigger text, wider, no scrollbar */
body.vt .v2-markets-panel { width: min(460px, 92%); top: 20px; right: 20px; bottom: 20px; padding: 0; border-radius: 22px; border-color: rgba(120,150,255,0.24); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; background: linear-gradient(162deg, rgba(22,26,60,0.96) 0%, rgba(46,30,94,0.9) 52%, rgba(9,10,22,0.97) 100%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8); }
body.vt .v2-markets-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.vt .v2-markets-panel-media { position: relative; height: 132px; overflow: hidden; border-radius: 22px 22px 0 0; }
body.vt .v2-markets-panel-media .vt-ph { position: absolute; inset: 0; }
body.vt .v2-markets-panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.vt .v2-markets-panel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 34%, rgba(12,10,30,0.9)); }
body.vt .v2-markets-panel-cap { position: absolute; left: 24px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(200,215,255,0.9); }
body.vt .v2-markets-panel > :not(.v2-markets-panel-media):not(.v2-markets-panel-close) { margin-left: 26px; margin-right: 26px; }
body.vt .v2-markets-panel-region { margin-top: 15px; font-size: 13px; letter-spacing: 0.12em; }
body.vt .v2-markets-panel-city { font-size: 32px; margin: 5px 0 2px; }
body.vt .v2-markets-panel-country { font-size: 15px; margin-bottom: 10px; }
body.vt .v2-markets-panel-live { font-size: 13px; margin-bottom: 4px; }
body.vt .v2-markets-panel-label { font-size: 12px; color: #808aa4; }
body.vt .v2-markets-panel-tables-count { font-size: 34px; }
body.vt .v2-markets-lang-pill, body.vt .v2-markets-game-pill, body.vt .v2-markets-route-pill { font-size: 13.5px; padding: 6px 13px; }
body.vt .v2-markets-panel-spec { font-size: 15px; line-height: 1.55; color: #b3bccc; }
body.vt .v2-markets-panel-close { top: 14px; right: 16px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.45); opacity: 1; display: flex; align-items: center; justify-content: center; }
body.vt .v2-markets-panel-cta { margin: 16px 26px 22px; width: calc(100% - 52px); }
@media (max-width: 620px) {
	body.vt .v2-markets-panel { width: auto; }
	body.vt .v2-markets-panel > :not(.v2-markets-panel-media):not(.v2-markets-panel-close) { margin-left: 20px; margin-right: 20px; }
}

/* Map section v3 — contained 2-column layout: map panel + always-on 40% detail. */
body.vt .vt-mapband .v2-markets-nav { max-width: 1440px; }
body.vt .v2-markets-layout { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px,3vw,40px); display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
body.vt .vt-mapband .v2-markets-wrap { max-width: none; width: 100%; height: clamp(480px, 44vw, 660px); margin: 0; padding: 0; border-radius: 20px; border: 1px solid #171717; }
body.vt .v2-markets-panel { position: relative; top: auto; right: auto; bottom: auto; width: auto; height: 100%; min-height: clamp(480px, 44vw, 660px); transform: none; opacity: 1; overflow-y: auto; }
body.vt .v2-markets-panel.is-open { transform: none; }
body.vt .v2-markets-panel-close { display: none; }
body.vt .v2-markets-panel-media { height: 200px; }

/* ============================================================
   Region map (VITURE) — the studio map defined by the four
   commercial regions. Cohesive with the homepage: void ground,
   faint blue graticule, gold key accents, one rounded panel.
   Markup: template-home-vt.php; driver: assets/js/map-regions.js.
   ============================================================ */
body.vt .vt-mapband { padding: clamp(30px,5vw,70px) 0 clamp(70px,9vw,130px); }
body.vt .vt-head--center { text-align: center; }
body.vt .vt-mapband .vt-head { max-width: 780px; margin: 0 auto clamp(28px,4vw,52px); }

body.vt .vt-map { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px,3vw,40px); }
body.vt .vt-map-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 22px; }
body.vt .vt-map-pill { font-family: var(--vt-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: rgba(236,239,247,0.7); background: rgba(255,255,255,0.04); border: 1px solid var(--vt-line-2); border-radius: 999px; padding: 11px 24px; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
body.vt .vt-map-pill:hover { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); }
body.vt .vt-map-pill.is-active { color: #fff; background: rgba(var(--vt-accent-rgb),0.16); border-color: rgba(var(--vt-accent-rgb),0.6); box-shadow: 0 0 24px -10px rgba(var(--vt-accent-rgb),0.9); }

body.vt .vt-map-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 20px; align-items: stretch; }
body.vt .vt-map-canvas { position: relative; width: 100%; height: clamp(460px,42vw,640px); border: 1px solid var(--vt-line-2); border-radius: 24px; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, rgba(20,32,72,0.6) 0%, transparent 55%), #070a14; }
body.vt .vt-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.vt .vt-map-svg .country { fill: rgba(255,255,255,0.045); stroke: rgba(255,255,255,0.10); stroke-width: 0.5; transition: fill .5s ease; }
/* Region tint locked to brand gold per client 2026-08 (independent of --vt-accent). */
body.vt .vt-map-svg .country.is-highlighted { fill: rgba(212,165,68,0.34); }
body.vt .vt-map-svg .studio-marker .core { fill: var(--vt-accent); stroke: #fff; stroke-width: 1; filter: drop-shadow(0 0 6px rgba(var(--vt-accent-rgb),0.9)); transition: opacity .4s ease; }
body.vt .vt-map-svg .studio-marker.is-active .core { fill: #e6c063; filter: drop-shadow(0 0 8px rgba(201,152,47,0.95)); }
body.vt .vt-map-svg .studio-label { fill: rgba(255,255,255,0.86); font-family: var(--vt-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; paint-order: stroke; stroke: rgba(4,6,14,0.7); stroke-width: 2.4px; }

body.vt .vt-map-panel { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(120,150,255,0.24); border-radius: 24px; overflow: hidden; background: linear-gradient(162deg, rgba(22,26,60,0.96) 0%, rgba(30,26,74,0.9) 52%, rgba(9,10,22,0.97) 100%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8); }
body.vt .vt-map-panel-media { position: relative; height: 168px; flex: none; overflow: hidden; }
body.vt .vt-map-panel-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
body.vt .vt-map-panel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(12,10,30,0.92)); }
body.vt .vt-map-panel-cap { position: absolute; left: 24px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(200,215,255,0.9); }
body.vt .vt-map-panel-body { display: flex; flex-direction: column; padding: 22px 26px 26px; }
body.vt .vt-map-panel-k { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #e6c063; }
body.vt .vt-map-panel-name { font-size: clamp(26px,2.4vw,34px); font-weight: 600; letter-spacing: -0.025em; color: #fff; margin: 5px 0 10px; }
body.vt .vt-map-panel-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #b7c0d6; margin-bottom: 12px; }
body.vt .vt-map-panel-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--vt-accent); box-shadow: 0 0 0 3px rgba(var(--vt-accent-rgb),0.28); animation: vt-ebar-pulse 2s ease-in-out infinite; }
body.vt .vt-map-panel-tables { font-size: 15px; color: #c4ccdb; margin-bottom: 4px; }
body.vt .vt-map-panel-tables b { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin-right: 6px; }
body.vt .vt-map-panel-block { margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; }
body.vt .vt-map-panel-block h6 { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #808aa4; margin: 0 0 8px; }
body.vt .vt-map-panel-countries { font-size: 15px; color: #d7deec; margin: 0; }
body.vt .vt-map-panel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.vt .vt-map-chip { font-size: 13px; padding: 5px 12px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; color: #d4d4d5; }
body.vt .vt-map-chip.gold { border-color: rgba(201,152,47,0.55); color: #e6c063; }
body.vt .vt-map-panel-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
body.vt .vt-map-panel-ctas .vt-btn { flex: 1 1 auto; justify-content: center; }

@media (max-width: 940px) {
	body.vt .vt-map-layout { grid-template-columns: 1fr; }
	body.vt .vt-map-canvas { height: clamp(360px,60vw,520px); }
}

/* Immersive unified map: map + detail as ONE seamless surface. One outer border,
   no gap, no inner card borders; the detail is dark glass joined to the map. */
body.vt .vt-mapband .v2-markets-layout { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 0; border: 1px solid rgba(120,150,255,0.16); border-radius: 24px; overflow: hidden; background: #070a14; }
body.vt .vt-mapband .v2-markets-wrap { border: none; border-radius: 0; background: #070a14; height: clamp(520px, 46vw, 700px); }
body.vt .vt-mapband .v2-markets-panel { border: none; border-left: 1px solid rgba(120,150,255,0.12); border-radius: 0; background: linear-gradient(180deg, rgba(22,28,58,0.5) 0%, rgba(9,11,22,0.72) 100%); box-shadow: none; min-height: 0; height: auto; }
body.vt .vt-mapband .v2-markets-panel-media { border-radius: 0; height: 168px; }
/* Compact live/tables meta row (replaces the oversized count + comparison bar) */
body.vt .v2-markets-panel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; margin-bottom: 2px; }
body.vt .v2-markets-panel-meta .v2-markets-panel-live { margin: 0; }
body.vt .v2-markets-panel-tables { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa4bd; }
body.vt .v2-markets-panel-tables b { font-weight: 700; color: #fff; font-size: 15px; letter-spacing: -0.01em; }

@media (max-width: 900px) {
	body.vt .vt-mapband .v2-markets-layout { grid-template-columns: 1fr; }
	body.vt .vt-mapband .v2-markets-panel { min-height: 0; border-left: none; border-top: 1px solid rgba(120,150,255,0.12); }
}

/* ============================================================
   Image-led studio panel (VITURE homepage) — the native-dealer
   photo dominates; a compact body carries only country, live +
   table count, native languages and the CTA. Replaces the old
   language / games / routes / speciality pill stack.
   ============================================================ */
body.vt .v2-markets-panel.v2-markets-panel--photo { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
/* Photo fills all space left over above the compact body. */
body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-media { flex: 1 1 auto; height: auto; min-height: 300px; border-radius: 0; }
body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-media::after { background: linear-gradient(180deg, transparent 42%, rgba(9,11,22,0.5) 74%, rgba(9,11,22,0.94)); }
body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-cap { left: 26px; bottom: 16px; font-size: 12px; letter-spacing: 0.08em; }
/* Compact body. Side inset comes from the panel's existing child-margin rule;
   here we set only the vertical rhythm and neutralize the pill-era CTA insets. */
body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-body { flex: none; padding: 20px 0 24px; }
body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-region { margin-top: 0; }
body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-meta { margin-top: 12px; margin-bottom: 0; }
body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-dealer-langs { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #aeb7cc; }
body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-cta { margin: 18px 0 0; width: 100%; }
@media (max-width: 900px) {
	body.vt .v2-markets-panel.v2-markets-panel--photo .v2-markets-panel-media { min-height: 240px; }
}

/* ===== Gold homepage variation: flip the accent from blue to logo gold ===== */
body.vt.home-gold {
	--vt-accent: #d4a544;
	--vt-accent-rgb: 212,165,68;
	--vt-accent-tint: #f0d27a;
	--vt-accent-tint-rgb: 224,196,120;
	--vt-accent-d: #b8860b;
	--vt-accent-l: #e6c15a;
	--vt-signal: linear-gradient(150deg, #efce6e 0%, #c9962a 100%);
	--vt-aurora: linear-gradient(120deg, #f6e08a 0%, #e6b93f 42%, #d4a544 72%, #a9791f 100%);
}
/* Primary (gold) buttons carry dark text for contrast */
body.home-gold .vt-btn--blue,
body.home-gold .vt-btn--blue:hover { color: #1c1403; }

/* =========================================================================
   SBC Summit Lisbon landing page (template-sbc-lisbon.php). Conversion-first:
   form above the fold, scannable copy, light. Scoped to body:is(.page-sbc-lisbon,.page-ice-barcelona).
   ========================================================================= */
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vt-accent); margin-right: 9px; vertical-align: middle; animation: sbc-pulse 2s ease-in-out infinite; }
@keyframes sbc-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--vt-accent-rgb),0.28); } 50% { box-shadow: 0 0 0 7px rgba(var(--vt-accent-rgb),0.04); } }

/* Hero: copy + form, two columns, form above the fold */
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-lp-hero { padding-top: clamp(178px, 20vh, 216px); padding-bottom: clamp(36px, 5vw, 64px); }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-lp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-lp-h1 { font-weight: 500; font-size: clamp(38px, 4.8vw, 66px); line-height: 1.02; letter-spacing: -0.035em; margin: 16px 0 0; color: #fff; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-lp-strap { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--vt-muted); margin: 18px 0 0; max-width: 46ch; }

/* Scannable benefit checks */
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-checks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.4; color: #dfe3ec; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; color: var(--vt-accent-tint); background: rgba(var(--vt-accent-rgb),0.16); border: 1px solid rgba(var(--vt-accent-tint-rgb),0.32); }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-check .vt-ico { width: 15px; height: 15px; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-trust { margin: 26px 0 0; font-size: 13.5px; letter-spacing: 0.02em; color: var(--vt-muted); }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-trust strong { color: #fff; font-weight: 600; }

/* Form card */
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-formcard { position: relative; z-index: 2; border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; padding: clamp(24px, 2.4vw, 34px); background: rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 50px 110px -46px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.08); }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-formcard-head { margin-bottom: 18px; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-formcard-h { font-size: clamp(22px, 2vw, 27px); font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 0; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-formcard-sub { font-size: 14.5px; color: var(--vt-muted); margin: 6px 0 0; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-submit { width: 100%; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .meeting-form-cta { margin-top: 6px; }
@media (max-width: 900px) {
	body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-lp-grid { grid-template-columns: 1fr; gap: 30px; }
	body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-formcard { order: -1; }
}
@media (max-width: 400px) { body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-form-2col { grid-template-columns: 1fr; } }

/* Light event-facts bar */
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-factbar-sec { padding: clamp(6px, 1vw, 14px) 0 clamp(30px, 4vw, 52px); }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-factbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--vt-line); border: 1px solid var(--vt-line); border-radius: 16px; overflow: hidden; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-fact { display: flex; flex-direction: column; gap: 5px; padding: clamp(16px, 1.8vw, 22px); background: rgba(10,14,28,0.5); }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-fact-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-accent-tint); }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-fact-v { font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; letter-spacing: -0.015em; color: #fff; line-height: 1.2; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-fact-v.sbc-needs { color: rgba(255,255,255,0.55); font-style: italic; }
@media (max-width: 720px) { body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-factbar { grid-template-columns: 1fr 1fr; } }

/* Light close */
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-close-sec { padding: clamp(30px, 5vw, 60px) 0 clamp(50px, 7vw, 90px); }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--vt-line-2); border-radius: 22px; background: rgba(10,14,28,0.5); }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-close-h { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 0; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-close-p { font-size: 15.5px; color: var(--vt-muted); margin: 6px 0 0; }
body:is(.page-sbc-lisbon,.page-ice-barcelona) .sbc-close-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Technology: AI-on-the-floor video lead-in ---- */
body.vt .vt-ai-media { position: relative; margin: clamp(28px, 3.4vw, 48px) 0 clamp(20px, 2.4vw, 32px); border: 1px solid var(--vt-line-2); border-radius: 24px; overflow: hidden; aspect-ratio: 21 / 9; box-shadow: 0 50px 110px -55px rgba(0,0,0,0.85); }
body.vt .vt-ai-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
body.vt .vt-ai-media-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,8,20,0.30) 0%, rgba(6,8,20,0.10) 42%, rgba(6,8,20,0.72) 84%, rgba(5,7,18,0.94) 100%), radial-gradient(120% 100% at 4% 104%, rgba(var(--vt-accent-rgb),0.34) 0%, transparent 58%); }
body.vt .vt-ai-media-cap { position: absolute; left: 0; bottom: 0; z-index: 2; max-width: 60ch; padding: clamp(22px, 3vw, 44px); }
body.vt .vt-ai-media-cap .vt-eyebrow { margin-bottom: 12px; }
body.vt .vt-ai-media-cap p { margin: 0; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; color: rgba(236,239,247,0.94); }
@media (max-width: 720px) {
	body.vt .vt-ai-media { aspect-ratio: 4 / 3; }
	body.vt .vt-ai-media-cap { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	body.vt .vt-ai-video { display: none; }
	body.vt .vt-ai-media { background: var(--vt-void) center/cover no-repeat; }
}

/* ============ 2026-08-30 client feedback pass ============ */

/* Section head as a row: heading left, textlink right (homepage news). */
body.vt .vt-head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Map panel note (regions with no studios yet, e.g. North America). */
body.vt .vt-map-panel-note { font-size: 14.5px; line-height: 1.55; color: #c4ccdb; margin: 0 0 14px; }

/* Lite YouTube embeds (vivo_vt_youtube): thumbnail button swapped for an
   iframe on click by viture.js. */
body.vt .vt-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--vt-line-2); border-radius: 18px; overflow: hidden; background: #06070c; cursor: pointer; text-align: left; }
body.vt .vt-yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
body.vt .vt-yt:hover img { transform: scale(1.04); }
body.vt .vt-yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.72) 100%); pointer-events: none; }
body.vt .vt-yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(10,14,24,0.72); border: 1px solid rgba(255,255,255,0.35); color: #fff; backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease; }
body.vt .vt-yt:hover .vt-yt-play { background: rgba(212,165,68,0.85); transform: translate(-50%, -50%) scale(1.06); }
body.vt .vt-yt-play svg { width: 26px; height: 26px; }
body.vt .vt-yt-title { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 2; font-size: 14.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
body.vt .vt-yt.is-playing { cursor: default; }
body.vt .vt-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.vt .vt-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); }
body.vt .vt-video-grid--3 { grid-template-columns: repeat(3, 1fr); }
body.vt .vt-video-feature { margin-bottom: clamp(16px, 2vw, 26px); }
@media (max-width: 960px) { body.vt .vt-video-grid, body.vt .vt-video-grid--3 { grid-template-columns: 1fr; } }

/* Map panel: full-bleed region image behind the whole card, info overlaid
   on a bottom scrim (client 2026-08-30). Overrides the stacked media+body
   layout defined above. */
body.vt .vt-map-panel { min-height: 560px; }
body.vt .vt-map-panel-media { position: absolute; inset: 0; height: auto; z-index: 0; }
body.vt .vt-map-panel-media::after { background: linear-gradient(180deg, rgba(10,9,26,0.12) 0%, rgba(10,9,26,0.42) 38%, rgba(8,8,22,0.90) 66%, rgba(8,8,22,0.97) 100%); }
body.vt .vt-map-panel-cap { bottom: auto; top: 16px; left: 24px; }
body.vt .vt-map-panel-body { position: relative; z-index: 2; margin-top: auto; padding-top: 0; }
body.vt .vt-map-panel-block { margin-top: 10px; padding-top: 10px; }
body.vt .vt-map-panel-name { margin-bottom: 6px; }
body.vt .vt-map-panel-live { margin-bottom: 8px; }

/* News hero follow icons: hero context resets the share-links auto margin. */
body.vt .vt-phero-inner .vt-share-links { margin-left: 0; margin-top: 22px; }

/* Card media strip (Game Shows format tiles): image/placeholder above the
   card text, inside the card padding. */
body.vt .vt-card-media { aspect-ratio: 16 / 9; height: auto; min-height: 0; border-radius: 12px; overflow: hidden; margin-bottom: 16px; background-size: cover; background-position: center top; }

/* Cloud Chroma environment gallery. */
body.vt .vt-ccgal { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
body.vt .vt-ccgal-tile { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--vt-line-2); aspect-ratio: 16 / 9; }
body.vt .vt-ccgal-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
body.vt .vt-ccgal-tile:hover img { transform: scale(1.045); }
@media (max-width: 960px) { body.vt .vt-ccgal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { body.vt .vt-ccgal { grid-template-columns: 1fr; } }

/* Vivo logo mark on the careers teams fan cards. */
/* Logo-only cards (Careers teams: no photo) center the mark as the focal point. */
body.vt .vt-rfan-logo { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); height: clamp(46px, 5.4vw, 68px); width: auto; opacity: 0.95; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); }

/* BambooHR job board embed (careers). The widget injects its own markup;
   the light band keeps its white-leaning styles legible. */
body.vt .vt-jobs-embed { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; padding: clamp(18px, 2.6vw, 36px); box-shadow: 0 18px 44px -30px rgba(0,0,0,0.4); }
body.vt .vt-jobs-embed #BambooHR { min-height: 320px; }

/* SBC Lisbon megamenu promo: event image on top of the promo card. The
   artwork is 738x488 (3:2); match that ratio so its text is never cropped.
   The image is its own link to the SBC page alongside the button. */
body.vt .vt-mega-promo--sbc { padding: 0; overflow: hidden; }
body.vt .vt-mega-promo-img { display: block; width: 100%; aspect-ratio: 738 / 488; background-size: cover; background-position: center top; transition: opacity .2s ease; }
body.vt a.vt-mega-promo-img:hover { opacity: 0.88; }
body.vt .vt-mega-promo--sbc .vt-mega-promo-body { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 20px; }
body.vt .vt-mega-promo--sbc .vt-mega-promo-k { margin-bottom: 6px; }
body.vt .vt-mega-promo--sbc h3 { font-size: 19px; }
body.vt .vt-mega-promo--sbc p { font-size: 13px; margin-bottom: 14px; }
body.vt .vt-mega-promo--sbc .vt-btn { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   Integration availability callout (.vt-apicall). Two surfaces:
   1. Route pages: a bordered bar directly under the hero (via
      vivo_vt_api_strip in helpers.php), one chip per distribution option,
      each anchor-linking to the page's #integration section.
   2. Homepage: the --band variant under the route fan, with full benefit
      cards per API plus per-route availability tags.
   Also styles the small API tags on the fan cards + route focus modal. */
body.vt .vt-apicall { position: relative; padding: clamp(14px, 2vw, 26px) 0 0; }
body.vt .vt-apicall-bar { position: relative; overflow: hidden; border: 1px solid var(--vt-line-2); border-radius: 22px; padding: clamp(22px, 2.6vw, 36px); display: grid; grid-template-columns: minmax(230px, 0.9fr) 2fr; gap: clamp(20px, 2.8vw, 44px); align-items: center; background: linear-gradient(140deg, rgba(var(--vt-accent-rgb),0.14) 0%, rgba(255,255,255,0.03) 45%, rgba(var(--vt-accent-rgb),0.05) 100%), #0a0b12; }
body.vt .vt-apicall-bar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(56% 90% at 12% 0%, rgba(var(--vt-accent-rgb),0.2), transparent 70%); pointer-events: none; }
body.vt .vt-apicall-intro { position: relative; }
body.vt .vt-apicall-h { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; color: #fff; margin: 10px 0; }
body.vt .vt-apicall-p { font-size: 15px; line-height: 1.55; color: var(--vt-muted); margin: 0; }
body.vt .vt-apicall-chips { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.4vw, 18px); }
body.vt .vt-apicall-chips--1 { grid-template-columns: 1fr; }
body.vt .vt-apicall-chips--3 { grid-template-columns: repeat(3, 1fr); }
body.vt .vt-apicall-chip { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; background: rgba(255,255,255,0.05); border: 1px solid var(--vt-line-2); border-radius: 16px; padding: clamp(16px, 1.7vw, 24px); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
body.vt .vt-apicall-chip:hover { transform: translateY(-3px); border-color: rgba(var(--vt-accent-tint-rgb),0.6); background: rgba(var(--vt-accent-rgb),0.1); }
body.vt .vt-apicall-chip-k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-accent-tint); }
body.vt .vt-apicall-chip-h { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.015em; color: #fff; }
body.vt .vt-apicall-chip-p { font-size: 14.5px; line-height: 1.5; color: rgba(236,239,247,0.75); }
body.vt .vt-apicall-chip-cue { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--vt-accent-tint); opacity: 0; transform: translateY(3px); transition: opacity .2s ease, transform .2s ease; }
body.vt .vt-apicall-chip:hover .vt-apicall-chip-cue { opacity: 1; transform: none; }

/* Homepage band variant: full benefit cards under the route fan. */
body.vt .vt-apicall--band { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 120px); }
body.vt .vt-apicall-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 30px); }
body.vt .vt-apicall-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--vt-line-2); border-radius: 22px; padding: clamp(24px, 2.8vw, 40px); background: linear-gradient(160deg, rgba(var(--vt-accent-rgb),0.12), rgba(255,255,255,0.02) 55%), #0a0b12; }
body.vt .vt-apicall-card-h { font-size: clamp(22px, 2.1vw, 29px); font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 10px 0 8px; }
body.vt .vt-apicall-card-p { font-size: 15.5px; line-height: 1.6; color: rgba(236,239,247,0.78); margin: 0 0 18px; }
body.vt .vt-apicall-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
body.vt .vt-apicall-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: rgba(236,239,247,0.85); }
body.vt .vt-apicall-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(var(--vt-accent-tint-rgb),0.55); background: rgba(var(--vt-accent-rgb),0.14); }
body.vt .vt-apicall-list li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 4px; border-left: 1.8px solid var(--vt-accent-tint); border-bottom: 1.8px solid var(--vt-accent-tint); transform: rotate(-45deg); }
body.vt .vt-apicall-card .vt-tags { margin-top: auto; padding-top: 6px; }
body.vt .vt-apicall-more { text-align: center; margin: clamp(18px, 2.2vw, 24px) 0 0; }
/* Keep "Integrate once. Go live your way." on one line above mobile; the head is
   widened past its 760px default so the nowrap line is never clipped. Wraps
   naturally on small screens (handled in the max-width: 680px block below). */
body.vt .vt-apicall .vt-head { max-width: 960px; }
body.vt .vt-apicall .vt-heading { white-space: nowrap; }
/* CTA row under the two API cards. */
body.vt .vt-apicall-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: clamp(30px, 4vw, 44px) 0 0; }

/* API availability tags on the fan cards + route focus modal. */
body.vt .vt-rfan-apis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
body.vt .vt-rfan-card--2 .vt-rfan-apis { justify-content: flex-end; }
body.vt .vt-rfan-api, body.vt .vt-focus-api { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(236,239,247,0.88); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 4px 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.vt .vt-focus-apis { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
body.vt .vt-focus-api { font-size: 12px; padding: 5px 12px; }

@media (max-width: 900px) {
	body.vt .vt-apicall-bar { grid-template-columns: 1fr; align-items: start; }
	body.vt .vt-apicall-chips, body.vt .vt-apicall-chips--3, body.vt .vt-apicall-grid { grid-template-columns: 1fr; }
	body.vt .vt-apicall-chip-cue { opacity: 1; transform: none; }
}
@media (max-width: 680px) {
	body.vt .vt-apicall .vt-heading { white-space: normal; }
	body.vt .vt-apicall-cta .vt-btn { flex: 1 1 auto; justify-content: center; }
}

/* Device-cutout imagery inside a flow split (Tournament Tool laptop/monitor
   PNGs): size to the column, keep the transparent surround. */
body.vt .vt-split-media--flow img { display: block; width: 100%; height: auto; }

/* "All news" link stacked under the news-section heading. */
body.vt .vt-head-more { margin: 12px 0 0; }

/* ============ 2026-09-02 client feedback pass ============ */

/* 1. Branded build-your-casino popup: two-up media header (AI recognition
   loop + Cloud Chroma set) above the logo, kicker and copy. Card padding
   moves onto .vt-promo-body so the imagery runs edge to edge. */
body.vt .vt-promo-card { width: min(560px, 100%); padding: 0; overflow: hidden; max-height: calc(100vh - 48px); overflow-y: auto; }
body.vt .vt-promo-media { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
body.vt .vt-promo-media-tile { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
body.vt .vt-promo-media-tile video,
body.vt .vt-promo-media-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.vt .vt-promo-media-tag { position: absolute; left: 10px; bottom: 10px; z-index: 1; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(4,5,14,0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 5px 10px; }
body.vt .vt-promo-body { padding: 26px 30px 30px; }
body.vt .vt-promo-logo { display: block; height: 26px; width: auto; margin-bottom: 14px; }
/* Circular dark chip so the close control stays visible over the light media
   tiles at the top of the card, not just over dark areas. */
body.vt .vt-promo-close { z-index: 2; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; background: rgba(6,8,20,0.6); border: 1px solid rgba(255,255,255,0.28); color: #fff; text-shadow: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 2px 12px rgba(0,0,0,0.45); }
body.vt .vt-promo-close:hover { background: rgba(6,8,20,0.85); color: #fff; }
/* Secondary dismiss: continue to the site without opening the builder. */
body.vt .vt-promo-continue { display: block; margin: 12px auto 0; padding: 6px 10px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.68); cursor: pointer; transition: color .2s ease; }
body.vt .vt-promo-continue:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* 2. Footer contact hover hints: a small line that unfolds under each email
   on hover/focus (sales = business partnerships, marketing = media partners) */
body.vt .vt-foot-mail::after { content: attr(data-hint); display: block; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vt-accent-tint); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .22s ease, opacity .22s ease; }
body.vt .vt-foot-mail:hover::after,
body.vt .vt-foot-mail:focus-visible::after { max-height: 18px; opacity: 1; }

/* 5. Footer social block: titled and slightly larger so it reads as a
   destination rather than an afterthought */
body.vt .vt-foot-social-k { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-muted); margin-top: 24px; }
body.vt .vt-foot-social { margin-top: 12px; }
body.vt .vt-foot-social .vt-share-btn { width: 46px; height: 46px; border-radius: 12px; }
body.vt .vt-foot-social .vt-share-btn svg { width: 21px; height: 21px; }

/* 4. Megamenu route links: API availability line under each way to go live.
   Deliberately quiet (tiny, muted, no accent) so the route names keep the
   hierarchy; restyled 2026-09-02 after client flagged the first cut as busy. */
body.vt .vt-mega-link .vt-mega-apis { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vt-muted); opacity: 0.72; margin-top: 3px; }

/* 3. Twin API panels: deploys-across route tags (folded in from the removed
   homepage integration-options band) */
body.vt .vt-apanel-routes { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
body.vt .vt-apanel-routes-k { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 10px; }
body.vt .vt-apanel-routes .vt-tag { font-size: 12.5px; padding: 6px 12px; }

/* 6/7. Technology AI section: Vivo Studios link under the capability cards */
body.vt .vt-ai-more { margin: 22px 0 0; }

/* Regions split (2026-09-02): the bar now carries 7 items, so in the band
   between the burger breakpoint and comfortable desktop, protect the logo
   from flex-crush and tighten the menu instead. */
body.vt .vt-logo { flex-shrink: 0; }
@media (min-width: 941px) and (max-width: 1120px) {
	body.vt .vt-logo img { height: 44px; }
	body.vt .vt-menu { gap: 14px; }
	body.vt .vt-menu a, body.vt .vt-menu .vt-menu-parent { font-size: 14px; }
}

/* API callout, soft-gold register (restored under the route fan 2026-09-02).
   The section re-tints every accent-driven atom (eyebrow, chip kickers, list
   ticks, card wash) by overriding the accent vars with a muted gold, and the
   route pills become real links with a quiet gold hover. */
body.vt .vt-apicall--gold { --vt-accent: #c9982f; --vt-accent-rgb: 201,152,47; --vt-accent-tint: #d9b878; --vt-accent-tint-rgb: 217,184,120; }
body.vt .vt-apicall--gold .vt-grad-text { background: linear-gradient(100deg, #ecd7a0, #c9982f); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.vt .vt-apicall--gold .vt-apicall-card { border-color: rgba(201,152,47,0.20); background: linear-gradient(160deg, rgba(201,152,47,0.09), rgba(255,255,255,0.02) 55%), #0a0b12; }
body.vt .vt-apicall--gold a.vt-tag { color: rgba(236,239,247,0.82); transition: color .2s ease, border-color .2s ease, background .2s ease; }
body.vt .vt-apicall--gold a.vt-tag:hover,
body.vt .vt-apicall--gold a.vt-tag:focus-visible { color: #fff; border-color: rgba(201,152,47,0.55); background: rgba(201,152,47,0.12); }
body.vt .vt-apicall--gold .vt-textlink { border-image: linear-gradient(90deg, #ecd7a0, #c9982f) 1; }

/* Region strip along the base of every megamenu (2026-09-02): Regions left
   the top-level bar; one slim shared row keeps every region a hover away.
   The doubled .vt-menu selectors outrank the scrolled-nav link recolour so
   the strip stays legible on the dark glass panel in both nav states. */
body.vt .vt-mega-regions { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--vt-line-2); }
body.vt .vt-mega-regions-k { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-ash); margin-right: 2px; }
body.vt .vt-menu .vt-mega-regions a,
body.vt .vt-topwrap.is-scrolled .vt-menu .vt-mega-regions a { font-size: 13.5px; font-weight: 500; color: var(--vt-muted); text-shadow: none; }
body.vt .vt-menu .vt-mega-regions a:hover,
body.vt .vt-topwrap.is-scrolled .vt-menu .vt-mega-regions a:hover { color: #fff; }

/* Regional studios grid: game-shows video card fills the odd grid cell
   (2026-09-03, Africa first). Video runs edge to edge behind the copy. */
body.vt .vt-card--video { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 320px; }
body.vt .vt-card--video .vt-card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
body.vt .vt-card--video .vt-card-video-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,5,14,0.12), rgba(4,5,14,0.28) 55%, rgba(4,5,14,0.85)); }
body.vt .vt-card--video .vt-card-video-body { position: relative; z-index: 1; }
body.vt .vt-card--video .vt-card-k { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
body.vt .vt-card--video h3 { text-shadow: 0 1px 10px rgba(0,0,0,0.55); margin-bottom: 6px; }

/* Self-hosted MP4 video cards (vivo_vt_mp4): the playing <video> fills the
   card exactly as the YouTube iframe does. */
body.vt .vt-yt video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }

/* Game Shows: the reel fills the top split like a background image would */
body.vt .vt-split-media--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Ghost buttons on light bands (2026-09-03): the base ghost is styled for
   dark grounds (white text, faint white border), which vanishes on .vt-lite
   and .vt-section--light. Dark-ink variant applies wherever a ghost button
   lands on a light section, current and future. */
body.vt .vt-lite .vt-btn--ghost,
body.vt .vt-section--light .vt-btn--ghost { color: #14151a; border-color: rgba(20,21,26,0.30); background: rgba(20,21,26,0.04); }
body.vt .vt-lite .vt-btn--ghost:hover,
body.vt .vt-section--light .vt-btn--ghost:hover { color: #000; border-color: rgba(20,21,26,0.5); background: rgba(20,21,26,0.09); }

/* -------------------------------------------------------------------------
   Mobile pass (2026-09-04): portrait focus-overlay scrims + calmer reveal
   ------------------------------------------------------------------------- */
@media (max-width: 940px) {
	/* Scroll reveal on small screens: the translateY slide over blurred glows
	   and backdrop-filter cards is what janks on phones. Fade only, quicker,
	   no stagger, so sections settle instantly instead of stuttering in. */
	body.vt .reveal { transform: none; transition: opacity .45s ease; }
	body.vt .reveal.d1, body.vt .reveal.d2 { transition-delay: 0s; }

	/* Route focus overlay: the desktop scrim is left-weighted for a landscape
	   panel, so on a portrait phone the photo stays half-lit behind the
	   stacked minis and the whole thing reads messy. Portrait recipe: photo
	   holds the top (title zone, lightly darkened), then runs down to a
	   near-solid body with a soft theme glow, so straps and mini cards sit
	   on clean dark ground. */
	body.vt .vt-focus-panel.vt-grad--blue,
	body.vt.home .vt-focus-panel.vt-grad--blue {
		background:
			radial-gradient(150% 60% at 50% 112%, rgba(var(--vt-accent-rgb),0.30) 0%, transparent 60%),
			linear-gradient(180deg, rgba(9,10,16,0.58) 0%, rgba(9,10,16,0.40) 20%, rgba(9,10,16,0.84) 50%, rgba(8,9,15,0.97) 74%, #08090f 100%),
			url('../img/shared-tables-card.jpg') center top / cover no-repeat,
			#08090f;
	}
	body.vt .vt-focus-panel.vt-grad--violet,
	body.vt.home .vt-focus-panel.vt-grad--violet {
		background:
			radial-gradient(150% 60% at 50% 112%, rgba(88,29,255,0.32) 0%, transparent 60%),
			linear-gradient(180deg, rgba(8,8,18,0.58) 0%, rgba(8,8,18,0.40) 20%, rgba(8,8,18,0.84) 50%, rgba(8,8,15,0.97) 74%, #08080f 100%),
			url('../img/private-tables-card.jpg') center top / cover no-repeat,
			#08080f;
	}
	body.vt .vt-focus-panel.vt-grad--aurora,
	body.vt.home .vt-focus-panel.vt-grad--aurora {
		background:
			radial-gradient(150% 60% at 50% 112%, rgba(255,77,141,0.30) 0%, transparent 60%),
			linear-gradient(180deg, rgba(10,7,15,0.58) 0%, rgba(10,7,15,0.40) 20%, rgba(10,7,15,0.84) 50%, rgba(9,7,14,0.97) 74%, #0a070f 100%),
			url('../img/studio-hosting-card.jpg') center top / cover no-repeat,
			#0a070f;
	}
	body.vt .vt-focus-panel.has-bg,
	body.vt.home .vt-focus-panel.has-bg {
		background:
			radial-gradient(150% 60% at 50% 112%, rgba(var(--vt-accent-rgb),0.28) 0%, transparent 60%),
			linear-gradient(180deg, rgba(6,8,20,0.58) 0%, rgba(6,8,20,0.40) 20%, rgba(6,8,20,0.84) 50%, rgba(5,7,18,0.97) 74%, #05070f 100%),
			var(--panel-bg) center top / cover no-repeat,
			#07070f;
	}
	/* Mini cards on the near-solid body: drop the backdrop blur (expensive on
	   phones, pointless over solid ground) and firm the fill instead. */
	body.vt .vt-focus-mini { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.11); }
}