.pfg-child__intro {
	margin: 0 0 18px;
	max-width: 68ch;
	color: var(--text-2, #C6CBDD);
	line-height: 1.6;
}

.pfg-child__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.pfg-child__table {
	width: 100%;
	border-collapse: collapse;
	font-size: clamp(13px, 0.82vw, 15px);
}

.pfg-child__table caption {
	text-align: left;
	padding-bottom: 10px;
	color: var(--text-3, #979CAD);
}

.pfg-child__table th,
.pfg-child__table td {
	padding: 9px 12px;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--grid-line, #2A3040);
	white-space: nowrap;
}

.pfg-child__table thead th {
	color: var(--text-3, #979CAD);
	font-weight: 600;
}

.pfg-child__table tbody th {
	font-weight: 500;
	color: var(--text-1, #F2F3F8);
}

.pfg-child__group {
	margin: 0 0 28px;
}

.pfg-child__rule {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--grid-line, #2A3040);
}

.pfg-child__rule h3 {
	margin: 0 0 4px;
	font-size: clamp(15px, 0.95vw, 17px);
}

.pfg-child__scope {
	font-size: clamp(12px, 0.72vw, 13px);
	color: var(--text-3, #979CAD);
}

/* Overflow disclosure for a long product catalogue.
   The rows are a SECOND table inside <details> rather than hidden <tr>s,
   because a <details> may not wrap table rows. Styled to read as a continuation
   of the table above it, not as a separate component. */
.pfg-child__more-sizes {
	margin-top: calc(var(--pfg-space-2, 8px) * -1);
}

.pfg-child__more-sizes > summary {
	cursor: pointer;
	padding: 10px 2px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--acc-bright, #C1BDFF);
	/* A real focus ring: the summary is the only control on this page. */
	border-radius: 6px;
}

.pfg-child__more-sizes > summary:focus-visible {
	outline: 2px solid var(--acc-bright, #C1BDFF);
	outline-offset: 2px;
}

.pfg-child__more-sizes[open] > summary {
	margin-bottom: var(--pfg-space-2, 8px);
}

/* ==========================================================================
   /discount-code/: the hero group (owner, 2026-09-17)

   The top of the page was a single left-hugging column: h1, standfirst and a
   560px ticket per code inside a 1180px container, with the firm's logo, name
   and grade repeated on every ticket, and the code itself below the first
   screen on a phone. It is now one grid:

     phone / tablet     title, codes panel, standfirst, firm strip (DOM order)
     900px and up       title, standfirst and firm strip centred vertically on
                        the left; the codes panel on the right

   Design rules held: flat surface-1 panel, white hairline, hero radius, no
   shadow, no wash. Accent only on the price, the coupon, the active code pill,
   the grade seal and the market dot. Hover brightens a hairline, nothing moves.
   ========================================================================== */

.pfg-child--discount-code {
	/* The hubs' reading column, computed once here (the registered <length>
	   in the theme resolves 75ch against this wrapper's body font) and
	   centred with an explicit inset so every prose block shares one left
	   edge. The hero keeps the full container, as a product panel does on a
	   hub; the editorial and the More-on nav read in the column. */
	--pfg-document-col: var(--wp--custom--layout--document-max, 75ch);
	--pfg-col-margin: calc((100% - min(var(--pfg-document-col), 100%)) / 2);
}

.pfg-child--discount-code > .pfg-child__editorial,
.pfg-child--discount-code > .pfg-child__more {
	max-width: var(--pfg-document-col);
	margin-inline: 0;
}

/* The prose centres only once the hero has two columns beside it. Below 900px
   the column is nearly the container's width, so centring it moved its edge
   32px right of the breadcrumb and the hero at 768 (#337): a third left edge
   that read as a mistake rather than a measure. */
@media (min-width: 900px) {
	.pfg-child--discount-code > .pfg-child__editorial,
	.pfg-child--discount-code > .pfg-child__more {
		margin-inline: var(--pfg-col-margin);
	}
}

.pfg-dc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"title"
		"panel"
		"intro"
		"firm";
	gap: 16px;
	/* Single column below 900px: one 600px measure rather than a 728px coupon
	   stretched across a tablet. On a phone this is simply full width.
	   LEFT, NOT CENTRED (#337): centred, the title started 64px right of the
	   breadcrumb at 768 (84 against 20), two left edges one line apart. At
	   900px and up the hero already starts on the breadcrumb's edge, so the
	   tablet now matches the desktop instead of inventing a third alignment. */
	max-width: 600px;
	margin: 0 0 clamp(32px, 4vw, 56px);
}

.pfg-dc > * {
	margin: 0;
	min-width: 0;
}

.pfg-dc__title {
	grid-area: title;
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-size: clamp(30px, 3vw, 46px);
	font-weight: 300;
	line-height: 1.08;
	text-wrap: balance;
	letter-spacing: -0.015em;
	color: var(--text-1, #F2F3F8);
	overflow-wrap: break-word;
}

.pfg-dc__intro {
	grid-area: intro;
}

.pfg-dc .pfg-child__last-checked {
	grid-area: intro;
	align-self: end;
}

/* ---- The codes panel ---- */

.pfg-dc__panel {
	grid-area: panel;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(16px, 1.7vw, 24px);
	background: var(--wp--preset--color--surface-1, #13151D);
	border: 1px solid var(--border-2, rgba(255, 255, 255, 0.07));
	border-radius: var(--wp--custom--radius--hero, 22px);
	transition: border-color 160ms ease;
}

.pfg-dc__panel:hover,
.pfg-dc__panel:has(:focus-visible) {
	border-color: var(--border-strong, rgba(255, 255, 255, 0.13));
}

.pfg-dc__panel > .pfg-disclosure {
	margin: 0;
	font-size: var(--wp--preset--font-size--ui-xs, 12px);
	line-height: 1.5;
	color: var(--text-3, #979CAD);
}

/* The shared ticket, flattened into the panel: no second border, no second
   radius, and its offer wrapper dissolved so the pieces can be ordered as one
   row set. Price, then the coupon, then what the code covers and its terms.
   The coupon is the card's only focusable element, so moving it up changes the
   visual order without putting focus out of step with anything. */
.pfg-dc .pfg-child__deal {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 6px;
	background: none;
	border: 0;
	border-radius: 0;
}

.pfg-dc .pfg-child__deal:hover,
.pfg-dc .pfg-child__deal:has(:focus-visible) {
	border-color: transparent;
}

.pfg-dc .pfg-ticket__offer {
	display: contents;
}

.pfg-dc .pfg-ticket__price,
.pfg-dc .pfg-ticket__pricenote--none {
	order: 1;
	flex: 1 0 100%;
	margin: 0;
}

.pfg-dc .pfg-ticket__pay {
	font-size: clamp(30px, 3.2vw, 46px);
}

.pfg-dc .pfg-ticket__stub {
	order: 2;
	flex: 1 0 100%;
	padding: 2px 0 4px;
	border: 0;
}

.pfg-dc .pfg-coupon {
	width: 100%;
	max-width: none;
	/* Beats the class rule's var(--pfg-coupon-h) without touching the shared
	   component: the pill is the page's primary control, so it is taller here. */
	height: 54px;
}

.pfg-dc .pfg-coupon__code {
	font-size: clamp(15px, 1.05vw, 18px);
	letter-spacing: 0.07em;
}

.pfg-dc .pfg-ticket__scope {
	order: 3;
	flex: 1 0 100%;
	font-size: var(--wp--preset--font-size--ui-sm, 13px);
	line-height: 1.45;
}

/* Terms read as small hairline chips that wrap: at four terms, one line each
   was 150px of panel between the price and the next thing. */
.pfg-dc .pfg-ticket__scope.pfg-ticket__term {
	order: 4;
	flex: 0 0 auto;
	padding: 3px 10px;
	border: 1px solid var(--border-2, rgba(255, 255, 255, 0.07));
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--ui-xs, 12px);
	line-height: 1.5;
	white-space: nowrap;
}

/* ---- The code chooser: radios, one card shown, no script ---- */

.pfg-dc__pick {
	display: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pfg-dc__picklabel {
	float: left;
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	font-size: var(--wp--preset--font-size--ui-sm, 13px);
	color: var(--text-3, #979CAD);
}

.pfg-dc__options {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Visually hidden, still focusable: arrow keys move the selection and the
   focus ring is drawn on the label beside it. */
.pfg-dc__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.pfg-dc__option {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	min-height: 40px;
	padding: 5px 13px;
	border: 1px solid var(--border-3, rgba(255, 255, 255, 0.10));
	border-radius: 14px;
	color: var(--text-2, #C6CBDD);
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease;
}

.pfg-dc__optcode {
	font-size: var(--wp--preset--font-size--ui-sm, 13px);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.pfg-dc__optmeta {
	font-size: 11.5px;
	line-height: 1.3;
}

.pfg-dc__option:hover {
	border-color: var(--border-strong, rgba(255, 255, 255, 0.13));
	color: var(--text-1, #F2F3F8);
}

.pfg-dc__radio:focus-visible + .pfg-dc__option {
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
}

/* The active pill: the review offer card's `.is-on`, the design's one filled
   pill. */
.pfg-dc__radio:checked + .pfg-dc__option {
	border-color: var(--acc, #A79FFF);
	background: var(--acc, #A79FFF);
	color: var(--on-acc, #14161F);
}

/* ONLY WHERE :has() WORKS does the chooser appear and the other cards hide.
   Without it every card stacks and the chooser stays hidden, which is the
   page as it was: nothing becomes unreachable. Six rules for six codes; the
   render emits no chooser above six. */
@supports selector(:has(*)) {
	.pfg-dc__pick {
		display: block;
	}

	.pfg-dc__cards--chosen > .pfg-child__deal {
		display: none;
	}

	.pfg-dc__panel:has(.pfg-dc__radio:nth-of-type(1):checked) .pfg-dc__cards--chosen > .pfg-child__deal:nth-child(1),
	.pfg-dc__panel:has(.pfg-dc__radio:nth-of-type(2):checked) .pfg-dc__cards--chosen > .pfg-child__deal:nth-child(2),
	.pfg-dc__panel:has(.pfg-dc__radio:nth-of-type(3):checked) .pfg-dc__cards--chosen > .pfg-child__deal:nth-child(3),
	.pfg-dc__panel:has(.pfg-dc__radio:nth-of-type(4):checked) .pfg-dc__cards--chosen > .pfg-child__deal:nth-child(4),
	.pfg-dc__panel:has(.pfg-dc__radio:nth-of-type(5):checked) .pfg-dc__cards--chosen > .pfg-child__deal:nth-child(5),
	.pfg-dc__panel:has(.pfg-dc__radio:nth-of-type(6):checked) .pfg-dc__cards--chosen > .pfg-child__deal:nth-child(6) {
		display: flex;
	}
}

.pfg-dc__cards {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* ---- The firm strip ---- */

.pfg-dc__firm {
	grid-area: firm;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--border-1, rgba(255, 255, 255, 0.06));
}

.pfg-dc__firmtext {
	flex: 1 1 auto;
	min-width: 0;
}

.pfg-dc__firmtext > p {
	margin: 0;
}

.pfg-dc__firmname {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-size: clamp(17px, 1.2vw, 20px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-1, #F2F3F8);
	overflow-wrap: break-word;
}

.pfg-dc__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 0;
	margin-top: 3px;
	font-size: var(--wp--preset--font-size--ui-sm, 13px);
	color: var(--text-3, #979CAD);
}

/* Middle-dot separators between the items that rendered, never a dangling one.
   The empty alternative text keeps the dot out of each link's accessible name
   ("· Full review"); browsers without the syntax keep the first declaration. */
.pfg-dc__links > * + *::before {
	content: "\00B7";
	content: "\00B7" / "";
	display: inline-block;
	padding: 0 8px;
	color: var(--text-4, #838A9D);
	text-decoration: none;
}

/* The market is a dot, as on the ticket's market line. The dot is drawn
   inside the word's box, so the separator rule above never lands on it. */
.pfg-dc__market {
	display: inline-flex;
	align-items: center;
}

.pfg-dc__market > span {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 999px;
	background: var(--acc, #A79FFF);
}

.pfg-dc__links a {
	color: var(--text-2, #C6CBDD);
	text-decoration: underline;
	text-decoration-color: var(--border-strong, rgba(255, 255, 255, 0.13));
	text-underline-offset: 3px;
	transition: text-decoration-color 150ms ease, color 150ms ease;
}

.pfg-dc__links a:hover {
	color: var(--text-1, #F2F3F8);
	text-decoration-color: currentColor;
}

.pfg-dc__grade {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex: 0 0 auto;
}

/*
 * The grade-status word under the strip's seal. Its own class, not the
 * ticket's: the no-code state has no card, and the suite proves that by the
 * absence of any `pfg-ticket` string, so borrowing the ticket's class name
 * here reads as a card rendered where none may be. Same values as
 * .pfg-ticket__gstatus in assets/css/ticket.css.
 */
.pfg-dc__gstatus {
	font-style: normal;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--text-3, #979CAD);
	white-space: nowrap;
}

/*
 * THE SEAL READS AS THE TOPLIST'S (#337). It was already 34px, the design's
 * largest mark, but stacked over a 9.5px status word at the far end of the
 * strip it drew as a small open arc under a caption: C+ at 1440 read as a
 * broken icon beside a 44px logo tile. The toplist's grade cell is the
 * reference the reader has already seen, so from 600px the strip uses its
 * arrangement: the same 34px mark with the status word beside it at the
 * toplist's 10.5px (.pfg-gbar__status). Below 600px the word stays under the
 * mark, where a 350px strip has no room for both beside the firm's links.
 */
@media (min-width: 600px) {
	.pfg-dc__grade {
		flex-direction: row;
		gap: 8px;
	}

	.pfg-dc__grade > .pfg-gring {
		flex: 0 0 34px;
	}
}

@media (min-width: 900px) {
	.pfg-dc {
		max-width: none;
		margin-inline: 0;
		grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
		/* The empty first and last rows share the panel's spare height, so the
		   left group sits on the panel's vertical centre. */
		grid-template-rows: 1fr auto auto auto 1fr;
		grid-template-areas:
			".     panel"
			"title panel"
			"intro panel"
			"firm  panel"
			".     panel";
		column-gap: clamp(40px, 6vw, 96px);
		row-gap: 20px;
	}

	.pfg-dc__firm {
		max-width: 520px;
	}

	/* No codes: nothing to put on the right, so the group reads in the
	   document column like the prose under it. */
	.pfg-dc--nocode {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"title"
			"intro"
			"firm";
		max-width: var(--pfg-document-col);
		margin-inline: var(--pfg-col-margin);
	}
}

/* ON A PHONE THE CHOOSER COSTS ONE ROW. Up to three codes share the row in
   equal columns and let their detail line wrap, instead of wrapping the pills
   onto a second row and pushing the coupon under the fold (Blue Guardian at
   320x640 put it at y=654). The legend stays for assistive technology; the
   pills say what they are. */
@media (max-width: 599px) {
	.pfg-dc__options--row {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.pfg-dc__options--row .pfg-dc__option {
		padding-inline: 10px;
	}

	.pfg-dc__picklabel {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* THE CODE IS NEVER THE PART THAT CLIPS on a phone. At 320px the shared pill
   ellipsised RETURNSDAY to "RETURNSD..." at this page's larger code size, so
   below 420px the code drops back to a tighter setting and the button gives up
   a little padding. Scoped here; the shared component is untouched. */
@media (max-width: 419px) {
	.pfg-dc .pfg-coupon__code {
		padding-left: 14px;
		font-size: 14.5px;
		letter-spacing: 0.03em;
	}

	.pfg-dc .pfg-coupon__btn {
		gap: 6px;
		padding-inline: 13px;
	}
}

@media (max-width: 360px) {
	.pfg-dc__panel {
		padding: 14px;
	}

	.pfg-dc .pfg-coupon__btn {
		padding-inline: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfg-dc__panel,
	.pfg-dc__option,
	.pfg-dc__links a {
		transition: none;
	}
}

/* The no-code state's dated finding (data#498): one muted sentence in the
   standfirst's measure, rendered only when a lapsed code carries a check date. */
.pfg-child__last-checked {
	margin: 0 0 18px;
	max-width: 68ch;
	color: var(--text-3, #979CAD);
	line-height: 1.6;
}

/* The editorial body, written in the pfg_firm_child post. House measure and
   rhythm; the prose inherits the theme's type like any article body. */
.pfg-child__editorial {
	max-width: 68ch;
	margin: 0 0 28px;
	color: var(--text-2, #C6CBDD);
	line-height: 1.6;
}

.pfg-child__editorial > * {
	margin-block-start: 0;
	margin-block-end: 1em;
}