/* ==========================================================================
   WorkGuru components — lifted from Khye's industry page and generalised.

   Every value here was measured off
   workguru.io/job-management-for-trailer-manufacturers
   so these render identically to the page that was approved.

   Components:
     .wg-sechead    two-column section header (heading left, lede right)
     .wg-why        outcome cards with a "Powered by" chip row
     .wg-flowsteps  connected numbered process timeline
     .wg-tf         icon feature list
   ========================================================================== */

/* --------------------------------------------------------------------------
   Two-column section header. Khye sets the heading against the lede rather
   than stacking them, which stops long headings running the full 1200px.
   -------------------------------------------------------------------------- */

/* The wrapper owns the column width so the eyebrow and the heading grid share
   one left edge. */
.wg-sechead-wrap {
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
}
.wg-sechead-wrap > * { margin-block: 0; }
.wg-sechead-wrap > .wg-eyebrow { margin-bottom: var(--wp--preset--spacing--30); }

.wg-sechead {
	display: grid;
	/* The heading gets the larger share. Even columns made a three-line heading
	   look cramped next to a paragraph that had room to spare. */
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 20px 64px;
	align-items: start;
	width: 100%;
	margin-bottom: 44px;
}
.wg-sechead > * { margin: 0; }

/* One column: no lede, or a lede too short to fill a second column. The
   heading then gets room to breathe rather than being held at 20ch while the
   right-hand half sits empty. */
.wg-sechead--solo { grid-template-columns: minmax(0, 1fr); }
.wg-sechead--solo .wg-h2 { max-width: 34ch; }
.wg-sechead--solo .wg-lede--under { max-width: 62ch; margin-top: 14px; }

.wg-sechead .wg-h2 { max-width: 28ch; }
.wg-sechead .wg-lede { margin: 0; max-width: 54ch; }

@media (max-width: 860px) {
	.wg-sechead { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
	.wg-sechead .wg-h2 { max-width: none; }
}

/* --------------------------------------------------------------------------
   Outcome cards with "Powered by" chips
   -------------------------------------------------------------------------- */

.wg-why {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: min(100%, 1180px);
	margin-inline: auto;
	line-height: 1.55;
}
.wg-why *, .wg-why ::before, .wg-why ::after { box-sizing: border-box; }

.wg-why-card {
	background: #fff;
	border: 1px solid #dfe6ef;
	border-radius: 22px;
	padding: 30px;
	box-shadow: 0 8px 24px rgba(6, 31, 73, .043);
	position: relative;
	overflow: hidden;
	min-height: 280px;
	display: flex;
	flex-direction: column;
}
/* The soft teal bloom in the bottom-right corner. */
.wg-why-card::after {
	content: "";
	position: absolute;
	right: -100px;
	bottom: -130px;
	width: 230px;
	height: 230px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0,165,164,.11), rgba(0,165,164,0) 68%);
	pointer-events: none;
}
.wg-why-card h3 {
	margin: 0 0 13px;
	font-size: clamp(20px, 2.1vw, 24px);
	line-height: 1.14;
	letter-spacing: -.03em;
	color: var(--wp--preset--color--accent-deep);
}
.wg-why-card h3 a { color: inherit; text-decoration: none; }
.wg-why-card:hover h3 a { text-decoration: underline; }
.wg-why-card p { margin: 0; color: #5c6b7f; font-size: 16px; max-width: 52ch; }

.wg-why-powered { margin-top: auto; padding-top: 18px; position: relative; }
.wg-why-powered::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	border-top: 1px solid #dfe6ef;
}
.wg-why-powered-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #68788d;
	margin: 0 0 9px;
}
.wg-why-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* The mark that opens the chip row. Navy to match the timeline dots, not the
   teal of the chips - it reads as a badge rather than another tag. */
.wg-why-powered .wg-why-mark {
	width: 26px; height: 26px;
	border-radius: 8px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	background: #0d3269;
	color: #fff;
	line-height: 1;
	overflow: hidden;
}
.wg-why-powered .wg-why-mark svg { width: 26px; height: 26px; display: block; }
.wg-why-tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 9px;
	background: #eef6f6;
	border: 1px solid #cfe8e6;
	color: #0a6f6a;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.4;
	text-decoration: none;
}
a.wg-why-tag:hover { background: #dff0ef; border-color: #a9d9d5; }

@media (max-width: 680px) {
	.wg-why       { grid-template-columns: 1fr; gap: 14px; }
	.wg-why-card  { min-height: 0; padding: 24px; border-radius: 18px; }
	.wg-why-card p{ font-size: 15px; }
	.wg-why-tag   { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Connected numbered timeline
   -------------------------------------------------------------------------- */

/* One row whenever the labels fit, which is what the design wants. `--wg-steps`
   comes off the block, so a 6-step or 9-step process needs no CSS change.

   Khye's row is 7 across at 1180px (168px a step). Eight is 147px, which the
   14px labels hold. Below roughly 1080px viewport the container has shrunk far
   enough that they do not, so it folds to 4 across on two rows - each row
   getting its own connector - then 2 up, then a plain numbered list.
   -------------------------------------------------------------------------- */
.wg-flowsteps {
	--wg-cols: var(--wg-steps, 4);
	display: grid;
	grid-template-columns: repeat(var(--wg-cols), 1fr);
	grid-auto-rows: 1fr;
	row-gap: 34px;
	position: relative;
	width: min(100%, 1180px);
	margin-inline: auto;
}
.wg-flowsteps *, .wg-flowsteps ::before, .wg-flowsteps ::after { box-sizing: border-box; }

/* The rule that joins the dots. `::after` is the second row's, and only exists
   at the breakpoints that actually produce a second row. */
.wg-flowsteps::before,
.wg-flowsteps--rows::after {
	content: "";
	position: absolute;
	/* Start and stop at the first and last dot centres rather than a guessed
	   inset, so the rule never overhangs at any column count. */
	left:  calc(50% / var(--wg-cols));
	right: calc(50% / var(--wg-cols));
	height: 2px;
	background: linear-gradient(90deg, #00b2aa, #1a70d5);
}
.wg-flowsteps::before      { top: 25px; }
.wg-flowsteps--rows::after { display: none; }

/* Two rows. `grid-auto-rows: 1fr` keeps them equal height, so row two's dots
   sit at half the height, plus half the gap, plus the dot's own 25px radius. */
@media (max-width: 1080px) {
	.wg-flowsteps            { --wg-cols: 4; }
	.wg-flowsteps--rows::after { display: block; top: calc(50% + 42px); }
}
.wg-flow { position: relative; text-align: center; padding: 0 6px; min-width: 0; }
.wg-flow-dot {
	margin: 0 auto 16px;
	width: 50px; height: 50px;
	border-radius: 50%;
	background: #0d3269;
	border: 1px solid #2c568e;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 15px;
	color: #7ff3e7;
	position: relative;
	z-index: 2;
}
.wg-flow strong,
.wg-flow .wg-flow-label {
	display: block;
	font-size: 14px;
	line-height: 1.3;
	margin: 0 0 5px;
	color: #fff;
	font-weight: 700;
}
.wg-flow span,
.wg-flow .wg-flow-note { display: block; font-size: 12px; color: #a9bedb; line-height: 1.4; margin: 0; }

/* 4 across holds down to about 700px. Below that the connectors stop lining up
   with anything, so they go and the steps stack two-up. */
@media (max-width: 700px) {
	.wg-flowsteps            { --wg-cols: 2; gap: 26px 8px; }
	.wg-flowsteps::before,
	.wg-flowsteps--rows::after { display: none; }
}
/* Phones: the 2-up grid forces awkward breaks in longer step labels
   ("Schedule fabrication and fit-off" wraps to three lines). One per row
   with the dot inline reads better and takes less height. */
@media (max-width: 480px) {
	.wg-flowsteps            { --wg-cols: 1; gap: 20px; }
	.wg-flow              { text-align: left; display: flex; gap: 14px; align-items: center; }
	.wg-flow-dot          { margin: 0; width: 42px; height: 42px; flex: 0 0 auto; }
	.wg-flow strong       { margin-bottom: 2px; }
}

/* --------------------------------------------------------------------------
   Icon feature list. Lives on a dark section.
   -------------------------------------------------------------------------- */

.wg-tf {
	--wg-line: rgba(255,255,255,.14);
	--wg-ink: rgba(255,255,255,.72);
}
/* `width` rather than `max-width`: theme.json's wideSize sets a max-width on
   .alignwide with higher specificity than a single class. */
.wg-tf__inner { width: min(100%, 1180px); margin-inline: auto; }
.wg-tf__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 64px;
}
.wg-tf__item {
	display: flex;
	gap: 24px;
	align-items: center;
	padding: 30px 0;
	border-bottom: 1px solid var(--wg-line);
}
/* Last row carries no rule. */
.wg-tf__list .wg-tf__item:nth-last-child(-n+2) { border-bottom: 0; }

.wg-tf__icon {
	flex: 0 0 auto;
	width: 48px; height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.wg-tf__icon svg { width: 48px; height: 48px; }
.wg-tf__body { min-width: 0; }
.wg-tf__name {
	font-family: var(--wp--preset--font-family--display, "Archivo Black", Impact, sans-serif);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.25;
	color: #fff;
	margin: 0 0 9px;
	letter-spacing: -.01em;
}
.wg-tf__name a { color: inherit; text-decoration: none; }
.wg-tf__item:hover .wg-tf__name a { color: #29e9de; }
.wg-tf__copy { font-size: 16.5px; line-height: 1.6; color: var(--wg-ink); margin: 0; }

@media (max-width: 860px) {
	.wg-tf__list { grid-template-columns: 1fr; column-gap: 0; }
	.wg-tf__list .wg-tf__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--wg-line); }
	.wg-tf__list .wg-tf__item:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
	.wg-tf__item { padding: 24px 0; gap: 18px; }
	.wg-tf__icon, .wg-tf__icon svg { width: 40px; height: 40px; }
	.wg-tf__name { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.wg-why-card, .wg-why-tag { transition: none; }
}

/* --------------------------------------------------------------------------
   These components are built from real blocks so marketing can edit the copy,
   which means WordPress wraps the children in `is-layout-flow` groups and
   applies blockGap margins to them. The components own their own spacing via
   grid gap, so the inherited margins are cleared here rather than fought with
   per-block style attributes.
   -------------------------------------------------------------------------- */
.wg-why > *,
.wg-tf__list > *,
.wg-flowsteps > *,
.wg-sechead > * { margin-block: 0; }

.wg-why-card > * + *,
.wg-why-powered > * + *,
.wg-tf__body > * + *,
.wg-flow > * + * { margin-block-start: 0; }

/* Re-assert after the clearing rules above, which otherwise out-specify the
   `margin-top: auto` that pins the chip row to the bottom of the card. */
.wg-why-card > .wg-why-powered { margin-block-start: auto; }

/* Group wrappers standing in for semantic containers shouldn't introduce a
   block context of their own. */
.wg-tf__body, .wg-flow, .wg-why-card, .wg-why-powered { min-width: 0; }

/* --------------------------------------------------------------------------
   Section-level alignment.

   WordPress's constrained-layout rule is
     .wp-block-group.is-layout-constrained > :where(...) { margin-inline: auto }
   The :where() contributes nothing, so the selector is two classes. A single
   theme class loses to it. These are written with two classes so the theme
   wins without resorting to !important or per-block style attributes.
   -------------------------------------------------------------------------- */

/* Every component on the page shares one column width. Declared once so
   "flush left" means the same edge everywhere. */
:root { --wg-col: 1180px; }

/* An element narrower than the column needs the column's left edge, not the
   section's padding edge - those differ by (content width - column) / 2, which
   was putting the accordion 58px left of every heading at 1440 and 274px left
   at 1920. */
.wg-col-left,
.wg-faq.alignwide,
.wp-block-buttons.alignwide {
	margin-left: calc((100% - min(100%, var(--wg-col))) / 2);
	margin-right: auto;
}

/* Q&A sections - "Fit" and "FAQs". Both are a single capped accordion with
   nothing beside it, so they get a centred header over a centred list. Khye's
   two-column header is for sections whose body fills the width. */
.wg-qa .wg-sechead {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
	margin-inline: auto;
}
.wg-qa .wg-sechead .wg-h2   { max-width: 26ch; }
.wg-qa .wg-sechead .wg-lede { max-width: 62ch; }
/* The eyebrow is a sibling of the header group, so it needs centring too. */
.wg-qa .wg-eyebrow          { text-align: center; }
.wg-qa .wg-sechead-wrap     { text-align: center; }
.wg-qa .wg-faq.alignwide    { margin-inline: auto; }

/* Closing CTA: one centred, capped column. */
.wg-cta-inner { width: min(100%, 760px); text-align: center; }
.wg-cta-inner .wg-lede { margin-inline: auto; }
.wg-cta-inner .wp-block-buttons { justify-content: center; }

/* --------------------------------------------------------------------------
   Phones: centre the section headers.

   At 360-480 a left-aligned eyebrow and heading over a full-bleed card sits
   awkwardly - there is no second column for the eye to return to, so the
   heading reads as though it has been pushed off-centre. Body copy stays
   left-aligned: centred paragraphs are harder to read, and the cards,
   accordions and feature list all carry real reading text.

   Scoped away from the hero, whose H1 sits above a stacked button pair and a
   trust list that are both left-aligned - centring the eyebrow there alone
   would look like a mistake.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
	.wg-sechead-wrap .wg-eyebrow { text-align: center; }

	.wg-sechead {
		justify-items: center;
		text-align: center;
	}
	.wg-sechead .wg-h2   { max-width: 22ch; }

	/* The heading centres; the lede does not. At 390px the longest of these
	   runs six lines, and six lines of centred text is measurably harder to
	   read - the eye loses the left edge on every return. The block stays
	   centred, the text inside it does not. */
	.wg-sechead .wg-lede,
	.wg-qa .wg-sechead .wg-lede { text-align: left; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   Pills — a dense row of links.

   The outcome pages list every industry that maps to the outcome, which runs
   from 11 to 26. A card grid at that count is a wall of boxes; pills stay
   scannable and carry the same links.
   -------------------------------------------------------------------------- */

.wg-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
}
.wg-pill {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #cfe8e6;
	color: #0a6f6a;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.wg-pill:hover {
	background: #eef6f6;
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-1px);
}
.wg-on-dark .wg-pill {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.16);
	color: #fff;
}
.wg-on-dark .wg-pill:hover {
	background: rgba(255,255,255,.12);
	border-color: var(--wp--preset--color--accent-bright);
}
@media (max-width: 560px) {
	.wg-pills { gap: 8px; justify-content: center; }
	.wg-pill  { padding: 8px 13px; font-size: 13px; }
}

/* A feature row with no summary written yet: the icon and name only, so the
   row should not reserve space for a second line. */
.wg-tf__item--bare { align-items: center; }
.wg-tf__item--bare .wg-tf__name { margin-bottom: 0; }

/* ==========================================================================
   Outcome-page components.

   The industry and outcome pages were sharing every component, which made them
   read as the same page twice. These four exist because the outcome content has
   a different shape: it is a before/after argument, not a tour of a trade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   "Who this is for" — the hero callout that replaces the product screenshot.
   The outcome pack names a person rather than a trade, and that line is the
   sharpest writing in it.
   -------------------------------------------------------------------------- */

.wg-whofor {
	border: 1px solid rgba(255,255,255,.16);
	border-left: 3px solid var(--wp--preset--color--accent-bright);
	border-radius: 14px;
	padding: 26px 28px;
	background: rgba(255,255,255,.045);
}
.wg-whofor > * { margin: 0; }
.wg-whofor-label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-bright);
	margin-bottom: 10px;
}
.wg-whofor-copy {
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.5;
	color: #e6ebf7;
	max-width: 44ch;
}
@media (max-width: 991px) {
	.wg-whofor { padding: 22px 22px; border-radius: 12px; }
}

/* --------------------------------------------------------------------------
   Statement band — the pivot between "without it" and "with it".

   One sentence, large, nothing else in the section. The industry pages have no
   equivalent, and it is what stops the two card grids running together.
   -------------------------------------------------------------------------- */

.wg-statement { width: min(100%, 960px); margin-inline: auto; text-align: center; }
.wg-statement > * { margin: 0; }
.wg-statement-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-bright);
	margin-bottom: 18px;
}
.wg-statement-copy {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(23px, 3.1vw, 38px);
	line-height: 1.22;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}
@media (max-width: 560px) {
	.wg-statement { text-align: left; }
	.wg-statement-copy { font-size: clamp(21px, 6vw, 27px); }
}

/* --------------------------------------------------------------------------
   Vertical ladder — the path to the outcome.

   Deliberately not the horizontal timeline the industry pages use. These eight
   steps are a sequence you work through rather than a job moving along a floor,
   and reading down suits that. Two columns on wide screens so it does not run
   to a metre of page.
   -------------------------------------------------------------------------- */

.wg-ladder {
	--wg-rung: #cfe0e6;
	display: grid;
	/* Column-major on purpose. The spine runs vertically, so the numbers have to
	   run vertically too - filling across gave 01 top-left and 02 top-right with
	   a line between 01 and 03, which reads as two separate sequences.
	   `--wg-rows` comes off the block so the step count drives it. */
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--wg-rows, 4), auto);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 64px;
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
}
.wg-ladder > * { margin: 0; }

.wg-ladder-step {
	position: relative;
	display: grid;
	grid-template-columns: 42px 1fr;
	column-gap: 18px;
	align-items: start;
	padding: 18px 0;
}
.wg-ladder-step > * { margin: 0; }
/* The spine, drawn per step so it stops cleanly at the end of each column. */
.wg-ladder-step::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 42px;
	bottom: -18px;
	width: 2px;
	background: var(--wg-rung);
}

/* Last step in a column carries no rung. The generator marks these, because
   which items they are depends on the row count and nth-child cannot read a
   custom property. */
.wg-ladder-step--last::before { display: none; }

.wg-ladder-num {
	grid-column: 1;
	width: 42px; height: 42px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--card-line);
	color: var(--wp--preset--color--accent-deep);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	line-height: 1;
	position: relative;
	z-index: 2;
}
.wg-ladder-label {
	grid-column: 2;
	align-self: center;
	font-size: 16.5px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--wp--preset--color--text-strong, var(--wp--preset--color--contrast));
}

.wg-on-dark .wg-ladder      { --wg-rung: rgba(255,255,255,.16); }
.wg-on-dark .wg-ladder-num  { background: #0d3269; border-color: #2c568e; color: #7ff3e7; }
.wg-on-dark .wg-ladder-label{ color: #fff; }

@media (max-width: 860px) {
	.wg-ladder {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}
	/* One column: the old column break is now mid-sequence, so it gets its
	   rung back. Only the genuine last step goes without. */
	.wg-ladder-step--last:not(:last-child)::before { display: block; }
}
@media (max-width: 560px) {
	.wg-ladder-step  { padding: 14px 0; grid-template-columns: 36px 1fr; column-gap: 14px; }
	.wg-ladder-num   { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
	.wg-ladder-step::before { left: 17px; top: 36px; bottom: -14px; }
	.wg-ladder-label { font-size: 15.5px; }
}

/* --------------------------------------------------------------------------
   Supporting features — a quiet row under the primary list, because the
   primary/supporting split is real data on the Internal Links sheet and
   flattening it into one list threw information away.
   -------------------------------------------------------------------------- */

.wg-supporting {
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
	padding-top: 30px;
	margin-top: 34px;
	border-top: 1px solid rgba(255,255,255,.14);
}
.wg-supporting > * { margin: 0; }
.wg-supporting-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8fa2c0;
	margin-bottom: 14px;
}

/* ==========================================================================
   Feature-page components.

   Layout follows Khye's feature design; the tokens are the ones already on the
   site, so these sit next to the industry and outcome pages rather than
   introducing a second look.

   The packs carry fourteen sections, five of which are lists. Rendering all
   five as card grids would give four consecutive walls of boxes, so each list
   gets a treatment suited to its shape: short leads become cards, long ones
   become rows, name-led ones become pills.
   ========================================================================== */

/* ---- Trust bar. Thin, quiet, sits directly under the hero. --------------- */

.wg-trustbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 26px;
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
	text-align: center;
}
.wg-trustbar > * { margin: 0; }
.wg-trustbar-stars {
	color: #ffb400;
	letter-spacing: .16em;
	font-size: 15px;
	line-height: 1;
}
.wg-trustbar-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--text);
}
.wg-trustbar-sep { color: var(--wp--preset--color--card-line); }

/* ---- On-page index. "What's inside" — jump links or child features. ------ */

.wg-idx {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 40px;
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
}
.wg-idx > * { margin: 0; }
.wg-idx-item {
	display: grid;
	grid-template-columns: 1.9rem 1fr;
	gap: 2px 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--card-line);
}
.wg-idx-item > * { margin: 0; }
.wg-idx-num {
	grid-row: span 2;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--accent);
}
.wg-idx-name { font-weight: 700; font-size: 16px; line-height: 1.35; }
.wg-idx-name a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.wg-idx-name a:hover { color: var(--wp--preset--color--accent-deep); text-decoration: underline; }
.wg-idx-desc { font-size: 14.5px; line-height: 1.5; color: var(--wp--preset--color--text); }

@media (max-width: 780px) {
	.wg-idx { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Feature rows. Khye's alternating copy/media pairs. ------------------ */

.wg-fr {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 62px;
	align-items: center;
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
}
.wg-fr > * { margin: 0; }
/* Khye alternates the media side down the page. The generator adds --flip to
   every second row rather than relying on :nth-child, because the rows are
   separate sections with their own backgrounds. */
.wg-fr--flip .wg-fr-copy  { order: 2; }
.wg-fr--flip .wg-fr-media { order: 1; }

.wg-fr-copy > * { margin: 0; }
.wg-fr-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin-bottom: 12px;
}
.wg-fr-title {
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.16;
	letter-spacing: -.02em;
	margin: 0 0 14px;
}
.wg-fr-body { font-size: 16.5px; line-height: 1.6; max-width: 52ch; }
.wg-fr-media > * { margin: 0; width: 100%; }
.wg-fr-media img { border-radius: 15px; display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
	.wg-fr { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	/* Stacked, the copy always leads. */
	.wg-fr--flip .wg-fr-copy  { order: 0; }
	.wg-fr--flip .wg-fr-media { order: 0; }
}

/* ---- Use cases. Long items (45 words at the extreme) so they get width
        rather than being squeezed into a card. -------------------------- */

.wg-uses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 64px;
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
}
.wg-uses > * { margin: 0; }
.wg-use {
	padding: 26px 0 26px 22px;
	border-left: 2px solid var(--wp--preset--color--accent);
	border-bottom: 1px solid var(--wp--preset--color--card-line);
}
.wg-use > * { margin: 0; }
.wg-use-lead {
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 7px;
}
.wg-use-body { font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--text); }

@media (max-width: 860px) {
	.wg-uses { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---- Benefits. A checklist, not cards — they are short and parallel. ----- */

.wg-checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 56px;
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
}
.wg-checks > * { margin: 0; }
.wg-check {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 2px 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--card-line);
}
.wg-check > * { margin: 0; }
.wg-check-tick {
	grid-row: span 2;
	width: 26px; height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent-deep);
	font-size: 13px;
	line-height: 1;
	margin-top: 2px;
}
.wg-check-lead { font-weight: 700; font-size: 16.5px; line-height: 1.4; }
.wg-check-body { font-size: 15.5px; line-height: 1.55; color: var(--wp--preset--color--text); }

.wg-on-dark .wg-check       { border-bottom-color: rgba(255,255,255,.14); }
.wg-on-dark .wg-check-tick  { background: rgba(255,255,255,.09); color: var(--wp--preset--color--accent-bright); }
.wg-on-dark .wg-check-body  { color: #cfd6e8; }

@media (max-width: 780px) {
	.wg-checks { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---- Proof band. Khye's navy stat strip. --------------------------------- */

.wg-proofband { width: min(100%, 900px); margin-inline: auto; text-align: center; }
.wg-proofband > * { margin: 0; }
.wg-proofband-stat {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(21px, 2.5vw, 30px);
	line-height: 1.25;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}
.wg-proofband-quote {
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.6;
	color: #e6ebf7;
	margin-top: 18px;
}
.wg-proofband-who {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-bright);
	margin-top: 16px;
}

/* ---- Overview. Editorial intro: heading left, prose right. --------------
   The packs give this as six or seven short paragraphs, not a heading plus a
   lede - dumped into a full-width stack it ran to a 1200px measure and read as
   filler. Capped and set against the heading, it reads as the opening argument
   the copy actually is. */

.wg-ovw {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 24px 72px;
	align-items: start;
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
}
.wg-ovw > * { margin: 0; }
.wg-ovw-head { position: relative; padding-top: 22px; }
.wg-ovw-head > * { margin: 0; }
/* Short accent rule above the heading - the only ornament on the page. */
.wg-ovw-head::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 54px; height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}
.wg-ovw-head .wg-h2 { max-width: 18ch; margin: 0; }
.wg-ovw-body { max-width: 58ch; padding-top: 22px; }
.wg-ovw-body > * { margin: 0 0 1.05em; }
.wg-ovw-body > *:last-child { margin-bottom: 0; }
.wg-ovw-body > *:first-child {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--text-strong, var(--wp--preset--color--contrast));
	font-weight: 500;
}
.wg-ovw-body p { line-height: 1.65; }

@media (max-width: 860px) {
	.wg-ovw { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.wg-ovw-body { padding-top: 0; max-width: none; }
}

/* ---- Benefit tiles. Was a bare list with a small tick; these are short and
        parallel, so they take a tile with a filled badge. ----------------- */

.wg-checks {
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: 14px;
}
.wg-check {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 4px 16px;
	align-content: start;
	padding: 22px 24px;
	border: 2px solid var(--wp--preset--color--card-line);
	border-bottom: 2px solid var(--wp--preset--color--card-line);
	border-radius: 15px;
	background: var(--wp--preset--color--base);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wg-check:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 10px 28px rgba(0, 166, 156, .13);
	transform: translateY(-2px);
}
.wg-check-tick {
	grid-row: span 2;
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	margin-top: 1px;
	place-items: center;
	display: grid;
}
.wg-check-lead  { align-self: center; }
.wg-check-body  { grid-column: 2; }

.wg-on-dark .wg-check {
	background: rgba(255,255,255,.055);
	border-color: rgba(255,255,255,.13);
}
.wg-on-dark .wg-check-tick { background: var(--wp--preset--color--accent); color: #fff; }

@media (max-width: 780px) {
	.wg-checks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.wg-check  { padding: 18px 20px; grid-template-columns: 34px 1fr; column-gap: 14px; }
	.wg-check-tick { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
}

/* ---- Side-by-side section. -----------------------------------------------
   For sections whose body is one short row - a pill list, a single button.
   Stacked, those leave a band that is mostly empty with everything hugging the
   bottom left. Set against the heading they fill the width and read as
   deliberate. */

.wg-sidesec {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 20px 64px;
	align-items: center;
	width: min(100%, var(--wg-col, 1180px));
	margin-inline: auto;
}
.wg-sidesec > * { margin-block: 0; }
.wg-sidesec-head > * { margin: 0; }
.wg-sidesec-head .wg-eyebrow { margin-bottom: var(--wp--preset--spacing--30); }
.wg-sidesec-head .wg-h2 { max-width: 20ch; margin: 0; }
.wg-sidesec-head .wg-lede { max-width: 40ch; margin: 12px 0 0; }
/* The body already caps itself; inside a column it should just fill. */
.wg-sidesec-body > * { width: 100%; max-width: none; margin-inline: 0; }

@media (max-width: 860px) {
	.wg-sidesec { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
	.wg-sidesec-head .wg-h2 { max-width: 30ch; }
}

/* ---------------------------------------------------------------------------
   Proof cards. One testimonial, injected anywhere - see inc/testimonials.php.

   Deliberately not the wg-card shape: a card sitting inside a column on a
   feature page has to hold its own next to whatever is beside it, so the quote
   leads and the attribution stays quiet. The four variants differ only by what
   they add above the quote.
   --------------------------------------------------------------------------- */
.wg-tc {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid rgba(9, 12, 76, .14);
	border-radius: 10px;
	padding: clamp(1.15rem, 2.4vw, 1.6rem);
	display: flex;
	flex-direction: column;
	gap: .8rem;
	height: 100%;
}
.wg-tc > * { margin: 0; }
.wg-tc-quote { font-size: .98rem; line-height: 1.55; }
.wg-tc-quote::before { content: "\201C"; }
.wg-tc-quote::after { content: "\201D"; }
.wg-tc-who { margin-top: auto !important; font-size: .8rem; opacity: .72; }
.wg-tc-stat {
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast, #090c4c);
}
/* Headshot. Round, small, and it does not grow with the card. */
.wg-tc-photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
/* Logo. A fixed box with contain, because the fifteen files run from 149x120 to
   1753x393 and a shared max-height alone makes the square ones look half the
   weight of the wide ones. */
.wg-tc-logo img {
	width: 124px; height: 40px;
	object-fit: contain; object-position: left center;
}
/* On a dark band the card inverts rather than staying a white box in a navy
   section - the proof band on 79 pages sits on navy-soft. */
.wg-on-dark .wg-tc {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
}
.wg-on-dark .wg-tc-stat { color: var(--wp--preset--color--accent, #ffb020); }

/* --- step / row counts as classes -------------------------------- */
/* `--wg-steps` and `--wg-rows` used to arrive as an inline style on the
   group block. A bare custom property is not something any core block
   support round-trips, so save() could never regenerate it and every
   affected block showed "unexpected or invalid content" in the editor.
   Carried as a class instead, which className does round-trip. */
.wg-flowsteps--n1  { --wg-steps: 1; }
.wg-flowsteps--n2  { --wg-steps: 2; }
.wg-flowsteps--n3  { --wg-steps: 3; }
.wg-flowsteps--n4  { --wg-steps: 4; }
.wg-flowsteps--n5  { --wg-steps: 5; }
.wg-flowsteps--n6  { --wg-steps: 6; }
.wg-flowsteps--n7  { --wg-steps: 7; }
.wg-flowsteps--n8  { --wg-steps: 8; }
.wg-flowsteps--n9  { --wg-steps: 9; }
.wg-flowsteps--n10 { --wg-steps: 10; }
.wg-flowsteps--n11 { --wg-steps: 11; }
.wg-flowsteps--n12 { --wg-steps: 12; }

.wg-ladder--r1    { --wg-rows: 1; }
.wg-ladder--r2    { --wg-rows: 2; }
.wg-ladder--r3    { --wg-rows: 3; }
.wg-ladder--r4    { --wg-rows: 4; }
.wg-ladder--r5    { --wg-rows: 5; }
.wg-ladder--r6    { --wg-rows: 6; }
.wg-ladder--r7    { --wg-rows: 7; }
.wg-ladder--r8    { --wg-rows: 8; }
.wg-ladder--r9    { --wg-rows: 9; }
.wg-ladder--r10   { --wg-rows: 10; }
.wg-ladder--r11   { --wg-rows: 11; }
.wg-ladder--r12   { --wg-rows: 12; }