/*
 * Trillions VIP — front-end styles
 *
 * Scoped under .tvip so the plugin can drop into any theme without a fight.
 * One dark palette: the brand is dark, deliberately, and a light variant
 * would be a different product rather than a theme of this one.
 */

/* ============================================================ TOKENS === */

.tvip {
	--tv-bg:        #0B0806;
	--tv-bg-2:      #100B08;
	--tv-panel:     #13100C;
	--tv-card:      #1A130D;
	--tv-card-2:    #221A12;
	--tv-card-3:    #2A2016;

	--tv-line:      rgba(224, 169, 59, .13);
	--tv-line-2:    rgba(224, 169, 59, .26);
	--tv-line-3:    rgba(224, 169, 59, .46);

	--tv-gold:      #E0A93B;
	--tv-gold-lt:   #F7D98A;
	--tv-gold-dk:   #B8862A;
	--tv-cream:     #F5EDE0;
	--tv-muted:     #A69988;
	--tv-dim:       #6B5C4C;

	--tv-green:     #46C46E;
	--tv-red:       #E06A50;
	--tv-blue:      #6FA8DC;

	--tv-disp: 'Anton', 'Arial Narrow', Impact, 'Arial Black', sans-serif;
	--tv-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;

	--tv-rail:   264px;
	--tv-radius: 14px;
	--tv-radius-sm: 10px;

	--tv-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -18px rgba(0, 0, 0, .9);
	--tv-glow:   0 0 0 1px var(--tv-line-2), 0 18px 40px -22px rgba(224, 169, 59, .5);

	--tv-ease: cubic-bezier(.32, .72, .28, 1);
}

/* ===================================================== THEME ARMOUR === */

/*
 * Form controls are the one place a plugin UI reliably loses.
 *
 * Every theme styles bare inputs, and it does it with selectors that outrank
 * a plugin's own classes — `input[type="email"]` alone is a match for
 * `.tvip-input input`, and `.entry-content input[type="email"]` beats it
 * outright. The result is a white field punched through a dark form.
 *
 * The plugin already drops the theme's stylesheet on its own pages, so this
 * is the second line: !important at zero specificity (`:where()`), covering
 * exactly the properties themes and other plugins reach for. Zero specificity
 * makes it the floor rather than the ceiling — the component rules further
 * down that also say !important still win, whatever their own specificity.
 *
 * Anything below that needs to differ from these values says so explicitly
 * with !important. If you add a control, check it against this list.
 */
:where(.tvip) :where(input, select, textarea) {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.45 !important;
	font-family: var(--tv-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-align: left !important;
	text-transform: none !important;
	text-shadow: none !important;
	color: var(--tv-cream) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	float: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

:where(.tvip) :where(input, textarea)::placeholder {
	color: var(--tv-dim) !important;
	opacity: 1 !important;
}

/*
 * Last resort for the four properties that actually ruin the look.
 *
 * The floor above is beaten by a theme rule that pairs !important with a more
 * specific selector — `.entry-content input[type="email"]` is a real example.
 * This matches that specificity (two classes, one element) and the plugin's
 * stylesheet prints later, so it takes the tie.
 *
 * Deliberately narrow: nothing here is a property any field variant changes,
 * so no component needs to fight it. The autofill rules further down share
 * this specificity and come after, which is how they still win on box-shadow.
 */
.tvip .tvip-input input,
.tvip .tvip-input select,
.tvip .tvip-input textarea {
	color: var(--tv-cream) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/*
 * Buttons get the same treatment for the same reason — `button[type="submit"]`
 * outranks `.tvip-btn`, and a themed submit button in the middle of this form
 * would be worse than a themed field.
 *
 * `outline` is deliberately absent: the keyboard focus ring has to survive.
 */
/*
 * Links get only the two properties no component sets. `color`, `background`
 * and `border` are deliberately left out — nav items, chips and the rail
 * button all style those on anchors, and armouring them would mean !important
 * on a dozen rules for very little. The theme's stylesheet is gone by the time
 * any of it matters.
 */
:where(.tvip) :where(a) {
	text-decoration: none !important;
	text-shadow: none !important;
}

:where(.tvip) :where(button, [type="button"], [type="submit"], [type="reset"]) {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
	font-family: var(--tv-body) !important;
	font-size: inherit !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	color: inherit !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	float: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* ======================================================= PAGE RESET === */

/*
 * FULL-SCREEN MODE ONLY (body.tvip-full).
 *
 * Here the plugin owns the whole viewport, so the theme's wrappers are
 * flattened and its header and footer hidden. Themes vary wildly in what they
 * wrap content in, so they are flattened wholesale rather than fought with
 * one class at a time.
 *
 * In themed mode none of this applies: the app sits inside whatever container
 * the theme gives it, and the theme's page settings are in charge of width,
 * padding and chrome. The plugin's own components carry their own padding, so
 * they look right either way.
 */
body.tvip-full {
	background: #0B0806;
	color: #F5EDE0;
	margin: 0;
}

/*
 * `:not([class*="tvip-"])` is load-bearing, not tidiness.
 *
 * Two of these selectors are bare element names, and the plugin uses both:
 * the auth layout's <main class="tvip-auth__main"> and the
 * <article class="tvip-note"> / <article class="tvip-guide"> rows. Without
 * the guard this block stripped their own padding, background and borders —
 * which is what left the sign-up form flush against the screen edge on a
 * phone, flattened the guide cards, and removed the dividers between
 * notifications. The plugin was breaking its own layout.
 */
body.tvip-full :is(
	#page,
	#content,
	.site-content,
	.entry-content,
	.content-area,
	main,
	article,
	.wp-site-blocks,
	.is-layout-constrained
):not([class*="tvip-"]) {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/*
 * The enumerated list above only covers wrappers we can name. Themes and page
 * builders invent their own, and one unknown wrapper with a max-width and
 * side padding is enough to squeeze the app into a column — which is what put
 * the sign-in form flush against the screen edge.
 *
 * `:has()` reaches every ancestor of the app instead of guessing at class
 * names. Body and html are excluded by the descendant combinator, so the page
 * background set above survives.
 */
body.tvip-full :has(.tvip):not([class*="tvip-"]) {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	float: none !important;
}

body.tvip-full .entry-header,
body.tvip-full .page-header,
body.tvip-full .entry-title,
body.tvip-full .entry-footer,
body.tvip-full .post-navigation,
body.tvip-full .wp-block-post-title,
body.tvip-full .site-header,
body.tvip-full .site-footer,
body.tvip-full footer.wp-block-template-part,
body.tvip-full header.wp-block-template-part {
	display: none !important;
}

body.tvip-app-page {
	overflow-x: hidden;
}

/* ======================================================== PRIMITIVES === */

.tvip,
.tvip * {
	box-sizing: border-box;
}

/*
 * Element resets go through :where() so they carry no specificity of their
 * own. A component class such as .tvip-btn then always wins, rather than
 * losing to `.tvip button` on the type-selector tiebreak.
 */
.tvip :where(h1, h2, h3, h4) {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tv-cream);
	letter-spacing: -.005em;
}

.tvip :where(p) {
	margin: 0;
}

.tvip :where(a) {
	color: inherit;
	text-decoration: none;
}

.tvip :where(img) {
	max-width: 100%;
	height: auto;
	display: block;
}

.tvip :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.tvip :where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A hidden element stays hidden, whatever display its component sets. */
.tvip [hidden] {
	display: none !important;
}

.tvip {
	font-family: var(--tv-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--tv-cream);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.tvip :focus-visible {
	outline: 2px solid var(--tv-gold);
	outline-offset: 2px;
	border-radius: 6px;
}

.tvip .tvip-ico {
	flex: 0 0 auto;
	display: block;
}

.tvip-eyebrow {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tv-gold);
	margin: 0 0 8px;
}

.tvip-lede {
	color: var(--tv-muted);
	font-size: 14.5px;
	line-height: 1.62;
	max-width: 66ch;
}

.tvip-fine {
	color: var(--tv-dim);
	font-size: 12.5px;
	line-height: 1.55;
	margin-top: 12px;
}

.tvip-fine--center {
	text-align: center;
}

/* An icon leading a caption sits in the line, not on its own. */
.tvip-fine > .tvip-ico {
	display: inline-block;
	vertical-align: -2px;
	margin-right: 5px;
	color: var(--tv-gold);
	opacity: .85;
}

.tvip-dot-sep {
	opacity: .5;
	padding: 0 2px;
}

.tvip .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* =========================================================== BRAND === */

.tvip-brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.tvip-brand__text {
	font-family: var(--tv-disp);
	font-size: 21px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--tv-gold);
	white-space: nowrap;
}

.tvip-brand__text b {
	font-weight: inherit;
	color: var(--tv-cream);
}

.tvip-brand--lg .tvip-brand__text {
	font-size: 28px;
}

/* ========================================================= BUTTONS === */

.tvip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px !important;
	border-radius: var(--tv-radius-sm) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #241703 !important;
	background: linear-gradient(145deg, var(--tv-gold-lt), var(--tv-gold)) !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .14s var(--tv-ease), filter .14s var(--tv-ease), box-shadow .14s var(--tv-ease);
}

.tvip-btn:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -14px rgba(224, 169, 59, .9) !important;
}

.tvip-btn:active {
	transform: translateY(0);
}

.tvip-btn--full {
	width: 100% !important;
}

.tvip-btn--sm {
	padding: 9px 15px !important;
	font-size: 13px !important;
}

.tvip-btn--ghost {
	background: transparent !important;
	color: var(--tv-cream) !important;
	border-color: var(--tv-line-2) !important;
}

.tvip-btn--ghost:hover {
	color: var(--tv-gold) !important;
	border-color: var(--tv-line-3) !important;
	background: rgba(224, 169, 59, .06) !important;
	filter: none;
	box-shadow: none !important;
}

.tvip-btn--quiet {
	background: transparent !important;
	color: var(--tv-muted) !important;
	border-color: transparent !important;
	font-weight: 600 !important;
}

.tvip-btn--quiet:hover {
	color: var(--tv-cream) !important;
	filter: none;
	transform: none;
	box-shadow: none !important;
}

.tvip-btn--off,
.tvip-btn[disabled] {
	background: var(--tv-card-2) !important;
	color: var(--tv-dim) !important;
	border-color: var(--tv-line) !important;
	cursor: default !important;
	pointer-events: none;
	font-weight: 600 !important;
}

.tvip-btn.is-busy {
	pointer-events: none;
	opacity: .65;
}

.tvip-btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

/* ==================================================== FORM CONTROLS === */

.tvip-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tvip-form__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* A column flex container stretches its children; a button that did not ask
   to be full width should keep its own. */
.tvip-form > .tvip-btn:not(.tvip-btn--full) {
	align-self: flex-start;
}

.tvip-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.tvip-field > label,
.tvip-field__row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tv-cream);
	letter-spacing: .005em;
}

.tvip-field__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.tvip-field__aside {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tv-gold);
	border-bottom: 1px solid transparent;
}

.tvip-field__aside:hover {
	border-bottom-color: var(--tv-line-3);
}

.tvip-optional {
	font-size: 11px;
	font-weight: 600;
	color: var(--tv-dim);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-left: 6px;
}

.tvip-field__hint {
	font-size: 12.5px;
	color: var(--tv-dim);
	line-height: 1.5;
}

.tvip-field__error {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tv-red);
}

.tvip-input {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	background: var(--tv-card);
	border: 1px solid var(--tv-line-2);
	border-radius: var(--tv-radius-sm);
	transition: border-color .16s var(--tv-ease), box-shadow .16s var(--tv-ease);
}

.tvip-input:focus-within {
	border-color: var(--tv-gold);
	box-shadow: 0 0 0 3px rgba(224, 169, 59, .14);
}

.tvip-input.is-readonly {
	opacity: .68;
}

.tvip-input__icon,
.tvip-input__prefix {
	display: grid;
	place-items: center;
	color: var(--tv-dim);
	flex: 0 0 auto;
}

.tvip-input__prefix {
	font-size: 15px;
	font-weight: 700;
}

.tvip-input:focus-within .tvip-input__icon {
	color: var(--tv-gold);
}

.tvip-input input {
	flex: 1 1 auto;
	/* 16px keeps iOS from zooming the page on focus. */
	padding: 13px 0 !important;
}

/*
 * Autofill.
 *
 * Chrome and Safari paint a near-white background of their own over any field
 * they have filled — or are previewing a fill for — which punches a hole
 * straight through the dark design. They also repaint it on hover, on focus,
 * and again once the page settles.
 *
 * Three things are needed together: an inset box-shadow thick enough to cover
 * the painted background, -webkit-text-fill-color (which beats `color` on a
 * filled field), and a transition delay long enough that the repaint never
 * lands. Applied to every control in the app rather than one component, so
 * any field added later inherits the fix.
 */
.tvip input:-webkit-autofill,
.tvip input:-webkit-autofill:hover,
.tvip input:-webkit-autofill:focus,
.tvip input:-webkit-autofill:active,
.tvip textarea:-webkit-autofill,
.tvip textarea:-webkit-autofill:focus,
.tvip select:-webkit-autofill,
.tvip select:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--tv-cream) !important;
	-webkit-box-shadow: 0 0 0 100px var(--tv-card) inset !important;
	box-shadow: 0 0 0 100px var(--tv-card) inset !important;
	caret-color: var(--tv-cream);
	border-radius: inherit !important;
	transition: background-color 8640000s ease-in-out 0s, color 8640000s ease-in-out 0s;
}

/*
 * The standard selector, for Firefox and newer Chromium. Kept in its own rule:
 * a browser that does not recognise :autofill drops the whole selector list,
 * and that must not take the -webkit- block above down with it.
 */
.tvip input:autofill,
.tvip textarea:autofill,
.tvip select:autofill {
	-webkit-text-fill-color: var(--tv-cream) !important;
	box-shadow: 0 0 0 100px var(--tv-card) inset !important;
	caret-color: var(--tv-cream);
	border-radius: inherit !important;
	filter: none !important;
}

.tvip-input__toggle {
	display: grid;
	place-items: center;
	padding: 6px !important;
	margin-right: -4px !important;
	border-radius: 8px !important;
	color: var(--tv-dim) !important;
	transition: color .14s var(--tv-ease);
}

.tvip-input__toggle:hover {
	color: var(--tv-gold) !important;
}

/* the access-code field: one big centred field, hard to mistype */
.tvip-input--code {
	padding: 0;
}

.tvip-input--code input {
	padding: 17px 14px !important;
	text-align: center !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	border-radius: inherit !important;
}

.tvip-input--code input::placeholder {
	letter-spacing: .12em;
	font-weight: 500;
}

/* checkbox */
.tvip-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13.5px;
	color: var(--tv-muted);
	cursor: pointer;
	line-height: 1.5;
}

.tvip-check input {
	position: absolute;
	opacity: 0;
	width: 0 !important;
	height: 0 !important;
}

.tvip-check__box {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-top: 1px;
	border-radius: 6px;
	border: 1.5px solid var(--tv-line-2);
	color: transparent;
	background: var(--tv-card);
	transition: background .14s var(--tv-ease), border-color .14s var(--tv-ease), color .14s var(--tv-ease);
}

.tvip-check input:checked + .tvip-check__box {
	background: var(--tv-gold);
	border-color: var(--tv-gold);
	color: #241703;
}

.tvip-check input:focus-visible + .tvip-check__box {
	outline: 2px solid var(--tv-gold);
	outline-offset: 2px;
}

/* password strength */
.tvip-strength {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tvip-strength__bar {
	flex: 1;
	height: 4px;
	border-radius: 99px;
	background: var(--tv-card-2);
	overflow: hidden;
}

.tvip-strength__bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: var(--tv-red);
	transition: width .28s var(--tv-ease), background .28s var(--tv-ease);
}

.tvip-strength__label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tv-dim);
	min-width: 52px;
	text-align: right;
}

.tvip-strength[data-level="2"] .tvip-strength__bar i { background: #D9A23F; }
.tvip-strength[data-level="3"] .tvip-strength__bar i { background: var(--tv-green); }
.tvip-strength[data-level="4"] .tvip-strength__bar i { background: var(--tv-green); }

/* divider */
.tvip-divider,
.tvip-auth__divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 4px 0;
	color: var(--tv-dim);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tvip-divider::before,
.tvip-divider::after,
.tvip-auth__divider::before,
.tvip-auth__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--tv-line);
}

/* ========================================================= NOTICES === */

.tvip-notice {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 15px;
	border-radius: var(--tv-radius-sm);
	border: 1px solid var(--tv-line-2);
	background: rgba(224, 169, 59, .07);
	font-size: 13.5px;
	line-height: 1.55;
	margin-bottom: 18px;
}

.tvip-notice__icon {
	display: grid;
	place-items: center;
	color: var(--tv-gold);
	margin-top: 1px;
}

.tvip-notice--error {
	border-color: rgba(224, 106, 80, .42);
	background: rgba(224, 106, 80, .1);
}

.tvip-notice--error .tvip-notice__icon {
	color: var(--tv-red);
}

.tvip-notice--success {
	border-color: rgba(70, 196, 110, .38);
	background: rgba(70, 196, 110, .09);
}

.tvip-notice--success .tvip-notice__icon {
	color: var(--tv-green);
}

/* ============================================================ AUTH === */

.tvip-auth {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	background: var(--tv-bg);
}

/* Only stretch to the viewport when the plugin owns it. Inside a theme
   layout the block sizes to its content and the theme keeps its chrome. */
body.tvip-full .tvip-auth,
body.tvip-full .tvip-app {
	min-height: 100vh;
	min-height: 100dvh;
}

.tvip-auth__aside {
	position: relative;
	display: flex;
	align-items: center;
	padding: 56px 5vw;
	background: var(--tv-bg-2);
	border-right: 1px solid var(--tv-line);
	overflow: hidden;
}

.tvip-auth__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(48% 38% at 22% 12%, rgba(224, 169, 59, .2), transparent 68%),
		radial-gradient(52% 42% at 82% 88%, rgba(224, 169, 59, .12), transparent 70%);
}

.tvip-auth__asideinner {
	position: relative;
	max-width: 460px;
}

.tvip-auth__asidetitle {
	font-family: var(--tv-disp);
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.06;
	text-transform: uppercase;
	letter-spacing: .01em;
	margin: 36px 0 14px;
}

.tvip-auth__asidebody {
	color: var(--tv-muted);
	font-size: 15.5px;
	line-height: 1.62;
	max-width: 42ch;
}

.tvip-auth__points {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 30px 0 0;
}

.tvip-auth__points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14.5px;
	color: var(--tv-cream);
}

.tvip-auth__pointicon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 9px;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .1);
	border: 1px solid var(--tv-line);
}

.tvip-auth__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: 36px;
	background: var(--tv-line);
	border: 1px solid var(--tv-line);
	border-radius: var(--tv-radius);
	overflow: hidden;
}

.tvip-auth__stats div {
	padding: 16px 12px;
	text-align: center;
	background: var(--tv-bg-2);
}

.tvip-auth__stats b {
	display: block;
	font-family: var(--tv-disp);
	font-size: 25px;
	line-height: 1;
	color: var(--tv-gold);
	letter-spacing: .01em;
}

.tvip-auth__stats small {
	display: block;
	margin-top: 6px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tv-dim);
}

.tvip-auth__main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 48px 24px;
	background: var(--tv-bg);
}

.tvip-auth__card {
	width: 100%;
	max-width: 420px;
}

.tvip-auth__mobilebrand {
	display: none;
	margin-bottom: 26px;
}

.tvip-auth__title {
	font-family: var(--tv-disp);
	font-size: clamp(27px, 3.2vw, 34px);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .01em;
	margin-bottom: 10px;
}

.tvip-auth__sub {
	color: var(--tv-muted);
	font-size: 14.5px;
	line-height: 1.6;
	margin-bottom: 26px;
}

.tvip-auth__card .tvip-btn + .tvip-btn,
.tvip-auth__card .tvip-form + .tvip-btn,
.tvip-auth__card .tvip-auth__divider + .tvip-btn {
	margin-top: 12px !important;
}

.tvip-auth__divider {
	margin: 24px 0 16px;
}

.tvip-auth__foot {
	width: 100%;
	max-width: 420px;
	margin-top: 24px;
	text-align: center;
	font-size: 14px;
	color: var(--tv-muted);
}

.tvip-auth__foot a {
	color: var(--tv-gold);
	font-weight: 700;
	border-bottom: 1px solid var(--tv-line-2);
}

.tvip-auth__foot a:hover {
	border-bottom-color: var(--tv-gold);
}

.tvip-auth__legal {
	width: 100%;
	max-width: 460px;
	margin-top: 34px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--tv-dim);
	text-align: center;
}

/* ============================================================ SHELL === */

.tvip-app {
	display: flex;
	background: var(--tv-bg);
}

.tvip-scrim {
	position: fixed;
	inset: 0;
	z-index: 58;
	background: rgba(0, 0, 0, .62);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .22s var(--tv-ease);
}

.tvip-scrim.is-on {
	opacity: 1;
}

/* --- rail ------------------------------------------------------------ */

/*
 * Themed mode: the rail scrolls with the page instead of pinning to the
 * viewport, because a fixed rail would climb out of the theme's container and
 * sit on top of the site header.
 */
body:not(.tvip-full) .tvip-rail {
	position: sticky;
	top: 0;
	height: auto;
	max-height: 100vh;
	inset: auto;
}

body:not(.tvip-full) .tvip-main {
	margin-left: 0;
}

body:not(.tvip-full) .tvip-app {
	gap: 0;
}

.tvip-rail {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	width: var(--tv-rail);
	flex: 0 0 var(--tv-rail);
	background: var(--tv-panel);
	border-right: 1px solid var(--tv-line);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--tv-card-3) transparent;
}

.tvip-rail::-webkit-scrollbar {
	width: 7px;
}

.tvip-rail::-webkit-scrollbar-thumb {
	background: var(--tv-card-3);
	border-radius: 99px;
}

.tvip-rail__top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 16px 14px;
}

.tvip-rail__close {
	display: none;
	margin-left: auto !important;
	padding: 6px !important;
	border-radius: 8px !important;
	color: var(--tv-muted) !important;
}

.tvip-rail__close:hover {
	color: var(--tv-cream) !important;
	background: rgba(224, 169, 59, .08) !important;
}

.tvip-rail__foot {
	margin-top: auto;
	padding: 12px;
	border-top: 1px solid var(--tv-line);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tvip-railbtn {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 13px !important;
	margin-bottom: 6px !important;
	border-radius: var(--tv-radius-sm) !important;
	background: var(--tv-card-2) !important;
	border: 1px solid var(--tv-line) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--tv-cream) !important;
	transition: border-color .16s var(--tv-ease), background .16s var(--tv-ease);
}

.tvip-railbtn:hover {
	border-color: var(--tv-line-3) !important;
	background: var(--tv-card-3) !important;
}

.tvip-railbtn .tvip-ico {
	color: var(--tv-gold);
}

/* --- identity card ---------------------------------------------------- */

.tvip-identity {
	margin: 0 12px 16px;
	padding: 12px;
	border-radius: var(--tv-radius);
	background: var(--tv-card);
	border: 1px solid var(--tv-line);
}

.tvip-identity.is-pending {
	border-color: rgba(224, 106, 80, .26);
}

.tvip-identity__head {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.tvip-avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	color: #2B1C06;
	background: linear-gradient(145deg, var(--tv-gold-lt), var(--tv-gold));
}

.tvip-avatar--lg {
	width: 52px;
	height: 52px;
	flex-basis: 52px;
	font-size: 17px;
}

.tvip-identity__who {
	min-width: 0;
	flex: 1;
}

.tvip-identity__name {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tv-cream);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tvip-identity__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 2px;
}

.tvip-identity__level,
.tvip-identity__days {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--tv-muted);
	white-space: nowrap;
}

.tvip-identity__level.is-vip {
	color: var(--tv-gold);
}

.tvip-identity__days {
	color: var(--tv-dim);
}

.tvip-identity__days .tvip-ico {
	color: var(--tv-red);
}

.tvip-identity__cog {
	display: grid;
	place-items: center;
	color: var(--tv-dim);
	transition: color .16s var(--tv-ease), transform .3s var(--tv-ease);
}

.tvip-identity__head:hover .tvip-identity__cog {
	color: var(--tv-gold);
	transform: rotate(45deg);
}

.tvip-identity__progress {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 11px;
}

.tvip-identity__progress small {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--tv-dim);
	white-space: nowrap;
}

.tvip-identity__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 11px;
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 700;
	color: #241703;
	background: linear-gradient(145deg, var(--tv-gold-lt), var(--tv-gold));
	transition: filter .14s var(--tv-ease);
}

.tvip-identity__cta:hover {
	filter: brightness(1.07);
}

/* --- meter ------------------------------------------------------------ */

.tvip-meter {
	flex: 1;
	height: 5px;
	border-radius: 99px;
	background: var(--tv-card-2);
	overflow: hidden;
}

.tvip-meter i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--tv-gold-dk), var(--tv-gold-lt));
	transition: width .4s var(--tv-ease);
}

.tvip-meter--lg {
	height: 7px;
	margin: 2px 0 16px;
}

.tvip-meter--flush {
	margin-bottom: 0;
}

/* --- nav -------------------------------------------------------------- */

.tvip-nav {
	padding: 0 12px;
}

.tvip-navgroup {
	margin-bottom: 16px;
}

.tvip-navgroup__label {
	padding: 0 10px 8px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tv-dim);
}

.tvip-navitem {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 11px;
	margin-bottom: 2px;
	border-radius: var(--tv-radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--tv-muted);
	transition: background .15s var(--tv-ease), color .15s var(--tv-ease);
}

.tvip-navitem__icon {
	display: grid;
	place-items: center;
	flex: 0 0 20px;
}

.tvip-navitem__label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tvip-navitem__end {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.tvip-navitem:hover {
	background: rgba(224, 169, 59, .06);
	color: var(--tv-cream);
}

.tvip-navitem.is-on {
	background: rgba(224, 169, 59, .12);
	color: var(--tv-gold);
	font-weight: 600;
}

.tvip-navitem.is-on::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 9px;
	bottom: 9px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--tv-gold);
}

.tvip-navitem.is-locked {
	color: var(--tv-dim);
}

.tvip-navitem.is-locked .tvip-navitem__icon {
	opacity: .55;
}

.tvip-navitem.is-locked:hover {
	background: rgba(224, 106, 80, .07);
	color: var(--tv-muted);
}

.tvip-navitem__lock {
	display: grid;
	place-items: center;
	color: var(--tv-dim);
}

.tvip-navitem__pill {
	padding: 3px 6px;
	border-radius: 5px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .18);
}

.tvip-navitem__count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 99px;
	display: grid;
	place-items: center;
	font-size: 10.5px;
	font-weight: 800;
	color: #241703;
	background: var(--tv-gold);
}

.tvip-navitem__count:empty,
.tvip-navitem__count[data-zero] {
	display: none;
}

.tvip-navitem--quiet {
	font-size: 13.5px;
}

/* --- main ------------------------------------------------------------- */

.tvip-main {
	flex: 1;
	min-width: 0;
	margin-left: var(--tv-rail);
	display: flex;
	flex-direction: column;
}

.tvip-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 28px;
	background: rgba(11, 8, 6, .88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--tv-line);
}

.tvip-burger {
	display: none;
	padding: 7px !important;
	margin-left: -7px !important;
	border-radius: 9px !important;
	color: var(--tv-cream) !important;
}

.tvip-burger:hover {
	background: rgba(224, 169, 59, .09) !important;
}

.tvip-topbar__title {
	font-family: var(--tv-disp);
	font-size: 17px;
	letter-spacing: .015em;
	text-transform: uppercase;
	font-weight: 400;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tvip-topbar__end {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.tvip-topbar__avatar {
	display: none;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
	color: #2B1C06;
	background: linear-gradient(145deg, var(--tv-gold-lt), var(--tv-gold));
}

.tvip-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	border-radius: 99px;
	border: 1px solid var(--tv-line);
	font-size: 12px;
	font-weight: 600;
	color: var(--tv-muted);
	white-space: nowrap;
}

.tvip-live i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tv-green);
	animation: tvip-pulse 2.4s infinite;
}

.tvip-live.is-off i {
	background: var(--tv-card-3);
	animation: none;
}

@keyframes tvip-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(70, 196, 110, .5); }
	50%      { opacity: .5; box-shadow: 0 0 0 5px rgba(70, 196, 110, 0); }
}

.tvip-progressbar {
	position: sticky;
	top: 0;
	z-index: 51;
	height: 2px;
	background: transparent;
}

.tvip-progressbar i {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--tv-gold-dk), var(--tv-gold-lt));
	transition: width .3s var(--tv-ease), opacity .3s var(--tv-ease);
}

.tvip-viewport {
	flex: 1;
	padding: 26px 28px 40px;
	max-width: 1280px;
	width: 100%;
}

.tvip-view {
	display: flex;
	flex-direction: column;
	gap: 18px;
	animation: tvip-fade .3s var(--tv-ease);
}

@keyframes tvip-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.tvip-foot {
	padding: 24px 28px 34px;
	border-top: 1px solid var(--tv-line);
	max-width: 1280px;
}

.tvip-foot p {
	font-size: 11.5px;
	line-height: 1.62;
	color: var(--tv-dim);
	max-width: 100ch;
}

/* --- mobile bar -------------------------------------------------------- */

.tvip-mobilebar {
	display: none;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 57;
	background: rgba(19, 16, 12, .96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--tv-line);
	padding-bottom: env(safe-area-inset-bottom);
}

.tvip-mobilebar__item {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 9px 4px 8px;
	color: var(--tv-dim);
	min-width: 0;
}

.tvip-mobilebar__icon {
	position: relative;
	display: grid;
	place-items: center;
}

.tvip-mobilebar__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .01em;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tvip-mobilebar__item.is-on {
	color: var(--tv-gold);
}

.tvip-mobilebar__item.is-locked {
	opacity: .48;
}

.tvip-mobilebar__lock {
	position: absolute;
	right: -6px;
	bottom: -3px;
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tv-panel);
	color: var(--tv-dim);
}

.tvip-mobilebar__dot {
	position: absolute;
	top: -1px;
	right: -3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tv-gold);
	box-shadow: 0 0 0 2px var(--tv-panel);
}

/* ============================================================ CARDS === */

.tvip-card {
	padding: 20px;
	border-radius: var(--tv-radius);
	background: var(--tv-card);
	border: 1px solid var(--tv-line);
	box-shadow: var(--tv-shadow);
}

.tvip-card--flush {
	padding: 4px 20px;
}

.tvip-card--tight {
	padding: 16px 18px;
}

.tvip-card--accent {
	border-color: var(--tv-line-2);
	background: linear-gradient(160deg, rgba(224, 169, 59, .07), var(--tv-card) 55%);
}

.tvip-card--feature,
.tvip-card--live {
	display: flex;
	flex-direction: column;
}

.tvip-card--feature .tvip-lede,
.tvip-card--live .tvip-fine {
	flex: 1;
}

/*
 * One vertical rhythm for every panel.
 *
 * Buttons used to be flush against whatever sat above them — a tick list, a
 * step list, a paragraph — because nothing in the card gave them a gap, and
 * two stacked buttons touched outright. Rather than patch each screen, a
 * button placed directly in a card always clears the content above it by the
 * same amount, and a second one always clears the first.
 *
 * Buttons inside .tvip-btnrow are excluded by the child combinator: that row
 * lays them out with its own gap.
 */
.tvip-card > .tvip-btn,
.tvip-card > form > .tvip-btn {
	margin-top: 16px !important;
}

.tvip-card > .tvip-btn + .tvip-btn,
.tvip-card > form > .tvip-btn + .tvip-btn {
	margin-top: 10px !important;
}

/* A caption under a button, not jammed against it. */
.tvip-card > .tvip-btn + .tvip-fine {
	margin-top: 11px;
}

.tvip-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}

.tvip-card__head--tight {
	margin-bottom: 10px;
}

.tvip-card__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 9px;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .11);
	border: 1px solid var(--tv-line);
}

.tvip-card__head h3 {
	font-family: var(--tv-disp);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .015em;
	text-transform: uppercase;
	min-width: 0;
}

.tvip-card__right {
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--tv-muted);
	white-space: nowrap;
}

.tvip-card--status {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.tvip-status__who {
	min-width: 0;
	flex: 1;
}

.tvip-status__who b {
	display: block;
	font-size: 16px;
	font-weight: 700;
}

.tvip-status__who small {
	display: block;
	font-size: 13px;
	color: var(--tv-muted);
	overflow: hidden;
	text-overflow: ellipsis;
}

.tvip-status__badge {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 7px;
}

.tvip-status__badge small {
	font-size: 11.5px;
	color: var(--tv-dim);
}

/* =========================================================== GRIDS === */

.tvip-grid {
	display: grid;
	gap: 18px;
}

.tvip-grid--2 {
	grid-template-columns: 1fr 1fr;
}

.tvip-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* ============================================================ HERO === */

.tvip-hero {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tvip-hero__hi {
	font-size: 14px;
	color: var(--tv-muted);
}

.tvip-hero__name {
	font-family: var(--tv-disp);
	font-size: clamp(29px, 4.2vw, 43px);
	line-height: 1.04;
	text-transform: uppercase;
	letter-spacing: .012em;
	font-weight: 400;
}

.tvip-hero__level {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: 8px;
	padding: 5px 11px;
	border-radius: 99px;
	border: 1px solid var(--tv-line-2);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tv-muted);
}

.tvip-hero__level.is-vip {
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .1);
	border-color: var(--tv-line-3);
}

.tvip-pagehead {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.tvip-pagehead__title {
	font-family: var(--tv-disp);
	font-size: clamp(26px, 3.6vw, 36px);
	line-height: 1.06;
	text-transform: uppercase;
	letter-spacing: .012em;
	font-weight: 400;
}

.tvip-pagehead .tvip-eyebrow {
	margin-bottom: 0;
}

/* ========================================================== BANNER === */

.tvip-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 17px;
	border-radius: var(--tv-radius);
	border: 1px solid var(--tv-line-2);
	background: linear-gradient(90deg, rgba(224, 169, 59, .13), rgba(224, 169, 59, .03));
	font-size: 14px;
	line-height: 1.55;
}

.tvip-banner b {
	color: var(--tv-gold);
}

.tvip-banner__icon {
	display: grid;
	place-items: center;
	color: var(--tv-gold);
	margin-top: 1px;
}

.tvip-banner--win {
	border-color: rgba(70, 196, 110, .34);
	background: linear-gradient(90deg, rgba(70, 196, 110, .12), rgba(70, 196, 110, .02));
}

.tvip-banner--win .tvip-banner__icon,
.tvip-banner--win b {
	color: var(--tv-green);
}

/* ========================================================== STATS === */

.tvip-statrow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	border-radius: var(--tv-radius);
	border: 1px solid var(--tv-line);
	background: var(--tv-line);
	overflow: hidden;
}

.tvip-stat {
	padding: 20px 14px;
	text-align: center;
	background: var(--tv-card);
}

.tvip-stat b {
	display: block;
	font-family: var(--tv-disp);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1;
	letter-spacing: .01em;
	color: var(--tv-gold);
	font-weight: 400;
}

.tvip-stat small {
	display: block;
	margin-top: 7px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--tv-muted);
}

/* ======================================================== SESSIONS === */

.tvip-sessions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tvip-session {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--tv-radius-sm);
	background: var(--tv-card-2);
	font-size: 13.5px;
}

.tvip-session i {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: var(--tv-card-3);
}

.tvip-session__name {
	font-weight: 700;
	min-width: 76px;
}

.tvip-session__state {
	margin-left: auto;
	font-size: 12.5px;
	color: var(--tv-muted);
	white-space: nowrap;
}

.tvip-session.is-open i {
	background: var(--tv-green);
	box-shadow: 0 0 0 3px rgba(70, 196, 110, .16);
}

.tvip-session.is-open .tvip-session__state {
	color: var(--tv-green);
}

/* ======================================================= COUNTDOWN === */

.tvip-live__title {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}

.tvip-live__host {
	margin-top: 4px;
	font-size: 13px;
	color: var(--tv-muted);
}

.tvip-countdown {
	font-family: var(--tv-disp);
	font-size: clamp(30px, 3.6vw, 40px);
	line-height: 1;
	letter-spacing: .015em;
	color: var(--tv-gold);
	margin: 16px 0 6px;
	font-variant-numeric: tabular-nums;
}

/* ======================================================= CHECKLIST === */

.tvip-checklist {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tvip-task {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100% !important;
	padding: 12px 13px !important;
	text-align: left;
	border-radius: var(--tv-radius-sm) !important;
	background: var(--tv-card-2) !important;
	border: 1px solid transparent !important;
	transition: border-color .16s var(--tv-ease), background .16s var(--tv-ease);
}

.tvip-task:hover {
	border-color: var(--tv-line-2) !important;
	background: var(--tv-card-3) !important;
}

.tvip-task__box {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-top: 1px;
	border-radius: 6px;
	border: 1.5px solid var(--tv-line-2);
	color: transparent;
	transition: background .16s var(--tv-ease), border-color .16s var(--tv-ease), color .16s var(--tv-ease);
}

.tvip-task__text b {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.tvip-task__text small {
	display: block;
	font-size: 12.5px;
	color: var(--tv-muted);
	line-height: 1.45;
}

.tvip-task.is-done .tvip-task__box {
	background: var(--tv-gold);
	border-color: var(--tv-gold);
	color: #241703;
}

.tvip-task.is-done .tvip-task__text b {
	text-decoration: line-through;
	opacity: .5;
}

/* =========================================================== STEPS === */

.tvip-steps {
	display: flex;
	flex-direction: column;
}

.tvip-steps li {
	display: flex;
	gap: 13px;
	padding: 13px 0;
	border-bottom: 1px solid var(--tv-line);
}

.tvip-steps li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.tvip-steps li:first-child {
	padding-top: 0;
}

.tvip-steps__n {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	flex: 0 0 27px;
	border-radius: 50%;
	border: 1px solid var(--tv-line-2);
	font-size: 12px;
	font-weight: 800;
	color: var(--tv-gold);
}

.tvip-steps b {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.tvip-steps small {
	display: block;
	font-size: 13px;
	color: var(--tv-muted);
	line-height: 1.5;
}

/* =========================================================== TICKS === */

.tvip-ticks {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tvip-ticks li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 14px;
	line-height: 1.5;
}

.tvip-ticks__icon {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-top: 1px;
	border-radius: 6px;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .11);
}

/* =================================================== NOTIFICATIONS === */

/*
 * A fixed tag column, not an auto one. Tag words differ in length — LIVE
 * against SIGNALS — and with the pill sizing itself every headline started at
 * a different x, which read as broken rather than as a list.
 */
.tvip-note {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 4px 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--tv-line-2);
}

.tvip-note:last-child {
	border-bottom: 0;
}

.tvip-note__body {
	min-width: 0;
}

.tvip-note__top {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.tvip-note__top h3 {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	flex: 1;
}

.tvip-note__date {
	font-size: 11px;
	font-weight: 700;
	color: var(--tv-dim);
	white-space: nowrap;
}

.tvip-note p {
	margin-top: 4px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--tv-muted);
}

.tvip-note .tvip-btn {
	margin-top: 12px !important;
}

.tvip-tag {
	justify-self: start;
	align-self: start;
	margin-top: 2px;
	padding: 5px 8px;
	border-radius: 6px;
	height: fit-content;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .12em;
	white-space: nowrap;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .16);
}

.tvip-tag--live    { color: #F09078; background: rgba(224, 106, 80, .18); }
.tvip-tag--signals { color: var(--tv-green); background: rgba(70, 196, 110, .15); }
.tvip-tag--arena   { color: var(--tv-blue); background: rgba(111, 168, 220, .15); }

/* ========================================================= LESSONS === */

.tvip-lessons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tvip-lesson {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 16px;
	border-radius: var(--tv-radius);
	background: var(--tv-card);
	border: 1px solid var(--tv-line);
	transition: border-color .16s var(--tv-ease), transform .16s var(--tv-ease);
}

.tvip-lesson:hover {
	border-color: var(--tv-line-2);
	transform: translateX(2px);
}

.tvip-lesson__n {
	display: grid;
	place-items: center;
	width: 32px;
	flex: 0 0 32px;
	font-family: var(--tv-disp);
	font-size: 20px;
	line-height: 1.1;
	color: var(--tv-gold);
}

.tvip-lesson__body {
	flex: 1;
	min-width: 160px;
}

.tvip-lesson__body h3 {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
}

.tvip-lesson__body p {
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tv-muted);
}

.tvip-lesson__end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 9px;
	flex: 0 0 auto;
}

.tvip-lesson__len {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--tv-dim);
	white-space: nowrap;
}

.tvip-lesson.is-done {
	border-color: rgba(70, 196, 110, .26);
}

.tvip-lesson.is-done .tvip-lesson__n {
	color: var(--tv-green);
}

/* ========================================================== GUIDES === */

.tvip-guide {
	display: flex;
	flex-direction: column;
	padding: 19px;
	border-radius: var(--tv-radius);
	background: var(--tv-card);
	border: 1px solid var(--tv-line);
	box-shadow: var(--tv-shadow);
	transition: border-color .16s var(--tv-ease), transform .16s var(--tv-ease);
}

.tvip-guide:hover {
	border-color: var(--tv-line-2);
	transform: translateY(-2px);
}

.tvip-guide__top {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
}

.tvip-kind {
	padding: 5px 8px;
	border-radius: 6px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .14);
}

.tvip-guide__value {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--tv-muted);
}

.tvip-guide__title {
	font-family: var(--tv-disp);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.15;
	margin-bottom: 8px;
}

.tvip-guide__desc {
	flex: 1;
	font-size: 13px;
	line-height: 1.55;
	color: var(--tv-muted);
	margin-bottom: 16px;
}

/* ==================================================== TESTIMONIALS === */

.tvip-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tvip-tab {
	padding: 9px 15px !important;
	border-radius: 99px !important;
	border: 1px solid var(--tv-line) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--tv-muted) !important;
	white-space: nowrap;
	transition: background .16s var(--tv-ease), color .16s var(--tv-ease), border-color .16s var(--tv-ease);
}

.tvip-tab:hover {
	color: var(--tv-cream) !important;
	border-color: var(--tv-line-2) !important;
}

.tvip-tab.is-on {
	background: rgba(224, 169, 59, .13) !important;
	border-color: var(--tv-line-3) !important;
	color: var(--tv-gold) !important;
}

.tvip-tabpanel {
	display: none;
}

.tvip-tabpanel.is-on {
	display: block;
	animation: tvip-fade .26s var(--tv-ease);
}

.tvip-tabpanel__sub {
	font-size: 14px;
	color: var(--tv-muted);
	margin-bottom: 16px;
}

.tvip-proofgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 15px;
}

.tvip-proof {
	margin: 0;
	border-radius: var(--tv-radius);
	overflow: hidden;
	background: var(--tv-card);
	border: 1px solid var(--tv-line);
	transition: border-color .16s var(--tv-ease), transform .16s var(--tv-ease);
}

.tvip-proof:hover {
	border-color: var(--tv-line-2);
	transform: translateY(-2px);
}

.tvip-proof img {
	width: 100%;
	background: #0A0705;
}

.tvip-proof figcaption {
	padding: 13px 14px;
}

.tvip-proof strong {
	display: block;
	font-size: 13.5px;
	color: var(--tv-gold);
	margin-bottom: 5px;
}

.tvip-proof p {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tv-muted);
}

/* ============================================================ GATE === */

.tvip-gate {
	position: relative;
	padding: 30px;
	border-radius: 18px;
	border: 1px solid var(--tv-line-2);
	background:
		radial-gradient(70% 60% at 50% 0%, rgba(224, 169, 59, .12), transparent 70%),
		var(--tv-card);
	box-shadow: var(--tv-shadow);
	overflow: hidden;
}

.tvip-gate__head {
	text-align: center;
	max-width: 56ch;
	margin: 0 auto;
}

.tvip-gate__badge {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 0 auto 18px;
	border-radius: 18px;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .1);
	border: 1px solid var(--tv-line-2);
	box-shadow: 0 12px 34px -18px rgba(224, 169, 59, .9);
}

.tvip-gate__title {
	font-family: var(--tv-disp);
	font-size: clamp(23px, 3vw, 30px);
	font-weight: 400;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: .012em;
	margin-bottom: 10px;
}

.tvip-gate__body {
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--tv-muted);
}

.tvip-gate__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 11px;
	margin: 24px 0 30px;
}

.tvip-gate__actions .tvip-btn {
	min-width: 190px !important;
}

.tvip-gate__what {
	padding-top: 24px;
	border-top: 1px solid var(--tv-line);
}

.tvip-gate__what .tvip-eyebrow {
	text-align: center;
	margin-bottom: 14px;
}

.tvip-gate__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
}

.tvip-gate__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border-radius: var(--tv-radius-sm);
	background: var(--tv-card-2);
	border: 1px solid transparent;
}

.tvip-gate__itemicon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 10px;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .1);
	border: 1px solid var(--tv-line);
}

.tvip-gate__item b {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
}

.tvip-gate__item small {
	display: block;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--tv-muted);
}

.tvip-gate__item > div {
	flex: 1;
	min-width: 0;
}

.tvip-gate__itemlock {
	display: grid;
	place-items: center;
	color: var(--tv-dim);
	margin-top: 2px;
}

.tvip-gate__note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 22px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--tv-dim);
}

.tvip-gate__note .tvip-ico {
	color: var(--tv-gold);
	margin-top: 2px;
	opacity: .8;
}

.tvip-inlinegate {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 17px;
	border-radius: var(--tv-radius);
	border: 1px dashed var(--tv-line-2);
	background: rgba(224, 169, 59, .05);
	flex-wrap: wrap;
}

.tvip-inlinegate__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 10px;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .11);
}

.tvip-inlinegate > div {
	flex: 1;
	min-width: 180px;
}

.tvip-inlinegate b {
	display: block;
	font-size: 14px;
	font-weight: 700;
}

.tvip-inlinegate small {
	display: block;
	font-size: 12.5px;
	color: var(--tv-muted);
	line-height: 1.45;
}

.tvip-openrow {
	padding-top: 4px;
}

.tvip-openrow .tvip-btnrow {
	margin-top: 0;
}

/* =========================================================== EMPTY === */

.tvip-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 52px 24px;
	text-align: center;
	border-radius: var(--tv-radius);
	border: 1px dashed var(--tv-line-2);
	background: var(--tv-card);
}

.tvip-empty__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 6px;
	border-radius: 16px;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .09);
}

.tvip-empty b {
	font-size: 16px;
	font-weight: 700;
}

.tvip-empty p {
	font-size: 13.5px;
	color: var(--tv-muted);
	max-width: 42ch;
}

/* ============================================================ CHIP === */

.tvip-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 99px;
	border: 1px solid rgba(224, 169, 59, .26);
	background: rgba(224, 169, 59, .08);
	font-family: var(--tv-body);
	font-size: 12.5px;
	font-weight: 700;
	color: #E0A93B;
	text-decoration: none;
	line-height: 1;
}

.tvip-chip.is-pending {
	color: #A69988;
	border-color: rgba(166, 153, 136, .3);
	background: rgba(166, 153, 136, .08);
}

/* =========================================================== TOAST === */

.tvip-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 90;
	transform: translate(-50%, 20px);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: 99px;
	background: var(--tv-card-2);
	border: 1px solid var(--tv-line-2);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .95);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tv-cream);
	opacity: 0;
	pointer-events: none;
	transition: opacity .24s var(--tv-ease), transform .24s var(--tv-ease);
}

.tvip-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

.tvip-toast .tvip-ico {
	color: var(--tv-gold);
}

.tvip-toast--error .tvip-ico {
	color: var(--tv-red);
}

/* ====================================================== RESPONSIVE === */

@media (max-width: 1180px) {
	.tvip-gate__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1080px) {
	.tvip-auth {
		grid-template-columns: 1fr;
	}

	.tvip-auth__aside {
		display: none;
	}

	.tvip-auth__mobilebrand {
		display: inline-flex;
	}

	.tvip-auth__main {
		padding: 40px 24px 56px;
		justify-content: flex-start;
	}
}

@media (max-width: 980px) {
	.tvip-grid--2,
	.tvip-grid--3 {
		grid-template-columns: 1fr;
	}

	.tvip-statrow {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 860px) {
	.tvip-rail {
		width: 282px;
		flex-basis: 282px;
		transform: translateX(-100%);
		transition: transform .26s var(--tv-ease);
		box-shadow: 22px 0 50px -30px rgba(0, 0, 0, .95);
	}

	.tvip-app.is-navopen .tvip-rail {
		transform: none;
	}

	.tvip-rail__close {
		display: grid;
	}

	.tvip-main {
		margin-left: 0;
		padding-bottom: 68px;
	}

	.tvip-burger {
		display: grid;
	}

	.tvip-topbar {
		padding: 12px 16px;
	}

	.tvip-topbar__avatar {
		display: grid;
	}

	.tvip-live {
		display: none;
	}

	.tvip-viewport {
		padding: 20px 16px 32px;
	}

	.tvip-foot {
		padding: 20px 16px 28px;
	}

	.tvip-mobilebar {
		display: flex;
	}

	.tvip-card {
		padding: 17px;
	}

	.tvip-card--flush {
		padding: 2px 17px;
	}

	.tvip-gate {
		padding: 22px 18px;
	}

	.tvip-gate__actions .tvip-btn {
		flex: 1;
		min-width: 0 !important;
	}
}

@media (max-width: 560px) {
	.tvip-form__pair {
		grid-template-columns: 1fr;
	}

	.tvip-statrow {
		grid-template-columns: 1fr 1fr;
	}

	.tvip-stat {
		padding: 16px 10px;
	}

	.tvip-lesson {
		flex-wrap: wrap;
		gap: 12px;
	}

	.tvip-lesson__body {
		min-width: 0;
		flex: 1 1 100%;
		order: 2;
	}

	.tvip-lesson__n {
		order: 1;
		justify-items: start;
		width: auto;
		flex-basis: auto;
	}

	.tvip-lesson__end {
		order: 3;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.tvip-note {
		grid-template-columns: minmax(0, 1fr);
		gap: 9px;
	}

	.tvip-tag {
		align-self: flex-start;
	}

	.tvip-card--status {
		flex-direction: column;
		align-items: flex-start;
	}

	.tvip-status__badge {
		align-items: flex-start;
	}

	.tvip-gate__actions {
		flex-direction: column;
	}

	.tvip-proofgrid {
		grid-template-columns: 1fr;
	}

	.tvip-auth__main {
		padding: 30px 20px 48px;
	}
}

@media (max-width: 380px) {
	.tvip-mobilebar__label {
		font-size: 9px;
	}

	.tvip-tab {
		padding: 8px 12px !important;
		font-size: 11.5px !important;
	}
}


/* =================================================== DAILY TARGET === */

.tvip-target {
	border-color: var(--tv-line-2);
	background:
		radial-gradient(60% 90% at 0% 50%, rgba(224, 169, 59, .1), transparent 70%),
		var(--tv-card);
}

.tvip-target__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.tvip-target__figure {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 240px;
}

.tvip-target__num {
	font-family: var(--tv-disp);
	font-size: clamp(40px, 5.2vw, 58px);
	line-height: .95;
	letter-spacing: .01em;
	color: var(--tv-gold);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.tvip-target__num--rest {
	color: var(--tv-muted);
}

.tvip-target__figure small {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tv-muted);
	max-width: 42ch;
}

/*
 * The week strip: seven small columns, today lifted out in gold. It is what
 * makes "changes per day" visible rather than something a member has to take
 * on trust.
 */
.tvip-target__week {
	display: grid;
	grid-template-columns: repeat(7, minmax(38px, 1fr));
	gap: 5px;
	flex: 0 1 380px;
	min-width: 0;
}

.tvip-target__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 9px 4px 8px;
	border-radius: 10px;
	background: var(--tv-card-2);
	border: 1px solid transparent;
	min-width: 0;
}

.tvip-target__dayname {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--tv-dim);
}

.tvip-target__dayval {
	font-size: 12px;
	font-weight: 700;
	color: var(--tv-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.tvip-target__day.is-rest .tvip-target__dayval {
	color: var(--tv-dim);
}

.tvip-target__day.is-today {
	background: rgba(224, 169, 59, .13);
	border-color: var(--tv-line-3);
}

.tvip-target__day.is-today .tvip-target__dayname,
.tvip-target__day.is-today .tvip-target__dayval {
	color: var(--tv-gold);
}

.tvip-target__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--tv-line);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--tv-muted);
}

.tvip-target__note .tvip-ico {
	color: var(--tv-gold);
	margin-top: 2px;
	flex: 0 0 auto;
}

@media (max-width: 560px) {
	.tvip-target__body {
		gap: 16px;
	}

	.tvip-target__week {
		flex-basis: 100%;
		gap: 4px;
	}

	.tvip-target__day {
		padding: 8px 2px 7px;
		border-radius: 8px;
	}

	.tvip-target__dayval {
		font-size: 11px;
	}
}

/* ================================================= SAFE-AREA INSETS === */

/*
 * Notches, rounded corners and the home indicator, added on top of the plain
 * padding above rather than baked into it: `max()` wrapping `env()` is thrown
 * away entirely by a browser that does not know `env()`, and it would take
 * the side padding with it.
 */
@supports (padding: max(0px)) {
	@media (max-width: 860px) {
		.tvip-topbar {
			padding-left: max(16px, env(safe-area-inset-left));
			padding-right: max(16px, env(safe-area-inset-right));
		}

		.tvip-viewport,
		.tvip-foot {
			padding-left: max(16px, env(safe-area-inset-left));
			padding-right: max(16px, env(safe-area-inset-right));
		}

		.tvip-main {
			padding-bottom: calc(68px + env(safe-area-inset-bottom));
		}
	}

	@media (max-width: 1080px) {
		.tvip-auth__main {
			padding-left: max(24px, env(safe-area-inset-left));
			padding-right: max(24px, env(safe-area-inset-right));
		}
	}

	@media (max-width: 560px) {
		.tvip-auth__main {
			padding-left: max(20px, env(safe-area-inset-left));
			padding-right: max(20px, env(safe-area-inset-right));
		}
	}
}

/* ============================================== MOTION PREFERENCES === */

@media (prefers-reduced-motion: reduce) {
	.tvip *,
	.tvip *::before,
	.tvip *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==================================================== PRINT / MISC === */

@media print {
	.tvip-rail,
	.tvip-mobilebar,
	.tvip-topbar,
	.tvip-scrim {
		display: none !important;
	}

	.tvip-main {
		margin-left: 0;
	}
}

/* ==================================================== ADMIN PREVIEW === */

.tvip-navitem--admin {
	margin-top: 6px;
	font-size: 13px;
	color: var(--tv-dim);
	border: 1px dashed var(--tv-line);
}

.tvip-navitem--admin:hover {
	color: var(--tv-gold);
	border-color: var(--tv-line-2);
}

/* ================================================= INSTALL PROMPT === */

/*
 * Sits above the mobile bar on a phone and in the bottom-right corner on a
 * desktop. Hidden until pwa.js decides the browser can actually install —
 * a member who already has the app never sees it.
 */
.tvip-install {
	position: fixed;
	z-index: 80;
	left: 0;
	right: 0;
	bottom: calc(68px + env(safe-area-inset-bottom));
	padding: 0 12px 12px;
	pointer-events: none;
}

.tvip-install__card {
	position: relative;
	max-width: 460px;
	margin: 0 auto;
	padding: 18px;
	border-radius: 18px;
	background: var(--tv-card);
	border: 1px solid var(--tv-line-2);
	box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .95);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .28s var(--tv-ease), transform .28s var(--tv-ease);
}

.tvip-install.is-on .tvip-install__card {
	opacity: 1;
	transform: none;
}

.tvip-install__dismiss {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	padding: 6px !important;
	border-radius: 8px !important;
	color: var(--tv-dim) !important;
}

.tvip-install__dismiss:hover {
	color: var(--tv-cream) !important;
	background: rgba(224, 169, 59, .08) !important;
}

.tvip-install__head {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-right: 26px;
}

.tvip-install__icon {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	border-radius: 13px;
	display: block;
}

.tvip-install__intro b {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.tvip-install__intro small {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tv-muted);
}

.tvip-install__body {
	margin-top: 15px;
}

.tvip-install__actions {
	display: flex;
	gap: 9px;
	align-items: center;
}

.tvip-install__actions .tvip-btn {
	flex: 1;
}

.tvip-install__steps {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 15px;
}

.tvip-install__steps li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--tv-cream);
}

.tvip-install__stepicon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 9px;
	color: var(--tv-gold);
	background: rgba(224, 169, 59, .11);
	border: 1px solid var(--tv-line);
}

@media (min-width: 861px) {
	.tvip-install {
		left: auto;
		right: 0;
		bottom: 0;
		width: 420px;
		padding: 0 20px 20px;
	}
}

@media (max-width: 380px) {
	.tvip-install__card {
		padding: 15px;
	}

	/* Two short buttons still fit side by side at 320px; stacking them only
	   made the card taller. */
	.tvip-install__actions .tvip-btn {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}