/*
 * PrepGro Theme v3 — "Meridian" chrome + layout.
 * Derived strictly from prepgro-logo-kit-v34: Outfit everywhere, brand blue
 * #1b3beb, ink #03050f / #151c42 dark surfaces, the three-stop chip gradient
 * (#0c1b9e → #0a84ff → #4d93ff) as the single signature device, on-dark blue
 * #6ba4ff, hairline borders, layered soft elevation.
 *
 * System devices (used consistently, nowhere else):
 *  1. Gradient rule   — 2px chip-gradient bar marking kickers/sections.
 *  2. Gradient text   — one word per screen, max.
 *  3. Numbered sections — editorial 01/02/03 counters on kickers.
 *  4. Check-arrow motif — the logo mark reused as list/progress iconography.
 *  5. Hairlines + soft layered shadows — never thick borders or hard offsets.
 */

/* ---------- Base ---------- */

/* The theme had no box-sizing reset, so every `max-width` + `padding` pair
 * measured content-box and overflowed its own max-width by the padding. The
 * report showcase panel, for one, rendered 1266px wide inside a 1160px grid
 * and visibly jutted past every other section on the front page.
 *
 * The engine opts each of its own subtrees in (`.pge-hp *`, `.pgw-page *`,
 * `.pgr-page *`), so this reset is additive there and corrective everywhere
 * the theme draws — including the engine's device stage, which is authored
 * for border-box but rendered outside `.pge-hp` when the theme embeds it. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--pgt-header-h: 74px; /* overridden by the Customizer "Header height" setting */
	--pgt-max: 1200px;
	--pgt-logo-h: 34px; /* overridden by the Customizer "Logo size" setting */
	--pgt-ease: cubic-bezier(.22, .61, .36, 1);

	/* The three pillar hues, declared globally because the menu carries them
	   on EVERY page, not only inside a module. pg-module.css derives its
	   --pgm-accent from these rather than restating the values, so the
	   Customizer's pillar colour pickers (which override these at :root) move
	   the nav and the module page together instead of drifting apart.
	   All three clear 4.5:1 on white, which nav links at 14.5px require:
	   blue 7.31, teal 5.47, amber 5.02. (Evaluate had drifted to azure
	   #0a84ff — 3.65:1, failing normal-size text — restored to the kit's
	   royal blue 2026-08.) */
	--pgt-pillar-evaluate: var(--blue-600, #1b3beb);
	--pgt-pillar-elevate:  var(--teal-700);
	--pgt-pillar-excel:    var(--amber-700);
	/* The non-pillar tone, shared by Home and Help in the nav and by the Help
	   dropdown. 5.39:1 on white. Home and Help are utilities, not stages of
	   the product, so they sit deliberately quieter than the three hues — that
	   gap is what makes the coloured items read AS the pillars. */
	--pgt-pillar-neutral:  var(--pge-ink-500);
}

body {
	font-family: var(--pge-font-sans);
	color: var(--pge-color-body);
	background: var(--pge-color-base);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	counter-reset: pgt-section;
}

h1, h2, h3, h4, .pgt-logo__word {
	font-family: var(--pge-font-heading);
	color: var(--pge-color-ink);
	line-height: 1.12;
	letter-spacing: -0.015em;
	font-weight: 600;
}

a { color: var(--pge-color-primary); text-decoration: none; }
/* Core's block-theme skip link hides via clip-path, which its own :focus
   reset (old `clip` only) never undoes — so keyboard users never saw it.
   Solid ground so it reads on light and dark pages alike. */
.skip-link.screen-reader-text:focus {
	clip-path: none !important;
	clip: auto !important;
	width: auto !important;
	height: auto !important;
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100100;
	padding: 10px 16px;
	border-radius: 10px;
	background: #ffffff;
	color: #1b3beb;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
/* Generic links lift to the on-dark accent on dark-capable surfaces — the
   fill primary is only 2.2:1 as text there. Element-level, so any
   component's own link color still wins. */
html[data-pge-admin-theme="dark"][data-pge-dark-scope] a:not([class]) { color: var(--pge-color-on-dark, #6ba4ff); }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--pge-focus-ring); border-radius: 4px; }

::selection { background: rgba(27, 59, 235, .18); color: var(--pge-color-ink); }

.pgt-container {
	max-width: var(--pgt-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ---------- Scroll reveal (JS adds .pgt-reveal, then .is-in) ----------
   Audit note: reveals now pre-trigger below the fold (see theme.js), travel a
   shorter distance and settle faster, so content never reads as half-faded. */
.pgt-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .4s var(--pgt-ease), transform .4s var(--pgt-ease);
	transition-delay: var(--pgt-reveal-delay, 0s);
}
.pgt-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.pgt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--pge-font-sans);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	padding: .74rem 1.3rem;
	border-radius: var(--pge-btn-radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .18s var(--pgt-ease), color .18s var(--pgt-ease), border-color .18s var(--pgt-ease), box-shadow .18s var(--pgt-ease), transform .18s var(--pgt-ease);
	white-space: nowrap;
	text-decoration: none;
}
.pgt-btn:hover { text-decoration: none; }
.pgt-btn--primary {
	background: var(--pge-color-primary);
	color: #fff;
	box-shadow: 0 1px 2px rgba(3,5,15,.06), 0 8px 18px -10px rgba(27,59,235,.55);
}
/* System rule: hover darkens via brightness — never a colour change. */
.pgt-btn--primary:hover { background: var(--pge-color-primary); color: #fff; filter: brightness(.92); }
.pgt-btn--primary:active { filter: brightness(.88); }
.pgt-btn--ghost {
	color: var(--pge-color-ink);
	background: var(--pge-white);
	border-color: var(--pge-color-line);
}
.pgt-btn--ghost:hover { border-color: var(--neutral-300); color: var(--pge-color-ink); }
.pgt-btn--muted { color: var(--pge-color-muted); background: transparent; }
.pgt-btn--muted:hover { color: var(--pge-color-ink); }
.pgt-btn--lg { padding: 15px 30px; font-size: 16px; box-shadow: 0 2px 4px rgba(3,5,15,.06), 0 14px 28px -12px rgba(27,59,235,.6); }
.pgt-btn--on-dark { background: #fff; color: var(--pge-color-ink); }
.pgt-btn--on-dark:hover { background: #fff; color: var(--pge-color-ink); filter: brightness(.94); }
.pgt-btn--ghost-on-dark { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.pgt-btn--ghost-on-dark:hover { color: #fff; filter: brightness(1.14); }

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

/* ---------- WP admin toolbar — front end only ----------
   Core's #wpadminbar has no width guard: at viewport widths roughly between
   its own 783px mobile breakpoint and ~1050px (depends how many toolbar items
   a logged-in admin/editor has), the right-aligned "Howdy, Name" item doesn't
   fit the row and wraps onto a second, unclipped 32px band that sits ON TOP
   of whatever comes next in the fixed-position stack — which is now our
   topbar instead of the old plain-white header, so the collision that used
   to be nearly invisible now reads as two overlapping bars.
   The name is already shown in the topbar (with the child switcher), so
   "Howdy, Name" is pure duplication on the front end — collapse it to just
   the avatar rather than chase the exact wrap breakpoint, which shifts with
   every plugin that adds a toolbar item. */
#wpadminbar #wp-admin-bar-my-account > .ab-item { font-size: 0; }
/* Core's own #wpadminbar * { font-size: 13px } sets the size directly on this
   nested span, so it does NOT inherit the 0 above — direct rules win over
   inheritance regardless of specificity. Has to be zeroed explicitly too. */
#wpadminbar #wp-admin-bar-my-account .display-name { font-size: 0; }
#wpadminbar #wp-admin-bar-my-account > .ab-item .avatar { vertical-align: middle; }

/* ---------- Utility topbar ----------
   Thin ink strip above everything, printed from wp_body_open so it exists even
   on pages that suppress the marketing chrome. Deliberately NOT sticky: it
   scrolls away and leaves the sticky header the whole viewport. Always dark,
   in both admin themes — it is the one piece of chrome that never re-skins. */
.pgt-topbar {
	background: var(--pge-ink-950, #0f1419);
	color: rgba(255, 255, 255, .72);
	font-family: var(--pge-font-sans);
	font-size: 12.5px;
	line-height: 1.3;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.pgt-topbar a { text-decoration: none; }
.pgt-topbar__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 38px;
	padding: 4px clamp(16px, 3vw, 32px);
}
/* Equal flexible side slots keep the pulse line truly centred. */
.pgt-topbar__stat,
.pgt-topbar__actions {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	min-width: 0;
}
.pgt-topbar__stat { gap: 7px; }
.pgt-topbar__stat > svg,
.pgt-topbar__statlink > svg {
	flex: none;
	color: var(--pgt-topbar-accent, #fbbf24);
	fill: currentColor;
}
.pgt-topbar__statlink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: inherit;
	min-width: 0;
}
.pgt-topbar__statlink:hover .pgt-topbar__stattext { color: #fff; }
.pgt-topbar__stattext {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 140ms var(--pgt-ease);
}
.pgt-topbar__stattext strong { color: #fff; font-weight: 700; }
.pgt-topbar__pulse {
	margin: 0;
	flex: none;
	text-align: center;
	white-space: nowrap;
	/* No overflow:hidden here — the learner switcher's menu hangs below the
	   bar. The NAME is what gets clamped instead. */
	min-width: 0;
}
.pgt-topbar__pulse strong {
	color: #fff;
	font-weight: 600;
	display: inline-block;
	max-width: min(40vw, 260px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}
.pgt-topbar__pulse em {
	font-style: normal;
	font-weight: 700;
	color: var(--pgt-topbar-accent, #fbbf24);
}
/* Beacon — the pulsing dot before the learner's name: "this is who is
   studying right now". A soft ping, not a hard blink; stilled entirely for
   prefers-reduced-motion. */
.pgt-topbar__beacon {
	position: relative;
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--pgt-topbar-accent, #fbbf24);
	vertical-align: 1px;
}
.pgt-topbar__beacon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--pgt-topbar-accent, #fbbf24);
	animation: pgt-beacon-ping 2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes pgt-beacon-ping {
	0%   { transform: scale(1); opacity: .8; }
	70%, 100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.pgt-topbar__beacon::after { animation: none; opacity: 0; }
}

/* Learner switcher — a family account with 2+ child profiles gets a
   disclosure on the name: pick who is studying. */
.pgt-topbar__learner { position: relative; display: inline-flex; }
.pgt-topbar__learnerbtn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	margin: -4px 0;
	background: transparent;
	border: 0;
	border-radius: var(--pge-radius-pill);
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: background-color 140ms var(--pgt-ease);
}
.pgt-topbar__learnerbtn:hover,
.pgt-topbar__learnerbtn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.pgt-topbar__learnerbtn svg { opacity: .6; }
.pgt-topbar__learnermenu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 60; /* above the sticky header (z 50) */
	display: flex;
	flex-direction: column;
	min-width: 180px;
	padding: 6px;
	background: var(--pge-ink-950, #0f1419);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	box-shadow: 0 14px 34px -12px rgba(3, 5, 15, .65);
	text-align: left;
}
.pgt-topbar__learnermenu[hidden] { display: none; }
.pgt-topbar__learnerhead {
	padding: 6px 10px 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}
.pgt-topbar__learneropt {
	display: block;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: rgba(255, 255, 255, .85);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background-color 140ms var(--pgt-ease), color 140ms var(--pgt-ease);
}
.pgt-topbar__learneropt:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pgt-topbar__learneropt.is-active { color: var(--pgt-topbar-accent, #fbbf24); }
.pgt-topbar__learneropt.is-active::after { content: " ✓"; }
.pgt-topbar__learner.is-busy { opacity: .55; pointer-events: none; }
.pgt-topbar__actions { justify-content: flex-end; gap: 8px; }
.pgt-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: var(--pge-radius-pill);
	color: rgba(255, 255, 255, .82);
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 140ms var(--pgt-ease), color 140ms var(--pgt-ease);
}
.pgt-topbar__link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pgt-topbar__link svg { opacity: .75; }
/* Country chip + theme toggle re-skinned for the dark strip. */
.pgt-topbar .pgt-countrychip {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
}
.pgt-topbar .pgt-countrychip__code { color: #e7ecf5; letter-spacing: 0; white-space: nowrap; }
.pgt-topbar .pgt-iconbtn {
	width: 30px;
	height: 30px;
	background: transparent;
	border-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .82);
}
.pgt-topbar .pgt-iconbtn:hover { color: #fff; border-color: rgba(255, 255, 255, .34); }
@media (max-width: 900px) {
	.pgt-topbar__stat { display: none; }
	.pgt-topbar__pulse { flex: 1 1 auto; text-align: left; }
}
@media (max-width: 600px) {
	.pgt-topbar__pulse em { display: none; }
	.pgt-topbar__inner { gap: 10px; }
}

/* ---------- Header ----------
   Opaque and non-blurred: the design system does not use transparency or
   backdrop-filter. Sticky is kept, but the bar is a normal in-flow element as
   far as the portal is concerned — nothing downstream measures its height. */
.pgt-headerwrap {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--pgt-header-bg, var(--pge-white));
}
.pgt-header {
	background: var(--pgt-header-bg, var(--pge-white));
	border-bottom: 1px solid var(--pge-gray-100);
}
.pgt-header__inner {
	min-height: var(--pgt-header-h, 74px);
	display: flex;
	align-items: center;
	gap: clamp(10px, 2vw, 28px);
	padding: 10px clamp(16px, 3vw, 32px);
	flex-wrap: wrap;
}
.pgt-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* The generic `a:hover { text-decoration: underline }` (type + pseudo-class)
   outranks `.pgt-logo`'s text-decoration: none (one class) on specificity,
   so hovering the header logo underlined the wordmark — and a propagated
   decoration cannot be switched off from the children, only on the link.
   Every link that wraps a lockup: header, drawer, the engine's login panel. */
.pgt-logo:hover, .pgt-logo:focus-visible,
.pgt-drawer__brand:hover, .pgt-drawer__brand:focus-visible,
a:hover:has(.pgt-brandlogo), a:focus-visible:has(.pgt-brandlogo) { text-decoration: none; }
.pgt-logo img, .pgt-logo .custom-logo, .pgt-logo .custom-logo-link img {
	height: var(--pgt-logo-h, 30px);
	max-height: var(--pgt-logo-h, 30px);
	width: auto;
	display: block;
}

/* ---------- Primary nav — pill items, centered ---------- */
.pgt-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}
.pgt-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Both overridable from the Customizer (Branding → Menu font / size);
	   the fallbacks here are the shipped defaults. */
	font-family: var(--pgt-nav-font, inherit);
	font-size: var(--pgt-nav-size, 14.5px);
	font-weight: 500;
	color: var(--pgt-header-fg, var(--pge-color-body));
	background: transparent;
	border: 0;
	padding: 8px 14px;
	border-radius: var(--pge-radius-pill);
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 140ms var(--pgt-ease), color 140ms var(--pgt-ease);
}
.pgt-nav__link:hover,
.pgt-nav__link[aria-expanded="true"] {
	background: var(--pge-gray-100);
	color: var(--pge-color-ink);
	text-decoration: none;
}
.pgt-nav__link.is-current { color: var(--pge-color-ink); font-weight: 600; background: var(--pge-gray-100); }

/* The three module items wear their own hue on every page, so the menu is
   itself the colour key: you learn Evaluate=blue, Elevate=teal, Excel=amber
   before ever opening one. Targeted through data-pgt-panel, which the nav
   already emits for the mega-menu — no extra class needed.
   Home and Help stay neutral: they are not pillars, and colouring everything
   would leave nothing signalled. */
.pgt-nav__link[data-pgt-panel="evaluate"] { color: var(--pgt-pillar-evaluate); }
.pgt-nav__link[data-pgt-panel="elevate"]  { color: var(--pgt-pillar-elevate); }
.pgt-nav__link[data-pgt-panel="excel"]    { color: var(--pgt-pillar-excel); }

/* Home takes Help's scheme. Both are utilities rather than stages of the
   product, so they share the neutral tone and read as a pair against the
   three coloured pillars. Home is matched on data-nav because, unlike Help,
   it has no dropdown and therefore no data-pgt-panel to hang off. */
.pgt-nav__link[data-nav="primary:home"],
.pgt-nav__link[data-pgt-panel="help"] { color: var(--pgt-pillar-neutral); }
.pgt-nav__link[data-nav="primary:home"]:hover,
.pgt-nav__link[data-nav="primary:home"].is-current,
.pgt-nav__link[data-pgt-panel="help"]:hover,
.pgt-nav__link[data-pgt-panel="help"][aria-expanded="true"] {
	color: var(--pgt-pillar-neutral);
	background: var(--pge-gray-100);
}

/* Hover and open states tint the pill in the same hue rather than the shared
   grey, and the current page keeps the strongest treatment. */
.pgt-nav__link[data-pgt-panel="evaluate"]:hover,
.pgt-nav__link[data-pgt-panel="evaluate"][aria-expanded="true"] { color: var(--pgt-pillar-evaluate); background: var(--blue-50); }
.pgt-nav__link[data-pgt-panel="elevate"]:hover,
.pgt-nav__link[data-pgt-panel="elevate"][aria-expanded="true"]  { color: var(--pgt-pillar-elevate);  background: var(--teal-50); }
.pgt-nav__link[data-pgt-panel="excel"]:hover,
.pgt-nav__link[data-pgt-panel="excel"][aria-expanded="true"]    { color: var(--pgt-pillar-excel);    background: var(--amber-50); }

.pgt-nav__link[data-pgt-panel="evaluate"].is-current { color: var(--pgt-pillar-evaluate); background: var(--blue-50); }
.pgt-nav__link[data-pgt-panel="elevate"].is-current  { color: var(--pgt-pillar-elevate);  background: var(--teal-50); }
.pgt-nav__link[data-pgt-panel="excel"].is-current    { color: var(--pgt-pillar-excel);    background: var(--amber-50); }
.pgt-nav__chev { display: inline-flex; transition: transform 140ms ease; }
.pgt-nav__link[aria-expanded="true"] .pgt-nav__chev { transform: rotate(180deg); }

/* ---------- Icon cluster ---------- */
.pgt-icons { display: flex; align-items: center; gap: 6px; flex: none; }
.pgt-iconbtn {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--pge-color-line);
	background: var(--pge-white);
	border-radius: var(--pge-radius-pill);
	color: var(--pgt-header-fg, var(--pge-color-body));
	cursor: pointer;
	transition: background-color 140ms var(--pgt-ease), border-color 140ms var(--pgt-ease), color 140ms var(--pgt-ease);
}
.pgt-iconbtn[aria-expanded="true"] {
	border-color: var(--pge-color-primary);
	background: var(--pge-blue-50);
	color: var(--pge-color-primary);
}
.pgt-header__cta { font-size: 14.5px; padding: 11px 20px; }

/* ---------- Account menu ---------- */
.pgt-account { position: static; display: flex; }
.pgt-account__btn {
	height: 40px;
	padding: 0 6px 0 4px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--pge-color-line);
	background: var(--pge-white);
	border-radius: var(--pge-radius-pill);
	cursor: pointer;
	color: var(--pgt-header-fg, var(--pge-color-muted));
	transition: background-color 140ms var(--pgt-ease), border-color 140ms var(--pgt-ease);
}
.pgt-account__btn[aria-expanded="true"] {
	border-color: var(--neutral-300);
	background: var(--pge-gray-100);
}
.pgt-account__avatar {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 12.5px;
	color: #fff;
	background: var(--pge-gradient);
	flex: none;
}
.pgt-account__avatar--anon { background: var(--neutral-300); color: var(--pge-white); }
.pgt-account__chev { display: inline-flex; transition: transform 140ms ease; }
.pgt-account__btn[aria-expanded="true"] .pgt-account__chev { transform: rotate(180deg); }
.pgt-account__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: clamp(16px, 3vw, 32px);
	width: 252px;
	background: var(--pge-white);
	border: 1px solid var(--pge-color-line);
	border-radius: 16px;
	box-shadow: 0 2px 4px rgba(3,5,15,.05), 0 22px 40px -18px rgba(18,38,200,.24);
	padding: 8px;
	z-index: 60;
}
.pgt-account__menu[hidden] { display: none; }
.pgt-account__id {
	display: flex; flex-direction: column; gap: 2px;
	padding: 10px 12px 12px;
	border-bottom: 1px solid var(--pge-gray-100);
	margin-bottom: 6px;
}
.pgt-account__id strong { color: var(--pge-color-ink); font-size: 14.5px; font-weight: 600; }
.pgt-account__id span { color: var(--pge-color-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.pgt-account__item {
	display: flex; align-items: center; gap: 10px;
	min-height: 42px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--pge-color-body);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
}
.pgt-account__item svg { flex: none; }
.pgt-account__item:hover { background: var(--pge-gray-50); color: var(--pge-color-ink); text-decoration: none; }
.pgt-account__item--primary { color: var(--pge-color-primary); }
.pgt-account__item--primary:hover { color: var(--pge-color-primary); }
.pgt-account__item--signout { color: var(--pge-color-muted); }

/* ---------- Mega menu panel ---------- */
.pgt-mega {
	position: absolute;
	left: 0; right: 0; top: 100%;
	max-height: calc(100vh - 90px);
	overflow-y: auto;
	background: var(--pge-white);
	border-bottom: 1px solid var(--pge-color-line);
	box-shadow: 0 2px 4px rgba(3,5,15,.05), 0 26px 44px -22px rgba(18,38,200,.22);
	z-index: 55;
}
.pgt-mega[hidden] { display: none; }
.pgt-mega__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding: 26px clamp(18px, 3vw, 32px) 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 620px), 1fr));
	gap: 28px;
}
.pgt-mega__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	gap: 10px 22px;
}
.pgt-mega__grouphead {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	margin: 0 0 0;
	padding: 0 8px 8px;
	border-bottom: 1px solid var(--pge-gray-100);
}
.pgt-mega__eyebrow {
	font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--pgt-tone-fg, var(--pge-color-primary));
}
.pgt-mega__note { font-size: 12.5px; color: var(--pge-color-muted); }
.pgt-mega__row {
	display: flex; gap: 11px;
	padding: 9px 8px;
	border-radius: 12px;
	text-decoration: none;
	transition: background-color 140ms var(--pgt-ease);
}
.pgt-mega__row:hover { background: var(--pge-gray-50); text-decoration: none; }
.pgt-mega__tile {
	width: 32px; height: 32px; flex: none;
	border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pgt-tone-bg, var(--pge-blue-50));
	color: var(--pgt-tone-fg, var(--pge-color-primary));
}
.pgt-mega__label { display: flex; flex-direction: column; min-width: 0; }
.pgt-mega__title { font-size: 14.5px; font-weight: 600; color: var(--pge-color-ink); }
.pgt-mega__sub { font-size: 12.5px; line-height: 1.45; color: var(--pge-color-muted); margin-top: 2px; }
.pgt-mega__aside {
	background: var(--pge-gray-50);
	border: 1px solid var(--pge-color-line);
	border-radius: 18px;
	padding: 20px;
	align-self: start;
}
.pgt-mega__asideeyebrow {
	margin: 0;
	font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--pgt-tone-fg, var(--pge-color-primary));
}
.pgt-mega__asidetitle { margin: 10px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--pge-color-ink); }
.pgt-mega__asidebody { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--pge-color-muted); }
.pgt-mega__asidecta {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: 16px;
	font-size: 14px; font-weight: 600;
	color: #fff;
	background: var(--pgt-tone-fg, var(--pge-color-primary));
	padding: 10px 18px;
	border-radius: var(--pge-radius-pill);
	text-decoration: none;
}
.pgt-mega__asidecta:hover { color: #fff; text-decoration: none; filter: brightness(.92); }

/* Phase tones. Originally the eyebrow and icon tiles ONLY — never a button
   fill (README "Accent discipline"). Owner decision 2026-08-05 extends them to
   the aside's eyebrow and its CTA, so a dropdown reads wholly as its pillar
   rather than a coloured icon beside a blue button. Section backgrounds and
   card borders stay neutral, so the discipline still holds where it matters.
   Every tone-fg carries white text on that CTA and clears 4.5:1: blue 7.31,
   teal 5.47, amber 5.02, neutral 5.29.
   Values come from the --pgt-pillar-* globals so the dropdown, the nav item
   and the module page cannot disagree — including after a Customizer edit. */
.pgt-mega--evaluate { --pgt-tone-fg: var(--pgt-pillar-evaluate); --pgt-tone-bg: var(--pge-blue-50); }
/* Was --pge-blue-500 — one ramp step off Evaluate's --pge-color-primary
   (--blue-600), so both dropdowns showed the same blue icons/text. Elevate
   gets its own hue (see --teal-* in _core.css) so the two are actually
   distinguishable, which is the whole point of a per-module tone. */
.pgt-mega--elevate  { --pgt-tone-fg: var(--pgt-pillar-elevate); --pgt-tone-bg: var(--teal-50); }
.pgt-mega--excel    { --pgt-tone-fg: var(--pgt-pillar-excel); --pgt-tone-bg: var(--amber-50); }
.pgt-mega--neutral  { --pgt-tone-fg: var(--pgt-pillar-neutral); --pgt-tone-bg: var(--pge-gray-100); }

/* ---------- Hidden search band ---------- */
.pgt-search {
	border-bottom: 1px solid var(--pge-gray-100);
	background: var(--pge-gray-50);
	padding: 18px clamp(16px, 3vw, 32px);
}
.pgt-search[hidden] { display: none; }
.pgt-search__inner { max-width: 760px; margin-inline: auto; }
.pgt-search__form {
	display: flex; align-items: center; gap: 12px;
	background: var(--pge-white);
	border: 1.5px solid var(--pge-color-primary);
	border-radius: var(--pge-radius-pill);
	padding: 12px 18px;
	box-shadow: var(--pge-shadow-sm);
}
.pgt-search__icon { display: inline-flex; flex: none; color: var(--pge-color-primary); }
.pgt-search__input {
	flex: 1; min-width: 0;
	border: 0; outline: none;
	font-family: inherit;
	font-size: 15.5px;
	color: var(--pge-color-ink);
	background: transparent;
}
.pgt-search__input::placeholder { color: var(--pge-color-muted); }
.pgt-search__esc {
	font-family: var(--pge-font-mono);
	font-size: 11.5px;
	color: var(--pge-color-muted);
	border: 1px solid var(--pge-color-line);
	border-radius: 6px;
	padding: 3px 7px;
	white-space: nowrap;
	flex: none;
}
.pgt-search__chips { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pgt-search__try { font-size: 12.5px; color: var(--pge-color-muted); }
.pgt-search__chip {
	background: var(--pge-white);
	border: 1px solid var(--pge-color-line);
	border-radius: var(--pge-radius-pill);
	padding: 6px 13px;
	font-size: 13px; font-weight: 500;
	color: var(--pge-color-body);
	white-space: nowrap;
	text-decoration: none;
}
.pgt-search__chip:hover { color: var(--pge-color-ink); border-color: var(--neutral-300); text-decoration: none; }

/* ---------- Burger ---------- */
.pgt-burger {
	display: none;
	width: 40px; height: 40px;
	border: 1px solid var(--pge-color-line);
	border-radius: var(--pge-radius-pill);
	background: var(--pge-white);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
}
.pgt-burger span { display: block; flex: none; width: 16px; height: 2px; background: var(--pge-color-ink); border-radius: 2px; transition: .2s; }
/* wpautop injects <br> into the shortcode-rendered header; as flex items
   they overflow the box and shrink the icon bars to nothing. */
.pgt-burger br { display: none; }
.pgt-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pgt-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pgt-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile drawer (full-screen dialog) ---------- */
html.pgt-no-scroll { overflow: hidden; }
.pgt-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--pge-white);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .22s var(--pgt-ease), transform .22s var(--pgt-ease);
}
.pgt-drawer[hidden] { display: none; }
.pgt-drawer.is-open { opacity: 1; transform: none; }
.pgt-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 74px;
	padding-inline: clamp(1rem, 4vw, 2rem);
	border-bottom: 1px solid var(--pge-gray-100);
	flex-shrink: 0;
}
.pgt-drawer__brand { display: inline-flex; }
.pgt-drawer__close {
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pge-color-line);
	border-radius: var(--pge-radius-pill);
	background: var(--pge-white);
	color: var(--pge-color-ink);
	cursor: pointer;
}
.pgt-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 1.25rem clamp(1rem, 4vw, 2rem) 2rem;
	display: flex;
	flex-direction: column;
}
.pgt-drawer__cta { width: 100%; box-sizing: border-box; padding: .95rem 1rem; text-align: center; margin-bottom: 1rem; }
.pgt-drawer__nav { display: flex; flex-direction: column; }
.pgt-drawer__link {
	display: flex;
	align-items: center;
	min-height: 52px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--pge-color-ink);
	border-bottom: 1px solid var(--pge-gray-100);
	text-decoration: none;
}
.pgt-drawer__link:hover { text-decoration: none; color: var(--pge-color-primary); }
.pgt-drawer__link[aria-current="page"] { color: var(--pge-color-primary); }
.pgt-drawer__group { display: flex; flex-direction: column; }
.pgt-drawer__grouphead { display: flex; align-items: center; border-bottom: 1px solid var(--pge-gray-100); }
.pgt-drawer__grouphead .pgt-drawer__link--group { flex: 1; border-bottom: 0; }
.pgt-drawer__caret {
	width: 44px; height: 44px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent;
	color: var(--pge-ink-400);
	cursor: pointer;
}
.pgt-drawer__caret svg { transition: transform 140ms ease; }
.pgt-drawer__caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.pgt-drawer__sub { display: flex; flex-direction: column; padding: 4px 0 10px 12px; }
.pgt-drawer__sub[hidden] { display: none; }
.pgt-drawer__sublink {
	display: flex; align-items: center;
	min-height: 44px;
	font-size: .95rem; font-weight: 500;
	color: var(--pge-color-body);
	text-decoration: none;
}
.pgt-drawer__sublink:hover { color: var(--pge-color-primary); text-decoration: none; }
.pgt-drawer__auth { display: flex; flex-direction: column; margin-top: .25rem; }
.pgt-drawer__auth .pgt-drawer__link { font-weight: 500; color: var(--pge-color-body); }
.pgt-drawer__link--signout { color: var(--pge-color-muted); }

@media (max-width: 860px) {
	.pgt-nav { display: none; }
	.pgt-header__cta { display: none; }
	.pgt-icons { margin-left: auto; }
	.pgt-burger { display: flex; }
}
@media (min-width: 861px) {
	.pgt-drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pgt-nav__link,
	.pgt-iconbtn,
	.pgt-account__btn,
	.pgt-drawer,
	.pgt-mega__row,
	.pgt-account__chev,
	.pgt-nav__chev,
	.pgt-drawer__caret svg { transition: none; }
}

/* ---------- Sections / editorial rhythm ---------- */
.pgt-section { padding-block: clamp(3.5rem, 7vw, 6.25rem); position: relative; }
.pgt-section--tint { background: var(--pge-color-surface); border-block: var(--pge-hairline); }

/* Numbered kicker: "01 — CHOOSE YOUR GOAL" with a gradient rule */
main .pgt-eyebrow {
	display: flex; align-items: baseline; gap: .7rem;
	color: var(--pge-color-muted);
	font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem;
	margin: 0 0 .4rem;
}
main .pgt-eyebrow::before {
	counter-increment: pgt-section;
	content: counter(pgt-section, decimal-leading-zero);
	font-family: var(--pge-font-mono);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--pge-color-primary);
}
main .pgt-eyebrow::after {
	content: "";
	flex: 0 0 34px;
	height: 2px;
	align-self: center;
	background: var(--pge-gradient, linear-gradient(135deg, #0c1b9e, #0a84ff, #4d93ff));
	border-radius: 1px;
}
.pgt-lead { color: var(--pge-color-muted); font-size: 1.1rem; line-height: 1.65; font-weight: 400; }

.pgt-section__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; margin: .45rem 0 0; max-width: 26ch; }
.pgt-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.25rem; }
.pgt-section__head .pgt-section__title { margin-bottom: 0; }
.pgt-link-arrow { font-weight: 600; color: var(--pge-color-primary); white-space: nowrap; }
.pgt-link-arrow:hover { text-decoration: none; color: var(--pge-color-primary-strong); }
.pgt-container--narrow { max-width: 780px; }

/* ---------- Ticker — ink micro-band ---------- */
.pgt-ticker {
	background: var(--pge-color-ink, #03050f);
	color: rgba(255, 255, 255, .55);
	overflow: hidden;
	white-space: nowrap;
	font-size: .8rem;
	font-weight: 400;
	letter-spacing: .02em;
	padding-block: .55rem;
}
.pgt-ticker__track { display: inline-flex; gap: 3rem; padding-left: 3rem; animation: pgt-marquee 32s linear infinite; }
.pgt-ticker__item { display: inline-flex; gap: .45rem; align-items: center; }
.pgt-ticker__item::before {
	content: "";
	width: 10px; height: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cpath d='M74 23 L74 43 L67 36 L33 70 L17 54 L23 48 L33 58 L61 30 L54 23 Z' fill='%237CB0FF'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .9;
}
.pgt-ticker__item a { color: var(--pge-color-on-dark, #6ba4ff); font-weight: 500; }
.pgt-ticker__item a:hover { color: #fff; }
.pgt-ticker:hover .pgt-ticker__track { animation-play-state: paused; }
@keyframes pgt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Hero — dark editorial ---------- */
.pgt-hero {
	position: relative;
	overflow: clip;
	padding-block: clamp(4rem, 8vw, 6.75rem) clamp(3rem, 6vw, 4.5rem);
	background:
		radial-gradient(1000px 600px at 85% -20%, rgba(10, 132, 255, .16), transparent 62%),
		radial-gradient(800px 500px at -10% 110%, rgba(18, 38, 200, .18), transparent 58%),
		linear-gradient(160deg, var(--pge-color-ink, #03050f) 0%, var(--pge-color-ink-2, #151c42) 100%);
	color: rgba(255, 255, 255, .82);
}
/* Blueprint grid — engineered, not decorated */
.pgt-hero::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(107, 164, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(107, 164, 255, .05) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(900px 620px at 72% 40%, #000 0%, transparent 74%);
	pointer-events: none;
}
.pgt-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative; }
@media (max-width: 980px) { .pgt-hero__grid { grid-template-columns: 1fr; } }

/* Tagline kicker — the brand line, always present on the flagship screen */
.pgt-badge {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	color: var(--pge-color-on-dark, #6ba4ff);
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 1.1rem;
}
.pgt-badge::after {
	content: "";
	width: 34px; height: 2px;
	background: var(--pge-gradient, linear-gradient(135deg, #0c1b9e, #0a84ff, #4d93ff));
	border-radius: 1px;
}

/* Selector list includes portal-body variants: the engine adds
   body.pge-portal-* on every page and ships a high-specificity
   `body.pge-portal-*:not(:has(...)) h1 { color !important }` rule that must
   be out-specified here, or dark-surface headings render ink-on-ink. */
body .pgt-hero .pgt-hero__title,
body.pge-portal-testprep .pgt-hero .pgt-hero__title,
body.pge-portal-competitive .pgt-hero .pgt-hero__title {
	font-size: clamp(2.5rem, 5.2vw, 3.8rem);
	font-weight: 650;
	letter-spacing: -0.028em;
	line-height: 1.08;
	margin: 0 0 1.15rem;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	position: relative;
}
/* Same fight, 2026-08 redesign surfaces.
 *
 * The engine's rule is `body.pge-portal-*:not(:has(.pge-gje-v5)) h1..h4
 * { color: var(--pge-ui-neu-ink) !important }`. Its opt-out was the `.pge-gje-v5`
 * class the old front-page hero carried; the redesign dropped that class, so
 * the rule now fires on every page and paints ink-on-ink over every heading
 * that sits on a dark ground.
 *
 * Re-adding `.pge-gje-v5` somewhere would switch the whole engine block off in
 * one line, but it would also switch it off for engine-rendered content inside
 * theme pages, which is not ours to change. So the headings are reclaimed by
 * container instead: only the four dark surfaces the redesign actually draws.
 * Scoped by container and covering h1-h4, so new headings inside them are
 * covered without another edit here.
 *
 * `body[class]` is the specificity lever — the engine's selector is (0,2,2),
 * this is (0,3,2) and still wins if the engine ever drops its !important. */
body[class] .pgm-hero :is(h1, h2, h3, h4),
body[class] .pgm-plan :is(h1, h2, h3, h4),
body[class] .pgh-tutorband :is(h1, h2, h3, h4),
body[class] .pgp-card--featured :is(h1, h2, h3, h4) {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* The engine also forces font-family/weight/letter-spacing on those headings.
 * The redesign's display sizes are tuned for 600, not the engine's 700. */
body[class] .pgm-hero :is(h1, h2, h3, h4),
body[class] .pgh-tutorband :is(h1, h2, h3, h4),
body[class] .pgp-card--featured :is(h1, h2, h3, h4) {
	font-weight: 600 !important;
	letter-spacing: -.03em !important;
}

/* Soft gradient aura behind the headline — depth without decoration */
.pgt-hero__copy { position: relative; }
.pgt-hero__copy::before {
	content: "";
	position: absolute;
	top: -8%; left: -12%;
	width: 60%; height: 55%;
	background: radial-gradient(closest-side, rgba(10, 132, 255, .22), transparent 70%);
	filter: blur(12px);
	pointer-events: none;
}
body .pgt-hero .pgt-hero__title .accent,
body.pge-portal-testprep .pgt-hero .pgt-hero__title .accent,
body.pge-portal-competitive .pgt-hero .pgt-hero__title .accent {
	background: linear-gradient(135deg, #4d93ff 0%, #6ba4ff 55%, #8aa6ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

/* Hero checklist — parent-facing proof points with the check-arrow mark */
.pgt-hero__checklist {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
	display: grid;
	gap: .55rem;
}
.pgt-hero__checklist li {
	display: flex;
	align-items: center;
	gap: .65rem;
	color: rgba(255, 255, 255, .78);
	font-size: .97rem;
	font-weight: 450;
}
.pgt-hero__checklist li::before {
	content: "";
	flex-shrink: 0;
	width: 15px; height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cpath d='M74 23 L74 43 L67 36 L33 70 L17 54 L23 48 L33 58 L61 30 L54 23 Z' fill='%235299FF'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Popular searches — engagement + internal links under the search pill */
.pgt-hero__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem .6rem;
	margin-top: .8rem;
	font-size: .82rem;
	color: rgba(255, 255, 255, .42);
}
.pgt-hero__popular a {
	color: var(--pge-color-on-dark, #6ba4ff);
	font-weight: 500;
	border-bottom: 1px solid rgba(107, 164, 255, .28);
	padding-bottom: 1px;
}
.pgt-hero__popular a:hover { color: #fff; text-decoration: none; border-color: #fff; }

/* Trust rating row */
.pgt-hero__trust strong { color: rgba(255, 255, 255, .8); font-weight: 600; }
.pgt-hero__stars { color: var(--pge-color-accent, #4d93ff); letter-spacing: .1em; margin-right: .45rem; }
.pgt-hero .pgt-lead { color: rgba(255, 255, 255, .6); }
.pgt-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.pgt-hero__trust {
	margin-top: 1.6rem; padding-top: 1.1rem;
	border-top: var(--pge-hairline-dark, 1px solid rgba(107,164,255,.16));
	color: rgba(255, 255, 255, .48);
	font-size: .86rem; font-weight: 400;
}

/* Search — white pill on dark */
.pgt-hero__search {
	display: flex; align-items: center; gap: .5rem;
	background: #fff;
	border: 0;
	border-radius: var(--pge-radius-pill);
	padding: .38rem .38rem .38rem 1.15rem;
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .5);
	max-width: 500px; margin-top: 1.8rem;
	transition: box-shadow .2s var(--pgt-ease);
}
.pgt-hero__search:focus-within { box-shadow: 0 12px 32px -12px rgba(0,0,0,.5), 0 0 0 3px rgba(77, 147, 255, .45); }
.pgt-hero__search-icon { opacity: .45; }
.pgt-hero__search input { flex: 1; border: 0; outline: 0; font-size: .95rem; background: transparent; min-width: 0; font-family: inherit; color: var(--pge-color-ink); }
.pgt-hero__search .pgt-btn { padding: .62rem 1.2rem; border-radius: var(--pge-radius-pill); }

/* Mock test card — white artifact floating on ink, gradient crown */
.pgt-hero__visual { position: relative; padding: 10px 6px; }
.pgt-mock {
	position: relative;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .55);
	max-width: 470px; margin-inline: auto;
	color: var(--pge-color-body);
}
.pgt-mock::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0;
	height: 3px;
	border-radius: 16px 16px 0 0;
	background: var(--pge-gradient, linear-gradient(135deg, #0c1b9e, #0a84ff, #4d93ff));
}
.pgt-mock__bar { display: flex; align-items: center; gap: .4rem; padding: .85rem 1.1rem; border-bottom: var(--pge-hairline); }
.pgt-mock__bar span:not(.pgt-mock__bar-title):not(.pgt-mock__timer) { width: 8px; height: 8px; border-radius: 50%; background: var(--pge-color-line); }
.pgt-mock__bar-title { font-size: .78rem; font-weight: 600; color: var(--pge-color-body); margin-left: .4rem; overflow: hidden; text-overflow: ellipsis; }
.pgt-mock__timer {
	margin-left: auto; font-family: var(--pge-font-mono); font-size: .74rem; font-weight: 700;
	color: var(--pge-color-primary); background: var(--pge-color-primary-soft, #edf1ff);
	padding: .22rem .6rem; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.pgt-mock__body { padding: 1.3rem 1.45rem 1.5rem; }
.pgt-mock__progress { display: flex; align-items: center; gap: .7rem; font-size: .76rem; font-weight: 500; color: var(--pge-color-muted); margin-bottom: 1rem; }
.pgt-mock__bar-track { flex: 1; height: 4px; background: var(--pge-gray-100, #eceff9); border-radius: 2px; overflow: hidden; }
.pgt-mock__bar-fill { width: 24%; height: 100%; background: var(--pge-gradient, linear-gradient(135deg, #0c1b9e, #0a84ff, #4d93ff)); border-radius: 2px; animation: pgt-progress 1.8s var(--pgt-ease) both; }
@keyframes pgt-progress { from { width: 0; } to { width: 24%; } }
.pgt-mock__question { font-weight: 600; color: var(--pge-color-ink); font-size: 1.02rem; margin: 0 0 1rem; line-height: 1.5; }
.pgt-mock__options { display: grid; gap: .5rem; }
.pgt-mock__option { border: var(--pge-hairline); border-radius: 10px; padding: .6rem .85rem; font-size: .9rem; font-weight: 400; color: var(--pge-color-body); position: relative; }
.pgt-mock__option--correct {
	border-color: var(--pge-color-success, #16a34a);
	background: var(--pge-color-mint-soft, #f0fdf4);
	color: var(--pge-color-ink); font-weight: 600;
}
.pgt-mock__option--correct span { position: absolute; right: .85rem; color: var(--pge-color-success, #16a34a); font-weight: 700; }
.pgt-mock__chip {
	position: absolute;
	background: rgba(3, 5, 15, .88);
	backdrop-filter: blur(6px);
	border: var(--pge-hairline-dark, 1px solid rgba(107,164,255,.16));
	border-radius: var(--pge-radius-pill);
	box-shadow: 0 16px 32px -12px rgba(0,0,0,.5);
	font-size: .74rem; font-weight: 600; letter-spacing: .02em;
	padding: .5rem .9rem; color: var(--pge-color-on-dark, #6ba4ff);
	animation: pgt-float 6s ease-in-out infinite;
}
.pgt-mock__chip--1 { top: -14px; right: -16px; animation-delay: 0s; }
.pgt-mock__chip--2 { bottom: -14px; left: -20px; animation-delay: 1.6s; }
@keyframes pgt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 640px) { .pgt-mock__chip { display: none; } }

/* ---------- Stats — dark band continuing the hero ---------- */
.pgt-stats {
	background: var(--pge-color-ink-2, #151c42);
	border-top: var(--pge-hairline-dark, 1px solid rgba(107,164,255,.16));
	display: grid; grid-template-columns: repeat(4, 1fr);
	max-width: none; margin: 0; padding-block: 0;
}
@media (max-width: 760px) { .pgt-stats { grid-template-columns: repeat(2, 1fr); } }
.pgt-stats__tile {
	display: flex; align-items: center; justify-content: center; gap: .85rem;
	padding: 1.5rem clamp(1rem, 2.5vw, 2rem);
	border-right: var(--pge-hairline-dark, 1px solid rgba(107,164,255,.16));
}
.pgt-stats__tile:last-child { border-right: 0; }
@media (max-width: 760px) {
	.pgt-stats__tile:nth-child(2n) { border-right: 0; }
	.pgt-stats__tile:nth-child(-n+2) { border-bottom: var(--pge-hairline-dark, 1px solid rgba(107,164,255,.16)); }
}
.pgt-stats__icon { color: var(--pge-color-on-dark, #6ba4ff); display: grid; place-items: center; opacity: .9; }
.pgt-stats__icon svg { width: 22px; height: 22px; }
.pgt-stats__value {
	font-family: var(--pge-font-mono);
	font-weight: 700; font-size: 1.4rem;
	color: #fff; line-height: 1.15;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.pgt-stats__label { font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: .15rem; }

/* ---------- Category grid — hairline tiles ---------- */
.pgt-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 980px) { .pgt-categories { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pgt-categories { grid-template-columns: 1fr; } }
.pgt-cat-card {
	display: block; background: var(--pge-card-bg, #fff);
	border: var(--pge-hairline);
	border-radius: var(--pge-radius-md); padding: 1.35rem 1.3rem;
	transition: border-color .18s var(--pgt-ease), box-shadow .18s var(--pgt-ease), transform .18s var(--pgt-ease);
}
.pgt-cat-card:hover {
	text-decoration: none;
	border-color: rgba(27, 59, 235, .45);
	box-shadow: var(--pge-shadow-md);
	transform: translateY(-2px);
}
.pgt-cat-card__icon {
	width: 40px; height: 40px; border-radius: 10px;
	display: grid; place-items: center;
	background: var(--pge-color-primary-soft, #edf1ff);
	color: var(--pge-color-primary);
	margin-bottom: .8rem;
	transition: background .18s var(--pgt-ease), color .18s var(--pgt-ease);
}
.pgt-cat-card__icon svg { width: 20px; height: 20px; }
.pgt-cat-card:hover .pgt-cat-card__icon { background: var(--pge-gradient, linear-gradient(135deg,#0c1b9e,#0a84ff,#4d93ff)); color: #fff; }
.pgt-cat-card__name { display: block; font-weight: 600; color: var(--pge-color-ink); font-size: 1rem; }
.pgt-cat-card__count { display: block; color: var(--pge-color-muted); font-size: .82rem; font-weight: 500; margin-top: .25rem; }

/* ---------- Steps — the gradient told as a story ----------
   Evaluate → chip start · Elevate → chip mid · Excel → chip end. */
.pgt-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pgt-grid { grid-template-columns: 1fr; } }
.pgt-grid--steps { position: relative; gap: 0; border: var(--pge-hairline); border-radius: var(--pge-radius-lg); overflow: hidden; background: #fff; }
.pgt-card--step {
	background: #fff; border: 0; border-radius: 0; box-shadow: none;
	padding: 1.9rem 1.8rem 2rem;
	border-right: var(--pge-hairline);
	position: relative;
}
.pgt-grid--steps > .pgt-card--step:last-child { border-right: 0; }
@media (max-width: 900px) {
	.pgt-card--step { border-right: 0; border-bottom: var(--pge-hairline); }
	.pgt-grid--steps > .pgt-card--step:last-child { border-bottom: 0; }
}
.pgt-card--step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.pgt-grid--steps > .pgt-card--step:nth-child(1)::before { background: #0c1b9e; }
.pgt-grid--steps > .pgt-card--step:nth-child(2)::before { background: #0a84ff; }
.pgt-grid--steps > .pgt-card--step:nth-child(3)::before { background: #4d93ff; }
/* Doubled class beats the later generic .pgt-card__icon color rule */
.pgt-grid--steps .pgt-card__icon--step,
.pgt-card__icon--step.pgt-card__icon--step {
	width: 40px; height: 40px; border-radius: 10px;
	display: grid; place-items: center;
	font-family: var(--pge-font-mono); font-weight: 700; font-size: .95rem;
	color: #fff !important; margin-bottom: 1rem;
	border: 0; box-shadow: none;
}
.pgt-grid--steps > .pgt-card--step:nth-child(1) .pgt-card__icon--step { background: #0c1b9e; }
.pgt-grid--steps > .pgt-card--step:nth-child(2) .pgt-card__icon--step { background: #0a84ff; }
.pgt-grid--steps > .pgt-card--step:nth-child(3) .pgt-card__icon--step { background: #4d93ff; }
.pgt-card--step h3 { font-size: 1.35rem; font-weight: 600; margin: 0 0 .3rem; }
.pgt-card__kicker {
	font-weight: 600 !important;
	font-size: .72rem !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 .55rem !important;
}
.pgt-grid--steps > .pgt-card--step:nth-child(1) .pgt-card__kicker { color: #0c1b9e !important; }
.pgt-grid--steps > .pgt-card--step:nth-child(2) .pgt-card__kicker { color: #0a84ff !important; }
.pgt-grid--steps > .pgt-card--step:nth-child(3) .pgt-card__kicker { color: #4d93ff !important; }
.pgt-card--step p { margin: 0; color: var(--pge-color-muted); line-height: 1.6; font-size: .95rem; }

/* ---------- Feature list — editorial rows, not cards ---------- */
.pgt-grid--6 { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); margin-top: .75rem; }
@media (max-width: 760px) { .pgt-grid--6 { grid-template-columns: 1fr; } }
.pgt-grid--6 > .pgt-card {
	background: none; border: 0; border-radius: 0; box-shadow: none;
	border-top: var(--pge-hairline);
	padding: 1.5rem 0 1.6rem;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 0 1.1rem;
	transition: none;
}
.pgt-grid--6 > .pgt-card:hover { transform: none; box-shadow: none; }
.pgt-grid--6 .pgt-card__icon {
	grid-row: 1 / span 2;
	width: 40px; height: 40px; border-radius: 10px;
	display: grid; place-items: center;
	background: var(--pge-color-primary-soft, #edf1ff);
	color: var(--pge-color-primary);
	border: 0; box-shadow: none; margin: 0;
	font-size: 1rem;
}
.pgt-grid--6 .pgt-card__icon svg { width: 20px; height: 20px; }
.pgt-grid--6 .pgt-card h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem; }
.pgt-grid--6 .pgt-card p { margin: 0; color: var(--pge-color-muted); line-height: 1.6; font-size: .93rem; }

/* Generic card (used outside the two grids above) */
.pgt-card {
	background: var(--pge-card-bg, #fff);
	border: var(--pge-hairline);
	border-radius: var(--pge-card-radius, 16px);
	box-shadow: var(--pge-card-shadow);
	padding: 1.6rem;
	transition: border-color .18s var(--pgt-ease), box-shadow .18s var(--pgt-ease), transform .18s var(--pgt-ease);
}
.pgt-card__icon {
	width: 44px; height: 44px; border-radius: 10px;
	display: grid; place-items: center;
	background: var(--pge-color-primary-soft, #edf1ff);
	color: var(--pge-color-primary);
	margin-bottom: .9rem;
}
.pgt-card__icon svg { width: 22px; height: 22px; }
.pgt-card h3 { margin: 0 0 .4rem; font-size: 1.12rem; font-weight: 600; }
.pgt-card p { margin: 0; color: var(--pge-color-muted); line-height: 1.6; }

/* ---------- Latest tests grid ---------- */
.pgt-latest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 980px) { .pgt-latest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pgt-latest-grid { grid-template-columns: 1fr; } }
.pgt-latest-card {
	position: relative; display: flex; flex-direction: column;
	background: #fff;
	border: var(--pge-hairline);
	border-radius: var(--pge-radius-md); padding: 1.25rem; color: inherit;
	transition: border-color .18s var(--pgt-ease), box-shadow .18s var(--pgt-ease), transform .18s var(--pgt-ease);
}
.pgt-latest-card:hover { text-decoration: none; border-color: rgba(27,59,235,.45); box-shadow: var(--pge-shadow-md); transform: translateY(-2px); }
.pgt-latest-card__badge {
	position: absolute; top: 1rem; right: 1rem;
	background: var(--pge-gradient, linear-gradient(135deg,#0c1b9e,#0a84ff,#4d93ff));
	color: #fff;
	font-size: .6rem; font-weight: 700; letter-spacing: .1em;
	padding: .22rem .5rem; border-radius: 5px;
}
/* Card innards are spans (block-styled): wpautop mangles anchors that
   contain block-level tags, and shortcode output passes through it. */
.pgt-latest-card__icon { display: block; color: var(--pge-color-primary); margin-bottom: .7rem; }
.pgt-latest-card__icon svg { width: 20px; height: 20px; }
.pgt-latest-card__title { display: block; color: var(--pge-color-ink); font-family: var(--pge-font-heading); font-size: .98rem; font-weight: 600; margin: 0 0 .6rem; line-height: 1.35; min-height: 2.7em; }
.pgt-latest-card__meta { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pgt-latest-card__meta span {
	font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--pge-color-muted); background: var(--pge-color-surface);
	border: var(--pge-hairline);
	padding: .18rem .5rem; border-radius: 5px;
}
.pgt-latest-card__cta { font-weight: 600; color: var(--pge-color-primary); font-size: .88rem; margin-top: auto; }

/* ---------- Testimonials — editorial quotes, not cards ---------- */
.pgt-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2rem; }
@media (max-width: 900px) { .pgt-testimonials { grid-template-columns: 1fr; } }
.pgt-testimonial-card {
	background: none; border: 0; border-radius: 0; box-shadow: none;
	border-left: 2px solid transparent;
	border-image: linear-gradient(180deg, #0c1b9e, #4d93ff) 1;
	padding: .4rem 0 .4rem 1.4rem;
	position: relative;
	transition: none;
}
.pgt-testimonial-card:hover { transform: none; }
.pgt-testimonial-card__stars { color: var(--pge-color-primary); letter-spacing: .14em; margin-bottom: .6rem; font-size: .82rem; }
.pgt-testimonial-card__quote { color: var(--pge-color-ink); line-height: 1.6; margin: 0 0 1rem; font-size: 1.04rem; font-weight: 450; }
.pgt-testimonial-card__author { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--pge-color-ink); font-size: .9rem; }
.pgt-testimonial-card__avatar {
	width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	background: var(--pge-gradient, linear-gradient(135deg,#0c1b9e,#0a84ff,#4d93ff));
	color: #fff;
	font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.pgt-testimonial-card__grade { color: var(--pge-color-muted); font-weight: 400; }

/* ---------- Split section — photo + proof copy ---------- */
.pgt-split {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
@media (max-width: 900px) { .pgt-split { grid-template-columns: 1fr; } }
.pgt-split__media { margin: 0; position: relative; }
.pgt-split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pge-radius-lg);
	border: var(--pge-hairline);
	box-shadow: var(--pge-shadow-lg);
}
.pgt-split__media::before {
	content: "";
	position: absolute;
	top: -14px; left: -14px; right: 34%; bottom: 55%;
	border-top: 2px solid;
	border-left: 2px solid;
	border-image: linear-gradient(135deg, #0c1b9e, #0a84ff) 1;
	border-radius: 4px 0 0 0;
	pointer-events: none;
}
.pgt-split__list {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
	display: grid;
	gap: .65rem;
}
.pgt-split__list li {
	display: flex;
	align-items: center;
	gap: .7rem;
	color: var(--pge-color-body);
	font-size: 1rem;
}
.pgt-split__list li::before {
	content: "";
	flex-shrink: 0;
	width: 16px; height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cpath d='M74 23 L74 43 L67 36 L33 70 L17 54 L23 48 L33 58 L61 30 L54 23 Z' fill='%232563EB'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- FAQ — hairline list ---------- */
.pgt-faq { margin-top: 1.75rem; border-top: var(--pge-hairline); display: block; }
.pgt-faq__item { border: 0; border-bottom: var(--pge-hairline); border-radius: 0; background: none; padding: 1.15rem 0; box-shadow: none; transition: none; }
.pgt-faq__item:hover { transform: none; box-shadow: none; }
.pgt-faq__item[open] { background: none; }
.pgt-faq__item summary {
	cursor: pointer; font-weight: 600; color: var(--pge-color-ink); font-size: 1.02rem;
	list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.pgt-faq__item summary::-webkit-details-marker { display: none; }
.pgt-faq__item summary::after {
	content: "";
	flex-shrink: 0;
	width: 22px; height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
	transition: transform .22s var(--pgt-ease);
}
.pgt-faq__item[open] summary::after { transform: rotate(180deg); }
.pgt-faq__answer { color: var(--pge-color-muted); line-height: 1.65; margin-top: .75rem; max-width: 68ch; }

/* ---------- CTA band — ink panel, gradient crown ---------- */
.pgt-cta {
	position: relative;
	overflow: clip;
	border-radius: var(--pge-radius-lg);
	border: 0;
	background:
		radial-gradient(640px 320px at 85% 115%, rgba(10, 132, 255, .22), transparent 60%),
		linear-gradient(160deg, var(--pge-color-ink, #03050f), var(--pge-color-ink-2, #151c42));
	color: #fff;
	padding: clamp(2.75rem, 6vw, 4.5rem);
	text-align: center;
	box-shadow: var(--pge-shadow-lg);
}
.pgt-cta::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--pge-gradient, linear-gradient(135deg, #0c1b9e, #0a84ff, #4d93ff));
}
/* Tagline above the heading — the brand's sign-off */
.pgt-cta::after {
	content: "Evaluate. Elevate. Excel.";
	position: absolute;
	top: clamp(1.4rem, 3vw, 2.2rem); left: 0; right: 0;
	font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
	color: var(--pge-color-on-dark, #6ba4ff);
}
/* ID selector: beats the plugin's portal heading override (see v2 note) */
#pgt-final-cta h2 { color: #fff !important; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 650; letter-spacing: -0.02em; margin: 1.2rem 0 .6rem; }
.pgt-cta p { color: rgba(255,255,255,.62); margin: 0 auto 1.75rem; max-width: 46ch; font-size: 1.05rem; }
.pgt-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; position: relative; }

/* ---------- Footer — light and sparse (full inversion of the old ink block) ----------
   Dotted texture over the footer ground, a display statement instead of a
   tagline, and three heading-less columns of arrow links. */
.pgt-footer {
	background:
		radial-gradient(var(--pge-gray-200) 1px, transparent 1px) 0 0 / 22px 22px,
		var(--pgt-footer-bg, var(--pge-gray-50));
	border-top: 1px solid var(--pge-gray-100);
	padding: clamp(36px, 5vw, 52px) clamp(20px, 4vw, 40px) 26px;
	min-height: var(--pgt-footer-min-h, 0);
	color: var(--pgt-footer-fg, var(--pge-color-body));
	position: relative;
	overflow: hidden;
}
/* Pack-authored landmark panorama — a light pencil sketch pinned to the
   footer floor, behind the content. Wide art anchors center so the tallest
   landmarks survive narrow viewports. */
.pgt-footer__skyline {
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	color: var(--pgt-footer-fg, var(--pge-color-body));
	opacity: 0.08;
	pointer-events: none;
}
.pgt-footer__skyline svg {
	display: block;
	width: max(100%, 1200px);
	height: auto;
	margin-inline: auto;
}
/* Uploaded (Customizer) panorama: raster art arrives full-strength, so the
   sketch weight comes from opacity alone. Slightly lower than the SVG's
   because generated line art tends to run denser than ours. */
.pgt-footer__skyline--img { opacity: 0.07; }
.pgt-footer__skyline--img img {
	display: block;
	width: max(100%, 1200px);
	height: auto;
	margin-inline: auto;
	filter: grayscale(0.15);
}
.pgt-footer__inner { max-width: 1160px; margin-inline: auto; position: relative; }
.pgt-footer__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 40px;
	align-items: start;
}
.pgt-footer__brand { display: block; }
/* Sized to pair with the statement below, not with the header's own mark.
 * At 26px/16.8px (the header's own footer-only shrink) the lockup read as a
 * caption sitting above a bold display headline — two very different type
 * weights with nothing tying them together. 34px/1.375rem brings the chip
 * to the header's own size and the wordmark close to the statement's own
 * 21-28px range, so the two rows read as one brand block. */
.pgt-footer__brand .pgt-brandlogo__chip { width: 34px; height: 34px; }
.pgt-footer__brand .pgt-brandlogo__word { font-size: 1.375rem; }
/* Three module names, one per line. Sized to the footer's own rhythm: the
   top row is ~136px and the brand lockup above this costs ~48px, so three
   lines have ~88px to live in — 28px at a 1.04 leading lands at ~87px and
   the statement stops driving the footer's height. */
.pgt-footer__statement {
	font-size: clamp(21px, 2.4vw, 28px);
	line-height: 1.04;
	letter-spacing: -.032em;
	font-weight: 600;
	color: var(--pgt-footer-fg, var(--pge-color-ink));
	margin: 18px 0 0;
}
.pgt-footer__statement-line {
	display: block;
	width: fit-content;
	color: inherit;
	text-decoration: none;
	transition: color 140ms var(--pgt-ease);
}
.pgt-footer__statement-line:hover,
.pgt-footer__statement-line:focus-visible {
	color: var(--pge-color-primary);
	text-decoration: none;
}
/* The country's own support email / WhatsApp number, printed under the
   statement — see Chrome::footer_contact_line(). Small and quiet on
   purpose: it is a utility line, not another headline competing with the
   statement above it. */
.pgt-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 14px 0 0;
	font-size: 13px;
}
.pgt-footer__contact-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--pgt-footer-fg, var(--pge-color-ink));
	opacity: .72;
	text-decoration: none;
	transition: opacity 140ms var(--pgt-ease), color 140ms var(--pgt-ease);
}
.pgt-footer__contact-item:hover,
.pgt-footer__contact-item:focus-visible {
	opacity: 1;
	color: var(--pge-color-primary);
}
.pgt-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 28px;
}
.pgt-footer__col { display: flex; flex-direction: column; gap: 11px; }
.pgt-footer__col a {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var(--pgt-footer-fs, 14px);
	font-weight: 500;
	color: var(--pgt-footer-fg, var(--pge-color-body));
	text-decoration: none;
	transition: color 140ms var(--pgt-ease);
}
.pgt-footer__arrow { display: inline-flex; color: var(--neutral-400); transition: color 140ms var(--pgt-ease); }
.pgt-footer__col a:hover { color: var(--pge-color-ink); text-decoration: none; }
.pgt-footer__col a:hover .pgt-footer__arrow { color: var(--pge-color-primary); }
.pgt-footer__bottom {
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--pge-color-line);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--neutral-400);
}
/* Brand-entity line ("often searched as PrepGrow") — full row, quiet. */
.pgt-footer__entity { flex: 1 0 100%; margin: 0 0 4px; font-size: 12px; line-height: 1.5; color: var(--neutral-400); }
.pgt-footer__bottomlinks { display: inline-flex; flex-wrap: wrap; gap: .4rem 22px; align-items: center; }
.pgt-footer__bottomlinks a { color: var(--neutral-400); text-decoration: none; }
.pgt-footer__bottomlinks a:hover { color: var(--pge-color-ink); text-decoration: none; }
.pgt-footer__locale { color: var(--neutral-300); }
/* "Change country" beside the locale line — only printed when the engine
   knows the global landing (pge_global_home_url()). Underlined on purpose:
   it is the one bottom-row link that leaves this site. */
.pgt-footer__localegroup { display: inline-flex; align-items: baseline; gap: 10px; }
.pgt-footer__bottomlinks a.pgt-footer__locale-switch { color: var(--neutral-400); text-decoration: underline; text-underline-offset: 3px; }
.pgt-footer__bottomlinks a.pgt-footer__locale-switch:hover { color: var(--pge-color-ink); text-decoration: underline; }

/* ---------- Minimal app footer (focused authenticated surfaces) ---------- */
.pgt-appfooter {
	border-top: 1px solid var(--pge-gray-100);
	background: transparent;
	margin-top: 2.5rem;
}
.pgt-appfooter__inner {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.1rem;
	font-size: .82rem;
	color: var(--pge-color-muted);
}
.pgt-appfooter__nav { display: inline-flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pgt-appfooter__nav a { color: var(--pge-color-muted); font-weight: 500; padding: .35rem 0; }
.pgt-appfooter__nav a:hover { color: var(--pge-color-primary); text-decoration: none; }

/* ---------- Brand logo (chip + wordmark) ----------
   Chip gradient #0c1b9e→#0a84ff→#4d93ff at rx=18 on the 92-unit viewBox
   (≈8px at 34px render); Outfit wordmark — "prep" 500 ink / "Gro" 700 brand
   blue. The footer lockup is the same mark on light ground, not inverted. */
.pgt-brandlogo { display: inline-flex; align-items: center; gap: 9px; }
.pgt-brandlogo__chip { flex-shrink: 0; display: block; }
.pgt-logo .pgt-brandlogo__chip { width: var(--pgt-logo-h, 30px); height: var(--pgt-logo-h, 30px); }
.pgt-brandlogo__word { font-family: var(--pge-font-heading); font-size: 20px; letter-spacing: -.015em; line-height: 1; }
.pgt-logo .pgt-brandlogo__word { font-size: calc(var(--pgt-logo-h, 30px) * .67); }
.pgt-brandlogo__prep { font-weight: 500; color: var(--pge-color-ink); }
/* Matches the chip's mid-gradient stop (blue-500 azure), not the flat
   --pge-color-primary — the wordmark is meant to read as the same blue
   as the chip icon beside it, not the UI's button/link blue. */
.pgt-brandlogo__gro { font-weight: 700; color: var(--pge-blue-500); }
.pgt-brandlogo__r { font-weight: inherit; }
.pgt-brandlogo__o { font-weight: inherit; }
.pgt-brandlogo__copy { display: flex; flex-direction: column; gap: .18rem; }
.pgt-brandlogo__tagline {
	font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
	color: var(--pge-color-muted);
}
/* Kit rule: the header uses the PRIMARY lockup — no tagline at navbar scale.
   The footer states the tagline as its display headline instead. */
.pgt-header .pgt-brandlogo__tagline { display: none; }

/* ---------- Country chip ----------
   Restores the header flag the 2026-08 rebuild dropped in favour of a
   footer-only text locale line. Inline SVG, not an emoji flag: emoji flags
   do not render on most Windows builds. */
.pgt-countrychip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 5px 10px 5px 6px;
	border: 1px solid var(--pge-color-line);
	border-radius: var(--pge-radius-pill);
	background: var(--pge-white);
}
.pgt-countrychip__flag {
	display: block;
	border-radius: 2.5px;
	/* The US canton is near-white at its edge; without this the flag bleeds
	   into a white header. */
	box-shadow: 0 0 0 1px rgba(3, 5, 15, .08);
}
.pgt-countrychip__code {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--pge-color-body);
}
/* Below the nav breakpoint the burger takes over and space is tight — keep
   the flag, drop the code. This compact flag-only chip now runs all the way
   down to phones: since 2026-09-08 the lockup is invariant (no country on
   the wordmark), so the chip is the header's ONLY country signal, and hiding
   it under 640px left phones with none at all (owner: "I would need that"). */
@media (max-width: 1040px) {
	.pgt-countrychip__code { display: none; }
	.pgt-countrychip { padding: 5px 6px; }
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-countrychip {
	background: transparent;
	border-color: #2a3345;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-countrychip__code { color: #c8d2e4; }

/* ---------- Archive / search / content pages ---------- */
.pgt-archive, .pgt-page { margin-top: 2.75rem; margin-bottom: 4rem; }
.pgt-archive__head { margin-bottom: 2.25rem; }
.pgt-archive__title, .pgt-page__title {
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
	letter-spacing: -0.02em;
	margin: .4rem 0 0;
}
.pgt-page__head { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: var(--pge-hairline); }
.pgt-archive__search { max-width: 480px; margin-top: 1.25rem; }
.pgt-archive__search .wp-block-search__input {
	border: var(--pge-hairline); border-radius: 10px 0 0 10px;
	padding: .65rem .9rem; font-family: inherit; background: #fff;
}
.pgt-archive__search .wp-block-search__input:focus { outline: none; border-color: var(--pge-color-primary); box-shadow: var(--pge-focus-ring); }
.pgt-archive__search .wp-block-search__button {
	border: 1px solid var(--pge-color-primary); border-left: 0;
	border-radius: 0 10px 10px 0;
	background: var(--pge-color-primary); color: #fff; font-weight: 600; cursor: pointer;
}
.pgt-archive__list { list-style: none; padding: 0; display: grid; gap: 0; border-top: var(--pge-hairline); }
.pgt-archive__list > li {
	background: none; border: 0; border-bottom: var(--pge-hairline);
	border-radius: 0; padding: 1.5rem .25rem;
	box-shadow: none;
	transition: background .15s var(--pgt-ease);
}
.pgt-archive__list > li:hover { transform: none; box-shadow: none; background: var(--pge-color-surface); }
.pgt-archive__list .wp-block-post-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 .4rem; }
.pgt-archive__list .wp-block-post-title a { color: var(--pge-color-ink); text-decoration: none; }
.pgt-archive__list .wp-block-post-title a:hover { color: var(--pge-color-primary); }
.pgt-archive__list .wp-block-post-excerpt { color: var(--pge-color-muted); margin: 0; }
.pgt-archive__list .wp-block-post-excerpt__more-link { font-weight: 600; color: var(--pge-color-primary); }
.pgt-archive__pagination { margin-top: 2rem; font-weight: 600; }
.pgt-archive__pagination a { color: var(--pge-color-ink); }
.pgt-archive__pagination .wp-block-query-pagination-numbers .current {
	background: var(--pge-color-primary); color: #fff; border-radius: 6px; padding: .2rem .55rem;
}
.pgt-archive__empty {
	background: var(--pge-color-surface); border: var(--pge-hairline); border-radius: var(--pge-radius-lg);
	box-shadow: none; padding: 3rem 2rem; text-align: center;
}
.pgt-archive__empty h2 { margin: 0 0 .5rem; }
.pgt-archive__empty p { color: var(--pge-color-muted); }
.pgt-archive__empty-cta { margin-top: 1.25rem; }
.pgt-single__meta { gap: .9rem; margin-top: .9rem; font-size: .86rem; font-weight: 500; color: var(--pge-color-muted); }
.pgt-single__meta a { color: var(--pge-color-primary); }
.pgt-single__hero { margin-bottom: 2rem; }
.pgt-single__hero img { border: var(--pge-hairline); box-shadow: var(--pge-shadow-md); }

/* Long-form prose (posts, legal pages) */
.pgt-prose { font-size: 1.03rem; line-height: 1.75; color: var(--pge-color-body); }
.pgt-prose h2 { font-size: 1.55rem; margin: 2.25rem 0 .75rem; }
.pgt-prose h3 { font-size: 1.2rem; margin: 1.75rem 0 .6rem; }
.pgt-prose p { margin: 0 0 1.1rem; }
.pgt-prose ul, .pgt-prose ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.pgt-prose li { margin-bottom: .4rem; }
.pgt-prose a { text-decoration: underline; text-decoration-color: rgba(27,59,235,.35); text-underline-offset: 3px; }
.pgt-prose blockquote {
	border-left: 2px solid var(--pge-color-primary);
	background: var(--pge-color-surface);
	margin: 1.5rem 0; padding: 1rem 1.4rem; border-radius: 0 10px 10px 0;
}
.pgt-prose table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
.pgt-prose th, .pgt-prose td { border: var(--pge-hairline); padding: .6rem .8rem; text-align: left; }
.pgt-prose th { background: var(--pge-color-surface); font-weight: 600; color: var(--pge-color-ink); }

/* ---------- Country accent layer ----------
   Keyed off the engine's brand-region body class. Identifiable objects
   (header chip, badge flag) render from PHP/markup; ambient accents here.
   v3: refined for the dark hero — star watermark in on-dark blue, hairline
   flag stripe above the header. */
body.brand-region-usa .pgt-header::before,
body.brand-region-school .pgt-header::before {
	content: "";
	display: block;
	height: 3px;
	/* Brand chip-gradient hairline — the flag chip beside the logo already
	   identifies the edition; a tricolor stripe fought the calm blue system. */
	background: var(--pge-gradient, linear-gradient(135deg, #0c1b9e, #0a84ff 52%, #4d93ff));
}
body.brand-region-usa .pgt-hero::after,
body.brand-region-school .pgt-hero::after {
	content: "";
	position: absolute;
	top: 9%; right: 4%;
	width: 190px; height: 190px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 L59.5 36.5 L92 36.5 L66 55.5 L75.5 86 L50 67 L24.5 86 L34 55.5 L8 36.5 L40.5 36.5 Z' fill='none' stroke='%237CB0FF' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: .10;
	transform: rotate(-10deg);
	pointer-events: none;
}
@media (max-width: 980px) {
	body.brand-region-usa .pgt-hero::after,
	body.brand-region-school .pgt-hero::after { display: none; }
}
/* Hero badge (tagline kicker) leads with the flag */
body.brand-region-usa .pgt-badge::before,
body.brand-region-school .pgt-badge::before {
	content: "";
	width: 20px; height: 14px;
	flex-shrink: 0;
	border-radius: 2.5px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='42' fill='%23B22234'/%3E%3Cg fill='%23F5F1E8'%3E%3Crect y='6' width='60' height='6'/%3E%3Crect y='18' width='60' height='6'/%3E%3Crect y='30' width='60' height='6'/%3E%3C/g%3E%3Crect width='27' height='24' fill='%233C3B6E'/%3E%3Cg fill='%23F5F1E8'%3E%3Ccircle cx='5.5' cy='5' r='1.7'/%3E%3Ccircle cx='13.5' cy='5' r='1.7'/%3E%3Ccircle cx='21.5' cy='5' r='1.7'/%3E%3Ccircle cx='9.5' cy='11.5' r='1.7'/%3E%3Ccircle cx='17.5' cy='11.5' r='1.7'/%3E%3Ccircle cx='5.5' cy='18' r='1.7'/%3E%3Ccircle cx='13.5' cy='18' r='1.7'/%3E%3Ccircle cx='21.5' cy='18' r='1.7'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}

/* ---------- Skeleton loading (design-system utility) ----------
   Perceived-speed principle: async grids render placeholder cards, never a
   bare "Loading…" string. Consumers: exam search, any future async list. */
.pgt-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--pge-gray-100, #eceff9);
	border-radius: 6px;
	color: transparent !important;
	user-select: none;
}
.pgt-skeleton::after {
	content: "";
	position: absolute; inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
	animation: pgt-shimmer 1.4s ease-in-out infinite;
}
@keyframes pgt-shimmer { to { transform: translateX(100%); } }
.pgt-skeleton-card {
	background: #fff;
	border: var(--pge-hairline);
	border-radius: var(--pge-radius-md);
	padding: 1.25rem;
	display: grid;
	gap: .7rem;
}
.pgt-skeleton-card .pgt-skeleton { height: 12px; }
.pgt-skeleton-card .pgt-skeleton--icon { width: 40px; height: 40px; border-radius: 10px; }
.pgt-skeleton-card .pgt-skeleton--title { height: 16px; width: 72%; }
.pgt-skeleton-card .pgt-skeleton--meta { width: 46%; }
.pgt-skeleton-card .pgt-skeleton--cta { width: 34%; margin-top: .4rem; }

/* ---------- Filter / scope chips (design-system component) ----------
   Pill chips for catalog filtering & scoped nav. Selected = solid ink;
   idle = quiet surface. Keyboard focus uses the token ring. */
.pgt-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--pge-font-sans);
	font-size: .86rem;
	font-weight: 600;
	color: var(--pge-color-body);
	background: var(--pge-color-surface);
	border: var(--pge-hairline);
	border-radius: var(--pge-radius-pill);
	padding: .45rem 1rem;
	cursor: pointer;
	transition: background .16s var(--pgt-ease), color .16s var(--pgt-ease), border-color .16s var(--pgt-ease), transform .16s var(--pgt-ease);
	white-space: nowrap;
	text-decoration: none;
}
.pgt-chip:hover { color: var(--pge-color-ink); border-color: var(--pge-color-muted); text-decoration: none; transform: translateY(-1px); }
.pgt-chip[aria-pressed="true"],
.pgt-chip.is-active {
	background: var(--pge-color-ink);
	border-color: var(--pge-color-ink);
	color: #fff;
}
.pgt-chip:focus-visible { outline: none; box-shadow: var(--pge-focus-ring); }

/* ---------- 404 — friendly error with recovery paths ---------- */
.pgt-404 { text-align: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.pgt-404__code {
	font-family: var(--pge-font-mono);
	font-weight: 700;
	font-size: clamp(3.2rem, 8vw, 5.2rem);
	letter-spacing: -0.04em;
	line-height: 1;
	background: var(--pge-gradient, linear-gradient(135deg, #0c1b9e, #0a84ff, #4d93ff));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0 0 .6rem;
}
.pgt-404__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 .6rem; }
.pgt-404__lead { color: var(--pge-color-muted); max-width: 44ch; margin: 0 auto 1.8rem; font-size: 1.03rem; line-height: 1.6; }
.pgt-404 .pgt-hero__search {
	margin: 0 auto 2.5rem;
	box-shadow: var(--pge-shadow-md);
	border: var(--pge-hairline);
}
.pgt-404__links {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: .6rem;
	margin-top: .5rem;
}
.pgt-404__kicker {
	color: var(--pge-color-muted);
	font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.2 — "Stage" homepage (Knowt-pattern layout, PrepGro brand language).
   Structure borrowed: centered pill nav · light centered hero with floating
   feature callouts around the product visual · counter band · full-bleed
   dark product section · review wall · dual persona panels.
   Identity kept: Outfit, brand blue, chip gradient, hairlines, kit shadows.
   ═══════════════════════════════════════════════════════════════════════ */

/* Pill button variants (Knowt-scale hit areas) */
.pgt-btn--pill { border-radius: var(--pge-radius-pill); }
.pgt-btn--ink { background: var(--pge-color-ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--pge-shadow-sm); }
.pgt-btn--ink:hover { background: var(--pge-ink-900, #151c42); color: #fff; transform: translateY(-1px); box-shadow: var(--pge-shadow-md); }

/* Centered section heads (Knowt pattern) */
.pgt2-center { text-align: center; }
.pgt2-center .pgt-eyebrow { justify-content: center; }
.pgt2-center .pgt-section__title { margin-inline: auto; }

/* ---------- Hero — light, centered, stage composition ---------- */
.pgt2-hero {
	position: relative;
	overflow: clip;
	text-align: center;
	padding-block: clamp(3.5rem, 7vw, 5.5rem) 0;
	background:
		radial-gradient(900px 480px at 50% -10%, rgba(10, 132, 255, .10), transparent 65%),
		radial-gradient(700px 420px at 92% 30%, rgba(77, 147, 255, .07), transparent 60%),
		radial-gradient(700px 420px at 8% 40%, rgba(18, 38, 200, .06), transparent 60%),
		#fff;
}
.pgt2-hero__title {
	font-size: clamp(2.4rem, 6vw, 4.1rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.06;
	margin: 0 auto .9rem;
	max-width: 20ch;
	color: var(--pge-color-ink);
}
.pgt2-hero__title .accent {
	background: var(--pge-gradient, linear-gradient(135deg, #0c1b9e, #0a84ff, #4d93ff));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pgt2-hero__sub {
	color: var(--pge-color-muted);
	font-size: clamp(1rem, 1.6vw, 1.16rem);
	line-height: 1.6;
	max-width: 56ch;
	margin: 0 auto 1.7rem;
}
.pgt2-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-bottom: 1.6rem; }
.pgt2-hero__search {
	margin: 0 auto;
	max-width: 520px;
	border: var(--pge-hairline);
	box-shadow: var(--pge-shadow-md);
}
.pgt2-hero__popular {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: .4rem .55rem;
	margin: .8rem 0 0;
	font-size: .84rem;
	color: var(--pge-color-muted);
}
.pgt2-hero__popular a {
	color: var(--pge-color-primary);
	font-weight: 600;
	border-bottom: 1px solid rgba(27, 59, 235, .3);
	padding-bottom: 1px;
}
.pgt2-hero__popular a:hover { text-decoration: none; border-color: var(--pge-color-primary); }

/* The stage: product visual centered, callout cards floating around it */
.pgt2-hero__stage {
	position: relative;
	max-width: 900px;
	margin: clamp(2.2rem, 4.5vw, 3.5rem) auto 0;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	text-align: left;
}
.pgt2-hero__stage .pgt-mock {
	box-shadow: 0 2px 4px rgba(3,5,15,.05), 0 32px 64px -24px rgba(18, 38, 200, .35);
	border: var(--pge-hairline);
}
.pgt2-callout {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	width: 218px;
	background: #fff;
	border: var(--pge-hairline);
	border-radius: 14px;
	box-shadow: var(--pge-shadow-md);
	padding: .8rem .9rem;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--pge-color-muted);
	animation: pgt-float 7s ease-in-out infinite;
}
.pgt2-callout strong { display: block; color: var(--pge-color-ink); font-size: .84rem; margin-bottom: .15rem; }
.pgt2-callout__icon {
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 30px; height: 30px;
	border-radius: 9px;
	background: var(--pge-color-primary-soft, #edf1ff);
	font-size: .95rem;
}
.pgt2-callout--tl { top: -6px; left: -30px; animation-delay: 0s; }
.pgt2-callout--bl { bottom: 22%; left: -46px; animation-delay: 1.8s; }
.pgt2-callout--tr { top: -2px; right: -34px; animation-delay: .9s; }
.pgt2-callout--br { bottom: 20%; right: -50px; animation-delay: 2.6s; }
.pgt2-arrow {
	position: absolute;
	z-index: 1;
	width: 74px; height: 56px;
	color: var(--pge-ink-400, #868fb6);
	opacity: .75;
}
.pgt2-arrow--l { top: 24%; left: 16%; }
.pgt2-arrow--r { top: 24%; right: 16%; }
@media (max-width: 1120px) {
	.pgt2-callout--tl { left: 0; }
	.pgt2-callout--bl { left: -6px; }
	.pgt2-callout--tr { right: 0; }
	.pgt2-callout--br { right: -6px; }
}
@media (max-width: 900px) {
	.pgt2-callout, .pgt2-arrow { display: none; }
	.pgt2-hero__stage { max-width: 520px; }
}

/* ---------- Counter band ---------- */
.pgt2-band {
	text-align: center;
	padding-block: clamp(3rem, 6vw, 4.5rem);
	background: #fff;
	border-top: var(--pge-hairline);
}
.pgt2-band__title {
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 .5rem;
}
.pgt2-band__title .pgt-stats__value {
	font-family: inherit;
	font-size: inherit;
	color: var(--pge-color-primary);
	font-variant-numeric: tabular-nums;
}
.pgt2-band__sub { color: var(--pge-color-muted); font-size: 1.02rem; margin: 0 0 2rem; }
.pgt2-band__strip {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: .9rem 2.2rem;
}
.pgt2-band__strip span {
	font-family: var(--pge-font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: .02em;
	color: var(--pge-ink-400, #868fb6);
	opacity: .75;
	filter: grayscale(1);
	transition: color .16s var(--pgt-ease), opacity .16s var(--pgt-ease);
}
.pgt2-band__strip span:hover { color: var(--pge-color-primary); opacity: 1; filter: none; }

/* ---------- Dark full-bleed product section ---------- */
.pgt2-dark {
	background:
		radial-gradient(800px 480px at 12% 0%, rgba(10, 132, 255, .14), transparent 60%),
		linear-gradient(160deg, var(--pge-color-ink, #03050f), var(--pge-color-ink-2, #151c42));
	color: rgba(255, 255, 255, .75);
	padding-block: clamp(3.5rem, 7vw, 6rem);
}
.pgt2-dark__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
@media (max-width: 900px) { .pgt2-dark__grid { grid-template-columns: 1fr; } }
.pgt2-dark__panel {
	background: linear-gradient(160deg, rgba(77, 147, 255, .22), rgba(18, 38, 200, .10));
	border: var(--pge-hairline-dark, 1px solid rgba(107,164,255,.16));
	border-radius: var(--pge-radius-lg);
	padding: clamp(1.4rem, 3vw, 2.4rem);
}
.pgt2-dark__copy h2 {
	color: #fff;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 .8rem;
}
.pgt2-dark__copy > p { color: rgba(255,255,255,.6); font-size: 1.05rem; margin: 0 0 1.6rem; }
.pgt2-dark__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pgt2-dark__links li { display: flex; align-items: center; gap: .8rem; font-size: 1rem; color: rgba(255,255,255,.78); }
.pgt2-dark__li-icon {
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(107, 164, 255, .14);
	border: 1px solid rgba(107, 164, 255, .22);
	font-size: 1rem;
}
.pgt2-dark__links a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(107, 164, 255, .5);
	text-underline-offset: 3px;
}
.pgt2-dark__links a:hover { color: var(--pge-color-on-dark, #6ba4ff); }

/* Readiness-report mock inside the dark panel */
.pgt2-shotmock {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45);
	padding: 1.2rem 1.3rem 1.3rem;
	color: var(--pge-color-body);
}
.pgt2-shotmock__row {
	display: flex; align-items: center; gap: .55rem;
	font-size: .95rem; color: var(--pge-color-ink);
	padding-bottom: .8rem; margin-bottom: .95rem;
	border-bottom: var(--pge-hairline);
}
.pgt2-shotmock__chipicon {
	display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 9px;
	background: var(--pge-color-primary-soft, #edf1ff);
	font-size: .9rem;
}
.pgt2-shotmock__score {
	margin-left: auto;
	font-family: var(--pge-font-mono);
	font-weight: 700; font-size: .78rem;
	color: var(--pge-color-primary);
	background: var(--pge-color-primary-soft, #edf1ff);
	padding: .25rem .6rem; border-radius: 6px;
}
.pgt2-shotmock__bars { display: grid; gap: .7rem; }
.pgt2-shotmock__bar { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: .7rem; font-size: .8rem; font-weight: 500; color: var(--pge-color-muted); }
.pgt2-shotmock__bar i {
	display: block; height: 8px; border-radius: 999px;
	background: var(--pge-gray-100, #eceff9);
	position: relative; overflow: hidden;
}
.pgt2-shotmock__bar i::after {
	content: "";
	position: absolute; inset: 0 auto 0 0;
	width: var(--w, 50%);
	border-radius: 999px;
	background: var(--pge-gradient, linear-gradient(135deg, #0c1b9e, #0a84ff, #4d93ff));
}
.pgt2-shotmock__bar i.is-weak::after { background: var(--pge-amber-600, #D97706); }
.pgt2-shotmock__note {
	margin-top: 1rem;
	font-size: .8rem;
	color: var(--pge-color-body);
	background: var(--pge-color-primary-soft, #edf1ff);
	border-radius: 10px;
	padding: .6rem .8rem;
}

/* ---------- Review wall (restyles [pgt_testimonials] output) ---------- */
.pgt2-laurel { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pgt2-laurel__stars { color: var(--pge-color-primary); letter-spacing: .18em; font-size: 1.2rem; }
.pgt2-laurel__line { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; color: var(--pge-color-ink); margin: .4rem 0 0; }
body.home .pgt-testimonial-card {
	background: #fff;
	border: var(--pge-hairline);
	border-image: none;
	border-radius: var(--pge-radius-lg);
	box-shadow: var(--pge-shadow-sm);
	padding: 1.5rem 1.5rem 1.4rem;
	text-align: center;
	transition: border-color .18s var(--pgt-ease), box-shadow .18s var(--pgt-ease), transform .18s var(--pgt-ease);
}
body.home .pgt-testimonial-card:hover { transform: translateY(-2px); border-color: rgba(27, 59, 235, .4); box-shadow: var(--pge-shadow-md); }
body.home .pgt-testimonial-card__author { justify-content: center; }
body.home .pgt-testimonials { gap: 1.25rem; }

/* ---------- Category tiles — hub-card scale on the homepage ---------- */
body.home .pgt-cat-card { border-radius: var(--pge-radius-lg); padding: 1.7rem 1.5rem; }
body.home .pgt-cat-card__icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 1rem; }
body.home .pgt-cat-card__icon svg { width: 24px; height: 24px; }
body.home .pgt-cat-card__name { font-size: 1.08rem; }

/* ---------- Dual persona panels ---------- */
.pgt2-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 820px) { .pgt2-duo { grid-template-columns: 1fr; } }
.pgt2-duo__panel {
	border-radius: var(--pge-radius-lg);
	padding: clamp(2.2rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9rem;
}
.pgt2-duo__panel h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.pgt2-duo__panel p { margin: 0; max-width: 40ch; line-height: 1.6; }
.pgt2-duo__art { font-size: 3rem; line-height: 1; margin-block: .5rem; }
.pgt2-duo__panel--light {
	background: var(--pge-color-primary-soft, #edf1ff);
	border: var(--pge-hairline);
}
.pgt2-duo__panel--light p { color: var(--pge-color-muted); }
.pgt2-duo__panel--dark {
	background:
		radial-gradient(420px 260px at 80% 110%, rgba(10, 132, 255, .25), transparent 62%),
		linear-gradient(160deg, var(--pge-color-ink, #03050f), var(--pge-color-ink-2, #151c42));
	color: rgba(255,255,255,.75);
}
/* !important + doubled selector: outranks the engine's portal-body
   `h1..h4 { color: ink !important }` runtime rule (see hero note above). */
.pgt2-duo__panel--dark h3,
body.pge-portal-testprep .pgt2-duo__panel--dark h3,
body.pge-portal-competitive .pgt2-duo__panel--dark h3 {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	.pgt-reveal { opacity: 1 !important; transform: none !important; }
	.pgt-ticker__track, .pgt-mock__chip, .pgt-mock__bar-fill, .pgt-skeleton::after { animation: none !important; }
}

/* ---------- Dark theme (Acorn Next) — header + drawer only ----------
   Same toggle/attribute as the React dashboard, the plugin's admin surfaces,
   and the app-shell journey bar (html[data-pge-admin-theme="dark"][data-pge-dark-scope],
   localStorage pge_admin_theme). The theme attribute itself is stamped on
   EVERY front-end page (theme_boot), so these rules are additionally gated
   on [data-pge-dark-scope] — stamped pre-paint only on dark-capable
   surfaces (dashboard, lesson/exam/diagnostic players, results). A dark
   header therefore can never sit on a light marketing body. */
html[data-pge-admin-theme="dark"][data-pge-dark-scope] {
	/* Pillar hues are tuned for white; lift them to their on-dark twins
	   (same values portal-reskin uses) for anything reading them directly. */
	--pgt-pillar-evaluate: #6ba4ff;
	--pgt-pillar-elevate:  #2dd4bf;
	--pgt-pillar-excel:    #fbbf24;
	--pgt-pillar-neutral:  #93a0b5;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-headerwrap,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-header {
	background: #03050f;
	border-bottom-color: #2a3345;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-header .pgt-brandlogo__prep { color: #eef2f9; }
/* .pgt-brandlogo__gro is left alone here: it stays the chip's blue-500 in
   both themes (the chip gradient itself doesn't repaint for dark mode). */
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-nav__link,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-burger span,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-account__id strong,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-account__item,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-drawer__link,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-drawer__brand .pgt-brandlogo__prep {
	color: #eef2f9;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-nav__link:hover,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-nav__link[aria-expanded="true"] { background: #2a3345; color: #fff; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-nav__link.is-current { background: #232c3d; color: #fff; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-account__id span,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-account__btn,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-iconbtn,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-drawer__sublink,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-drawer__auth .pgt-drawer__link {
	color: #93a0b5;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-iconbtn,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-account__btn { background: #1c2230; border-color: #2a3345; }

/* Light/dark switch: both glyphs are in the DOM, CSS picks one per mode, so
   the right icon paints immediately with no JS swap and no flash. */
.pgt-iconbtn--theme .pgt-icon-moon,
.pgt-iconbtn--theme .pgt-icon-sun { display: inline-flex; align-items: center; }
.pgt-iconbtn--theme .pgt-icon-sun { display: none; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-iconbtn--theme .pgt-icon-sun { display: inline-flex; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-iconbtn--theme .pgt-icon-moon { display: none; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-btn--ghost { color: #eef2f9; border-color: #2a3345; background: #1c2230; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-btn--ghost:hover { border-color: #eef2f9; color: #fff; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-account__menu,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-mega {
	background: #1c2230;
	border-color: #2a3345;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 48px -16px rgba(0, 0, 0, .55);
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-account__id,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-mega__grouphead { border-bottom-color: #2a3345; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-account__item:hover,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-mega__row:hover { background: #232c3d; color: #fff; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-mega__title { color: #eef2f9; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-mega__aside { background: #232c3d; border-color: #2a3345; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-mega__asidetitle { color: #eef2f9; }
/* The tone fills LIFT in dark (pale pillar accents), so white-on-fill drops to
   ~2.5:1 — flip the CTA label to dark ink instead (≥7:1 on every lifted tone). */
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-mega__asidecta,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-mega__asidecta:hover { color: #0f131c; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-mega__asidecta:hover { filter: brightness(1.08); }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-account__item--signout:hover { background: #331717; color: #f87171; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-search { background: #1c2230; border-bottom-color: #2a3345; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-search__form { background: #232c3d; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-search__input { color: #eef2f9; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-search__chip { background: #232c3d; border-color: #2a3345; color: #eef2f9; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-burger { background: #1c2230; border-color: #2a3345; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-drawer { background: #0f131c; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-drawer__head { border-bottom-color: #2a3345; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-drawer__link,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-drawer__grouphead { border-bottom-color: #2a3345; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pgt-drawer__close { background: #1c2230; border-color: #2a3345; color: #eef2f9; }

/* ═══════════════════════════════════════════════════════════════════════
   Shared marketing primitives (2026-08 redesign)
   Used by the homepage, the three module pages, the blog and the article.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Image slot — the production `<image-slot>` ----------
   Addendum A5: every image box carries an EXPLICIT height plus object-fit:
   cover. A min-height alone leaves a white gap under the photo. */
.pgt-imgslot {
	display: block;
	position: relative;
	height: var(--pgt-img-h, 280px);
	border-radius: var(--pgt-img-r, var(--pge-radius-lg));
	border: 1px solid var(--pge-color-line);
	overflow: hidden;
	background: var(--pge-gray-50);
}
.pgt-imgslot--flush { border: 0; }
.pgt-imgslot__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* No image chosen yet: the brand tint wash holds the box open. */
.pgt-imgslot__wash {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, var(--blue-100), var(--pge-gray-50));
}

/* Authoring label over an empty slot — which position this is, and the size it
   wants. Rendered ONLY for users who can edit theme options (see
   Media::placeholder_label): a visitor reads "1600 × 960 px, add images in the
   Customizer" as a broken page, so they get the wash alone. Absolute over the
   wash, which is why .pgt-imgslot is position:relative. */
.pgt-imgslot__ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 12px;
	text-align: center;
	background: rgba(255, 255, 255, .55);
	border: 1px dashed var(--blue-300);
	border-radius: inherit;
}
.pgt-imgslot__ph-icon { display: inline-flex; color: var(--pge-color-primary); opacity: .75; }
.pgt-imgslot__ph-label {
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pge-color-ink);
	max-width: 100%;
}
.pgt-imgslot__ph-size {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--pge-ink-500);
}
.pgt-imgslot__ph-hint {
	font-size: 11px;
	letter-spacing: .02em;
	color: var(--pge-ink-400);
}

/* ---------- Sample badge ----------
   Every illustrative figure on a public marketing page carries one. Real
   student data never appears on a marketing page. */
.pgt-sample {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pge-ink-500);
	background: var(--pge-gray-100);
	border: 1px solid var(--pge-color-line);
	border-radius: var(--pge-radius-pill);
	padding: 4px 10px;
	white-space: nowrap;
}
.pgt-sample--on-dark {
	color: var(--pge-color-on-dark);
	background: rgba(255,255,255,.07);
	border-color: rgba(107,164,255,.24);
}

/* ── Launch countdown ────────────────────────────────────────────────
   Rendered by pgt_countdown() wherever a switched-off pillar has an
   "Available from" date; theme.js keeps the numbers moving. Lives in
   theme.css rather than a page stylesheet because both the homepage
   (pg-home.css) and the module landing pages (pg-module.css) use it. */
.pgt-cd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid var(--pge-color-line, #e5e7eb);
	border-radius: 14px;
	background: var(--pge-color-surface, #fff);
}
.pgt-cd__lead {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pge-ink-500, #6b7280);
}
.pgt-cd__units { display: flex; gap: 14px; }
.pgt-cd__unit { display: flex; align-items: baseline; gap: 4px; }
.pgt-cd__n {
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--pge-color-ink, #0b1020);
	/* Tabular figures so the seconds column does not shuffle the row a
	   pixel left and right on every tick. */
	font-variant-numeric: tabular-nums;
}
.pgt-cd__l {
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	color: var(--pge-ink-500, #6b7280);
}
/* The absolute date is the accessible answer — role="timer" is not live,
   so this is what a screen reader reads out with the block. */
.pgt-cd__date {
	flex: 1 0 100%;
	font-size: 12px;
	color: var(--pge-ink-500, #6b7280);
}
.pgt-cd.is-done .pgt-cd__lead { color: var(--pge-color-ink, #0b1020); }

/* On a module page's dark hero the panel sits on light ground, so no dark
   variant is needed; inside the homepage loop card it inherits the card. */
.pgh-loopcard .pgt-cd { margin-top: 14px; }