/* ATV pricing section (dark cosmic): Essential / Complete (highlighted, centre) / Pro + dropdown comparison. Scoped to .atvp. */
.atvp {
	--p-lime: #22d3ee;
	--p-gold: #fbbf24;
	--p-cta: linear-gradient(135deg, #8b5cf6, #6366f1 55%, #3b82f6);
	--p-line: rgba(255, 255, 255, .1);
	--p-text: #a1a1aa;
	--p-white: #fafafa;
	position: relative;
	padding: 84px 20px;
	background: radial-gradient(900px 420px at 50% 0%, rgba(37, 99, 235, .35), transparent 70%), radial-gradient(700px 360px at 85% 70%, rgba(124, 58, 237, .25), transparent 70%), #02030a;
	border-top: 1px solid rgba(255, 255, 255, .06);
	color: var(--p-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	scroll-margin-top: 90px;
	overflow: hidden;
}
.atvp::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(#000, transparent 80%); -webkit-mask-image: linear-gradient(#000, transparent 80%); pointer-events: none; }
.atvp *, .atvp *::before, .atvp *::after { box-sizing: border-box; }
.atvp-anchor { position: absolute; top: -90px; scroll-margin-top: 0 !important; }
.atvp-in { position: relative; max-width: 1120px; margin: 0 auto; }
.atvp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* heading */
.atvp-head { text-align: center; max-width: 700px; margin: 0 auto 50px; }
.atvp-eyebrow { display: inline-block; padding: 5px 13px; border: 1px solid var(--p-line); border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--p-lime); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.atvp-title { margin: 14px 0 10px; color: var(--p-white); font-size: clamp(26px, 4vw, 42px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.atvp-sub { margin: 0 auto; color: var(--p-text); font-size: 15px; }
.atvp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 20px 0 0; padding: 0; list-style: none; }
.atvp-chips li { padding: 5px 13px; border: 1px solid var(--p-line); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #d4d4d8; font-size: 12px; font-weight: 600; }

/* cards */
.atvp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.atvp-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid var(--p-line); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), #0c0c10; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .25s ease, border-color .25s ease; }
.atvp-card[data-plan="pro"] { background: linear-gradient(180deg, rgba(59, 130, 246, .22), rgba(59, 130, 246, .05)), #060b18; border-color: rgba(96, 165, 250, .3); }
.atvp-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .22); }
.atvp-name { margin: 0; color: var(--p-white); font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.atvp-tag { margin: 8px 0 0; min-height: 44px; font-size: 13px; color: var(--p-text); }
.atvp-price { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.atvp-price strong { flex-basis: 100%; color: var(--p-white); font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.atvp-was { flex-basis: 100%; color: #71717a; font-size: 16px; font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: #ef4444; line-height: 1.2; }
.atvp-save { display: inline-flex; align-items: center; margin-top: 2px; padding: 3px 10px; border-radius: 999px; background: rgba(34, 211, 238, .14); color: var(--p-lime); font-size: 11.5px; font-weight: 800; }
.atvp-per { flex-basis: 100%; margin-top: 4px; color: #71717a; font-size: 12px; }
.atvp-stats { display: flex; gap: 8px; margin: 18px 0 0; }
.atvp-stats span { flex: 1; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--p-line); color: #a1a1aa; font-size: 11.5px; }
.atvp-stats b { display: block; color: #fff; font-size: 16px; font-weight: 800; }
.atvp-list { flex: 1; margin: 20px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--p-line); list-style: none; }
.atvp-list li { position: relative; margin: 0 0 10px; padding-left: 24px; font-size: 13px; color: #e4e4e7; }
.atvp-list li::before { content: "+"; position: absolute; left: 0; top: 0; width: 16px; text-align: center; color: var(--p-lime); font-weight: 800; }
.atvp-list li.is-off { color: #52525b; text-decoration: line-through; text-decoration-color: #3f3f46; }
.atvp-list li.is-off::before { content: "\2013"; color: #3f3f46; }
.atvp-emi { margin: 10px 0 0; text-align: center; color: #71717a; font-size: 12px; }

/* buttons: neon pills */
.atvp-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.atvp-btn:focus-visible { outline: 2px solid var(--p-lime); outline-offset: 3px; }
.atvp-btn--ghost { background: var(--p-cta); color: #fff; box-shadow: 0 10px 26px -12px rgba(99, 102, 241, .8); }
.atvp-btn--ghost:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(99, 102, 241, .2), 0 14px 30px -10px rgba(99, 102, 241, .95); }
.atvp-btn--primary { background: linear-gradient(135deg, #fde68a, #fbbf24 60%, #f59e0b); color: #1c1203; box-shadow: 0 0 0 4px rgba(251, 191, 36, .18), 0 16px 40px -10px rgba(251, 191, 36, .65); }
.atvp-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(251, 191, 36, .22), 0 20px 46px -10px rgba(251, 191, 36, .85); }
.atvp-btn.is-disabled { background: #18181b; border: 1px dashed #3f3f46; color: #71717a; box-shadow: none; cursor: not-allowed; }

/* the highlighted plan */
.atvp-card--featured { z-index: 1; margin: -16px 0; padding: 46px 26px 30px; border: 1px solid rgba(251, 191, 36, .75); background: radial-gradient(420px 240px at 80% -10%, rgba(167, 139, 250, .5), transparent 65%), linear-gradient(165deg, #2a1166 0%, #1d0f4d 55%, #101040 100%); box-shadow: 0 0 0 1px rgba(251, 191, 36, .25), 0 0 70px -10px rgba(124, 58, 237, .75), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.atvp-card--featured:hover { transform: translateY(-6px); border-color: var(--p-gold); }
.atvp-card--featured .atvp-name { color: var(--p-gold); font-size: 17px; }
.atvp-card--featured .atvp-price strong { font-size: 50px; }
.atvp-card--featured .atvp-tag, .atvp-card--featured .atvp-per, .atvp-card--featured .atvp-emi { color: #c4b5fd; }
.atvp-card--featured .atvp-stats span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #c4b5fd; }
.atvp-card--featured .atvp-list { border-top-color: rgba(255, 255, 255, .16); }
.atvp-card--featured .atvp-list li { color: #f5f3ff; }
.atvp-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 6px 15px; border-radius: 999px; background: linear-gradient(135deg, #fde68a, #fbbf24); color: #1c1203; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(251, 191, 36, .7); }

/* dropdown comparison */
.atvp-compare { margin: 52px auto 0; max-width: 1040px; border: 1px solid var(--p-line); border-radius: 20px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.atvp-compare > summary { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 22px; color: var(--p-lime); font-size: 14.5px; font-weight: 700; cursor: pointer; list-style: none; user-select: none; }
.atvp-compare > summary::-webkit-details-marker { display: none; }
.atvp-compare > summary:hover { background: rgba(255, 255, 255, .04); }
.atvp-compare > summary:focus-visible { outline: 2px solid var(--p-lime); outline-offset: -3px; }
.atvp-sum-close { display: none; }
.atvp-compare[open] .atvp-sum-open { display: none; }
.atvp-compare[open] .atvp-sum-close { display: inline; }
.atvp-chev { transition: transform .25s ease; }
.atvp-compare[open] .atvp-chev { transform: rotate(180deg); }
.atvp-compare[open] > summary { border-bottom: 1px solid var(--p-line); }
.atvp-table-wrap { overflow-x: auto; padding: 0 8px 8px; }
.atvp-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.atvp-table th, .atvp-table td { padding: 13px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); text-align: center; vertical-align: middle; color: #d4d4d8; }
.atvp-table thead th { background: #0a0a10; color: #fff; font-size: 14.5px; font-weight: 800; }
.atvp-table tbody th { text-align: left; color: #e4e4e7; font-weight: 600; width: 34%; }
.atvp-corner { text-align: left !important; color: #71717a !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .08em; }
.atvp-table .is-featured { background: rgba(124, 58, 237, .16); }
.atvp-table thead th.is-featured { background: #5b21b6; color: #fff; border-radius: 12px 12px 0 0; }
.atvp-th-badge { display: block; margin-bottom: 2px; color: var(--p-gold); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.atvp-row-price td strong { color: #fff; font-size: 16px; }
.atvp-yes { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(34, 211, 238, .14); color: var(--p-lime); font-weight: 800; }
.atvp-no { color: #3f3f46; font-weight: 700; }
.atvp-row-cta td, .atvp-row-cta th { border-bottom: 0; padding-top: 18px; }
.atvp-row-cta .atvp-btn { min-height: 42px; font-size: 13px; padding: 9px 10px; }
.atvp-table .atvp-was { flex: none; display: inline; font-size: 12px; margin-right: 4px; }
.atvp-swipe { display: none; margin: 0; padding: 0 16px 10px; text-align: center; color: #71717a; font-size: 12px; }
.atvp-h3 { margin: 26px 22px 12px; color: #fff; font-size: 16px; font-weight: 800; }
.atvp-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 22px 26px; }
.atvp-mod { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--p-line); border-radius: 14px; background: rgba(255, 255, 255, .04); }
.atvp-mod strong { color: #fff; font-size: 13.5px; }
.atvp-mod span { font-size: 12.5px; }
.atvp-mod em { color: var(--p-lime); font-size: 12px; font-style: normal; font-weight: 700; }

/* notes */
.atvp-info { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1040px; margin: 36px auto 0; padding: 24px 28px; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid var(--p-line); }
.atvp-info h4 { margin: 0 0 8px; color: #fff; font-size: 13.5px; font-weight: 800; }
.atvp-info ul { margin: 0; padding-left: 18px; }
.atvp-info li, .atvp-info p { margin: 0 0 7px; font-size: 13px; }
.atvp-help { margin: 26px 0 0; text-align: center; font-size: 13.5px; }
.atvp-help a { color: var(--p-lime); font-weight: 700; }

@media (max-width: 960px) {
	.atvp { padding: 60px 16px; }
	.atvp-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 18px; }
	.atvp-card--featured { order: -1; margin: 14px 0 0; padding-top: 42px; }
	.atvp-card--featured:hover, .atvp-card:hover { transform: none; }
	.atvp-tag { min-height: 0; }
	.atvp-mods { grid-template-columns: 1fr; }
	.atvp-info { grid-template-columns: 1fr; padding: 20px; }
	.atvp-swipe { display: block; }
}
/* phones: smaller type */
@media (max-width: 640px) {
	.atvp { font-size: 12.5px; padding: 52px 14px; }
	.atvp-head { margin-bottom: 38px; }
	.atvp-title { font-size: 23px; }
	.atvp-sub { font-size: 12.5px; }
	.atvp-chips li { font-size: 11px; padding: 4px 11px; }
	.atvp-card { padding: 22px 18px; }
	.atvp-name { font-size: 13px; }
	.atvp-price strong { font-size: 32px; }
	.atvp-card--featured .atvp-price strong { font-size: 38px; }
	.atvp-was { font-size: 14px; }
	.atvp-tag, .atvp-list li { font-size: 12px; }
	.atvp-stats b { font-size: 14px; }
	.atvp-btn { min-height: 44px; font-size: 13.5px; }
	.atvp-compare > summary { font-size: 13px; padding: 14px 16px; }
	.atvp-table { font-size: 12px; }
	.atvp-table th, .atvp-table td { padding: 10px; }
	.atvp-info li, .atvp-info p, .atvp-help { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.atvp-card, .atvp-btn, .atvp-chev { transition: none; }
}

/* ===== LIGHT MODE (default on the new home page). The dark rules above are unchanged; they still apply when the page is not in light mode. ===== */
html[data-theme="light"] .atvp { --p-lime: #6d28d9; --p-line: rgba(15, 23, 42, .1); --p-text: #475569; --p-white: #0f172a; background: radial-gradient(900px 420px at 50% 0%, rgba(59, 130, 246, .13), transparent 70%), radial-gradient(700px 360px at 85% 70%, rgba(124, 58, 237, .1), transparent 70%), #f4f5fb; border-top-color: rgba(15, 23, 42, .06); }
html[data-theme="light"] .atvp::before { background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px); }
html[data-theme="light"] .atvp-eyebrow, html[data-theme="light"] .atvp-chips li { background: #fff; color: #334155; }
html[data-theme="light"] .atvp-eyebrow { color: #6d28d9; }
html[data-theme="light"] .atvp-card { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 48px -28px rgba(15, 23, 42, .25); }
html[data-theme="light"] .atvp-card[data-plan="pro"] { background: linear-gradient(180deg, rgba(59, 130, 246, .12), rgba(59, 130, 246, .03)), #f6f9ff; border-color: rgba(59, 130, 246, .38); }
html[data-theme="light"] .atvp-card:hover { border-color: rgba(15, 23, 42, .25); }
html[data-theme="light"] .atvp-was { color: #94a3b8; }
html[data-theme="light"] .atvp-per, html[data-theme="light"] .atvp-emi { color: #64748b; }
html[data-theme="light"] .atvp-save { background: rgba(109, 40, 217, .1); }
html[data-theme="light"] .atvp-stats span { background: #f1f5f9; color: #475569; }
html[data-theme="light"] .atvp-stats b { color: #0f172a; }
html[data-theme="light"] .atvp-list li { color: #334155; }
html[data-theme="light"] .atvp-list li.is-off { color: #94a3b8; text-decoration-color: #cbd5e1; }
html[data-theme="light"] .atvp-list li.is-off::before { color: #cbd5e1; }
html[data-theme="light"] .atvp-btn.is-disabled { background: #f1f5f9; border-color: #cbd5e1; color: #94a3b8; }
/* the highlighted plan stays a dark violet spotlight card in both themes */
html[data-theme="light"] .atvp-card--featured { box-shadow: 0 0 0 1px rgba(251, 191, 36, .3), 0 30px 70px -20px rgba(124, 58, 237, .6); }
html[data-theme="light"] .atvp-card--featured .atvp-price strong, html[data-theme="light"] .atvp-card--featured .atvp-stats b { color: #fff; }
html[data-theme="light"] .atvp-card--featured .atvp-was { color: #a1a1aa; }
html[data-theme="light"] .atvp-card--featured .atvp-save { background: rgba(34, 211, 238, .16); color: #67e8f9; }
html[data-theme="light"] .atvp-card--featured .atvp-list li::before { color: #67e8f9; }
html[data-theme="light"] .atvp-compare, html[data-theme="light"] .atvp-info { background: rgba(255, 255, 255, .75); }
html[data-theme="light"] .atvp-compare > summary { color: #6d28d9; }
html[data-theme="light"] .atvp-compare > summary:hover { background: rgba(15, 23, 42, .04); }
html[data-theme="light"] .atvp-table th, html[data-theme="light"] .atvp-table td { border-bottom-color: rgba(15, 23, 42, .08); color: #334155; }
html[data-theme="light"] .atvp-table thead th { background: #eef0f7; color: #0f172a; }
html[data-theme="light"] .atvp-table tbody th { color: #0f172a; }
html[data-theme="light"] .atvp-corner { color: #64748b !important; }
html[data-theme="light"] .atvp-table .is-featured { background: rgba(124, 58, 237, .08); }
html[data-theme="light"] .atvp-table thead th.is-featured { background: #5b21b6; color: #fff; }
html[data-theme="light"] .atvp-row-price td strong, html[data-theme="light"] .atvp-h3, html[data-theme="light"] .atvp-mod strong, html[data-theme="light"] .atvp-info h4 { color: #0f172a; }
html[data-theme="light"] .atvp-yes { background: rgba(109, 40, 217, .1); }
html[data-theme="light"] .atvp-no { color: #cbd5e1; }
html[data-theme="light"] .atvp-swipe { color: #64748b; }
html[data-theme="light"] .atvp-mod { background: #fff; }
html[data-theme="light"] .atvp-card--featured { border-color: rgba(251, 191, 36, .75); background: radial-gradient(420px 240px at 80% -10%, rgba(167, 139, 250, .5), transparent 65%), linear-gradient(165deg, #2a1166 0%, #1d0f4d 55%, #101040 100%); }
html[data-theme="light"] .atvp-card--featured:hover { border-color: var(--p-gold); }
html[data-theme="light"] .atvp-card--featured .atvp-name { color: var(--p-gold); }
html[data-theme="light"] .atvp-card--featured .atvp-tag, html[data-theme="light"] .atvp-card--featured .atvp-per, html[data-theme="light"] .atvp-card--featured .atvp-emi { color: #c4b5fd; }
html[data-theme="light"] .atvp-card--featured .atvp-stats span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #c4b5fd; }
html[data-theme="light"] .atvp-card--featured .atvp-list { border-top-color: rgba(255, 255, 255, .16); }
html[data-theme="light"] .atvp-card--featured .atvp-list li { color: #f5f3ff; }
