/*
 * The ad landing page (/principal-vp-combo/). Loaded only there, on top of
 * style.css and plans.css. Mobile first; no webfonts, no images.
 *
 * Palette (D-028): the site header stays dark navy; the hero is a bright
 * indigo-to-violet band so the two never blend; amber is the one "buy"
 * colour; green marks savings; bands alternate white and lavender.
 */

.exw-landing-page {
	--lp-ink: #1E1B4B;
	--lp-muted: #4B5563;
	--lp-indigo: #4338CA;
	--lp-violet: #7C3AED;
	--lp-amber: #FBBF24;
	--lp-amber-dark: #F59E0B;
	--lp-tint: #F5F3FF;
	--lp-line: #E0DDF7;
}

/* No menu distractions: keep the logo, drop the navigation. */
.exw-landing-page .exw-nav,
.exw-landing-page .exw-menu-toggle,
.exw-landing-page .exw-header-actions,
.exw-landing-page .exw-announcement,
.exw-landing-page .exw-bottom-nav,
.exw-landing-page .exw-breadcrumbs,
.exw-landing-page .site-description {
	display: none !important;
}

/* A bright stripe separates the dark header from the hero. */
.exw-landing-page .site-header {
	border-bottom: 4px solid var(--lp-amber);
}

/* Room for the sticky bar on phones. */
.exw-landing-page .site-footer {
	padding-bottom: 5.5rem;
}

.exw-lp-main {
	overflow-x: clip;
	color: var(--lp-ink);
}

/* ---- Hero ---- */
.exw-lp-hero {
	padding: 2rem 0 2.25rem;
	background:
		radial-gradient(circle at 85% 10%, rgba(251, 191, 36, 0.22) 0, rgba(251, 191, 36, 0) 40%),
		linear-gradient(135deg, var(--lp-indigo) 0%, var(--lp-violet) 100%);
	color: #fff;
}

.exw-lp-hero__grid {
	display: grid;
	gap: 1.5rem;
}

.exw-lp-pill {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.3rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.exw-lp-hero h1 {
	margin: 0 0 0.75rem;
	color: #fff;
	font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.exw-lp-hero__sub {
	max-width: 40rem;
	margin: 0 0 1rem;
	color: #EDE9FE;
	font-size: 1.125rem;
	line-height: 1.5;
}

.exw-lp-examdate {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.45rem 0.8rem;
	border-radius: 10px;
	background: #fff;
	color: #9A3412;
	font-weight: 800;
}

.exw-lp-hero__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	margin: 0 0 1.1rem;
}

.exw-lp-hero__now {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
}

.exw-lp-hero__price s {
	color: #DDD6FE;
	font-size: 1.2rem;
	text-decoration-thickness: 2px;
}

.exw-lp-off {
	padding: 0.2rem 0.5rem;
	border-radius: 6px;
	background: #22C55E;
	color: #052E16;
	font-size: 0.875rem;
	font-weight: 800;
}

.exw-lp-hero__what {
	flex-basis: 100%;
	color: #EDE9FE;
	font-size: 0.9375rem;
}

.exw-lp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-bottom: 1.1rem;
}

.exw-lp-hero__ctas .exw-btn {
	flex: 1 1 15rem;
	justify-content: center;
	min-height: 3.1rem;
	text-align: center;
}

.exw-lp-btn-buy,
.exw-lp-btn-buy:visited {
	border: 2px solid var(--lp-amber);
	background: var(--lp-amber);
	color: #1C1300;
	font-size: 1.0625rem;
	font-weight: 800;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.exw-lp-btn-buy:hover,
.exw-lp-btn-buy:focus {
	border-color: var(--lp-amber-dark);
	background: var(--lp-amber-dark);
	color: #1C1300;
}

.exw-lp-hero .exw-btn--secondary,
.exw-lp-final .exw-btn--secondary {
	border: 2px solid rgba(255, 255, 255, 0.85);
	background: transparent;
	color: #fff;
	font-weight: 700;
}

.exw-lp-ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
}

.exw-lp-ticks li::before {
	content: "\2713";
	margin-right: 0.35rem;
	color: var(--lp-amber);
	font-weight: 800;
}

/* The "paper" card beside the hero copy. */
.exw-lp-paper {
	align-self: start;
	padding: 1.2rem;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 20px 40px rgba(30, 27, 75, 0.3);
	color: var(--lp-ink);
}

.exw-lp-paper__label {
	margin: 0 0 0.6rem;
	color: var(--lp-indigo);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.exw-lp-paper dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin: 0 0 0.8rem;
}

.exw-lp-paper dl div {
	padding: 0.7rem;
	border-radius: 12px;
	background: var(--lp-tint);
	text-align: center;
}

.exw-lp-paper dt {
	color: var(--lp-muted);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}

.exw-lp-paper dd {
	margin: 0.15rem 0 0;
	color: var(--lp-ink);
	font-size: 1.5rem;
	font-weight: 800;
}

.exw-lp-paper__note {
	margin: 0;
	color: var(--lp-muted);
	font-size: 0.9375rem;
}

/* ---- Numbers strip ---- */
.exw-lp-stats {
	border-bottom: 1px solid var(--lp-line);
	background: #fff;
}

.exw-lp-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	padding-block: 1.1rem;
	text-align: center;
}

.exw-lp-stats strong {
	display: block;
	color: var(--lp-indigo);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.1;
}

.exw-lp-stats span {
	color: var(--lp-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

/* ---- Bands ---- */
.exw-lp-band {
	padding: 2.5rem 0;
	background: #fff;
}

.exw-lp-band--tint {
	background: var(--lp-tint);
}

.exw-lp-band h2,
.exw-lp-final h2 {
	margin: 0 0 0.5rem;
	color: var(--lp-ink);
	font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
	line-height: 1.2;
}

.exw-lp-lead {
	max-width: 46rem;
	margin: 0 0 1.4rem;
	color: var(--lp-muted);
	font-size: 1.0625rem;
}

.exw-lp-narrow {
	max-width: var(--exw-container-narrow, 52rem);
}

.exw-lp-cards,
.exw-lp-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
}

.exw-lp-card {
	padding: 1.1rem;
	border: 1px solid var(--lp-line);
	border-left: 5px solid var(--lp-violet);
	border-radius: 14px;
	background: #fff;
}

.exw-lp-card p {
	margin: 0;
	line-height: 1.5;
}

.exw-lp-card .exw-lp-card__problem {
	margin-bottom: 0.4rem;
	color: #9A3412;
	font-weight: 800;
}

.exw-lp-features > div {
	padding: 1.1rem;
	border: 1px solid var(--lp-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(49, 46, 129, 0.05);
}

.exw-lp-icon {
	display: inline-grid;
	width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	margin-bottom: 0.5rem;
	border-radius: 12px;
	background: var(--lp-tint);
	font-size: 1.3rem;
}

.exw-lp-features h3 {
	margin: 0 0 0.35rem;
	color: var(--lp-ink);
	font-size: 1.05rem;
}

.exw-lp-features p {
	margin: 0;
	line-height: 1.5;
}

.exw-lp-free-note {
	margin: 1.5rem 0 0;
	text-align: center;
	font-weight: 600;
}

.exw-lp-free-note a {
	color: var(--lp-indigo);
	font-weight: 800;
}

/* ---- Steps ---- */
.exw-lp-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.8rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: lp-step;
}

.exw-lp-steps li {
	position: relative;
	padding: 1rem 1rem 1rem 3.6rem;
	border-radius: 14px;
	background: #fff;
	counter-increment: lp-step;
}

.exw-lp-steps li::before {
	content: counter(lp-step);
	position: absolute;
	top: 50%;
	left: 1rem;
	display: grid;
	width: 2rem;
	height: 2rem;
	place-items: center;
	border-radius: 50%;
	background: var(--lp-indigo);
	color: #fff;
	font-weight: 800;
	transform: translateY(-50%);
}

.exw-lp-steps strong,
.exw-lp-steps span {
	display: block;
}

.exw-lp-steps span {
	color: var(--lp-muted);
}

/* ---- Table and FAQ ---- */
.exw-landing__table-wrap {
	overflow-x: auto;
	border: 1px solid var(--lp-line);
	border-radius: 12px;
	background: #fff;
}

.exw-landing__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.exw-landing__table th,
.exw-landing__table td {
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid var(--lp-line);
	text-align: left;
}

.exw-landing__table tbody tr:last-child th,
.exw-landing__table tbody tr:last-child td {
	border-bottom: 0;
}

.exw-landing__table td {
	width: 8rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.exw-landing__table thead th {
	background: #EEF2FF;
	color: #3730A3;
	font-size: 0.8125rem;
	text-transform: uppercase;
}

.exw-landing__faq {
	margin-bottom: 0.6rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--lp-line);
	border-radius: 12px;
	background: #fff;
}

.exw-landing__faq summary {
	cursor: pointer;
	font-weight: 700;
}

.exw-landing__faq p {
	margin: 0.5rem 0 0;
}

.exw-landing__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* ---- Final call to action ---- */
.exw-lp-final {
	padding: 2.5rem 0;
	background: linear-gradient(135deg, var(--lp-indigo) 0%, var(--lp-violet) 100%);
	color: #fff;
	text-align: center;
}

.exw-lp-final h2 {
	color: #fff;
}

.exw-lp-final .exw-lp-hero__ctas {
	justify-content: center;
	max-width: 36rem;
	margin: 1rem auto 0;
}

/* ---- Sticky actions on phones ---- */
.exw-landing__sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	display: flex;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--lp-line);
	background: #fff;
	box-shadow: 0 -4px 14px rgba(30, 27, 75, 0.1);
}

.exw-landing__sticky .exw-btn {
	flex: 1;
	justify-content: center;
	text-align: center;
}

@media (min-width: 640px) {
	.exw-lp-stats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.exw-lp-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 760px) {
	.exw-lp-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.exw-lp-features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.exw-landing__sticky {
		display: none;
	}

	.exw-landing-page .site-footer {
		padding-bottom: 0;
	}
}

@media (min-width: 960px) {
	.exw-lp-hero {
		padding: 3rem 0;
	}

	.exw-lp-hero__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		align-items: center;
		gap: 2.5rem;
	}
}