/*
 * Braced — shared components. Owned by the foundation; README.md documents each one.
 *
 *   1. Home photo hero ............ .braced-hero (braced/hero; the home page's afp/hero)
 *   2. Page header ................ .braced-head--section / --detail (braced/page-header)
 *   3. Directory entrance ......... .braced-entrance--band / --compact (braced/find-a-pro)
 *   4. Product pick card / row .... afp-core's .afp-pick, .afp-grid__card, .afp-top-pick, …
 *   5. Guide card ................. .braced-guide-card (braced/guide-cards, braced/guide-card)
 *   6. Problem card ............... .braced-problem-card (and the pages' .afp-problem-tile)
 *   7. FAQ accordion .............. afp/faq, core/details
 *   8. Notice (alert / recall) .... .braced-notice, group style "notice", afp/callout styles
 */

/* ============ 1. Home photo hero ============ */
.braced-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: clamp(540px, 46vw, 680px);
	margin-block: 0;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-navy);
}
.braced-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.braced-hero__img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}
/* Scrim: at least 82% navy under the text column, so white text passes AA on any photo. */
.braced-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(11 34 64 / 0.9) 0%, rgb(11 34 64 / 0.84) 38%, rgb(11 34 64 / 0.5) 62%, rgb(11 34 64 / 0.08) 100%);
}
.braced-hero__inner {
	align-self: end;
	box-sizing: border-box;
	width: 100%;
	padding: var(--braced-band) var(--braced-edge);
}
.braced-hero__text {
	max-width: 36rem;
}
.braced-hero__text > * {
	margin: 0;
}
.braced-hero__title {
	color: var(--wp--preset--color--on-navy);
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
}
.braced-hero__lead {
	margin-block-start: var(--wp--preset--spacing--50) !important;
	color: var(--wp--preset--color--on-navy);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.braced-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: var(--wp--preset--spacing--60) !important;
}
@media (max-width: 781px) {
	.braced-hero {
		min-height: 560px;
	}
	.braced-hero::before {
		background: linear-gradient(0deg, rgb(11 34 64 / 0.94) 0%, rgb(11 34 64 / 0.86) 52%, rgb(11 34 64 / 0.3) 82%, rgb(11 34 64 / 0.1) 100%);
	}
	.braced-hero__inner {
		padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
	.braced-hero__actions .braced-btn {
		flex: 1 1 100%;
	}
}

/* ============ 2. Page header ============ */
.braced-head {
	margin-block: 0;
}
.braced-head__text > * {
	margin-block: 0;
}
.braced-head__title {
	margin: 0;
}
.braced-head__lead > *,
.braced-head__lead .afp-term-content > * {
	margin-block: 0;
}
.braced-head__lead > * + *,
.braced-head__lead .afp-term-content > * + * {
	margin-block-start: 0.75em;
}
.braced-head .afp-head-meta p {
	margin: 0;
}

/* Section band: navy, text on the container's left edge, the photo at 3:2 to the right edge. */
.braced-head--section {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-navy);
}
.braced-head--section .braced-head__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	min-height: clamp(306px, 26vw, 400px);
	padding-inline-start: var(--braced-edge);
}
.braced-head--section .braced-head__text {
	align-self: center;
	padding-block: var(--wp--preset--spacing--70);
	padding-inline-end: var(--wp--preset--spacing--70);
}
.braced-head--section .braced-head__text > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
.braced-head--section .afp-crumbs {
	margin-block-end: var(--wp--preset--spacing--50);
}
.braced-head--section .afp-crumbs :is(a, .afp-crumbs__sep, span) {
	color: var(--wp--preset--color--on-navy-2);
}
.braced-head--section .afp-crumbs a:hover,
.braced-head--section .afp-crumbs [aria-current="page"] {
	color: var(--wp--preset--color--on-navy);
}
.braced-head--section .braced-head__title {
	color: var(--wp--preset--color--on-navy);
	font-size: clamp(2.125rem, 1.35rem + 2.7vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.04;
}
.braced-head--section .braced-head__lead {
	max-width: 38rem;
	color: var(--wp--preset--color--on-navy-2);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.braced-head--section .braced-head__lead * {
	color: inherit;
}
.braced-head--section :is(.braced-head__lead, .braced-head__meta) a {
	color: var(--wp--preset--color--on-navy);
}
.braced-head--section .braced-head__meta {
	color: var(--wp--preset--color--on-navy-2);
	font-size: var(--wp--preset--font-size--x-small);
}
.braced-head--section :focus-visible {
	outline-color: var(--wp--preset--color--signal);
}
.braced-head--section .braced-head__media {
	position: relative;
	margin: 0;
	background: var(--wp--preset--color--navy-2);
}
.braced-head--section .braced-head__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}
/* No photo: a blueprint grid and the category's drawing (or the house motif) in light lines. */
.braced-head__art {
	--wp--preset--color--base-2: transparent;
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: var(--wp--preset--color--on-navy-2);
	background-color: var(--wp--preset--color--navy-2);
	background-image:
		linear-gradient(var(--wp--preset--color--navy-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--preset--color--navy-line) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: -1px -1px;
}
.braced-head__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--navy) 0%, transparent 38%);
}
/* With the drawing (no photo) the blueprint reaches further left, under the end of the text,
   and fades in from the navy; the drawing stays centred in the right-hand column. */
@media (min-width: 782px) {
	.braced-head--section .braced-head__inner:has(> .braced-head__art) {
		position: relative;
	}
	.braced-head--section .braced-head__inner:has(> .braced-head__art) > .braced-head__text {
		position: relative;
		z-index: 1;
	}
	.braced-head--section .braced-head__art {
		position: absolute;
		inset: 0 0 0 auto;
		width: 64%;
		grid-template-columns: minmax(0, 18fr) minmax(0, 46fr);
	}
	.braced-head--section .braced-head__art svg {
		grid-column: 2;
	}
	.braced-head--section .braced-head__art::after {
		background: linear-gradient(90deg, var(--wp--preset--color--navy) 0%, transparent 40%);
	}
}
.braced-head__art svg {
	position: relative;
	z-index: 1;
	width: min(78%, 420px);
	height: auto;
	opacity: 0.7;
	stroke-width: 1.4;
}
/* The drawings' thin detail lines (stroke-width 1.6 and 2 in the files, against 2.5 for the
   outlines) stay thinner than the outlines at header size. */
.braced-head__art svg [stroke-width="1.6"] {
	stroke-width: 1;
}
.braced-head__art svg [stroke-width="2"] {
	stroke-width: 1.2;
}
/* On a phone every section header is the same: breadcrumb, title, lead (then the search strip
   where the page has one), on the navy, with no picture. One order on every section page, and
   the page's own content (products, the list, the search) comes up first (rule 5, rule 10). */
@media (max-width: 781px) {
	.braced-head--section .braced-head__inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		padding-inline-start: 0;
	}
	.braced-head--section :is(.braced-head__media, .braced-head__art) {
		display: none;
	}
	.braced-head--section .braced-head__text {
		padding: var(--wp--preset--spacing--50) var(--braced-gutter) var(--wp--preset--spacing--60);
	}
	.braced-head--section .afp-crumbs {
		margin-block-end: var(--wp--preset--spacing--40);
	}
}

/* The strip under a section band (the directory search): the same navy, a hairline between,
   the content on the container. The band above keeps its one height and picture shape. */
.braced-head__strip {
	border-top: 1px solid var(--wp--preset--color--navy-line);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-navy);
}
.braced-head__strip-inner {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50) var(--braced-edge) var(--wp--preset--spacing--50);
}
.braced-head__strip .braced-entrance--in-head {
	margin: 0 !important;
}
.braced-head__strip .braced-entrance__inner {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: 8px var(--wp--preset--spacing--60);
	align-items: end;
	max-width: var(--braced-container);
}
.braced-head__strip .braced-entrance__inner > * {
	margin: 0 !important;
}
.braced-head__strip .braced-entrance__intro {
	align-self: center;
}
.braced-head__strip :is(.braced-entrance__form, .braced-entrance__note, .braced-entrance__message, .braced-entrance__more) {
	grid-column: 2;
}
/* One row on a wide screen: the job (wide enough for the longest name), the place, Find. */
.braced-head__strip .braced-entrance__form {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
	grid-template-areas: "service q button";
}
@media (max-width: 1023px) {
	.braced-head__strip .braced-entrance__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.braced-head__strip :is(.braced-entrance__form, .braced-entrance__note, .braced-entrance__message, .braced-entrance__more) {
		grid-column: 1;
	}
	.braced-head__strip .braced-entrance__form {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "service service" "q button";
	}
}
@media (max-width: 781px) {
	.braced-head__strip {
		border-top: 0;
	}
	.braced-head__strip-inner {
		padding-block: 0 var(--wp--preset--spacing--60);
	}
}

/* Detail header: compact, on the tint; guides add their picture at 3:2. */
.braced-head--detail + .braced-body {
	padding-block-start: var(--wp--preset--spacing--60);
}
.braced-head--detail {
	background: var(--wp--preset--color--base-3);
}
.braced-head--detail .braced-head__inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	align-items: center;
	max-width: calc(var(--braced-container) + 2 * var(--braced-gutter));
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--braced-gutter) var(--wp--preset--spacing--70);
}
.braced-head--detail.has-photo .braced-head__inner {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.braced-head--detail .braced-head__text > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
.braced-head--detail .afp-crumbs {
	margin-block-end: var(--wp--preset--spacing--50);
}
.braced-head--detail .braced-head__kicker {
	margin-block-start: 0 !important;
}
.braced-head--detail .braced-head__kicker + .braced-head__title {
	margin-block-start: var(--wp--preset--spacing--20);
}
.braced-head__kicker .afp-kicker {
	margin: 0;
	letter-spacing: 0;
	text-transform: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
}
.braced-head__kicker .afp-kicker a {
	text-decoration: none;
}
.braced-head--detail .braced-head__title {
	max-width: 22em;
	font-size: var(--wp--preset--font-size--xx-large);
}
.braced-head--detail .braced-head__lead {
	max-width: 40rem;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.braced-head--detail .braced-head__meta {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}
.braced-head--detail .braced-head__meta .afp-head-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}
.braced-head--detail .braced-head__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--photo);
	background: var(--wp--custom--image--placeholder);
}
.braced-head--detail .braced-head__img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}
@media (max-width: 781px) {
	.braced-head--detail.has-photo .braced-head__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.braced-head--detail .braced-head__media {
		order: 2;
	}
}

/* ============ 3. Directory entrance ============ */
.braced-entrance {
	margin-block: 0;
	color: var(--wp--preset--color--on-navy);
}
.braced-entrance :focus-visible {
	outline-color: var(--wp--preset--color--signal);
}
.braced-entrance__inner > * {
	margin: 0;
}
.braced-entrance__title {
	margin: 0;
	color: var(--wp--preset--color--on-navy);
}
.braced-entrance__lead {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--on-navy-2);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}
/* The job on its own row, at the form's full width, so no service name is ever cut; the place
   and the button share the second row. One column on a phone. */
.braced-entrance__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "service service" "q button";
	gap: 12px;
	align-items: end;
	margin: 0;
}
.braced-entrance .braced-field--service {
	grid-area: service;
}
.braced-entrance .braced-field--q {
	grid-area: q;
}
.braced-entrance__form > .braced-btn {
	grid-area: button;
}
.braced-entrance .braced-field select {
	text-overflow: clip;
}
.braced-entrance__note {
	color: var(--wp--preset--color--on-navy-2);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
}
.braced-entrance__inner > .braced-entrance__note {
	margin-block-start: 10px !important;
}
.braced-entrance .braced-field label {
	color: var(--wp--preset--color--on-navy);
}
.braced-entrance .braced-field :is(input, select) {
	border-color: var(--wp--preset--color--on-navy);
}
.braced-entrance .braced-btn {
	min-width: 8.5rem;
}
.braced-entrance__message {
	padding: 12px 16px;
	border-inline-start: 3px solid var(--wp--preset--color--signal);
	background: var(--wp--preset--color--navy-2);
	color: var(--wp--preset--color--on-navy);
	font-size: var(--wp--preset--font-size--small);
}
.braced-entrance__message a,
.braced-entrance__more a {
	color: var(--wp--preset--color--on-navy);
}
.braced-entrance__more a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 650;
	text-decoration: none;
}
.braced-entrance__more a:hover {
	text-decoration: underline;
}

/* Band: full width wherever it is placed (painted with an outset shadow, so no sideways scroll). */
.braced-entrance--band {
	box-sizing: border-box;
	padding-block: var(--braced-band);
	background: var(--wp--preset--color--navy);
	/* Painted out to both edges of the window as ink overflow: no layout width, no scroll. */
	border-image: conic-gradient(var(--wp--preset--color--navy) 0 0) fill 0 / / 0 100vw;
}
.braced-entrance--band .braced-entrance__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	align-items: end;
	max-width: var(--braced-container);
	margin-inline: auto;
}
.braced-entrance--band .braced-entrance__title {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.1;
}
.braced-entrance--band .braced-entrance__intro {
	grid-row: 1 / span 2;
	align-self: start;
}
.braced-entrance--band :is(.braced-entrance__form, .braced-entrance__note, .braced-entrance__message, .braced-entrance__more) {
	grid-column: 2;
}
.braced-entrance--band .braced-entrance__note {
	margin-block-start: -12px !important;
}

/* Compact: the same navy, as a card. */
.braced-entrance--compact {
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--navy);
}
.braced-entrance--compact .braced-entrance__inner > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}
.braced-entrance--compact .braced-entrance__title {
	font-size: var(--wp--preset--font-size--x-large);
}
/* Under a section header (directory pages, in the header's strip): no card. */
.braced-entrance--in-head {
	padding: 0;
	border-radius: 0;
	background: none;
}
.braced-entrance--in-head .braced-entrance__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0;
}
.braced-entrance--in-head .braced-entrance__inner > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
@media (max-width: 960px) {
	.braced-entrance--band .braced-entrance__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.braced-entrance--band .braced-entrance__intro {
		grid-row: auto;
	}
	.braced-entrance--band :is(.braced-entrance__form, .braced-entrance__note, .braced-entrance__message, .braced-entrance__more) {
		grid-column: 1;
	}
}
@media (max-width: 600px) {
	.braced-entrance__form,
	.braced-head__strip .braced-entrance__form {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "service" "q" "button";
	}
	.braced-entrance .braced-btn {
		width: 100%;
	}
	.braced-entrance--compact:not(.braced-entrance--in-head) {
		padding: var(--wp--preset--spacing--50);
	}
}

/* ============ 4. Product pick card and pick row ============
 * Products are the one boxed, lifted object on the site: white, a hairline, the card shadow,
 * the picture on its matte, name, the one-line reason, the price (or "Check price") and one
 * primary button. afp-core prints the markup; these rules make every product surface the same
 * object. On a tint band the white card stands out on its own; on white the shadow lifts it.
 */
:is(.afp-cardrow--cards .afp-pick, .afp-grid__card, .afp-related__pcard, .afp-inline--product, .afp-top-pick),
.afp-cardrow--list .afp-cardrow__items {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--wp--preset--shadow--card);
}
:is(.afp-cardrow--cards .afp-pick, .afp-grid__card, .afp-related__pcard) {
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
:is(.afp-cardrow--cards .afp-pick, .afp-grid__card, .afp-related__pcard):hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--line) 50%, var(--wp--preset--color--contrast-2));
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-2px);
}
/* Names in the display face; the reason line in ink 2. */
:is(.afp-pick__name, .afp-grid__name, .afp-related__pname) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: -0.01em;
}
/* Pick labels ("Best overall") as blue text, not a filled tag. */
.afp-badge {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: none !important;
}
.afp-cardrow--cards .afp-pick:not(.is-text) .afp-pick__body > .afp-badge {
	position: static;
}
/* Ranks: plain numerals in the display face, not circles. */
.afp-pick__rank {
	width: auto;
	height: auto;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
}
/* Prices: tabular numerals, the strongest text in the card. */
:is(.afp-buy__price, .afp-price) {
	font-variant-numeric: tabular-nums;
}
/* Product pictures sit on the matte, never cropped. */
.afp-img--drawing,
.afp-img {
	background-color: var(--wp--custom--image--matte);
}

/* ============ 5. Guide card ============
 * Unboxed and photo-led, so a row of guides never reads as more products: the picture at 3:2
 * (or the navy fallback at the same shape), a kicker, the title; the whole card is one link.
 */
:is(.braced-guide-cards, .braced-guide-grid) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}
.braced-guide-cards.is-four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.braced-guide-grid > li {
	margin: 0;
}
.braced-guide-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}
.braced-guide-card > * {
	margin: 0;
}
.braced-guide-card__media {
	order: -1;
	margin-block-end: 8px !important;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--photo);
	background: var(--wp--custom--image--placeholder);
}
.braced-guide-card__img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.braced-guide-card:hover .braced-guide-card__img {
	transform: scale(1.03);
}
.braced-guide-card__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--navy);
	background-image:
		linear-gradient(var(--wp--preset--color--navy-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--preset--color--navy-line) 1px, transparent 1px);
	background-size: 28px 28px;
}
.braced-guide-card__mark {
	width: 22%;
	height: auto;
	fill: var(--wp--preset--color--signal);
}
.braced-guide-card__kicker {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}
.braced-guide-card__title {
	font-size: var(--wp--preset--font-size--large) !important;
	line-height: 1.25;
}
.braced-guide-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.braced-guide-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.braced-guide-card:hover .braced-guide-card__title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
.braced-guide-card:focus-within {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 6px;
	border-radius: 2px;
}
.braced-guide-card__title a:focus-visible {
	outline: 0;
}
/* The product drawing on the blueprint ground (a guide without a picture). */
.braced-guide-card__fallback.has-drawing {
	--wp--preset--color--base-2: transparent;
	color: var(--wp--preset--color--on-navy-2);
}
.braced-guide-card__fallback.has-drawing svg {
	width: 52%;
	height: auto;
	opacity: 0.85;
}
/* Narrower screens: two across only when the count is even, so a row never ends on an orphan;
   an odd count stays three across down to 700px, then one column. */
@media (max-width: 1023px) {
	:is(.braced-guide-cards, .braced-guide-grid),
	.braced-guide-cards.is-four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.braced-guide-cards:has(> :last-child:nth-child(odd)),
	.braced-guide-grid:has(> :last-child:nth-child(odd)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 699px) {
	.braced-guide-cards:has(> :last-child:nth-child(odd)),
	.braced-guide-grid:has(> :last-child:nth-child(odd)) {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 600px) {
	:is(.braced-guide-cards, .braced-guide-grid),
	.braced-guide-cards.is-four {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Guides as a typographic list (fewer than two in three have a picture): kicker, title, the
   one-line summary, between hairlines. Same columns rule as the cards. */
.braced-guide-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}
.braced-guide-list--1 {
	grid-template-columns: minmax(0, 1fr);
}
.braced-guide-list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.braced-guide-list__item {
	position: relative;
	margin: 0;
	padding-block: 18px 22px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.braced-guide-list__item > * {
	margin: 0;
}
.braced-guide-list__item > * + * {
	margin-block-start: 6px;
}
.braced-guide-list__kicker {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}
.braced-guide-list__title {
	font-size: var(--wp--preset--font-size--large) !important;
	line-height: 1.25;
}
.braced-guide-list__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.braced-guide-list__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.braced-guide-list__item:hover .braced-guide-list__title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
.braced-guide-list__item:focus-within {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}
.braced-guide-list__title a:focus-visible {
	outline: 0;
}
.braced-guide-list__summary {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
@media (max-width: 1023px) {
	.braced-guide-list {
		grid-template-columns: minmax(0, 1fr);
	}
	.braced-guide-list--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.braced-guide-list--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============ 6. Problem card ============
 * A picture (4:3) with the problem's name over its foot on a scrim; the whole picture links.
 * Markup (core blocks): group.braced-problem-card > image (4:3) + h3 > a. The pages' existing
 * .afp-problem-tile groups get the same treatment; anything after the title flows below.
 */
:is(.braced-problem-card, .afp-problem-tile) {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 0;
}
:is(.braced-problem-card, .afp-problem-tile) > * {
	margin: 0;
}
:is(.braced-problem-card, .afp-problem-tile) > .wp-block-image {
	grid-area: 1 / 1;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--photo);
	background: var(--wp--custom--image--placeholder);
}
:is(.braced-problem-card, .afp-problem-tile) > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.3s ease;
}
:is(.braced-problem-card, .afp-problem-tile) > .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(11 34 64 / 0.88) 0%, rgb(11 34 64 / 0.55) 34%, rgb(11 34 64 / 0) 62%);
}
:is(.braced-problem-card, .afp-problem-tile):hover > .wp-block-image img {
	transform: scale(1.03);
}
:is(.braced-problem-card, .afp-problem-tile) > :is(h2, h3) {
	grid-area: 1 / 1;
	align-self: end;
	z-index: 1;
	padding: 20px 22px;
	color: var(--wp--preset--color--on-navy);
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.1;
}
:is(.braced-problem-card, .afp-problem-tile) > :is(h2, h3) a {
	color: var(--wp--preset--color--on-navy);
	text-decoration: none;
}
:is(.braced-problem-card, .afp-problem-tile) > :is(h2, h3) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
:is(.braced-problem-card, .afp-problem-tile) > :is(h2, h3) a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
:is(.braced-problem-card, .afp-problem-tile) > :is(h2, h3) a:focus-visible {
	outline: 0;
}
:is(.braced-problem-card, .afp-problem-tile):focus-within > .wp-block-image {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
:is(.braced-problem-card, .afp-problem-tile) > p {
	position: relative;
	z-index: 2;
	margin-block-start: 10px;
	color: var(--wp--preset--color--contrast-2);
}

/* ============ 7. FAQ accordion ============ */
.afp-faq {
	max-width: none;
}
.afp-faq__heading {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.08;
}
.afp-faq__list {
	border-top: 1px solid var(--wp--preset--color--line);
}
:is(.afp-faq__item, .wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile)) {
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile):first-of-type {
	border-top: 1px solid var(--wp--preset--color--line);
}
.wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile) + .wp-block-details {
	margin-block-start: 0;
}
:is(.afp-faq__q, .wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile) > summary) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
	padding: 16px 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}
:is(.afp-faq__q, .wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile) > summary)::-webkit-details-marker {
	display: none;
}
:is(.afp-faq__q, .wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile) > summary):hover {
	color: var(--wp--preset--color--accent);
}
.wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile) > summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1;
}
.wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile)[open] > summary::after {
	content: "−";
}
.afp-faq__icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--accent);
}
.afp-faq__item[open] .afp-faq__icon-v {
	display: none;
}
:is(.afp-faq__a, .wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile) > :not(summary)) {
	max-width: var(--braced-measure);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--custom--prose--size);
	line-height: var(--wp--custom--prose--leading);
}
.afp-faq__a {
	padding-block-end: 24px;
}
.afp-faq__a > :first-child {
	margin-block-start: 0;
}
.wp-block-details:not(.braced-menu, .braced-credits, .afp-nav-mobile) > :last-child:not(summary) {
	padding-block-end: 24px;
}

/* ============ 8. Notice: alert and recall ============
 * Storm orange is for real alerts only (rule 3), and a recall shows only on the page of the
 * product or job it concerns (rule 8). Use a core/group with style "Notice (alert)" (or class
 * .braced-notice); a leading <strong> ("Safety:") is the label, inline at the start of the
 * sentence; or afp/callout style Alert/Safety.
 */
:is(.braced-notice, .is-style-notice, .wp-block-afp-callout.is-style-safety, .wp-block-afp-callout.is-style-alert) {
	position: relative;
	margin-block: var(--wp--preset--spacing--50);
	padding: 18px 22px 18px 56px;
	border: 0;
	border-inline-start: 4px solid var(--wp--preset--color--alert);
	border-radius: 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0;
	background: var(--wp--preset--color--alert-soft);
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
}
:is(.braced-notice, .is-style-notice, .wp-block-afp-callout.is-style-safety, .wp-block-afp-callout.is-style-alert)::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 20px;
	width: 22px;
	height: 22px;
	background-color: var(--wp--preset--color--alert);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.braced-notice, .is-style-notice, .wp-block-afp-callout.is-style-safety, .wp-block-afp-callout.is-style-alert) > * {
	margin-block: 0;
}
:is(.braced-notice, .is-style-notice, .wp-block-afp-callout.is-style-safety, .wp-block-afp-callout.is-style-alert) > * + * {
	margin-block-start: 8px;
}
/* The label ("Safety:", "Recall:") runs inline at the start of its sentence, so the sentence
   reads on from it; storm orange marks it. */
:is(.braced-notice, .is-style-notice, .wp-block-afp-callout.is-style-safety, .wp-block-afp-callout.is-style-alert) p > strong:first-child {
	display: inline;
	margin: 0;
	color: var(--wp--preset--color--alert);
}
/* Info callout: a quiet tint panel with a blue rule (no icon). */
.wp-block-afp-callout:not(.is-style-safety, .is-style-alert) {
	margin-block: var(--wp--preset--spacing--50);
	padding: 18px 22px;
	border: 0;
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0;
	background: var(--wp--preset--color--base-3);
	box-shadow: none;
}
.wp-block-afp-callout:not(.is-style-safety, .is-style-alert) > * {
	margin-block: 0;
}
.wp-block-afp-callout:not(.is-style-safety, .is-style-alert) > * + * {
	margin-block-start: 8px;
}

/* ============ 9. Main routes ============
 * braced/routes (404, empty search): All gear, Get ready, Find a pro as large links on hairlines,
 * each with one line on what is there.
 */
.braced-routes {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	list-style: none;
}
.braced-routes__item {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.braced-routes__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: 18px;
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}
.braced-routes__title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.braced-routes__title .braced-icon {
	color: var(--wp--preset--color--accent);
	transition: transform 0.15s ease;
}
.braced-routes__link:hover .braced-routes__title {
	color: var(--wp--preset--color--accent);
}
.braced-routes__link:hover .braced-routes__title .braced-icon {
	transform: translateX(4px);
}