/* ==========================================================================
   Profitable Online Store V4: Home page (home-v4.php)

   A standalone stylesheet. The home page template deliberately does NOT load
   style.css, bootstrap or Font Awesome, so everything the page needs lives
   here: reset, base type, layout and components. Every selector is scoped
   under .hv4 so nothing here can leak into plugin markup that wp_head() and
   wp_footer() may still inject (s2member, SiteOrigin, Intercom).

   Design tokens mirror the names used in style.css so the two sheets stay
   recognisably the same brand, but the values are re-tuned for a marketing
   page: darker navy for full-bleed sections, a gold buy button carried over
   from the legacy pricing graphics, and a wider container.

   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Buttons
   5.  Section headers
   6.  Site header & nav
   7.  Hero
   8.  Logo / social-proof strip
   9.  Stat band
   10. Cards & testimonials
   11. Media rows (image + prose)
   12. Video
   13. Steps
   14. Checklists
   15. Accordions (FAQ + curriculum)
   16. Podcast list
   17. Pricing
   18. Guarantee
   19. Closing / decision
   20. Footer
   21. Sticky CTA bar
   22. Utilities
   23. Print
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.hv4 {
	/* --- Brand navy --- */
	--navy-50:  #eef4fb;
	--navy-100: #d6e4f5;
	--navy-200: #adc8e9;
	--navy-300: #7ea6d8;
	--navy-400: #4b7fc0;
	--navy-500: #1a5088;
	--navy-600: #164575;
	--navy-700: #123760;
	--navy-800: #0e2b4b;
	--navy-900: #0a2038;
	/* --- Brand green --- */
	--green-50:  #eaf7ef;
	--green-100: #cbebd7;
	--green-300: #5bbd85;
	--green-500: #0c8442;
	--green-600: #0a7038;
	--green-700: #085a2d;
	/* --- Gold: the legacy "Buy Now" colour, kept so the primary conversion
	   action reads the same as it always has --- */
	--gold-300: #ffd970;
	--gold-400: #f7c53c;
	--gold-500: #f0b323;
	--gold-600: #d99a10;
	--gold-700: #a3730a;
	/* --- Neutrals --- */
	--gray-0:   #ffffff;
	--gray-25:  #fbfcfd;
	--gray-50:  #f5f7fa;
	--gray-100: #eaeef3;
	--gray-200: #dbe1e9;
	--gray-300: #c2cbd6;
	--gray-400: #94a1b1;
	--gray-500: #6b7889;
	--gray-600: #4f5a69;
	--gray-700: #3a434f;
	--gray-800: #252c36;
	--gray-900: #151a21;

	--color-text:         var(--gray-700);
	--color-heading:      var(--navy-900);
	--color-muted:        var(--gray-500);
	--color-border:       var(--gray-200);
	--color-link:         var(--navy-600);
	--color-link-hover:   var(--navy-800);

	/* --- Type --- */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, "Noto Sans", sans-serif,
	             "Apple Color Emoji", "Segoe UI Emoji";

	--text-xs:   0.8125rem;
	--text-sm:   0.875rem;
	--text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
	--text-lg:   clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem);
	--text-xl:   clamp(1.1875rem, 1.11rem + 0.36vw, 1.375rem);
	--text-2xl:  clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
	--text-3xl:  clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
	--text-4xl:  clamp(1.875rem, 1.5rem + 1.7vw, 2.875rem);
	--text-5xl:  clamp(2.25rem, 1.6rem + 2.9vw, 4rem);

	--leading-tight:   1.15;
	--leading-snug:    1.3;
	--leading-normal:  1.6;
	--leading-relaxed: 1.75;

	/* --- Spacing --- */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	/* Vertical rhythm for full-width bands, the single knob that controls
	   how airy the page feels at every breakpoint. */
	--band: clamp(3.5rem, 2rem + 6vw, 6.5rem);

	/* --- Radii & elevation --- */
	--radius-sm:   6px;
	--radius:      10px;
	--radius-lg:   16px;
	--radius-xl:   22px;
	--radius-full: 999px;

	--shadow-xs: 0 1px 2px rgba(10, 32, 56, 0.06);
	--shadow-sm: 0 1px 3px rgba(10, 32, 56, 0.08), 0 1px 2px rgba(10, 32, 56, 0.04);
	--shadow:    0 6px 18px rgba(10, 32, 56, 0.08), 0 2px 5px rgba(10, 32, 56, 0.05);
	--shadow-lg: 0 18px 44px rgba(10, 32, 56, 0.14), 0 6px 14px rgba(10, 32, 56, 0.07);

	/* --- Layout --- */
	--container: 1180px;
	--container-narrow: 820px;
	--gutter: clamp(1.125rem, 0.7rem + 2vw, 2.5rem);
	--header-h: 68px;

	--transition-fast: 120ms ease;
	--transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

.hv4 *,
.hv4 *::before,
.hv4 *::after {
	box-sizing: border-box;
}

html.hv4-html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor targets must clear the sticky header. */
	scroll-padding-top: calc(var(--header-h, 68px) + 1rem);
	/* Belt to the body's braces. `overflow-x: hidden` on <body> alone is meant
	   to propagate to the viewport, but iOS Safari does not honour that and
	   still pans sideways. Set on the root it propagates reliably. The root's
	   own used value becomes `visible`, so the sticky header is unaffected. */
	overflow-x: hidden;
}

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

body.hv4 {
	margin: 0;
	background: var(--gray-0);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

.hv4 h1,
.hv4 h2,
.hv4 h3,
.hv4 h4 {
	margin: 0 0 var(--space-4);
	color: var(--color-heading);
	font-weight: 700;
	line-height: var(--leading-snug);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.hv4 h1 { font-size: var(--text-5xl); line-height: var(--leading-tight); }
.hv4 h2 { font-size: var(--text-4xl); }
.hv4 h3 { font-size: var(--text-2xl); }
.hv4 h4 { font-size: var(--text-xl); }

.hv4 p {
	margin: 0 0 var(--space-5);
}

.hv4 p:last-child,
.hv4 ul:last-child,
.hv4 ol:last-child {
	margin-bottom: 0;
}

.hv4 a {
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.hv4 a:hover,
.hv4 a:focus {
	color: var(--color-link-hover);
	text-decoration: underline;
}

.hv4 strong,
.hv4 b {
	font-weight: 700;
	color: var(--gray-800);
}

.hv4 em {
	font-style: italic;
}

.hv4 img,
.hv4 picture,
.hv4 iframe,
.hv4 svg {
	max-width: 100%;
	display: block;
}

.hv4 img {
	height: auto;
}

.hv4 ul,
.hv4 ol {
	margin: 0 0 var(--space-5);
	padding-left: 1.35em;
}

/* :where() is deliberate here, and is the opposite case to the overrides
   elsewhere in this file that must NOT use it. This is a base default: at
   0-1-2 it was out-specifying every component's own `li { margin-top: 0 }`
   reset (0-1-1), so the footer links, the step cards and the numbered options
   all had every item after the first nudged down by half a rem. Wrapping it in
   :where() drops it to 0-1-0 so components win, which is how a default should
   behave. */
.hv4 :where(li + li) {
	margin-top: var(--space-2);
}

.hv4 :where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--navy-400);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* `.hv4` prefixed for the same reason as the buttons: the skip link is an <a>,
   and at 0-1-0 it lost its white label to `.hv4 a` / `.hv4 a:focus`. */
.hv4 .hv4-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: var(--space-3) var(--space-5);
	background: var(--navy-900);
	color: #fff;
	border-radius: 0 0 var(--radius) 0;
}

.hv4 .hv4-skip:focus {
	left: 0;
	color: #fff;
}


/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.hv4-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hv4-container--narrow {
	max-width: var(--container-narrow);
}

.hv4-band {
	padding-block: var(--band);
}

.hv4-band--tight {
	padding-block: calc(var(--band) * 0.62);
}

/* Alternating surfaces give the page structure without boxing every
   section. Kept to three: white, tinted, deep navy. */
.hv4-band--alt {
	background: var(--gray-50);
}

.hv4-band--dark {
	background:
		radial-gradient(120% 140% at 12% 0%, var(--navy-700) 0%, transparent 55%),
		linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 100%);
	color: var(--navy-100);
}

/* NOTE ON SPECIFICITY: these inversions must out-specify the base type rules
   in section 3 (`.hv4 h1, .hv4 h2, ...`, which is 0-1-1). An earlier version
   used `:where(h1, h2, h3, h4)` here, :where() contributes zero specificity,
   so the base rule won and every heading on a dark band rendered near-black
   on navy. Keep the `.hv4` prefix: it makes these 0-2-1 and unambiguous. */
.hv4 .hv4-band--dark h1,
.hv4 .hv4-band--dark h2,
.hv4 .hv4-band--dark h3,
.hv4 .hv4-band--dark h4 {
	color: #fff;
}

.hv4 .hv4-band--dark strong {
	color: #fff;
}

.hv4-band--dark a {
	color: var(--navy-200);
}

.hv4-band--dark a:hover {
	color: #fff;
}

/* Hairline between two consecutive light bands so they don't merge. */
.hv4-band--ruled {
	border-top: 1px solid var(--color-border);
}

.hv4-grid {
	display: grid;
	gap: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
}

@media (min-width: 40rem) {
	.hv4-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hv4-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* --3 previously went straight from one column to three at 60rem. That was
	   survivable with three cards; with six it left a very tall single-file
	   stack on every tablet. Two columns in between keeps the result block
	   scannable there, and six divides evenly into two as well as three. */
	.hv4-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
	.hv4-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hv4-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hv4-prose {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

.hv4-prose > :first-child {
	margin-top: 0;
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.hv4-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.95em 1.9em;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast),
	            border-color var(--transition-fast),
	            color var(--transition-fast),
	            box-shadow var(--transition-fast),
	            transform var(--transition-fast);
}

.hv4-btn:hover,
.hv4-btn:focus {
	text-decoration: none;
	transform: translateY(-1px);
}

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

/* NOTE ON SPECIFICITY: every button is an <a>, so these colour rules compete
   with `.hv4 a` (0-1-1) from section 3. A bare `.hv4-btn--buy` is only 0-1-0
   and loses, which rendered the gold button's label in link blue instead of
   near-black. The `.hv4` prefix makes these 0-2-0 / 0-3-0 and wins. */

/* The single money button. Gold, as on the legacy pricing graphics, with a
   near-black navy label for maximum contrast against the gold. */
.hv4 .hv4-btn--buy {
	background: var(--gold-500);
	border-color: var(--gold-600);
	color: var(--navy-900);
	box-shadow: 0 6px 16px rgba(217, 154, 16, 0.32);
}

.hv4 .hv4-btn--buy:hover,
.hv4 .hv4-btn--buy:focus {
	background: var(--gold-400);
	border-color: var(--gold-700);
	color: var(--navy-900);
	box-shadow: 0 10px 22px rgba(217, 154, 16, 0.4);
}

.hv4 .hv4-btn--primary {
	background: var(--navy-500);
	border-color: var(--navy-600);
	color: #fff;
	box-shadow: 0 6px 16px rgba(18, 55, 96, 0.24);
}

.hv4 .hv4-btn--primary:hover,
.hv4 .hv4-btn--primary:focus {
	background: var(--navy-600);
	color: #fff;
}

.hv4 .hv4-btn--ghost {
	background: transparent;
	border-color: var(--gray-300);
	color: var(--navy-700);
}

.hv4 .hv4-btn--ghost:hover,
.hv4 .hv4-btn--ghost:focus {
	background: var(--gray-50);
	border-color: var(--navy-400);
	color: var(--navy-800);
}

/* On the navy bands the ghost button needs the inverse treatment. */
.hv4 .hv4-band--dark .hv4-btn--ghost,
.hv4 .hv4-photoband .hv4-btn--ghost,
.hv4 .hv4-hero .hv4-btn--ghost {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.hv4 .hv4-band--dark .hv4-btn--ghost:hover,
.hv4 .hv4-band--dark .hv4-btn--ghost:focus,
.hv4 .hv4-photoband .hv4-btn--ghost:hover,
.hv4 .hv4-photoband .hv4-btn--ghost:focus,
.hv4 .hv4-hero .hv4-btn--ghost:hover,
.hv4 .hv4-hero .hv4-btn--ghost:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

.hv4-btn--lg {
	padding: 1.05em 2.4em;
	font-size: var(--text-lg);
}

.hv4-btn--block {
	display: flex;
	width: 100%;
}

/* Standalone call-to-action row that recurs down the page. */
.hv4-cta {
	margin-top: var(--space-10);
	text-align: center;
}

.hv4-cta__note {
	margin: var(--space-4) 0 0;
	color: var(--color-muted);
	font-size: var(--text-sm);
}

.hv4-band--dark .hv4-cta__note {
	color: var(--navy-200);
}


/* ==========================================================================
   5. SECTION HEADERS
   ========================================================================== */

.hv4-head {
	max-width: 46rem;
	margin: 0 auto clamp(2rem, 1.4rem + 2vw, 3.25rem);
	text-align: center;
}

.hv4-head--left {
	margin-inline: 0;
	text-align: left;
}

.hv4-head > :last-child {
	margin-bottom: 0;
}

.hv4-eyebrow {
	display: inline-block;
	margin-bottom: var(--space-4);
	padding: 0.4em 1em;
	border-radius: var(--radius-full);
	background: var(--navy-50);
	color: var(--navy-600);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hv4-band--dark .hv4-eyebrow {
	background: rgba(255, 255, 255, 0.1);
	color: var(--navy-100);
}

.hv4-lead {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-xl);
	line-height: var(--leading-normal);
	text-wrap: pretty;
}

/* Leads may stack when one paragraph would be an unreadable slab. `.hv4-lead`
   zeroes its own margin so `.hv4-head > :last-child` can flatten the bottom,
   which means a stacked pair has to have the gap put back explicitly.
   Two classes (0,2,0) so this survives `.hv4 p` (0,1,1). */
.hv4-lead + .hv4-lead {
	margin-top: var(--space-5);
}

.hv4-band--dark .hv4-lead {
	color: var(--navy-200);
}


/* ==========================================================================
   6. SITE HEADER & NAV
   ========================================================================== */

.hv4-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid transparent;
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	transition: box-shadow var(--transition), border-color var(--transition);
}

.hv4-header.is-stuck {
	border-bottom-color: var(--color-border);
	box-shadow: var(--shadow-sm);
}

/* `flex-wrap` is load-bearing, not decoration. Below 60rem the nav becomes
   `flex: 1 0 100%` so it can drop onto its own row beneath the brand and the
   buy button. Without wrap it has nowhere to drop to: opening the menu leaves
   a 100%-basis, non-shrinking item on the same flex line as everything else,
   which both hides the links and blows the header past the viewport. */
.hv4-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Column gap only. The dropped nav row brings its own border-top and
	   padding-top, so a row gap here would double the space above it. */
	gap: 0 var(--space-4);
	min-height: var(--header-h);
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--space-2) var(--gutter);
}

.hv4-brand {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.hv4-brand img {
	width: 200px;
	max-width: 46vw;
	height: auto;
}

.hv4-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.hv4-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(0.35rem, 0.1rem + 0.8vw, 1.15rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hv4-nav li + li {
	margin-top: 0;
}

.hv4-nav a {
	display: block;
	padding: var(--space-2) var(--space-2);
	color: var(--gray-700);
	font-size: var(--text-sm);
	font-weight: 600;
	white-space: nowrap;
}

.hv4-nav a:hover,
.hv4-nav a:focus {
	color: var(--navy-600);
	text-decoration: none;
}

.hv4-header .hv4-btn {
	flex: 0 0 auto;
	padding: 0.7em 1.35em;
	font-size: var(--text-sm);
}

.hv4-navtoggle {
	display: none;
	flex: 0 0 auto;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--navy-800);
	cursor: pointer;
}

.hv4-navtoggle__bars,
.hv4-navtoggle__bars::before,
.hv4-navtoggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition-fast);
}

.hv4-navtoggle__bars::before,
.hv4-navtoggle__bars::after {
	content: "";
	position: relative;
}

.hv4-navtoggle__bars::before { top: -6px; }
.hv4-navtoggle__bars::after  { top: 4px; }

.hv4-navtoggle[aria-expanded="true"] .hv4-navtoggle__bars {
	background: transparent;
}

.hv4-navtoggle[aria-expanded="true"] .hv4-navtoggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.hv4-navtoggle[aria-expanded="true"] .hv4-navtoggle__bars::after {
	transform: translateY(-4px) rotate(-45deg);
}

/* Below 60rem the links collapse behind the toggle. The header CTA survives
   down to the phone breakpoint below, where it is dropped entirely. */
@media (max-width: 59.999rem) {
	.hv4-navtoggle {
		display: block;
		order: 3;
	}

	.hv4-header .hv4-btn {
		order: 2;
		margin-left: auto;
	}

	.hv4-nav {
		order: 4;
		flex: 1 0 100%;
		display: none;
		border-top: 1px solid var(--color-border);
		padding-top: var(--space-3);
		margin-top: var(--space-1);
	}

	.hv4-nav.is-open {
		display: block;
	}

	.hv4-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.hv4-nav a {
		padding: var(--space-3) var(--space-1);
		font-size: var(--text-base);
		border-bottom: 1px solid var(--gray-100);
	}

	.hv4-nav li:last-child a {
		border-bottom: 0;
	}
}

/* Phones: drop the header buy button entirely.
   The logo, the button and the toggle do not fit on one line on any phone.
   Measured against the real token values, the row needs 60 to 75px more than
   the viewport gives it from 320px all the way up to 430px, so the toggle was
   wrapping to a second line and leaving a band of dead space under the logo.
   Shrinking the logo and tightening the button could claw it back, but only by
   making both worse everywhere.

   Dropping the button costs nothing, because .hv4-stickybar is a fixed,
   full-width CTA that appears at every width once the hero scrolls away. A
   phone visitor still has a permanent buy button, just at the bottom of the
   screen instead of the top, which is the easier thumb reach anyway.

   40rem is the file's existing phone boundary. The row clears its own width at
   about 480px, so this keeps a comfortable margin rather than sitting on the
   exact crossover. */
@media (max-width: 39.999rem) {
	.hv4-header .hv4-btn {
		display: none;
	}
}


/* ==========================================================================
   7. HERO
   ========================================================================== */

.hv4-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(28rem, 22rem + 26vw, 41rem);
	padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
	background: var(--navy-900);
	color: #fff;
	overflow: hidden;
}

.hv4-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hv4-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The subject sits right-of-centre in frontsplash; anchoring right keeps
	   Steve in frame while the copy occupies the empty aisle on the left. */
	object-position: 72% center;
}

/* Two overlays: a horizontal scrim so the copy always has contrast, and a
   navy multiply wash so the photo reads as brand rather than stock. */
.hv4-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg,
			rgba(10, 32, 56, 0.94) 0%,
			rgba(10, 32, 56, 0.86) 34%,
			rgba(10, 32, 56, 0.55) 58%,
			rgba(10, 32, 56, 0.3) 100%),
		linear-gradient(0deg, rgba(14, 43, 75, 0.35), rgba(14, 43, 75, 0.35));
}

@media (max-width: 47.999rem) {
	.hv4-hero__media img {
		object-position: 68% 22%;
	}

	/* On phones the copy sits over the whole frame, so the scrim goes
	   vertical instead of horizontal. */
	.hv4-hero__media::after {
		background: linear-gradient(180deg,
			rgba(10, 32, 56, 0.78) 0%,
			rgba(10, 32, 56, 0.88) 55%,
			rgba(10, 32, 56, 0.95) 100%);
	}
}

.hv4-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hv4-hero__copy {
	max-width: 40rem;
}

.hv4-hero__flag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
	padding: 0.45em 1.1em;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Prefixed so this does not merely tie with `.hv4 h1` and depend on source
   order to win. */
.hv4 .hv4-hero h1 {
	margin-bottom: var(--space-5);
	color: #fff;
	text-shadow: 0 2px 18px rgba(10, 32, 56, 0.45);
}

.hv4-hero h1 em {
	font-style: normal;
	color: var(--gold-400);
}

.hv4-hero__sub {
	max-width: 34rem;
	margin-bottom: var(--space-8);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--text-xl);
	line-height: var(--leading-normal);
	text-wrap: pretty;
}

.hv4-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
}

.hv4-hero__reassure {
	margin: var(--space-6) 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--text-sm);
}


/* --- Photo band -----------------------------------------------------------
   A dark section that keeps one of the legacy hero photographs as a
   background instead of a flat gradient. Same overlay recipe as the hero so
   the two read as a family. */

.hv4-photoband {
	position: relative;
	isolation: isolate;
	padding-block: var(--band);
	background: var(--navy-900);
	color: var(--navy-100);
	overflow: hidden;
}

/* Same specificity requirement as the dark band above, see that note. */
.hv4 .hv4-photoband h1,
.hv4 .hv4-photoband h2,
.hv4 .hv4-photoband h3,
.hv4 .hv4-photoband h4 {
	color: #fff;
}

.hv4 .hv4-photoband strong {
	color: #fff;
}

.hv4-photoband a {
	color: var(--navy-200);
}

.hv4-photoband a:hover {
	color: #fff;
}

.hv4-photoband .hv4-lead {
	color: var(--navy-200);
}

.hv4-photoband__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hv4-photoband__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hv4-photoband__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10, 32, 56, 0.9) 0%,
		rgba(10, 32, 56, 0.93) 100%);
}

/* When the photograph has a clear subject on one side, shift the wash so the
   subject stays readable and the copy sits over the quiet half. */
.hv4-photoband--right .hv4-photoband__media img {
	object-position: 78% center;
}

@media (min-width: 56rem) {
	.hv4-photoband--right .hv4-photoband__media::after {
		background: linear-gradient(95deg,
			rgba(10, 32, 56, 0.95) 0%,
			rgba(10, 32, 56, 0.9) 45%,
			rgba(10, 32, 56, 0.62) 75%,
			rgba(10, 32, 56, 0.5) 100%);
	}

	.hv4-photoband--right .hv4-photoband__copy {
		max-width: 60%;
	}
}

/* --- Callout: the legacy inline red "result" headline, restated as a
   brand-coloured highlight rather than a bare coloured <h3>. ------------- */

.hv4-callout {
	margin: 0 0 var(--space-5);
	padding: var(--space-5) var(--space-6);
	background: var(--green-50);
	border-left: 4px solid var(--green-500);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--green-700);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: var(--leading-snug);
}

.hv4-callout--navy {
	background: var(--navy-50);
	border-left-color: var(--navy-500);
	color: var(--navy-700);
}

/* Same callout sitting on a dark band or photo band. */
.hv4-callout--invert {
	background: rgba(255, 255, 255, 0.12);
	border-left-color: var(--gold-400);
	color: #fff;
}


/* ==========================================================================
   8. PRESS / SOCIAL-PROOF STRIP  *** PARKED, NOT CURRENTLY RENDERED ***

   The markup for this was removed from home-v4.php on 2026-07-29 and lives in
   TEMP/press-logo-section.snippet.php, which carries full restore notes. These
   rules are kept because the row is expected back later.

   As written below they style WHITE knockout logos (presswhite/web/) on navy.
   For a placement on a LIGHT background instead, use the dark-ink set in
   press/web/ and change three things: background to var(--gray-50), label
   colour to var(--color-muted), and re-add filter: grayscale(1) to the images.

   Also worth revisiting on restore: the 32px max-height read as too small
   across a 1180px band.
   ========================================================================== */

.hv4-press {
	padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
	background: var(--navy-800);
	/* Hairline keeps the strip legible as its own band now that the stat
	   section below it is also dark. */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hv4-press__label {
	margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem);
	color: var(--navy-200);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
}

.hv4-press__row {
	display: grid;
	/* auto-fit lets the row reflow from seven across to two on a phone
	   without a single media query. */
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: clamp(1.25rem, 0.9rem + 1.6vw, 2.75rem);
	align-items: center;
	justify-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hv4-press__row li {
	display: grid;
	place-items: center;
	width: 100%;
	margin-top: 0;
}

/* Height-capped rather than width-capped: the marks range from 6.8:1 (NYT)
   to 1:1 (abc), so matching heights is what makes the row read as even.
   No greyscale filter is needed, the knockouts are already single-colour
   white, so only opacity is dialled back to keep the row subordinate to the
   hero directly above it. */
.hv4-press__row img {
	width: auto;
	max-width: 100%;
	max-height: clamp(1.375rem, 0.95rem + 1.5vw, 2rem);   /* 22 -> 32px */
	opacity: 0.82;
	transition: opacity var(--transition);
}

.hv4-press__row li:hover img {
	opacity: 1;
}

/* A circular mark reads visually smaller than a wordmark at equal height,
   so abc gets a proportional bump to sit level with the rest. */
.hv4-press__row img.is-mark {
	max-height: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);   /* 30 -> 44px */
}


/* ==========================================================================
   9. STAT BAND
   ========================================================================== */

.hv4-stats {
	display: grid;
	gap: var(--space-6) var(--space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

@media (min-width: 48rem) {
	.hv4-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.hv4-stats li + li {
	margin-top: 0;
}

/* White, not gold. Gold is reserved for the buy buttons, using it here too
   put four large decorative gold items in the same screen as the CTA and
   diluted it. The stats still read as the loudest thing in the band because
   of scale and weight alone. */
.hv4-stat__num {
	display: block;
	color: #fff;
	font-size: var(--text-4xl);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.hv4-stat__label {
	display: block;
	margin-top: var(--space-2);
	color: var(--navy-100);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}


/* ==========================================================================
   10. CARDS & TESTIMONIALS
   ========================================================================== */

.hv4-card {
	display: flex;
	flex-direction: column;
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}

.hv4-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.hv4-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--gray-100);
}

.hv4-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hv4-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.hv4-card__body > :last-child {
	margin-bottom: 0;
	margin-top: auto;
}

.hv4-card__result {
	margin: 0 0 var(--space-4);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.hv4-card__quote {
	margin: 0 0 var(--space-5);
	padding-left: var(--space-4);
	border-left: 3px solid var(--green-300);
	color: var(--gray-800);
	font-size: var(--text-lg);
	font-style: italic;
	line-height: var(--leading-normal);
}

.hv4-card__attrib {
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--gray-100);
	font-size: var(--text-sm);
}

.hv4-card__name {
	display: block;
	color: var(--navy-800);
	font-weight: 700;
}

.hv4-card__site {
	display: block;
	margin-top: 2px;
	color: var(--color-muted);
	word-break: break-word;
}

/* Highlight pill for a headline metric inside a card. */
.hv4-tag {
	display: inline-block;
	margin-bottom: var(--space-3);
	padding: 0.3em 0.8em;
	border-radius: var(--radius-full);
	background: var(--green-50);
	color: var(--green-700);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Plain feature card, no image, icon-led. */
.hv4-feature {
	padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	height: 100%;
}

.hv4-band--dark .hv4-feature {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}

.hv4-feature h3 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-3);
}

.hv4-feature p {
	margin-bottom: 0;
	font-size: var(--text-base);
}

.hv4-feature__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--space-4);
	border-radius: var(--radius);
	background: var(--navy-50);
	color: var(--navy-600);
}

.hv4-band--dark .hv4-feature__icon {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.hv4-feature__icon svg {
	width: 24px;
	height: 24px;
}


/* ==========================================================================
   11. MEDIA ROWS (image + prose)
   ========================================================================== */

.hv4-split {
	display: grid;
	gap: clamp(2rem, 1.4rem + 2.6vw, 4rem);
	align-items: center;
}

@media (min-width: 56rem) {
	.hv4-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.hv4-split--narrow-media {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	/* Visual first in the source, second on screen. */
	.hv4-split--flip .hv4-split__media {
		order: 2;
	}
}

.hv4-split__media img {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

/* --- Product screenshot in a browser frame -------------------------------
   Wraps a plain screenshot of the real course in fake browser chrome, so it
   reads as "this is the actual product" rather than as a stray image. The
   chrome is drawn entirely in CSS; the supplied file needs no framing. */

.hv4-shot {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--gray-100);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
}

.hv4-shot__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	background: var(--gray-100);
	border-bottom: 1px solid var(--color-border);
}

.hv4-shot__bar span {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	background: var(--gray-300);
}

/* A muted address-bar stub after the three dots. */
.hv4-shot__bar::after {
	content: "";
	flex: 1 1 auto;
	height: 12px;
	margin-left: 8px;
	border-radius: var(--radius-full);
	background: var(--gray-0);
	border: 1px solid var(--gray-200);
}

/* The image is already inside a rounded, shadowed frame, so it must not carry
   its own; that is what .hv4-split__media img above would otherwise give it.
   `.hv4` prefixed so this is 0-2-1 and beats that rule outright rather than
   merely tying with it and depending on source order. */
.hv4 .hv4-shot img {
	display: block;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
}

/* --- Continuously scrolling page shot ------------------------------------

   A single tall JPEG (600x4161) translated inside a fixed-ratio window. This
   replaces an animated GIF: to scroll the same page smoothly, GIF needs ~180
   full frames at 600x560, which measured 10MB. This is 335KB, runs at 60fps
   on the compositor, and its speed is one number rather than a re-encode.

   The window is 600x560 of a 600x4118 image, so the travel is
   -(1 - 560/4118) = -86.40% of the image's own height. Expressing it as a
   percentage keeps it correct at any rendered width. Recompute this if the
   crop changes. */

.hv4-shot__scroll {
	position: relative;
	aspect-ratio: 600 / 560;
	overflow: hidden;
	background: var(--gray-0);
}

.hv4 .hv4-shot__scroll img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	will-change: transform;
	animation: hv4-pagescroll 60s ease-in-out infinite;
}

/* Holds briefly at the top and bottom, then travels back, so the loop never
   jump-cuts. 60s over 3601px is a slow, readable crawl. */
@keyframes hv4-pagescroll {
	0%,   5%   { transform: translateY(0); }
	47%,  55%  { transform: translateY(-86.40%); }
	97%, 100%  { transform: translateY(0); }
}

/* Only for visitors who have explicitly asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.hv4 .hv4-shot__scroll img {
		animation: none;
	}
}

.hv4-split__media--plain img {
	box-shadow: none;
}

.hv4-split__body > :last-child {
	margin-bottom: 0;
}

.hv4-split__body h2 {
	margin-bottom: var(--space-5);
}


/* ==========================================================================
   12. VIDEO
   ========================================================================== */

.hv4-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--navy-900);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

/* The review wall runs three across rather than reusing .hv4-grid--2, and the
   reason is resolution, not taste. Two across gives each tile ~540 CSS px, which
   on the 2x display most visitors have is 1080 device pixels; the two 640px wide
   source clips were being blown up nearly double and it showed. Three across
   puts a tile at ~345 CSS px, so 640px of source lands on ~690 device pixels and
   is close to native. Six clips also divide evenly into three, giving two clean
   rows here and three at the two-column breakpoint. */
@media (min-width: 40rem) {
	.hv4-vidwall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
	.hv4-vidwall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Named tiles. Three of these six people appear elsewhere on the page attached
   to specific revenue figures, so the name is what lets a reader join the face
   to the number. Full first and last name on all six, no store names, matching
   how every other attribution on the page reads. `figure` has a UA margin that
   would break the grid gap, hence the reset. */
.hv4-vidcard {
	margin: 0;
}

.hv4-vidcard__name {
	margin-top: var(--space-3);
	text-align: center;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-heading);
}

/* Click-to-play overlay, injected by JS over any video that has a poster.
   Transparent and full-bleed rather than a drawn circle: the play badge is
   already composited into the poster image, so this only has to supply the
   behaviour and the cursor. Covering the whole stage, control bar included, is
   fine because it only exists while the video is stopped and is removed on the
   first play. The focus ring is the one visible affordance it needs. */
.hv4-video__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hv4-video__play:focus-visible {
	outline: 3px solid var(--gold-400);
	outline-offset: -3px;
}

/* Self hosted clips share the iframe's stage exactly, so the two kinds of embed
   are interchangeable in any grid. `contain` letterboxes anything that is not
   16:9 onto the navy backdrop instead of cropping a talking head, which is the
   same thing the YouTube player did with this footage. */
.hv4-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: var(--navy-900);
}

.hv4-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hv4-video__caption {
	margin: var(--space-4) 0 0;
	color: var(--color-muted);
	font-size: var(--text-sm);
	text-align: center;
}

.hv4-band--dark .hv4-video__caption {
	color: var(--navy-200);
}


/* ==========================================================================
   13. STEPS
   ========================================================================== */

.hv4-steps {
	display: grid;
	gap: clamp(1.25rem, 0.9rem + 1.6vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hv4step;
}

@media (min-width: 40rem) {
	.hv4-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.hv4-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The AI step is a fifth item in a grid that resolves to two and then four
   columns, so left alone it strands one card in the final row. Squeezing the
   track count to five is not the answer either: at this container width five
   columns leave roughly 150px of text per card. It spans the full row instead,
   which also happens to be the honest description of it, since automation
   applies across the other four steps rather than following them.
   Declared at 40rem so it covers both the two- and four-column cases; below
   that the grid is a single column and the span is already implicit. */
@media (min-width: 40rem) {
	.hv4-steps .hv4-steps__capstone {
		grid-column: 1 / -1;
	}
}

/* A full-bleed card would otherwise give this one paragraph a line length
   nothing else on the page has. Load-bearing between 40rem and 64rem, where the
   card already spans both columns but the art has not yet moved alongside it.
   (0,2,1) so it clears `.hv4 p` at (0,1,1). */
.hv4 .hv4-steps__capstone p {
	max-width: 52rem;
}

/* Stacked by default, side by side once there is room. */
.hv4-steps__art {
	max-width: 20rem;
	margin: var(--space-5) auto 0;
}

/* The card itself becomes the grid, rather than a wrapper inside it, so that
   the step number (the li's ::before) is a grid item too. That is what lets the
   diagram start level with the number instead of below it, and it takes the
   number's 40px plus its margin off the card's total height.
   Explicit placement, not auto-flow: ::before and the copy stack in column one,
   the art spans both of their rows in column two. */
@media (min-width: 64rem) {
	.hv4-steps li.hv4-steps__capstone {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
		column-gap: clamp(1.5rem, 0.5rem + 2vw, 3rem);
		align-items: start;
	}

	.hv4-steps__capstone::before {
		grid-column: 1;
		grid-row: 1;
	}

	.hv4-steps__capstone-body {
		grid-column: 1;
		grid-row: 2;
	}

	.hv4-steps__art {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		max-width: none;
		margin: 0;
	}
}

/* Automation diagram. Every colour comes from the brand ramp, so the drawing
   follows the palette rather than pinning its own hexes. */
.hv4-aiflow {
	width: 100%;
	height: auto;
}

.hv4-aiflow__wires path {
	fill: none;
	stroke: var(--navy-200);
	stroke-width: 2;
	stroke-dasharray: 5 6;
	stroke-linecap: round;
}

.hv4-aiflow__tasks rect {
	fill: var(--navy-50);
	stroke: var(--navy-100);
	stroke-width: 1.5;
}

.hv4-aiflow__glyphs circle { fill: var(--navy-300); }
.hv4-aiflow__glyphs rect   { fill: var(--navy-200); }
.hv4-aiflow__hub           { fill: var(--navy-600); }
.hv4-aiflow__spark         { fill: var(--gold-400); }

/* The label is positioned by a plain `y` plus text-anchor rather than
   dominant-baseline, which Safari has historically got wrong on SVG text.
   y = hub centre 140 + roughly 0.35em of the 38px size. */
.hv4-aiflow__label {
	fill: #fff;
	font-family: var(--font-sans);
	font-size: 38px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.hv4-steps li {
	position: relative;
	margin-top: 0;
	padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	counter-increment: hv4step;
}

.hv4-steps li::before {
	content: counter(hv4step);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--space-4);
	border-radius: var(--radius-full);
	background: var(--navy-500);
	color: #fff;
	font-size: var(--text-lg);
	font-weight: 800;
	line-height: 1;
}

.hv4-steps h3 {
	font-size: var(--text-lg);
	margin-bottom: var(--space-2);
}

.hv4-steps p {
	margin: 0;
	font-size: var(--text-base);
}

/* Platform qualifier under the four steps. Step 4 names Shopify because that is
   the vernacular buyers actually search for, but the course is not tied to it;
   this line says so without competing with the steps themselves.
   Two classes (0,2,0) so it out-specifies `.hv4 p` (0,1,1), which would
   otherwise reclaim the margin and kill the centring. */
.hv4 .hv4-steps__note {
	max-width: 46rem;
	margin: var(--space-8) auto 0;
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-muted);
}


/* ==========================================================================
   14. CHECKLISTS
   ========================================================================== */

.hv4-check {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hv4-check li {
	position: relative;
	margin-top: 0;
	padding-left: 2.1rem;
	line-height: var(--leading-normal);
}

.hv4-check li + li {
	margin-top: var(--space-4);
}

/* Inline SVG tick as a mask so it inherits the accent colour and needs no
   icon font (the page loads none). */
.hv4-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.22em;
	width: 1.3rem;
	height: 1.3rem;
	background-color: var(--green-500);
	-webkit-mask: var(--hv4-tick) center / contain no-repeat;
	mask: var(--hv4-tick) center / contain no-repeat;
}

.hv4 {
	--hv4-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 .5A9.5 9.5 0 1 0 19.5 10A9.51 9.51 0 0 0 10 .5Zm4.72 7.3-5.5 5.5a1 1 0 0 1-1.42 0L5.28 10.8a1 1 0 0 1 1.42-1.42l1.81 1.82 4.79-4.8a1 1 0 0 1 1.42 1.42Z'/%3E%3C/svg%3E");
}

.hv4-band--dark .hv4-check li::before {
	background-color: var(--green-300);
}

.hv4-check--split {
	columns: 1;
}

@media (min-width: 56rem) {
	.hv4-check--split {
		columns: 2;
		column-gap: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	}

	.hv4-check--split li {
		break-inside: avoid;
	}
}

/* Outcome list: bolded lead-in phrase then explanation. */
.hv4-outcomes li strong {
	display: block;
	margin-bottom: var(--space-1);
	color: #fff;
	font-size: var(--text-lg);
}


/* ==========================================================================
   15. ACCORDIONS (FAQ + curriculum)
   ========================================================================== */

.hv4-acc {
	display: grid;
	gap: var(--space-4);
}

.hv4-acc__item {
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	transition: box-shadow var(--transition), border-color var(--transition);
}

.hv4-acc__item[open] {
	border-color: var(--navy-200);
	box-shadow: var(--shadow);
}

.hv4-acc__item > summary {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: clamp(1rem, 0.85rem + 0.6vw, 1.4rem) clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
	cursor: pointer;
	list-style: none;
	color: var(--navy-900);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: var(--leading-snug);
	transition: background-color var(--transition-fast);
}

.hv4-acc__item > summary::-webkit-details-marker {
	display: none;
}

.hv4-acc__item > summary:hover {
	background: var(--gray-50);
}

.hv4-acc__n {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-full);
	background: var(--navy-50);
	color: var(--navy-600);
	font-size: var(--text-sm);
	font-weight: 800;
	line-height: 1;
}

.hv4-acc__item[open] .hv4-acc__n {
	background: var(--navy-500);
	color: #fff;
}

.hv4-acc__q {
	flex: 1 1 auto;
	text-wrap: pretty;
}

/* Chevron drawn in CSS, rotates when the item opens. Sits on a filled disc so
   the row reads as an expandable control rather than a static heading, which
   is easy to miss on a wide row. */
.hv4-acc__chev {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-full);
	background: var(--gray-100);
	transition: background-color var(--transition);
}

.hv4-acc__chev::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2.5px solid var(--gray-600);
	border-bottom: 2.5px solid var(--gray-600);
	transform: rotate(45deg) translate(-0.09em, -0.09em);
	transition: transform var(--transition), border-color var(--transition);
}

.hv4-acc__item > summary:hover .hv4-acc__chev {
	background: var(--navy-100);
}

.hv4-acc__item[open] .hv4-acc__chev {
	background: var(--navy-500);
}

.hv4-acc__item[open] .hv4-acc__chev::before {
	border-color: #fff;
	transform: rotate(-135deg) translate(-0.09em, -0.09em);
}

.hv4-acc__panel {
	padding: 0 clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem) clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

/* Indent the panel to line up under the question text, not the number. */
@media (min-width: 40rem) {
	.hv4-acc__panel {
		padding-left: calc(clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem) + 2.25rem + var(--space-4));
	}
}

.hv4-acc__panel > :last-child {
	margin-bottom: 0;
}

/* Student story nested inside an FAQ panel. */
.hv4-story {
	margin-top: var(--space-8);
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	background: var(--gray-50);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.hv4-story > :last-child {
	margin-bottom: 0;
}

.hv4-story h3 {
	font-size: var(--text-lg);
	margin-bottom: var(--space-4);
}

.hv4-story__media {
	margin: 0 0 var(--space-5);
}

.hv4-story__media img {
	width: 100%;
	border-radius: var(--radius-sm);
}

.hv4-story blockquote {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-5);
	border-left: 3px solid var(--navy-300);
	color: var(--gray-700);
	font-size: var(--text-base);
	font-style: italic;
}

.hv4-story blockquote p:last-child {
	margin-bottom: 0;
}

.hv4-story__attrib {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--navy-800);
	font-style: normal;
}

/* Store URLs are rendered as plain text, never as links, so visitors are not
   sent off to a third-party store mid-pitch. Lighter than the student's name
   so the two still read as separate pieces of information. */
.hv4-story__site {
	font-weight: 400;
	color: var(--color-muted);
}

.hv4-story__site::before {
	content: " \00b7  ";
	color: var(--gray-300);
}

/* Curriculum module rows reuse the accordion, with an icon in place of the
   numeral. */
/* Inline SVG line icons, not images. They inherit `color`, so the icon simply
   flips to white when the row opens rather than needing a second asset. */
.hv4-mod__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius);
	background: var(--navy-50);
	color: var(--navy-600);
	transition: background-color var(--transition), color var(--transition);
}

.hv4-mod__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.hv4-acc__item[open] .hv4-mod__icon {
	background: var(--navy-500);
	color: #fff;
}

.hv4-mod__label {
	flex: 1 1 auto;
}

.hv4-mod__label span {
	display: block;
	margin-bottom: 2px;
	color: var(--navy-500);
	font-size: var(--text-sm);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Matches the FAQ accordion's question size. It previously sat a step smaller,
   which made a full-width row of module titles read as secondary text. */
.hv4-mod__label strong {
	display: block;
	color: var(--navy-900);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: var(--leading-snug);
	text-wrap: pretty;
}

@media (min-width: 40rem) {
	.hv4-acc__item--mod .hv4-acc__panel {
		padding-left: calc(clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem) + 3rem + var(--space-4));
	}
}


/* ==========================================================================
   16. PODCAST LIST
   ========================================================================== */

.hv4-pods {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 56rem) {
	.hv4-pods {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4) clamp(1.5rem, 1rem + 2vw, 2.5rem);
	}
}

.hv4-pod {
	padding: var(--space-4);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius);
}

.hv4-pod iframe {
	width: 100%;
	height: 90px;
	border: 0;
	display: block;
}


/* ==========================================================================
   17. PRICING
   ========================================================================== */

.hv4-plans {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 2rem);
	align-items: start;
}

@media (min-width: 52rem) {
	.hv4-plans {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hv4-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem) clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	text-align: center;
}

/* The recommended plan is lifted rather than recoloured, louder without
   turning the row into a traffic light. */
.hv4-plan--featured {
	border-color: var(--navy-400);
	border-width: 2px;
	box-shadow: var(--shadow-lg);
}

@media (min-width: 52rem) {
	.hv4-plan--featured {
		transform: scale(1.035);
		z-index: 1;
	}
}

.hv4-plan__flag {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.4em 1.1em;
	border-radius: var(--radius-full);
	background: var(--navy-500);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hv4-plan__name {
	margin: 0 0 var(--space-3);
	color: var(--gray-600);
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.hv4-plan__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.1em;
	color: var(--navy-600);
	font-size: clamp(2.75rem, 2rem + 3vw, 3.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.hv4-plan__price sup {
	top: -0.05em;
	font-size: 0.45em;
	font-weight: 700;
}

.hv4-plan__per {
	font-size: 0.32em;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--gray-500);
}

.hv4-plan__terms {
	margin: var(--space-3) 0 0;
	color: var(--color-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

.hv4-plan__rule {
	height: 1px;
	margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0;
	border: 0;
	background: var(--color-border);
}

.hv4-plan .hv4-check {
	flex: 1 1 auto;
	text-align: left;
	font-size: var(--text-base);
}

.hv4-plan .hv4-check li + li {
	margin-top: var(--space-3);
}

/* Perks unique to the deluxe tier get the navy tick to set them apart. */
.hv4-plan .hv4-check li.is-bonus {
	font-weight: 700;
	color: var(--navy-800);
}

.hv4-plan .hv4-check li.is-bonus::before {
	background-color: var(--navy-500);
}

.hv4-plan__action {
	margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.hv4-plans__note {
	margin: clamp(2rem, 1.5rem + 1.6vw, 2.75rem) auto 0;
	max-width: 44rem;
	color: var(--color-muted);
	font-size: var(--text-sm);
	text-align: center;
}

/* Wide "what's in the package" panel under the plans. */
.hv4-package {
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   18. GUARANTEE
   ========================================================================== */

.hv4-guarantee {
	display: grid;
	gap: clamp(1.75rem, 1.3rem + 2vw, 3rem);
	align-items: center;
	padding: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
	background: var(--green-50);
	border: 1px solid var(--green-100);
	border-radius: var(--radius-xl);
}

@media (min-width: 48rem) {
	.hv4-guarantee {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

/* `grid-template-columns: minmax(0, 1fr)` is load-bearing. With a bare
   `place-items: center` the children size to max-content, so the uppercase
   letter-spaced "DAY GUARANTEE" was wider than the circle and spilled out of
   it. Constraining the column forces it to wrap inside the padding instead. */
.hv4-guarantee__seal {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	justify-items: center;
	gap: 1px;
	width: clamp(7.5rem, 6rem + 4.5vw, 10rem);
	aspect-ratio: 1;
	padding: var(--space-4);
	margin-inline: auto;
	border: 3px solid var(--green-500);
	border-radius: var(--radius-full);
	background: var(--gray-0);
	color: var(--green-700);
	text-align: center;
	line-height: 1.1;
	box-shadow: var(--shadow-sm);
}

.hv4-guarantee__seal b {
	display: block;
	color: var(--green-700);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	font-weight: 800;
}

.hv4-guarantee__seal span {
	display: block;
	max-width: 100%;
	font-size: var(--text-xs);
	font-weight: 700;
	/* Tighter than the page's other uppercase labels: at this size inside a
	   circle, wide tracking is what pushed the words past the border. */
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hv4-guarantee__body > :last-child {
	margin-bottom: 0;
}

.hv4-guarantee__body h2 {
	margin-bottom: var(--space-4);
}


/* ==========================================================================
   19. CLOSING / DECISION
   ========================================================================== */

.hv4-options {
	display: grid;
	gap: var(--space-4);
	margin: 0 0 var(--space-8);
	padding: 0;
	list-style: none;
	counter-reset: hv4opt;
}

.hv4-options li {
	margin-top: 0;
	padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem) clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem)
	         clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem) clamp(3.4rem, 3rem + 1.4vw, 4rem);
	position: relative;
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--gray-300);
	border-radius: var(--radius);
	counter-increment: hv4opt;
}

.hv4-options li::before {
	content: counter(hv4opt);
	position: absolute;
	left: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem);
	top: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-full);
	background: var(--gray-100);
	color: var(--gray-600);
	font-size: var(--text-sm);
	font-weight: 800;
	line-height: 1;
}

.hv4-options li:last-child {
	border-left-color: var(--green-500);
	background: var(--green-50);
}

.hv4-options li:last-child::before {
	background: var(--green-500);
	color: #fff;
}

.hv4-options p {
	margin: 0;
}

.hv4-options strong {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--navy-900);
}

.hv4-sig {
	margin: var(--space-8) 0 0;
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
}

.hv4-sig strong {
	display: block;
	font-size: var(--text-lg);
	color: var(--navy-900);
}

.hv4-sig span {
	color: var(--color-muted);
	font-size: var(--text-sm);
}

/* Screenshot stack (the "does the class work?" comment captures). */
.hv4-shots {
	display: grid;
	gap: var(--space-4);
	max-width: 720px;
	margin-inline: auto;
}

.hv4-shots img {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-xs);
}

/* Closing sign-off: cutout of Steve beside the final paragraphs and signature.
   align-items: end so he stands on the same baseline as the bottom of the
   signature rather than floating against the top of the text. */
.hv4-signoff {
	display: grid;
	gap: var(--space-6);
	margin-top: var(--space-8);
}

@media (min-width: 40rem) {
	.hv4-signoff {
		grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
		gap: var(--space-8);
		align-items: end;
	}
}

/* NOTE ON SPECIFICITY: `.hv4` prefixed to (0,2,1) so it beats the generic
   `.hv4-split__media img` style of rule and any base image radius or shadow. A
   cutout must carry neither: a rounded corner or a drop shadow on a transparent
   PNG draws a box around thin air. */
.hv4 .hv4-signoff__photo img {
	display: block;
	width: 100%;
	max-width: 14rem;
	height: auto;
	margin-inline: auto;
	border-radius: 0;
	box-shadow: none;
}

/* Points ladder.
   Two lists of "value -> what it buys". The point figure is the visual anchor, so
   it gets a fixed-width gold slot; without the fixed width the numbers ragged out
   between 100 and 4000 and the rows stopped scanning as a ladder. */
.hv4-ladder__head {
	margin: 0 0 var(--space-4);
	font-size: var(--text-lg);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.hv4-ladder {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2);
}

/* NOTE ON SPECIFICITY: (0,2,0) to beat `.hv4 :where(li + li)` at (0,1,0), whose
   margin would stack on top of the grid gap. */
.hv4-ladder li {
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

/* Gold chips for the rewards, navy for the earning actions. Gold because this
   section is about prizes, and because it is the only warm colour in the palette
   on an otherwise relentlessly blue page; it is also the legacy Buy Now colour,
   so the reward glyphs quietly rhyme with the conversion buttons.

   navy-900 on gold-500 measures 8.76:1. White on gold would be 1.88:1 and fail
   outright, which is why the glyph is dark. */
.hv4-ladder__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-sm);
	background: var(--gold-500);
	color: var(--navy-900);
}

.hv4-ladder__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* The earn column is the smaller claim, so it gets the cooler chip. If both sides
   were gold the reward list would stop being the thing your eye lands on. */
.hv4-ladder--earn .hv4-ladder__icon {
	background: var(--navy-50);
	color: var(--navy-600);
}

.hv4-ladder__t {
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--gray-800);
}

/* NOTE ON SPECIFICITY: `.hv4` prefixed, giving (0,2,0). It has to beat the base
   paragraph rule `.hv4 p { margin: 0 0 var(--space-5) }` at (0,1,1), which
   otherwise wins on specificity and resets margin-inline to 0. The block then
   sits flush left inside a wider container while its text stays centred, so the
   line looks off-centre without anything obviously wrong in the markup. This also
   has to out-specify `.hv4-measure--wide` (0,1,0), which supplies the max-width
   but loses its own `margin-inline: auto` to the same base rule. */
.hv4 .hv4-rewards__note {
	max-width: 52rem;
	margin: var(--space-10) auto 0;
	text-align: center;
	font-weight: 600;
	color: var(--color-heading);
}

/* Navy stage for the SteveBot screenshot.
   The screenshot is black text, blue links and one green button on white, and
   cropping out the joke photo took away its only large block of colour. Tinting
   the image would misrepresent the product, so the colour goes around it. Same
   gradient as .hv4-band--dark, so it reads as part of the page rather than as a
   new device. */
.hv4-botstage {
	padding: clamp(0.875rem, 0.5rem + 1.6vw, 1.75rem);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(120% 140% at 15% 0%, var(--navy-600) 0%, transparent 55%),
		linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
	box-shadow: var(--shadow-lg);
}

/* Blue title bar, scoped to .hv4-botstage so the shared frame used by the
   course-library scroll further up the page keeps its neutral grey chrome.
   navy-500 is close to the real member-area nav bar that was cropped off the top
   of this screenshot, so this reads as the product, not as decoration. */
.hv4-botstage .hv4-shot__bar {
	background: var(--navy-500);
	border-bottom-color: var(--navy-600);
}

.hv4-botstage .hv4-shot__bar span {
	background: rgba(255, 255, 255, 0.55);
}

/* The shared frame draws a blank white pill here as a fake address bar. Inside
   the bot stage a real label takes its place. */
.hv4-botstage .hv4-shot__bar::after {
	display: none;
}

/* NOTE ON SPECIFICITY: (0,3,0), needed to beat `.hv4-shot__bar span` at (0,1,1),
   which would otherwise render this label as a fourth 10px dot. */
.hv4-botstage .hv4-shot__bar .hv4-shot__url {
	flex: 1 1 auto;
	width: auto;
	height: auto;
	margin-left: 8px;
	padding: 3px 10px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.5;
	text-align: center;
}

/* Green, because it picks up the "Ask SteveBot!" button inside the screenshot
   and ties the two together. */
.hv4-botstage__cap {
	margin: var(--space-4) 0 var(--space-1);
	text-align: center;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--green-300);
}

/* Example questions for SteveBot. Styled as asked questions rather than as a
   checklist: the leading quote mark and italic say "someone typed this", which a
   checkmark bullet would not. */
.hv4-asks {
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-3);
}

/* NOTE ON SPECIFICITY: (0,2,0) to beat `.hv4 :where(li + li)` at (0,1,0), whose
   margin would stack on top of the grid gap. */
.hv4-asks li {
	margin-top: 0;
	position: relative;
	padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-style: italic;
	color: var(--gray-800);
}

.hv4-asks li::before {
	content: "\201C";
	position: absolute;
	left: var(--space-4);
	top: 0.35em;
	font-size: 1.5em;
	font-style: normal;
	line-height: 1;
	color: var(--navy-300);
}

/* Captioned image. The caption is not decoration here: it is what stops the
   Sellers Summit photo from implying the members group is an in-person thing. */
.hv4-figure {
	margin: 0;
}

.hv4-figure img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.hv4-figure figcaption {
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-muted);
	text-align: center;
}

/* Introductions thread (members group section).
   A designed conversation in the page's own palette, not a screenshot of a chat
   app. Screenshots of Facebook and then Discord both dated this section and both
   leaked a member count far below the 6,000+ claimed elsewhere on the page. */
.hv4-thread {
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.hv4-thread__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--gray-50);
	border-bottom: 1px solid var(--color-border);
}

.hv4-thread__label {
	font-weight: 700;
	color: var(--color-heading);
}

/* A hash rather than the platform's own mark: reads as "a channel" without
   tying the graphic to any one product. */
.hv4-thread__label::before {
	content: "#";
	margin-right: 0.15em;
	color: var(--gray-400);
}

.hv4-thread__meta {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--green-600);
}

.hv4-thread__list {
	margin: 0;
	padding: var(--space-2) 0;
	list-style: none;
}

.hv4-msg {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
}

/* NOTE ON SPECIFICITY: (0,2,0) so it beats `.hv4 :where(li + li)` at (0,1,0),
   which would add a stray gap between messages on top of their padding. */
.hv4-thread__list .hv4-msg {
	margin-top: 0;
}

.hv4-msg + .hv4-msg {
	border-top: 1px solid var(--gray-100);
}

/* Initial in a tinted disc, so no avatar images are needed. Cycling four tints
   keeps the column from reading as a single block of colour. */
.hv4-msg__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-full);
	background: var(--navy-500);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1;
}

.hv4-msg:nth-child(4n + 2) .hv4-msg__avatar { background: var(--green-500); }
.hv4-msg:nth-child(4n + 3) .hv4-msg__avatar { background: var(--navy-400); }
.hv4-msg:nth-child(4n + 4) .hv4-msg__avatar { background: var(--gray-500); }

.hv4-msg__body {
	min-width: 0;
}

.hv4-msg__who {
	margin: 0 0 var(--space-1);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-heading);
}

.hv4-msg__what {
	font-weight: 400;
	color: var(--color-muted);
}

.hv4-msg__what::before {
	content: " \00b7 ";
	color: var(--gray-300);
}

.hv4-msg__text {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text);
}


/* Student pull-quote cards ("does the course really work?").
   Grid, not the flex-wrap used by .hv4-experts: equal-height rows are what make
   the bottom-anchored attribution line up, and 1fr columns give the cards more
   width for a large headshot. At this max-width it resolves to 3 across, so the
   twelve students fill four complete rows with no short final row. */
.hv4-quotes {
	display: grid;
	/* `min(18rem, 100%)` rather than a bare 18rem: an auto-fit track floors at
	   its minimum even when the container is narrower, so on a 320px phone the
	   288px track would push the grid past the viewport. min() collapses the
	   floor to the container on those screens and is a no-op everywhere else,
	   so the 3-across desktop maths is untouched. */
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--space-5);
	max-width: 1140px;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

/* NOTE ON SPECIFICITY: (0,2,0) so it beats the `.hv4 :where(li + li)` base
   default at (0,1,0), which would otherwise nudge every card but the first. */
.hv4-quotes .hv4-quote {
	margin-top: 0;
}

.hv4-quote {
	flex: 0 1 21rem;
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	background: var(--gray-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition);
}

.hv4-quote:hover {
	box-shadow: var(--shadow);
}

/* Identity leads the card. This block is deliberately a FIXED height: the photo
   is 6.5rem and the text column beside it tops out at roughly 5rem (two-line
   name plus two-line domain), so the photo always wins and every card's header
   measures the same. That is what keeps the quotes below on a common baseline.
   Adding a third text line here would break it. */
.hv4-quote__who {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.hv4-quote__text {
	margin: 0;
	padding-left: var(--space-4);
	border-left: 3px solid var(--green-300);
	color: var(--gray-800);
	font-size: var(--text-base);
	font-style: italic;
	line-height: var(--leading-normal);
}

/* NOTE ON SPECIFICITY: (0,2,0), to out-specify the `.hv4 img` defaults.
   6.5rem matches the expert headshots, and is double the 3.25rem this started
   at. Going much past this crowds the quote at 3 columns; a genuinely large
   face wants a 2-column grid instead. */
.hv4-quotes .hv4-quote__photo {
	width: 6.5rem;
	height: 6.5rem;
	flex: none;
	border-radius: var(--radius-full);
	object-fit: cover;
	background: var(--gray-100);
	box-shadow: 0 0 0 3px var(--gray-100);
}

.hv4-quote__id {
	min-width: 0;
}

.hv4-quote__name {
	display: block;
	font-weight: 700;
	color: var(--color-heading);
	line-height: var(--leading-snug);
}

.hv4-quote__site {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-muted);
	overflow-wrap: anywhere;
}

/* Expert line-up.
   Flex rather than grid, and deliberately flex-GROW: 0, so every card keeps the
   same width, so the eight of them wrap into two centred rows of four instead of
   a short last row stretching to fill. Change the basis, not the grow, to
   retune; the layout stays correct at any number of experts. */
.hv4-experts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-5);
	max-width: 1120px;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

/* NOTE ON SPECIFICITY: (0,2,0) so it beats the `.hv4 :where(li + li)` base
   default at (0,1,0). Without this every card after the first is nudged down
   half a rem and the rows stop lining up. */
.hv4-experts .hv4-expert {
	margin-top: 0;
}

.hv4-expert {
	flex: 0 1 15.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-6) var(--space-5);
	text-align: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: var(--radius-lg);
}

/* NOTE ON SPECIFICITY: (0,2,0), which beats the `.hv4 img` sizing defaults. */
.hv4-experts .hv4-expert__photo {
	width: 6.5rem;
	height: 6.5rem;
	flex: none;
	border-radius: var(--radius-full);
	object-fit: cover;
	background: var(--navy-800);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

.hv4-expert__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

/* NOTE ON SPECIFICITY: (0,2,0) beats the element selector `.hv4 h3` at (0,1,1),
   so the card name stays at card scale instead of section-heading scale. */
.hv4 .hv4-expert__name {
	margin: 0;
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
}

.hv4-expert__role {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--navy-300);
}

.hv4-expert__bio {
	margin: var(--space-3) 0 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--navy-200);
}


/* ==========================================================================
   20. FOOTER
   ========================================================================== */

.hv4-footer {
	background: var(--navy-900);
	color: var(--navy-200);
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
	font-size: var(--text-sm);
}

.hv4-footer__top {
	display: grid;
	gap: var(--space-8);
	align-items: center;
	padding-bottom: var(--space-8);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 48rem) {
	.hv4-footer__top {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* A true white knockout PNG, so it needs no backing plate, an earlier version
   sat a white rectangle behind the logo because the source was a JPEG with its
   background baked in. */
.hv4-footer__brand img {
	width: 210px;
	max-width: 60vw;
}

.hv4-footer__tag {
	margin: var(--space-4) 0 0;
	max-width: 34rem;
	color: var(--navy-200);
}

.hv4-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

.hv4-footer__links li {
	margin-top: 0;
}

.hv4-footer__links a {
	color: var(--navy-100);
}

.hv4-footer__links a:hover {
	color: #fff;
}

.hv4-footer__legal {
	margin: var(--space-6) 0 0;
	color: var(--navy-300);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
}


/* ==========================================================================
   21. STICKY CTA BAR
   ========================================================================== */

.hv4-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3) var(--space-6);
	flex-wrap: wrap;
	padding: var(--space-3) var(--gutter);
	background: rgba(10, 32, 56, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 -6px 20px rgba(10, 32, 56, 0.24);
	color: #fff;
	/* Hidden until the hero scrolls away; JS adds .is-visible. */
	transform: translateY(110%);
	visibility: hidden;
	transition: transform var(--transition), visibility var(--transition);
}

.hv4-stickybar.is-visible {
	transform: translateY(0);
	visibility: visible;
}

.hv4-stickybar__text {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: var(--leading-snug);
}

.hv4-stickybar__text b {
	color: var(--gold-400);
}

.hv4-stickybar .hv4-btn {
	padding: 0.7em 1.5em;
	font-size: var(--text-sm);
}

/* Only surface the bar where it does not crowd the page. */
@media (max-width: 30rem) {
	.hv4-stickybar__text {
		display: none;
	}
}


/* ==========================================================================
   22. UTILITIES
   ========================================================================== */

.hv4-center      { text-align: center; }
.hv4-mt-0        { margin-top: 0; }
.hv4-mb-0        { margin-bottom: 0; }
.hv4-mt-8        { margin-top: var(--space-8); }
.hv4-measure     { max-width: 42rem; margin-inline: auto; }
.hv4-measure--wide { max-width: 52rem; margin-inline: auto; }

.hv4-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   23. PRINT
   ========================================================================== */

@media print {
	.hv4-header,
	.hv4-stickybar,
	.hv4-video,
	.hv4-pods,
	.hv4-navtoggle {
		display: none !important;
	}

	.hv4-acc__panel {
		display: block !important;
	}

	.hv4-band--dark,
	.hv4-photoband,
	.hv4-hero {
		background: none !important;
		color: #000 !important;
	}

	.hv4-band--dark h1, .hv4-band--dark h2,
	.hv4-band--dark h3, .hv4-band--dark h4,
	.hv4-photoband h1, .hv4-photoband h2,
	.hv4-photoband h3, .hv4-photoband h4,
	.hv4-hero h1, .hv4-hero h2,
	.hv4-hero h3, .hv4-hero h4 {
		color: #000 !important;
	}
}