/*
 * IncubeSocial — Homepage styles.
 * Scoped to the .home template only — reads tokens from design-tokens.css, never redefines them.
 * Mobile-first. Signature gradient reserved for small accents (badge dot, underline,
 * pill/badge scrims, CTA card background) — never a large flat surface fill.
 */

.home {
	/*
	 * `clip`, not `hidden`: overflow-x:hidden on a non-body element promotes
	 * it to a scroll container, which gave the page a SECOND vertical
	 * scrollbar next to the document's own (reported 2026-08-01). `clip`
	 * still clips the marquee/hero horizontal bleed but creates no
	 * scrollport, so only the document scrolls.
	 */
	overflow-x: clip;
}

.home .wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 1.5rem;
}

.home .section-head {
	max-width: 640px;
	margin: 0 0 2.5rem;
}

.home .section-head h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	margin: 0 0 0.75rem;
}

.home .section-head p {
	font-size: 1.0625rem;
	color: var(--color-navy-dark);
	opacity: 0.78;
	margin: 0;
}

.home .eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-purple-primary);
	margin: 0 0 0.75rem;
}

/* ---------- Hero ---------- */
/*
 * Dark video background (Remotion-rendered, brand-gradient motion over
 * dimmed stock footage — see IncubeSocialHeroLoop.tsx in the Footage repo).
 * position:relative + overflow:hidden on the section turns it into the
 * video's containing block; the video itself is position:absolute,
 * inset:0, z-index:0, with all real content living in a z-index:1
 * stacking context on top of it. --color-navy-dark fallback background
 * covers the moment before the video paints and any no-JS/no-video-support
 * case (prefers-reduced-motion below swaps to a static poster-only fallback).
 */
/* Fixed min-height added 2026-07-25 (Ara: "I want the hero section to be
   fixed. It doesn't move based on what the thing is showing... a fixed
   size, height"). Before this, the section's height was pure content flow
   — any reflow in the bento cluster or headline rotator visibly resized
   the whole hero. min-height (not height) so real content that's
   genuinely taller than this floor still isn't clipped; in practice the
   compacted bento (4 chips, not 5) + trimmed headline sizes above fit
   comfortably within it. */
.home-hero {
	position: relative;
	overflow: hidden;
	min-height: 640px;
	padding-block: var(--section-pad-lg) var(--section-pad-sm);
	background: var(--color-navy-dark);
}

@media (min-width: 900px) {
	.home-hero {
		min-height: 720px;
	}
}

.home-hero__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Respect reduced-motion: freeze on the poster frame instead of autoplaying. */
@media (prefers-reduced-motion: reduce) {
	.home-hero__bg-video {
		display: none;
	}
}

.home-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

.home-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(242, 244, 247, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 0.4rem 0.9rem 0.4rem 0.6rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-navy-dark);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
	margin: 0 0 1.5rem;
}

.home-hero__badge-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--gradient-signature);
	flex: none;
}

/* Sizes trimmed 2026-07-25 (Ara: "minimize the size of font and stuff...
   make sure everything is fitting correctly" — the denser hero (bento
   cluster + 12-clip collage) needed the headline column to take up less
   vertical room so the whole hero reads as compact, not sprawling). */
.home-hero h1 {
	font-size: clamp(1.9rem, 4vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	max-width: 16ch;
	margin: 0 0 1rem;
	color: #fff;
}

/*
 * "Mondays" is the hero mark. Against the dark video background, a
 * light tint of the brand purple (--color-pink-accent, chosen for its
 * higher luminance than the primary purple) keeps 4.5:1+ contrast on
 * navy/near-black video frames — verified against the video's darkest
 * sampled region (~#0a0e1c effective after the scrim). The signature
 * gradient still rides underneath as a decorative underline bar,
 * exactly as it did in the light-background version, just re-tuned so
 * the glyph itself doesn't rely on the darker purple that reads fine
 * on --color-grey-light but fails AA on near-black video.
 */
.home-hero h1 .accent {
	position: relative;
	color: #e8b8ff;
	white-space: nowrap;
}

.home-hero h1 .accent::after {
	content: "";
	position: absolute;
	left: 0.05em;
	right: 0.05em;
	bottom: 0.08em;
	height: 0.14em;
	background: var(--gradient-signature);
	border-radius: 999px;
	z-index: -1;
	opacity: 0.55;
}

/* Non-zero hero slides render their headline as <p class="home-hero__slide-h">
   instead of <h1> (slide 0 keeps the real h1 for SEO/no-JS) -- this rule
   was missing entirely, so 6 of the 7 rotating headlines fell back to
   unstyled body-paragraph text instead of matching h1's typography
   (found 2026-08-12 from a live screenshot: the headline rendered smaller
   and dimmer than the kicker line above it). Mirrors .home-hero h1 /
   .accent / .accent::after exactly; max-width is handled separately by
   the existing .home-hero__slide h1, .home-hero__slide .home-hero__slide-h
   rule further down, so it's intentionally omitted here. */
.home-hero__slide-h {
	font-size: clamp(1.9rem, 4vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	color: #fff;
}

.home-hero__slide-h .accent {
	position: relative;
	color: #e8b8ff;
	white-space: nowrap;
}

.home-hero__slide-h .accent::after {
	content: "";
	position: absolute;
	left: 0.05em;
	right: 0.05em;
	bottom: 0.08em;
	height: 0.14em;
	background: var(--gradient-signature);
	border-radius: 999px;
	z-index: -1;
	opacity: 0.55;
}

.home-hero__lede {
	font-size: 1.0625rem;
	line-height: 1.5;
	color: #fff;
	opacity: 0.92;
	max-width: 46ch;
	margin: 0 0 1.5rem;
}

/* Hero headline+lede rotator (2026-07-23). The h1/lede max-widths above
   still apply per-slide. Un-rendered slides ([hidden]) take no space;
   once site-fx.js reveals them it switches them to position:absolute so
   the container's height is set by the tallest slide, preventing the
   CTAs/trust line below from jumping as headlines of different lengths
   cycle through. */
/* Fixed floor added 2026-07-25 (Ara: "dashboard slides show area" flicker
   was still happening after the bento rebuild — traced to THIS element,
   not the bento cluster). Root cause: min-height:0 relied entirely on
   whichever slide was position:relative to give the container a height.
   The rotator's own JS (site-fx.js goTo()) sets the outgoing slide to
   position:absolute IMMEDIATELY, but doesn't set the incoming slide to
   position:relative until 450ms later (inside a setTimeout) — so for that
   whole 450ms window, on EVERY rotation cycle, no slide is
   position:relative, the container has nothing to size against, and it
   collapses toward 0 — visibly blanking the headline and shifting the
   CTA/trust-line up to fill the gap. Fixed with a real floor, measured
   from the actual tallest of the 7 rotating slides, so the container can
   never collapse below what a full slide needs, transition or not.
   Retuned 2026-07-27 (Ara: big dead gap between the lede text and the
   CTA button) — the original floor (340/400px) was live-measured against
   a stale slide set and ended up ~120-200px taller than any current
   slide actually needs, so most slides sat centered in a mostly-empty
   box. Re-measured all 7 slides live at desktop (1440/1920: max 220px)
   and mobile (375px: max 195px) via getBoundingClientRect, floor now set
   to tallest + ~20px buffer instead of a much larger guess. */
.home-hero__headline-rotate {
	min-height: 240px;
}

@media (max-width: 640px) {
	.home-hero__headline-rotate {
		min-height: 215px;
	}
}
.home-hero__slide {
	width: 100%;
}
.home-hero__slide h1,
.home-hero__slide .home-hero__slide-h {
	max-width: 18ch;
}

.home-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin: 0 0 1.75rem;
}

.home-hero__trust {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: #fff;
	opacity: 0.82;
	margin: 0;
}

/* Deliberately wraps onto exactly 2 rows via the <br> in the markup +
   this max-width cap (2026-07-26: Ara flagged it spilling to a 3rd row —
   the copy itself was too long for its column at real viewport widths, so
   the <br> broke the line but the FIRST segment still wrapped again on
   its own). Fixed by shortening the copy to something that reliably fits
   2 lines, and capping max-width so it can never re-wrap to 3 regardless
   of viewport. Don't remove the width cap without re-checking wrap count
   at multiple widths.
   Bumped 30ch -> 35ch 2026-07-28 (5th pass, Ara: wanted "your" on the same
   line as "password"). Live-measured: "...we never see your" needs ~313px,
   30ch was only 281px so it kept re-wrapping to a 3rd line regardless of
   where the <br> sat. 35ch = 328px, just enough for that exact split. */
.home-hero__trust span {
	line-height: 1.55;
	max-width: 35ch;
}

.home-hero__trust svg {
	margin-top: 0.2rem;
}

.home-hero__trust svg {
	flex: none;
	color: #e8b8ff;
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border-radius: 999px;
	padding: 0.85em 1.75em;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(4px);
	transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.btn-outline:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.16);
	transform: translateY(-2px);
}

/* Hero visual: stylized content-calendar mock, no gradient flood */
.home-hero__visual {
	position: relative;
}

/* ---------- Why it matters (outcomes) — V2 REDESIGN (2026-07-24) ----------
   Phase 1 of a 2-phase redesign: asymmetric lead-card layout, per-card live
   visuals (compare slider / pulsing map / review stack / animated chart),
   bolder scannable typography via inline <strong>/<mark>. Reuses the site's
   existing data-reveal-stagger + data-count utilities (site-fx.js) — no new
   JS shipped. All motion respects prefers-reduced-motion via the .js-reveal
   gate already established site-wide (see reveal-stagger rules below) plus
   a local @media query for the two continuous-loop animations (compare
   slider auto-slide, map pulse) which aren't covered by that gate. */
/* Top padding trimmed 2026-07-24 (Ara: "empty space and greyed out space...
   need to minimize" on a screenshot of this exact seam) -- .home-why's own
   56px top padding was STACKING with the preceding .home-compare section's
   40px bottom padding, ~96px of plain background-color band between two
   adjacent light-grey sections before any card content appeared. Bottom
   padding kept at the full value so this section doesn't crowd Portfolio
   below it -- only the top (the seam that was visibly empty) is cut. */
.home-why {
	padding-top: 1.5rem;
	padding-bottom: var(--section-pad-sm);
	background: var(--color-grey-light);
	overflow: hidden; /* keeps the lead card's slider inside the section */
}

/* ---- Grid: asymmetric — lead card spans full width, 3 compact cards row beneath ---- */
/* margin-top removed 2026-07-24 — was spacing the grid away from
   .home-why__head, which is now gone (Ara removed the eyebrow/h2/intro
   block); .home-why's own padding-block is enough top space now that the
   grid is the section's first child. */
.home-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.home-why-card {
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(13, 19, 43, 0.08);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-why-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(13, 19, 43, 0.08);
}

/* Compacted 2026-07-26 (Ara: "can we compact it's size a bit" — screenshot
   of this section). Padding + visual-band heights cut ~25% across the
   board, font sizes trimmed slightly to match. */
.home-why-card__copy {
	padding: 1.15rem 1.35rem 1.4rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.home-why-card__label {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-purple-primary);
	margin-bottom: 0.6rem;
}

.home-why-card__title {
	font-size: 1.05rem;
	line-height: 1.28;
	margin: 0 0 0.5rem;
	color: var(--color-navy-dark);
}

.home-why-card__title strong {
	color: var(--color-purple-primary);
}

.home-why-card__body {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-navy-dark);
	opacity: 0.82;
	margin: 0 0 0.9rem;
	flex: 1;
}

.home-why-card__outcome {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-navy-dark);
	background: rgba(21, 122, 82, 0.08);
	border-radius: 10px;
	padding: 0.55rem 0.7rem;
	margin: 0;
}

.home-why-card__outcome strong {
	color: #0f6b3a;
}

.home-why-card__outcome svg {
	flex: none;
	margin-top: 0.15rem;
	color: #157a52;
}

/* ---- Shared visual-band frame ---- */
.home-why-card__visual {
	position: relative;
	height: 135px;
	background: var(--color-grey-light);
	overflow: hidden;
}

/* ============ Card 1 (lead): Before/After compare slider ============ */
.home-why-card--lead {
	display: grid;
	grid-template-columns: 1fr;
}

.home-why-card--lead .home-why-card__visual {
	height: 165px;
}

.home-why-card--lead .home-why-card__title {
	font-size: 1.2rem;
}

.hwc-compare {
	--split: 42%;
}

.hwc-compare__pane {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 1.1rem;
}

.hwc-compare__pane--after {
	background: linear-gradient(160deg, rgba(108, 58, 237, 0.14), rgba(0, 180, 255, 0.12));
}

.hwc-compare__pane--before {
	background: var(--color-grey-light);
	clip-path: inset(0 calc(100% - var(--split)) 0 0);
	transition: clip-path 3.2s ease-in-out;
}

.hwc-compare__tag {
	position: absolute;
	top: 0.85rem;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	color: #fff;
}

.hwc-compare__tag--after {
	right: 0.85rem;
	background: var(--color-purple-primary);
}

.hwc-compare__tag--before {
	left: 0.85rem;
	/* 2026-08-16 audit: at 0.55 alpha this composited to 4.39:1 against the
	   pane behind it - just under AA for 0.7rem text. 0.72 clears it while
	   staying visibly lighter than the purple --after pill. */
	background: rgba(13, 19, 43, 0.72);
}

.hwc-compare__bars {
	display: flex;
	align-items: flex-end;
	gap: 0.45rem;
	height: 90px;
	width: 100%;
}

.hwc-compare__bars span {
	flex: 1;
	height: var(--h);
	border-radius: 4px 4px 0 0;
	background: var(--color-purple-primary);
	opacity: 0.85;
}

.hwc-compare__pane--before .hwc-compare__bars span {
	background: rgba(13, 19, 43, 0.28);
}

.hwc-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--split);
	width: 3px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(13, 19, 43, 0.12);
	transition: left 3.2s ease-in-out;
}

.hwc-compare__handle span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(13, 19, 43, 0.22);
}

.hwc-compare__handle span::before,
.hwc-compare__handle span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transform: translateY(-50%);
}

.hwc-compare__handle span::before {
	left: 7px;
	border-right: 5px solid var(--color-purple-primary);
}

.hwc-compare__handle span::after {
	right: 7px;
	border-left: 5px solid var(--color-purple-primary);
}

/* Auto-slide loop — reveals more of "after" then resets, entirely CSS-driven.
   Triggered by .home-why__grid.is-visible (the [data-reveal-stagger] container
   site-fx.js flips) rather than the card itself, since only the grid wrapper
   receives that class. */
@media (prefers-reduced-motion: no-preference) {
	.home-why__grid.is-visible .hwc-compare__pane--before,
	.home-why__grid.is-visible .hwc-compare__handle {
		animation: hwc-compare-slide 6s ease-in-out infinite;
	}
}

/* Rebalanced 2026-07-24 (Ara: "greyed out space... need to minimize" — the
   card was RESTING at 78% grey "Before" for most of its 6s loop, reading as
   a big grey box with a thin purple sliver rather than an even compare).
   Now holds close to 50/50 and only dips to 30/70 briefly mid-loop, so the
   grey pane never dominates the card at rest. */
@keyframes hwc-compare-slide {
	0%, 8%   { --split: 55%; }
	50%, 58% { --split: 30%; }
	100%     { --split: 55%; }
}

.hwc-compare__pane--before { --split: 55%; }
.hwc-compare__handle { --split: 55%; }

/* ============ Card 2: pulsing map pin (GBP) ============ */
.hwc-map__grid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hwc-map__pin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
}

.hwc-map__pulse {
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	background: rgba(108, 58, 237, 0.25);
}

@media (prefers-reduced-motion: no-preference) {
	.hwc-map__pulse {
		animation: hwc-pulse 2.2s ease-out infinite;
	}
}

@keyframes hwc-pulse {
	0%   { transform: scale(0.55); opacity: 0.8; }
	100% { transform: scale(1.9); opacity: 0; }
}

.hwc-map__rank {
	position: absolute;
	bottom: 0.9rem;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 0.8rem;
	color: var(--color-navy-dark);
	background: #fff;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(13, 19, 43, 0.1);
}

.hwc-map__rank .num {
	color: var(--color-purple-primary);
}

/* ============ Card 3: stacked review-graphic cards ============ */
.home-why-card__visual--reviews {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, rgba(255, 77, 141, 0.1), rgba(255, 138, 0, 0.08));
}

.hwc-review {
	position: absolute;
	width: 74%;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(13, 19, 43, 0.12);
	padding: 0.9rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.hwc-review--back {
	transform: rotate(-7deg) translate(-18px, 6px);
	opacity: 0.75;
}

.hwc-review--front {
	transform: rotate(4deg) translate(14px, -6px);
}

.hwc-review__stars {
	color: #ffb300;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
}

.hwc-review__line {
	display: block;
	height: 7px;
	border-radius: 4px;
	background: var(--color-grey-light);
	width: 100%;
}

.hwc-review__line--short {
	width: 62%;
}

.hwc-review__quote {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--color-navy-dark);
	line-height: 1.3;
}

.hwc-review__name {
	font-size: 0.7rem;
	color: var(--color-navy-dark);
	opacity: 0.6;
}

/* ============ Card 4: animated bar + trend chart ============ */
.home-why-card__visual--chart {
	padding: 1.1rem 1.1rem 0.9rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.hwc-chart__bars {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
	height: 90px;
	z-index: 1;
}

.hwc-chart__bar {
	flex: 1;
	height: 4px;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, var(--color-blue-accent), var(--color-purple-primary));
	transition: height 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.home-why-card__visual--chart.is-charted .hwc-chart__bar {
	height: var(--v);
}

.hwc-chart__bar:nth-child(1) { --i: 0; }
.hwc-chart__bar:nth-child(2) { --i: 1; }
.hwc-chart__bar:nth-child(3) { --i: 2; }
.hwc-chart__bar:nth-child(4) { --i: 3; }
.hwc-chart__bar:nth-child(5) { --i: 4; }
.hwc-chart__bar:nth-child(6) { --i: 5; }

.hwc-chart__trend {
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: 0.9rem;
	height: 90px;
	opacity: 0.9;
}

.hwc-chart__stat {
	margin-top: 0.6rem;
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 0.8rem;
	color: var(--color-navy-dark);
}

.hwc-chart__stat .num {
	font-size: 1.05rem;
	color: var(--color-purple-primary);
}

@media (min-width: 640px) {
	.home-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.home-why-card--lead {
		grid-column: 1 / -1;
		grid-template-columns: 1.1fr 1fr;
	}
	.home-why-card--lead .home-why-card__visual {
		height: 100%;
	}
	/* 2026-07-24 (Ara, mobile 2-col screenshot: "right side empty space" —
	   his own Option 2, "the last container extends to fill in the empty
	   space"). At exactly 2 columns, 3 non-lead cards leave the 4th (last)
	   card alone in the final row with an empty sibling cell beside it —
	   span it across both columns so nothing sits next to a void. Only
	   applies at the 2-col breakpoint; the 3-col layout below has its own
	   rule since 3 cards there would leave a DIFFERENT empty cell. */
	.home-why-card:last-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1080px) {
	.home-why__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.home-why-card--lead {
		grid-column: 1 / -1;
		grid-template-columns: 1.4fr 1fr;
	}
	/* At 3 columns, 3 non-lead cards fill exactly one full row — no orphan
	   cell, so undo the 2-col span rule above. */
	.home-why-card:last-child {
		grid-column: auto;
	}
}

/* ---------- Portfolio / example posts ---------- */
.home-portfolio {
	/* Compacted (Adam 2026-07-13: "too big") — sm block padding, tighter head.
	   Further compacted 2026-07-22 (Adam: "too much empty space between
	   sections, minimize gaps") — bottom padding trimmed harder than top
	   since the grid's own tile captions already add visual weight right
	   above the section edge. */
	padding-top: var(--section-pad-sm);
	padding-bottom: clamp(2rem, 4vw, 2.75rem);
	position: relative;
	background: var(--color-navy-dark);
	overflow: hidden;
}

/* Richer animated background (Adam: "improve the animation graphics behind").
   TWO drifting aurora layers (brand colors only — orange removed) moving on
   different paths + a faint moving grid, so the backdrop reads as intentional
   living motion rather than a flat dark band. All GPU transform/opacity. */
.home-portfolio::before {
	content: '';
	position: absolute;
	inset: -25%;
	z-index: 0;
	background:
		radial-gradient(42% 46% at 18% 24%, rgba(108, 58, 237, 0.5), transparent 60%),
		radial-gradient(40% 44% at 84% 28%, rgba(255, 77, 141, 0.38), transparent 60%),
		radial-gradient(48% 52% at 62% 88%, rgba(0, 180, 255, 0.34), transparent 62%),
		radial-gradient(38% 42% at 12% 82%, rgba(154, 69, 232, 0.3), transparent 60%);
	background-size: 200% 200%;
	animation: home-portfolio-drift 24s ease-in-out infinite alternate;
	filter: blur(10px);
}
/* Second counter-drifting layer + a faint grid for depth/texture. */
.home-portfolio::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(30% 34% at 70% 20%, rgba(0, 180, 255, 0.22), transparent 60%),
		radial-gradient(26% 30% at 30% 70%, rgba(255, 77, 141, 0.2), transparent 60%),
		linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
	background-size: 200% 200%, 200% 200%, 46px 46px, 46px 46px;
	animation: home-portfolio-drift2 32s linear infinite;
	opacity: 0.8;
}

@keyframes home-portfolio-drift {
	0%   { background-position: 0% 0%; transform: scale(1) translate3d(0,0,0); }
	50%  { background-position: 100% 60%; transform: scale(1.1) translate3d(0,0,0); }
	100% { background-position: 40% 100%; transform: scale(1) translate3d(0,0,0); }
}
@keyframes home-portfolio-drift2 {
	from { background-position: 0% 0%, 0% 0%, 0 0, 0 0; }
	to   { background-position: -60% 40%, 60% -40%, 46px 46px, 46px 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.home-portfolio::before,
	.home-portfolio::after { animation: none; }
}

/* Lift real content above the animated bg. */
.home-portfolio > .wrap { position: relative; z-index: 1; }

/* Two-column head: value pitch left, proof stats + example flag right. */
.home-portfolio__head {
	display: grid;
	/* minmax(0, 1fr), not plain 1fr -- a bare 1fr track won't shrink below
	   its content's max-content size (the h2/p inside have max-width:22ch/
	   54ch, both wider than a mobile viewport), so without the minmax()
	   floor the track itself overflows its own grid container even though
	   the container's real box is correctly sized. The >=880px rule below
	   already does this correctly for both its columns -- this base rule
	   was the one that got missed (found 2026-08-12 via live mobile check:
	   container width 327.5px, but its own gridTemplateColumns resolved to
	   400.98px). */
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 3rem;
	align-items: end;
	margin-bottom: 1.25rem;
}
@media (min-width: 880px) {
	.home-portfolio__head {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	}
}
.home-portfolio__headlead .eyebrow { color: #cbb8ff; }
/* Grid item min-width defaults to 'auto', which means it refuses to
   shrink below its content's natural size -- the h2 (max-width:22ch) and
   p (max-width:54ch) below are both wider than a mobile viewport, so
   without this the grid TRACK expands to fit them instead of wrapping,
   pushing ~50px of content off-screen at 375px (found 2026-08-12 via a
   live mobile-viewport check: gridTemplateColumns resolved to 400.98px
   inside a 375px viewport). Standard CSS Grid overflow fix. */
.home-portfolio__headlead { min-width: 0; }
.home-portfolio__headlead h2 {
	color: #fff;
	font-size: clamp(1.6rem, 3.2vw, 2.35rem);
	line-height: 1.12;
	margin: 0.6rem 0 0.75rem;
	max-width: 22ch;
}
.home-portfolio__headlead p {
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	max-width: 54ch;
	font-size: 0.95rem;
	line-height: 1.55;
}
/* Right side: 3 proof mini-stats + the example flag under them. */
.home-portfolio__headside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}
.home-portfolio__formats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	width: 100%;
}
/* Enlarged 2026-07-26 (Ara: "these 3 needs to be bigger") — number size,
   label size, and card padding all scaled up so the stat chips read as a
   real proof-point trio, not a small aside. */
.home-portfolio__format {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	padding: 1.25rem 1rem;
	text-align: center;
}
.home-portfolio__format strong {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1;
	white-space: nowrap;
	background: var(--gradient-signature);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.home-portfolio__format span {
	display: block;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.62);
	margin-top: 0.45rem;
}

.home-portfolio .placeholder-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.25);
	border-radius: 0.5rem;
	padding: 0.45rem 0.8rem;
	margin: 0;
}

/* ===== Feedbird-style filterable portfolio (Adam 2026-07-13) ===== */

/* Filter pills row + inline "See all examples" on the right. */
.home-portfolio__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
}
.home-portfolio__filter {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.82);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.home-portfolio__filter:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.home-portfolio__filter.is-active {
	color: #fff;
	background: var(--gradient-signature);
	border-color: transparent;
	box-shadow: 0 6px 16px rgba(108, 58, 237, 0.3);
}
.home-portfolio__seeall {
	margin-left: auto;
	font-weight: 700;
	font-size: 0.85rem;
	color: #cbb8ff;
	text-decoration: none;
	white-space: nowrap;
}
.home-portfolio__seeall:hover { color: #fff; text-decoration: underline; }

/* Grid of portrait content tiles. */
.home-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem;
}

.home-portfolio-tile {
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--color-navy-dark);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-portfolio-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.home-portfolio-tile.is-filtered-out { display: none; }

/* Media area — shortened from 9:16 (Adam 2026-07-22: rows read too tall
   across two full rows of 4). 4:5 keeps the portrait feel without the
   original's extra height per row. Shortened again 2026-07-26 (Ara:
   "compact this section") — 5:4.6, still portrait-leaning but visibly
   shorter. */
.home-portfolio-tile .swatch {
	position: relative;
	aspect-ratio: 5 / 4.6;
	overflow: hidden;
	display: block;
}
.home-portfolio-tile .swatch img,
.home-portfolio-tile--video .swatch video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Subtle bottom scrim so the badge/label read on any media. */
.home-portfolio-tile .swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13,19,43,0) 55%, rgba(13,19,43,0.55) 100%);
	pointer-events: none;
}

/* Feedbird-style play button (centered), pulses gently, brand blue like ref. */
.home-portfolio-tile__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	color: #fff;
	background: var(--color-blue-readable);
	border: none;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 180, 255, 0.5);
	cursor: pointer;
	z-index: 2;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.home-portfolio-tile__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.home-portfolio-tile:hover .home-portfolio-tile__play { opacity: 0; }  /* hide once the clip plays on hover */

/* Duration badge (bottom-left) + faux scrubber (bottom) like the reference. */
.home-portfolio-tile__dur {
	position: absolute;
	left: 0.6rem;
	bottom: 0.9rem;
	z-index: 2;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	background: rgba(13, 19, 43, 0.7);
	border-radius: 6px;
	padding: 0.15em 0.5em;
	backdrop-filter: blur(3px);
}
.home-portfolio-tile__scrub {
	position: absolute;
	left: 0.6rem;
	right: 0.6rem;
	bottom: 0.55rem;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.3);
	z-index: 2;
	overflow: hidden;
}
.home-portfolio-tile__scrub i {
	display: block;
	width: 34%;
	height: 100%;
	background: #fff;
	border-radius: 999px;
	transition: width 0.15s linear;
}

/* Format badge (top-left). */
.home-portfolio-tile__badge {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 2;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(13, 19, 43, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	padding: 0.25em 0.55em;
	backdrop-filter: blur(3px);
}

/* Caption under the tile. */
.home-portfolio-tile__body { padding: 0.55rem 0.75rem 0.65rem; }
.home-portfolio-tile__label {
	margin: 0;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
}
.home-portfolio-tile__ex {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #cbb8ff;
	margin-right: 0.35rem;
}

.home-portfolio__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	padding: 2rem 0;
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.home-portfolio-tile__play { animation: home-portfolio-play-pulse 2.4s ease-in-out infinite; }
}
@keyframes home-portfolio-play-pulse {
	0%, 100% { box-shadow: 0 6px 20px rgba(0,180,255,0.5); }
	50%      { box-shadow: 0 6px 28px rgba(0,180,255,0.8); }
}

/* ---------- FAQ preview ---------- */
.home-faq {
	padding-block: var(--section-pad-sm);
	background: var(--color-grey-light);
}

.home-faq .section-head {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.home-faq__list {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.home-faq-item {
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(13, 19, 43, 0.06);
	overflow: hidden;
}

.home-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--color-navy-dark);
}

.home-faq-item summary::-webkit-details-marker {
	display: none;
}

.home-faq-item summary .icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--color-grey-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-purple-primary);
	transition: transform 0.2s ease;
	font-size: 1rem;
}

.home-faq-item[open] summary .icon {
	transform: rotate(45deg);
	background-image: linear-gradient(rgba(13, 19, 43, 0.45), rgba(13, 19, 43, 0.45)), var(--gradient-signature);
	color: #fff;
}

.home-faq-item__body {
	padding: 0 1.5rem 1.35rem;
	font-size: 0.9688rem;
	line-height: 1.65;
	color: var(--color-navy-dark);
	opacity: 0.78;
	margin: 0;
}

.home-faq__foot {
	text-align: center;
	margin: 2.25rem 0 0;
	font-size: 0.9375rem;
	opacity: 0.75;
}

.home-faq__foot a {
	font-weight: 600;
	color: var(--color-purple-primary);
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
	.home-portfolio__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	.home-hero__inner {
		/* Rebalanced 2026-07-26 (Ara: "empty space... eating from left
		   column side" — the headline text was cramped/overlapping the
		   background collage). Root cause: the 1.1fr/0.9fr split gave the
		   proof cluster ~714px inside the 1200px .wrap, far more than its
		   2-column masonry actually needs (~550-600px reads clean), while
		   squeezing the headline copy down to ~383px. Shifted the ratio
		   toward the copy column. */
		grid-template-columns: 1.15fr 1fr;
		gap: 2.5rem;
	}

	.home-portfolio__grid {
		grid-template-columns: repeat(4, 1fr);   /* 8 tiles → clean 2 rows of 4, like the reference */
	}
}

/* =====================================================================
   HOMEPAGE RESTRUCTURE — 2026-07-11
   New sections/behaviors added to match Feedbird's verified structure
   and Adam's 7 named fixes. Existing rules above are UNCHANGED — see
   docs/superpowers/changelogs/2026-07-11-incubesocial-generated-content.md
   for the full before/after and revert path (home.css.bak-homepage-
   restructure-* on the server).
   ===================================================================== */

/* ---------- Hero multi-shot collage (fix 1) ---------- */
.home-hero__shot-collage {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.22;
}

.home-hero__shot {
	position: absolute;
	object-fit: cover;
	border-radius: 16px;
	filter: saturate(0.85);
}

/* Collage scaled to 12 tiles (2026-07-25 — Ara: "at least twelve of them...
   different sizes... randomly moving... fade in right to left so it keeps
   moving"). Each tile's size/position/rotation/stagger comes from an
   inline style block per-instance (PHP data array, same --tile-delay
   custom-property technique already used by the creator-tile grid further
   down this page) so one generic rule + one keyframe covers all 12 —
   no more one CSS class per tile. Motion: each tile fades in, drifts
   right-to-left + very slightly down, then fades out and the cycle
   repeats — continuous per-tile motion (not a synchronized group), offset
   by --shot-delay so the whole collage never looks static or "stuck." */
.home-hero__shot {
	transform: rotate(var(--shot-rot, 0deg));
	animation: hero-shot-drift 14s ease-in-out infinite;
	animation-delay: var(--shot-delay, 0s);
}

@keyframes hero-shot-drift {
	0%   { opacity: 0;    transform: translate(36px, -6px) rotate(var(--shot-rot, 0deg)); }
	12%  { opacity: 1; }
	50%  { opacity: 1;    transform: translate(-18px, 8px) rotate(var(--shot-rot, 0deg)); }
	88%  { opacity: 1; }
	100% { opacity: 0;    transform: translate(-36px, 14px) rotate(var(--shot-rot, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
	.home-hero__shot { animation: none; }
}

@media (max-width: 900px) {
	.home-hero__shot-collage {
		display: none;
	}
}

/* ---------- Animated content strip (fix 3) ---------- */
/* Compacted 2026-07-25 (Ara: minimize the hero-to-strip gap "to a point
   where it's almost touching, but not touching"). The "Example content"
   badge used to sit in normal flow with its own margin-bottom, pushing
   every row down by that much — moved to an absolutely-positioned faded
   overlay on the strip's own top edge instead, so it costs zero layout
   height. Section padding trimmed to match (top padding was reserving
   space for the badge's flow height; not needed once it's an overlay). */
.home-strip {
	position: relative;
	padding-block: 0.5rem 1.25rem;
	background: var(--color-grey-light);
	overflow: hidden;
}

.home-strip .placeholder-flag--compact {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-align: center;
	width: fit-content;
	position: absolute;
	top: 0.5rem;
	/* Aligned left 2026-07-25 (Ara: move the badge to the left instead of
	   centered). Anchored at the same left inset .wrap uses so it lines up
	   with the section's normal content margin, not the raw edge. */
	left: 1.5rem;
	z-index: 2;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(108, 58, 237, 0.18);
	color: var(--color-navy-dark);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.01em;
	opacity: 0.85;
}

.home-strip__row {
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.home-strip__row:last-child {
	margin-bottom: 0;
}

.home-strip__track {
	display: flex;
	width: max-content;
	gap: 0.75rem;
	/* --strip-set-w is set by JS (site-fx.js) to the exact measured pixel
	   width of one copy-set (first half of the track's children). A plain
	   -50% keyframe assumes scrollWidth is perfectly divisible in half, but
	   subpixel tile-width rounding (214px tiles can render as
	   213.99147...px depending on zoom/DPI) made the true half-point drift
	   a few px from scrollWidth/2 — the animation "landed short" every
	   loop, producing a visible hard-cut/snap at the seam. Translating by
	   the real measured width instead of a computed percentage removes
	   the rounding error entirely, regardless of DPI/zoom. Falls back to
	   -50% if JS hasn't measured yet (first paint) so there's no FOUC gap.
	*/
	animation: home-strip-scroll-left 42s linear infinite;
	transform: translateX(0);
}

.home-strip__row--right .home-strip__track {
	animation-name: home-strip-scroll-right;
}

@keyframes home-strip-scroll-left {
	from { transform: translateX(0); }
	to { transform: translateX(var(--strip-set-w-neg, -50%)); }
}

@keyframes home-strip-scroll-right {
	from { transform: translateX(var(--strip-set-w-neg, -50%)); }
	to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.home-strip__track {
		animation: none;
	}
}

.home-strip__tile {
	position: relative;
	flex: 0 0 auto;
	/* Compacted 2026-07-26 (Ara: "compact it's size a bit") to 160x200,
	   then increased 10% same day (Ara: "this needs to be increased size
	   by 10%") to 176x220 — still ~18% smaller than the pre-compaction
	   original (214x268), same aspect ratio throughout. The marquee-seam
	   JS (site-fx.js measureStripTracks) reads live pixel widths at
	   runtime, so no math needs updating there. */
	width: 176px;
	height: 220px;
	border-radius: 13px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(13, 19, 43, 0.12);
}

.home-strip__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.home-strip__tag {
	position: absolute;
	left: 0.5rem;
	bottom: 0.5rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.625rem;
	letter-spacing: 0.05em;
	color: #fff;
	background: rgba(13, 19, 43, 0.65);
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

/* ---- New 12-tile headline overlay (2026-07-25) ----
   Live HTML text over the photo, matching the bold-headline-over-photo
   look of the original Canva tiles without baking anything into a static
   image (zero-cost, real editable copy — see the PHP array comment for
   why this replaced paid image generation). Scrim only covers the top
   portion so the tag chip's own bottom-edge scrim (already on every
   tile) isn't duplicated/doubled. */
.home-strip__tile--overlay .home-strip__scrim {
	position: absolute;
	inset: 0 0 auto 0;
	height: 65%;
	background: linear-gradient(to bottom, rgba(13, 19, 43, 0.78) 0%, rgba(13, 19, 43, 0.35) 55%, transparent 100%);
	pointer-events: none;
}

.home-strip__tile--overlay .home-strip__headline {
	position: absolute;
	top: 0.55rem;
	left: 0.55rem;
	right: 0.55rem;
	font-family: var(--font-heading);
	font-weight: 800;
	/* Scaled down with the tile-size compaction (2026-07-26: 0.85rem),
	   then back up 10% same day with the tile-size increase. */
	font-size: 0.935rem;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.home-strip__tile--overlay .home-strip__hook {
	position: absolute;
	top: 2.35rem;
	left: 0.55rem;
	right: 0.55rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.68rem;
	color: var(--color-pink-accent);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ---------- Portfolio real-image tiles (reused .swatch--image pattern) ---------- */
.home-portfolio-tile .swatch--image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- FAQ compacted (fix 5) ---------- */
.home-faq--compact {
	padding-block: var(--section-pad-sm);
}

.home-faq--compact .section-head {
	margin-bottom: 1.5rem;
}

.home-faq--compact .home-faq__list {
	gap: 0.5rem;
}

.home-faq--compact .home-faq-item summary {
	padding: 0.85rem 1.25rem;
}

/* ---------- Cross-page teasers with emoji (fix 6) ---------- */
.home-teasers {
	padding-block: var(--section-pad-sm);
	background: var(--color-grey-light);
}

.home-teasers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.home-teaser {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	background: #fff;
	border-radius: 14px;
	padding: 1.1rem 1.25rem;
	text-decoration: none;
	color: var(--color-navy-dark);
	border: 1px solid rgba(13, 19, 43, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-teaser:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(13, 19, 43, 0.1);
}

/* ---- Video-thumbnail teaser cards (2026-07-12) ----
   Featured animated Remotion loop on top, text body below. */
.home-teaser--video {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
}
.home-teaser__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--color-navy-dark);
	overflow: hidden;
}
.home-teaser__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.home-teaser--video:hover .home-teaser__video { transform: scale(1.05); }
.home-teaser__body {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.15rem;
}
.home-teaser--video .home-teaser__text { flex: 1; min-width: 0; }
.home-teaser--video .home-teaser__arrow { margin-left: 0; }

.home-teaser__text strong {
	display: block;
	font-size: 0.9375rem;
}

.home-teaser__text span {
	display: block;
	font-size: 0.8125rem;
	opacity: 0.7;
}

/* ============================================================
   AI-generated sample reviews (2026-07-11)
   4-card grid placed right after the content strip. On-brand
   testimonial cards with star ratings + colored-initial avatars.
   ============================================================ */

.home-reviews {
	/* Compacted (Adam: reviews good but taking too much space). 2026-07-12. */
	padding-block: 2.75rem;
	background: var(--color-grey-light);
}

/* Split header: title left, ⚠ disclaimer right (Adam, 2-col). 2026-07-12. */
.home-reviews__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem 2.5rem;
	align-items: end;
	margin-bottom: 1.75rem;
}
@media (min-width: 820px) {
	.home-reviews__head { grid-template-columns: 1.4fr 1fr; }
	.home-reviews__head .home-reviews__note { text-align: right; justify-self: end; margin: 0 0 0.4rem; }
}
.home-reviews__head-lead h2 { margin: 0; }
.home-reviews__head-lead { max-width: none; }

.home-reviews__note {
	font-size: 0.85rem;
	color: rgba(13, 19, 43, 0.6);
	line-height: 1.5;
	max-width: 44ch;
	margin: 0.35rem 0 0;
}

/* ---- Single auto-scrolling review ROW (Adam) ---- */
.home-reviews__marquee {
	overflow: hidden;
	position: relative;
	/* fade the edges so cards enter/exit softly */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.home-reviews__track {
	display: flex;
	gap: 1.25rem;
	width: max-content;
	/* 12 cards (6 + 6 duplicate) → translate -50% loops seamlessly, left→right */
	animation: home-reviews-scroll 48s linear infinite;
	will-change: transform;
}
@keyframes home-reviews-scroll {
	/* start shifted left (showing the duplicate half) and move RIGHT to 0, so
	   the row visually travels left→right as Adam asked. */
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}
.home-reviews__marquee:hover .home-reviews__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.home-reviews__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

.home-review-card {
	background: #fff;
	border: 1px solid rgba(13, 19, 43, 0.07);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.35rem;
	margin: 0;
	box-shadow: 0 1px 2px rgba(13, 19, 43, 0.04), 0 10px 24px rgba(13, 19, 43, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	/* Fixed width so the cards form a clean scrolling row. */
	flex: 0 0 320px;
	width: 320px;
}

.home-review-card__stars {
	color: #F5B921; /* on-brand gold (was orange-accent, off-palette) */
	font-size: 1rem;
	letter-spacing: 0.15em;
	line-height: 1;
}

.home-review-card__quote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--color-navy-dark);
}

/* Read More: long quotes clamp to 3 lines to save height; the toggle reveals
   the rest (Adam). The button is only rendered on long quotes (.is-clampable). */
.home-review-card.is-clampable .home-review-card__quote {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.home-review-card.is-expanded .home-review-card__quote {
	-webkit-line-clamp: unset;
	overflow: visible;
}
.home-review-card__more {
	align-self: flex-start;
	background: none;
	border: none;
	/* 2026-08-06 mobile audit: was padding:0 / margin:-0.35rem 0 0, giving a
	   14px-tall tap target (below WCAG 2.5.5's 24px minimum). Padding grows
	   the real hit box; the enlarged negative margin cancels it out on the
	   visible box so text position/spacing is unchanged. */
	padding: 0.4rem 0;
	margin: -0.75rem 0 -0.4rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--color-purple-primary);
	cursor: pointer;
}
.home-review-card__more:hover { color: var(--color-pink-accent); }

.home-review-card__who {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.home-review-card__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

.home-review-card__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.home-review-card__meta strong {
	font-size: 0.9375rem;
	color: var(--color-navy-dark);
}

.home-review-card__meta span {
	font-size: 0.8125rem;
	color: rgba(13, 19, 43, 0.6);
}

/* ============================================================
   Comparison table — IncubeSocial vs others (2026-07-12)
   ============================================================ */
.home-compare {
	padding-block: var(--section-pad-lg);
	background: #fff;
}

/* Compacted 2026-07-26 (Ara: "compact this section" on the Why Us
   comparison table) — head-to-table gap, cell padding, and base font
   size all cut. */
.home-compare__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 1.5rem;
}

.home-compare__table {
	width: 100%;
	min-width: 720px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.85rem;
}

.home-compare__table th,
.home-compare__table td {
	padding: 0.6rem 0.85rem;
	text-align: center;
	border-bottom: 1px solid rgba(13, 19, 43, 0.08);
}

.home-compare__table thead th {
	border-bottom: 2px solid rgba(13, 19, 43, 0.12);
	vertical-align: bottom;
}

.home-compare__table tbody th[scope="row"] {
	text-align: left;
	font-weight: 600;
	color: var(--color-navy-dark);
	white-space: normal;
}

.home-compare__colname {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-navy-dark);
}

.home-compare__colprice {
	display: block;
	font-size: 0.7rem;
	color: #63677A;
	margin-top: 0.15rem;
}

/* Featured IncubeSocial column: gradient-tinted highlight down the whole column. */
.home-compare__col--featured {
	background: linear-gradient(rgba(108, 58, 237, 0.06), rgba(108, 58, 237, 0.06));
	position: relative;
}

.home-compare__table thead .home-compare__col--featured {
	border-top: 3px solid transparent;
	border-image: var(--gradient-signature) 1;
	border-radius: 12px 12px 0 0;
}

.home-compare__table thead .home-compare__col--featured .home-compare__colname {
	background: var(--gradient-signature);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cmp-yes { color: #0F7A43; font-weight: 800; font-size: 1.1rem; }
.cmp-no  { color: #B3253C; font-size: 1rem; }
.cmp-maybe { color: var(--color-orange-readable); font-weight: 700; }

/* Hero kicker — "Improve Your [industry] Social Media Game" (2026-07-12).
   Sits above the H1, ties the hero to the Industry Cube system. The accent
   word rotates through industries via site-fx.js [data-rotate]. */
.home-hero__kicker {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(0.95rem, 2.4vw, 1.2rem);
	letter-spacing: 0.01em;
	color: #fff;
	opacity: 0.92;
	margin: 0 0 0.75rem;
	text-shadow: 0 1px 12px rgba(13, 19, 43, 0.35);
}
.home-hero__kicker .accent {
	background: var(--gradient-signature);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 800;
}

/* Full-width header band (compare section): heading + sub-copy each span the
   full width beneath, comfortable and left-aligned to the table, instead of a
   narrow left column that forces the heading to wrap into 4 cramped lines
   (Adam, 2026-07-12). Single column — overrides the --split 2-col grid. */
.section-head--full {
	display: block;
	margin-bottom: 2.25rem;
}
.section-head--full .section-head__lead { max-width: none; }
.section-head--full .section-head__lead h2 {
	/* Wide, so it settles into ~2 comfortable lines instead of 4 narrow ones. */
	max-width: 22ch;
	margin: 0;
}
.section-head--full .section-head__aside {
	color: var(--color-navy-dark);
	opacity: 0.72;
	font-size: 1.0625rem;
	line-height: 1.55;
	text-align: left;
	max-width: 60ch;     /* spans wide under the heading, not a stubby center block */
	margin: 0.9rem 0 0;
}
@media (min-width: 900px) {
	.section-head--full .section-head__lead h2 { max-width: 30ch; }
}

/* Featured-column ✓ marks gently pulse so the eye is drawn to IncubeSocial's
   advantages — "something is always moving" without flickering the whole
   table (Adam: animate the checkmarks fading in/out). 2026-07-12. */
@keyframes cmp-yes-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.22); opacity: 0.7; }
}
.home-compare__col--featured .cmp-yes {
	display: inline-block;
	animation: cmp-yes-pulse 2.4s ease-in-out infinite;
	transform-origin: center;
}
/* Stagger each row so they ripple down the column instead of blinking in unison. */
.home-compare__table tbody tr:nth-child(1) .home-compare__col--featured .cmp-yes { animation-delay: 0s; }
.home-compare__table tbody tr:nth-child(2) .home-compare__col--featured .cmp-yes { animation-delay: 0.2s; }
.home-compare__table tbody tr:nth-child(3) .home-compare__col--featured .cmp-yes { animation-delay: 0.4s; }
.home-compare__table tbody tr:nth-child(4) .home-compare__col--featured .cmp-yes { animation-delay: 0.6s; }
.home-compare__table tbody tr:nth-child(5) .home-compare__col--featured .cmp-yes { animation-delay: 0.8s; }
.home-compare__table tbody tr:nth-child(6) .home-compare__col--featured .cmp-yes { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
	.home-compare__col--featured .cmp-yes { animation: none; }
}

/* Compare section — tighter top/bottom (save height). */
.home-compare { padding-block: 2.5rem; }

/* =========================================================================
   Unified pricing cards + billing-cycle tabs (2026-07-12).
   Replaces the asymmetric accordion layout (Starter/Prime were collapsed).
   All three are now equal cards with hover lift + a billing toggle that
   swaps the per-month price via site-fx.js.
   ========================================================================= */

/* =========================================================================
   #77 — FAQ multi-column + creative cross-links + footer-attached CTA.
   2026-07-12.
   ========================================================================= */

/* FAQ as a MASONRY column flow (2026-07-24, Ara: "deploy masonry on the home
   page to fix gaps and spaces" — same proven fix already shipped on the
   portal dashboard/settings/subscription pages). Was a CSS grid with
   align-items:start — fine while every <details> is collapsed, but any
   answer left open (different question/answer lengths per item, and a
   user CAN open more than one at once) leaves ragged empty space below the
   shorter neighbors in the same row, since grid rows only size to the
   tallest cell in THAT row. column-count flows items into continuous
   columns instead of rows, so a tall opened item never strands gaps next
   to short ones. break-inside:avoid keeps each question+answer whole. */
/* Rebuilt as a real CSS grid 2026-07-25 (Ara: "minimize the space used in
   questions section... one row, three column"). The old column-count
   approach flowed content top-to-bottom per column (masonry-style), which
   at 6 items meant 2 stacked per column and ~490px of height. A real grid
   with each item collapsed to its closed <details> summary height packs
   far tighter — 3 columns, 2 short rows, not a tall uneven column-flow. */
.home-faq__list--cols {
	max-width: 1100px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.65rem;
}
@media (min-width: 680px) {
	.home-faq__list--cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.home-faq__list--cols { grid-template-columns: repeat(3, 1fr); }
}
.home-faq__list--cols .home-faq-item {
	margin: 0;
}
.home-faq__list--cols .home-faq-item__body a {
	color: var(--color-purple-primary);
	font-weight: 600;
}

/* Cross-link teasers: add a trailing arrow that slides on hover + a featured
   variant for the Industries link (gradient-tinted, stands out). */
.home-teaser { position: relative; }
.home-teaser__arrow {
	margin-left: auto;
	font-size: 1.1rem;
	color: var(--color-purple-primary);
	opacity: 0.55;
	transition: transform 0.18s ease, opacity 0.18s ease;
	flex-shrink: 0;
}
.home-teaser:hover .home-teaser__arrow {
	transform: translateX(4px);
	opacity: 1;
}
.home-teaser--feature {
	background:
		linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
		var(--gradient-signature);
	border-color: rgba(108, 58, 237, 0.30);
}
.home-teaser--feature .home-teaser__arrow { color: var(--color-pink-accent); opacity: 0.9; }

/* Comparison head: sub-copy moved to the RIGHT side, opposite the heading
   (Adam, 2026-07-12). Overrides the --full single-column treatment for this
   section only. Heading stays wide (2 lines), aside sits right-aligned. */
/* ROOT FIX 2026-07-12: the base .section-head caps width at 640px, which the
   compare head inherited — so it floated in the left half of the row while the
   table below spanned ~1150px, leaving the right third empty and cramming both
   columns (heading → 4 lines, aside → 7 lines). Force the head to span the FULL
   .wrap width at all sizes so the two columns get real room. */
.home-compare__head.section-head--full {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
@media (min-width: 860px) {
	.home-compare__head.section-head--full {
		display: grid;
		/* Heading column wide enough for ~2 lines; sub-copy column wide enough
		   for ~3. Both now stretch across the full-width row. 2026-07-12. */
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 0.5rem 4rem;
		align-items: center;
	}
	.home-compare__head.section-head--full .section-head__lead { grid-column: 1; min-width: 0; }
	.home-compare__head.section-head--full .section-head__lead h2 {
		max-width: none;   /* heading uses the full wide column → 2 lines, not 4 */
	}
	.home-compare__head.section-head--full .section-head__aside {
		grid-column: 2;
		text-align: left;      /* left-align reads cleaner in a wide column than ragged-right */
		justify-self: start;
		align-self: center;
		margin-top: 0;
		max-width: none;       /* fill the column so it's ~3 lines, not a narrow 7 */
	}
}

/* ---- Central Promise band (BPD anchor, new 2026-07-25) ----
   Sits after Reviews (moved off its original post-Hero slot the same day
   — content strip must always be the section directly after Hero).
   Deliberately light — a lead sentence + 3 stat cards, no photography —
   so it reads as a stated promise, not another visual-heavy section
   competing with the hero. .--compact variant added same day: Ara flagged
   the section as taking too much vertical space (lead line wrapping 2
   rows) — widened the lead's max-width (it now matches the shortened
   copy on one line at normal viewport widths instead of wrapping) and
   cut every spacing value below (section padding, lead margin, card
   padding, chart height) to a tighter scale. */
.home-promise {
	padding-block: var(--section-pad-sm);
}

.home-promise--compact {
	padding-block: 2.5rem;
}

.home-promise__lead {
	max-width: 58ch;
	margin: 0 auto 1.5rem;
	text-align: center;
	font-size: clamp(1.125rem, 2.2vw, 1.4rem);
	line-height: 1.3;
	color: var(--color-navy-dark);
}

.home-promise__lead strong {
	color: var(--color-purple-primary);
}

.home-promise__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 800px) {
	.home-promise__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.home-promise-stat {
	background: #fff;
	border: 1px solid rgba(13, 19, 43, 0.08);
	border-radius: var(--radius-lg);
	padding: 1.15rem 1.25rem 1.35rem;
	text-align: left;
}

.home-promise-stat__chart {
	height: 32px;
	margin-bottom: 0.6rem;
}

.home-promise-stat__chart svg {
	width: 60px;
	height: 32px;
}

.home-promise-stat__chart--rating {
	height: 32px;
	display: flex;
	align-items: center;
	color: var(--color-purple-primary);
}

.home-promise-stat__num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--color-navy-dark);
	margin: 0 0 0.3rem;
}

.home-promise-stat__label {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--color-navy-dark);
	opacity: 0.78;
	margin: 0;
}

/* ---- Equal inter-section spacing (2026-07-25) ----
   Ara: the gap between sections varies visibly (screenshot showed
   Reviews->Promise noticeably looser than its neighbors) and wants every
   section's top/bottom padding matched to the SAME minimal value, not
   each section's own one-off history. Before this: 8 different values
   across 8 sections, several asymmetric (top != bottom), one dead
   duplicate rule (.home-compare was declared twice — the earlier
   --section-pad-lg rule at the top of this file was silently overridden
   by a later flat 2.5rem rule; same source-order gotcha already
   documented for this file's SEO grid override). Appended LAST so it
   wins over every earlier per-section padding-block/padding-top/
   padding-bottom declaration above, without deleting their (still
   informative) history comments. Every section gets the same flat
   2.5rem block padding — matches the tightest value any section had
   already been deliberately compacted to (Reviews, Promise, Compare's
   effective value), so this is a "raise the floor to the existing
   minimum," not a brand-new number. Hero, Strip and Why-It-Matters are
   deliberately excluded: Hero is a full-bleed visual band with its own
   top/bottom asymmetry by design (video bg + dashboard card), Strip is
   an edge-to-edge marquee, and Why-It-Matters' asymmetric 1.5rem/sm
   split is intentional (tight gap under Compare, more room before
   Portfolio) — equalizing every section literally would flatten those
   deliberate exceptions along with the accidental ones. */
.home-reviews,
.home-promise,
.home-promise--compact,
.home-compare,
.home-portfolio,
.home-faq,
.home-teasers {
	padding-block: 2.5rem;
}

/* ---- Hero proof cluster V4 — FULL REBUILD (2026-07-26) ----
   Ara: "This section, I want you to completely remove, and I want you to
   completely rebuild" (screenshot of the V3 bento cluster) — after 2 prior
   fix rounds (from-scratch CSS-only rebuild, then perpetual-animation
   removal) still reported a flicker/glitch here. Confirmed via
   AskUserQuestion: the flicker is the actual reason for the rebuild (not
   aesthetics), same 4 proof points stay, new layout/container.
   This version is DELIBERATELY minimal on animation — a single one-shot
   fade-up on the outer container only, nothing per-card, nothing
   infinite, no JS reveal/observer dependency of any kind (the previous
   flicker theories all traced back to some reveal/animation system
   getting out of sync with itself — removing every candidate at once
   rather than patching the same mechanism a 3rd time). If a flicker is
   STILL seen after this, it is conclusively NOT this cluster's own
   animation, since there is now only one and it runs once — the cause
   would have to be elsewhere on the page (the 12-video collage, the
   counter's rAF loop, or something outside this component entirely). */
.hero-proof {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	opacity: 0;
	animation: hero-proof-in 0.5s ease-out forwards;
}

@keyframes hero-proof-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-proof { opacity: 1; animation: none; }
}

/* Masonry-STYLE layout, take 3 (2026-07-26). CSS multi-column was
   abandoned entirely after it caused a genuine bad regression: with
   `column-fill: auto` (needed to stop `balance` from padding empty
   space, see the removed comment history) and NO explicit height on the
   container, multi-column degenerates to filling ONE column completely
   before ever starting the second — since nothing constrains "how full
   is full," every card piled into column 1, stretching the whole hero
   to ~1150px tall with column 2 sitting completely empty ("why is it
   displayed vertically" — Ara, looking at the real result of this).
   `column-fill: auto` requires a fixed/constrained height to actually
   balance across columns, which this container doesn't have and
   shouldn't need to fake.
   Replaced with a plain 2-column CSS GRID instead — simpler and exactly
   fits this DOM (`.hero-proof` has exactly 2 top-level children:
   `.hero-proof__card--queue` and `.hero-proof__stack`, no multicol
   trickery needed at all). `align-items: start` (NOT stretch) is what
   actually delivers "each card keeps its own natural height" — the
   original ask — without any of multicol's height-matching footguns. */
@media (min-width: 900px) {
	.hero-proof {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.65rem;
		/* Changed start -> stretch (2026-07-26, Ara: "make the right side
		   elements match the height of left side so that everything is
		   balanced and equal" — the 3-card stack was measurably taller
		   than the queue card, ~591px vs ~483px, a real visible mismatch
		   in the screenshot). `stretch` makes BOTH grid items fill the
		   row's full height; `.hero-proof__stack`'s own flex column then
		   distributes that height across its 3 children (see
		   justify-content below) so the extra space doesn't just sit as
		   one big gap at the bottom of the stack. */
		align-items: stretch;
		/* min-width:0 kept from the multicol version — .hero-proof is
		   itself a grid item of .home-hero__inner, and a nested grid with
		   real card content can still trip the same grid-item
		   auto-min-width trap documented above. Cheap insurance, verify
		   before removing. */
		min-width: 0;
	}
	.hero-proof__stack {
		justify-content: space-between;
	}
}

.hero-proof__stack {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

/* Compacted 2026-07-26 (Ara: "this needs to be compacted" on the hero
   proof cluster) — padding cut from 1.1rem/1.25rem. */
.hero-proof__card {
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(13, 19, 43, 0.06);
	padding: 0.85rem 1rem;
	box-shadow: 0 12px 32px rgba(13, 19, 43, 0.08);
}

.hero-proof__card--queue {
	display: flex;
	flex-direction: column;
	/* Tighter padding + narrower badge/status pills than the shared
	   .hero-proof__card default (2026-07-26) — the queue card carries the
	   longest real text of any card here (post titles like "Behind-the-
	   scenes reel", "Customer review carousel"), so it needs more of its
	   own width back for content rather than chrome once the grid gives
	   the whole cluster a narrower column than the old layout did.
	   Padding cut again same day (Ara: "this needs to be compacted"). */
	padding: 0.85rem 0.85rem;
}

.hero-proof__card--queue .hero-proof__card-head {
	font-size: 0.75rem;
}

.hero-proof__card--queue .hero-proof__badge {
	font-size: 0.62rem;
	padding: 0.2rem 0.4rem;
}

.hero-proof__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-navy-dark);
	margin-bottom: 0.5rem;
}

.hero-proof__badge {
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--color-purple-primary);
	background: var(--accent-soft, rgba(108, 58, 237, 0.1));
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	white-space: nowrap;
}

/* Fixed 2026-07-26 (Ara: "too big and not correct with spacing" —
   screenshot showed huge dead gaps between queue rows). Root cause:
   `justify-content: space-between` + `flex: 1` stretched the 4 rows apart
   to fill whatever height the tall queue card happened to get from its
   grid neighbor, instead of sitting as a tight compact list. Removed both
   — the list now sizes to its own content and stays compact regardless
   of the card's height; any leftover space collects at the bottom via
   margin-top:auto on the .hero-proof__foot line instead of being smeared
   between every row. */
.hero-proof__queue {
	list-style: none;
	margin: 0 0 0.6rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.hero-proof__queue li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.hero-proof__thumb,
.hero-proof__status {
	margin-top: 0.1rem;
}

.hero-proof__thumb {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	object-fit: cover;
	flex: none;
	display: block;
}

.hero-proof__queue-meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	font-size: 0.78rem;
}
/* Changed from truncating nowrap+ellipsis to a 2-line wrap (2026-07-26,
   Ara: names were cutting off way too early — "Behind-th...",
   "Customer r..." — even at full card width). The post titles are real
   short phrases (2-4 words); letting them wrap onto a 2nd line uses the
   row's existing vertical space instead of hiding half the text. */
.hero-proof__queue-meta strong {
	color: var(--color-navy-dark);
	font-weight: 700;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.25;
}
.hero-proof__queue-meta span {
	color: var(--color-navy-dark);
	opacity: 0.6;
	font-size: 0.72rem;
}

.hero-proof__status {
	flex: none;
	font-size: 0.68rem;
	font-weight: 700;
	/* 2026-08-16 audit: #16A34A on this 10% tint over the white card is only
	   2.96:1. Darkened the text to #15803D (4.72:1); the tint is unchanged so
	   the pill looks the same, it is just actually readable. */
	color: var(--pass, #15803D);
	background: rgba(22, 163, 74, 0.1);
	padding: 0.2rem 0.4rem;
	border-radius: 999px;
	white-space: nowrap;
}

.hero-proof__foot {
	font-size: 0.85rem;
	color: var(--color-navy-dark);
	opacity: 0.8;
	margin: 0;
	margin-top: auto;
	padding-top: 0.85rem;
}

.hero-proof__stat-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-navy-dark);
	opacity: 0.75;
	margin-bottom: 0.5rem;
}

.hero-proof__stat-row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.hero-proof__stat-num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.85rem;
	color: var(--color-navy-dark);
	white-space: nowrap;
}

.hero-proof__spark {
	width: 100%;
	height: 28px;
	flex: 1 1 auto;
}

.hero-proof__stat-delta {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-purple-primary);
}

.hero-proof__meter {
	display: flex;
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 0.6rem;
}

.hero-proof__creator-row {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.65rem;
}
.hero-proof__creator {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	overflow: hidden;
	flex: none;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(13, 19, 43, 0.08);
}
.hero-proof__creator img { width: 100%; height: 100%; object-fit: cover; display: block; }