/*
 * PrepGro Theme — front page (2026-08 redesign).
 *
 * Six sections plus the addendum-A5 photo band, in order: hero → trust strip →
 * "Three parts. One loop." → report showcase → tutor band → photo band → FAQ.
 * The old twelve-section front page is gone, including its closing gradient
 * CTA — the redesign has no decorative gradients and lets the footer close.
 *
 * Everything here reads the token layer. Phase colours (Evaluate / Elevate /
 * Excel) appear ONLY as small chip labels — never a section background, a card
 * border or a button fill.
 *
 * Responsive strategy is fluid, not breakpoint-driven: every multi-column grid
 * is `repeat(auto-fit, minmax(min(100%, Npx), 1fr))` and type/padding use
 * clamp(). The one exception is the photo band, which is a fixed 2/1 ratio.
 */

/* ── Shared page furniture ─────────────────────────────────────────── */
.pgh-container { max-width: 1160px; margin-inline: auto; }
.pgh-container--narrow { max-width: 760px; }
.pgh-section { padding: clamp(32px, 4.5vw, 56px) clamp(18px, 4vw, 32px); }
.pgh-section--flush { padding-top: 0; }
.pgh-section--tight { padding-top: 0; }
.pgh-center { text-align: center; }
.pgh-center--head { max-width: 640px; margin: 0 auto 32px; }

.pgh-mono { font-family: var(--pge-font-mono); font-weight: 700; }

.pgh-h2 {
	font-size: clamp(30px, 4.2vw, 44px);
	line-height: 1.08;
	letter-spacing: -.03em;
	font-weight: 600;
	color: var(--pge-color-ink);
	margin: 18px 0 12px;
}
.pgh-h2--md { font-size: 38px; line-height: 1.1; }
.pgh-h2--sm { font-size: clamp(28px, 4vw, 40px); margin-bottom: 0; }
.pgh-h2--ondark { color: #fff; }
.pgh-lead { font-size: 17px; line-height: 1.6; color: var(--pge-ink-500); margin: 0; }

.pgh-chip {
	display: inline-block;
	background: var(--pge-gray-100);
	border: 1px solid var(--pge-color-line);
	border-radius: var(--pge-radius-pill);
	padding: 6px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pge-ink-500);
}
/* On the report panel the ground is already --neutral-50, so the chip lifts
   to white instead. */
.pgh-chip--onpanel { background: #fff; }
.pgh-chip--ondark {
	background: rgba(255,255,255,.07);
	border-color: rgba(107,164,255,.24);
	color: var(--pge-color-on-dark);
}

/* Phase labels — small chip use only. */
.pgh-phase {
	display: inline-flex;
	align-self: flex-start;
	border-radius: var(--pge-radius-pill);
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
/* Elevate was #edf6ff / --blue-500 — a blue tint one ramp step off Evaluate's,
   so the two badges read as one colour and the row said "two blue things and
   an amber one" instead of naming three pillars. All three now resolve from
   the --pgt-pillar-* globals in theme.css, the same source the nav, the
   dropdowns and the module pages read. */
.pgh-phase--evaluate { background: var(--blue-50); color: var(--pgt-pillar-evaluate); }
.pgh-phase--elevate  { background: var(--teal-50); color: var(--pgt-pillar-elevate); }
.pgh-phase--excel    { background: var(--amber-50); color: var(--pgt-pillar-excel); }

/* Anything else inside a pillar card takes that pillar's hue — the footer
   link most visibly, which was brand blue on all three.
   Scoped with :has() off the badge the card already carries, rather than
   adding a modifier class: front-page.html is hand-authored block markup that
   another workstream owns, and this keeps the styling entirely in CSS. If a
   browser without :has() ever matters again, the links simply stay blue. */
.pgh-loopcard:has(.pgh-phase--evaluate) { --pgh-pillar: var(--pgt-pillar-evaluate); }
.pgh-loopcard:has(.pgh-phase--elevate)  { --pgh-pillar: var(--pgt-pillar-elevate); }
.pgh-loopcard:has(.pgh-phase--excel)    { --pgh-pillar: var(--pgt-pillar-excel); }
.pgh-loopcard a { color: var(--pgh-pillar, var(--pge-color-primary)); }

/* Progress tracks — one shape, colour passed in as --c. */
.pgh-track {
	height: 8px;
	border-radius: var(--pge-radius-pill);
	background: var(--pge-gray-100);
	overflow: hidden;
}
.pgh-track--sm { height: 6px; }
.pgh-track__fill { display: block; height: 100%; width: var(--w, 0%); background: var(--c, var(--blue-600)); border-radius: inherit; }
.pgh-track__fill--brand { background: linear-gradient(90deg, var(--blue-800), var(--blue-500)); }

.pgh-linkarrow {
	margin-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--pge-color-primary);
	text-decoration: none;
}
.pgh-linkarrow svg { width: 15px; height: 15px; }
.pgh-linkarrow:hover { color: var(--pge-color-primary-strong); text-decoration: none; }

.pgh-avatar {
	width: 36px; height: 36px; flex: none;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--blue-800), var(--blue-400));
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
}
.pgh-avatar--lg { width: 42px; height: 42px; font-size: 15px; }

/* ── 1. Hero ───────────────────────────────────────────────────────── */
.pgh-hero {
	position: relative;
	padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 32px) 74px;
	background:
		radial-gradient(var(--pge-gray-200) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(180deg, var(--pge-gray-50) 0%, #fff 88%);
	overflow: hidden;
}
.pgh-hero__copy { position: relative; z-index: 3; max-width: 820px; margin-inline: auto; text-align: center; }
/* Country accent layer — flag-colour ambient tint on the hero, from the
   --pgt-flag-* custom properties Chrome::print_flag_vars() emits for the
   active pack (see docs/country-theming.md in the engine). The engine stamps
   body.brand-region-{cc} for every country; the US keeps its own authored
   accents in theme.css, every other pack shares this one rule. Opacities
   match the US block so each country feels like the same design. */
body[class*="brand-region-"]:not(.brand-region-usa) .pgh-hero {
	background:
		radial-gradient(1100px 520px at 108% -12%, rgba(var(--pgt-flag-tint-1-rgb, 37, 99, 235), .07), transparent 62%),
		radial-gradient(900px 520px at -12% 14%, rgba(var(--pgt-flag-tint-2-rgb, var(--pgt-flag-tint-1-rgb, 37, 99, 235)), .05), transparent 55%),
		radial-gradient(var(--pge-gray-200) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(180deg, var(--pge-gray-50) 0%, #fff 88%);
}
/* Pack-authored landmark line-art behind the hero (below copy z3 / floats z2). */
.pgh-hero__skyline {
	position: absolute;
	left: 0; right: 0; bottom: -3px;
	z-index: 1;
	color: var(--pge-color-body);
	opacity: 0.07;
	pointer-events: none;
}
.pgh-hero__skyline svg { display: block; width: max(100%, 900px); height: auto; margin-inline: auto; }
.pgh-statuschip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-radius: var(--pge-radius-pill);
	padding: 7px 15px 7px 11px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pge-color-body);
	white-space: nowrap;
	box-shadow: var(--pge-shadow-sm);
}
.pgh-statuschip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); }
/* Country kicker ([pgt_home_kicker]): the topbar's flag chip + the pack's
   homepage.eyebrow, above the status chip. Only a pack that authors an
   eyebrow gets it; the US front page renders byte for byte without. */
.pgh-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--pge-ink-500);
}
/* The chip hides itself under 640px for the topbar's sake; in the hero the
   flag is the point, so keep it and drop only the country name. */
.pgh-hero .pgh-hero__kicker .pgt-countrychip { display: inline-flex; padding: 5px 10px 5px 6px; }
.pgh-hero .pgh-hero__kicker .pgt-countrychip__code { display: inline; }
@media (max-width: 640px) {
	.pgh-hero .pgh-hero__kicker .pgt-countrychip { padding: 5px 6px; }
	.pgh-hero .pgh-hero__kicker .pgt-countrychip__code { display: none; }
}
.pgh-hero__title {
	font-size: clamp(34px, 6.4vw, 64px);
	line-height: 1.04;
	letter-spacing: -.035em;
	font-weight: 600;
	color: var(--pge-color-ink);
	margin: 26px 0 0;
}
.pgh-hero__quiet { color: var(--neutral-400); }
.pgh-hero__sub {
	font-size: clamp(16px, 1.6vw, 18.5px);
	line-height: 1.6;
	color: var(--pge-ink-500);
	max-width: 50ch;
	margin: 20px auto 0;
}
.pgh-hero__cta { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* Floating product cards. Critical: their OWN row below the copy, never
   absolutely positioned behind it — an earlier iteration overlapped the
   headline and was unreadable. */
.pgh-floats {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 44px auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 18px;
	align-items: end;
}
.pgh-fcard {
	background: #fff;
	border: 1px solid var(--pge-gray-100);
	border-radius: 18px;
	padding: 16px;
	box-shadow: 0 14px 30px -12px rgba(3,5,15,.18), 0 2px 5px rgba(3,5,15,.05);
	display: flex;
	flex-direction: column;
	transform: var(--r);
	animation: pgFloat var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
}
.pgh-fcard--1 { --r: rotate(-2.5deg); --dur: 7s;   --delay: 0s; }
.pgh-fcard--2 { --r: rotate(1.5deg);  --dur: 9s;   --delay: .8s; }
.pgh-fcard--3 { --r: rotate(-1.5deg); --dur: 8s;   --delay: .4s; }
.pgh-fcard--4 { --r: rotate(2.5deg);  --dur: 7.5s; --delay: 1.2s; }
@keyframes pgFloat {
	0%, 100% { transform: var(--r) translateY(0); }
	50%      { transform: var(--r) translateY(-7px); }
}
/* The static rotation stays; only the drift stops. */
@media (prefers-reduced-motion: reduce) {
	.pgh-fcard { animation: none; }
}
.pgh-fcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pgh-fcard__label { font-size: 12.5px; font-weight: 700; color: var(--pge-color-ink); }
.pgh-fcard__pct { font-size: 12px; color: var(--pge-color-primary); }
.pgh-fcard__note { margin: 11px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--pge-ink-500); }
.pgh-fcard__title { margin: 8px 0 12px; font-size: 13.5px; font-weight: 600; color: var(--pge-color-ink); }
.pgh-skills { display: grid; gap: 9px; }
.pgh-skill { display: grid; grid-template-columns: 1fr 54px; align-items: center; gap: 9px; font-size: 12px; color: var(--pge-ink-500); }
.pgh-tasks { display: grid; gap: 8px; }
.pgh-task { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--pge-color-body); }
.pgh-tick {
	width: 16px; height: 16px; flex: none;
	border-radius: var(--pge-radius-sm);
	background: var(--pge-gray-100);
	color: var(--neutral-400);
	display: inline-flex; align-items: center; justify-content: center;
}
.pgh-tick svg { width: 10px; height: 10px; }
.pgh-task.is-done .pgh-tick { background: var(--green-600); color: #fff; }
.pgh-tutorline { display: flex; align-items: center; gap: 11px; margin-top: 11px; }
.pgh-tutorline__copy { min-width: 0; }
.pgh-tutorline__name { display: block; font-size: 13px; font-weight: 600; color: var(--pge-color-ink); }
.pgh-tutorline__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--pge-ink-500); }
.pgh-fcard__foot {
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var(--pge-gray-100);
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--pge-ink-500);
}
.pgh-fcard__foot .pgh-mono { color: var(--pge-color-ink); }
.pgh-up { color: var(--green-600); }

/* ── 2. Trust strip ────────────────────────────────────────────────── */
.pgh-trust {
	padding: 22px clamp(18px, 4vw, 32px);
	background: var(--pge-gray-50);
	border-top: 1px solid var(--pge-gray-100);
	border-bottom: 1px solid var(--pge-gray-100);
}
.pgh-trust__row {
	max-width: 1000px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.pgh-trust__item { display: flex; align-items: baseline; gap: 8px; }
.pgh-trust__n { font-size: 19px; color: var(--pge-color-ink); }
.pgh-trust__l { font-size: 13.5px; color: var(--pge-ink-500); }
.pgh-trust__l--strong { font-size: 19px; font-weight: 700; color: var(--pge-color-ink); }

/* ── 3. Three parts. One loop. ─────────────────────────────────────── */
.pgh-loop {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	gap: 18px;
}
.pgh-loopcard {
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-radius: 22px;
	padding: 26px 24px 24px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(3,5,15,.04);
}
.pgh-loopcard h3 { font-size: 23px; letter-spacing: -.02em; font-weight: 600; color: var(--pge-color-ink); margin: 16px 0 8px; }
.pgh-loopcard p { font-size: 15px; line-height: 1.6; color: var(--pge-ink-500); margin: 0 0 20px; }
.pgh-statblock {
	margin-top: auto;
	border-radius: 16px;
	background: var(--pge-gray-50);
	border: 1px solid var(--pge-gray-100);
	padding: 16px;
}
.pgh-statrow { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--pge-color-body); }
.pgh-statrow .pgh-mono { font-weight: 600; color: var(--pge-color-ink); }

/* ── 4. Report showcase ────────────────────────────────────────────── */
.pgh-reportpanel {
	max-width: 1160px;
	margin-inline: auto;
	background: var(--pge-gray-50);
	border: 1px solid var(--pge-color-line);
	border-radius: 26px;
	padding: clamp(24px, 4vw, 52px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(28px, 3vw, 48px);
	align-items: center;
}
.pgh-reportpanel__copy .pgh-lead { margin-bottom: 22px; }
.pgh-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pgh-checklist li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.5; color: var(--pge-color-body); }
.pgh-checklist__tick {
	width: 20px; height: 20px; flex: none;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--blue-100);
	color: var(--blue-600);
	display: inline-flex; align-items: center; justify-content: center;
}
.pgh-checklist__tick svg { width: 11px; height: 11px; }

.pgh-reportcard {
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-radius: 22px;
	padding: 24px;
	box-shadow: 0 2px 4px rgba(3,5,15,.04), 0 24px 48px -24px rgba(18,38,200,.2);
}
.pgh-reportcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pgh-reportcard__title { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--pge-color-ink); }
.pgh-reportcard__meta { margin: 3px 0 0; font-size: 12.5px; color: var(--pge-ink-400); }
.pgh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.pgh-tile { background: var(--pge-gray-50); border: 1px solid var(--pge-gray-100); border-radius: 14px; padding: 14px; }
.pgh-tile__label { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pge-ink-400); }
.pgh-tile__value { margin: 6px 0 0; font-family: var(--pge-font-mono); font-size: 26px; font-weight: 700; color: var(--pge-color-ink); }
.pgh-tile__value--accent { color: var(--pge-color-primary); }
.pgh-reportskills { display: grid; gap: 13px; }
.pgh-reportskill { display: grid; grid-template-columns: minmax(0, 1fr) 110px 44px; align-items: center; gap: 12px; }
/* break-word is the guarantee: the label column is the only flexible one, so
   without it a single long skill name ("Proportional reasoning") overflows
   rather than wrapping, whatever the breakpoints do. */
.pgh-reportskill > span:first-child { font-size: 13.5px; color: var(--pge-color-body); overflow-wrap: break-word; }
.pgh-reportskill .pgh-track { height: 7px; }
.pgh-reportskill .pgh-mono { font-size: 12.5px; font-weight: 600; color: var(--pge-ink-500); text-align: right; }
.pgh-callout {
	margin-top: 20px;
	background: var(--blue-50);
	border: 1px solid var(--blue-200);
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	color: var(--pge-color-primary);
}
.pgh-callout svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.pgh-callout p { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--pge-color-ink); }

/* ── 5. Tutor band (ink) ───────────────────────────────────────────── */
/* This is an inset "floating card", not a full-width .pgh-section, so its
 * own margin is the ONLY thing separating it from its neighbours — unlike
 * every other section on the page, it contributes no padding of its own for
 * that job. A stray margin-top:0 here overrode WordPress's block-gap on the
 * section above (adjacent margins collapse to the larger value, and 0 always
 * loses), so the white report panel butted straight into this dark band with
 * no gap at all, while the gap below it ran to 80px — a hard seam on one
 * side and an oversized one on the other, right next to each other. Equal
 * top/bottom margins put a real, matching gap on both sides. */
.pgh-tutorband {
	margin: clamp(32px, 4vw, 48px) clamp(18px, 4vw, 32px);
	background: var(--neutral-950);
	border-radius: 26px;
	padding: clamp(34px, 5vw, 60px) clamp(24px, 4vw, 52px);
	color: var(--pge-gray-100);
}
.pgh-tutorband__inner {
	max-width: 1060px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(28px, 3vw, 52px);
	align-items: center;
}
.pgh-tutorband__lead { font-size: 16.5px; line-height: 1.65; color: var(--neutral-400); margin: 0 0 26px; max-width: 44ch; }
.pgh-tutorrows { display: grid; gap: 12px; }
.pgh-tutorrow {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.pgh-tutorrow__copy { flex: 1; min-width: 0; }
.pgh-tutorrow__name { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }
.pgh-tutorrow__detail { margin: 3px 0 0; font-size: 13px; color: var(--neutral-400); }
.pgh-tutorrow__slot { font-size: 12.5px; font-weight: 600; color: var(--pge-color-on-dark); white-space: nowrap; }

/* ── 6. Photo band + stat plate (addendum A5) ──────────────────────── */
.pgh-photoband { padding-top: 0; }
/* Fixed 2/1 ratio, NOT auto-fit + span: auto-fit cannot make a third track
   and the span swallows the row. */
.pgh-photoband__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.pgh-photoband__main { flex: 2 1 380px; min-width: 0; }
.pgh-photoband__side {
	flex: 1 1 260px;
	min-width: 0;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 16px;
	min-height: clamp(240px, 34vw, 360px);
}
.pgh-photoband__sidephoto { min-height: 0; display: flex; }
.pgh-photoband__sidephoto .pgt-imgslot { flex: 1; }
.pgh-plate {
	background: var(--neutral-950);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.pgh-plate__figure { margin: 0; font-family: var(--pge-font-mono); font-size: 34px; font-weight: 700; color: #fff; line-height: 1; }
.pgh-plate__label { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--neutral-300); }
.pgh-plate .pgt-sample { position: absolute; top: 14px; right: 14px; }

/* ── 7. FAQ ────────────────────────────────────────────────────────── */
.pgh-faq { display: grid; gap: 10px; }
.pgh-faq__item {
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-radius: 16px;
	padding: 18px 20px;
}
.pgh-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--pge-color-ink);
	list-style: none;
}
.pgh-faq__item > summary::-webkit-details-marker { display: none; }
.pgh-faq__mark {
	position: relative;
	width: 22px; height: 22px; flex: none;
	border-radius: 50%;
	background: var(--pge-gray-100);
	color: var(--pge-ink-500);
	display: inline-flex; align-items: center; justify-content: center;
}
.pgh-faq__mark svg { width: 11px; height: 11px; }
/* Plus becomes minus on open: hide the glyph, draw the single bar. */
.pgh-faq__item[open] .pgh-faq__mark svg { visibility: hidden; }
.pgh-faq__item[open] .pgh-faq__mark::after {
	content: "";
	position: absolute;
	width: 11px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}
.pgh-faq__item > p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--pge-ink-500); }

/* ── Small screens ───────────────────────────────────────────────────
 * The front page is fluid by construction — every multi-column grid is
 * `repeat(auto-fit, minmax(min(100%, Npx), 1fr))`, so it reflows without
 * breakpoints. The one exception is the report card's skill rows, whose
 * track and percentage columns are fixed; below ~560px they leave the
 * label about 57px, which is narrower than the longest skill name. */
@media (max-width: 560px) {
	.pgh-reportskill {
		grid-template-columns: minmax(0, 1fr) 76px 36px;
		gap: 9px;
	}
	.pgh-reportskill > span:first-child { font-size: 12.5px; }
	.pgh-reportskill .pgh-mono { font-size: 11.5px; }
}

/* ── Coming soon — a pillar switched off in the engine's Settings → Modules.
   The loop card stays (three parts is the product) but says plainly that this
   one is not open, and its CTA is replaced by text rather than a dead link.
   See Homepage_Sections::gate_loop_cards(). */
.pgh-phaserow {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.pgh-soon {
	display: inline-flex;
	border-radius: var(--pge-radius-pill);
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--neutral-100, #f3f4f6);
	color: var(--pge-ink-500, #6b7280);
}
/* Muted, but never below the 4.5:1 the body copy already meets — the card
   still has to be readable, it is just not clickable. */
.pgh-loopcard--soon { opacity: .82; }
.pgh-loopcard--soon .pgh-phase { filter: saturate(.3); }

/* ── State-test front page (2026-09-14) ──────────────────────────────────
   Owner rules: the front page talks about this country, the visitor's state
   and that state's tests, and exam practice is the main action. The engine
   (Core\Journey\Home_Page) renders the sections from the published papers;
   these rules style its pieces with the same tokens as the rest of the page.
   The same markup serves / (country) and /learn/{country}/{state}/ (state). */

/* Hero: two lines, not three, and room for the picker. */
.pgh-hero--exam .pgh-hero__title { text-wrap: balance; }
.pgh-hero__alt { margin: 16px 0 0; font-size: 14.5px; }
.pgh-hero__alt a { color: var(--pge-color-primary); font-weight: 600; }

/* State picker: label above, select + button in one row that wraps. */
.pgh-statepick { margin: 28px auto 0; max-width: 560px; text-align: left; }
.pgh-statepick__label { display: block; margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--pge-color-ink); }
.pgh-statepick__row { display: flex; gap: 10px; flex-wrap: wrap; }
.pgh-statepick select {
	flex: 1 1 260px;
	min-width: 0;
	min-height: 52px;
	padding: 0 44px 0 16px;
	font: inherit;
	font-size: 16px; /* 16px: no zoom-on-focus on iOS */
	color: var(--pge-color-ink);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px;
	border: 1px solid var(--pge-color-line);
	border-radius: 14px;
	appearance: none;
	-webkit-appearance: none;
}
.pgh-statepick select:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.pgh-statepick .pgt-btn { flex: 0 0 auto; }
@media (max-width: 520px) { .pgh-statepick .pgt-btn { flex: 1 1 100%; } }

/* Section 3: state cards and national tests. */
.pgh-h3 { font-size: 22px; letter-spacing: -.02em; font-weight: 600; color: var(--pge-color-ink); margin: 0 0 6px; }
.pgh-states {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: 10px;
}
.pgh-statecard {
	display: flex;
	flex-direction: column;
	gap: 3px;
	height: 100%;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.pgh-statecard:hover, .pgh-statecard:focus-visible { border-color: var(--blue-600); box-shadow: 0 6px 18px -10px rgba(27,59,235,.45); text-decoration: none; }
.pgh-statecard__name { font-size: 15.5px; font-weight: 600; color: var(--pge-color-ink); }
.pgh-statecard__tests { font-size: 13px; font-weight: 600; color: var(--pge-color-primary); overflow-wrap: anywhere; }
.pgh-statecard__count { font-size: 12.5px; color: var(--pge-ink-500); }
.pgh-national { margin-top: 48px; }
.pgh-national .pgh-lead { margin-bottom: 16px; font-size: 15px; }

/* State view: grade filter, one card per test, papers by grade. */
.pgh-gradefilter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; }
.pgh-gradefilter a {
	padding: 7px 14px;
	border: 1px solid var(--pge-color-line);
	border-radius: var(--pge-radius-pill);
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pge-ink-500);
	text-decoration: none;
}
.pgh-gradefilter a[aria-current="page"] { background: var(--pge-color-primary); border-color: var(--pge-color-primary); color: #fff; }
.pgh-prog {
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-radius: 22px;
	padding: 24px;
	margin: 0 0 18px;
	scroll-margin-top: 90px;
}
.pgh-prog--national { background: var(--pge-gray-50); }
.pgh-prog__title { margin: 0; font-size: 24px; letter-spacing: -.02em; font-weight: 600; color: var(--pge-color-ink); }
.pgh-prog__name { margin: 4px 0 0; font-size: 14.5px; color: var(--pge-color-body); }
.pgh-prog__meta { margin: 6px 0 0; font-size: 13.5px; color: var(--pge-ink-500); }
.pgh-prog__grades {
	/* flex, not grid: a CSS grid's column tracks are shared by every row, so
	 * a short last row (or a single-grade filter) still leaves the row's
	 * unused tracks empty and white — grid has no "row only" fill. Flex-wrap
	 * lets flex-grow redistribute the leftover width among just the items
	 * actually present in that row, so the last row always fills edge to edge. */
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 20px;
}
.pgh-prog__grade { flex: 1 1 190px; }
.pgh-prog__grade h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pge-ink-400); }
.pgh-prog__grade ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pgh-prog__grade a { font-size: 15px; font-weight: 600; color: var(--pge-color-primary); text-decoration: none; }
.pgh-prog__grade a:hover { text-decoration: underline; }
.pgh-prog__tip {
	flex: 2 1 260px;
	background: linear-gradient(160deg, var(--blue-50), #fff);
	border: 1px solid var(--blue-200);
	border-radius: 16px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
	min-height: 140px;
}
.pgh-prog__tip-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--blue-200);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pge-color-primary);
	flex: none;
}
.pgh-prog__tip-icon svg { width: 20px; height: 20px; }
.pgh-prog__tip-quote { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--pge-color-ink); font-style: italic; }
.pgh-prog__tip-author { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; font-style: normal; color: var(--pge-color-primary); text-transform: uppercase; letter-spacing: .04em; }
.pgh-prog__links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 8px 0 0; }
.pgh-also { margin: 36px 0 12px; }

/* State-page testimonials (pg-testimonials): same data as the Settings →
   Homepage Testimonials admin field, styled to this module's own tokens. */
.pgh-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 8px; }
.pgh-testi { background: #fff; border: 1px solid var(--blue-200); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pgh-testi__stars { color: #f59e0b; font-size: 15px; letter-spacing: 2px; }
.pgh-testi__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pge-color-ink); font-style: italic; }
.pgh-testi__author { font-size: 13px; font-weight: 700; color: var(--pge-color-primary); }
.pgh-testi__grade { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--pge-ink-400); text-transform: none; letter-spacing: normal; }

/* Practice cards carry no phase chip, so the heading needs no top gap. */
.pgh-loopcard--plain h3 { margin-top: 0; }
/* The country's name beside the flag chip, only where the chip shows the flag alone. */
.pgh-hero__kicker-text--narrow { display: none; }
@media (max-width: 640px) { .pgh-hero__kicker-text--narrow { display: inline; } }

/* ── Homepage photos and infographics (2026-09) ─────────────────────────
   Photos come from the Customizer's "Homepage …" image slots through the
   engine's pge_home_image filter. Every block below lays out without its
   photo too: a visitor sees no box until one is uploaded. */
.pgh-photo { box-shadow: 0 30px 60px -34px rgba(18, 38, 200, .35); }

/* Hero with a photo: copy left, photo right, two facts pinned to it. */
.pgh-hero__split { position: relative; z-index: 3; max-width: 1160px; margin-inline: auto; }
.pgh-hero__media { position: relative; margin: 36px 0 0; }
.pgh-hero__fact {
	position: absolute;
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-radius: 14px;
	box-shadow: var(--pge-shadow-md);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pge-color-ink);
	white-space: nowrap;
}
.pgh-hero__fact--a { top: 18px; left: -12px; color: var(--pge-color-primary); }
.pgh-hero__fact--b { right: -12px; bottom: 22px; }
@media (min-width: 960px) {
	.pgh-hero__split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
	.pgh-hero__split .pgh-hero__copy { text-align: left; margin: 0; max-width: none; }
	.pgh-hero__split .pgh-hero__title { font-size: clamp(34px, 4.4vw, 54px); }
	.pgh-hero__split .pgh-hero__kicker, .pgh-hero__split .pgh-hero__cta { justify-content: flex-start; }
	.pgh-hero__split .pgh-hero__sub { margin-left: 0; }
	.pgh-hero__split .pgh-statepick { margin-left: 0; }
	.pgh-hero__media { margin: 0; }
}
@media (max-width: 640px) { .pgh-hero__fact--a { left: 10px; } .pgh-hero__fact--b { right: 10px; } }

/* State outline icons: on each state card and beside the state's name. */
.pgh-statecard { position: relative; padding-right: 64px; }
.pgh-statecard__icon {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 42px;
	height: 42px;
	transform: translateY(-50%);
	color: var(--blue-100);
	transition: color .15s, transform .15s;
}
.pgh-statecard:hover .pgh-statecard__icon, .pgh-statecard:focus-visible .pgh-statecard__icon { color: var(--pge-color-primary); transform: translateY(-50%) scale(1.06); }
/* The family's own state (signed-in profile, or the state a guest last chose). */
.pgh-statecard--mine { background: var(--blue-50); border: 2px solid var(--blue-600); padding: 13px 63px 13px 15px; box-shadow: var(--pge-shadow-md); }
.pgh-statecard--mine .pgh-statecard__icon { color: var(--pge-color-primary); }
.pgh-statecard__mine {
	align-self: flex-start;
	margin-top: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--blue-600);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
}
.pgh-hero__kicker-text { display: inline-flex; align-items: center; gap: 8px; }
.pgh-hero__kicker .pgh-statecard__icon { position: static; width: 26px; height: 26px; transform: none; color: var(--pge-color-primary); }

/* At a glance: the testing road. Three stages joined by one line. */
.pgh-road {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 18px;
	position: relative;
	counter-reset: road;
}
.pgh-road__stage {
	--pgh-road: var(--pgt-pillar-evaluate);
	--pgh-road-bg: var(--blue-50);
	position: relative;
	padding: 26px 24px 22px;
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-top: 4px solid var(--pgh-road);
	border-radius: 20px;
}
.pgh-road__stage--hs { --pgh-road: var(--pgt-pillar-elevate); --pgh-road-bg: var(--teal-50); }
.pgh-road__stage--national { --pgh-road: var(--pgt-pillar-excel); --pgh-road-bg: var(--amber-50); }
@media (min-width: 900px) {
	.pgh-road__stage:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 48px;
		right: -18px;
		width: 18px;
		height: 2px;
		background: repeating-linear-gradient(90deg, var(--pge-color-line) 0 4px, transparent 4px 7px);
	}
}
.pgh-road__icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--pgh-road-bg);
	color: var(--pgh-road);
}
.pgh-road__icon svg { width: 22px; height: 22px; }
.pgh-road__grades { margin: 14px 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pgh-road); }
.pgh-road__title { margin: 0 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--pge-color-ink); }
.pgh-road__text { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--pge-ink-500); }
.pgh-road__tests { margin: 0 0 16px; font-size: 13.5px; font-weight: 600; color: var(--pge-color-body); }
.pgh-road__nums { display: flex; gap: 10px; margin: 0; }
.pgh-road__nums > div { flex: 1; padding: 10px 12px; border-radius: 12px; background: var(--pgh-road-bg); }
.pgh-road__nums dt { font-size: 12px; color: var(--pge-ink-500); }
.pgh-road__nums dd { margin: 2px 0 0; font-size: 22px; color: var(--pgh-road); }

/* Papers by subject: horizontal bars. */
.pgh-bars { margin: 36px auto 0; max-width: 760px; }
.pgh-bars .pgh-h3 { font-size: 17px; margin-bottom: 14px; text-align: center; }
.pgh-bars__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pgh-bars__row { display: grid; grid-template-columns: minmax(110px, 190px) 1fr 52px; align-items: center; gap: 12px; font-size: 14px; }
.pgh-bars__label { font-weight: 600; color: var(--pge-color-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgh-bars__track { height: 12px; border-radius: 99px; background: var(--pge-gray-100); overflow: hidden; }
.pgh-bars__track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--gradient-brand); }
.pgh-bars__n { text-align: right; color: var(--pge-color-ink); font-size: 13.5px; }

/* State view: grade-by-subject map. Scrolls inside itself on phones. */
.pgh-map { overflow-x: auto; border: 1px solid var(--pge-color-line); border-radius: 18px; background: #fff; }
.pgh-map:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.pgh-map__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pgh-map__table th, .pgh-map__table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--pge-gray-100); }
.pgh-map__table tr:last-child th, .pgh-map__table tr:last-child td { border-bottom: 0; }
.pgh-map__table thead th { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pge-ink-400); background: var(--pge-gray-50); white-space: nowrap; }
.pgh-map__table thead th.is-current { color: var(--pge-color-primary); }
.pgh-map__table tbody th { text-align: left; font-weight: 600; color: var(--pge-color-body); min-width: 150px; padding-left: 18px; }
.pgh-map__cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 5px 9px;
	border-radius: 99px;
	background: var(--blue-50);
	color: var(--pge-color-primary);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}
.pgh-map__cell:hover, .pgh-map__cell:focus-visible { background: var(--pge-color-primary); color: #fff; text-decoration: none; }
.pgh-map__none { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pge-gray-200); }

/* How practice works: numbered steps, beside a photo when there is one. */
.pgh-steps { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 760px; margin-inline: auto; }
.pgh-steps--photo { max-width: none; }
@media (min-width: 960px) { .pgh-steps--photo { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.pgh-steps__body .pgh-lead { margin: 0 0 24px; }
.pgh-steps:not(.pgh-steps--photo) .pgh-steps__body > .pgh-chip,
.pgh-steps:not(.pgh-steps--photo) .pgh-steps__body > .pgh-h2,
.pgh-steps:not(.pgh-steps--photo) .pgh-steps__body > .pgh-lead { text-align: center; margin-inline: auto; }
.pgh-steps:not(.pgh-steps--photo) .pgh-steps__body > .pgh-chip { display: table; }
.pgh-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pgh-step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px 16px; background: #fff; border: 1px solid var(--pge-color-line); border-radius: 16px; }
.pgh-step__icon { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--blue-50); color: var(--pge-color-primary); }
.pgh-step__icon svg { width: 20px; height: 20px; }
.pgh-step__n { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--pge-color-primary); color: #fff; font-size: 11px; font-weight: 700; }
.pgh-step h3 { margin: 1px 0 3px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--pge-color-ink); }
.pgh-step p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pge-ink-500); }

/* Support head: copy beside a photo when there is one. */
.pgh-supporthead { max-width: 640px; margin: 0 auto 44px; }
.pgh-supporthead--photo { max-width: none; display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .pgh-supporthead--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pgh-supporthead .pgh-lead { margin-bottom: 14px; }
.pgh-supporthead__media { margin: 0; }

/* Closing band: a proverb, one encouraging line, the next step. Light, on
   the brand kit: white card on a blue-50 wash, the signature chip gradient
   as a top rule, ink type, the primary button. (Owner: no dark boxes.) */
.pgh-ctaband {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 64px);
	border-radius: 28px;
	border: 1px solid var(--blue-100);
	background:
		radial-gradient(640px 280px at 10% -20%, var(--blue-100), transparent 62%),
		radial-gradient(560px 260px at 92% 120%, var(--blue-50), transparent 62%),
		linear-gradient(180deg, var(--blue-50) 0%, #fff 100%);
	box-shadow: var(--pge-shadow-md);
}
.pgh-ctaband::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--gradient-brand);
}
.pgh-ctaband__proverb { margin: 0 auto 26px; max-width: 34ch; }
.pgh-ctaband__proverb blockquote { margin: 0; }
.pgh-ctaband__proverb p { margin: 0; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; font-style: italic; font-weight: 500; color: var(--pge-color-primary); }
.pgh-ctaband__proverb p::before { content: "\201C"; } .pgh-ctaband__proverb p::after { content: "\201D"; }
.pgh-ctaband__proverb figcaption { margin-top: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pge-ink-400); }
.pgh-ctaband .pgh-h2 { margin: 0 auto 12px; max-width: 22ch; }
.pgh-ctaband__text { margin: 0 auto; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--pge-ink-500); }
.pgh-ctaband__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 28px; }
.pgh-ctaband__plans { display: inline-flex; align-items: center; gap: 6px; color: var(--pge-color-primary); font-weight: 600; text-decoration: none; }
.pgh-ctaband__plans svg { width: 18px; height: 18px; }
.pgh-ctaband__plans:hover { text-decoration: underline; }
/* Phones: two state cards a row (48 in one column is a long scroll), the
   outline smaller in the top corner. */
@media (max-width: 520px) {
	.pgh-states:not(.pgh-states--national) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.pgh-states:not(.pgh-states--national) .pgh-statecard { padding: 12px 38px 12px 12px; }
	.pgh-states:not(.pgh-states--national) .pgh-statecard--mine { padding: 11px 37px 11px 11px; }
	.pgh-states:not(.pgh-states--national) .pgh-statecard__name { font-size: 14.5px; overflow-wrap: anywhere; }
	.pgh-statecard__icon { top: 12px; right: 10px; width: 24px; height: 24px; transform: none; }
	.pgh-statecard:hover .pgh-statecard__icon, .pgh-statecard:focus-visible .pgh-statecard__icon { transform: scale(1.06); }
}