/* ==========================================================================
   IPTVenus — dark neon theme
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
	--bg: #05060f;
	--bg-2: #0a0c1b;
	--card: rgba(17, 19, 38, 0.62);
	--card-solid: #0d0f20;
	--surface: rgba(255, 255, 255, 0.035);
	--surface-2: rgba(255, 255, 255, 0.06);
	--border: rgba(255, 255, 255, 0.08);
	--border-strong: rgba(255, 255, 255, 0.16);

	--text: #eef0ff;
	--muted: #a3abcc;
	--dim: #8088ad;

	--violet: #8b5cf6;
	--violet-2: #a78bfa;
	--indigo: #6366f1;
	--cyan: #22d3ee;
	--pink: #f43f5e;
	--green: #34d399;
	--wa: #25d366;
	--danger: #fb7185;

	--grad: linear-gradient(120deg, #a78bfa 0%, #818cf8 40%, #22d3ee 100%);
	--grad-btn: linear-gradient(120deg, #7c3aed 0%, #5b4cf0 50%, #0e7490 100%);
	--glow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 10px 40px -10px rgba(124, 58, 237, 0.65), 0 0 60px -20px rgba(34, 211, 238, 0.5);

	--font-head: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;

	--radius: 22px;
	--radius-sm: 14px;
	--container: 1200px;
	--header-h: 76px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	font-weight: 700;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
/* :not(#wpadminbar *) keeps the WordPress admin bar icons at their own size */
:where(img, svg, video):where(:not(#wpadminbar *)) { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
	border-radius: 8px;
}

::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }

.screen-reader-text,
.hp {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: fixed; top: 12px; left: 12px; z-index: 1000;
	padding: 10px 16px; border-radius: 10px;
	background: #fff; color: #05060f; font-weight: 700;
	transform: translateY(-160%);
	transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.nowrap { white-space: nowrap; }

/* ---------- Layout helpers ---------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}
.container-narrow { max-width: 820px; }

.section { position: relative; padding: 120px 0; }
.section-tight { padding: 40px 0 120px; }

.section-head {
	max-width: 720px;
	margin: 0 auto 64px;
	text-align: center;
}
.section-head h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.section-head p:last-child { color: var(--muted); font-size: 1.125rem; margin: 0; }

.grad-text {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.glass {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 6px 14px 6px 10px;
	margin-bottom: 20px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: rgba(139, 92, 246, 0.08);
	color: #d9dcff;
	font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em;
}
.eyebrow-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 12px var(--cyan);
	animation: pulse-dot 2s ease-in-out infinite;
}

/* ---------- Animated background ---------- */
.bg-aurora {
	position: fixed; inset: 0; z-index: -1;
	overflow: hidden; pointer-events: none;
}
.orb {
	position: absolute; border-radius: 50%;
	filter: blur(90px); opacity: 0.5;
	will-change: transform;
}
.orb-1 { width: 620px; height: 620px; top: -220px; left: -140px; background: radial-gradient(circle, #6d28d9 0%, transparent 70%); animation: drift-1 22s ease-in-out infinite alternate; }
.orb-2 { width: 560px; height: 560px; top: 10%; right: -200px; background: radial-gradient(circle, #0891b2 0%, transparent 70%); opacity: 0.38; animation: drift-2 26s ease-in-out infinite alternate; }
.orb-3 { width: 520px; height: 520px; bottom: -260px; left: 30%; background: radial-gradient(circle, #4338ca 0%, transparent 70%); opacity: 0.35; animation: drift-3 30s ease-in-out infinite alternate; }

.bg-grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.bg-noise {
	position: absolute; inset: 0; opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn {
	--btn-h: 48px;
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: var(--btn-h);
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 14px;
	font-weight: 700; font-size: 0.9375rem; line-height: 1;
	white-space: nowrap; cursor: pointer;
	overflow: hidden; isolation: isolate;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, border-color 0.25s;
}
.btn .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover .icon-arrow-right { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-sm { --btn-h: 42px; padding: 0 16px; font-size: 0.875rem; border-radius: 12px; }
.btn-lg { --btn-h: 56px; padding: 0 28px; font-size: 1rem; border-radius: 16px; }
.btn-block { width: 100%; }

.btn-primary {
	background: var(--grad-btn);
	color: #fff;
	box-shadow: var(--glow);
}
.btn-primary::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.6), 0 16px 50px -12px rgba(124, 58, 237, 0.85), 0 0 70px -16px rgba(34, 211, 238, 0.7); }
.btn-primary:hover::after { transform: translateX(120%); }

.btn-ghost {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--border-strong);
	color: var(--text);
	backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }

.btn-wa { background: #1faa52; color: #fff; }
.btn-wa:hover { background: #1c9a4a; transform: translateY(-2px); }

/* ---------- Header ---------- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	height: var(--header-h);
	transition: background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s;
	border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
body.menu-open .site-header {
	background: rgba(5, 6, 15, 0.72);
	border-bottom-color: var(--border);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
}
.admin-bar .site-header { top: 32px; }

.header-inner {
	height: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.logo { display: inline-flex; align-items: center; gap: 8px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1; letter-spacing: -0.035em; font-synthesis: none; }
.logo-mark { width: 52px; height: 52px; flex: 0 0 52px; overflow: visible; filter: drop-shadow(0 6px 14px rgba(79, 70, 229, 0.35)); transition: transform 0.5s var(--ease), filter 0.5s var(--ease); }
.logo:hover .logo-mark { transform: rotate(-10deg) scale(1.07); filter: drop-shadow(0 8px 20px rgba(99, 85, 232, 0.55)); }
/* Settled mark: planet with play button, ring, orbiting moon, light running along the ring. */
.logo-glow, .logo-planet, .logo-blackhole, .logo-flash { transform-box: view-box; transform-origin: 32px 32px; }
.logo-play, .logo-sparkle, .logo-trail > * { transform-box: fill-box; transform-origin: center; }
.logo-glow { animation: brand-glow-breathe 4.8s ease-in-out infinite; }
.logo-clouds { animation: brand-clouds-drift 9s linear infinite; }
.logo-play { transition: transform 0.35s var(--ease); }
.logo:hover .logo-play { transform: scale(1.14) translateX(.6px); }
.logo-ring-back { opacity: .55; }
.logo-ring-shine { stroke-dasharray: .16 1.2; stroke-dashoffset: .2; opacity: .9; animation: brand-ring-shine 4.4s 1s ease-in-out infinite; }
.logo-sparkle { opacity: 0; animation: brand-sparkle-twinkle 2.6s ease-in-out infinite; }
.logo-sparkle + .logo-sparkle { animation-delay: 1.3s; }
.logo-blackhole, .logo-flash, .logo-trail { display: none; }
.logo-text { display: inline-block; line-height: 1.2; padding-block: 0.04em; white-space: nowrap; transform-origin: left center; }
.logo-text .brand-lead { color: var(--text); }
.logo-text .brand-highlight { display: inline-flex; align-items: baseline; white-space: nowrap; padding-right: .04em; background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); }
.logo-text .brand-letter { display: inline-block; }

/* Intro (header, every page load): a black hole opens, streams the name out to the right,
   then collapses in a flash that forms the planet. The .logo-intro class is set in functions.php. */
.logo-intro .site-header .logo-blackhole { display: inline; animation: brand-hole-open 600ms cubic-bezier(.2,.8,.2,1) both, brand-hole-collapse 600ms 1750ms cubic-bezier(.6,0,.9,.4) forwards; }
.logo-intro .site-header .logo-disk { stroke-dasharray: .22 .06 .12 .08 .3 .22; animation: brand-disk-swirl .9s linear infinite; }
.logo-intro .site-header .logo-disk-inner { animation-duration: .6s; }
.logo-intro .site-header .logo-trail { display: inline; }
.logo-intro .site-header .logo-trail > * { opacity: 0; animation: brand-trail 750ms 650ms cubic-bezier(.2,.7,.3,1) forwards; }
.logo-intro .site-header .logo-trail > *:nth-child(1) { --ty: -3px; }
.logo-intro .site-header .logo-trail > *:nth-child(2) { --ty: 4px; animation-delay: 780ms; }
.logo-intro .site-header .logo-trail > *:nth-child(3) { --ty: 0px; animation-delay: 900ms; }
.logo-intro .site-header .logo-text { animation: brand-text-spawn 1100ms 650ms cubic-bezier(.45,0,.15,1) both; }
.logo-intro .site-header .logo-text .brand-highlight { clip-path: inset(0 100% 0 0); animation: brand-letter-reveal 600ms 1000ms cubic-bezier(.2,.7,.2,1) forwards; }
.logo-intro .site-header .logo-flash { display: inline; opacity: 0; animation: brand-flash 700ms 2150ms ease-out forwards; }
.logo-intro .site-header .logo-glow { opacity: 0; animation: brand-glow-in 800ms 2200ms ease-out forwards, brand-glow-breathe 4.8s 3s ease-in-out infinite; }
.logo-intro .site-header .logo-planet { animation: brand-planet-form 800ms 2200ms cubic-bezier(.34,1.56,.64,1) both; }
.logo-intro .site-header .logo-play { animation: brand-play-pop 500ms 2650ms cubic-bezier(.34,1.8,.64,1) both; }
.logo-intro .site-header .logo-ring { visibility: hidden; stroke-dasharray: 1 1.02; stroke-dashoffset: 1; animation: brand-ring-draw 800ms 2450ms cubic-bezier(.65,0,.35,1) forwards; }
.logo-intro .site-header .logo-ring-front { animation-delay: 2750ms; }
.logo-intro .site-header .logo-moon { opacity: 0; animation: brand-fade-in 500ms 3300ms forwards; }
.logo-intro .site-header .logo-ring-shine { animation-delay: 3.6s; }
.logo-intro .site-header .logo-sparkle { animation-delay: 3.4s; }
.logo-intro .site-header .logo-sparkle + .logo-sparkle { animation-delay: 4.7s; }

@keyframes brand-hole-open { from { opacity: 0; transform: scale(0) rotate(-120deg); } to { opacity: 1; transform: none; } }
@keyframes brand-hole-collapse { from { opacity: 1; transform: none; } 70% { opacity: 1; } to { opacity: 0; transform: scale(0) rotate(240deg); } }
@keyframes brand-disk-swirl { to { stroke-dashoffset: -1; } }
@keyframes brand-trail { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } to { opacity: 0; transform: translate(78px, var(--ty)) scale(.4); } }
@keyframes brand-text-spawn { from { opacity: 0; transform: translateX(-34px) scale(.05); filter: blur(6px); } 35% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes brand-flash { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.2); } to { opacity: 0; transform: scale(2.4); } }
@keyframes brand-planet-form { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes brand-play-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes brand-ring-draw { from { visibility: visible; } to { visibility: visible; stroke-dashoffset: 0; } }
@keyframes brand-fade-in { to { opacity: 1; } }
@keyframes brand-ring-shine { 0% { stroke-dashoffset: .2; } 55%, 100% { stroke-dashoffset: -1.05; } }
@keyframes brand-clouds-drift { to { transform: translateX(-24px); } }
@keyframes brand-glow-in { to { opacity: 1; } }
@keyframes brand-glow-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes brand-sparkle-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 18% { opacity: 1; transform: scale(1.15) rotate(45deg); } 36% { opacity: 0; transform: scale(.3) rotate(90deg); } }
@keyframes brand-letter-reveal { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 -10% 0 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.logo-glow, .logo-clouds { animation: none !important; }
	.logo-ring-shine, .logo-sparkle, .logo-moon { display: none; }
}

.main-nav ul { display: flex; gap: 4px; }
.main-nav a {
	position: relative;
	display: block; padding: 10px 14px;
	border-radius: 10px;
	color: var(--muted); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.9375rem; font-weight: 500;
	transition: color 0.2s, background-color 0.2s;
}
.main-nav .nav-more summary { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.main-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.main-nav a.is-active { color: var(--text); }
.main-nav a.is-active::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
	border-radius: 2px; background: var(--grad);
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions > .btn { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.header-actions > .btn-ghost { border-radius: 999px; border-color: #aab2c94d; background: #ffffff0d; font-weight: 600; box-shadow: inset 0 1px 0 #ffffff0a; }
.header-actions > .btn-ghost:hover { border-color: #aab2c98c; background: #ffffff16; }
html[data-theme="dark"] .header-actions > .btn-ghost { border-color: #69738e; background: #171d2e; color: #f7f8ff; box-shadow: 0 4px 14px #0004, inset 0 1px 0 #ffffff12; }
html[data-theme="dark"] .header-actions > .btn-ghost:hover { border-color: #9d92ff; background: #252344; box-shadow: 0 6px 18px #0005, 0 0 0 3px #8174f526; }

.menu-toggle {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	border: 1px solid var(--border-strong); border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
}
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }

.mobile-menu {
	position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
	padding: 24px;
	background: rgba(5, 6, 15, 0.96);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display: flex; flex-direction: column; justify-content: space-between;
	overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu li { animation: slide-in 0.45s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.mobile-menu nav a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 4px;
	border-bottom: 1px solid var(--border);
	font-family: var(--font-head); font-size: 1.5rem; font-weight: 600;
}
.mobile-menu nav .icon { color: var(--violet-2); }
.mobile-menu-cta { display: grid; gap: 12px; padding-top: 24px; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow-x: clip;
	padding: calc(var(--header-h) + 80px) 0 80px;
	min-height: min(100vh, 980px);
	display: flex; align-items: center;
}
.hero-grid {
	display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	align-items: center; gap: 56px;
}
.hero-title {
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	margin-bottom: 24px;
}
.hero-text { font-size: 1.1875rem; color: var(--muted); max-width: 560px; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-actions .btn-plan-preview { position: relative; overflow: hidden; gap: 10px; border-color: color-mix(in srgb,var(--violet) 34%,var(--border)); color: var(--text); background: linear-gradient(135deg,color-mix(in srgb,var(--violet) 8%,var(--card)),var(--card) 72%); box-shadow: 0 6px 18px -14px color-mix(in srgb,var(--violet) 75%,transparent); transition: transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease; }
.hero-actions .btn-plan-preview::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(110deg,transparent 30%,#ffffff55 48%,transparent 66%); transform: translateX(-120%); transition: transform .6s ease; }
.hero-actions .btn-plan-preview:hover { transform: translateY(-3px); border-color: var(--violet); color: var(--text); background: linear-gradient(135deg,color-mix(in srgb,var(--violet) 15%,var(--card)),var(--card) 76%); box-shadow: 0 12px 26px -15px color-mix(in srgb,var(--violet) 90%,transparent),0 0 0 3px color-mix(in srgb,var(--violet) 10%,transparent); }
.hero-actions .btn-plan-preview:hover::after { transform: translateX(120%); }
.hero-actions .btn-plan-preview .icon { color: var(--violet-2); transition: transform .22s ease; }
.hero-actions .btn-plan-preview:hover .icon { transform: translateX(3px); }
.hero-actions .btn-plan-preview:focus-visible { outline: 3px solid color-mix(in srgb,var(--violet) 45%,transparent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-actions .btn-plan-preview,.hero-actions .btn-plan-preview::after,.hero-actions .btn-plan-preview .icon { transition: none; } }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 36px; color: var(--muted); font-size: 0.9375rem; }
.hero-badges li { display: inline-flex; align-items: center; gap: 8px; }
.hero-badges .icon { width: 18px; height: 18px; color: var(--green); }

/* Device mockup */
.hero-visual { position: relative; perspective: 1400px; }
.device {
	position: relative;
	border-radius: 26px;
	padding: 12px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
	border: 1px solid var(--border-strong);
	box-shadow: 0 40px 120px -30px rgba(76, 29, 149, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transform: rotateY(var(--ry, -10deg)) rotateX(var(--rx, 6deg));
	transform-style: preserve-3d;
	transition: transform 0.6s var(--ease);
}
.device::before {
	content: ""; position: absolute; inset: -40px; z-index: -1;
	background: radial-gradient(closest-side, rgba(124, 58, 237, 0.45), transparent);
	filter: blur(20px);
}
.device-bar, .device-body { background: #070815; }
.device-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px;
	border-radius: 16px 16px 0 0;
	border-bottom: 1px solid var(--border);
	font-size: 0.75rem;
}
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.dots i:first-child { background: #fb7185; }
.dots i:nth-child(2) { background: #fbbf24; }
.dots i:nth-child(3) { background: #34d399; }
.live-pill {
	display: inline-flex; align-items: center; gap: 6px;
	min-width: 104px; justify-content: center;
	padding: 4px 10px; border-radius: 999px;
	background: rgba(244, 63, 94, 0.14); color: #fda4af;
	font-weight: 700; letter-spacing: 0.08em;
}
.live-pill [data-broadcast-label] { display: inline-block; transition: opacity .28s ease, transform .28s ease, filter .28s ease; }
.live-pill.is-switching [data-broadcast-label] { opacity: 0; transform: translateY(-4px); filter: blur(2px); }
.pulse {
	position: relative;
	width: 7px; height: 7px; border-radius: 50%;
	background: currentColor;
}
.pulse::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: currentColor; animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.live-pill .pulse { color: var(--pink); }
.live-pill.is-live .pulse::after { animation-duration: .78s; }
.live-eq { display: inline-flex; height: 12px; align-items: center; gap: 2px; margin-left: 2px; }
.live-eq i { display: block; width: 2px; height: 4px; border-radius: 3px; background: currentColor; animation: live-equalize .55s ease-in-out infinite alternate; }
.live-eq i:nth-child(2) { height: 10px; animation-delay: .18s; }
.live-eq i:nth-child(3) { height: 7px; animation-delay: .34s; }
.live-pill.is-live .live-eq i { animation-duration: .32s; }
@keyframes live-equalize { to { transform: scaleY(.35); opacity: .55; } }
.device-time { color: var(--dim); font-variant-numeric: tabular-nums; }

.device-body {
	display: grid; grid-template-columns: 56px minmax(0, 1fr);
	border-radius: 0 0 16px 16px;
	overflow: hidden;
}
.device-side {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 14px 0;
	border-right: 1px solid var(--border);
}
.device-side span {
	display: grid; place-items: center;
	width: 36px; height: 36px; border-radius: 10px;
	color: var(--dim);
}
.device-side span .icon { width: 18px; height: 18px; }
.device-side .is-active { color: #fff; background: rgba(139, 92, 246, 0.22); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35); }

.device-main { padding: 14px; display: grid; gap: 10px; min-width: 0; }
.now-playing {
	position: relative;
	border-radius: 12px; overflow: hidden;
	aspect-ratio: 16 / 8.2;
	background: #0b0d1f;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.np-art { position: absolute; inset: 0; overflow: hidden; }
.np-art.is-muted-preview { cursor: pointer; }
.np-art .photo { z-index: 0; transition: opacity .35s ease; }
.np-video { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border: 0; background: #080a16; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.np-art.is-video-playing .np-video { opacity: 1; }
.np-art.is-video-playing .photo { opacity: 0; }
.np-video-mask { position: absolute; z-index: 3; left: 0; right: 0; height: clamp(18px, 3.3vw, 40px); background: #080a16; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.np-video-mask-top { top: 0; }
.np-video-mask-bottom { bottom: 0; }
.np-art.is-video-playing .np-video-mask { opacity: 1; }
.np-art::after {
	content: ""; position: absolute; z-index: 2; inset: 0;
	background: linear-gradient(180deg, transparent 36%, rgba(5, 6, 15, 0.72));
}
.np-orb { position: absolute; border-radius: 50%; filter: blur(28px); }
.np-orb.a { width: 60%; height: 120%; left: -10%; top: -30%; background: #7c3aed; animation: np-a 9s ease-in-out infinite alternate; }
.np-orb.b { width: 50%; height: 100%; right: -10%; top: -20%; background: #0891b2; animation: np-b 11s ease-in-out infinite alternate; }
.np-orb.c { width: 40%; height: 70%; left: 35%; bottom: -30%; background: #db2777; opacity: 0.7; animation: np-a 13s ease-in-out infinite alternate-reverse; }
.np-play {
	position: absolute; z-index: 3; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: grid; place-items: center;
	width: 54px; height: 54px; border-radius: 50%;
	padding: 0; appearance: none; font: inherit; line-height: 1;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(8px);
	color: #fff; cursor: pointer; transition: background .2s, transform .2s, opacity .2s;
}
.np-play:hover { background: rgba(255, 255, 255, .28); transform: translate(-50%, -50%) scale(1.06); }
.np-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.np-play[hidden] { display: none; }
.np-play[data-playing="true"] { opacity: 0; pointer-events: none; }
.np-art.is-video-playing:hover .np-play[data-playing="true"],
.np-play[data-playing="true"]:focus-visible { opacity: 1; pointer-events: auto; }
.np-play-mark { width: 0; height: 0; margin-left: 4px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #fff; }
.np-play[data-playing="true"] .np-play-mark { width: 14px; height: 18px; margin: 0; border: 0; border-left: 5px solid #fff; border-right: 5px solid #fff; }
.np-video-tip { position: absolute; z-index: 3; top: 12px; right: 12px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff; background: rgba(8,10,22,.72); font-size: .7rem; font-weight: 650; backdrop-filter: blur(8px); }
.np-video-tip[hidden], .np-attribution[hidden] { display: none; }
.np-attribution { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 4px 7px; border-radius: 6px; color: rgba(255,255,255,.84); background: rgba(8,10,22,.55); font-size: .62rem; }
.np-attribution a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: none) {
	.np-art.is-video-playing .np-play[data-playing="true"] { opacity: 1; pointer-events: auto; }
}
.np-meta { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 2px; }
.np-tag {
	justify-self: start;
	padding: 3px 8px; border-radius: 6px;
	background: rgba(8, 10, 22, 0.58);
	color: #fff;
	font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
	margin-bottom: 6px;
}
.np-meta strong { color: #fff; font-family: var(--font-head); font-size: 1.05rem; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.np-meta small { color: rgba(255,255,255,.88); font-size: 0.75rem; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.np-progress { height: 4px; margin-top: 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.np-progress span { display: block; height: 100%; width: 0%; border-radius: inherit; background: var(--grad); transition: width .18s linear; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile {
	position: relative;
	aspect-ratio: 4 / 3;
	display: flex; align-items: flex-end;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 0.6875rem; font-weight: 700;
	background:
		linear-gradient(180deg, transparent 35%, rgba(5, 6, 15, 0.85)),
		linear-gradient(135deg, hsl(var(--h1) 80% 55%), hsl(var(--h2) 85% 40%));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	transition: transform 0.3s var(--ease);
}
.tile:first-child { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 8px 24px -6px hsl(var(--h1) 80% 50% / 0.7); }

.float-chip {
	position: absolute;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(14, 16, 34, 0.78);
	border: 1px solid var(--border-strong);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.7);
	font-size: 0.8125rem; color: var(--muted);
	white-space: nowrap;
	animation: float 6s ease-in-out infinite;
}
.float-chip strong { color: var(--text); }
.float-chip .icon {
	width: 30px; height: 30px; padding: 6px;
	border-radius: 9px;
	background: rgba(139, 92, 246, 0.2); color: var(--violet-2);
}
.chip-1 .icon { background: rgba(251, 191, 36, .17); color: #fbbf24; }
.chip-1 { top: 6%; left: -34px; }
.chip-2 { bottom: 18%; right: -26px; animation-delay: -2s; }
.chip-2 .icon { background: rgba(52, 211, 153, .17); color: #34d399; }
.chip-3 { bottom: -22px; left: 12%; animation-delay: -4s; }
.chip-3 .icon { background: rgba(96, 165, 250, .17); color: #60a5fa; }

/* ---------- Stats ---------- */
.stats { padding: 0 0 40px; }
.stats-grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	padding: 8px;
}
.stats-grid li {
	padding: 28px 24px; text-align: center;
	position: relative;
}
.stats-grid li + li::before {
	content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px;
	background: linear-gradient(180deg, transparent, var(--border-strong), transparent);
}
.stats-grid strong, .stat-suffix {
	font-family: var(--font-head); font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 700; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.stat-label { display: block; margin-top: 10px; color: var(--muted); font-size: 0.9375rem; }

/* ---------- Marquee ---------- */
.marquee {
	position: relative;
	padding: 28px 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; gap: 14px; padding-right: 14px; }
.marquee li {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 20px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--muted); font-weight: 500;
	white-space: nowrap;
}
.marquee .icon { width: 16px; height: 16px; color: var(--violet-2); }

/* ---------- Spotlight cards ---------- */
.spot { position: relative; }
.spot::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	border-radius: inherit; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, 0.16), transparent 45%);
	opacity: 0; transition: opacity 0.35s;
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* ---------- Bento features ---------- */
.bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
}
.bento-card {
	display: flex; flex-direction: column;
	min-height: 320px;
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(23, 25, 50, 0.7), rgba(11, 12, 28, 0.7));
	border: 1px solid var(--border);
	overflow: hidden;
	transition: border-color 0.3s, transform 0.4s var(--ease);
}
.bento-card:hover { border-color: rgba(167, 139, 250, 0.35); transform: translateY(-4px); }
.size-xl { grid-column: span 4; grid-row: span 1; }
.size-sm { grid-column: span 2; }
.size-md { grid-column: span 2; }
.size-lg { grid-column: span 3; }

.bento-visual {
	flex: 1;
	position: relative;
	display: grid; place-items: center;
	padding: 24px 24px 0;
	min-height: 170px;
}
.bento-copy { padding: 22px 26px 26px; }
.bento-icon {
	display: inline-grid; place-items: center;
	width: 38px; height: 38px; margin-bottom: 14px;
	border-radius: 11px;
	background: rgba(139, 92, 246, 0.14);
	color: var(--violet-2);
	box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.25);
}
.bento-icon .icon { width: 20px; height: 20px; }
.bento-copy h3 { font-size: 1.3rem; margin-bottom: 8px; }
.bento-copy p { margin: 0; color: var(--muted); }

/* EPG */
.epg {
	position: relative; width: 100%;
	display: grid; gap: 7px;
	font-size: 0.75rem;
	mask-image: linear-gradient(180deg, #000 70%, transparent);
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.epg-head, .epg-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; }
.epg-head { grid-template-columns: 92px repeat(3, 1fr); color: var(--dim); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 4px; }
.epg-ch { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; }
.epg-ch i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, hsl(var(--h) 80% 60%), hsl(calc(var(--h) + 40) 80% 40%)); }
.epg-track { display: flex; gap: 6px; }
.epg-prog {
	padding: 9px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--border);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: #cfd3ef;
}
.epg-row:first-of-type .epg-prog:first-child {
	background: linear-gradient(90deg, rgba(124, 58, 237, 0.45), rgba(14, 116, 144, 0.35));
	border-color: rgba(167, 139, 250, 0.4);
	color: #fff;
}
.epg-now {
	position: absolute; top: 18px; bottom: 0; left: calc(92px + 8px + 22%);
	width: 2px; background: var(--cyan);
	box-shadow: 0 0 12px var(--cyan);
	animation: epg-now 12s ease-in-out infinite alternate;
}
.epg-now span {
	position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
	padding: 1px 6px; border-radius: 4px;
	background: var(--cyan); color: #04121a;
	font-size: 0.625rem; font-weight: 700;
}

/* Quality */
.q-wrap { display: grid; justify-items: center; gap: 14px; }
.q-big {
	font-family: var(--font-head); font-weight: 700;
	font-size: 5.5rem; line-height: 1; letter-spacing: -0.05em;
	background: linear-gradient(120deg, #a78bfa 20%, #fff 45%, #22d3ee 60%, #a78bfa 85%);
	background-size: 250% 100%;
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
	animation: shine 5s linear infinite;
	filter: drop-shadow(0 8px 30px rgba(124, 58, 237, 0.55));
}
.q-chips { display: flex; gap: 6px; }
.q-chips i {
	font-style: normal; font-size: 0.75rem; font-weight: 700;
	padding: 4px 10px; border-radius: 999px;
	border: 1px solid var(--border-strong); color: var(--dim);
}
.q-chips i.on { color: #04121a; background: var(--cyan); border-color: var(--cyan); }

/* Servers */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.bars i {
	width: 12px; border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, var(--cyan), rgba(99, 102, 241, 0.4));
	animation: bars 2.4s ease-in-out infinite;
	animation-delay: calc(var(--b) * -0.17s);
	height: 60%;
}
.v-servers { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.uptime {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.75rem; color: var(--green);
}

/* Activation ring */
.ring { position: relative; width: 130px; height: 130px; }
.ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring-bg { stroke: rgba(255, 255, 255, 0.07); }
.ring-fg {
	stroke: var(--violet);
	stroke-linecap: round;
	stroke-dasharray: 100; stroke-dashoffset: 100;
	filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.8));
}
.is-in .ring-fg { animation: ring 3.2s var(--ease) infinite; }
.ring-check {
	position: absolute; inset: 0; display: grid; place-items: center;
	color: var(--green);
}
.ring-check .icon { width: 40px; height: 40px; stroke-width: 2.5; }
.is-in .ring-check { animation: ring-check 3.2s var(--ease) infinite; }

/* Catch-up timeline */
.timeline { width: 100%; max-width: 260px; }
.tl-bar { position: relative; display: block; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.tl-fill { position: absolute; inset: 0 auto 0 0; width: 70%; border-radius: inherit; background: var(--grad); animation: rewind 6s var(--ease) infinite; }
.tl-knob {
	position: absolute; top: 50%; left: 70%;
	width: 20px; height: 20px; margin: -10px 0 0 -10px;
	border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.8);
	animation: rewind-knob 6s var(--ease) infinite;
}
.tl-labels { display: flex; justify-content: space-between; margin-top: 14px; color: var(--dim); font-size: 0.75rem; }

/* Devices row */
.dev-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dev-row span {
	display: grid; place-items: center;
	width: 56px; height: 56px; border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border);
	color: var(--muted);
	animation: dev-glow 6s ease-in-out infinite;
	animation-delay: calc(var(--k) * 1s);
}
.dev-row .icon { width: 24px; height: 24px; }

/* Chat */
.chat { width: 100%; display: grid; gap: 10px; font-size: 0.8125rem; }
.bubble {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 16px;
	line-height: 1.45;
}
.bubble.in { justify-self: start; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: #d7daf3; }
.bubble.out { justify-self: end; background: linear-gradient(120deg, rgba(124, 58, 237, 0.55), rgba(14, 116, 144, 0.5)); border-bottom-right-radius: 4px; }
.bubble.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; }
.bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing i:nth-child(3) { animation-delay: 0.3s; }

/* ---------- Steps ---------- */
.steps {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
	counter-reset: step;
	position: relative;
}
.steps::before {
	content: ""; position: absolute; z-index: 0;
	top: 62px; left: 16%; right: 16%; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.6), rgba(34, 211, 238, 0.6), transparent);
}
.step { padding: 32px 28px; overflow: hidden; }
.step-num {
	position: absolute; top: 14px; right: 20px;
	font-family: var(--font-head); font-size: 4.5rem; font-weight: 700; line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(167, 139, 250, 0.28);
}
.step-icon {
	display: grid; place-items: center;
	width: 60px; height: 60px; margin-bottom: 24px;
	border-radius: 18px;
	background: var(--grad-btn);
	box-shadow: var(--glow);
}
.step-icon .icon { width: 26px; height: 26px; }
.step h3 { font-size: 1.3rem; }
.step p { color: var(--muted); margin: 0; }

/* ---------- Devices ---------- */
.devices-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.devices-copy h2 { font-size: clamp(2rem, 4vw, 3rem); }
.devices-copy p:not(.eyebrow) { color: var(--muted); font-size: 1.125rem; margin-bottom: 28px; }
.device-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.devices-stats { margin-top: 28px; }
.devices-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: linear-gradient(115deg, #11131b, #101118 58%, #131521); box-shadow: 0 24px 64px -42px rgba(25,36,67,.65); }
.devices-stats-grid li { position: relative; padding: 28px 18px; text-align: center; }
.devices-stats-grid li + li::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: linear-gradient(180deg, transparent, rgba(203,213,235,.22), transparent); }
.devices-stats-grid strong, .devices-stats-grid .stat-suffix { color: #f5f6fc !important; background: none; -webkit-text-fill-color: #f5f6fc; font-size: clamp(1.65rem, 3.5vw, 2.7rem); }
.devices-stats-grid .stat-label { margin-top: 8px; color: #b5b8c6; font-size: .875rem; }
.device-card {
	display: grid; gap: 4px;
	padding: 22px;
	border-radius: var(--radius-sm);
	transition: transform 0.35s var(--ease), border-color 0.3s;
}
.device-card:hover { transform: translateY(-4px); border-color: rgba(34, 211, 238, 0.35); }
.device-icon {
	display: grid; place-items: center;
	width: 46px; height: 46px; margin-bottom: 12px;
	border-radius: 13px;
	background: rgba(34, 211, 238, 0.1);
	color: var(--cyan);
	box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.25);
}
.device-card strong { font-family: var(--font-head); font-size: 1.05rem; }
.device-card span:last-child { color: var(--dim); font-size: 0.875rem; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan {
	position: relative;
	display: flex; flex-direction: column;
	padding: 30px 26px;
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(23, 25, 50, 0.72), rgba(11, 12, 28, 0.72));
	border: 1px solid var(--border);
	transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
}
.plan:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.plan.is-popular {
	border: 1px solid transparent;
	background:
		linear-gradient(180deg, #15123a, #0b0c22) padding-box,
		linear-gradient(160deg, #a78bfa, #6366f1 45%, #22d3ee) border-box;
	box-shadow: 0 30px 80px -30px rgba(124, 58, 237, 0.75);
}
.plan.is-popular::after {
	content: ""; position: absolute; inset: -1px; z-index: -1;
	border-radius: inherit;
	background: linear-gradient(160deg, #a78bfa, #22d3ee);
	filter: blur(24px); opacity: 0.25;
}
.plan-badge {
	position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 14px; border-radius: 999px;
	background: var(--grad-btn); color: #fff;
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	box-shadow: var(--glow); white-space: nowrap;
}
.plan-badge .icon { width: 14px; height: 14px; fill: currentColor; }
.plan header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; margin-bottom: 18px; }
.plan h3 { font-size: 1.2rem; margin: 0; }
.plan-save {
	padding: 4px 10px; border-radius: 999px;
	background: rgba(52, 211, 153, 0.12); color: var(--green);
	font-size: 0.75rem; font-weight: 700;
}
.plan-price { min-height: 44px; margin: 0; }
.plan-price strong { display: block; font-family: var(--font-head); font-size: 2.75rem; letter-spacing: -0.03em; line-height: 1; }
.plan-per { min-height: 20px; color: var(--dim); font-size: 0.875rem; margin: 8px 0 24px; }
.plan-features { display: grid; gap: 12px; margin-bottom: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; color: #d3d7f0; font-size: 0.9375rem; }
.plan-features .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--cyan); }
.plan-actions { margin-top: auto; display: grid; gap: 10px; }
.plan-alt { text-align: center; font-size: 0.875rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.plan-alt:hover { color: var(--text); }

.long-offer {
	display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 18px;
	margin-top: 24px; padding: 22px 26px; border: 1px solid var(--border-strong); border-radius: var(--radius);
	background: linear-gradient(110deg, rgba(79, 70, 229, .12), rgba(34, 211, 238, .08));
}
.long-offer-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--violet); background: rgba(124, 58, 237, .12); }
.long-offer-icon .icon { width: 23px; height: 23px; }
.long-offer-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.long-offer-kicker b { padding: 4px 9px; border-radius: 99px; color: var(--green); background: rgba(52, 211, 153, .13); font-size: .6875rem; }
.long-offer-copy h3 { margin: 4px 0; font-family: var(--font-head); font-size: 1.2rem; }
.long-offer-copy p { margin: 0; color: var(--muted); font-size: .8125rem; }
.long-offer-price { display: grid; gap: 2px; text-align: right; white-space: nowrap; }
.long-offer-price strong { font-family: var(--font-head); font-size: 1.75rem; letter-spacing: -.03em; }
.long-offer-price span { color: var(--muted); font-size: .75rem; }
.long-offer > .btn { white-space: nowrap; }
.long-offer-obsidian { position: relative; overflow: hidden; border-color: rgba(26, 143, 121, .55); background: linear-gradient(105deg, #0c191d, #102d30 58%, #10463e); box-shadow: 0 20px 54px -34px rgba(16, 129, 105, .58); }
.long-offer-obsidian::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 28%, rgba(178,255,231,.12) 50%, transparent 70%); transform: translateX(-130%); animation: obsidian-shine 7s ease-in-out infinite; }
.long-offer-obsidian > * { position: relative; z-index: 1; }
.long-offer-obsidian .long-offer-icon { color: #b5f4db; background: linear-gradient(145deg, rgba(52,211,153,.24), rgba(34,211,238,.12)); box-shadow: inset 0 0 0 1px rgba(167,243,208,.25), 0 6px 20px rgba(16,129,105,.2); }
.long-offer-obsidian .long-offer-kicker > span:first-child { padding: 4px 9px; border-radius: 99px; color: #d4f9e8; background: rgba(52,211,153,.16); letter-spacing: .07em; font-size: .625rem; }
.long-offer-obsidian .long-offer-copy h3 { color: #fff; }
.long-offer-obsidian .long-offer-copy p { color: #c2cce1; }
.long-offer-obsidian .long-offer-price strong { color: #fff; }
.long-offer-obsidian .long-offer-price span { color: #b5c2dd; }
.long-offer-obsidian > .btn { color: #f2fff9; background: linear-gradient(110deg, #087c69, #07866d 60%, #147d99); box-shadow: 0 8px 22px rgba(16,129,105,.25); animation: obsidian-cta 4.6s ease-in-out infinite; }
.long-offer-obsidian > .btn:hover { transform: translateY(-3px); box-shadow: 0 13px 27px rgba(16,129,105,.4); }
.long-offer-obsidian > .btn .icon { transition: transform .25s ease; }
.long-offer-obsidian > .btn:hover .icon { transform: translateX(4px); }
@keyframes obsidian-shine { 0%, 14% { transform: translateX(-130%); } 42%, 100% { transform: translateX(130%); } }
@keyframes obsidian-cta { 0%, 72%, 100% { box-shadow: 0 8px 22px rgba(16,129,105,.25); } 82% { box-shadow: 0 9px 28px rgba(16,185,129,.4), 0 0 0 4px rgba(52,211,153,.1); } }

.pricing-foot { margin-top: 36px; text-align: center; color: var(--muted); font-size: 0.9375rem; }
.pricing-foot p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; }
.pricing-foot .icon { width: 16px; height: 16px; color: var(--green); }
.payment-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 16px; padding: 0; list-style: none; }
.payment-logos li { display: grid; place-items: center; min-width: 92px; min-height: 36px; padding: 4px 10px; border: 1px solid #e6e8ee; border-radius: 9px; background: #fff; box-shadow: 0 4px 12px rgba(18,24,40,.05); }
.payment-logos img { display: block; width: auto; height: 22px; max-width: 112px; object-fit: contain; }
html[data-theme="dark"] .payment-logos li { border-color: #344057; background: #151c2c; box-shadow: 0 5px 16px #0005, inset 0 1px 0 #ffffff0c; }
.pricing-foot a { color: var(--violet-2); font-weight: 700; }
.pricing-foot a:hover { color: #fff; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review { margin: 0; padding: 28px; }
.review-stars { display: flex; gap: 3px; color: #fbbf24; margin-bottom: 14px; }
.review-stars .icon { width: 18px; height: 18px; fill: currentColor; }
.review blockquote { margin: 0 0 20px; color: #d7daf3; }
.review figcaption { display: grid; }
.review figcaption span { color: var(--dim); font-size: 0.875rem; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.faq-intro { position: sticky; top: calc(var(--header-h) + 32px); }
.faq-intro h2 { font-size: clamp(2rem, 4vw, 3rem); }
.faq-intro > p:not(.eyebrow) { color: var(--muted); font-size: 1.125rem; margin-bottom: 28px; }
.help-card { display: flex; align-items: center; gap: 14px; padding: 16px; }
.help-card div { flex: 1; display: grid; }
.help-card div span { color: var(--dim); font-size: 0.875rem; }
.help-avatar {
	position: relative;
	display: grid; place-items: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--grad-btn);
}
.help-avatar .icon { width: 22px; height: 22px; }
.help-avatar .online {
	position: absolute; right: 0; bottom: 0;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--green); border: 2px solid var(--bg);
}

.accordion { display: grid; gap: 12px; }
.acc-item {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	transition: border-color 0.3s, background-color 0.3s;
}
.acc-item.is-open { border-color: rgba(167, 139, 250, 0.35); background: rgba(139, 92, 246, 0.06); }
.acc-item h3 { margin: 0; font-size: 1.0625rem; }
.acc-trigger {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 22px;
	border: 0; background: none;
	text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem;
	cursor: pointer;
}
.acc-icon {
	display: grid; place-items: center; flex-shrink: 0;
	width: 32px; height: 32px; border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	transition: transform 0.35s var(--ease), background-color 0.3s;
}
.acc-icon .icon { width: 18px; height: 18px; }
.is-open .acc-icon { transform: rotate(180deg); background: var(--grad-btn); }
.acc-panel {
	display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s var(--ease);
}
.acc-panel > div { overflow: hidden; }
.acc-panel p { margin: 0; padding: 0 22px 22px; color: var(--muted); }
.is-open .acc-panel { grid-template-rows: 1fr; }

/* ---------- CTA ---------- */
.section-cta { padding-top: 40px; }
.cta-panel {
	position: relative;
	padding: 80px 40px;
	border-radius: 32px;
	text-align: center;
	overflow: hidden; isolation: isolate;
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(14, 116, 144, 0.22));
	border: 1px solid rgba(167, 139, 250, 0.3);
}
.cta-panel::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.cta-glow {
	position: absolute; z-index: -1;
	width: 600px; height: 600px; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	background: conic-gradient(from 0deg, #7c3aed, #22d3ee, #6366f1, #7c3aed);
	filter: blur(100px); opacity: 0.35;
	animation: spin 14s linear infinite;
}
.cta-panel h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
.cta-panel p { max-width: 560px; margin: 0 auto 32px; color: #d3d7f0; font-size: 1.125rem; }
.cta-panel .hero-actions { justify-content: center; }
.cta-panel .cta-kicker { display: inline-flex; align-items: center; margin: 0 auto 14px; padding: 7px 12px; border: 1px solid #ffffff38; border-radius: 999px; color: #e7e9ff; background: #ffffff12; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cta-panel h2 { max-width: 900px; margin: 0 auto 14px; text-wrap: balance; }
.cta-panel > p:not(.cta-kicker) { max-width: 660px; margin-bottom: 26px; line-height: 1.65; }
.cta-panel .cta-trial-button { min-height: 56px; padding-inline: 30px; color: #3730a3; background: linear-gradient(135deg,#fff,#e9eaff); box-shadow: 0 10px 30px -12px #11194e8c, inset 0 1px 0 #fff; transform: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cta-panel .cta-trial-button:hover,
.cta-panel .cta-trial-button:active { color: #29227e; background: #fff; box-shadow: 0 14px 34px -12px #11194e9c, 0 0 0 4px #ffffff25; transform: none; }
.cta-panel .cta-assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 25px 0 0; padding: 0; list-style: none; }
.cta-panel .cta-assurances li { display: inline-flex; align-items: center; gap: 7px; color: #f0f2ff; font-size: .78rem; font-weight: 550; }
.cta-panel .cta-assurances .icon { width: 15px; height: 15px; color: #8df2c4; }
html[data-theme="dark"] .cta-panel { border: 1px solid #62cdbb35; background: radial-gradient(ellipse at 12% 12%,#182847 0,transparent 55%),linear-gradient(120deg,#0b1322 0%,#111d32 58%,#102b35 100%); box-shadow: 0 30px 80px -48px #000, inset 0 1px 0 #ffffff0d; }
html[data-theme="dark"] .cta-panel::before { background-image: linear-gradient(#a8cee508 1px,transparent 1px),linear-gradient(90deg,#a8cee508 1px,transparent 1px); mask-image: radial-gradient(ellipse at 52% 45%,#000 10%,transparent 82%); -webkit-mask-image: radial-gradient(ellipse at 52% 45%,#000 10%,transparent 82%); }
html[data-theme="dark"] .cta-panel .cta-photo { opacity: .78; filter: saturate(.9); }
html[data-theme="dark"] .cta-panel .cta-overlay { background: linear-gradient(105deg,rgba(8,15,29,.76) 0%,rgba(14,23,42,.69) 53%,rgba(10,42,48,.57) 100%); }
html[data-theme="dark"] .cta-panel .cta-glow { opacity: .16; filter: blur(120px); }
html[data-theme="dark"] .cta-panel .cta-kicker { border-color: #78dbc342; color: #a8f3dc; background: #39b89412; }
html[data-theme="dark"] .cta-panel h2 { color: #f5f8ff; text-shadow: 0 4px 28px #0006; }
html[data-theme="dark"] .cta-panel > p:not(.cta-kicker) { color: #bdc9dc; }
html[data-theme="dark"] .cta-panel .cta-trial-button { color: #062820; background: linear-gradient(115deg,#bbf7df,#52dfb0 56%,#3dc9ce); box-shadow: 0 12px 34px -16px #3ee2b78c,inset 0 1px 0 #ffffffa8; }
html[data-theme="dark"] .cta-panel .cta-trial-button:hover,
html[data-theme="dark"] .cta-panel .cta-trial-button:active { color: #04241d; background: linear-gradient(115deg,#d4ffea,#70e9bf 56%,#5cdae0); box-shadow: 0 16px 38px -14px #3ee2b7a6,0 0 0 4px #77eac42b; transform: none; }
html[data-theme="dark"] .cta-panel .btn-ghost { border-color: #a6b8d04a; color: #e8eef8; background: #ffffff08; }
html[data-theme="dark"] .cta-panel .btn-ghost:hover { border-color: #72d8c0a6; color: #fff; background: #73d8c014; }
html[data-theme="dark"] .cta-panel .cta-assurances li { padding: 0 11px; border: 1px solid #9ab7d01c; border-radius: 999px; color: #ccd7e8; background: #ffffff08; }
html[data-theme="dark"] .cta-panel .cta-assurances .icon { color: #6fe0b8; }

/* ---------- Footer ---------- */
.site-footer {
	position: relative;
	padding: 80px 0 32px;
	border-top: 1px solid var(--border);
	background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.06));
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand p { color: var(--muted); max-width: 340px; margin: 18px 0 22px; }
.footer-col h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { color: var(--muted); transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.pay-list li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pay-list .icon { width: 16px; height: 16px; color: var(--green); }
.footer-bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
	margin-top: 56px; padding-top: 24px;
	border-top: 1px solid var(--border);
	color: var(--dim); font-size: 0.875rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a:hover { color: var(--text); }

.wa-float {
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	display: grid; place-items: center;
	width: 58px; height: 58px; border-radius: 50%;
	background: var(--wa); color: #fff;
	box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.7);
	transition: transform 0.3s var(--ease);
}
.wa-float::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid var(--wa);
	animation: ring-out 2.4s ease-out infinite;
}
.wa-float .icon { width: 28px; height: 28px; }
.wa-float:hover { transform: scale(1.08); }

/* ---------- Trial page ---------- */
.trial { padding: calc(var(--header-h) + 72px) 0 110px; }
.trial-grid { display: grid; grid-template-columns: 1fr 480px; gap: 64px; align-items: start; }
.trial-copy h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.035em; }
.perks { display: grid; gap: 14px; margin-top: 8px; }
.perks li { display: flex; gap: 14px; align-items: flex-start; }
.perks li > span {
	display: grid; place-items: center; flex-shrink: 0;
	width: 44px; height: 44px; border-radius: 12px;
	background: rgba(139, 92, 246, 0.14); color: var(--violet-2);
	box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.25);
}
.perks .icon { width: 20px; height: 20px; }
.perks div { display: grid; color: var(--muted); font-size: 0.9375rem; }
.perks strong { color: var(--text); font-family: var(--font-head); font-size: 1.05rem; }

.trial-card {
	position: relative;
	padding: 34px;
	overflow: hidden;
	border-color: rgba(167, 139, 250, 0.25);
	background: rgba(13, 15, 34, 0.78);
	box-shadow: 0 40px 100px -40px rgba(124, 58, 237, 0.8);
}
.card-glow {
	position: absolute; top: -140px; right: -140px; z-index: 0;
	width: 320px; height: 320px; border-radius: 50%;
	background: radial-gradient(circle, rgba(124, 58, 237, 0.45), transparent 70%);
	pointer-events: none;
}
.trial-card > *:not(.card-glow) { position: relative; z-index: 1; }
.trial-form h2, .trial-success h2 { font-size: 1.6rem; margin-bottom: 6px; }
.form-sub { color: var(--dim); font-size: 0.875rem; margin-bottom: 24px; }

.form-alert {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 12px 14px; margin-bottom: 18px;
	border-radius: 12px;
	background: rgba(251, 113, 133, 0.1);
	border: 1px solid rgba(251, 113, 133, 0.35);
	color: #fecdd3; font-size: 0.9rem;
}
.form-alert[hidden] { display: none; }
.form-alert .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--danger); }

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 500; color: #d7daf3; }
.optional { color: var(--dim); font-weight: 400; }
.input-wrap { position: relative; }
.input-wrap > .icon {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: var(--dim);
	pointer-events: none; transition: color 0.2s;
}
.input-wrap input, .input-wrap select {
	width: 100%; height: 52px;
	padding: 0 16px 0 44px;
	border: 1px solid var(--border-strong);
	border-radius: 13px;
	background: rgba(5, 6, 15, 0.6);
	font-size: 1rem;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
	-webkit-appearance: none; appearance: none;
}
.input-wrap input::placeholder { color: #626a8f; }
.phone-input-wrap { display: flex; align-items: stretch; height: 52px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 13px; background: rgba(5, 6, 15, 0.6); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.phone-input-wrap > .icon { z-index: 12; }
.phone-country-native { display: none !important; }
.phone-country-picker { position: relative; z-index: 10; flex: 0 0 155px; width: 155px; }
.phone-country-trigger {
	display: flex; align-items: center; gap: 5px; width: 100%; height: 52px; padding: 0 10px 0 42px;
	border: 0; border-radius: 12px 0 0 12px;
	color: var(--text); background: transparent; font: inherit; font-size: .78rem; font-weight: 650; white-space: nowrap; cursor: pointer;
}
.phone-country-trigger:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--violet); outline-offset: 2px; }
.phone-country-flag { flex: 0 0 20px; width: 20px; height: 15px; object-fit: cover; border-radius: 2px; background: #e6e8ee; }
.phone-country-trigger [data-phone-abbr] { overflow: hidden; text-overflow: clip; }
.phone-country-trigger [data-phone-dial] { margin-left: auto; }
.phone-country-caret { width: 7px; height: 7px; flex: 0 0 7px; margin-left: 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.phone-country-menu {
	position: fixed; z-index: 10050; top: 0; left: 0; display: flex; flex-direction: column; width: 250px; max-height: min(330px, 50vh);
	padding: 7px; overflow: hidden; border: 1px solid #d8dce6; border-radius: 14px; color: #20243a; background: #fff; box-shadow: 0 12px 32px rgba(18, 27, 48, .22);
}
.phone-country-menu[hidden] { display: none; }
.phone-country-search { flex: 0 0 38px; width: 100%; height: 38px !important; margin-bottom: 6px; padding: 0 10px !important; border: 1px solid #dfe3eb !important; border-radius: 10px !important; color: #20243a !important; background: #f5f6f9 !important; font-size: 13px !important; }
.phone-country-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1px 2px 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #aeb6c4 transparent; }
.phone-country-list::-webkit-scrollbar { width: 7px; }
.phone-country-list::-webkit-scrollbar-track { background: transparent; }
.phone-country-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #aeb6c4; background-clip: padding-box; }
.phone-country-option { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 5px 8px; border: 0; border-radius: 9px; color: #20243a; background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.phone-country-option:hover, .phone-country-option[aria-selected="true"] { color: #24235f; background: #eeefff; }
.phone-country-option img { width: 20px; height: 15px; flex: 0 0 20px; object-fit: cover; border-radius: 2px; }
.phone-country-option strong { min-width: 36px; font-size: 12px; letter-spacing: .02em; }
.phone-country-option span { margin-left: auto; color: #606b80; font-variant-numeric: tabular-nums; }
.phone-country-empty { padding: 12px 8px; color: #667085; font-size: 13px; }
.phone-input-wrap > input#tr-phone {
	flex: 1 1 auto;
	width: 0;
	min-width: 0;
	height: 50px;
	padding-left: 12px;
	border: 0;
	border-left: 1px solid var(--border-strong);
	border-radius: 0 12px 12px 0;
	background: transparent;
	box-shadow: none;
}
.phone-input-wrap:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2); }
.phone-input-wrap:focus-within > input#tr-phone { border-left-color: var(--violet); }
.theme-light .phone-input-wrap { border-color: transparent; background: var(--bg-alt); }
.theme-light .phone-input-wrap:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--accent-ring); }
.theme-light .phone-input-wrap .phone-country-trigger { background: transparent; }
.theme-light .phone-input-wrap > input#tr-phone { background: transparent; }
.field.has-error .phone-input-wrap { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.15); }
.field.has-error .phone-input-wrap > input#tr-phone { border-color: transparent; box-shadow: none; }
@media (max-width: 480px) {
	.phone-country-picker { flex-basis: 145px; width: 145px; }
	.phone-country-trigger { padding-left: 39px; gap: 4px; font-size: .74rem; }
	.phone-country-menu { width: min(250px, calc(100vw - 38px)); }
}
html[data-theme="dark"] .phone-input-wrap { border-color: #3b4760; background: #20283a; }
html[data-theme="dark"] .phone-country-trigger { color: #f4f6ff; background: transparent; }
html[data-theme="dark"] .phone-input-wrap > input#tr-phone,
html[data-theme="dark"] .phone-input-wrap > input#tr-phone:focus { color: #f4f6ff; background: transparent; }
html[data-theme="dark"] .phone-input-wrap:focus-within { border-color: var(--violet); background: #20283a; }
html[data-theme="dark"] .phone-country-menu { border-color: #3e4b63; color: #f4f6ff; background: #171d30; }
html[data-theme="dark"] .phone-country-search { border-color: #3e4b63 !important; color: #f4f6ff !important; background: #20283a !important; }
html[data-theme="dark"] .phone-country-option { color: #f4f6ff; }
html[data-theme="dark"] .phone-country-option:hover, html[data-theme="dark"] .phone-country-option[aria-selected="true"] { color: #fff; background: #303957; }
html[data-theme="dark"] .phone-country-option span, html[data-theme="dark"] .phone-country-empty { color: #c0c9d8; }
.theme-light .phone-country-trigger { color: #1d1d1f; }
.theme-light .phone-country-menu { border-color: #e0e1e6; color: #20243a; background: #fff; }
.theme-light .phone-country-option:hover, .theme-light .phone-country-option[aria-selected="true"] { color: #24235f; background: #eeefff; }
.input-wrap input:focus, .input-wrap select:focus {
	outline: none;
	border-color: var(--violet);
	background: rgba(5, 6, 15, 0.85);
	box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}
.input-wrap:focus-within > .icon { color: var(--violet-2); }
.select-wrap select { padding-right: 44px; cursor: pointer; }
.select-wrap select option { background: #0d0f20; color: var(--text); }
.select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--dim); pointer-events: none; }

.field-error { display: none; margin: 6px 0 0; color: var(--danger); font-size: 0.8125rem; }
.field.has-error .input-wrap input, .field.has-error .input-wrap select { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.15); }
.field.has-error .field-error, .field-error.is-visible { display: block; }

.check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 4px; cursor: pointer; font-size: 0.875rem; color: var(--muted); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box {
	display: grid; place-items: center; flex-shrink: 0;
	width: 22px; height: 22px; margin-top: 1px;
	border: 1px solid var(--border-strong); border-radius: 7px;
	background: rgba(5, 6, 15, 0.6);
	transition: background-color 0.2s, border-color 0.2s;
}
.check-box .icon { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.25s var(--ease); }
.check input:checked + .check-box { background: var(--grad-btn); border-color: transparent; }
.check input:checked + .check-box .icon { opacity: 1; transform: none; }
.check input:focus-visible + .check-box { outline: 2px solid var(--cyan); outline-offset: 3px; }

.trial-form .btn-block { margin-top: 20px; }
.spinner {
	display: none;
	width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
	animation: spin-plain 0.8s linear infinite;
}
.is-loading .spinner { display: block; }
.is-loading .icon-arrow-right { display: none; }
.is-loading { pointer-events: none; opacity: 0.85; }
.form-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; color: var(--dim); font-size: 0.8125rem; }
.form-note .icon { width: 14px; height: 14px; }

.trial-success { text-align: center; padding: 20px 0 4px; display: grid; gap: 12px; }
.trial-success[hidden], .trial-form[hidden] { display: none; }
.trial-success p { color: var(--muted); margin-bottom: 8px; }
.success-icon {
	justify-self: center;
	display: grid; place-items: center;
	width: 76px; height: 76px; border-radius: 50%;
	background: rgba(52, 211, 153, 0.14); color: var(--green);
	box-shadow: 0 0 0 10px rgba(52, 211, 153, 0.06);
	animation: pop 0.6s var(--ease) both;
}
.success-icon .icon { width: 36px; height: 36px; stroke-width: 2.5; }

/* ---------- Blog & pages ---------- */
.page-hero { padding: calc(var(--header-h) + 72px) 0 32px; text-align: center; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); max-width: 900px; margin-inline: auto; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.3s; }
.post-card:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, 0.35); }
.post-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0d1f; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.post-card:hover .post-thumb img { transform: scale(1.05); }
.thumb-fallback {
	display: grid; place-items: center; width: 100%; height: 100%;
	background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.6), transparent 60%), radial-gradient(circle at 75% 70%, rgba(8, 145, 178, 0.55), transparent 60%), #0b0d1f;
}
.thumb-fallback .icon { width: 40px; height: 40px; fill: rgba(255, 255, 255, 0.9); stroke: none; }
.post-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.post-body time { color: var(--dim); font-size: 0.8125rem; margin-bottom: 8px; }
.post-body h2 { font-size: 1.25rem; margin-bottom: 10px; }
.post-body h2 a:hover { color: var(--violet-2); }
.post-body p { color: var(--muted); font-size: 0.9375rem; }
.read-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--violet-2); font-weight: 700; font-size: 0.9375rem; }
.read-more .icon { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.read-more:hover .icon { transform: translateX(3px); }

.pagination { margin-top: 48px; display: flex; justify-content: center; gap: 8px; }
.pagination .page-numbers {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
	border-radius: 12px; border: 1px solid var(--border); color: var(--muted);
}
.pagination .current { background: var(--grad-btn); color: #fff; border-color: transparent; }
.empty { text-align: center; color: var(--muted); }

.article-cover { margin-bottom: 40px; }
.article-cover img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }

.prose { font-size: 1.0625rem; line-height: 1.8; color: #d3d7f0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.85rem; margin-top: 2em; color: var(--text); }
.prose h3 { font-size: 1.4rem; margin-top: 1.6em; color: var(--text); }
.prose a { color: var(--violet-2); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #fff; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--violet-2); }
.prose img { border-radius: var(--radius-sm); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--violet); color: var(--text); font-style: italic; }
.prose strong { color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }

.article-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	margin: 64px 0 120px; padding: 24px 28px;
	border-color: rgba(167, 139, 250, 0.3);
}
.article-cta div { display: grid; }
.article-cta strong { font-family: var(--font-head); font-size: 1.2rem; }
.article-cta span { color: var(--muted); font-size: 0.9375rem; }

.not-found { min-height: 80vh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 60px) 0 100px; }
.nf-code { font-family: var(--font-head); font-size: clamp(6rem, 18vw, 11rem); font-weight: 700; line-height: 1; margin: 0; letter-spacing: -0.06em; }
.not-found h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.not-found p { color: var(--muted); }
.not-found .hero-actions { justify-content: center; margin-top: 12px; }

/* ---------- Photos ---------- */
.photo { display: block; width: 100%; height: 100%; object-fit: cover; }

.np-art .photo { position: absolute; inset: 0; animation: kenburns 26s ease-in-out infinite alternate; }
.np-live-sweep { position: absolute; z-index: 1; top: 0; bottom: 0; left: -30%; width: 24%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(171,235,255,.12), transparent); transform: skewX(-12deg); }
.np-art.is-changing .photo { animation: player-cut .55s ease both; }
.np-art.is-changing .np-live-sweep { animation: player-sweep .65s ease both; }
@keyframes player-cut { from { opacity: .35; filter: brightness(1.5); transform: scale(1.025); } to { opacity: 1; filter: brightness(1); transform: scale(1); } }
@keyframes player-sweep { 20% { opacity: 1; } to { left: 120%; opacity: 0; } }

.tile { overflow: hidden; isolation: isolate; }
.tile .photo { position: absolute; inset: 0; z-index: -2; transition: transform 0.6s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(5, 6, 15, 0.72)); }
.tile { appearance: none; width: 100%; border: 0; color: #fff; background: #090d18; font: inherit; text-align: left; cursor: pointer; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .25s; pointer-events: none; }
.tile.is-active::before, .tile:focus-visible::before { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(139,92,246,.8); }
.tile.is-active { box-shadow: 0 8px 20px -8px hsl(var(--h1, 262) 80% 50% / 0.28); }
.tile:hover .photo, .tile:focus-visible .photo { transform: scale(1.07); }
.tile:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 3px; }

.photo-chip {
	position: absolute; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(14, 16, 34, 0.82);
	color: #fff;
	font-size: 0.8125rem; font-weight: 600;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
	white-space: nowrap;
}
.photo-chip .icon { width: 16px; height: 16px; }
.photo-chip strong { font-weight: 700; }

/* Watch together */
.together-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 72px; align-items: center;
}
.collage {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	aspect-ratio: 1 / 0.92;
}
.collage figure {
	position: relative; margin: 0; overflow: hidden;
	border-radius: var(--radius);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.collage-main { grid-row: 1 / span 2; }
.collage .photo { transition: transform 0.9s var(--ease); }
.collage figure:hover .photo { transform: scale(1.05); }
.chip-live { top: 18px; left: 18px; }
.chip-live .pulse { color: var(--pink); }
.chip-night { right: 24px; bottom: -18px; animation: float 7s ease-in-out infinite; }

.together-copy h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.together-text { color: var(--muted); font-size: 1.125rem; margin-bottom: 28px; }
.together-points { display: grid; gap: 18px; margin-bottom: 34px; }
.together-points li { display: flex; gap: 14px; align-items: flex-start; }
.tp-icon {
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: rgba(139, 92, 246, 0.14); color: var(--violet-2);
}
.tp-icon .icon { width: 20px; height: 20px; }
.together-points div { display: grid; color: var(--muted); }
.together-points strong { color: var(--text); font-family: var(--font-head); font-size: 1.05rem; }

/* Devices photo */
.devices-grid { margin-bottom: 48px; }
.devices-photo {
	position: relative; margin: 0; overflow: hidden; isolation: isolate;
	aspect-ratio: 4 / 3;
	padding: 12px 8px 40px;
	border-radius: 32px;
	background: radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, .1), transparent 68%);
}
.devices-photo::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: 76%; aspect-ratio: 1; left: 12%; top: 0;
	border: 1px solid rgba(139, 92, 246, .13); border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(167, 139, 250, .22), rgba(99, 102, 241, .07) 50%, rgba(34, 211, 238, .1));
	box-shadow: 0 0 0 22px rgba(139, 92, 246, .025), 0 0 0 44px rgba(139, 92, 246, .018);
}
.devices-photo::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 7%; right: 7%; bottom: 13%; height: 8%; border-radius: 50%;
	background: radial-gradient(ellipse, rgba(79, 70, 229, .22), rgba(79, 70, 229, .04) 55%, transparent 72%);
	filter: blur(6px);
}
.devices-photo .photo {
	object-fit: contain; transform: perspective(1000px) rotateY(-5deg) rotateZ(-1deg);
	filter: drop-shadow(0 22px 18px rgba(26, 18, 64, .24));
	transition: transform .5s var(--ease);
}
.devices-cinema-label {
	position: absolute; top: 14px; right: 22px; z-index: 2;
	display: flex; align-items: center; gap: 7px;
	color: var(--violet); font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.devices-cinema-label .icon { width: 14px; height: 14px; }
.devices-photo .chip-continue {
	left: 50%; bottom: 12px; transform: translateX(-50%);
	border: 1px solid var(--border); padding: 11px 18px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.devices-photo:hover .photo { transform: perspective(1000px) rotateY(0deg) rotateZ(0deg) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
	.devices-photo .photo { transition: none; }
}
@media (max-width: 640px) {
	.devices-photo { padding: 12px 0 32px; }
	.devices-cinema-label { top: 4px; right: 12px; font-size: .5625rem; }
	.devices-photo .chip-continue { bottom: 0; padding: 8px 13px; font-size: .6875rem; }
}
.device-list { grid-template-columns: repeat(6, 1fr); }

/* CTA photo background */
.cta-photo { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cta-photo-light { display: block; }
.cta-photo-dark { display: none; }
html[data-theme="dark"] .cta-photo-light { display: none; }
html[data-theme="dark"] .cta-photo-dark { display: block; }
.cta-overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, rgba(5, 6, 15, 0.9), rgba(46, 16, 101, 0.78)); }

/* Trial photo */
.trial-photo {
	position: relative; overflow: hidden;
	margin: 36px 0 0;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.chip-ready { left: 16px; bottom: 16px; }
.chip-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #16a34a; color: #fff; }
.chip-check .icon { width: 13px; height: 13px; stroke-width: 3; }

@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-2%, -1%); } }

/* ---------- Logo strip ---------- */
.logo-strip { padding: 24px 0 8px; }
.logo-strip-label {
	margin: 0 0 18px; text-align: center;
	color: var(--dim); font-size: 0.8125rem; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
}
.logo-rail {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-rail { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.logo-rail.is-dragging { cursor: grabbing; }
.logo-rail:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.logo-rail.is-draggable .logo-track { animation: none; }
.logo-track img { pointer-events: none; -webkit-user-drag: none; }
.logo-track { display: flex; width: max-content; animation: marquee 36s linear infinite; will-change: transform; }
.logo-track ul { display: flex; flex-shrink: 0; align-items: center; gap: 32px; margin: 0; padding: 8px 32px 8px 0; list-style: none; }
.logo-track li { display: flex; justify-content: center; align-items: center; flex: 0 0 220px; height: 100px; padding: 16px 10px; border: 0; border-radius: 0; background: transparent; }
/* Balance the visible artwork, accounting for each wordmark's proportions. */
.logo-track img { display: block; height: 56px; width: 180px; object-fit: contain; filter: none; opacity: 1; }
.logo-track img[alt="Hulu"] { width: 150px; }
.logo-track img[alt="Apple TV"] { width: 112px; }
.logo-track img[alt="HBO"] { width: 134px; }
.logo-track img[alt="Netflix"] { width: 194px; }
.logo-track img[alt="Disney+"] { width: 152px; height: 68px; }
.logo-track img[alt="Prime Video"] { width: 182px; }
.logo-track img[alt="Videoland"] { width: 194px; }
.logo-track img[alt="NLZIET"] { width: 152px; }
.logo-track img[alt="F1"] { width: 176px; }
.logo-track img[alt="beIN Sports"] { width: 194px; }
@media (max-width: 600px) {
 .logo-track ul { gap: 20px; padding-right: 20px; }
 .logo-track li { flex-basis: 196px; height: 88px; padding: 12px 8px; }
 .logo-track img { max-width: 176px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
 .logo-track { animation: none; transform: none; will-change: auto; }
 .logo-rail { overflow-x: auto; }
 .logo-rail:not(.is-draggable) .logo-track ul[aria-hidden] { display: none; }
}
.wordmark {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em;
	color: var(--dim); white-space: nowrap;
	transition: color 0.3s;
}
.wordmark .icon { width: 24px; height: 24px; }
.wordmark:hover { color: var(--text); }

/* ---------- Genre posters ---------- */
.posters { padding: 80px 0 16px; overflow: hidden; }
.posters-head { margin-bottom: 20px; }
.posters-head .eyebrow { margin-bottom: 12px; }
.posters-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin: 0; }
.poster-rail {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.poster-track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.poster-rail { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.poster-rail.is-dragging { cursor: grabbing; }
.poster-rail:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.poster-rail.is-draggable .poster-track { animation: none; }
.poster img { pointer-events: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) {
 .poster-track { animation: none; }
 .poster-rail { overflow-x: auto; }
 .poster-rail:not(.is-draggable) ul[aria-hidden] { display: none; }
}
.poster-track ul { display: flex; flex-shrink: 0; gap: 18px; margin: 0; padding: 14px 18px 30px 0; list-style: none; }
.poster {
 position: relative; flex-shrink: 0; width: 210px;
 border-radius: 16px; overflow: hidden; background: var(--surface);
 box-shadow: 0 18px 32px -22px rgba(0, 0, 0, 0.4);
 transition: transform 0.3s var(--ease);
}
.poster:hover { transform: translateY(-5px); }
.poster-rail.is-dragging .poster { transform: none; }
.poster .photo { display: block; position: static; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.poster-meta { display: grid; gap: 5px; padding: 13px 14px 15px; color: var(--text); }
.poster-meta strong { font-family: var(--font-head); font-size: 0.9375rem; line-height: 1.25; }
.poster-meta span { font-size: 0.75rem; color: var(--muted); }
.poster-live {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 9px; border-radius: 999px;
	background: #e11d48; color: #fff;
	font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
}
.poster-live .pulse { color: #fff; }

/* ---------- Feature cards with photos ---------- */
/* TV guide + live preview */
.v-epg { grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; place-items: stretch; align-items: center; }
.epg-preview {
	position: relative; align-self: stretch;
	min-height: 200px;
	border-radius: 14px; overflow: hidden; isolation: isolate;
	box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.55);
}
.epg-preview .photo { position: absolute; inset: 0; z-index: -2; }
.epg-preview::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(5, 6, 15, 0.9)); }
.epg-preview-meta { position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; color: #fff; font-size: 0.75rem; }
.epg-preview-meta strong { font-family: var(--font-head); font-size: 0.95rem; }
.epg-preview-meta span { color: rgba(255, 255, 255, 0.75); }

/* HD vs 4K comparison slider */
@property --pos { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.v-quality { padding: 20px 20px 0; }
.compare {
	position: relative; width: 100%;
	aspect-ratio: 16 / 11;
	border-radius: 14px; overflow: hidden;
	animation: compare-sweep 7s ease-in-out infinite alternate;
	user-select: none;
}
.compare.is-manual { animation: none; }
.compare > .photo { position: absolute; inset: 0; }
.compare-low { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-low .photo { filter: blur(3.5px) saturate(0.75) contrast(0.9); transform: scale(1.04); }
.compare-line {
	position: absolute; top: 0; bottom: 0; left: var(--pos);
	width: 2px; margin-left: -1px;
	background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.compare-knob {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: #fff; color: #1d1d1f;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.compare-knob .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.compare-tag {
	position: absolute; top: 10px;
	padding: 3px 9px; border-radius: 999px;
	background: rgba(0, 0, 0, 0.55); color: #fff;
	font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
	pointer-events: none;
}
.tag-low { left: 10px; }
.tag-high { right: 10px; background: var(--violet); }
.compare-range {
	position: absolute; inset: 0; z-index: 3;
	width: 100%; height: 100%; margin: 0;
	opacity: 0; cursor: ew-resize;
	-webkit-appearance: none; appearance: none;
}
@keyframes compare-sweep { 0%, 15% { --pos: 28%; } 85%, 100% { --pos: 72%; } }

/* Every screen: living-room photo */
.v-devices { display: block; padding: 0; min-height: 220px; }
.dev-photo { position: absolute; inset: 0; }
.dev-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(5, 6, 15, 0.55)); }
.v-devices .dev-row { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; }
.v-devices .dev-row span {
	width: 50px; height: 50px; border-radius: 14px;
	background: rgba(10, 12, 27, 0.72);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
	transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal="zoom"] { transform: translateY(20px) scale(0.96); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes drift-1 { to { transform: translate(140px, 120px) scale(1.15); } }
@keyframes drift-2 { to { transform: translate(-160px, 140px) scale(0.9); } }
@keyframes drift-3 { to { transform: translate(-120px, -100px) scale(1.1); } }
@keyframes pulse-dot { 50% { opacity: 0.4; } }
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes np-a { to { transform: translate(30%, 15%) scale(1.2); } }
@keyframes np-b { to { transform: translate(-25%, 20%) scale(0.9); } }
@keyframes progress { from { width: 8%; } to { width: 96%; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes epg-now { from { left: calc(92px + 8px + 8%); } to { left: calc(92px + 8px + 62%); } }
@keyframes shine { to { background-position: -250% 0; } }
@keyframes bars { 0%, 100% { height: 30%; opacity: 0.7; } 50% { height: 95%; opacity: 1; } }
@keyframes ring { 0% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ring-check { 0%, 50% { opacity: 0; transform: scale(0.4); } 60%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes rewind { 0%, 15% { width: 92%; } 55%, 75% { width: 28%; } 100% { width: 92%; } }
@keyframes rewind-knob { 0%, 15% { left: 92%; } 55%, 75% { left: 28%; } 100% { left: 92%; } }
@keyframes dev-glow {
	0%, 12%, 100% { color: var(--muted); border-color: var(--border); box-shadow: none; }
	5% { color: #fff; border-color: rgba(34, 211, 238, 0.6); box-shadow: 0 0 24px -4px rgba(34, 211, 238, 0.6); }
}
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin-plain { to { transform: rotate(360deg); } }
@keyframes ring-out { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.6); opacity: 0; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.main-nav a { padding: 10px 10px; }
	.plans { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
	.trial-grid { grid-template-columns: 1fr 440px; gap: 44px; }
}

@media (max-width: 760px) {
	.long-offer { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; padding: 18px; }
	.long-offer-icon { width: 40px; height: 40px; }
	.long-offer-price { grid-column: 2; grid-row: 2; text-align: left; }
	.long-offer > .btn { grid-column: 3; grid-row: 1 / span 2; white-space: normal; }
}
@media (max-width: 480px) {
	.long-offer { grid-template-columns: 38px minmax(0, 1fr); }
	.long-offer-icon { grid-column: 1; grid-row: 1; width: 36px; height: 36px; }
	.long-offer-copy { grid-column: 2; grid-row: 1; }
	.long-offer-price { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: baseline; gap: 9px; padding-left: 50px; }
	.long-offer > .btn { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 960px) {
	:root { --header-h: 68px; }
	.main-nav, .hide-mobile { display: none; }
	.menu-toggle { display: inline-flex; }

	.section { padding: 88px 0; }
	.hero { min-height: 0; padding-top: calc(var(--header-h) + 56px); }
	.hero-grid { grid-template-columns: 1fr; gap: 72px; }
	.hero-copy { text-align: center; }
	.hero-text { margin-inline: auto; }
	.hero-actions, .hero-badges { justify-content: center; }
	.hero-visual { max-width: 620px; margin-inline: auto; width: 100%; }
	.chip-1 { left: -8px; }
	.chip-2 { right: -8px; }

	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stats-grid li:nth-child(3)::before { display: none; }

	.bento { grid-template-columns: repeat(2, 1fr); }
	.size-xl { grid-column: span 2; }
	.size-sm, .size-md, .size-lg { grid-column: span 1; }

	.steps { grid-template-columns: 1fr; }
	.steps::before { display: none; }

	.devices-grid, .faq-grid, .trial-grid { grid-template-columns: 1fr; gap: 48px; }
	.devices-copy { text-align: center; }
	.faq-intro { position: static; }

	.reviews, .post-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }

	.trial-card { max-width: 560px; width: 100%; margin-inline: auto; }
}

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

@media (max-width: 640px) {
	.container { padding-inline: 16px; }
	.section { padding: 72px 0; }
	.section-head { margin-bottom: 44px; }
	.hero-actions .btn { width: 100%; }
	.header-actions .btn-primary { display: none; }

	.device { padding: 8px; border-radius: 20px; }
	.device-body { grid-template-columns: 1fr; }
	.device-side { display: none; }
	.tiles { grid-template-columns: repeat(2, 1fr); }
	.tiles .tile { aspect-ratio: 16 / 7; }
	.float-chip { font-size: 0.75rem; padding: 8px 10px; }
	.float-chip .icon { width: 26px; height: 26px; padding: 5px; }
	.chip-1 { top: -18px; left: 0; }
	.chip-2 { bottom: 36%; right: 0; }
	.chip-3 { bottom: -18px; left: auto; right: 10%; }

	.stats-grid li { padding: 22px 12px; }
	.devices-stats-grid li { padding: 20px 5px; }
	.devices-stats-grid strong, .devices-stats-grid .stat-suffix { font-size: clamp(1.1rem, 5vw, 1.7rem); }
	.devices-stats-grid .stat-label { margin-top: 6px; font-size: .6875rem; }
	.payment-logos { gap: 7px; }
	.payment-logos li { min-width: 70px; min-height: 32px; padding-inline: 6px; }
	.payment-logos img { height: 18px; max-width: 94px; }

	.bento { grid-template-columns: 1fr; }
	.size-xl, .size-sm, .size-md, .size-lg { grid-column: auto; }
	.bento-card { min-height: 0; }
	.epg-head, .epg-row { grid-template-columns: 74px 1fr; }
	.epg-head { grid-template-columns: 74px repeat(3, 1fr); }
	.epg-now { animation: none; left: calc(74px + 8px + 30%); }

	.device-list { grid-template-columns: repeat(2, 1fr); }
	.plans, .reviews, .post-grid { grid-template-columns: 1fr; }

	.cta-panel { padding: 56px 20px; border-radius: 24px; }
	.footer-grid { grid-template-columns: 1fr; gap: 36px; }

	.trial-card { padding: 24px 18px; }
	.wa-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.js [data-reveal] { opacity: 1; transform: none; }
	.marquee-track { animation: none; }
	.device { transform: none; }
}

/* ---------- Photo sections: responsive ---------- */
@media (max-width: 1100px) {
	.device-list { grid-template-columns: repeat(3, 1fr); }
	.together-grid { gap: 48px; }
}
@media (max-width: 960px) {
	.together-grid { grid-template-columns: 1fr; }
	.collage { max-width: 620px; width: 100%; margin-inline: auto; }
	.trial-photo { display: none; }
}
@media (max-width: 640px) {
	.collage { gap: 10px; }
	.chip-night { right: 12px; }
	.device-list { grid-template-columns: repeat(2, 1fr); }
	.photo-chip { font-size: 0.75rem; padding: 8px 12px; }
}

/* ---------- Posters & feature photos: responsive ---------- */
@media (max-width: 640px) {
	.posters { padding-top: 56px; }
	.poster { width: 160px; }
	.poster-track ul { gap: 12px; padding-right: 12px; }
	.v-epg { grid-template-columns: minmax(0, 1fr); }
	.epg-preview { display: none; }
}

/* ---------- Feature card refinements ---------- */
/* Servers: healthy green shades */
.bars i,
.theme-light .bars i {
	background: linear-gradient(180deg, hsl(calc(135 + var(--b) * 3) 68% 46%), hsl(calc(150 + var(--b) * 3) 70% 78%));
}

/* Instant activation timeline */
.act-steps { width: 100%; max-width: 300px; display: grid; gap: 10px; counter-reset: none; }
.act-steps li {
	display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	font-size: 0.875rem; font-weight: 600; color: var(--text);
}
.act-steps time { color: var(--dim); font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.act-dot {
	display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: #16a34a; color: #fff;
}
.act-dot .icon { width: 15px; height: 15px; stroke-width: 2.5; }
.is-in .act-steps li { animation: act-step 6s var(--ease) infinite; }
.is-in .act-steps li:nth-child(2) { animation-delay: 0.9s; }
.is-in .act-steps li:nth-child(3) { animation-delay: 1.8s; }
.is-in .act-steps li .act-dot { animation: act-dot 6s var(--ease) infinite; animation-delay: inherit; }
.is-in .act-steps li:nth-child(2) .act-dot { animation-delay: 0.9s; }
.is-in .act-steps li:nth-child(3) .act-dot { animation-delay: 1.8s; }
@keyframes act-step { 0% { opacity: 0.35; transform: translateY(6px); } 8%, 80% { opacity: 1; transform: none; } 95%, 100% { opacity: 0.35; } }
@keyframes act-dot { 0% { background: var(--surface-2); color: var(--dim); } 8%, 80% { background: #16a34a; color: #fff; } 95%, 100% { background: var(--surface-2); color: var(--dim); } }

/* Devices: one row of coloured tiles at the bottom of the photo */
.v-devices .dev-row { flex-wrap: nowrap; gap: 8px; bottom: 14px; }
.v-devices .dev-row span,
.theme-light .v-devices .dev-row span {
	width: 44px; height: 44px; flex-shrink: 0;
	border: 0; border-radius: 12px;
	color: #fff;
	background: var(--tile);
	box-shadow: 0 8px 18px -8px var(--tile);
	animation: dev-pop 6s var(--ease) infinite;
	animation-delay: calc(var(--k) * 1s);
}
.v-devices .dev-row .icon { width: 21px; height: 21px; }
.v-devices .dev-row span:nth-child(1) { --tile: #4f46e5; }
.v-devices .dev-row span:nth-child(2) { --tile: #f97316; }
.v-devices .dev-row span:nth-child(3) { --tile: #16a34a; }
.v-devices .dev-row span:nth-child(4) { --tile: #db2777; }
.v-devices .dev-row span:nth-child(5) { --tile: #0891b2; }
.v-devices .dev-row span:nth-child(6) { --tile: #ca8a04; }
@keyframes dev-pop { 0%, 12%, 100% { transform: none; } 5% { transform: translateY(-5px) scale(1.1); } }

/* ---------- Named, colour-coded packs ---------- */
.plan { --plan: var(--violet); }
.plan::before {
	content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 4px;
	border-radius: 0 0 6px 6px;
	background: var(--plan);
}
.plan.is-popular::before { display: none; }
.plan-tier { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-bottom: 22px; }
.plan-icon {
	display: grid; place-items: center; flex-shrink: 0;
	width: 46px; height: 46px; border-radius: 14px;
	background: color-mix(in srgb, var(--plan) 18%, transparent);
	color: var(--plan);
}
.plan-icon .icon { width: 22px; height: 22px; }
.plan-tier div { display: grid; }
.plan-tier strong { font-family: var(--font-head); font-size: 1.25rem; letter-spacing: -0.02em; color: var(--plan); line-height: 1.2; }
.plan-tier span { color: var(--dim); font-size: 0.8125rem; }
.plan header h3 { font-size: 0.9375rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan-features .icon { color: var(--plan); }
.btn-plan {
	background: color-mix(in srgb, var(--plan) 16%, transparent);
	color: var(--plan);
	border-color: transparent;
}
.btn-plan:hover { background: var(--plan); color: #fff; transform: translateY(-2px); }
.plan:hover { border-color: color-mix(in srgb, var(--plan) 45%, transparent); }

/* ---------- Hero: rotating word + soft moving background ---------- */
.hero { isolation: isolate; }
.hero-title .grad-text {
	display: inline-block;
	/* Give tightly tracked glyphs room inside the clipped gradient background. */
	padding: 0.12em 0.1em;
	margin: -0.12em -0.1em;
	transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), filter 0.35s;
}
.hero-title .grad-text.is-out { opacity: 0; transform: translateY(0.35em); filter: blur(8px); }
.hero-bg { display: none; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hb { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.hb-1 { width: 560px; height: 560px; top: -180px; left: 6%;  background: #c7d2fe; opacity: 0.7;  animation: hb-a 18s ease-in-out infinite alternate; }
.hb-2 { width: 480px; height: 480px; top: -80px;  right: 4%; background: #fbcfe8; opacity: 0.6;  animation: hb-b 22s ease-in-out infinite alternate; }
.hb-3 { width: 440px; height: 440px; top: 240px;  left: 36%; background: #a5f3fc; opacity: 0.45; animation: hb-c 20s ease-in-out infinite alternate; }
.hb-4 { width: 320px; height: 320px; top: 160px;  left: -80px; background: #fde68a; opacity: 0.4; animation: hb-b 26s ease-in-out infinite alternate-reverse; }
.hero-dots {
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(79, 70, 229, 0.2) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: radial-gradient(ellipse 60% 45% at 50% 28%, #000 25%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 60% 45% at 50% 28%, #000 25%, transparent 75%);
}
.hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(rgba(255, 255, 255, 0), var(--bg)); }
@keyframes hb-a { to { transform: translate(140px, 70px) scale(1.12); } }
@keyframes hb-b { to { transform: translate(-120px, 90px) scale(0.9); } }
@keyframes hb-c { to { transform: translate(-90px, -70px) scale(1.15); } }
@media (max-width: 640px) {
	.hb { filter: blur(50px); }
	.hb-1 { width: 340px; height: 340px; left: -60px; }
	.hb-2 { width: 300px; height: 300px; right: -80px; }
	.hb-3 { width: 280px; height: 280px; left: 20%; }
}

/* ---------- Free trial callout (top of pricing) ---------- */
.trial-callout {
	position: relative; overflow: hidden;
	display: flex; align-items: center; gap: 16px;
	max-width: 780px; margin: -24px auto 64px;
	padding: 12px 12px 12px 14px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(52, 211, 153, 0.14), rgba(139, 92, 246, 0.14));
	border: 1px solid rgba(52, 211, 153, 0.35);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.trial-callout::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
	transform: translateX(-100%);
	animation: tc-shine 5s ease-in-out infinite;
}
.trial-callout:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(22, 163, 74, 0.55); }
.tc-icon {
	display: grid; place-items: center; flex-shrink: 0;
	width: 46px; height: 46px; border-radius: 50%;
	background: #16a34a; color: #fff;
	box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.15);
}
.tc-icon .icon { width: 22px; height: 22px; }
.tc-text { flex: 1; display: grid; text-align: left; }
.tc-text strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--text); }
.tc-text span { font-size: 0.875rem; color: var(--muted); }
.tc-btn {
	display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
	padding: 12px 20px; border-radius: 999px;
	background: #16a34a; color: #fff;
	font-weight: 700; font-size: 0.9375rem; white-space: nowrap;
}
.tc-btn .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.trial-callout:hover .tc-btn .icon { transform: translateX(3px); }
@keyframes tc-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (max-width: 640px) {
	.trial-callout { flex-wrap: wrap; border-radius: 20px; margin: -16px auto 40px; padding: 16px; }
	.tc-btn { width: 100%; justify-content: center; }
}

/* Catch-up slider: green */
.tl-fill,
.theme-light .tl-fill { background: linear-gradient(90deg, #4ade80, #16a34a); }
.tl-knob,
.theme-light .tl-knob { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.18), 0 4px 12px rgba(22, 163, 74, 0.35); }

/* ---------- "Everything in one app": app-style screen ---------- */
.app-ui { width: 100%; display: grid; gap: 12px; align-self: center; }
.app-tabs { display: flex; align-items: center; gap: 6px; }
.app-tabs span {
	padding: 6px 13px; border-radius: 999px;
	font-size: 0.8125rem; font-weight: 600;
	color: var(--muted); background: var(--surface);
}
.app-tabs .is-on { background: var(--violet); color: #fff; }
.app-tabs .app-search { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; }
.app-search .icon { width: 15px; height: 15px; }
.app-list { display: grid; gap: 4px; }
.app-row {
	display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 7px 10px 7px 7px;
	border-radius: 12px; border: 1px solid transparent;
	animation: app-focus 10s var(--ease) infinite;
	animation-delay: calc(var(--k) * 2s);
}
@keyframes app-focus {
	0%, 18% { background: var(--surface); border-color: var(--border); box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.4); transform: translateX(4px); }
	22%, 100% { background: transparent; border-color: transparent; box-shadow: none; transform: none; }
}
.app-thumb { position: relative; width: 66px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.app-thumb .photo { position: absolute; inset: 0; }
.app-info { display: grid; gap: 1px; min-width: 0; }
.app-ch { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.app-info strong { font-size: 0.875rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar { display: block; height: 4px; margin-top: 5px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.app-bar i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--violet); animation: app-progress 18s linear infinite alternate; }
@keyframes app-progress { from { width: calc(var(--p) - 8%); } to { width: calc(var(--p) + 8%); } }
.app-side { display: grid; justify-items: end; gap: 4px; }
.app-side em {
	font-style: normal; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em;
	padding: 2px 6px; border-radius: 5px;
	border: 1px solid var(--border-strong); color: var(--muted);
}
.app-side em.is-4k { background: var(--violet); border-color: var(--violet); color: #fff; }
.app-side small { font-size: 0.6875rem; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
	.app-row.is-on { background: var(--surface); border-color: var(--border); }
}
@media (max-width: 640px) {
	.app-side small, .app-tabs .app-search { display: none; }
	.app-tabs span { padding: 6px 10px; }
}

/* Sports row shares the movie carousel's sizing, input and motion behavior. */
.sports-section { padding-block: 64px 24px; }
.sports-description { margin: 16px 0 0; max-width: 620px; color: var(--muted); font-size: 1rem; }
.sports-cover { position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; }
.sports-cover .photo { height: 100%; width: 100%; object-fit: contain; background: #090d18; }
.sports-brand { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 18px; color: #fff; isolation: isolate; background: radial-gradient(ellipse at 10% 0%,color-mix(in srgb,var(--sport-color),white 18%),transparent 65%),linear-gradient(155deg,var(--sport-color),#0b1426); }
.sports-brand::before { content: ''; position: absolute; inset: 15% -35%; z-index: -1; border: 1px solid #ffffff20; border-radius: 50%; transform: rotate(-30deg); box-shadow: 0 0 0 22px #ffffff06,0 0 0 48px #ffffff05; }
.sports-cover-category { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; text-align: center; }
.sports-league-logo { width: 142px; height: 142px; object-fit: contain; filter: drop-shadow(0 8px 12px #0004); }
.sports-cover-name { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; text-align: center; }
.sports-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%,rgba(5,10,20,.82)); }
.sports-photo-label { position: absolute; z-index: 1; bottom: 25px; left: 18px; right: 18px; color: #fff; font-size: .75rem; }
.sports-photo-label strong { display: block; margin-top: 8px; font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; line-height: 1.03; letter-spacing: -.03em; }
.sports-card .poster-meta { min-height: 76px; }
@media(max-width:640px) {
 .sports-section { padding-top: 48px; }
 .sports-brand { padding: 20px 13px; }
 .sports-league-logo { width: 108px; height: 108px; }
 .sports-cover-name { font-size: 1.4rem; }
 .sports-photo-label { left: 13px; right: 13px; bottom: 20px; }
 .sports-photo-label strong { font-size: 1.55rem; }
}
.checkout-backdrop[hidden] { display: none; }
.checkout-backdrop { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(9, 17, 35, .58); backdrop-filter: blur(9px); opacity: 0; transition: opacity .22s ease; }
.checkout-backdrop.is-open { opacity: 1; }
.checkout-dialog { --checkout-accent: #5b5ce2; position: relative; width: min(100%, 510px); max-height: min(90vh, 760px); overflow: auto; padding: clamp(28px, 5vw, 42px); border: 1px solid rgba(255,255,255,.78); border-radius: 25px; color: var(--text, #20243a); background: var(--surface, #fff); box-shadow: 0 28px 90px rgba(9,17,35,.32); transform: translateY(18px) scale(.975); transition: transform .32s cubic-bezier(.2,.8,.2,1); outline: none; }
.checkout-backdrop.is-open .checkout-dialog { transform: translateY(0) scale(1); }
.checkout-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; color: #52627a; background: #eff3fa; font: 400 25px/1 inherit; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.checkout-close { font-family: inherit; }
.checkout-close:hover { transform: rotate(90deg); background: #e3eaf5; }
.checkout-eyebrow { margin: 0 48px 9px 0; color: var(--checkout-accent); font-size: 11px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.checkout-dialog h2 { margin: 0 40px 5px 0; font-size: clamp(25px, 5vw, 32px); letter-spacing: -.045em; }
.checkout-plan { display: flex; flex-wrap: wrap; gap: 7px 13px; margin: 0; color: var(--muted, #69758b); font-size: 15px; }
.checkout-plan span:first-child { font-weight: 700; }
.checkout-price { margin: 18px 0 15px; color: var(--checkout-accent); font-size: clamp(34px, 8vw, 44px); font-weight: 850; letter-spacing: -.055em; }
.checkout-description { margin: 0 0 18px; color: var(--muted, #69758b); font-size: 14px; line-height: 1.7; }
.checkout-options { display: grid; gap: 10px; }
.checkout-option { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 800; text-align: center; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.checkout-option[hidden] { display: none; }
.checkout-option:hover { transform: translateY(-2px); filter: saturate(1.08); }
.checkout-option-wa { color: #fff; background: linear-gradient(110deg, #087c69, #07866d 60%, #147d99); box-shadow: 0 8px 20px rgba(16,129,105,.22); }
.checkout-option-card { color: #fff; background: linear-gradient(110deg, #d90e17, #f1252d); box-shadow: 0 7px 19px rgba(217,14,23,.18); }
.checkout-option-crypto { position: relative; min-height: 58px; margin-top: 4px; padding-top: 15px; color: #5d4600; background: linear-gradient(120deg, #fff6d3 0%, #ffe89a 48%, #f4ca4f 100%); border: 1px solid rgba(193,145,19,.32); box-shadow: 0 10px 25px rgba(190,145,20,.2), inset 0 1px 0 rgba(255,255,255,.92); }
.checkout-option-crypto::before { content: 'SAVE 17%'; position: absolute; top: -9px; left: 17px; padding: 3px 9px; border: 2px solid var(--surface, #fff); border-radius: 999px; color: #fff; background: linear-gradient(110deg, #b78208, #d4a51b); font-size: 9px; font-weight: 900; letter-spacing: .09em; box-shadow: 0 3px 8px rgba(139,101,10,.2); }
.checkout-option-crypto strong { font-weight: 900; }
.checkout-option-crypto:hover { box-shadow: 0 13px 29px rgba(190,145,20,.3), inset 0 1px 0 rgba(255,255,255,.92); }
.checkout-note { margin: 17px 0 0; color: var(--muted, #69758b); font-size: 11px; line-height: 1.65; }
.checkout-is-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .checkout-backdrop, .checkout-dialog, .checkout-close, .checkout-option { transition-duration: .01ms !important; } }

/* Click-to-flip details on the payment dialog only. */
.checkout-dialog { width: min(612px, calc(100vw - 44px)); height: min(642px, calc(100dvh - 36px)); max-height: none; padding: 0; overflow: hidden; perspective: 1400px; }
.checkout-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.2,.75,.2,1); }
.checkout-dialog.is-flipped .checkout-card-inner { transform: rotateY(180deg); }
.checkout-face { position: absolute; inset: 0; min-width: 0; overflow-y: auto; padding: 84px clamp(29px, 5vw, 50px) 32px; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; scrollbar-width: none; }
.checkout-face::-webkit-scrollbar { display: none; }
.checkout-front { transform: rotateY(0); }
.checkout-back { display: flex; flex-direction: column; justify-content: center; transform: rotateY(180deg); }
.checkout-close, .checkout-flip-toggle { z-index: 5; }
.checkout-corner-tools { position: absolute; z-index: 6; top: 0; left: 0; width: 76px; height: 76px; overflow: hidden; border-top-left-radius: inherit; pointer-events: none; }
.checkout-corner-tools::before, .checkout-corner-tools::after { position: absolute; top: 0; left: 0; width: 76px; height: 76px; content: ""; transform-origin: top left; transition: transform .42s cubic-bezier(.2,.75,.2,1), filter .3s; }
.checkout-corner-tools::before { z-index: 0; background: linear-gradient(145deg, #ff6575 0%, #f20b32 52%, #c90026 100%); clip-path: polygon(0 0, 100% 0, 0 100%); filter: drop-shadow(3px 4px 4px rgba(128,13,36,.18)); }
.checkout-corner-tools::after { display: none; }
.checkout-flip-toggle { position: absolute; z-index: 2; top: 3px; left: 3px; display: grid; place-items: start; width: 53px; height: 53px; padding: 9px 0 0 9px; border: 0; border-radius: 22px 0 0 0; color: #fff; background: transparent; cursor: pointer; pointer-events: auto; }
.checkout-flip-toggle span { display: block; font-size: 25px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(95,0,20,.32)); transition: transform .55s cubic-bezier(.2,.75,.2,1); }
.checkout-flip-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -7px; }
.checkout-corner-tools:has(.checkout-flip-toggle:hover)::before, .checkout-corner-tools:has(.checkout-flip-toggle:focus-visible)::before { transform: perspective(180px) rotateY(-12deg) rotateX(7deg) scale(.96); filter: drop-shadow(6px 8px 7px rgba(128,13,36,.3)); }
.checkout-flip-toggle:hover span, .checkout-flip-toggle:focus-visible span { animation: checkout-arrow-wiggle .65s ease-in-out infinite; }
.checkout-flip-prompt { position: absolute; z-index: 4; top: 19px; left: 50%; display: grid; gap: 6px; min-width: 0; transform: translateX(-50%); text-align: center; line-height: 1.1; white-space: nowrap; pointer-events: none; }
.checkout-flip-prompt strong { color: var(--text, #20243a); font-size: 19px; font-weight: 850; letter-spacing: -.035em; }
.checkout-flip-prompt small { color: var(--muted, #69758b); font-size: 11px; font-weight: 700; }
.checkout-prompt-action { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid color-mix(in srgb, #e20b2c 22%, transparent); border-radius: 999px; color: #d81732; background: color-mix(in srgb, #e20b2c 6%, var(--surface, #fff)); letter-spacing: .01em; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.checkout-prompt-action > span { display: inline-block; font-size: 14px; line-height: .8; transition: transform .25s; }
.checkout-dialog:has(.checkout-flip-toggle:hover) .checkout-prompt-action, .checkout-dialog:has(.checkout-flip-toggle:focus-visible) .checkout-prompt-action { color: #fff; border-color: #e20b2c; background: linear-gradient(135deg,#ff5367,#e20b2c); transform: translateY(-1px); }
.checkout-dialog:has(.checkout-flip-toggle:hover) .checkout-prompt-action > span, .checkout-dialog:has(.checkout-flip-toggle:focus-visible) .checkout-prompt-action > span { transform: translate(2px,-2px); }
.checkout-flip-toggle[aria-pressed="true"] span { transform: rotate(180deg); }
.checkout-front .checkout-eyebrow, .checkout-back .checkout-eyebrow { margin-bottom: 6px; line-height: 1.35; }
.checkout-dialog h2 { line-height: 1.12; }
.checkout-front h2 { font-size: clamp(28px, 5vw, 38px); }
.checkout-front .checkout-plan { font-size: 18px; }
.checkout-front .checkout-price { margin: 15px 0 12px; font-size: clamp(41px, 8vw, 53px); }
.checkout-front .checkout-description { margin-bottom: 15px; font-size: 16px; line-height: 1.6; }
.checkout-front .checkout-options { gap: 10px; }
.checkout-front .checkout-option { min-height: 53px; padding-block: 12px; font-size: 16px; }
.checkout-front .checkout-option-crypto { min-height: 62px; }
.checkout-front .checkout-note { margin-top: 14px; font-size: 11px; line-height: 1.55; }
@keyframes checkout-arrow-wiggle { 0%,100% { transform: translateY(0); } 30% { transform: translateY(3px); } 70% { transform: translateY(-2px); } }
@media (max-width: 480px) { .checkout-backdrop { padding: 10px; } .checkout-dialog { width: calc(100vw - 20px); height: min(642px, calc(100dvh - 20px)); } .checkout-corner-tools, .checkout-corner-tools::before, .checkout-corner-tools::after { width: 64px; height: 64px; } .checkout-corner-tools::after { top: 31px; left: 31px; width: 33px; height: 33px; } .checkout-flip-toggle { width: 48px; height: 48px; padding: 8px 0 0 8px; } .checkout-flip-toggle span { font-size: 22px; } .checkout-flip-prompt { top: 16px; gap: 5px; } .checkout-flip-prompt strong { font-size: 16px; } .checkout-flip-prompt small { font-size: 10px; } .checkout-prompt-action { padding: 4px 8px; } .checkout-face { padding: 76px 22px 24px; } .checkout-close { top: 13px; right: 13px; } .checkout-front .checkout-plan { font-size: 16px; } .checkout-front .checkout-description { font-size: 14px; } .checkout-front .checkout-option { font-size: 14px; } }
@media (max-width: 360px) { .checkout-flip-prompt { top: 15px; left: 56%; gap: 4px; } .checkout-flip-prompt strong { font-size: 14px; } .checkout-prompt-action { padding: 4px 6px; font-size: 9px; } .checkout-face { padding-top: 72px; } }
@media (prefers-reduced-motion: reduce) { .checkout-card-inner, .checkout-flip-toggle span, .checkout-corner-tools::before, .checkout-corner-tools::after { transition-duration: .01ms !important; animation: none !important; } }

/* Keep checkout details vivid and readable when the site uses its night palette. */
html[data-theme="dark"] .checkout-dialog { color: #f4f6ff; border-color: #46516b; background: linear-gradient(145deg, #171d30 0%, #11182a 62%, #101d2b 100%); box-shadow: 0 32px 100px #020611b8, inset 0 1px 0 #ffffff12; }
html[data-theme="dark"] .checkout-close { color: #d9e2f5; background: #26324a; }
html[data-theme="dark"] .checkout-close:hover { color: #fff; background: #35425d; }
html[data-theme="dark"] .checkout-flip-prompt strong { color: #f6f7ff; text-shadow: 0 2px 14px #0007; }
html[data-theme="dark"] .checkout-flip-prompt small { color: #bac6dc; }
html[data-theme="dark"] .checkout-prompt-action { color: #ffb2bd; border-color: #ff647644; background: #ff304014; }
html[data-theme="dark"] .checkout-dialog:has(.checkout-flip-toggle:hover) .checkout-prompt-action, html[data-theme="dark"] .checkout-dialog:has(.checkout-flip-toggle:focus-visible) .checkout-prompt-action { color: #fff; border-color: #ff6476; background: linear-gradient(135deg,#ff5367,#e20b2c); }
html[data-theme="dark"] .checkout-eyebrow { color: color-mix(in srgb, var(--checkout-accent) 76%, #ffd18a); }
html[data-theme="dark"] .checkout-price { color: color-mix(in srgb, var(--checkout-accent) 72%, #ffd166); }
html[data-theme="dark"] .checkout-plan, html[data-theme="dark"] .checkout-description, html[data-theme="dark"] .checkout-note { color: #bec9df; }
html[data-theme="dark"] .checkout-option-crypto::before { border-color: #20283a; }

/* Household package builder on the checkout card's reverse face. */
.checkout-builder { width: min(100%, 540px); margin-inline: auto; }
.checkout-builder .checkout-eyebrow { margin: 0 0 5px; }
.checkout-builder h2 { margin: 0 0 5px; font-size: clamp(23px, 4vw, 29px); letter-spacing: -.045em; }
.checkout-builder h2 span { color: #1685f8; }
.checkout-builder-intro { margin: 0 0 13px; color: var(--muted, #69758b); font-size: 12px; line-height: 1.45; }
.checkout-package-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.checkout-package-shortcut { display: grid; align-content: start; gap: 5px; min-width: 0; min-height: 91px; padding: 10px 11px; border: 1px solid var(--border-strong, #d7deea); border-radius: 14px; color: var(--text, #20243a); background: var(--surface, #fff); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.checkout-package-shortcut:hover { border-color: #1685f8; transform: translateY(-2px); }
.checkout-package-shortcut.is-selected { border: 2px solid #1685f8; padding: 9px 10px; background: #eaf5ff; box-shadow: 0 5px 18px #1685f81c; }
.checkout-device-icons { color: #0878e8; font-family: Arial, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -4px; line-height: 1; }
.checkout-device-icons b { margin-left: 4px; font-size: 16px; }
.checkout-package-shortcut strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.checkout-package-shortcut small { color: var(--muted, #69758b); font-size: 10px; white-space: nowrap; }
.checkout-builder-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 13px; }
.checkout-builder-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout-builder-group legend { margin-bottom: 5px; padding: 0; color: var(--text, #20243a); font-size: 11px; font-weight: 800; }
.checkout-choice-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.checkout-duration-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.checkout-choice { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 37px; padding: 4px 2px; border: 1px solid var(--border-strong, #d7deea); border-radius: 9px; color: var(--text, #20243a); background: var(--surface, #fff); font: inherit; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.checkout-choice small { color: var(--muted, #69758b); font-size: 8px; font-weight: 600; }
.checkout-choice:hover { border-color: #1685f8; }
.checkout-choice.is-selected { border-color: #1685f8; color: #0878e8; background: #eaf5ff; box-shadow: inset 0 0 0 1px #1685f82b; }
.checkout-choice:disabled { opacity: .4; cursor: not-allowed; }
.checkout-builder-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--border, #e4e8f0); border-radius: 12px; background: color-mix(in srgb, var(--surface-2, #f4f6fa) 68%, transparent); }
.checkout-builder-summary > span { display: grid; gap: 1px; }
.checkout-builder-summary small { color: var(--muted, #69758b); font-size: 9px; }
.checkout-builder-summary strong { color: var(--text, #20243a); font-size: 12px; }
.checkout-builder-total { text-align: right; }
.checkout-builder-total strong { color: var(--checkout-accent); font-size: 19px; letter-spacing: -.04em; }
.checkout-builder-continue { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; margin-top: 9px; padding: 8px 14px; border-radius: 999px; color: #fff; background: linear-gradient(110deg, #0878e8, #315cf4); box-shadow: 0 7px 18px #1685f82e; font-size: 12px; font-weight: 850; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.checkout-builder-continue:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px #1685f844; }
.checkout-builder-footnote { margin: 6px 0 0; color: var(--muted, #69758b); font-size: 9px; line-height: 1.3; text-align: center; }
html[data-theme="dark"] .checkout-builder h2 span { color: #76baff; }
html[data-theme="dark"] .checkout-package-shortcut { border-color: #3b4760; color: #edf2ff; background: #ffffff08; }
html[data-theme="dark"] .checkout-package-shortcut.is-selected, html[data-theme="dark"] .checkout-choice.is-selected { border-color: #69b5ff; color: #9acfff; background: #1685f81c; }
html[data-theme="dark"] .checkout-package-shortcut small, html[data-theme="dark"] .checkout-choice small, html[data-theme="dark"] .checkout-builder-summary small, html[data-theme="dark"] .checkout-builder-footnote { color: #aab7d0; }
html[data-theme="dark"] .checkout-builder-group legend, html[data-theme="dark"] .checkout-builder-summary strong { color: #edf2ff; }
html[data-theme="dark"] .checkout-choice { border-color: #3b4760; color: #edf2ff; background: #ffffff08; }
html[data-theme="dark"] .checkout-builder-summary { border-color: #344058; background: #ffffff08; }
@media (max-width: 480px) { .checkout-back { padding: 74px 18px 20px; } .checkout-builder h2 { font-size: 22px; } .checkout-package-shortcuts { gap: 5px; } .checkout-package-shortcut { min-height: 82px; padding: 8px 7px; gap: 4px; } .checkout-package-shortcut.is-selected { padding: 7px 6px; } .checkout-package-shortcut strong { font-size: 10px; } .checkout-package-shortcut small { font-size: 8px; } .checkout-device-icons { font-size: 16px; } .checkout-builder-controls { gap: 9px; margin-top: 11px; } .checkout-choice { min-height: 34px; font-size: 12px; } .checkout-builder-summary { margin-top: 10px; } }
@media (max-width: 360px) { .checkout-back { padding: 68px 14px 16px; } .checkout-builder .checkout-eyebrow { font-size: 9px; } .checkout-builder h2 { font-size: 20px; } .checkout-builder-intro { font-size: 11px; } .checkout-package-shortcut { min-height: 78px; padding-inline: 5px; } .checkout-package-shortcut.is-selected { padding-inline: 4px; } .checkout-package-shortcut strong { font-size: 9px; } .checkout-package-shortcut small { font-size: 7px; } .checkout-builder-controls { gap: 7px; } .checkout-choice small { font-size: 7px; } }

/* More breathing room and larger type for the package-builder face. */
.checkout-back { padding: 86px clamp(25px, 5vw, 38px) 27px; }
.checkout-builder .checkout-eyebrow { margin-bottom: 8px; font-size: 11px; letter-spacing: .16em; }
.checkout-builder h2 { margin-bottom: 8px; font-size: clamp(26px, 4.2vw, 32px); line-height: 1.12; }
.checkout-builder-intro { margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
.checkout-package-shortcuts { gap: 10px; }
.checkout-package-shortcut { min-height: 99px; gap: 7px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--surface-2, #f3f6fb) 58%, var(--surface, #fff)); }
.checkout-package-shortcut.is-selected { padding: 11px; background: linear-gradient(145deg, #eff8ff, #e5f2ff); box-shadow: 0 8px 22px #1685f81f; }
.checkout-device-icons { font-size: 22px; }
.checkout-package-shortcut strong { font-size: 14px; }
.checkout-package-shortcut small { font-size: 11px; }
.checkout-builder-controls { gap: 18px; margin-top: 17px; }
.checkout-builder-group legend { margin-bottom: 7px; font-size: 13px; }
.checkout-choice-row { gap: 7px; }
.checkout-choice { min-height: 42px; border-radius: 11px; font-size: 15px; }
.checkout-choice small { font-size: 10px; }
.checkout-builder-summary { margin-top: 15px; padding: 12px 15px; border-radius: 14px; }
.checkout-builder-summary small { font-size: 11px; }
.checkout-builder-summary strong { font-size: 14px; }
.checkout-builder-total strong { font-size: 24px; }
.checkout-builder-continue { min-height: 46px; margin-top: 11px; font-size: 14px; }
.checkout-builder-footnote { margin-top: 8px; font-size: 10px; line-height: 1.45; }
.checkout-device-icons { display: flex; align-items: center; gap: 4px; height: 25px; font-size: initial; letter-spacing: 0; }
.checkout-device-icons svg { display: block; flex: 0 0 27px; width: 27px; height: 23px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.checkout-device-icons .checkout-tv-play { fill: currentColor; stroke: none; }
.checkout-device-icons b { margin-left: 1px; color: #0878e8; font-family: inherit; font-size: 18px; line-height: 1; }
html[data-theme="dark"] .checkout-package-shortcut { background: linear-gradient(145deg, #202a3d, #182235); }
html[data-theme="dark"] .checkout-package-shortcut.is-selected { background: linear-gradient(145deg, #152f4a, #192c46); }
@media (max-width: 480px) {
	.checkout-back { padding: 76px 18px 21px; }
	.checkout-builder .checkout-eyebrow { margin-bottom: 6px; font-size: 10px; }
	.checkout-builder h2 { font-size: 24px; }
	.checkout-builder-intro { margin-bottom: 12px; font-size: 13px; }
	.checkout-package-shortcuts { gap: 6px; }
	.checkout-package-shortcut { min-height: 91px; padding: 9px 7px; gap: 6px; }
	.checkout-package-shortcut.is-selected { padding: 8px 6px; }
	.checkout-package-shortcut strong { font-size: 12px; }
	.checkout-package-shortcut small { font-size: 9px; }
	.checkout-device-icons { font-size: 19px; }
	.checkout-device-icons svg { flex-basis: 24px; width: 24px; height: 21px; }
	.checkout-builder-controls { gap: 11px; margin-top: 13px; }
	.checkout-choice-row { gap: 5px; }
	.checkout-choice { min-height: 38px; font-size: 14px; }
	.checkout-choice small { font-size: 9px; }
	.checkout-builder-summary { margin-top: 12px; padding: 10px 12px; }
	.checkout-builder-total strong { font-size: 22px; }
}
@media (max-width: 360px) {
	.checkout-back { padding: 70px 13px 17px; }
	.checkout-builder .checkout-eyebrow { font-size: 9px; }
	.checkout-builder h2 { font-size: 21px; }
	.checkout-builder-intro { font-size: 12px; }
	.checkout-package-shortcut { min-height: 86px; padding-inline: 5px; }
	.checkout-package-shortcut.is-selected { padding-inline: 4px; }
	.checkout-package-shortcut strong { font-size: 10px; }
	.checkout-package-shortcut small { font-size: 8px; }
	.checkout-device-icons svg { flex-basis: 21px; width: 21px; height: 19px; }
	.checkout-builder-controls { gap: 8px; }
	.checkout-choice { font-size: 13px; }
	.checkout-choice small { font-size: 8px; }
	.checkout-builder-footnote { font-size: 9px; }
}

/* Give the card flip a clear, labeled action instead of a decorative corner cue. */
.checkout-flip-prompt { top: 13px; left: 50%; gap: 7px; transform: translateX(-50%); pointer-events: auto; }
.checkout-flip-prompt strong { font-size: 18px; }
.checkout-flip-toggle { position: static; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: auto; min-height: 34px; padding: 7px 14px; border: 1px solid #d6e7fb; border-radius: 999px; color: #075db6; background: linear-gradient(110deg, #f0f8ff, #e4f1ff); box-shadow: 0 4px 12px #1685f81c; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .2s, color .2s, background .2s, box-shadow .2s; }
.checkout-flip-toggle > span:first-child { font-size: inherit; line-height: 1; filter: none; transition: none; }
.checkout-flip-arrow { display: inline-block; font-size: 16px; line-height: .8; transition: transform .25s; }
.checkout-flip-toggle:hover, .checkout-flip-toggle:focus-visible { color: #fff; background: linear-gradient(110deg, #0878e8, #315cf4); box-shadow: 0 7px 18px #1685f83d; transform: translateY(-1px); }
.checkout-flip-toggle:focus-visible { outline: 3px solid #1685f855; outline-offset: 3px; }
.checkout-flip-toggle[aria-pressed="true"] .checkout-flip-arrow { transform: rotate(180deg); }
html[data-theme="dark"] .checkout-flip-toggle { border-color: #466087; color: #b4dbff; background: linear-gradient(110deg, #1e3552, #202b48); }
html[data-theme="dark"] .checkout-flip-toggle:hover, html[data-theme="dark"] .checkout-flip-toggle:focus-visible { color: #fff; background: linear-gradient(110deg, #147bd9, #4e5cf2); }
@media (max-width: 480px) { .checkout-flip-prompt { top: 12px; gap: 5px; } .checkout-flip-prompt strong { font-size: 16px; } .checkout-flip-toggle { min-height: 30px; padding: 6px 11px; font-size: 11px; } .checkout-flip-arrow { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .checkout-flip-toggle, .checkout-flip-arrow { transition-duration: .01ms !important; } }
.checkout-front { padding-top: 126px; padding-bottom: 62px; }
@media (max-width: 480px) { .checkout-front { padding-top: 110px; padding-bottom: 50px; } }
.checkout-flip-toggle[aria-pressed="true"] > span:first-child { transform: none; }

.checkout-request-type { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.checkout-request-type legend { float: left; margin: 0; padding: 0; color: var(--text, #20243a); font-size: 12px; font-weight: 750; }
.checkout-request-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 310px); gap: 3px; padding: 3px; border: 1px solid var(--border, #dfe5ee); border-radius: 999px; background: color-mix(in srgb, var(--surface-2, #f3f6fb) 75%, transparent); }
.checkout-request-switch button { min-height: 31px; padding: 5px 12px; border: 0; border-radius: 999px; color: var(--muted, #69758b); background: transparent; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; transition: color .18s, background .18s, box-shadow .18s; }
.checkout-request-switch button[aria-pressed="true"] { color: #0878e8; background: var(--surface, #fff); box-shadow: 0 2px 7px #13223a18; }
html[data-theme="dark"] .checkout-request-type legend { color: #edf2ff; }
html[data-theme="dark"] .checkout-request-switch { border-color: #3b4760; background: #ffffff08; }
html[data-theme="dark"] .checkout-request-switch button[aria-pressed="true"] { color: #9acfff; background: #253550; box-shadow: 0 2px 8px #0004; }
@media (max-width: 480px) { .checkout-request-type { gap: 8px; margin-bottom: 10px; } .checkout-request-type legend { font-size: 11px; white-space: nowrap; } .checkout-request-switch { width: 100%; } .checkout-request-switch button { min-height: 29px; padding-inline: 7px; font-size: 11px; } }
.checkout-price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.checkout-front .checkout-price-row .checkout-price { flex: 1 1 auto; min-width: 0; margin: 15px 0 12px; }
.checkout-request-type-price { display: grid; flex: 0 0 184px; gap: 5px; min-width: 0; margin: 15px 0 12px; padding: 0; border: 0; }
.checkout-request-type-price legend { color: var(--muted, #69758b); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.checkout-request-type-price .checkout-request-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; min-height: 38px; padding: 3px; overflow: hidden; border: 1px solid #cfe4fa; border-radius: 999px; background: #eaf3fc; }
.checkout-request-type-price .checkout-request-switch::before { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4.5px); border-radius: 999px; background: #fff; box-shadow: 0 2px 7px #1a46731e; content: ""; transition: transform .3s cubic-bezier(.2,.75,.2,1), background .25s; }
.checkout-request-type-price .checkout-request-switch:has([data-request-type="renewal"][aria-pressed="true"])::before { transform: translateX(calc(100% + 3px)); }
.checkout-request-type-price .checkout-request-switch button { position: relative; z-index: 1; min-height: 30px; padding: 5px 7px; color: #62748a; font-size: 11px; transition: color .2s; }
.checkout-request-type-price .checkout-request-switch button[aria-pressed="true"] { color: #075db6; background: transparent; box-shadow: none; }
html[data-theme="dark"] .checkout-request-type-price legend { color: #aab7d0; }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch { border-color: #3e5270; background: #202d43; }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch::before { background: #314967; box-shadow: 0 2px 8px #0005; }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch button { color: #aab7d0; }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch button[aria-pressed="true"] { color: #d4eaff; }
@media (max-width: 480px) { .checkout-price-row { gap: 9px; } .checkout-request-type-price { flex-basis: 164px; } .checkout-request-type-price .checkout-request-switch button { padding-inline: 4px; font-size: 10px; } }
@media (max-width: 360px) { .checkout-price-row { flex-wrap: wrap; gap: 0 12px; } .checkout-front .checkout-price-row .checkout-price { flex-basis: 100px; } .checkout-request-type-price { flex-basis: 155px; } }

/* Refined order-type selector: a clear, tactile two-state switch beside the price. */
.checkout-request-type-price { flex-basis: 196px; gap: 7px; }
.checkout-request-type-price legend { color: #76849a; font-size: 10px; letter-spacing: .13em; }
.checkout-request-type-price .checkout-request-switch { min-height: 42px; gap: 4px; padding: 4px; border-color: #d4e2f2; background: linear-gradient(135deg, #edf5ff, #e8effc); box-shadow: inset 0 1px 2px #233e5b0b; }
.checkout-request-type-price .checkout-request-switch::before { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 5px); background: linear-gradient(120deg, #0878e8, #465cf0); box-shadow: 0 4px 10px #2670d53b, inset 0 1px 0 #ffffff40; transition: transform .34s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .25s; }
.checkout-request-type-price .checkout-request-switch:has([data-request-type="renewal"][aria-pressed="true"])::before { transform: translateX(calc(100% + 4px)); }
.checkout-request-type-price .checkout-request-switch button { min-height: 32px; border-radius: 999px; color: #64758d; font-size: 11px; font-weight: 750; }
.checkout-request-type-price .checkout-request-switch button[aria-pressed="true"] { color: #fff; }
.checkout-request-type-price .checkout-request-switch button:focus-visible { z-index: 2; outline: 2px solid #172f4e; outline-offset: 2px; }
html[data-theme="dark"] .checkout-request-type-price legend { color: #b7c5db; }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch { border-color: #3e5270; background: linear-gradient(135deg,#202d43,#202a40); box-shadow: inset 0 1px 2px #0004; }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch::before { background: linear-gradient(120deg,#1688f2,#5e68ff); box-shadow: 0 4px 13px #2788f24a,inset 0 1px 0 #ffffff45; }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch button { color: #b7c5db; }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch button[aria-pressed="true"] { color: #fff; }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch::before { width: calc((100% - 14px) / 2); }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch:has([data-request-type="renewal"][aria-pressed="true"])::before { transform: translateX(calc(100% + 4px)); }
@media (max-width: 480px) { .checkout-request-type-price { flex-basis: 175px; } .checkout-request-type-price .checkout-request-switch { min-height: 39px; } .checkout-request-type-price .checkout-request-switch button { min-height: 29px; font-size: 10px; } }
.checkout-request-type-price .checkout-request-switch::before { width: calc(50% - 6px); }
html[data-theme="dark"] .checkout-request-type-price .checkout-request-switch button[aria-pressed="true"] { color: #fff; background: transparent; box-shadow: none; }
.checkout-request-type:not(.checkout-request-type-price) .checkout-request-switch { position: relative; isolation: isolate; overflow: hidden; }
.checkout-request-type:not(.checkout-request-type-price) .checkout-request-switch::before { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4.5px); border-radius: 999px; background: linear-gradient(120deg, #0878e8, #465cf0); box-shadow: 0 3px 9px #2670d52e, inset 0 1px 0 #ffffff40; content: ""; transition: transform .34s cubic-bezier(.2,.8,.2,1); }
.checkout-request-type:not(.checkout-request-type-price) .checkout-request-switch:has([data-request-type="renewal"][aria-pressed="true"])::before { transform: translateX(calc(100% + 3px)); }
.checkout-request-type:not(.checkout-request-type-price) .checkout-request-switch button { position: relative; z-index: 1; }
.checkout-request-type:not(.checkout-request-type-price) .checkout-request-switch button[aria-pressed="true"] { color: #fff; background: transparent; box-shadow: none; }
.checkout-request-type-price legend { width: 100%; text-align: center; }
.checkout-price-row { justify-content: flex-start; gap: clamp(20px, 5vw, 44px); }
.checkout-front .checkout-price-row .checkout-price { flex: 0 1 auto; }
.checkout-request-type-price { flex: 0 0 184px; }
@media (max-width: 480px) { .checkout-price-row { gap: 14px; } .checkout-request-type-price { flex-basis: 164px; } }
@media (max-width: 360px) { .checkout-price-row { align-items: flex-start; } .checkout-front .checkout-price-row .checkout-price { flex-basis: 100px; } .checkout-request-type-price { flex-basis: 155px; } }
html[data-theme="dark"] .checkout-request-type:not(.checkout-request-type-price) .checkout-request-switch { border-color: #3e5270; background: linear-gradient(135deg,#202d43,#202a40); }
html[data-theme="dark"] .checkout-request-type:not(.checkout-request-type-price) .checkout-request-switch button { color: #b7c5db; }
html[data-theme="dark"] .checkout-request-type:not(.checkout-request-type-price) .checkout-request-switch button[aria-pressed="true"] { color: #fff; background: transparent; }
@media (prefers-reduced-motion: reduce) { .checkout-request-type .checkout-request-switch::before { transition-duration: .01ms !important; } }

/* Give checkout the look of a clean purchase ticket. */
.checkout-dialog {
	border: 1.5px dashed #c8ccd7;
	background: linear-gradient(145deg, #fff 0%, #f8f9fc 100%);
	box-shadow: 0 24px 70px rgba(9, 17, 35, .28), inset 0 0 0 6px rgba(255,255,255,.7);
}
html[data-theme="dark"] .checkout-dialog {
	border-color: #59647b;
	background: linear-gradient(145deg, #1c2438 0%, #141c2e 100%);
	box-shadow: 0 32px 100px #020611b8, inset 0 0 0 6px rgba(255,255,255,.025);
}

/* Center the order type within the open space after the price. */
.checkout-price-row {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: center;
	width: 100%;
}
.checkout-front .checkout-price-row .checkout-price { min-width: max-content; }
.checkout-request-type-price {
	width: min(100%, 184px);
	justify-self: center;
	align-self: start;
	margin: 0;
}
@media (max-width: 480px) {
	.checkout-request-type-price { width: min(100%, 164px); }
}
@media (max-width: 360px) {
	.checkout-request-type-price { width: 100%; }
	.checkout-request-type-price .checkout-request-switch button { padding-inline: 2px; font-size: 9px; }
}

/* Responsive checkout: the prompt sits in flow, the card follows the viewport height and faces scroll visibly. */
.checkout-backdrop { padding: clamp(10px, 2.5vh, 24px) clamp(10px, 3vw, 24px); }
.checkout-dialog {
	display: flex;
	flex-direction: column;
	width: min(612px, 100%);
	height: auto;
	max-height: calc(100vh - 20px);
	max-height: calc(100dvh - 20px);
}
.checkout-dialog .checkout-flip-prompt {
	position: relative;
	top: auto;
	left: auto;
	flex: none;
	justify-items: center;
	padding: 14px 58px 8px;
	transform: none;
	white-space: normal;
}
/* Both faces share one grid cell, so the card is as tall as its taller face and shrinks to fit short screens. */
.checkout-dialog .checkout-card-inner { position: relative; inset: auto; display: grid; grid-template-rows: minmax(0, 1fr); flex: 0 1 auto; min-height: 0; }
.checkout-dialog .checkout-face {
	position: relative;
	inset: auto;
	grid-area: 1 / 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	padding: 10px clamp(20px, 5vw, 50px) 26px;
	scrollbar-width: thin;
	scrollbar-color: #c3cad8 transparent;
}
.checkout-dialog .checkout-face > * { flex: none; }
.checkout-dialog .checkout-face::-webkit-scrollbar { display: block; width: 6px; }
.checkout-dialog .checkout-face::-webkit-scrollbar-thumb { border-radius: 6px; background: #c3cad8; }
html[data-theme="dark"] .checkout-dialog .checkout-face { scrollbar-color: #46516b transparent; }
html[data-theme="dark"] .checkout-dialog .checkout-face::-webkit-scrollbar-thumb { background: #46516b; }
.checkout-dialog .checkout-front h2 { font-size: clamp(26px, 5vw, 38px); }
.checkout-dialog .checkout-front .checkout-plan { font-size: clamp(15px, 3.6vw, 18px); }
/* Price and order type share a row and wrap instead of overflowing on narrow cards. */
.checkout-dialog .checkout-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px clamp(14px, 5vw, 44px); margin: 12px 0; }
.checkout-dialog .checkout-front .checkout-price-row .checkout-price { flex: 0 0 auto; min-width: 0; margin: 0; font-size: clamp(36px, 9vw, 53px); line-height: 1.15; }
.checkout-dialog .checkout-request-type-price { flex: 1 1 150px; width: auto; max-width: 196px; margin: 0; }
.checkout-dialog .checkout-front .checkout-description { margin-bottom: 14px; font-size: clamp(14px, 3.4vw, 16px); }
.checkout-dialog .checkout-option { flex-wrap: wrap; row-gap: 0; }
@media (max-width: 480px) {
	.checkout-dialog { width: 100%; }
	.checkout-dialog .checkout-flip-prompt { padding: 12px 50px 6px; }
	.checkout-dialog .checkout-face { padding: 8px 18px 20px; }
	.checkout-dialog .checkout-front .checkout-option { min-height: 48px; }
	.checkout-dialog .checkout-front .checkout-option-crypto { min-height: 56px; }
	/* Stack the line and duration pickers so their buttons stay readable. */
	.checkout-dialog .checkout-builder-controls { grid-template-columns: 1fr; gap: 12px; }
	.checkout-dialog .checkout-choice { min-height: 40px; font-size: 14px; }
	.checkout-dialog .checkout-choice small { font-size: 9px; }
}
@media (max-width: 360px) {
	.checkout-dialog .checkout-flip-prompt { padding-inline: 46px; }
	.checkout-dialog .checkout-face { padding-inline: 14px; }
	.checkout-dialog .checkout-front .checkout-option { padding-inline: 12px; font-size: 13px; }
	.checkout-dialog .checkout-option-crypto > span[aria-hidden] { display: none; }
}
/* Short viewports (laptops at 100% zoom, landscape phones): tighten vertical rhythm. */
@media (max-height: 760px) {
	.checkout-dialog .checkout-flip-prompt { gap: 5px; padding-top: 10px; }
	.checkout-dialog .checkout-flip-prompt strong { font-size: 16px; }
	.checkout-dialog .checkout-flip-toggle { min-height: 30px; padding-block: 5px; }
	.checkout-dialog .checkout-face { padding-bottom: 18px; }
	.checkout-dialog .checkout-front h2 { font-size: clamp(24px, 4.5vw, 32px); }
	.checkout-dialog .checkout-front .checkout-price-row { margin: 8px 0; }
	.checkout-dialog .checkout-front .checkout-price-row .checkout-price { font-size: clamp(32px, 8vw, 44px); }
	.checkout-dialog .checkout-front .checkout-description { margin-bottom: 10px; font-size: 14px; line-height: 1.5; }
	.checkout-dialog .checkout-front .checkout-options { gap: 8px; }
	.checkout-dialog .checkout-front .checkout-option { min-height: 46px; padding-block: 9px; font-size: 15px; }
	.checkout-dialog .checkout-front .checkout-option-crypto { min-height: 52px; }
	.checkout-dialog .checkout-front .checkout-note { margin-top: 10px; }
	.checkout-dialog .checkout-builder h2 { font-size: clamp(22px, 4vw, 28px); }
	.checkout-dialog .checkout-builder-intro { margin-bottom: 10px; }
	.checkout-dialog .checkout-package-shortcut { min-height: 84px; }
}
@media (max-height: 600px) {
	.checkout-dialog .checkout-front .checkout-eyebrow, .checkout-dialog .checkout-builder-intro { display: none; }
}