/**
 * Pattern: Sponsor Underwriting  (patterns/sponsor-underwriting.php)
 *
 * Sponsors page "Put your name on it" section, white band. Figma desktop
 * `2086:236` (composition `2085:2`), mobile `2086:94` (inside `2086:2`).
 * Decision log D28, build-tracker SP6. See the PHP file's own header for
 * the full copy-sourcing / discrepancy notes and the desktop-vs-mobile
 * anatomy differences (kicker + text-link desktop, no-kicker + pill-button
 * mobile) this file toggles.
 *
 * 2026-10-14 (D35): tiles alternate Dark Blue / Yellow / Purple per the KD
 * proposal `2100:682`; the VID gradient highlight is gone. The gate-round
 * notes below that mention the highlight card, its wash or its yellow hover
 * describe the D28 design this replaced. See "Tile colours" for the
 * current rules.
 *
 * ── Mobile-first ───────────────────────────────────────────────────────────
 * Every rule below is written base-first (the mobile/`2086:94` state) with
 * ascending breakpoints after it — sponsor-packages.css's own header
 * documents why (a base rule declared AFTER a min-width rule wins on
 * source order at equal specificity).
 *
 * ── Breakpoints ────────────────────────────────────────────────────────────
 * No tablet frame exists between the 390px mobile frame and the 1440px
 * desktop composition, so the column-count breakpoints below are asserted
 * from the build brief's own numbers ("3-up ~1024, 2-up ~640, 1-up below
 * that"), same as sponsor-packages.css's own no-third-frame breakpoint
 * calls:
 *   - 40rem (640px): 2 columns ONLY. Gate round 1, item 6 split this from
 *     the anatomy switch (round 0 had both fire together here) — 2
 *     columns of mobile-anatomy cards (no kicker, pill button) is the
 *     real, intended 640–1023px state, not a transitional glitch.
 *   - 64rem (1024px): 3 columns AND the desktop/mobile anatomy switch
 *     (kicker + text-link CTA appear, the pill button disappears) — moved
 *     here from 40rem because an 18px DynaPuff text link needs more
 *     surrounding width to read as a link than the 640–1023px "portrait
 *     tablet" range gives it; sponsor-presenting.css's own gate made the
 *     identical 640→1024 move for the identical reason.
 *   - 76rem (1216px VIEWPORT): 4 columns. This number is the SAME as
 *     `--kd-content-max`/`--kd-composition` in rem, but gate round 1, item
 *     8 corrected a conflation this file's own comments used to make: the
 *     media query fires at a 1216px VIEWPORT, not a 1216px CONTAINER —
 *     `--kd-edge-pad`'s own `max()` means the container/card only reach
 *     their Figma-exact 1216px/289px sizes once the viewport itself
 *     reaches ~1435px (see the 76rem block's own comment for the algebra).
 *     Below that, cards are proportionally narrower (e.g. ~242px at a
 *     literal 1216px viewport) — expected fluid behaviour. The column
 *     switch correctly stays at 76rem regardless; it's a "how many fit per
 *     row" threshold, not a "cards are now exactly 289px" one.
 *

 * ── Grid, not flex — equal row heights for free ────────────────────────────
 * See the PHP file's own header for why card height is never hardcoded to
 * Figma's demo 323px. `display: grid` on `.sponsor-underwriting__grid`
 * gives every row `align-items: stretch` (the grid default) against that
 * row's own tallest cell, with no extra CSS — the requirement this build
 * brief calls out explicitly ("equal card heights per row (grid, not
 * flex)").
 *
 * ── Card internals — flex column, default stretch ──────────────────────────
 * `.sponsor-underwriting__card` is `display: flex; flex-direction: column`
 * with NO `align-items` override, so text children (kicker/title/price/
 * desc) stretch to the card's own full inner width by the flex default —
 * this is what gives every text node Figma's 241px content width (289 −
 * 2×24 padding) without hardcoding that number a second time. The two CTA
 * elements (link, button) are shrink-wrapped content-sized pills/text, so
 * they alone get `align-self: flex-start`.
 *
 * ── Contour + shadow ─────────────────────────────────────────────────────
 * Title + price use the sitewide navy-fill / white-2px-stroke contour
 * (tier-card.css's own mechanism) on every card, including the lavender
 * ones — confirmed against the Figma screenshot (a visible white halo
 * around "Duck Shop" / "$3,500" etc., not just the VID card). The H2 gets
 * the same contour for mechanism consistency (invisible on this white
 * band, exactly like sponsor-presenting.css's own H2) plus
 * `--dfd-shadow-heading`, which the Figma node itself carries.
 *
 * ── Kicker font ────────────────────────────────────────────────────────────
 * Inter Bold, not DynaPuff — see the PHP file's header for why
 * get_design_context's generated code mislabels this one element
 * (screenshot evidence contradicts it; the title/price/CTA on the same
 * card genuinely ARE DynaPuff).
 *
 * ── Two-tone focus ring on the VID card only ───────────────────────────────
 * `.sponsor-underwriting__link`/`__btn` on the highlight card sit on a
 * gradient that runs from a light purple top stop to a navy bottom stop —
 * the sitewide default focus ring (a plain navy outline) can vanish
 * against the navy end. Reuses tier-card.css's / sponsor-presenting.css's
 * own two-tone fix verbatim: a solid navy outline plus a white halo
 * (`box-shadow`), which reads against either stop. The six lavender cards
 * are close enough to white that the sitewide default ring already has
 * plenty of contrast (same call sponsor-packages.css made for its own
 * toggle button) — no override needed there.
 *
 * ── Gate round 1 fixes ───────────────────────────────────────────────────
 * 1. VID card CTA rendered navy instead of white: NOT a bug in this
 *    file's own colour rule (it was already `var(--kd-color-base)`) — a
 *    shared global.css rule aimed at prose links
 *    (`.entry-content a:not(.wp-element-button):not([class*="kd-btn"])`)
 *    outranks a 2-class pattern selector on specificity (0,3,1 vs 0,2,0)
 *    and was silently winning for BOTH this pattern's CTAs (the mobile
 *    pill button's text was navy instead of black too, same cause, not
 *    separately flagged but fixed alongside it). Fixed in the PHP markup —
 *    both anchors now carry `wp-element-button`, that rule's own
 *    documented escape hatch for "this is a component, not a prose link"
 *    (every core `wp:button` anchor already carries it for the same
 *    reason; it has no default styling of its own). Not a shared-file
 *    edit — global.css is unchanged.
 * 2. VID kicker: yellow measured 2.47–2.51:1 (fails AA) against the
 *    gradient's own top-stop pixel colour at the kicker's position; navy
 *    measures 4.999:1. Fixed by DELETING the highlight override (the base
 *    rule was already navy) rather than adding a new one — see that
 *    rule's own comment.
 * 3. Seven cards all say "Claim it"/"Underwrite this" — added a per-card
 *    `aria-label` on both anchors (PHP), same convention
 *    `sponsor-packages.php`'s own perks-toggle button already uses for the
 *    identical five-identical-labels problem.
 * 4. VID desc prose: 95% white → 100% (`--kd-color-base`) — the desc
 *    text's rendered y isn't fixed (the grid stretches the CARD, not the
 *    text within it, and real packet prose runs longer than Figma's demo
 *    text on some cards), so 95% measured only 4.50:1 at its worst
 *    observed position — passing, but with essentially no margin. 100%
 *    re-measures with real margin at every width tested (see the PHP
 *    build's handoff for the numbers) and drops the file's last raw
 *    `rgba()`.
 * 5. CTAs didn't align across a row (packet prose varies a lot in length
 *    card-to-card). `margin-top: auto` on both `__link` and `__btn` — the
 *    card is a column flex item the grid has already stretched to the
 *    row's tallest card, so `auto` pushes the CTA to a shared bottom edge
 *    — same technique `sponsor-presenting__cta` already uses for its own
 *    bottom-pinned mobile button.
 * 6. Anatomy switch (kicker + text link vs pill button) moved from 40rem
 *    to 64rem; 40rem now only changes column count. See the Breakpoints
 *    section above and the 64rem block's own comment.
 * 7. "Claim it +" now underlined BY DEFAULT, not hover-only — the comp
 *    draws it underlined at rest (design-diff finding); the previous
 *    hover-only state also left the link distinguished from the title by
 *    colour and position alone, a WCAG 1.4.1 near-miss.
 * 8. 76rem breakpoint comment corrected — see the Breakpoints section
 *    above; this was a comment-only fix, the breakpoint itself (76rem,
 *    column count) was already correct and is unchanged.
 * 9. Titles vs the 2027 packet vs `patterns/sponsor-tiers.php` (P10, which
 *    independently ships the same seven names): checked against
 *    `pdftotext -enc UTF-8 -layout` on the packet directly. Packet's own
 *    canonical strings are "VID (Very Important Duck) Section",
 *    "“Who Let The Ducks Out?!”" (curly-quoted), and "Kids Fun Zone"
 *    (plural). This pattern's cards intentionally use the SHORTER Figma-
 *    exact display strings ("VID Section", unquoted "Who Let The Ducks
 *    Out?!") — the Figma node itself renders them that way, and matching
 *    it is this component's own pixel-match brief; changing to the
 *    packet's longer/quoted forms would break the Figma-verified 241px
 *    single-line card layout. P10 drifts the OTHER way and should be
 *    fixed independently: it already carries the packet's full VID name
 *    and curly-quoted title correctly, but has "Kid Fun Zone" (singular —
 *    a typo against the packet's "Kids Fun Zone", which this pattern
 *    already has right). Not fixed here — P10 is out of this pattern's
 *    lane; flagged for its own item, and SP8 has been told not to place
 *    both patterns on the same page.
 * 10. VID card shadow expressed via `color-mix()` against `--kd-color-body`
 *    (semantic black ink) instead of a raw `rgba(0,0,0,.25)` — see that
 *    rule's own comment for which existing shadow tokens were checked and
 *    ruled out, following `sponsor-presenting.css`'s identical precedent
 *    for its own no-matching-token shadow.
 *
 * ── Gate round 2 fixes ───────────────────────────────────────────────────
 * 1. The item-4 scrim (round 1) was anchored to the CARD's own height —
 *    live measurement found it darkened the navy title/price sitting
 *    ABOVE the desc too (price 3.56→2.53:1, title 4.2→3.83:1), because
 *    that header block is roughly fixed-height in px while the card
 *    varies 320–650px, so its fraction of the card's height moves
 *    independently of a percentage-based ramp — no single ramp can
 *    protect the desc without hurting the title/price at some height.
 *    Moved the wash onto `.sponsor-underwriting__card--highlight
 *    .sponsor-underwriting__desc` itself (a bled-out background via
 *    `margin-inline`/`padding-inline`, immune to card height by
 *    construction) — see that rule's own comment. Title/price are back on
 *    the plain, unwashed gradient (their ~3.56/~4.2 navy-fill contrast
 *    there is the SAME number the SP1 gate already accepted for
 *    tier-card.css's own Headliner card, carried by the white 2px
 *    contour stroke — not re-litigated here). This also removed the
 *    card's own two-layer `background` shorthand (one layer using
 *    `color-mix()`) — see that rule's own comment for the failure mode
 *    that created.
 * 2. The 4-class specificity chain (item 1) that beats global.css's plain
 *    `a` rule also beat that rule's `:hover` variant, leaving the
 *    desktop text link with literally no interactive state change
 *    (underline is already the resting state, item 7). Added explicit
 *    `:hover`/`:focus-visible` colour rules at the same 4-class depth —
 *    `--kd-btn-link-accent` (secondary purple, the sitewide text-link
 *    hover token) for the six lavender cards, `--kd-color-yellow` for the
 *    VID card (can't reuse purple — it sits on the gradient's dark bottom
 *    stop via `margin-top: auto`, where secondary fails; yellow measures
 *    clear there — see the handoff for the reading. This is a DIFFERENT
 *    position on the same gradient than where round 1 rejected yellow
 *    for the kicker, which sits near the light top stop instead).
 * 3. `max-width: 43.75rem` on the lead is a measure constraint, not part
 *    of the anatomy switch — it used to move to 64rem along with
 *    font-size/line-height, leaving the lead unconstrained (full column
 *    width, ~110 characters/line) for the entire 640–1023px 2-column
 *    range. Moved back to the 40rem block on its own; font-size/
 *    line-height correctly stay at 64rem (genuinely part of the desktop
 *    type scale, same as price/kicker).
 *
 * ── Gate round 3 fix ─────────────────────────────────────────────────────
 * Round 2's desc wash was a flat, hard-edged colour applied at every
 * width — correct on the number (measured 6.6–7.3:1, comfortably clear)
 * but visually wrong: a live design-diff caught a hard horizontal SEAM on
 * the VID card, an abrupt light-to-dark line starting exactly at the desc
 * paragraph where the comp draws one smooth, unbroken gradient. Two
 * changes, both on `.sponsor-underwriting__card--highlight
 * .sponsor-underwriting__desc` (see that rule's own comment for the full
 * detail): (1) the wash is now REMOVED entirely at ≥64rem — the raw
 * gradient already clears 4.5:1 there on its own, so desktop needed no
 * help and gets none; (2) below 64rem, where the mobile/tablet anatomy's
 * higher-riding desc still needs it, the flat colour became a top-edge
 * FADE (transparent to full over a fixed 1rem, then held) so there is no
 * y-position at which the colour jumps, at any card height — and the
 * strength dropped from round 2's 25% (which was solving for a
 * card-height-relative position that no longer exists) to 12%, the
 * smallest wash that still clears the target with margin now that it
 * only has a ~0.3 gap to close (4.27→4.5), not a worst-case-anywhere
 * margin to build in.
 */

.sponsor-underwriting {
	background-color: var(--kd-color-base); /* white band, D28 page rhythm */
	padding-block: var(--dfd-section-pad);
}

.sponsor-underwriting__inner > * {
	margin-block-start: 0; /* neutralise WP's default blockGap margin on every
		direct child (h2, lead, grid) — same footgun sponsor-packages.css's
		own header documents; every gap below is this file's own explicit
		margin, not WP's. */
}

.sponsor-underwriting__heading {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: 2.25rem; /* 36px — Figma-exact mobile size (`2086:94`), a
		fixed size lower than the shared --dfd-size-h2-section clamp's own
		32px floor. The desktop override below switches TO that token for
		its 50px desktop ceiling instead — same two-step sponsor-presenting.css
		already uses for its own H2. */
	line-height: var(--kd-lh-tight);
	letter-spacing: var(--dfd-track-heading); /* 3% — every DynaPuff heading */
	color: var(--kd-color-contrast); /* navy fill */
	text-shadow: var(--dfd-shadow-heading); /* Figma node's own drop-shadow */
	/* White contour — invisible on this white band (stroke colour ==
	   background colour); kept for mechanism consistency with every other
	   DynaPuff "poster" heading — see file header. */
	-webkit-text-stroke: 0.125rem var(--kd-color-base);
	paint-order: stroke fill;
	margin: 0 0 1.25rem; /* 20px, Figma-verified at both breakpoints
		(2086:95 bottom ~76 → 2086:96 top ~95: ~19-20px; 2086:237/238: 20px) */
}

.sponsor-underwriting__lead {
	font-family: var(--kd-font-body);
	font-size: 1rem; /* 16px mobile (2086:96) */
	line-height: var(--kd-lh-loose); /* 1.4 ≈ 24px mobile leading */
	color: var(--kd-color-body);
	margin: 0 0 1.5rem; /* 24px — Figma gap to the first card, mobile (2086:97
		top 206 − 2086:96 bottom ~187 ≈ 19-24px, rounded to the space scale) */
}

.sponsor-underwriting__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kd-space-md); /* 20px, Figma-exact both axes */
}

/* ── Card shell ─────────────────────────────────────────────────────────── */
.sponsor-underwriting__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem; /* 8px, Figma-exact mobile (2086:97 "gap-[8px]") */
	padding: 1.5rem; /* 24px, Figma-exact both breakpoints */
	border-radius: var(--kd-radius-card); /* 12px */
}

/* ── Tile colours — alternating Dark Blue / Yellow / Purple (2026-10-14) ──
   KD proposal 2100:682 for Janel's 10-12 ask ("a different color too maybe
   blue so they pop out a little more or in alternating colors (blue,
   yellow, purple)"), applied ahead of her pick (Alain, D35). Rotation by
   position so it holds for any card count: 3n+1 blue, 3n+2 yellow, 3n
   purple = the drawn Blue · Yellow · Purple · Blue · Yellow · Purple · Blue.
   Dark tiles (blue, purple) carry white type, yellow tiles navy type:
   white on #2E5EAB 6.35:1, white on #746DB0 4.61:1 (AA for the 12px
   kicker and 15px prose too), navy on yellow 12.3:1.

   VID is no longer the highlighted card in this option (the proposal's
   own note: "VID Section loses its featured gradient"). Its
   `--highlight` class stays in the markup (page content) but carries no
   styling now, so restoring D28's single gradient card is a CSS-only
   revert of this commit, with no page edit.

   Round 2 (2026-10-19, Janel, Userback 8536143): "Duck Patrol – Blue,
   Vendor Village – Yellow, Food Village - Purple". With the 3n rotation
   those three read Yellow · Purple · Blue; her order makes every row of
   four restart at Blue, so the rotation is now 4n: 4n+1 blue, 4n+2
   yellow, 4n+3 purple, 4n blue = Blue · Yellow · Purple · Blue | Blue ·
   Yellow · Purple. Every "is this the yellow tile" test below reads
   4n+2 to match. Colour follows the tile, not the layout, so cards 4
   (Kids Fun Zone) and 5 (Duck Patrol) are both blue: split by the row
   break at 4 cols, diagonal at 2, but SIDE BY SIDE at 3 cols
   (64rem–76rem) and stacked at 1 col. Flagged to the client. */
.sponsor-underwriting__card:nth-child(4n + 1),
.sponsor-underwriting__card:nth-child(4n) {
	background-color: var(--kd-color-blue);
}

.sponsor-underwriting__card:nth-child(4n + 2) {
	background-color: var(--kd-color-yellow);
}

.sponsor-underwriting__card:nth-child(4n + 3) {
	background-color: var(--kd-color-secondary); /* purple #746DB0 */
}

/* ── Kicker — "NAMING RIGHTS" ───────────────────────────────────────────────
   Inter Bold, not DynaPuff — see file header. Source markup is sentence
   case ("Naming rights") for editor readability; CSS renders the caps. */
.sponsor-underwriting__kicker {
	display: none; /* Figma: no kicker at all on the mobile frame (2086:94) —
		shown again at the 40rem desktop switch below */
	font-family: var(--kd-font-body);
	font-weight: var(--kd-fw-heading); /* 700 */
	font-size: 0.75rem; /* 12px */
	letter-spacing: 0.08em; /* 8% */
	text-transform: uppercase;
	color: var(
		--kd-color-contrast
	); /* navy — EVERY card, VID included (gate
		round 1, item 2). D28 calls for a yellow kicker on the VID card;
		round 1 tried that (--kd-color-yellow) and the design-diff measured
		it at 2.47–2.51:1 against the gradient's own top-stop pixel colour
		at the kicker's rendered position — fails WCAG AA (needs 4.5:1) by
		a wide margin. Measured alternatives at that same position: navy
		4.999:1 (passes), white 3.30:1 (also fails, and is why D28 ruled
		white out in the first place). D28 also specifies a plain text
		kicker, not a chip, so a navy PILL/chip treatment is out too — navy
		TEXT is the only measured option that both passes AA and matches
		D28's "plain text kicker" spec. No override needed: this base rule
		already IS navy, so the fix is deleting the highlight override that
		used to sit here, not adding a new one. */
	margin: 0;
}

/* ── Title + price — navy DynaPuff, white 2px contour, every card ────────── */
.sponsor-underwriting__title,
.sponsor-underwriting__price {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	color: var(--kd-color-contrast);
	letter-spacing: var(--dfd-track-heading);
	-webkit-text-stroke: 0.125rem var(--kd-color-base);
	paint-order: stroke fill;
	line-height: var(--kd-lh-tight);
	margin: 0;
}

.sponsor-underwriting__title {
	font-size: 1.5rem; /* 24px — Figma-exact, both breakpoints */
}

.sponsor-underwriting__price {
	font-size: 1.25rem; /* 20px mobile (2086:99) */
}

/* Dark tiles (blue, purple): white kicker/title/price/prose, and the
   contour flips to navy (white fill + white stroke would blob). Yellow
   tiles keep the base navy fill + white contour above. */
.sponsor-underwriting__card:not(:nth-child(4n + 2))
	.sponsor-underwriting__title,
.sponsor-underwriting__card:not(:nth-child(4n + 2))
	.sponsor-underwriting__price {
	color: var(--kd-color-base);
	-webkit-text-stroke-color: var(--kd-color-contrast);
}

/* ── Prose ──────────────────────────────────────────────────────────────── */
.sponsor-underwriting__desc {
	font-family: var(--kd-font-body);
	font-size: 0.9375rem; /* 15px */
	line-height: 1.375rem; /* 22px, Figma-exact */
	color: var(
		--kd-color-contrast
	); /* navy, solid on the yellow tiles (2100:698) */
	margin: 0;
}

/* Declared after the base rules above on purpose: (0,3,0) wins anyway, but
   reading order then matches cascade order. */
.sponsor-underwriting__card:not(:nth-child(4n + 2))
	.sponsor-underwriting__kicker,
.sponsor-underwriting__card:not(:nth-child(4n + 2))
	.sponsor-underwriting__desc {
	color: var(--kd-color-base);
}

/* ── CTA — mobile: solid yellow pill button ("Underwrite this") ──────────── */
.sponsor-underwriting__btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: 1rem; /* 16px */
	letter-spacing: var(
		--dfd-track-btn
	); /* -2%, matches Figma's -0.32px @16px exactly */
	/* `color` is NOT set here — see the "Specificity fix" block below this
	   rule for why and where it actually lives. */
	background-color: var(--kd-color-yellow);
	padding: 0.75rem 1.25rem; /* 12px/20px, Figma-exact */
	border-radius: var(--kd-radius-pill);
	text-decoration: none;
	transition: background-color var(--kd-transition-fast); /* matches
		sponsor-presenting__cta's own transition on the same token */
	margin-top: auto; /* gate round 1, item 5 — pushes the CTA to the
		card's own bottom edge instead of sitting directly under a
		variable-length desc (the real packet prose runs much longer than
		Figma's placeholder sentences on some cards), so every CTA in a row
		lands on a common baseline regardless of copy length. Works because
		.sponsor-underwriting__card is a column flex item the GRID has
		already stretched to the row's own tallest card — same technique
		sponsor-presenting__cta uses for its own bottom-pinned mobile
		button. */
}

.sponsor-underwriting__btn:hover,
.sponsor-underwriting__btn:focus-visible {
	background-color: var(--kd-btn-bg-hover);
}

/* ── CTA — desktop: underlined text link ("Claim it +"), hidden on mobile ──
   Underlined BY DEFAULT, not just on hover/focus (gate round 1, item 7 —
   design-diff: the comp draws it underlined at rest; underline-only-on-
   hover was this file's own tier-card.css-style assumption, not what the
   comp shows, and left the link distinguished from the title by colour +
   position alone, a WCAG 1.4.1 miss). */
.sponsor-underwriting__link {
	display: none;
	margin-top: auto; /* same row-alignment purpose as .sponsor-underwriting__btn's own — see its comment */
	/* `color` is NOT set here either — same reason as `.sponsor-
	   underwriting__btn` above. */
}

/* ── Specificity fix (gate round 1, item 1) ─────────────────────────────────
 * global.css's shared prose-link rule
 * (".entry-content a:not(.wp-element-button):not([class*=\"kd-btn\"])")
 * carries specificity (0,3,1) — two classes plus its OWN `a` type
 * selector, each `:not()` argument counting at class weight. A single-
 * class selector here, (0,1,0), or even the 2-class highlight override
 * this file used to have, (0,2,0), both lose to it regardless of source
 * order, which is why the VID card's CTA rendered navy instead of white
 * and the mobile pill button's text rendered navy instead of black (both
 * silently, since --kd-color-link happens to equal --kd-color-contrast —
 * navy on navy looks identical to the OTHER six cards' correct colour,
 * which is what let it hide until the highlight card needed a DIFFERENT
 * colour). A first attempt escaped it by adding the `wp-element-button`
 * class the shared rule's own selector names — wrong, because that class
 * isn't inert: it's the exact hook theme.json's `styles.elements.button`
 * targets sitewide, so it also pulled the global yellow-pill BUTTON look
 * onto the desktop text link (background-color, radius, font — not just
 * the text colour this fix actually needed). Reverted in the PHP.
 *
 * The actual fix: a real, meaningful ancestor chain — section root + grid
 * + card (+ highlight modifier where relevant) + the CTA class itself —
 * naturally reaches FOUR classes, (0,4,0), which beats (0,3,1) outright on
 * class-count alone (the tuple compares ID, then class, then type digits
 * in that order; 4 > 3 wins immediately, regardless of the shared rule's
 * extra type-selector point). This is not a repeated-class specificity
 * hack: every segment names a real ancestor already present in the DOM,
 * so the selector also documents the structure. No `!important`, no ID,
 * no shared-file edit. */
.sponsor-underwriting
	.sponsor-underwriting__grid
	.sponsor-underwriting__card
	.sponsor-underwriting__btn {
	color: var(--kd-color-body); /* black */
}

/* Mobile/tablet pill on a YELLOW tile: a yellow pill would disappear into
   it, so it goes navy with white text there (16.5:1). Not drawn (the
   proposal is desktop only, where the CTA is a text link); derived. */
.sponsor-underwriting
	.sponsor-underwriting__grid
	.sponsor-underwriting__card:nth-child(4n + 2)
	.sponsor-underwriting__btn {
	color: var(--kd-color-base);
	background-color: var(--kd-color-contrast);
}

.sponsor-underwriting
	.sponsor-underwriting__grid
	.sponsor-underwriting__card:nth-child(4n + 2)
	.sponsor-underwriting__btn:hover,
.sponsor-underwriting
	.sponsor-underwriting__grid
	.sponsor-underwriting__card:nth-child(4n + 2)
	.sponsor-underwriting__btn:focus-visible {
	background-color: var(--dfd-color-purple-ink); /* white 6.16:1 */
}

/* ── Focus ring — two-tone on every tile (see file header). Was VID-only;
   since 10-14 the navy ring alone measures 2.6:1 on the Dark Blue tiles,
   so the white gap is what makes it visible there. ──────────────────────── */
.sponsor-underwriting__card .sponsor-underwriting__link:focus-visible,
.sponsor-underwriting__card .sponsor-underwriting__btn:focus-visible {
	outline: 2px solid var(--kd-color-contrast);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--kd-color-base);
}

/* ══════════════════════════════════════════════════════════════════════
   40rem (640px) — COLUMN COUNT ONLY. Gate round 1, item 6 split this from
   the anatomy switch below (moved to 64rem): 2 columns of what is still
   the mobile card anatomy (no kicker, pill button) is a real, intended
   state for the 640–1023px range, not a transitional glitch. ══════════ */
@media (min-width: 40rem) {
	.sponsor-underwriting__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sponsor-underwriting__lead {
		max-width: 43.75rem; /* 700px, Figma-exact desktop measure (2086:238).
			Gate round 2, item 3: this is a MEASURE constraint, not part of
			the anatomy switch below — it used to move with font-size/
			line-height to 64rem, leaving the lead unconstrained (full
			~866px column, ~110 characters/line) through the whole
			640–1023px 2-column range. font-size/line-height stay at 64rem
			(those genuinely are the anatomy's desktop type scale, same as
			price/kicker), only this property moved. */
	}
}

/* ══════════════════════════════════════════════════════════════════════
   64rem (1024px) — 3 columns AND the desktop/mobile anatomy switch
   (kicker + text-link CTA appear, pill button disappears). Gate round 1,
   item 6: this used to fire at 40rem alongside the column count — moved
   here because an 18px DynaPuff text link is ~21.6px tall and needs more
   surrounding width to read as a link-not-a-label than the 640–1023px
   "portrait tablet" range gives it; sponsor-presenting.css's own gate
   made the identical 640→1024 move for the identical reason (see that
   file's own header, "Gate round 2, item 1"). ═══════════════════════════ */
@media (min-width: 64rem) {
	.sponsor-underwriting__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.sponsor-underwriting__lead {
		font-size: 1.125rem; /* 18px desktop (2086:238) */
		line-height: var(--kd-lh-body); /* 26px */
	}

	.sponsor-underwriting__card {
		gap: 0.625rem; /* 10px, Figma-exact desktop (2086:239 "gap-[10px]") */
	}

	.sponsor-underwriting__price {
		font-size: 2rem; /* 32px, Figma-exact desktop (2086:244 text box
			90→128 = 38px tall / 1.2 line-height ≈ 32px) — bigger than the
			mobile 20px; the build brief's "price 20" describes the mobile
			frame, not desktop; flagged in the handoff. */
	}

	.sponsor-underwriting__kicker {
		display: block; /* Figma: no kicker at all on the mobile frame */
	}

	.sponsor-underwriting__btn {
		display: none;
	}

	.sponsor-underwriting__link {
		display: inline-flex;
		align-self: flex-start;
		font-family: var(--kd-font-heading);
		font-weight: var(--kd-fw-heading);
		font-size: 1.125rem; /* 18px, Figma-exact desktop (2086:246) — the
			build brief's "Inter Bold 14" describes the kicker's font
			family, not this link; get_design_context + the screenshot both
			show this CTA in the same DynaPuff family as the title/price,
			at 18px. Flagged in the handoff. */
		letter-spacing: var(
			--dfd-track-heading
		); /* 3%, matches Figma's 0.54px @18px */
		/* `color` is NOT set here — see the "Specificity fix" block
		   earlier in this file; the actual navy/white declarations for
		   this element live there, at the specificity needed to beat a
		   shared global.css rule. */
		text-decoration: underline; /* gate round 1, item 7 — see this
			property's file-header note above */
		gap: 0.25rem;
	}

	.sponsor-underwriting
		.sponsor-underwriting__grid
		.sponsor-underwriting__card
		.sponsor-underwriting__link {
		color: var(
			--kd-color-contrast
		); /* navy — six flat cards. See the
			"Specificity fix" block for why this 4-class chain, not a plain
			`.sponsor-underwriting__link` rule. */
	}

	/* White on the dark tiles (blue, purple). (0,5,0): one class heavier
	   than the navy rule above, so it wins whatever the source order. */
	.sponsor-underwriting
		.sponsor-underwriting__grid
		.sponsor-underwriting__card:not(:nth-child(4n + 2))
		.sponsor-underwriting__link {
		color: var(--kd-color-base);
	}

	/* Hover/focus: the link keeps its colour on every tile and the
	   underline thickens instead (2026-10-14). The old purple hover
	   (--kd-btn-link-accent) would vanish on a purple tile and fail on
	   blue; a non-colour cue works on all three. Same 3px weight as
	   global.css's own underlined button-links. Keyboard focus also gets
	   the two-tone ring above. */
	.sponsor-underwriting
		.sponsor-underwriting__grid
		.sponsor-underwriting__card
		.sponsor-underwriting__link:hover,
	.sponsor-underwriting
		.sponsor-underwriting__grid
		.sponsor-underwriting__card
		.sponsor-underwriting__link:focus-visible {
		text-decoration-thickness: 3px;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   76rem (1216px VIEWPORT) — 4 columns. Gate round 1, item 8 correction:
   this is a VIEWPORT-width media query, not a statement that the grid
   itself is 1216px wide there — --kd-edge-pad's own max() means the
   container only reaches the composition's full 1216px (and the card its
   Figma-exact 289px) once the viewport itself reaches ~1435px (solving
   --kd-edge-pad's two branches for equality: (v−1216)/2 = 7.64vw ⇒ v ≈
   1435). Below that, up to a much narrower true floor, cards are
   proportionally narrower than 289px (e.g. ~242px at a 1216px viewport) —
   this is expected fluid behaviour, not a bug, and the column-count switch
   correctly stays at 76rem regardless (it is about how many cards fit per
   row, not about hitting an exact card width). ═══════════════════════ */
@media (min-width: 76rem) {
	.sponsor-underwriting__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.sponsor-underwriting__heading {
		font-size: var(
			--dfd-size-h2-section
		); /* clamp ceiling 50px,
			Figma-exact desktop (2086:237) */
	}
}

/* ── Section gap: adjacent full-bleed bands touch ───────────────────────────
 * The sitewide owl (`.entry-content > * + *`, --kd-section-gap) applies a
 * 120px margin between every pair of sections "regardless of whether the
 * adjacent section is plain or banded" (global.css). On /sponsors/ every
 * section IS a full-bleed band, so that margin renders as a strip of the
 * lavender page background between two coloured bands — Alain, 2026-09-16:
 * "on top of the Our sponsor section, there's a left over pale purple
 * section". The compositions (2085:2 / 2086:2) show the bands touching.
 * Each band already carries its own --dfd-section-pad top and bottom, so
 * that padding is the rhythm; the external margin only adds the strip.
 * Selector shape + mechanism copied from info-band.css's own gap override
 * (3 classes beats the owl's 1 — no !important). */
.entry-content > .kd-section.sponsor-underwriting {
	margin-block-start: 0;
}