/**
 * Luxe program page.
 *
 * Loaded only on a program whose `page_style` field is "luxe" — the premium,
 * by-application tiers. Everything here is scoped to body.vhr-luxe so the
 * other nine programs are untouched by a file they never load.
 *
 * The move is restraint, not decoration: the hero goes dark, the hot magenta
 * and the bright WhatsApp green give way to a single metallic accent, shadows
 * become hairlines, and the type gets more air. Two accent tones are needed
 * because one gold cannot be legible on both a near-black hero and a cream
 * section — #c8a86b reads at ~8:1 on the dark ground, #7d6231 at ~5:1 on cream.
 */

body.vhr-luxe {
	--lux-ink:    #17140f;
	--lux-ink-2:  #221d16;
	--lux-gold:   #c8a86b;              /* on the dark hero */
	--lux-gold-2: #e2cda2;
	--lux-bronze: #7d6231;              /* on cream sections */
	--lux-cream:  #f4efe6;
	--lux-hair:   rgba(200, 168, 107, .30);
	--lux-hair-w: rgba(244, 239, 230, .16);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

body.vhr-luxe .phero-prog {
	background: radial-gradient(120% 95% at 76% -10%, #302719 0%, var(--lux-ink) 62%);
	color: var(--lux-cream);
	padding-bottom: 84px;
}

body.vhr-luxe .phero-prog .phero-crumb,
body.vhr-luxe .phero-prog .phero-crumb a { color: rgba(244, 239, 230, .62); }
body.vhr-luxe .phero-prog .phero-crumb a:hover { color: var(--lux-gold); }

/* The kicker becomes a letterspaced label with a rule, not a coloured line. */
body.vhr-luxe .phero-kicker {
	display: flex;
	align-items: center;
	gap: 13px;
	color: var(--lux-gold);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

body.vhr-luxe .phero-kicker::before {
	content: '';
	width: 30px;
	height: 1px;
	background: var(--lux-gold);
	flex-shrink: 0;
}

body.vhr-luxe .phero-prog .d1 {
	color: var(--lux-cream);
	font-weight: 500;
	letter-spacing: -.022em;
}

body.vhr-luxe .phero-prog .body-lg {
	color: rgba(244, 239, 230, .7);
	max-width: 34em;
}

/* ── Hero buttons: one metal, no candy ──────────────────────────────────── */

body.vhr-luxe .phero-ctas .btn-mag,
body.vhr-luxe .phero-ctas .btn-blue {
	background: var(--lux-gold);
	color: var(--lux-ink);
	font-weight: 600;
	letter-spacing: .015em;
	box-shadow: none;
}

body.vhr-luxe .phero-ctas .btn-mag:hover,
body.vhr-luxe .phero-ctas .btn-blue:hover {
	background: var(--lux-gold-2);
	box-shadow: 0 10px 30px rgba(200, 168, 107, .22);
}

body.vhr-luxe .phero-ctas .btn-wa {
	background: transparent;
	color: var(--lux-cream);
	border: 1px solid var(--lux-hair-w);
}

body.vhr-luxe .phero-ctas .btn-wa:hover {
	background: rgba(244, 239, 230, .06);
	border-color: var(--lux-gold);
	color: var(--lux-gold);
	box-shadow: none;
}

/* ── Stat tiles: hairline-separated, not floating ───────────────────────── */

/* A grid, not a wrapping flex row: with flex-wrap the hairline on the last
   item of a wrapped row dangles into empty space. auto-flow column keeps
   however many tiles a program has on a single rail. */
body.vhr-luxe .phero-meta {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0;
	margin-top: 46px;
	padding-top: 24px;
	border-top: 1px solid var(--lux-hair);
}

body.vhr-luxe .phero-meta-item {
	padding: 0 20px;
	margin: 0;
	border-right: 1px solid var(--lux-hair);
	min-width: 0;
}

body.vhr-luxe .phero-meta-item:first-child { padding-left: 0; }

body.vhr-luxe .phero-meta-item:last-child {
	padding-right: 0;
	border-right: 0;
}

/* Four figures across a half-width column need a smaller figure. The unit
   is a span with no space before it, so at the old size "₹2,500/session"
   had nowhere legal to break and split mid-word. Sizing it to fit is the
   fix; breaking it is not. */
body.vhr-luxe .phero-meta-v {
	font-size: clamp(19px, 1.5vw, 22px);
	white-space: nowrap;
}

body.vhr-luxe .phero-meta-v span { font-size: .62em; }

body.vhr-luxe .phero-meta-v { color: var(--lux-cream); font-weight: 500; }
body.vhr-luxe .phero-meta-v span { color: var(--lux-gold); }

/* .45 measured 3.2:1 against the hero ground — under the 4.5:1 needed for
   text this small. .6 lands at ~5.8:1. */
body.vhr-luxe .phero-meta-k {
	color: rgba(244, 239, 230, .6);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-top: 7px;
}

/* ── Conversion card ────────────────────────────────────────────────────── */

body.vhr-luxe .phero-card {
	background: var(--lux-ink-2);
	border: 1px solid var(--lux-hair);
	box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}

body.vhr-luxe .pcard-badge {
	background: transparent;
	border: 1px solid var(--lux-hair);
	color: var(--lux-gold);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

body.vhr-luxe .pcard-price { color: var(--lux-cream); }
body.vhr-luxe .pcard-price small { color: rgba(244, 239, 230, .62); }

body.vhr-luxe .phero-card .btn-mag,
body.vhr-luxe .phero-card .btn-blue {
	background: var(--lux-gold);
	color: var(--lux-ink);
	box-shadow: none;
}

body.vhr-luxe .phero-card .btn-mag:hover { background: var(--lux-gold-2); }

body.vhr-luxe .pcard-quiz { color: rgba(244, 239, 230, .68); }
body.vhr-luxe .pcard-quiz:hover { color: var(--lux-gold); }

/* ── Sections: more air, bronze accents ─────────────────────────────────── */

body.vhr-luxe .sec { padding-block: clamp(76px, 9vw, 128px); }

body.vhr-luxe .sec-eyebrow::before { background: var(--lux-bronze); }

body.vhr-luxe .sec-eyebrow span {
	color: var(--lux-bronze);
	letter-spacing: .28em;
}

body.vhr-luxe .tick::before {
	color: var(--lux-bronze);
	font-weight: 400;
}

body.vhr-luxe .vhr-prose { font-size: 16.5px; line-height: 1.85; }

/* Module numerals: the serif, treated as a figure rather than a badge. */
body.vhr-luxe .mod {
	border-color: rgba(125, 98, 49, .18);
}

body.vhr-luxe .mod-n {
	font-family: var(--fD);
	font-size: 30px;
	font-weight: 500;
	color: var(--lux-bronze);
	opacity: .85;
}

body.vhr-luxe .sched-time.mag { color: var(--lux-bronze); }
body.vhr-luxe .sched-row.mag .sched-note { color: var(--lux-bronze); }

body.vhr-luxe .rel-accent,
body.vhr-luxe .rel-accent.mag { background: var(--lux-bronze); }
body.vhr-luxe .rel:hover .rel-name { color: var(--lux-bronze); }

/* ── Closing band ───────────────────────────────────────────────────────── */

body.vhr-luxe .cta-eyebrow {
	color: var(--lux-gold);
	letter-spacing: .24em;
}

body.vhr-luxe .cta-title .mag { color: var(--lux-gold); }

body.vhr-luxe .cta-btns .btn-mag {
	background: var(--lux-gold);
	color: var(--lux-ink);
	box-shadow: none;
}

body.vhr-luxe .cta-btns .btn-mag:hover { background: var(--lux-gold-2); }

body.vhr-luxe .cta-btns .btn-outline-w:hover {
	border-color: var(--lux-gold);
	color: var(--lux-gold);
}

/* ── Narrow screens: the hairline rail would crowd ──────────────────────── */

@media (max-width: 860px) {
	/* Two per row below the fold-width, with the rail redrawn to match. */
	body.vhr-luxe .phero-meta {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 22px;
	}

	body.vhr-luxe .phero-meta-item { padding: 0 16px; }
	body.vhr-luxe .phero-meta-item:nth-child(odd) { padding-left: 0; }

	body.vhr-luxe .phero-meta-item:nth-child(even) {
		border-right: 0;
		padding-right: 0;
	}
}

/* ── Site chrome, toned for this page ───────────────────────────────────
   The header pill and the quiz FAB are the loudest things on the screen and
   they sit on top of the dark hero. Scoped to the luxe body, so the rest of
   the site keeps its usual colours. Remove this block to leave the global
   chrome untouched. */

body.vhr-luxe .nav-trial {
	background: var(--lux-gold);
	color: var(--lux-ink);
}

body.vhr-luxe .nav-trial:hover { background: var(--lux-gold-2); }

body.vhr-luxe .nav-wa {
	background: transparent;
	color: var(--ink);
	border: 1px solid rgba(35, 32, 28, .22);
}

body.vhr-luxe .nav-wa:hover {
	background: rgba(35, 32, 28, .05);
	border-color: var(--lux-bronze);
	color: var(--lux-bronze);
}

/* The base rule sets fill:#fff directly, not currentColor — so recolouring
   the button's `color` alone left a white icon on a transparent ground. */
body.vhr-luxe .nav-wa svg { fill: var(--lux-bronze); }
body.vhr-luxe .nav-wa:hover svg { fill: var(--lux-bronze); }

body.vhr-luxe .quiz-fab {
	background: var(--lux-ink);
	color: var(--lux-gold);
	border: 1px solid var(--lux-hair);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

body.vhr-luxe .quiz-fab:hover {
	background: var(--lux-ink-2);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

/* ── Enquiry band ───────────────────────────────────────────────────────
   The band inherits magenta, WhatsApp green and link blue all at once —
   three loud colours in one card, directly under the quiet sections above. */

body.vhr-luxe .penq { border-color: rgba(125, 98, 49, .22); }

body.vhr-luxe .penq-eyebrow {
	color: var(--lux-bronze);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
}

body.vhr-luxe .penq-link { color: var(--lux-bronze); }
body.vhr-luxe .penq-link:hover { border-bottom-color: var(--lux-bronze); }

body.vhr-luxe .penq-cta .btn-wa {
	background: var(--lux-ink);
	color: var(--lux-cream);
	border: 1px solid transparent;
}

body.vhr-luxe .penq-cta .btn-wa:hover {
	background: var(--lux-ink-2);
	color: var(--lux-gold);
	box-shadow: none;
}

body.vhr-luxe .penq-cta .btn-outline {
	border-color: rgba(35, 32, 28, .28);
	color: var(--ink);
}

body.vhr-luxe .penq-cta .btn-outline:hover {
	border-color: var(--lux-bronze);
	color: var(--lux-bronze);
	background: transparent;
}

/* FAQ accordion: the open marker inherits magenta. */
body.vhr-luxe .faq-q::after,
body.vhr-luxe .faq-item.open .faq-q { color: var(--lux-bronze); }

/* Footer CTA — the last magenta on the page. */
body.vhr-luxe .footer-in .btn-mag {
	background: var(--lux-gold);
	color: var(--lux-ink);
	box-shadow: none;
}

body.vhr-luxe .footer-in .btn-mag:hover { background: var(--lux-gold-2); }
body.vhr-luxe .footer-made span { color: var(--lux-gold); }