/*
 * VAIDIKX — the closing chapter: testimonials, then what it costs.
 *
 * Both bands land on the return leg of the colour ramp, where the ground is leaving the
 * deep navy for black. Everything below is tokens, so both re-solve against it as the
 * reader passes — see inc/proof.php for what each band is and why the commercial one
 * has no prices in it.
 */

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

.mh-proof {
	padding-block: clamp( 3.5rem, 8vw, 6.5rem );
}

/*
 * ONE CELL, EVERY QUOTE IN IT.
 *
 * A grid rather than absolute positioning, so the stack is exactly as tall as its
 * longest quote at every width and nothing below it moves when the quote changes. That
 * is the whole reason this is not a slider: a slider that reflows the page under the
 * reader every seven seconds is the thing that makes carousels feel cheap.
 *
 * The inactive quotes stay in the DOM rather than being removed, so the section's height
 * is settled by its longest quote once and never renegotiated.
 */
.mh-proof__stack {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	grid-template-rows: minmax( 0, auto );
	perspective: 1200px;
	margin-top: clamp( 1.5rem, 3vw, 2.5rem );
}

.mh-proof__quote {
	grid-area: 1 / 1;
	margin: 0;
	max-width: 52rem;

	opacity: 0;
	transform: translate3d( 0, 14px, -60px ) scale( 0.97 );
	transform-origin: 20% 50%;
	transition:
		opacity 460ms cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		transform 460ms cubic-bezier( 0.22, 0.61, 0.36, 1 );

	/*
	 * The quotes behind must not be reachable. They are painted at 0 opacity, which
	 * leaves them in the accessibility tree and the tab order — a keyboard user would
	 * tab into a quote nobody can see. The numbered buttons below are how those quotes
	 * are reached, deliberately.
	 */
	visibility: hidden;
	pointer-events: none;
}

.mh-proof__quote.is-active {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
}

/*
 * THERE IS NO GHOSTED "NEXT" QUOTE, AND THERE WAS.
 *
 * The idea was a second quote set back in depth so the stack had a visible back edge.
 * Built and looked at, it put a 13%-opacity block of display type directly underneath
 * the one being read — same cell, same measure, same size — and both became harder to
 * read. Depth that costs legibility is not depth.
 *
 * Offsetting it far enough to clear the live quote would have meant a second column of
 * text nobody is meant to read, which is worse. So the stack is a straight cross-fade,
 * and the thing that says there are more of these is the numbered index below it —
 * which is also the only part of it a keyboard can reach, and therefore the part that
 * had to work anyway.
 */

.mh-proof__text {
	margin: 0;
	font-family: var( --mh-font-display );
	font-size: clamp( 1.4rem, 0.95rem + 1.9vw, 2.5rem );
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var( --mh-color-heading );
	text-wrap: pretty;
}

/*
 * The opening quotation mark, hung into the margin rather than sitting in the measure.
 *
 * A quote mark inline pushes the first word right and breaks the left edge every other
 * paragraph on the page holds. Hung, it reads as punctuation on the page rather than in
 * the sentence — which is what it is.
 */
.mh-proof__text::before {
	content: '\201C';
	position: absolute;
	margin-left: -0.52em;
	color: var( --mh-color-bronze );
	font-size: 1.1em;
	line-height: 1;
}

.mh-proof__who {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em 0.85em;
	margin-top: clamp( 1.1rem, 2vw, 1.75rem );
	font-family: var( --mh-font-ui );
	font-size: var( --mh-size-meta );
	letter-spacing: var( --mh-track-meta );
	text-transform: uppercase;
}

.mh-proof__name { color: var( --mh-color-beige ); font-weight: 600; }
.mh-proof__role { color: var( --mh-color-faint ); }

/* --- the index ------------------------------------------------------------- */

.mh-proof__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: clamp( 1.75rem, 3vw, 2.5rem );
	padding-top: clamp( 1.1rem, 2vw, 1.5rem );
	border-top: var( --mh-hairline );
}

/*
 * Real buttons at a real size. The pattern this replaces is a row of 10px dots, which
 * fails the 44px target on every phone ever made and announces as "button" with nothing
 * else. These say which quote they are, in the same display numeral the hero's story
 * index uses.
 */
.mh-proof__step {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.4rem;

	background: none;
	border: 0;
	cursor: pointer;

	font-family: var( --mh-font-display );
	font-size: var( --mh-size-meta );
	font-weight: 700;
	letter-spacing: var( --mh-track-meta );
	color: var( --mh-color-dim );
	transition: color 200ms ease;
}

.mh-proof__step:hover        { color: var( --mh-color-muted ); }
.mh-proof__step.is-active    { color: var( --mh-color-accent-text ); }

/* ==========================================================================
   WHAT IT COSTS
   ========================================================================== */

.mh-commerce {
	padding-block: clamp( 3.5rem, 8vw, 6.5rem );
}

.mh-commerce__inner {
	display: grid;
	gap: clamp( 2rem, 5vw, 4rem );
	grid-template-columns: 1fr;
	align-items: center;
}

@media ( min-width: 900px ) {
	.mh-commerce__inner {
		grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 0.95fr );
	}
}

.mh-commerce__title {
	font-family: var( --mh-font-display );
	font-size: clamp( 1.9rem, 1.1rem + 2.8vw, 3.1rem );
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var( --mh-color-heading );
	margin: 0 0 0.5em;
	text-wrap: balance;
}

.mh-commerce__dek {
	font-size: clamp( 1rem, 0.95rem + 0.25vw, 1.125rem );
	line-height: 1.65;
	color: var( --mh-color-muted );
	max-width: 46ch;
	margin: 0;
}

/* --- the card -------------------------------------------------------------- */

.mh-commerce__card {
	position: relative;
	isolation: isolate;
	padding: clamp( 1.6rem, 3.5vw, 2.5rem );
	border: var( --mh-hairline );
	border-radius: var( --mh-radius-lg );
	background: var( --mh-color-paper );
	overflow: hidden;
}

/*
 * THE PROXIMITY GLOW, and it is on this card only.
 *
 * assets/js/motion.js writes --gx / --gy as percentages of the card when the pointer is
 * over it, and --gon as 0 or 1. This draws a soft light at that point along the card's
 * EDGE — the fill is masked out of the middle so what illuminates is the border, not the
 * surface. A card that lights up under the cursor is a toy; a card whose edge catches the
 * light as you approach it is an object.
 *
 * Navy and cream, the two brand colours, plus a little white at the centre of the pool.
 * No rainbow, no cycling hue, nothing that moves on its own: it exists only while a
 * pointer is near it and it has no animation of its own at all.
 */
.mh-commerce__glow {
	position: absolute;

	/*
	 * OVER THE CARD, NOT UNDER IT — and the first attempt got this wrong.
	 *
	 * At z-index:-1 the ring sat behind the card's own background-color, which is opaque,
	 * so the custom properties updated correctly and absolutely nothing appeared. A
	 * negative z-index puts a child behind its parent's background; it is only useful
	 * when that background is transparent, and this one is a painted surface.
	 *
	 * Painting it above is safe precisely because of the mask below: what survives is a
	 * 2px ring at the very edge, and the card's content sits inside 1.6-2.5rem of
	 * padding. There is nothing for it to cover. pointer-events stays off so it cannot
	 * eat a click on the button underneath.
	 *
	 * inset:-1px so the ring lands ON the hairline border rather than just inside it —
	 * absolute positioning resolves against the padding box, so at inset:0 the light
	 * would stop one pixel short of the edge it is supposed to be catching.
	 */
	inset: -1px;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;

	opacity: var( --gon, 0 );
	transition: opacity 320ms ease;

	background: radial-gradient(
		16rem 16rem at var( --gx, 50% ) var( --gy, 50% ),
		rgba( 255, 255, 255, 0.92 ),
		rgba( 243, 237, 226, 0.70 ) 26%,
		rgba( 32, 42, 68, 0.45 ) 55%,
		transparent 72% );

	/*
	 * Keep the outer 2px, throw the rest away. Two masks intersected: the element's own
	 * box, minus the same box inset by the padding. Every browser this site supports
	 * takes the unprefixed property; the -webkit- pair is there for older WebKit, which
	 * is still a real share of iOS.
	 */
	padding: 2px;
	-webkit-mask:
		linear-gradient( #000 0 0 ) content-box,
		linear-gradient( #000 0 0 );
	        mask:
		linear-gradient( #000 0 0 ) content-box,
		linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
}

.mh-commerce__plan {
	margin: 0 0 0.9rem;
	font-family: var( --mh-font-ui );
	font-size: var( --mh-size-meta );
	font-weight: 600;
	letter-spacing: var( --mh-track-meta );
	text-transform: uppercase;
	color: var( --mh-color-beige );
}

.mh-commerce__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.75rem;
	margin: 0 0 clamp( 1.25rem, 2.5vw, 1.75rem );
	padding-bottom: clamp( 1.25rem, 2.5vw, 1.75rem );
	border-bottom: var( --mh-hairline );
}

.mh-commerce__amount {
	font-family: var( --mh-font-display );
	font-size: clamp( 2.1rem, 1.4rem + 2.4vw, 3rem );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --mh-color-heading );
}

.mh-commerce__period {
	font-size: var( --mh-size-meta );
	letter-spacing: var( --mh-track-meta );
	text-transform: uppercase;
	color: var( --mh-color-faint );
}

.mh-commerce__list {
	list-style: none;
	margin: 0 0 clamp( 1.5rem, 3vw, 2rem );
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.mh-commerce__list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var( --mh-color-ink );
}

/* A rule, not a tick glyph — the system draws with lines, and a checkmark here would be
   the only icon on the entire homepage. */
.mh-commerce__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 12px;
	height: 1px;
	background: var( --mh-color-bronze );
}

.mh-commerce__cta { width: 100%; justify-content: center; }

.mh-commerce__note {
	margin: 0.9rem 0 0;
	font-family: var( --mh-font-ui );
	font-size: var( --mh-size-meta );
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var( --mh-color-faint );
	text-align: center;
}

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

@media ( max-width: 719px ) {
	/* The hung quotation mark has no margin to hang into at this width. */
	.mh-proof__text::before { position: static; margin-left: 0; }

	/* Depth needs room to be read as depth; at 390px it is just blur. */
	.mh-proof__stack { perspective: none; }
	.mh-proof__quote { transform: translate3d( 0, 12px, 0 ) scale( 1 ); }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

/*
 * The quotes still change — that is a state change the reader asked for by pressing a
 * number, not decoration — but they cross-fade in place instead of moving through depth.
 * The auto-advance is switched off entirely in assets/js/motion.js, so under reduced
 * motion nothing changes unless the reader changes it.
 */
@media ( prefers-reduced-motion: reduce ) {
	.mh-proof__quote {
		transform: none;
		transition: opacity 150ms linear;
	}

	.mh-commerce__glow { transition: none; }
}