/*
 * PrepGro Theme — module landing pages (Evaluate · Elevate · Excel).
 * README addendum A2. One stylesheet for one template; the three pages
 * differ only in content.
 *
 * The dark hero uses the SAME --neutral-950 surface and the SAME two radial
 * washes as the homepage dark band. One accent, no new colours, and no
 * gradients beyond those washes.
 *
 * 2026-08: the three pages read identically at a glance — same hero, same
 * blue everywhere — with no way to tell which pillar you're on except the
 * copy. Per the owner's call, the hero band and the illustrative figure
 * inside it stay exactly as above (shared surface, shared wash); it's the
 * CONTROLS below and beside it — the primary button, the step-number
 * chips, the plan CTA panel — that pick up a per-pillar --pgm-accent, same
 * hue as that pillar's icon in the header mega-menu (theme.css
 * .pgt-mega--*). Body_class() in class-module-pages.php stamps
 * pg-module-{evaluate,elevate,excel}. Every consumer below falls back to
 * the original literal --blue-* value, so a page rendered without that
 * class (e.g. the bare [pgt_module_page] shortcode) looks exactly as it
 * did before this variable existed.
 */
/*
 * Each pillar carries TWO three-step graph ramps, not one, and the split is
 * forced by measurement rather than taste. The figures live on two different
 * grounds: the hero infographic sits on --neutral-950, the proof bars sit on
 * white. A single ramp cannot serve both — teal and amber at their light
 * steps measure 1.9:1 and 1.7:1 on white (invisible as a bar) while being
 * ideal on near-black:
 *
 *              on #03050f          on white
 *   teal  400   10.93               1.86
 *   amber 400   12.18               1.67
 *
 * So --pgm-g* is the ON-DARK ramp (hero figures) and --pgm-l* the ON-LIGHT
 * one (proof bars). Blue happens to work in both, which is why the original
 * single-ramp design held together until a second hue arrived.
 *
 * Status colours are NOT part of either ramp. The Evaluate donut's amber and
 * red bars encode score bands (42%, 38% — weak skills) and the Excel trend's
 * green encodes improvement; recolouring those to the module hue would turn a
 * reading of the data into decoration. They stay literal on purpose.
 */
body.pg-module-evaluate {
	--pgm-accent:      var(--pgt-pillar-evaluate);
	--pgm-accent-ink:  var(--pgt-pillar-evaluate);
	--pgm-accent-soft: var(--blue-50);
	--pgm-on-dark: var(--pge-color-on-dark);
	--pgm-wash-1: rgba(27,59,235,.6);  --pgm-wash-2: rgba(10,132,255,.34);
	--pgm-area: rgba(10,132,255,.16);
	--pgm-g1: var(--blue-600);  --pgm-g2: var(--blue-500);  --pgm-g3: var(--blue-400);
	--pgm-l1: var(--blue-600);  --pgm-l2: var(--blue-500);  --pgm-l3: var(--blue-400);
}
body.pg-module-elevate {
	--pgm-accent:      var(--pgt-pillar-elevate);
	--pgm-accent-ink:  var(--pgt-pillar-elevate);
	--pgm-accent-soft: var(--teal-50);
	--pgm-on-dark: #5eead4;
	--pgm-wash-1: rgba(13,148,136,.55);  --pgm-wash-2: rgba(45,212,191,.26);
	--pgm-area: rgba(20,184,166,.16);
	--pgm-g1: var(--teal-600);  --pgm-g2: var(--teal-500);  --pgm-g3: var(--teal-400);
	--pgm-l1: var(--teal-700);  --pgm-l2: var(--teal-600);  --pgm-l3: var(--teal-500);
}
body.pg-module-excel {
	/* amber-700, and the reason matters. --pgm-accent is a background that
	   carries WHITE text (.pgm-btn--primary, .pgm-plan, and now the header
	   CTA). Those are 14.5-15.5px — normal text by WCAG, which starts "large"
	   at 18.66px bold / 24px regular — so they need 4.5:1, not the 3:1 bar for
	   large text and UI components.
	     amber-500 #f59e0b -> 2.15:1  fails outright
	     amber-600 #d97706 -> 3.19:1  passes 3:1 only; FAILED here as body text
	     amber-700 #b45309 -> 5.02:1  passes AA
	   -600 was chosen when this was read as a UI component; measuring the
	   actual type sizes says otherwise, so -600 is retired for fills. Blue and
	   teal already clear 4.5:1 (7.31 and 5.47), so only Excel moves. */
	--pgm-accent:      var(--pgt-pillar-excel);
	--pgm-accent-ink:  var(--pgt-pillar-excel);
	--pgm-accent-soft: var(--amber-50);
	--pgm-on-dark: #fcd34d;
	--pgm-wash-1: rgba(180,83,9,.6);  --pgm-wash-2: rgba(245,158,11,.26);
	--pgm-area: rgba(245,158,11,.16);
	--pgm-g1: var(--amber-600);  --pgm-g2: var(--amber-500);  --pgm-g3: var(--amber-400);
	--pgm-l1: var(--amber-700);  --pgm-l2: var(--amber-600);  --pgm-l3: var(--amber-500);
}

/* ── Shared ────────────────────────────────────────────────────────── */
.pgm-inner { max-width: 1160px; margin-inline: auto; }
.pgm-section { padding: clamp(38px, 5vw, 58px) clamp(18px, 4vw, 32px); }
.pgm-section--last { padding-top: 0; padding-bottom: clamp(48px, 7vw, 76px); }
.pgm-mono { font-family: var(--pge-font-mono); font-weight: 700; }

.pgm-h2 {
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.14;
	letter-spacing: -.03em;
	font-weight: 600;
	color: var(--pge-color-ink);
	margin: 0;
}
.pgm-sub { font-size: 16px; line-height: 1.6; color: var(--pge-ink-500); margin: 10px 0 28px; max-width: 52ch; }
.pgm-kicker {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--neutral-400);
	margin: 0;
}

/* ── 1. Dark hero ──────────────────────────────────────────────────── */
.pgm-hero {
	position: relative;
	background: var(--neutral-950);
	padding: clamp(38px, 5vw, 64px) clamp(18px, 4vw, 32px) clamp(42px, 5vw, 60px);
	overflow: hidden;
}
.pgm-hero__wash {
	position: absolute;
	inset: 0;
	/* Tinted per pillar. Left hardcoded blue, the glow fought the teal and
	   amber figures sitting on top of it — the one place the shared hero
	   genuinely could not stay shared once the graphs stopped being blue. */
	background:
		radial-gradient(900px 420px at 14% -20%, var(--pgm-wash-1, rgba(27,59,235,.6)), transparent 68%),
		radial-gradient(620px 340px at 94% 118%, var(--pgm-wash-2, rgba(10,132,255,.34)), transparent 70%);
}
.pgm-hero__inner {
	position: relative;
	max-width: 1160px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(26px, 3.5vw, 48px);
	align-items: center;
}
.pgm-eyebrowrow { display: flex; align-items: center; gap: 10px; }
.pgm-iconchip {
	width: 32px; height: 32px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--pge-radius-md);
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.18);
	color: var(--pgm-on-dark, var(--pge-color-on-dark));
}
.pgm-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pgm-on-dark, var(--pge-color-on-dark));
}
.pgm-hero__title {
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.07;
	letter-spacing: -.035em;
	font-weight: 600;
	color: #fff;
	margin: 18px 0 0;
	max-width: 21ch;
	text-wrap: pretty;
}
.pgm-hero__body { font-size: 16.5px; line-height: 1.62; color: var(--neutral-300); margin: 16px 0 0; max-width: 45ch; }
.pgm-hero__cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.pgm-btn {
	display: inline-flex;
	align-items: center;
	font-size: 15.5px;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: var(--pge-radius-pill);
	white-space: nowrap;
	text-decoration: none;
	transition: filter 140ms var(--pgt-ease);
}
.pgm-btn:hover { text-decoration: none; filter: brightness(.92); }
.pgm-btn--primary {
	color: #fff;
	background: var(--pgm-accent, var(--blue-600));
	box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--pgm-accent, var(--blue-600)) 75%, transparent);
}
.pgm-btn--primary:hover { color: #fff; }
.pgm-btn--quiet { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: 14px 22px; }
.pgm-btn--quiet:hover { color: #fff; filter: brightness(1.4); }
.pgm-stats { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.pgm-stat__v { margin: 0; font-family: var(--pge-font-mono); font-size: 21px; font-weight: 700; color: #fff; }
.pgm-stat__l { margin: 3px 0 0; font-size: 13px; color: var(--neutral-400); }

/* Infographic card */
.pgm-fig {
	margin: 0;
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 20px;
	padding: 22px 24px 24px;
	/* "See a sample report" anchor-links here (id="pgm-fig-{module}"); the
	   header is sticky at 74px min-height, so an unadjusted jump tucks the
	   figure straight under it. */
	scroll-margin-top: 96px;
}
.pgm-fig__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pgm-fig__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--neutral-400); }
/* The visible "sample" note every figure carries. */
.pgm-fig__note { font-size: 11.5px; font-weight: 600; color: var(--pgm-on-dark, var(--pge-color-on-dark)); }
.pgm-fig__foot {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: 13px;
	color: var(--neutral-400);
}

/* Evaluate — donut + sub-skill bars */
.pgm-donutwrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pgm-donut { position: relative; width: 118px; height: 118px; flex: none; }
.pgm-donut svg { width: 118px; height: 118px; transform: rotate(-90deg); }
.pgm-donut__label {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pgm-donut__pct { font-size: 26px; color: #fff; line-height: 1; }
.pgm-donut__pct span { font-size: 14px; }
.pgm-donut__cap { font-size: 10.5px; color: var(--neutral-400); margin-top: 2px; }
.pgm-bars { flex: 1; min-width: 150px; display: grid; gap: 11px; }
.pgm-bar__head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--neutral-300); margin-bottom: 5px; }
.pgm-bar__head .pgm-mono { color: #fff; }
.pgm-bar__track { height: 7px; border-radius: var(--pge-radius-pill); background: rgba(255,255,255,.13); }
.pgm-bar__track span { display: block; height: 100%; border-radius: inherit; }

/* Elevate — 7-column stacked week */
.pgm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 132px; }
.pgm-week__col { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; }
.pgm-week__seg { display: block; border-radius: 6px; }
.pgm-week__seg--class  { background: var(--pgm-g1, var(--blue-600)); }
.pgm-week__seg--assign { background: var(--pgm-g2, var(--blue-500)); }
.pgm-week__seg--self   { background: rgba(255,255,255,.16); }
.pgm-week__seg--rest   { background: rgba(255,255,255,.08); }
.pgm-week__labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; }
.pgm-week__labels span { font-size: 10.5px; text-align: center; color: var(--neutral-400); }
.pgm-legend {
	display: flex; gap: 16px; flex-wrap: wrap;
	margin-top: 16px; padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,.12);
}
.pgm-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--neutral-300); }
.pgm-legend__sw { width: 9px; height: 9px; border-radius: 3px; }
.pgm-legend__sw--class  { background: var(--pgm-g1, var(--blue-600)); }
.pgm-legend__sw--assign { background: var(--pgm-g2, var(--blue-500)); }
.pgm-legend__sw--self   { background: rgba(255,255,255,.28); }

/* Excel — area + line trend */
.pgm-trend { width: 100%; height: 150px; display: block; }
.pgm-trend__labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--neutral-400); margin-top: 2px; }
.pgm-trendstats {
	display: flex; gap: 22px; flex-wrap: wrap;
	margin-top: 16px; padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,.12);
}
.pgm-trendstat__v { margin: 0; font-size: 19px; color: #fff; }
.pgm-trendstat__v.is-up { color: var(--green-500); }
.pgm-trendstat__l { margin: 2px 0 0; font-size: 12px; color: var(--neutral-400); }

/* ── 2. What's inside ──────────────────────────────────────────────── */
.pgm-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	gap: 18px;
}
.pgm-pillar {
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(3,5,15,.04);
}
.pgm-pillar__icon {
	width: 38px; height: 38px;
	border-radius: var(--pge-radius-md);
	background: var(--pgm-accent-soft, var(--blue-50));
	color: var(--pgm-accent-ink, var(--blue-600));
	display: inline-flex; align-items: center; justify-content: center;
}
.pgm-pillar h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--pge-color-ink); margin: 16px 0 8px; }
.pgm-pillar p { font-size: 14.5px; line-height: 1.6; color: var(--pge-ink-500); margin: 0 0 16px; }
.pgm-pillar__list {
	display: grid; gap: 9px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--pge-gray-100);
}
.pgm-check { display: flex; align-items: flex-start; gap: 9px; color: var(--pgm-accent-ink, var(--blue-600)); }
.pgm-check svg { flex: none; margin-top: 4px; }
.pgm-check span { font-size: 13.5px; line-height: 1.5; color: var(--pge-color-body); }

/* ── 3. Photo + proof band ─────────────────────────────────────────── */
.pgm-band {
	padding: clamp(34px, 4vw, 50px) clamp(18px, 4vw, 32px);
	background: var(--pge-gray-50);
	border-top: 1px solid var(--pge-gray-100);
	border-bottom: 1px solid var(--pge-gray-100);
}
/* Fixed two-part row, NOT auto-fit + span: auto-fit cannot create a third
   track and the span swallows the row. */
.pgm-band__row {
	max-width: 1160px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 36px);
	align-items: center;
}
.pgm-band__photo { flex: 1 1 300px; min-width: 0; }
.pgm-band__copy { flex: 1 1 300px; min-width: 0; }
.pgm-band__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--neutral-400); }
.pgm-band__title {
	font-size: clamp(23px, 2.6vw, 30px);
	line-height: 1.15;
	letter-spacing: -.03em;
	font-weight: 600;
	color: var(--pge-color-ink);
	margin: 12px 0;
	max-width: 24ch;
}
.pgm-band__body { font-size: 15.5px; line-height: 1.65; color: var(--pge-ink-500); margin: 0 0 22px; max-width: 44ch; }
.pgm-proofbars { display: grid; gap: 12px; max-width: 420px; }
.pgm-proofbar__head { display: flex; justify-content: space-between; font-size: 13px; color: var(--pge-color-body); margin-bottom: 6px; }
.pgm-proofbar__head .pgm-mono { color: var(--pge-color-ink); }
.pgm-proofbar__track { height: 8px; border-radius: var(--pge-radius-pill); background: var(--pge-color-line); }
.pgm-proofbar__track span { display: block; height: 100%; border-radius: inherit; }
.pgm-band__sample { margin: 16px 0 0; }

/* ── 4. How it works ───────────────────────────────────────────────── */
.pgm-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 18px;
	margin-top: 20px;
}
.pgm-step { background: #fff; border: 1px solid var(--pge-color-line); border-radius: 16px; padding: 20px 22px; }
.pgm-step__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: var(--pge-radius-pill);
	background: var(--pgm-accent-soft, var(--blue-50));
	font-size: 12px;
	color: var(--pgm-accent-ink, var(--blue-600));
}
.pgm-step__t { margin: 12px 0 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; color: var(--pge-color-ink); }
.pgm-step__b { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pge-ink-500); }

/* ── 5. Plan CTA + the rest of the loop ────────────────────────────── */
.pgm-planrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: 18px;
}
.pgm-plan {
	background: var(--pgm-accent, var(--blue-600));
	border-radius: 24px;
	padding: clamp(24px, 3vw, 32px);
	color: #fff;
	box-shadow: 0 14px 36px -16px color-mix(in srgb, var(--pgm-accent, var(--blue-600)) 55%, transparent);
}
.pgm-plan__tag {
	display: inline-block;
	background: rgba(255,255,255,.16);
	border-radius: var(--pge-radius-pill);
	padding: 5px 12px;
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pgm-plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.pgm-plan__figure { font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pgm-plan__unit { font-size: 14.5px; color: rgba(255,255,255,.75); }
.pgm-plan__body { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 12px 0 22px; max-width: 34ch; }
.pgm-plan__cta {
	display: inline-flex; align-items: center;
	font-size: 15px; font-weight: 600;
	color: var(--pgm-accent-ink, var(--blue-700));
	background: #fff;
	padding: 13px 24px;
	border-radius: var(--pge-radius-pill);
	text-decoration: none;
}
.pgm-plan__cta:hover { color: var(--pgm-accent-ink, var(--blue-700)); text-decoration: none; filter: brightness(.94); }
/* flex column, not grid: the two .pgm-next cards get flex:1 below so they
   split whatever height .pgm-plan (the taller sibling) forces this column
   to stretch to — otherwise they pack to their own content height and the
   grid's align-items:stretch just leaves dead air under the last card. */
.pgm-nextcol { display: flex; flex-direction: column; gap: 12px; }
.pgm-next {
	display: flex; align-items: center; gap: 14px;
	flex: 1;
	background: #fff;
	border: 1px solid var(--pge-color-line);
	border-radius: 16px;
	padding: 18px 20px;
	box-shadow: 0 1px 2px rgba(3,5,15,.04);
	text-decoration: none;
	transition: transform 140ms var(--pgt-ease), box-shadow 140ms var(--pgt-ease);
}
.pgm-next:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--pge-shadow-sm); }
.pgm-next__icon {
	width: 36px; height: 36px; flex: none;
	border-radius: var(--pge-radius-md);
	background: var(--blue-50);
	color: var(--blue-600);
	display: inline-flex; align-items: center; justify-content: center;
}
/* Each "rest of the loop" card previews the module it links TO, so its icon
   uses that module's colour — deliberately independent of --pgm-accent,
   which is the CURRENT page's colour. See class-module-pages.php::plan(). */
.pgm-next--evaluate .pgm-next__icon { background: var(--blue-50); color: var(--pgt-pillar-evaluate); }
.pgm-next--elevate  .pgm-next__icon { background: var(--teal-50); color: var(--pgt-pillar-elevate); }
.pgm-next--excel    .pgm-next__icon { background: var(--amber-50); color: var(--pgt-pillar-excel); }
.pgm-next__copy { min-width: 0; }
.pgm-next__label { display: block; font-size: 15.5px; font-weight: 600; color: var(--pge-color-ink); }
.pgm-next__sub { display: block; font-size: 13.5px; color: var(--pge-ink-500); margin-top: 2px; }
.pgm-next__arrow { margin-left: auto; flex: none; color: var(--neutral-400); display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
	.pgm-btn, .pgm-next { transition: none; }
}

/* ── 6. Site chrome adopts the module's colour ──────────────────────────
   On a module page every button and link takes that pillar's accent — the
   header included — so the whole page reads as one pillar rather than as a
   blue site with a coloured middle.

   This file is enqueued ONLY on module pages (functions.php, `pgt-module`)
   and declares `pgt-theme` as a dependency, so it loads after theme.css and
   these win at equal specificity. Nothing here leaks to other pages.

   `--pgm-accent*` is set on <body>, so the header — a descendant of body —
   inherits it for free; no extra plumbing needed.

   Two deliberate exceptions:
   - .pgt-logo keeps the brand blue. It is the logo. Recolouring a logo per
     page is how a brand stops being recognisable.
   - The nav links for the OTHER two pillars keep their neutral ink, so the
     accent marks where you ARE, not merely where you can go. Their own
     colour still shows in the mega-menu tone when opened. */

/* Primary buttons anywhere on the page, header CTA included. */
body.pg-module .pgt-btn--primary {
	background: var(--pgm-accent, var(--pge-color-primary));
	box-shadow: 0 1px 2px rgba(3,5,15,.06),
		0 8px 18px -10px color-mix(in srgb, var(--pgm-accent, var(--pge-color-primary)) 55%, transparent);
}
/* System rule from theme.css: hover darkens via brightness, never a hue change. */
body.pg-module .pgt-btn--primary:hover { background: var(--pgm-accent, var(--pge-color-primary)); }

/* The current pillar's own nav item — the clearest "you are here" signal. */
body.pg-module .pgt-nav__link.is-current {
	color: var(--pgm-accent-ink, var(--pge-color-ink));
	background: var(--pgm-accent-soft, var(--pge-gray-100));
}
body.pg-module .pgt-nav__link:hover,
body.pg-module .pgt-nav__link[aria-expanded="true"] {
	color: var(--pgm-accent-ink, var(--pge-color-ink));
	background: var(--pgm-accent-soft, var(--pge-gray-100));
}

/* Prose links inside module content. The pages are mostly buttons and cards
   today, so this is here to catch anything added later — a link in a section
   body should not fall back to the site blue on a teal or amber page. */
body.pg-module .pgm-section a:not(.pgm-btn):not(.pgm-next):not(.pgm-plan__cta),
body.pg-module .pgm-band a:not(.pgm-btn) {
	color: var(--pgm-accent-ink, var(--pge-color-primary));
}

/* The hero band is dark; its links stay on-dark rather than taking an accent
   that would fail contrast against near-black. */
body.pg-module .pgm-hero a:not(.pgm-btn) { color: var(--pge-color-on-dark, #6ba4ff); }

/* ── 7. Product lockup + the rule under the menu ────────────────────────
   Two signals that leave the LOGO ITSELF alone, after recolouring the mark
   and a three-segment rule under it were both rejected for the same reason:
   they made the lockup a variable. The mark is now byte-identical on every
   page; the pillar is named beside it and carried across the header edge.

   Rendered by Chrome::brand_kit_logo(), so the header and the mobile drawer
   both get it. These rules live here rather than theme.css because the
   element only ever exists on a module page — same scope as this file. */
/* Sized and aligned to sit under "Gro" alone, not the whole wordmark.
   Measured rather than guessed: "Gro" is 39px at the default 30px logo
   height, and the longest label ("Evaluate") is 86px uppercase at .13em
   tracking — it would need 6.25px type to fit, which is not readable. Mixed
   case at 10px/500 with no tracking measures 39px, exactly the target. So the
   uppercase treatment is what had to go, not the size.
   flex-end on the column right-aligns the label to the wordmark's right edge;
   since the two widths match, it lands precisely under "Gro". */
/* Taken OUT OF FLOW on purpose. As a normal flex child it added its own
   height to the copy column, and since .pgt-brandlogo centres its items, the
   wordmark got pushed up to make room — the logo visibly moved between a
   module page and everywhere else. Absolute means the column's height stays
   exactly the wordmark's, so "prepGro" sits on the same baseline on every
   page and the label hangs beneath it.
   right:0 pins it to the wordmark's right edge, which is the end of "Gro". */
body.pg-module .pgt-brandlogo__copy,
.pgt-brandlogo--module .pgt-brandlogo__copy { position: relative; }
.pgt-brandlogo__module {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 1px;
	/* Sized off the logo height rather than a fixed px so it tracks the
	   Customizer's logo-size slider instead of drifting out of proportion. */
	font-size: calc(var(--pgt-logo-h, 38px) * .26);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	white-space: nowrap;
	color: var(--pgm-accent-ink, var(--pge-color-primary));
}

/* The full-width rule under the menu. Sticky header, so the pillar's colour
   stays on screen the whole way down the page. 3px replaces the 1px hairline
   rather than adding to it — the 2px of extra header height is imperceptible
   and costs no layout maths. */
body.pg-module .pgt-header {
	border-bottom: 3px solid var(--pgm-accent, var(--pge-color-primary));
}

/* ── 6. Coming soon — a pillar switched off in Settings → Modules ────
   The landing page keeps its URL and its hero (see
   class-module-pages.php::render()); everything that made a promise the
   site can no longer keep is replaced by the panel below. */
.pgm-soon {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.5;
	vertical-align: middle;
	background: var(--neutral-100, #f3f4f6);
	color: var(--pge-ink-500, #6b7280);
	border: 1px solid var(--pge-color-line, #e5e7eb);
}
/* On the dark hero the neutral chip disappears, so it borrows the same
   translucent-white treatment as .pgm-iconchip beside it. */
.pgm-soon--onhero {
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.22);
	color: var(--pgm-on-dark, var(--pge-color-on-dark));
}

.pgm-soonrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: 18px;
	align-items: start;
}
.pgm-soonpanel {
	background: var(--pge-color-surface-2, var(--neutral-50, #f9fafb));
	border: 1px solid var(--pge-color-line);
	border-radius: 24px;
	padding: clamp(24px, 3vw, 32px);
}
.pgm-soonpanel__title {
	margin: 14px 0 0;
	font-size: clamp(21px, 2.4vw, 27px);
	line-height: 1.15;
	letter-spacing: -.025em;
	font-weight: 600;
	color: var(--pge-color-ink);
}
.pgm-soonpanel__body {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pge-ink-500);
	max-width: 46ch;
}

/* The disabled card in "the rest of the loop". Rendered as a <div>, so it
   needs no pointer-events guard — there is no href to follow. The muted
   treatment is what tells a sighted reader; the missing link role and the
   "Coming soon" text in the label tell everyone else. */
.pgm-next--soon {
	background: var(--pge-color-surface-2, var(--neutral-50, #f9fafb));
	box-shadow: none;
	cursor: default;
}
.pgm-next--soon .pgm-next__icon { filter: saturate(.35); opacity: .8; }
.pgm-next--soon .pgm-next__label { color: var(--pge-ink-500); }
.pgm-next--soon .pgm-soon { margin-left: 6px; }