/**
 * sigma/grid (P3) -- n-up card grid. Loaded only where the block renders
 * (block.json "style" field).
 *
 * Rebuilt 2026-09-08 to the client's comps (docs/COMPOSITION.md "Card
 * grid", docs/qa/comp-spec/SPEC-home.md S05 lower half). The card is the
 * comp's 593x223 box: 1.5px navy border, zero radius, no shadow, 30px
 * Cormorant Bold heading at a 46px inset, a 191px 0.75px gold rule under
 * it, 20px Cormorant Light body at a 27px pitch. Every number below that
 * is not a token is a measured comp coordinate, named at its use.
 *
 * One column at mobile, 2 at tablet (768) regardless of the chosen
 * column count, the real 3/4/5 count only from desktop (1024) up -- this
 * is what keeps a 4- or 5-up grid from squeezing to unreadable columns
 * at tablet width while still reflowing sanely at 375 with no
 * horizontal scrollbar. CSS grid never overlaps or crops a cell for
 * this reason: every row gets as many implicit rows as it needs, so a
 * 5-item grid at 2 columns (tablet) simply wraps to a third, shorter
 * row instead of squeezing or clipping anything.
 */

.grid {
	/*
	 * Card-body line pitch. The comp sets card copy at 20px on a 27px
	 * pitch (SPEC-home S05: body lines at y=2966, 2993, 3021) -- 1.35,
	 * looser than --leading-body's 1.1 used for paragraph copy. No
	 * token carries 1.35 today and design/tokens.json has another
	 * writer this turn, so it lives here as a block-local property; a
	 * --leading-card token is the right long-term home.
	 */
	--grid-card-leading: 1.35;
	/* 593 + 46 + 593: the 2x2's outer width in the comp (x=111..1342). */
	--grid-cols-2-width: 1232px;
	/* 5 x 235 + 4 x 29: five tiles at the stat boxes' 264px pitch. */
	--grid-cols-5-width: 1291px;
	/* Named so the partial-last-row rules below can do their arithmetic
	   in the gap that is actually in force at that width. */
	--grid-col-gap: var(--space-lg);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	box-sizing: border-box;
}

/*
 * A partial last row, centred under the rows above it.
 *
 * The hubs carry 2 to 4 entries plus an optional closing card, so a
 * count that does not divide by the column number is normal content
 * here, not an authoring mistake. Left alone, the leftovers stay in the
 * first tracks and the row reads as cards that failed to load beside a
 * hole -- QA 806 on the trades hub (3 cards in 2 columns), and the same
 * shape on /industries/ (5 in 3) and the healthcare hub (7 in 3).
 *
 * The shift is always (missing tracks) x (track + gap) / 2, and it is
 * done with position:relative rather than by re-assigning grid columns:
 * a percentage on a positioned grid item resolves against the item's
 * own width, which IS one track, so one expression is correct at every
 * viewport width without hard-coding a track size. The cards keep their
 * tracks, so nothing can overflow the grid.
 *
 * Below 768 every grid is a single column and no row is ever partial.
 *
 * :not(:only-child) on every one of these, because a grid holding ONE
 * card has no row to centre the card in -- and it satisfies both halves
 * of "last child, odd position" by construction. Caught by the
 * regression's horizontal-overflow check the moment the Contact Us email
 * row (a one-item grid) stopped being 593px wide inside a 1232px
 * breakout and became full width: shifted half its own width to the
 * right, it ran to x=1747 in a 1440 viewport. Home and Business
 * Valuation carry the same shape.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	/* Two columns for every grid in this band, whatever --cols-N says,
	   so an odd count means the last card is alone: one track missing.
	   The band is closed at 1024 rather than reset there -- a reset
	   would have to out-specify this selector, and the two grids that
	   stay two-up above 1024 are restated below instead. */
	.grid > .grid__item:last-child:nth-child(odd):not(:only-child) {
		position: relative;
		left: calc(50% + var(--grid-col-gap) / 2);
	}
}

@media (min-width: 768px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	/*
	 * 46px between cards and 45px between rows is the comp's spacing
	 * for every card grid (2x2: cards at x=111/750, rows at y=2861/3129;
	 * the 3-card row on Sell Your Business uses the same 46). Applied
	 * to every column count so a 3x2 "What buyers dig into" grid reads
	 * as the same family.
	 */
	.grid {
		column-gap: 46px;
		row-gap: 45px;
	}

	/* The comp's own gap, so the centring maths above follows it. */
	.grid {
		--grid-col-gap: 46px;
	}

	.grid--cols-5 {
		--grid-col-gap: 29px;
	}

	/*
	 * From 1024 each --cols-N grid takes its own column count, so the
	 * two-up rule above no longer describes them and is restated here
	 * per count. Only two counts can end on a partial row in this
	 * build: the default (no --cols-N modifier) and --cols-2 stay
	 * two-up, and --cols-3 is three-up. --cols-5 is exactly five tiles
	 * by construction and --cols-4 is unused, so neither is restated --
	 * and because the rule above closes at 1023.98 rather than being
	 * reset here, neither inherits a shift it should not have.
	 */
	.grid:not([class*="grid--cols-"]) > .grid__item:last-child:nth-child(odd):not(:only-child),
	.grid--cols-2 > .grid__item:last-child:nth-child(odd):not(:only-child) {
		position: relative;
		left: calc(50% + var(--grid-col-gap) / 2);
	}

	/* One card in the last row: two tracks missing, so a whole
	   track-plus-gap of shift puts it in the middle column. */
	.grid--cols-3 > .grid__item:last-child:nth-child(3n + 1):not(:only-child) {
		position: relative;
		left: calc(100% + var(--grid-col-gap));
	}

	/* Two cards in the last row: one track missing, half the shift, and
	   both of them move together. */
	.grid--cols-3 > .grid__item:nth-child(3n + 1):nth-last-child(2),
	.grid--cols-3 > .grid__item:nth-child(3n + 1):nth-last-child(2) + .grid__item {
		position: relative;
		left: calc(50% + var(--grid-col-gap) / 2);
	}

	/*
	 * The 2x2's cards are a fixed 593px in the comp, wider than half the
	 * theme's 1184px section column allows, so the grid steps outside
	 * its column: it takes its own width (the comp's 1232, capped at
	 * the viewport minus the section's own padding) and centres itself
	 * with a negative margin. minmax(0, 593px) tracks shrink together
	 * when the grid is narrower than 1232 (viewports under ~1328), so
	 * nothing ever overflows. Percent margins resolve against the
	 * section column, which is itself margin-inline:auto -- so this is
	 * anchored to the viewport's centre, not the column's edge, and
	 * survives the column's width being retuned.
	 */
	.grid--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 593px));
		width: min(var(--grid-cols-2-width), 100vw - 2 * var(--space-xl));
		margin-inline: calc((100% - min(var(--grid-cols-2-width), 100vw - 2 * var(--space-xl))) / 2);
	}

	.grid--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	/*
	 * Gap 2: a fifth column for the one box that legitimately needs a
	 * single five-up row (home page industry tiles) rather than an
	 * orphaned fifth tile wrapping alone under a 4-up grid. Tiles are
	 * the stat boxes' 235px width at their 264px pitch (29px gap), so
	 * the row is 1291 wide and centres the same way the 2x2 does.
	 */
	.grid--cols-5 {
		grid-template-columns: repeat(5, minmax(0, 235px));
		column-gap: 29px;
		width: min(var(--grid-cols-5-width), 100vw - 2 * var(--space-xl));
		margin-inline: calc((100% - min(var(--grid-cols-5-width), 100vw - 2 * var(--space-xl))) / 2);
	}
}

@media (min-width: 1440px) {
	/*
	 * At the comp's own 1440 canvas the 2x2 is not centred: its left
	 * edge is x=111 with the grid 1232 wide, i.e. 7px right of centre
	 * (the heading above it IS centred at 720). The left margin is
	 * "column centre minus 609" so the left card lands on 111 whatever
	 * the column's width; margin-right stays auto and takes the
	 * remainder. Only from 1440 up -- below that the fluid, centred rule
	 * above applies and there is no comp coordinate to hit.
	 */
	.grid--cols-2 {
		margin-left: calc(50% - 609px);
		margin-right: auto;
	}
}

/*
 * ...but only when there are two of them. The column count is a required
 * select with no "1" choice (blocks/grid/fields.php), so the adapter's
 * sigma_pagegen_grid_columns() answers "2" for any grid holding a single
 * row -- and a single row then inherited the 2x2's 1232px breakout.
 * Measured on Contact Us (QA 813): the one-line "Email:
 * info@sigmamergers.com" row sat at x=111-1343 inside a section column
 * running 170-1270, i.e. 100px outside the reading width on both sides,
 * on a page where every neighbour lines up with the card above it.
 *
 * The breakout is a property of the comp's pair of 593px cards, not of
 * the modifier's name, so it is withdrawn when the pair isn't there.
 */
@media (min-width: 1024px) {
	.grid--cols-2:has(> .grid__item:only-child) {
		grid-template-columns: minmax(0, 1fr);
		width: auto;
		margin-inline: 0;
	}
}

/*
 * 2026-09-08 fix (tasks 773/777/783/785/787/790, six-plus-page recurrence
 * of the same "cards glued to the prose above them" complaint: Home box
 * 6, Business Valuation boxes 3/4, the Industries landing page box 2,
 * and every industry hub's "New A"/box 2/box 7 wherever it applies --
 * business-services and manufacturing-industrial named directly, the
 * same box shape confirmed unchanged on distribution-logistics,
 * skilled-trades-construction and healthcare-consumer-services too).
 *
 * Root cause, confirmed by reading blocks/heading-text/style.css:
 * .heading-text itself carries no bottom margin at all -- only its
 * inner eyebrow/heading/body children space themselves apart, and
 * .heading-text__body > *:last-child explicitly ZEROES that last
 * paragraph's own margin-bottom (correct when heading-text is the only
 * block in its box, wrong the moment a grid is stacked right after it).
 * So whenever a box's heading-text ends in real body copy, its measured
 * gap to the next block is exactly 0px -- confirmed live on every page
 * named above. Where heading-text instead ends in a bare heading with
 * no body copy (e.g. "What you get from Sigma." on every industry hub),
 * the heading's own un-zeroed margin-bottom (--space-md, 24px) already
 * reads fine -- confirmed live, 24px, not reported, deliberately left
 * alone: a blanket ".heading-text + .grid" rule would have stacked a
 * second gap on top of that and over-spaced the pairs that were never
 * broken.
 *
 * :has(> .heading-text__body:last-child) is the one selector that tells
 * the two cases apart without touching content or markup -- targets
 * ONLY a heading-text whose last rendered child is real body prose, so
 * this rule fires exactly on the glued pairs above and never on the
 * ones already spaced by their own heading margin. :has() is already
 * relied on elsewhere in this theme (blocks/deal-highlight/style.css's
 * CSS-only filter), so this is an established pattern, not a new
 * browser-support risk.
 *
 * --space-xl (48px), not --space-2xl -- same reasoning as the
 * heading-text+dealmap fix in blocks/dealmap/style.css: these blocks
 * stay inside ONE shared box/section (card elaboration of the intro
 * above it), not two things that should read as separate sections the
 * way blocks/faq/style.css's testimonials+faq pairing does.
 */
.heading-text:has(> .heading-text__body:last-child) + .grid {
	margin-top: var(--space-xl);
}

/*
 * The mirror case: a heading-text stacked BELOW a card row -- Home box 6
 * closes its five industry tiles with a line and the site's main button.
 * .grid has no bottom margin and the heading-text no top one, so the
 * closing line sat on the tiles' bottom border (QA 799, "make it the same
 * gap as above the cards"). --space-xl is exactly that: the same 48px the
 * rule above gives the heading over the cards, so the row is now evenly
 * spaced on both sides rather than hung from the heading.
 */
.grid + .heading-text {
	margin-top: var(--space-xl);
}

/*
 * The card. Flex column so an arrow-link (render.php's .grid__item-link)
 * can pin itself to the foot of the card with margin-top:auto while
 * min-height keeps every card at the comp's 223px even when its copy is
 * one line (About Us "Value." is exactly that). 20px padding at mobile
 * per the brief; the comp's 46/52px insets only from desktop up, where
 * the card is wide enough to afford them.
 */
.grid__item {
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--color-white);
	color: var(--color-navy);
	border: 1.5px solid var(--color-navy);
	border-radius: var(--radius-none);
	box-shadow: var(--shadow-none);
	padding: 20px;
}

@media (min-width: 768px) {
	.grid__item {
		padding: var(--space-md);
	}
}

@media (min-width: 1024px) {
	/*
	 * Comp insets (SPEC-home S05): card x=111, heading x=157 (46 in),
	 * rule and body x=163 (52 in); heading em-top at card y+23 with a
	 * 33px line box (half-leading 1.5). The comp's x/y are the box's
	 * stroke, which is this box's 1.5px border, so the padding is the
	 * inset LESS the border: 20.5 top, 45 left -- the half pixel is
	 * because Chrome floors a 1.5px border to 1px at 1x and keeps it at
	 * 2x, so every whole-pixel choice is a pixel off on one of them. The right inset is what
	 * the body's longest line measures (ends 32 short of the border),
	 * and the bottom is what the shortest card's copy leaves under
	 * itself.
	 *
	 * The comp's 222.8px card height was held here as a min-height and
	 * is now gone, for the same reason the stats-band's 455 and the
	 * value-prop's 568 went (blocks/stats-band/style.css,
	 * blocks/value-prop/style.css): the number is a consequence of the
	 * comp's own placeholder copy, and the Copy Master's copy is
	 * shorter. On the trades hub it left a two-line card 70% empty and
	 * a three-line card with 120px under its last line (QA 806); on
	 * About Us the four pillars each carried 20-45px of the same. The
	 * paddings and insets above are the part of the comp that survives
	 * a copy change, so they stay exactly as measured; the row's own
	 * equalisation already keeps a row of unequal cards level, which is
	 * what the min-height was really being asked to do.
	 */
	.grid__item {
		padding: 20.5px var(--space-lg) var(--space-md) 45px;
	}
}

.grid__item-icon {
	display: block;
	width: var(--space-xl);
	height: var(--space-xl);
	max-width: 100%;
	object-fit: contain;
	margin: 0 0 var(--space-sm);
}

/*
 * Home's 01-04 step numbers. Montserrat at the kicker size; gold-deep
 * rather than gold because 19px is under DESIGN.md's 24px floor for raw
 * gold on white (2.47:1) -- on navy (below) it is plain gold, which
 * passes there.
 */
.grid__item-kicker {
	display: block;
	margin: 0 0 var(--space-xs);
	font-family: var(--font-sans);
	font-size: var(--text-kicker);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-kicker);
	color: var(--color-gold-deep);
}

/*
 * The heading carries the gold rule as its ::after so the markup stays
 * what it was and a text-only row (no heading) gets no rule, exactly as
 * the comp draws it. Rule geometry from SPEC-home S05: 191.3 x 0.75px,
 * 6px right of the heading's own left edge, at card y+81 -- the
 * heading's line box ends at +54.5 (1.5 border + 20 + 33), so 26px of
 * margin lands the rule on 80.5..81.25. The body's margin below is what
 * puts its em-top on +105 (rule 0.75, gap 20, half-leading 3.5 of the
 * 27px pitch).
 */
.grid__item-heading {
	display: block;
	width: 100%;
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--text-h3);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	color: var(--color-navy);
}

.grid__item-heading::after {
	content: '';
	display: block;
	width: 191px;
	max-width: 100%;
	height: 0;
	margin: 26.5px 0 0;
	border-top: 0.75px solid var(--color-gold);
}

@media (min-width: 1024px) {
	.grid__item-heading::after {
		margin-left: 6px;
	}
}

/*
 * Centred items, for a grid on a page with no comp behind it.
 *
 * The left alignment above is SPEC-home S05's own geometry and stays the
 * default wherever a drawing defends it. Business Valuation has no comp,
 * and its five cards sit two-up with the fifth centred under them, so
 * left-aligned text inside centred boxes read as misaligned rather than
 * deliberate (Roman, 19 Sep).
 *
 * The rule is the heading's ::after, so centring it means undoing the 6px
 * nudge that lines it up with a left-aligned heading -- margin-inline
 * auto, and the desktop override below has to be neutralised too or the
 * rule sits 6px right of centre.
 */
.grid--align-center .grid__item,
.grid--align-center .grid__item-heading,
.grid--align-center .grid__item-body {
	text-align: center;
}

.grid--align-center .grid__item-heading::after {
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.grid--align-center .grid__item-heading::after {
		margin-left: auto;
	}
}

/*
 * Tighter box, smaller heading, less air between the boxes -- the
 * centred grid only (Roman, 19 Sep: "в один ряд влазять одне-два слова").
 *
 * Three things were fighting the copy at once. The comp's inset is 45px
 * left against 32px right, drawn for a LEFT-aligned card where the eye
 * only tracks the left edge; centred, that 13px difference is visible as
 * a box whose contents sit off to one side. The heading is 30px, and at
 * that size in a ~400px column an industry name like "Healthcare &
 * Consumer Services" breaks after two words. And the row gap is the
 * comp's 46/45px, which on a page with five short cards reads as five
 * separate objects rather than one set.
 *
 * So: symmetric 28px sides, 26px heading (one step down, still a
 * heading), and the gap cut to --space-lg. The comped grids keep every
 * comp number exactly as measured -- none of this reaches them.
 */
.grid--align-center {
	--grid-col-gap: var(--space-lg);

	column-gap: var(--space-lg);
	row-gap: var(--space-lg);
}

.grid--align-center .grid__item {
	align-items: center;
	padding: var(--space-md) var(--space-lg);
}

@media (min-width: 1024px) {
	.grid--align-center .grid__item {
		padding: var(--space-lg) 28px;
	}
}

.grid--align-center .grid__item-heading {
	font-size: var(--text-card-heading);
}

/* The rule sits closer under a smaller heading; 26.5px was measured
   against the 30px line box. */
.grid--align-center .grid__item-heading::after {
	margin-top: var(--space-md);
}

.grid__item-text {
	margin: 20.5px 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-light);
	line-height: var(--grid-card-leading);
	color: var(--color-navy);
}

/* A heading-less row's text starts at the top of the card. */
.grid__item-text:first-child,
.grid__item-kicker + .grid__item-text {
	margin-top: 0;
}

@media (min-width: 1024px) {
	.grid__item-text,
	.grid__item-list {
		margin-left: 6px;
	}
}

/*
 * Gap 1: an item's `text` as a real list. render.php only reaches this
 * markup when fields.php's sigma_grid_text_lines() finds more than one
 * line in the textarea -- a single-line value still renders as
 * .grid__item-text above, untouched. Typography matches
 * .grid__item-text exactly (same family/size/leading/color); only the
 * list mechanics are new.
 */
.grid__item-list {
	margin: 20.5px 0 0;
	padding-left: var(--space-md);
	list-style: disc outside;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-light);
	line-height: var(--grid-card-leading);
	color: var(--color-navy);
}

.grid__item-list:first-child {
	margin-top: 0;
}

.grid__item-list-item::marker {
	color: var(--color-gold);
}

.grid__item-list-item + .grid__item-list-item {
	margin-top: var(--space-xs);
}

/*
 * The arrow-link at the foot of a card: 18px uppercase Montserrat
 * Regular in navy with the comp's gold arrow (SPEC-sell-your-business
 * S01, "LEARN MORE ->"). Not a boxed button -- the comp's cards end in
 * this, and DESIGN.md's outline button is for the band-level CTAs. The
 * 44px minimum height is the tap target; the text sits centred in it so
 * the visual position is unchanged. margin-top:auto pins it to the foot
 * of a min-height card (and to a common foot across a row of unequal
 * copy); the padding above it is the least it may approach the body.
 */
.grid__item-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-md);
	min-height: 44px;
	margin-top: auto;
	padding-top: var(--space-md);
	font-family: var(--font-sans);
	font-size: var(--text-button-label);
	font-weight: var(--weight-sans-regular);
	line-height: 1.2;
	letter-spacing: var(--tracking-button-label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-navy);
}

.grid__item-link-arrow {
	flex: 0 0 auto;
	overflow: visible;
	color: var(--color-gold);
}

.grid__item-link:not(.grid__item-link--unlinked):hover .grid__item-link-label,
.grid__item-link:not(.grid__item-link--unlinked):focus-visible .grid__item-link-label {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.grid__item-link:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/*
 * phase2_unlinked labels render as an <a> with no href at all (see
 * render.php) -- already non-focusable and inert; this only signals the
 * same thing visually.
 */
.grid__item-link--unlinked {
	cursor: default;
	opacity: 0.55;
}

@media (min-width: 1024px) {
	.grid__item-link {
		margin-left: 6px;
	}
}

/*
 * Gap 3: the whole-card link (render.php's grid__item--linked modifier,
 * applied only when an item's link_page resolves to a real href and the
 * item has no arrow-link of its own -- see fields.php's
 * sigma_grid_resolve_page_url() and render.php). Unlinked items stay a
 * plain <div> with none of this.
 */
.grid__item--linked {
	text-decoration: none;
}

.grid__item--linked:hover,
.grid__item--linked:focus-visible {
	border-color: var(--color-gold);
}

.grid__item--linked:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/*
 * The five industry tiles (home.json box 6, opts.columns "5"): a name
 * and nothing else, the whole tile a link. Heading one size down
 * (--text-box-heading, the comp's 26px "Who we help" box heading),
 * centred both ways in a tile tall enough to read as a card rather
 * than a chip; no rule, since there is nothing under the name for a
 * rule to divide it from.
 */
.grid--cols-5 .grid__item {
	min-height: 110px;
	justify-content: center;
	align-items: center;
	text-align: center;
}

@media (min-width: 1024px) {
	.grid--cols-5 .grid__item {
		padding: 20px;
	}
}

.grid--cols-5 .grid__item-heading {
	font-size: var(--text-box-heading);
}

.grid--cols-5 .grid__item-heading::after {
	display: none;
}

/*
 * Gap 3, second consumer: the 404 page's recovery links
 * (content/pages/404.json box 4) need the same link_page mechanism but
 * must read as a plain list of links, not four call-to-action tiles --
 * card chrome and button styling are wrong there on purpose (the
 * client's copy is plain page names, not marketing labels). "plain" is
 * a block-level opt-in (fields.php's item_style field, default "card"),
 * so every grid on the site keeps its bordered-tile look unless a box
 * explicitly asks for the other one -- scripts/pagegen/adapters/grid.php
 * documents both opts.item_style and opts.item_links for whoever wires
 * a layout file to this.
 *
 * The typography below matches the theme's one existing "plain link"
 * pattern (assets/css/footer.css's .footer-menu a / .site-footer__connect
 * a): sans, footer-link size, regular weight, navy, no border, no
 * background, underline appears only on hover/focus. Nothing here is a
 * new visual language -- it is the same plain link the footer already
 * uses, reused inside a grid item.
 */
.grid--style-plain .grid__item {
	min-height: 0;
	background-color: transparent;
	border: 0;
	padding: 0;
	box-shadow: var(--shadow-none);
}

/* A plain row that is a link is still a tap target: 44px, text centred. */
.grid--style-plain .grid__item--linked {
	min-height: 44px;
	justify-content: center;
}

.grid--style-plain .grid__item-heading {
	display: inline-block;
	width: auto;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-footer-link);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

.grid--style-plain .grid__item-heading::after {
	display: none;
}

.grid--style-plain .grid__item-text,
.grid--style-plain .grid__item-list,
.grid--style-plain .grid__item-link {
	margin-left: 0;
}

/*
 * 2026-09-07 fix (task 771, "a link on the home page is too easy to
 * miss" -- her words, "maximally unnoticeable"). The element in
 * question is THIS one, not blocks/heading-text/style.css's
 * .heading-text__link -- that field exists on sigma/heading-text but no
 * adapter populates it yet (confirmed by reading
 * scripts/pagegen/adapters/heading-text.php: zero mentions of any link
 * field). The client's own trailing-sentence links ("See the full Sigma
 * DealMap(tm) process" on home.json box 4, "What's in the Exit
 * Readiness Report" on business-valuation.json box 4, both content.link
 * objects) render through sigma/grid's item_style:'plain' + opts.source:
 * 'link' path instead (scripts/pagegen/adapters/grid.php's own
 * sigma_pagegen_grid_link_row() docblock names both boxes explicitly).
 * Scoped to :is(.grid__item--linked) only -- not every plain-style
 * heading -- because contact-us.json box 3 and exit-readiness-score.json
 * box 4 also use item_style:'plain' for headingless, UNLINKED text rows
 * (phone/email lines, closing statements) that must keep their plain
 * navy body-text color, not read as a link they aren't. Every plain grid
 * box that IS linked (business-valuation, home, and 404.json's recovery
 * links) sits on a white/light section, so gold-deep clears AA there
 * (5.01:1 measured, DESIGN.md's own contrast table) -- checked, not
 * assumed, since gold-deep is not proven safe on navy (only plain gold
 * is, and only for large/accent text) and this rule must never reach a
 * navy-background plain grid if one is ever added.
 *
 * Was color:navy (identical to every surrounding body/heading text) with
 * an underline that appeared ONLY on hover/focus -- functionally
 * invisible at rest, which is exactly what "prose the client wrote as a
 * sentence" reads as once it's the same color as the sentence around it.
 * gold-deep + a default underline reads as a link at rest without
 * turning into DESIGN.md line 211's outline button (no border, no fill,
 * no padding box added here -- still plain inline text, per the task's
 * explicit "do not turn it into a button").
 */
.grid--style-plain .grid__item--linked .grid__item-heading {
	color: var(--color-gold-deep);
	text-decoration: underline;
}

.grid--style-plain .grid__item--linked:hover .grid__item-heading,
.grid--style-plain .grid__item--linked:focus-visible .grid__item-heading {
	text-decoration-thickness: 2px;
}

.grid--style-plain .grid__item--linked:hover,
.grid--style-plain .grid__item--linked:focus-visible {
	border-color: transparent;
}

/*
 * Inside a navy band the comp's box language inverts (the stat boxes:
 * transparent fill, 1.5px white border, white rule, white copy) rather
 * than dropping a white card onto navy. Gold arrow and kicker stay gold
 * -- gold on navy is 6.54:1, the one place raw gold passes at small
 * sizes (DESIGN.md's contrast table).
 */
.sigma-section--bg-navy .grid__item {
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

.sigma-section--bg-navy .grid__item-heading,
.sigma-section--bg-navy .grid__item-text,
.sigma-section--bg-navy .grid__item-list,
.sigma-section--bg-navy .grid__item-link {
	color: var(--color-white);
}

.sigma-section--bg-navy .grid__item-heading::after {
	border-top-color: var(--color-white);
}

.sigma-section--bg-navy .grid__item-kicker {
	color: var(--color-gold);
}