/**
 * Homepage V4 — scoped styles.
 *
 * Mobile-first. Every rule starts at the 320px base and layers
 * desktop enhancements at min-width breakpoints. No new fonts,
 * no new colors — everything sources from existing CSS variables
 * defined in assets/css/main.css (--brand-*, --text-*, --surface-*)
 * and assets/css/tokens.css (--accent-*, semantic aliases).
 *
 * Breakpoints in use:
 *   @media (min-width: 720px)  — tablet up
 *   @media (min-width: 1024px) — desktop up
 *
 * Section namespaces:
 *   .hp4-stats     — animated count-up stat grid (signature)
 *   .hp4-vp        — value props (4-tile grid)
 *   .hp4-plugins   — plugin discovery showcase
 *   .hp4-academy   — Folks Academy callout w/ next-session card
 *   .hp4-heropress — wrapped legacy HeroPress slot
 *   .hp4-folks     — featured-folks face grid
 *   .hp4-finalcta  — guest-only closing CTA
 *   .hp4-welcome   — logged-in welcome strip
 *
 * Shared:
 *   .hp4-container — width container, side gutter
 *   .hp4-head      — section header (eyebrow + title + sub)
 *   .hp4-btn       — primary / ghost / lg button variants
 *   .hp4-link      — inline "browse all →" link
 *
 * @since 1.23.242
 */

/* 1.23.291 — Anchor-scroll offset for the sticky header.
 *
 * Clicking the hero's "Scroll ↓" cue jumps to #hp4-stats-head.
 * Without scroll-padding the target lands behind the 64px sticky
 * header. `scroll-padding-top` on the scroll container (html)
 * tells the browser to leave that much room at the top when
 * scrolling to any anchor. 80px = 64px header + 16px breathing
 * room. Benefits every #-anchor jump on the site. */
html {
	scroll-padding-top: 80px;
}

/* ─── Header overlay on homepage (1.23.255) ───────────────────
 *
 * On the homepage, the site header sits TRANSPARENT over the
 * dark hero on first paint, then solidifies once the user
 * scrolls. assets/js/main.js already toggles `.scrolled` on the
 * header at scrollY > 10, so we just style the unscrolled state.
 *
 * Light theme: hero is dark → header needs white text + light
 * wordmark. Dark theme: header naturally dark, no change needed.
 *
 * The header is `position: sticky; top: 0` already (see main.css),
 * so this is purely a visual swap, not a layout change.
 */
body.hp4-home .site-header:not(.scrolled) {
	background: transparent !important;
	border-bottom-color: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
/* Universal text-white inside the unscrolled header. We've tried
 * targeted selectors per element type and something kept winning
 * (likely a deeper-specificity color token from main.css or
 * dark-overrides). This sweep guarantees every text-bearing
 * descendant inverts: every <a>, span, button, label.
 *
 * Scoped tight: only fires on body.hp4-home (homepage) when the
 * header has not yet been marked `.scrolled` (i.e. user at the
 * very top of the page over the dark hero). The moment the user
 * scrolls 10px, .scrolled gets added and this whole block stops
 * applying — original colors return for the solid-header state. */
body.hp4-home .site-header:not(.scrolled),
body.hp4-home .site-header:not(.scrolled) a,
body.hp4-home .site-header:not(.scrolled) span,
body.hp4-home .site-header:not(.scrolled) button,
body.hp4-home .site-header:not(.scrolled) label,
body.hp4-home .site-header:not(.scrolled) .header-nav a,
body.hp4-home .site-header:not(.scrolled) .header-nav a.active,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__trigger,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__trigger.active {
	color: rgba(255, 255, 255, 0.92) !important;
}
body.hp4-home .site-header:not(.scrolled) .header-nav a:hover,
body.hp4-home .site-header:not(.scrolled) .header-nav a:focus-visible,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__trigger:hover,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__trigger:focus-visible,
body.hp4-home .site-header:not(.scrolled) .header-nav a.active,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__trigger.active {
	color: #ffffff !important;
}

/* Exceptions: any popover/dropdown that opens FROM the header
 * has its own white card surface and needs dark text on it,
 * not the universal white sweep applied to the header itself.
 *
 *   - .header-nav-dropdown__panel — primary nav dropdown
 *   - .theme-toggle__panel        — light/dark theme picker
 *
 * Re-target every text child inside these panels back to the
 * normal dark colour. Hover state uses brand-indigo. */
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__panel,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__panel a,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__panel span,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__item,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__item.is-active,
body.hp4-home .site-header:not(.scrolled) .theme-toggle__panel,
body.hp4-home .site-header:not(.scrolled) .theme-toggle__panel button,
body.hp4-home .site-header:not(.scrolled) .theme-toggle__panel span,
body.hp4-home .site-header:not(.scrolled) .theme-toggle__option,
body.hp4-home .site-header:not(.scrolled) .theme-toggle__option > span {
	color: var(--text-primary, #1e1e1e) !important;
}
/* Dropdown items on hover — full purple pill with white text.
 *
 * main.css line 827 paints hover as `--brand-primary-light`
 * (very pale lavender) + `--brand-primary` (indigo) text — the
 * indigo-on-lavender ended up washed out in practice. Replace
 * with a saturated brand-indigo background and white text so
 * the hovered item reads as a clear, deliberate selection
 * regardless of the user's contrast sensitivity.
 *
 * Selector chain matches main.css's `.header-nav .header-nav-
 * dropdown__item:hover` length and adds two more levels so it
 * wins on specificity without relying purely on !important. */
body.hp4-home .site-header:not(.scrolled) .header-nav .header-nav-dropdown__item:hover,
body.hp4-home .site-header:not(.scrolled) .header-nav .header-nav-dropdown__item:focus-visible,
body.hp4-home .site-header:not(.scrolled) .theme-toggle__option:hover,
body.hp4-home .site-header:not(.scrolled) .theme-toggle__option:focus-visible {
	background: var(--brand-primary, #2145e6) !important;
	color: #ffffff !important;
}

/* Header Login + Join buttons over the dark hero.
 *
 * Default styles (.btn--outline + .btn--primary) assume a light
 * page surface — outline button has a dark border, primary uses
 * brand indigo. Both are muted against the dark mesh hero.
 *
 *   Login (.btn--outline)  → white border + white text, transparent
 *   Join  (.btn--primary)  → solid white bg + dark text (max contrast)
 *
 * Matches the in-hero CTAs (Create your free profile / Explore)
 * for consistency. Reverts on scroll. */
body.hp4-home .site-header:not(.scrolled) .header-actions .btn--outline {
	color: #ffffff !important;
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}
body.hp4-home .site-header:not(.scrolled) .header-actions .btn--outline:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
}
body.hp4-home .site-header:not(.scrolled) .header-actions .btn--primary {
	background: #ffffff !important;
	color: #07080c !important;
	border-color: transparent !important;
	box-shadow: 0 6px 20px -8px rgba(255, 255, 255, 0.45) !important;
}
body.hp4-home .site-header:not(.scrolled) .header-actions .btn--primary:hover {
	background: #f1f5f9 !important;
	color: #07080c !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 26px -10px rgba(255, 255, 255, 0.55) !important;
}

/* Hamburger button — the three bars default to `--text-primary`
 * (dark) which is invisible against the dark hero. Force light. */
body.hp4-home .site-header:not(.scrolled) .hamburger span {
	background: #ffffff !important;
}

/* Theme-toggle trigger button — its default hover state turns
 * the bg light AND keeps the icon dark. Over the dark hero my
 * universal rule keeps the icon white, so the default hover
 * paints white-on-white. Replace the hover background with a
 * translucent white tint (visible against dark hero, doesn't
 * fight the white icon). Same for [aria-expanded="true"] when
 * the dropdown is open. */
body.hp4-home .site-header:not(.scrolled) .theme-toggle__trigger:hover,
body.hp4-home .site-header:not(.scrolled) .theme-toggle__trigger:focus-visible,
body.hp4-home .site-header:not(.scrolled) .theme-toggle__trigger[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Notifications bell button — same fix shape as theme toggle.
 * Default style: solid white bg + dark icon. Over the dark hero
 * my universal rule forces icon white, so the white bg renders
 * the icon invisible. Strip the white bg, use a translucent
 * dark tint instead so the white icon reads. */
body.hp4-home .site-header:not(.scrolled) .wpf-bell__btn {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
}
body.hp4-home .site-header:not(.scrolled) .wpf-bell__btn:hover,
body.hp4-home .site-header:not(.scrolled) .wpf-bell__btn:focus-visible {
	background: rgba(255, 255, 255, 0.14) !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
	color: #ffffff !important;
}

/* Bell dropdown PANEL + user-menu dropdown PANEL — both open
 * below their triggers with white card surfaces. Restore dark
 * text inside (same exception shape as the nav / theme-toggle
 * panels above).  */
body.hp4-home .site-header:not(.scrolled) .wpf-bell__panel,
body.hp4-home .site-header:not(.scrolled) .wpf-bell__panel *,
body.hp4-home .site-header:not(.scrolled) .wpf-bell__panel a,
body.hp4-home .site-header:not(.scrolled) .wpf-bell__panel button,
body.hp4-home .site-header:not(.scrolled) .wpf-bell__panel span,
body.hp4-home .site-header:not(.scrolled) .wpf-bell__panel strong,
body.hp4-home .site-header:not(.scrolled) .user-menu__panel,
body.hp4-home .site-header:not(.scrolled) .user-menu__panel *,
body.hp4-home .site-header:not(.scrolled) .user-menu__panel a,
body.hp4-home .site-header:not(.scrolled) .user-menu__panel button,
body.hp4-home .site-header:not(.scrolled) .user-menu__panel span,
body.hp4-home .site-header:not(.scrolled) .user-menu__item {
	color: var(--text-primary, #1e1e1e) !important;
}
body.hp4-home .site-header:not(.scrolled) .wpf-bell__panel a:hover,
body.hp4-home .site-header:not(.scrolled) .wpf-bell__panel a:focus-visible,
body.hp4-home .site-header:not(.scrolled) .user-menu__item:hover,
body.hp4-home .site-header:not(.scrolled) .user-menu__item:focus-visible {
	color: var(--brand-primary, #2145e6) !important;
}
/* Logout item keeps its error/red colour even in the over-hero
 * state (semantic, not decorative). */
body.hp4-home .site-header:not(.scrolled) .user-menu__item--logout,
body.hp4-home .site-header:not(.scrolled) .user-menu__item--logout:hover {
	color: var(--color-error, #dc2626) !important;
}
/* User-menu trigger (avatar + name + chevron) — when the panel
 * is open, keep the trigger surface readable against dark hero. */
body.hp4-home .site-header:not(.scrolled) .user-menu__trigger {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
}
body.hp4-home .site-header:not(.scrolled) .user-menu__trigger:hover,
body.hp4-home .site-header:not(.scrolled) .user-menu.is-open .user-menu__trigger {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.32) !important;
}
body.hp4-home .site-header:not(.scrolled) .user-menu__name,
body.hp4-home .site-header:not(.scrolled) .user-menu__chevron {
	color: #ffffff !important;
}
body.hp4-home .site-header:not(.scrolled) .header-nav a::after,
body.hp4-home .site-header:not(.scrolled) .header-nav-dropdown__trigger::after {
	background: rgba(255, 255, 255, 0.85);
}
/* Force the white wordmark when over the dark hero, regardless
 * of the active light/dark theme. The default rule (dark theme
 * triggers it via [data-theme="dark"]) doesn't fire in light
 * theme; this override does. */
body.hp4-home .site-header:not(.scrolled) .site-logo-img--light-theme {
	display: none;
}
body.hp4-home .site-header:not(.scrolled) .site-logo-img--dark-theme {
	display: block;
}
/* Theme-toggle button / icon-only header buttons need a soft
 * outline against the dark hero. Default styles assume a light
 * surface. */
body.hp4-home .site-header:not(.scrolled) .theme-toggle,
body.hp4-home .site-header:not(.scrolled) .header-nav-icon-btn {
	color: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.18);
}

/* The scrolled state already inherits all main.css defaults
 * (solid background, dark text, light wordmark). Just smooth
 * the cross-fade so the swap doesn't feel abrupt. */
body.hp4-home .site-header {
	transition: background .25s ease, border-color .25s ease;
}

/* ─── Hero (full-bleed display, mesh background) ──────────── */
/*
 * Vercel-style: massive typographic statement on a deep dark
 * surface with an animated holographic gradient mesh. All
 * animation is `background-position` only — no `filter: blur()`,
 * no `backdrop-filter`, no layout-property animation. The mesh
 * drifts over 24s; the title accent shimmers over 8s. Those are
 * the only two animations running on first paint (plus the
 * eyebrow dot pulse + scroll-cue bob).
 */
.hp4-hero {
	position: relative;
	overflow: hidden;
	background: #07080c;
	color: #ffffff;
	/* 1.23.262 — Pull the hero UP behind the sticky header so the
	 * transparent header is actually overlaying the hero (not the
	 * white page background above it). Compensate with extra
	 * top-padding so the headline isn't covered by the header.
	 *
	 * Site header height is 64px (see main.css :637) — we use a
	 * CSS custom property to keep the constant in one place and
	 * make tablet/desktop overrides easy. */
	--hp4-header-h: 64px;
	margin-top: calc(-1 * var(--hp4-header-h));
	padding: calc(64px + var(--hp4-header-h)) 0 56px;
	min-height: 0;
	text-align: center;
	isolation: isolate;
}

/* Mesh — calmer Vercel/v0-style. Softer opacity, narrower colour
 * range (indigo + violet only, no fuchsia or blue side-bands).
 * Slower drift (32s) so the motion is barely-perceptible
 * ambient, not "the page is breathing at you." */
.hp4-hero__mesh {
	position: absolute;
	inset: -30%;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(circle at 30% 28%, rgba(99, 102, 241, 0.32), transparent 42%),
		radial-gradient(circle at 75% 30%, rgba(139, 92, 246, 0.22), transparent 45%),
		radial-gradient(circle at 60% 80%, rgba(99, 102, 241, 0.20), transparent 45%);
	background-size: 200% 200%;
	animation: hp4-hero-mesh 32s ease-in-out infinite;
	opacity: 0.85;
}
@keyframes hp4-hero-mesh {
	0%   { background-position:   0%   0%,   100%   0%,   100% 100%,   0% 100%; }
	33%  { background-position:  60%  30%,   20%   60%,    50%  20%,  80%  80%; }
	66%  { background-position:  30%  70%,   80%  10%,    20%  60%,  50%  30%; }
	100% { background-position:   0%   0%,   100%   0%,   100% 100%,   0% 100%; }
}

/* Subtle dot grid above the mesh — gives the surface a
 * "technical" texture without competing with the title. */
.hp4-hero__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
	background-size: 32px 32px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
}

/* Edge vignette — darkens the corners so the bright mesh
 * doesn't bleed under the page chrome. Pure overlay, no blur. */
.hp4-hero__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 90% 80% at 50% 50%, transparent 30%, rgba(7, 8, 12, 0.85) 100%),
		linear-gradient(180deg, transparent 60%, rgba(7, 8, 12, 0.65) 100%);
}

.hp4-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px; /* tighter on mobile, opens up on tablet+ */
	max-width: 1100px;
}

/* Ship-signal pill — the "★ New: …" pattern from Vercel/Linear,
 * but wired to real data (most-recent plugin). One pill, two
 * parts: an indigo tag + the live plugin title + arrow. Hover
 * brightens the arrow and slides it right. No animation on rest. */
.hp4-hero__signal {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	text-decoration: none;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-body), sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	max-width: min(90vw, 480px);
	transition: border-color .15s ease, background .15s ease;
}
.hp4-hero__signal:hover {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.07);
}
.hp4-hero__signal-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.85), rgba(168, 85, 247, 0.85));
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hp4-hero__signal-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
}
.hp4-hero__signal-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 280px;
}
.hp4-hero__signal-arrow {
	color: rgba(255, 255, 255, 0.55);
	transition: transform .15s ease, color .15s ease;
	padding-right: 4px;
}
.hp4-hero__signal:hover .hp4-hero__signal-arrow {
	color: #fff;
	transform: translateX(2px);
}

/* Eyebrow */
.hp4-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--font-body), sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}
.hp4-hero__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
	animation: hp4-hero-pulse 2s ease-in-out infinite;
}
@keyframes hp4-hero-pulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
	50%     { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

/* Display headline. clamp() scales:
 *   320px → 40px  (10.5vw caps at 40 via floor)
 *   360px → 40px
 *   480px → 50px
 *   720px → 76px
 *   1024px → 107px
 *   1440px+ → 140px (cap)
 * Letter-spacing also adapts via the same clamp idea so the
 * heading never has cramped, over-tracked tiny-mobile state. */
.hp4-hero__title {
	font-family: var(--font-heading), 'Fraunces Fallback', Georgia, serif;
	font-size: clamp(40px, 10.5vw, 140px);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: clamp(-1px, -0.25vw, -2.5px);
	color: #ffffff;
	margin: 0;
	text-wrap: balance;
}
/* "WordPress" accent — white italic with a breathing glow.
 *
 * Letters stay pure white. The visual interest comes from a
 * soft white halo behind the word that grows and shrinks on a
 * slow 4s loop. Reads as "the word is gently glowing" — alive
 * but minimal. No colors, no gradient, no underline.
 *
 * Animation cost: only `text-shadow` animates. No layout, no
 * paint beyond the shadow rasterization. Safe everywhere. */
.hp4-hero__accent {
	display: inline-block;
	font-style: italic;
	color: #ffffff;
	animation: hp4-accent-breathe 4s ease-in-out infinite;
}
@keyframes hp4-accent-breathe {
	0%, 100% {
		text-shadow: 0 0 14px rgba(255, 255, 255, 0.10);
	}
	50% {
		text-shadow: 0 0 30px rgba(255, 255, 255, 0.32);
	}
}

.hp4-hero__sub {
	margin: 0;
	max-width: 680px;
	font-family: var(--font-body), sans-serif;
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: balance;
}

.hp4-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.hp4-hero .hp4-btn--primary {
	background: #fff;
	color: #07080c;
	box-shadow: 0 8px 30px -8px rgba(255, 255, 255, 0.45);
}
.hp4-hero .hp4-btn--primary:hover {
	background: #f5f3ff;
	color: #07080c;
	transform: translateY(-1px);
	box-shadow: 0 14px 36px -10px rgba(255, 255, 255, 0.55);
}
.hp4-hero .hp4-btn--ghost {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}
.hp4-hero .hp4-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.42);
	color: #fff;
}

/* Live stat row — three big numbers separated by hairline. Uses
 * REAL cached counts from wpfolks_hp4_get_counts().
 *
 * Mobile: 3-column grid (each stat gets its own cell, separators
 * positioned via grid-gap-as-visual-divider). Tablet+ flips to
 * inline-flex so it lays out as a single row pill. */
.hp4-hero__stats {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 14px 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	width: 100%;
	max-width: 480px;
}
.hp4-hero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.hp4-hero__stat-value {
	font-family: var(--font-heading), 'Fraunces Fallback', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.3px;
	color: #fff;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.hp4-hero__stat-label {
	font-family: var(--font-body), sans-serif;
	font-size: 10.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.55);
}
.hp4-hero__stat-sep {
	width: 1px;
	height: 28px;
	background: rgba(255, 255, 255, 0.12);
	justify-self: center;
}

/* Scroll cue — hidden on mobile (eats vertical room, mobile
 * users scroll naturally), surfaces from tablet up. */
.hp4-hero__scroll {
	display: none;
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	font-family: var(--font-body), sans-serif;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	animation: hp4-hero-bob 2.6s ease-in-out infinite;
}
.hp4-hero__scroll:hover { color: #fff; }
@keyframes hp4-hero-bob {
	0%,100% { transform: translateX(-50%) translateY(0); }
	50%     { transform: translateX(-50%) translateY(4px); }
}

/* Tablet + */
@media (min-width: 720px) {
	.hp4-hero { padding: calc(120px + var(--hp4-header-h)) 0 100px; }
	.hp4-hero__inner { gap: 32px; }
	.hp4-hero__stats {
		display: inline-flex;
		grid-template-columns: none;
		width: auto;
		max-width: none;
		gap: 28px;
		padding: 18px 32px;
	}
	.hp4-hero__stat-value { font-size: 26px; }
	.hp4-hero__stat-label { font-size: 11.5px; letter-spacing: 0.1em; }
	.hp4-hero__stat-sep { height: 36px; }
	.hp4-hero__scroll { display: inline-flex; }
}

/* Desktop + */
@media (min-width: 1024px) {
	.hp4-hero { padding: calc(180px + var(--hp4-header-h)) 0 150px; }
	.hp4-hero__inner { gap: 40px; }
	.hp4-hero__stats { padding: 22px 40px; gap: 36px; }
	.hp4-hero__stat-value { font-size: 32px; }
}

/* Reduced motion — freeze the accent gradient mid-flow so the
 * colors still show but nothing animates. */
@media (prefers-reduced-motion: reduce) {
	.hp4-hero__mesh,
	.hp4-hero__dot,
	.hp4-hero__scroll,
	.hp4-hero__accent {
		animation: none;
	}
	.hp4-hero__accent {
		background-position: 50% center;
	}
}

/* ─── Shared container + buttons ──────────────────────────── */
/* Section vertical rhythm.
 *
 * Mobile: content-fit + comfortable padding (no min-height — we
 *   don't want to trap phone users in tall blocks they can't
 *   scroll past).
 *
 * Tablet + desktop: min-height per breakpoint AND content
 *   centred vertically via flex. Sections with little content
 *   (HeroPress, Final CTA, Welcome) inflate to match the
 *   tallest section. Sections with lots of content (Plugins,
 *   Folks) grow past min-height as needed. Net effect: uniform
 *   baseline height with natural growth on the heavier ones.
 *
 * Scale chosen by measuring the natural content height of each
 * section. 720px tablet / 800px desktop matches the densest
 * section so the shorter ones feel equally substantial.
 */
.hp4 {
	padding: 72px 0;
	background: #f1f3f5;
	color: var(--text-primary, #1e1e1e);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hp4-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Section heading — generous gap to the grid below so the page
 * reads as paced rather than packed. */
.hp4-head { margin-bottom: 40px; }
.hp4-head--center { text-align: center; }
.hp4-head__eyebrow {
	display: inline-block;
	font-family: var(--font-body), sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-primary, #4f46e5);
	background: var(--accent-primary-soft, #ede9fe);
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.hp4-head__title {
	font-family: var(--font-heading), Georgia, serif;
	font-size: clamp(28px, 5.4vw, 44px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text-primary, #1e1e1e);
	margin: 0;
	text-wrap: balance;
}
.hp4-head__sub {
	margin: 18px 0 0;
	max-width: 60ch;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--text-secondary, #475467);
}
.hp4-head--center .hp4-head__sub { margin-left: auto; margin-right: auto; }

/* Buttons */
.hp4-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 22px;
	font-family: var(--font-body), sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border-radius: 10px;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
	border: 1px solid transparent;
	cursor: pointer;
}
.hp4-btn--primary {
	color: var(--accent-primary-on, #fff);
	background: var(--accent-primary, #4f46e5);
	box-shadow: 0 6px 18px -6px rgba(79, 70, 229, 0.45);
}
.hp4-btn--primary:hover {
	background: var(--accent-primary-hover, #4338ca);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px rgba(79, 70, 229, 0.55);
}
.hp4-btn--ghost {
	color: var(--text-primary, #1e1e1e);
	background: transparent;
	border-color: var(--border-default, #e2e8f0);
}
.hp4-btn--ghost:hover {
	border-color: var(--accent-primary, #4f46e5);
	color: var(--accent-primary, #4f46e5);
}
.hp4-btn--lg { padding: 16px 28px; font-size: 16px; min-height: 52px; }
.hp4-btn--block { width: 100%; }
.hp4-btn:focus-visible {
	outline: 2px solid var(--accent-primary, #4f46e5);
	outline-offset: 2px;
}

.hp4-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body), sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--accent-primary, #4f46e5);
	text-decoration: none;
}
.hp4-link:hover { text-decoration: underline; }

/* ─── Stats (signature) ───────────────────────────────────── */
.hp4-stats { background: var(--surface-1, #ffffff); }
.hp4-stats__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 20px;
	max-width: 960px;
}
.hp4-stat {
	text-align: center;
	padding: 12px 4px;
}
.hp4-stat__value {
	display: block;
	font-family: var(--font-heading), Georgia, serif;
	font-size: clamp(36px, 7vw, 56px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--accent-primary, #4f46e5);
	font-variant-numeric: tabular-nums;
}
.hp4-stat__label {
	display: block;
	margin-top: 8px;
	font-family: var(--font-body), sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary, #475467);
}

/* ─── Value props ─────────────────────────────────────────── */
/* 1.23.271 — Gray sections hardcoded slightly darker than the
 * default --surface-body (#f6f7f7 is too close to white; the
 * alternation didn't read). #f1f3f5 keeps the surface light
 * but draws a visible boundary against #ffffff neighbours. */
.hp4-vp { background: #f1f3f5; }
.hp4-vp__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.hp4-vp__tile {
	background: var(--surface-1, #ffffff);
	border: 1px solid var(--border-subtle, #f1f5f9);
	border-radius: 16px;
	padding: 28px 24px;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hp4-vp__tile:hover {
	border-color: var(--accent-primary, #4f46e5);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.08);
}
.hp4-vp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--accent-primary-soft, #ede9fe);
	color: var(--accent-primary, #4f46e5);
	margin-bottom: 16px;
}
.hp4-vp__title {
	font-family: var(--font-body), sans-serif;
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--text-primary, #1e1e1e);
}
.hp4-vp__desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--text-secondary, #475467);
}

/* ─── Plugin showcase ─────────────────────────────────────── */
.hp4-plugins { background: var(--surface-1, #ffffff); }
.hp4-plugins__grid {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
.hp4-plugin__card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
	border: 1px solid var(--border-subtle, #f1f5f9);
	border-radius: 14px;
	background: var(--surface-1, #ffffff);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
	height: 100%;
}
.hp4-plugin__card:hover {
	border-color: var(--accent-primary, #4f46e5);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.08);
}
.hp4-plugin__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--surface-2, #fafafa);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hp4-plugin__icon img { width: 100%; height: 100%; object-fit: cover; }
.hp4-plugin__icon-fallback {
	font-family: var(--font-heading), Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--accent-primary, #4f46e5);
}
.hp4-plugin__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}
.hp4-plugin__title {
	font-family: var(--font-body), sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary, #1e1e1e);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.hp4-plugin__desc {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--text-secondary, #475467);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.hp4-plugins__cta { text-align: center; }

/* ─── Academy ─────────────────────────────────────────────── */
.hp4-academy { background: #f1f3f5; }
.hp4-academy__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}
.hp4-academy__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body), sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-primary, #4f46e5);
	margin-bottom: 10px;
}
.hp4-academy__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--success, #059669);
	box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5);
	animation: hp4-dot-pulse 2s ease-in-out infinite;
}
@keyframes hp4-dot-pulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); }
	50%     { box-shadow: 0 0 0 8px rgba(5, 150, 105, 0); }
}
.hp4-academy__title {
	font-family: var(--font-heading), Georgia, serif;
	font-size: clamp(28px, 5vw, 40px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--text-primary, #1e1e1e);
	margin: 0 0 12px;
}
.hp4-academy__desc {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-secondary, #475467);
	max-width: 56ch;
}
.hp4-academy__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* Feature chips below the Academy copy — 4 lines of "what makes
 * this different." Uses a 2-col grid so they pair up cleanly on
 * tablet+; single column on mobile. */
.hp4-academy__features {
	list-style: none;
	margin: 24px 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.hp4-academy__feature {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-body), sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--text-secondary, #475467);
}
.hp4-academy__feature-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--accent-primary-soft, #ede9fe);
	color: var(--accent-primary, #4f46e5);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Session stack panel — replaces the old next-session + recent
 * topics split. One unified vertical stack of session cards
 * (upcoming first, recent past filling the rest). Always
 * substantial regardless of whether anything is scheduled. */
.hp4-academy__panel {
	background: var(--surface-1, #ffffff);
	border: 1px solid var(--border-subtle, #f1f5f9);
	border-radius: 18px;
	padding: 20px;
	box-shadow: 0 16px 36px -18px rgba(15, 23, 42, 0.10);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hp4-academy__stack-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 8px 8px;
	border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.hp4-academy__stack-label {
	font-family: var(--font-body), sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-secondary, #475467);
}
.hp4-academy__stack-all {
	font-family: var(--font-body), sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--accent-primary, #4f46e5);
	text-decoration: none;
}
.hp4-academy__stack-all:hover { text-decoration: underline; }

.hp4-academy__live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--success, #059669);
	box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55);
	animation: hp4-dot-pulse 2s ease-in-out infinite;
}

.hp4-academy__stack {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hp4-academy__stack-item { margin: 0; }
.hp4-academy__stack-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 10px;
	border-radius: 12px;
	background: transparent;
	text-decoration: none;
	color: inherit;
	transition: background .15s ease, transform .15s ease;
}
.hp4-academy__stack-card:hover,
.hp4-academy__stack-card:focus-visible {
	background: var(--accent-primary-softer, #f5f3ff);
}
/* Upcoming variant gets a subtle indigo wash so it stands out */
.hp4-academy__stack-card.is-upcoming {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.05));
	border: 1px solid rgba(99, 102, 241, 0.12);
}

/* Date badge */
.hp4-academy__stack-date {
	flex: 0 0 50px;
	width: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	border-radius: 10px;
	background: var(--surface-2, #fafafa);
	border: 1px solid var(--border-subtle, #f1f5f9);
	line-height: 1;
}
.hp4-academy__stack-card.is-upcoming .hp4-academy__stack-date {
	background: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%);
	border-color: transparent;
	color: #fff;
}
.hp4-academy__stack-mon {
	font-family: var(--font-body), sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-secondary, #475467);
	margin-bottom: 3px;
}
.hp4-academy__stack-card.is-upcoming .hp4-academy__stack-mon {
	color: rgba(255, 255, 255, 0.9);
}
.hp4-academy__stack-day {
	font-family: var(--font-heading), Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--text-primary, #1e1e1e);
	font-variant-numeric: tabular-nums;
}
.hp4-academy__stack-card.is-upcoming .hp4-academy__stack-day {
	color: #fff;
}

.hp4-academy__stack-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.hp4-academy__stack-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body), sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-tertiary, #475569);
}
.hp4-academy__stack-card.is-upcoming .hp4-academy__stack-status {
	color: var(--accent-primary, #4f46e5);
}
.hp4-academy__stack-title {
	font-family: var(--font-body), sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-primary, #1e1e1e);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.hp4-academy__stack-when {
	font-size: 12px;
	color: var(--text-tertiary, #475569);
}
.hp4-academy__stack-arrow {
	flex: 0 0 auto;
	color: var(--text-tertiary, #475569);
	transition: transform .15s ease, color .15s ease;
}
.hp4-academy__stack-card:hover .hp4-academy__stack-arrow {
	color: var(--accent-primary, #4f46e5);
	transform: translateX(3px);
}

/* Empty state (no upcoming + no recent — fresh Academy install) */
.hp4-academy__stack-empty {
	padding: 24px 12px 12px;
	text-align: center;
}
.hp4-academy__stack-empty p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-secondary, #475467);
}
.hp4-academy__card-label {
	display: inline-block;
	font-family: var(--font-body), sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-secondary, #475467);
	margin-bottom: 10px;
}
.hp4-academy__card-title {
	font-family: var(--font-body), sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--text-primary, #1e1e1e);
	margin: 0 0 6px;
}
.hp4-academy__card-when {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: var(--text-tertiary, #475569);
}

/* ─── Recent blog posts ───────────────────────────────────── */
/* Gray section so it alternates against Folks (white) above
 * and Final CTA (dark) below. Card grid: 1 col mobile, 2 col
 * tablet, 3 col desktop. */
.hp4-blog { background: #f1f3f5; }
.hp4-blog__grid {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.hp4-blog__item { margin: 0; }
.hp4-blog__card {
	display: flex;
	flex-direction: column;
	background: var(--surface-1, #ffffff);
	border: 1px solid var(--border-subtle, #f1f5f9);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	height: 100%;
}
.hp4-blog__card:hover {
	transform: translateY(-2px);
	border-color: var(--accent-primary, #4f46e5);
	box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.08);
}
.hp4-blog__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%);
	overflow: hidden;
}
.hp4-blog__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hp4-blog__thumb-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading), Georgia, serif;
	font-size: 64px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}
.hp4-blog__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 22px;
	flex: 1;
}
.hp4-blog__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body), sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent-primary, #4f46e5);
}
.hp4-blog__date {
	color: var(--text-tertiary, #475569);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	font-size: 12.5px;
}
.hp4-blog__dot { color: var(--text-subtle, #94a3b8); }
.hp4-blog__title {
	font-family: var(--font-body), sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-primary, #1e1e1e);
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.hp4-blog__excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-secondary, #475467);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.hp4-blog__cta { text-align: center; }

@media (min-width: 720px) {
	.hp4-blog__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}
@media (min-width: 1024px) {
	.hp4-blog__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

/* ─── Folks TV wrapper ────────────────────────────────────── */
/* Wraps the legacy `wpfolks_homepage_render_recent_tv_videos`
 * helper. The inner .hp-tv-strip ships its own grid + cards;
 * we just supply the V4 section heading + spacing, and hide the
 * legacy section's own duplicate heading (we render it via
 * wpfolks_hp4_section_head() above). */
.hp4-tv { background: var(--surface-1, #ffffff); }
.hp4-tv__slot .hp-section-head { display: none; }
.hp4-tv__slot > .hp-tv-strip {
	padding: 0;
	background: transparent;
}

/* ─── HeroPress wrapper ───────────────────────────────────── */
/* 1.23.272 — Flipped to gray (was white) so the alternation
 * holds with the new Folks TV section sitting before it. */
.hp4-heropress { background: #f1f3f5; }
.hp4-heropress__slot > * { margin: 0 auto; }

/* ─── Featured folks ──────────────────────────────────────── */
/* 1.23.272 — Flipped to white (was gray) so the alternation
 * holds with HeroPress now gray above it. */
.hp4-folks { background: var(--surface-1, #ffffff); }
.hp4-folks__grid {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.hp4-folk__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 14px;
	background: var(--surface-1, #ffffff);
	border: 1px solid var(--border-subtle, #f1f5f9);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease;
	text-align: center;
	height: 100%;
}
.hp4-folk__card:hover {
	border-color: var(--accent-primary, #4f46e5);
	transform: translateY(-1px);
}
.hp4-folk__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--surface-2, #fafafa);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hp4-folk__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hp4-folk__avatar-fallback {
	font-family: var(--font-heading), Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--accent-primary, #4f46e5);
}
.hp4-folk__name {
	font-family: var(--font-body), sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text-primary, #1e1e1e);
}
.hp4-folk__role {
	font-size: 12.5px;
	color: var(--text-secondary, #475467);
	line-height: 1.3;
}
.hp4-folks__cta { text-align: center; }

/* ─── Final CTA ───────────────────────────────────────────── */
/* Background is intentionally dark in BOTH themes — this is a
 * design "dark band" moment, the closer to the page. The token
 * `--surface-inverse` flipped to a light value in dark mode,
 * which broke the white-text-on-dark design (white text on
 * light bg = unreadable). Hardcoding the dark colour matches
 * the hero surface and stays consistent in both themes. */
.hp4-finalcta {
	background: #07080c;
	color: #f8fafc;
	padding: 96px 0;
	position: relative;
	overflow: hidden;
}
.hp4-finalcta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 30%,
		rgba(99, 102, 241, 0.22) 0%,
		rgba(99, 102, 241, 0.05) 40%,
		transparent 70%);
	pointer-events: none;
}
.hp4-finalcta__inner {
	position: relative;
	text-align: center;
	max-width: 720px;
}
.hp4-finalcta__eyebrow {
	display: inline-block;
	font-family: var(--font-body), sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-indigo-light, #818cf8);
	margin-bottom: 18px;
}
.hp4-finalcta__title {
	font-family: var(--font-heading), Georgia, serif;
	font-size: clamp(34px, 7vw, 64px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0 0 18px;
	text-wrap: balance;
}
.hp4-finalcta__accent {
	background: linear-gradient(120deg, #818cf8 0%, #c084fc 50%, #e879f9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.hp4-finalcta__sub {
	margin: 0 0 30px;
	font-size: 16.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}
.hp4-finalcta__ctas {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.hp4-finalcta .hp4-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.04);
}
.hp4-finalcta .hp4-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.42);
	color: #fff;
}

/* ─── Personal hero (logged-in) ────────────────────────────
 *
 * Sits on the same `.hp4-hero` chrome as the guest hero — dark
 * mesh + dot grid + vignette + transparent header overlay. Only
 * the inner content (.hp4-phero) differs: avatar + greeting +
 * stat chips + quick actions. Visual continuity is the point —
 * the page should feel like the SAME homepage just personalised. */

/* Big circular avatar sits at the very top of the inner stack. */
.hp4-phero__avatar {
	display: inline-flex;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	border: 2px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 12px 32px -10px rgba(99, 102, 241, 0.45);
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}
.hp4-phero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hp4-phero__avatar-fallback {
	font-family: var(--font-heading), Georgia, serif;
	font-size: 38px;
	font-weight: 600;
	color: #ffffff;
}

/* Greeting headline — re-uses .hp4-hero__title's clamp scale but
 * tightens line-height since the greeting wraps less than the
 * marketing hero. */
.hp4-phero__title {
	font-size: clamp(36px, 7vw, 88px);
	line-height: 0.98;
}

/* Stat chips row — 5 chips (followers / posts / plugins /
 * badges / points).
 *
 * Mobile: wraps onto multiple rows using flex (3+2). No
 * separators on mobile because they don't read well when chips
 * wrap.
 *
 * Tablet+: single row, hairline dividers between chips drawn
 * with `:not(:last-child)::after` (zero extra DOM). */
.hp4-phero__chips {
	list-style: none;
	margin: 4px 0 0;
	padding: 14px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 18px 22px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	width: 100%;
	max-width: 580px;
}
.hp4-phero__chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.hp4-phero__chip-value {
	font-family: var(--font-heading), 'Fraunces Fallback', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.3px;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.hp4-phero__chip-label {
	font-family: var(--font-body), sans-serif;
	font-size: 10.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.62);
}

/* Action row — uses .hp4-hero__ctas spacing; just stacks 3 buttons
 * with consistent widths on mobile. */
.hp4-phero__actions {
	margin-top: 6px;
}

@media (min-width: 720px) {
	.hp4-phero__avatar { width: 112px; height: 112px; }
	.hp4-phero__avatar-fallback { font-size: 44px; }
	.hp4-phero__chips {
		flex-wrap: nowrap;
		padding: 18px 28px;
		gap: 28px;
		max-width: none;
		width: auto;
	}
	.hp4-phero__chip-value { font-size: 26px; }
	/* Hairline dividers between chips on single-row layout */
	.hp4-phero__chip {
		position: relative;
		padding-right: 28px;
	}
	.hp4-phero__chip:not(:last-child)::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 28px;
		background: rgba(255, 255, 255, 0.12);
	}
}
@media (min-width: 1024px) {
	.hp4-phero__avatar { width: 128px; height: 128px; }
	.hp4-phero__avatar-fallback { font-size: 52px; }
	.hp4-phero__chips { padding: 22px 36px; gap: 32px; }
	.hp4-phero__chip { padding-right: 32px; }
	.hp4-phero__chip-value { font-size: 28px; }
}

/* ─── Tablet enhancements (720px+) ────────────────────────── */
@media (min-width: 720px) {
	.hp4 { padding: 96px 0; min-height: 720px; }
	.hp4-container { padding: 0 32px; }
	.hp4-head { margin-bottom: 48px; }

	.hp4-stats__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px 28px;
	}

	.hp4-vp__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.hp4-vp__tile { padding: 32px 28px; }

	.hp4-plugins__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.hp4-academy__container {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 56px;
	}
	.hp4-academy__card { padding: 32px 28px; }
	.hp4-academy__features { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }

	.hp4-folks__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.hp4-welcome__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		grid-template-areas:
			"head head"
			"chips actions";
		gap: 18px 22px;
		align-items: center;
	}
	.hp4-welcome__head    { grid-area: head; }
	.hp4-welcome__chips   { grid-area: chips; }
	.hp4-welcome__actions { grid-area: actions; justify-content: flex-end; }
	.hp4-welcome__actions .hp4-btn { flex: 0 0 auto; }
}

/* ─── Desktop enhancements (1024px+) ──────────────────────── */
@media (min-width: 1024px) {
	.hp4 { padding: 128px 0; min-height: 820px; }
	.hp4-finalcta { padding: 144px 0; min-height: 820px; }
	.hp4-head { margin-bottom: 56px; }

	.hp4-stats__grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 48px 32px;
	}

	.hp4-vp__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }

	.hp4-plugins__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }

	.hp4-folks__grid { grid-template-columns: repeat(6, 1fr); gap: 20px; }
}

/* ─── Reveal-on-scroll (matches existing component) ───────── */
.hp4-stats[data-reveal],
.hp4-vp[data-reveal],
.hp4-plugins[data-reveal],
.hp4-academy[data-reveal],
.hp4-heropress[data-reveal],
.hp4-folks[data-reveal],
.hp4-finalcta[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
	will-change: opacity, transform;
}
.hp4 [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ─── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.hp4 [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.hp4-academy__dot { animation: none; }
}

/* ─── Dark mode overrides (1.23.277) ──────────────────────────
 *
 * Many V4 sections hardcoded #f1f3f5 (gray alternation) and
 * #ffffff (cards / panels) because the default token palette
 * didn't have a visibly different gray in light mode. That made
 * dark mode rendering wrong — light bands kept showing on the
 * dark surface; card text became unreadable on flipped surfaces.
 *
 * This block re-paints every hardcoded surface for
 * [data-theme="dark"]. Token-based rules (var(--surface-1)
 * etc.) flip automatically and don't need overrides here.
 *
 * Scoped through .hp4 / .hp4-* so it doesn't bleed into
 * other components.
 * ───────────────────────────────────────────────────────── */
:root[data-theme="dark"] .hp4 { background: #11172e; }

/* Shade-band sections (the "gray" half of the alternation) */
:root[data-theme="dark"] .hp4-vp,
:root[data-theme="dark"] .hp4-academy,
:root[data-theme="dark"] .hp4-heropress,
:root[data-theme="dark"] .hp4-blog {
	background: #0b1023;
}
/* "White" sections — lifted slightly above the shade for the
 * elevated/recessed alternation feel in dark mode. */
:root[data-theme="dark"] .hp4-stats,
:root[data-theme="dark"] .hp4-plugins,
:root[data-theme="dark"] .hp4-tv,
:root[data-theme="dark"] .hp4-folks {
	background: #11172e;
}

/* CARD surfaces (plugin tiles, value-prop tiles, folk cards,
 * academy panel, blog cards) — sit a step ABOVE their section
 * for visible elevation. Subtle white border so edges read. */
:root[data-theme="dark"] .hp4-vp__tile,
:root[data-theme="dark"] .hp4-plugin__card,
:root[data-theme="dark"] .hp4-folk__card,
:root[data-theme="dark"] .hp4-academy__panel,
:root[data-theme="dark"] .hp4-blog__card {
	background: #161d38;
	border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .hp4-vp__tile:hover,
:root[data-theme="dark"] .hp4-plugin__card:hover,
:root[data-theme="dark"] .hp4-folk__card:hover,
:root[data-theme="dark"] .hp4-blog__card:hover {
	border-color: var(--accent-primary, #818cf8);
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
}

/* ICON wells inside cards (vp tile icon, academy feature icon,
 * plugin icon fallback) — keep the indigo tint but darken so
 * the icon glyph still reads. */
:root[data-theme="dark"] .hp4-vp__icon,
:root[data-theme="dark"] .hp4-academy__feature-icon {
	background: rgba(99, 102, 241, 0.18);
	color: #c4b5fd;
}
:root[data-theme="dark"] .hp4-plugin__icon,
:root[data-theme="dark"] .hp4-folk__avatar {
	background: rgba(255, 255, 255, 0.04);
}

/* TEXT inside cards + sections — section heads/titles/subs are
 * already token-driven and flip naturally. These targets are the
 * hardcoded card-internal text colours that need explicit dark
 * values. */
:root[data-theme="dark"] .hp4-vp__title,
:root[data-theme="dark"] .hp4-plugin__title,
:root[data-theme="dark"] .hp4-folk__name,
:root[data-theme="dark"] .hp4-blog__title,
:root[data-theme="dark"] .hp4-academy__title,
:root[data-theme="dark"] .hp4-academy__stack-title,
:root[data-theme="dark"] .hp4-academy__stack-day {
	color: #f1f5f9;
}
:root[data-theme="dark"] .hp4-vp__desc,
:root[data-theme="dark"] .hp4-plugin__desc,
:root[data-theme="dark"] .hp4-folk__role,
:root[data-theme="dark"] .hp4-blog__excerpt,
:root[data-theme="dark"] .hp4-academy__desc,
:root[data-theme="dark"] .hp4-academy__feature-label,
:root[data-theme="dark"] .hp4-academy__stack-when,
:root[data-theme="dark"] .hp4-blog__date {
	color: rgba(255, 255, 255, 0.68);
}

/* ACADEMY session stack pieces */
:root[data-theme="dark"] .hp4-academy__stack-head {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .hp4-academy__stack-date {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .hp4-academy__stack-mon {
	color: rgba(255, 255, 255, 0.6);
}
:root[data-theme="dark"] .hp4-academy__stack-card:hover {
	background: rgba(99, 102, 241, 0.14);
}
:root[data-theme="dark"] .hp4-academy__stack-card.is-upcoming {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(168, 85, 247, 0.12));
	border-color: rgba(99, 102, 241, 0.25);
}

/* BLOG date eyebrow stays indigo (token-based, no override
 * needed) but its date text needs the muted-light treatment. */
:root[data-theme="dark"] .hp4-blog__dot { color: rgba(255, 255, 255, 0.35); }

/* GHOST buttons in dark mode — base border + bg need light tints
 * since the dark section background is already dark. */
:root[data-theme="dark"] .hp4-btn--ghost {
	color: #f1f5f9;
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.16);
}
:root[data-theme="dark"] .hp4-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.32);
	color: #ffffff;
}

/* SECTION-HEAD eyebrow chip — light tint of accent doesn't read
 * on dark sections; switch to a richer dark-mode tint. */
:root[data-theme="dark"] .hp4-head__eyebrow {
	background: rgba(99, 102, 241, 0.16);
	color: #c4b5fd;
}

/* STAT values — indigo against dark navy mutes the numbers
 * (they're meant to be the proof-bar headline). Pure white in
 * dark mode for maximum readability + authority. Labels stay
 * muted via earlier token-driven rules. */
:root[data-theme="dark"] .hp4-stat__value {
	color: #ffffff;
}

/* HERO is already dark in both modes — no change needed. The
 * Final CTA is also intentionally dark in both modes. */