/*
 * Shared component styles for disability.insure (.di-* classes).
 * Every color, radius, size and focus value comes from theme.json tokens (CSS variables), never a literal,
 * so the temporary theme switcher recolors everything. Mobile values apply at max-width 781px (D7).
 * Sources: docs/specs/components-infographics.md section 1 and README "Components".
 */

/* ---------- Metric-matched fallback fonts ---------- */
/*
 * Until the self-hosted woff2 files arrive (font-display: swap) text paints in a local fallback. Unadjusted,
 * the wider fallback wraps the header navigation onto a second row and the whole page jumps when the web font
 * swaps in (Lighthouse CLS 0.66 on desktop). These faces scale the Arial-metric and Times-metric system fonts
 * (Arial, Helvetica, Liberation Sans, Arimo; Times New Roman, Liberation Serif, Tinos) to the advance widths and
 * vertical metrics of Source Sans 3 and Source Serif 4, measured in Chromium on this site's own copy, so the
 * swap moves almost nothing. The font stacks in theme.json list them second.
 */
@font-face {
	font-family: "Source Sans 3 Fallback";
	font-style: normal;
	font-weight: 300 500;
	src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
	size-adjust: 94%;
	ascent-override: 109%;
	descent-override: 43%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Source Sans 3 Fallback";
	font-style: normal;
	font-weight: 600 800;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
	size-adjust: 89%;
	ascent-override: 115%;
	descent-override: 45%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Source Serif 4 Fallback";
	font-style: normal;
	font-weight: 300 500;
	src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"), local("Liberation Serif"), local("Tinos");
	size-adjust: 110%;
	ascent-override: 95%;
	descent-override: 31%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Source Serif 4 Fallback";
	font-style: normal;
	font-weight: 600 800;
	src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Times Bold"), local("Liberation Serif Bold"), local("Tinos Bold");
	size-adjust: 106%;
	ascent-override: 98%;
	descent-override: 32%;
	line-gap-override: 0%;
}

/* ---------- Page shell ---------- */
/* Header, main and footer sit flush; spacing lives inside each part (no block gap between them). */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- Visually hidden (screen reader only) and the skip link ---------- */
/* The one visually-hidden definition in the theme: captions, table heads, live regions and labels that are
   read by assistive technology but not drawn. The skip link uses it until it receives focus. */
.di-visually-hidden,
.di-skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.di-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	box-sizing: border-box;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--control);
	font-weight: 600;
	text-decoration: none;
	/* The ring sits outside the link, over the light page: accent, like every other ring on paper. */
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Accent-filled controls inside ink bands keep the paper ring. */
.di-band--ink .di-btn:focus-visible,
.di-cta-band .di-btn:focus-visible {
	outline-color: var(--wp--custom--focus--color-on-dark);
}

/* ---------- Icons ---------- */
.di-icon {
	display: block;
	flex: none;
}
.di-icon-disc {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
}
.di-icon-disc--44 {
	width: 44px;
	height: 44px;
}

/* ---------- Layout: container, sections, bands ---------- */
/* Section container (R11): 1120px of content plus 40px gutters (20px at 781px and below), 1200px outer.
   The header row is the one exception (1120px including gutters), see header.css. */
.di-container {
	box-sizing: border-box;
	max-width: calc(1120px + 2 * var(--wp--custom--layout--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--custom--layout--gutter);
}
.di-section {
	padding-block: var(--wp--custom--layout--section);
}
.di-band {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.di-band--alt {
	background: var(--wp--preset--color--paper-alt);
}
.di-band--ink {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	--wp--custom--focus--color: var(--wp--preset--color--paper);
}
.di-band--ink :is(h1, h2, h3, h4) {
	color: inherit;
}
/* Eyebrows on ink bands use accent-on-dark (README). Two classes, so it outranks .di-eyebrow whichever stylesheet loads first. */
.di-band--ink .di-eyebrow {
	color: var(--wp--preset--color--accent-on-dark);
}
.di-band--ink a:not(.di-btn) {
	color: var(--wp--preset--color--accent-on-dark);
}
.di-band--ink a:not(.di-btn):hover {
	color: var(--wp--preset--color--paper);
}
.di-main {
	padding-top: 24px;
	padding-bottom: 80px;
}

/* ---------- Page title, eyebrow, lede ---------- */
.di-page-title {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--custom--font-size--page-title);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--letter-spacing--display);
	text-wrap: pretty;
}
.di-eyebrow {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.di-lede {
	margin: 0;
	font-size: var(--wp--preset--font-size--lede);
	line-height: var(--wp--custom--line-height--lede);
	color: var(--wp--preset--color--slate);
	text-wrap: pretty;
}

/* ---------- Buttons ---------- */
.di-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: var(--wp--custom--control--button-height);
	padding: 0 22px;
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--card);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: none;
}
.di-btn:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--card);
}
/* Accent-filled buttons: an accent ring would sit against accent, so the ring is ink at offset 3px. */
.di-btn:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}
.di-btn[disabled],
.di-btn[aria-disabled="true"] {
	background: var(--wp--preset--color--slate);
	color: var(--wp--preset--color--card);
	cursor: not-allowed;
}

.di-btn--secondary {
	border: var(--wp--custom--border--emphasis) solid var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.di-btn--secondary:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.di-btn--secondary:focus-visible {
	outline-color: var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}

.di-btn--on-ink,
.di-btn--outline-on-ink {
	min-height: 52px;
	padding: 0 24px;
}
.di-btn--on-ink {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.di-btn--on-ink:hover {
	background: var(--wp--preset--color--paper-alt);
	color: var(--wp--preset--color--ink);
}
.di-btn--outline-on-ink {
	border: var(--wp--custom--border--emphasis) solid var(--wp--preset--color--paper);
	background: transparent;
	color: var(--wp--preset--color--paper);
}
.di-btn--outline-on-ink:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.di-btn--on-ink:focus-visible,
.di-btn--outline-on-ink:focus-visible {
	outline-color: var(--wp--custom--focus--color-on-dark);
	outline-offset: var(--wp--custom--focus--offset);
}

.di-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--wp--custom--control--min-tap-target);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: var(--wp--custom--border--emphasis);
}
.di-link-arrow:hover {
	color: var(--wp--preset--color--ink);
}

/* ---------- Form fields (D1: input borders are slate, errors error at 1.5px) ---------- */
.di-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.di-input,
.di-select,
.di-textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: var(--wp--custom--control--input-height);
	padding: 0 14px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--slate);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 1.3;
}
.di-textarea {
	height: auto;
	min-height: 132px;
	padding: 12px 14px;
	line-height: var(--wp--custom--line-height--body);
	resize: vertical;
}
.di-input::placeholder,
.di-textarea::placeholder {
	color: var(--wp--preset--color--slate);
	opacity: 1;
}
.di-input:focus,
.di-select:focus,
.di-textarea:focus {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}
.di-input[aria-invalid="true"],
.di-select[aria-invalid="true"],
.di-textarea[aria-invalid="true"] {
	border: var(--wp--custom--border--emphasis) solid var(--wp--preset--color--error);
}
.di-input[aria-invalid="true"]:focus,
.di-select[aria-invalid="true"]:focus,
.di-textarea[aria-invalid="true"]:focus {
	border-color: var(--wp--preset--color--error);
}
.di-input:disabled,
.di-select:disabled,
.di-textarea:disabled {
	background: var(--wp--preset--color--paper-alt);
	color: var(--wp--preset--color--slate);
	cursor: not-allowed;
}
.di-field__error {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--small);
	color: var(--wp--preset--color--error);
}

/* ---------- Radios styled as buttons (role="radiogroup") ---------- */
.di-radio-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.di-radio-buttons [role="radio"] {
	box-sizing: border-box;
	min-height: var(--wp--custom--control--min-tap-target);
	padding: 0 16px;
	border: var(--wp--custom--border--emphasis) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}
.di-radio-buttons [role="radio"]:hover {
	border-color: var(--wp--preset--color--accent);
}
.di-radio-buttons [role="radio"][aria-checked="true"] {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--card);
}

/* ---------- Range slider ---------- */
.di-range {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.di-range__value {
	color: var(--wp--preset--color--accent);
}
.di-range input[type="range"] {
	width: 100%;
	height: var(--wp--custom--control--min-tap-target);
	margin: 0;
	accent-color: var(--wp--preset--color--accent);
}

/* ---------- Direct answer box ---------- */
.di-answer {
	box-sizing: border-box;
	padding: 28px 32px;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--card-lg);
	background: var(--wp--preset--color--accent-soft);
}
.di-answer .di-eyebrow {
	margin-bottom: 8px;
}
.di-answer__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--lede);
	line-height: var(--wp--custom--line-height--lede);
	text-wrap: pretty;
}

/* ---------- Key facts box ---------- */
.di-keyfacts {
	box-sizing: border-box;
	padding: 28px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card-lg);
	background: var(--wp--preset--color--card);
}
.di-keyfacts__title {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 26px;
	font-weight: 500;
}
.di-keyfacts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 16px;
}
.di-keyfacts__label {
	margin: 0 0 4px;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}
.di-keyfacts__number {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 32px;
	line-height: 1;
}
.di-keyfacts__list {
	margin: 0;
	padding-left: 20px;
	font-size: 17px;
}

/* ---------- Contract language callout ---------- */
.di-contract-group {
	display: grid;
	gap: 12px;
}
.di-contract {
	box-sizing: border-box;
	padding: 22px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-top: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--card);
}
.di-contract--weak {
	border-top-color: var(--wp--preset--color--slate);
}
.di-contract__label {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.di-contract--weak .di-contract__label {
	color: var(--wp--preset--color--slate);
}
.di-contract__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	line-height: var(--wp--custom--line-height--lede);
}
.di-contract__note {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

/* ---------- Case example card ---------- */
.di-case {
	box-sizing: border-box;
	padding: 28px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card-lg);
	background: var(--wp--preset--color--card);
}
.di-case__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.di-case__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 26px;
	font-weight: 500;
}
.di-case__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px 20px;
	margin: 0 0 14px;
	font-size: var(--wp--preset--font-size--small);
}
.di-case__list dt {
	color: var(--wp--preset--color--slate);
}
.di-case__list dd {
	margin: 0;
	font-weight: 600;
}
.di-case__accent {
	color: var(--wp--preset--color--accent);
}
.di-case__text {
	margin: 0;
	font-size: 17px;
}
.di-case__disclaimer {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

/* ---------- Badges, source line, reviewer pill, editorial box ---------- */
.di-badge,
.di-badge-date {
	display: inline-block;
	padding: 3px 8px;
	border-radius: var(--wp--custom--radius--badge);
	font-size: 15px;
	font-weight: 600;
}
.di-badge {
	background: var(--wp--preset--color--paper-alt);
	color: var(--wp--preset--color--slate);
}
.di-badge-date {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
}
.di-badge-date--card {
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}
.di-source {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}
.di-source strong {
	color: var(--wp--preset--color--ink);
}
.di-source a {
	color: var(--wp--preset--color--slate);
}
.di-pill-reviewer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}
.di-pill-reviewer__dot {
	flex: none;
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
.di-editorial {
	box-sizing: border-box;
	padding: 24px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card-lg);
	background: var(--wp--preset--color--card);
}
.di-editorial__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.di-editorial__title {
	margin: 0;
	font-weight: 600;
}
.di-editorial__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}
.di-editorial__links {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.di-editorial__links a {
	display: inline-block;
	/* 44px hit area without changing the line box. */
	padding-block: 11px;
	margin-block: -11px;
}

/* ---------- Data table ---------- */
.di-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--card);
}
.di-table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	font-size: 17px;
}
.di-table caption {
	padding: 14px 18px;
	border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper-alt);
	font-weight: 600;
	text-align: left;
}
.di-table thead tr {
	background: var(--wp--preset--color--paper-alt);
	text-align: left;
}
.di-table th,
.di-table td {
	padding: 14px 18px;
	border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
}
.di-table th {
	font-weight: 600;
}
.di-table tbody tr:last-child td,
.di-table tbody tr:last-child th {
	border-bottom: 0;
}
.di-table tbody td:first-child,
.di-table tbody th[scope="row"] {
	font-weight: 600;
	text-align: left;
}
.di-table .is-num {
	text-align: right;
	font-weight: 600;
}
.di-table .is-accent {
	color: var(--wp--preset--color--accent);
}

/* ---------- FAQ accordion (markup and behavior: blocks/faq) ---------- */
.di-faq {
	border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
}
.di-faq__item {
	border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
}
.di-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--wp--custom--control--min-tap-target);
	padding: 18px 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}
.di-faq__sign {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: 50%;
	color: var(--wp--preset--color--accent);
	font-size: 20px;
	font-weight: 400;
}
.di-faq__a {
	margin: 0;
	padding: 0 56px 20px 0;
	color: var(--wp--preset--color--slate);
	line-height: var(--wp--custom--line-height--body);
}
.di-faq__a[hidden] {
	display: none;
}

/* ---------- Profession tile ---------- */
.di-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	min-height: 150px;
	padding: 20px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.di-tile:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}
.di-tile__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 24px;
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading-2);
}
.di-tile__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

/* ---------- Photos (3:2 default, radius 8, never full bleed behind text) ---------- */
.di-photo {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--accent-soft);
}
.di-photo--4x5 {
	aspect-ratio: 4 / 5;
}
.di-photo--1x1 {
	aspect-ratio: 1 / 1;
}
.di-photo--16x9 {
	aspect-ratio: 16 / 9;
}
.di-photo--21x9 {
	aspect-ratio: 21 / 9;
}
.di-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.di-photo__chip {
	position: absolute;
	left: 12px;
	bottom: 10px;
	margin: 0;
	padding: 3px 8px;
	border-radius: var(--wp--custom--radius--badge);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
	color: var(--wp--preset--color--paper);
	font-size: 15px;
}
.di-photo--placeholder {
	display: flex;
	align-items: flex-end;
	padding: 12px;
	border: var(--wp--custom--border--emphasis) dashed var(--wp--preset--color--accent);
}
.di-photo__brief {
	margin: 0;
	font-size: 15px;
}

/* ---------- Article card ---------- */
.di-card-article {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.di-card-article__eyebrow {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.di-card-article__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 24px;
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading-2);
}
.di-card-article__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.di-card-article__title a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}
.di-card-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}
.di-card-article__excerpt {
	margin: 0;
	color: var(--wp--preset--color--slate);
}

/* ---------- CTA band ---------- */
.di-cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	box-sizing: border-box;
	padding: 48px;
	border-radius: var(--wp--custom--radius--band);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	--wp--custom--focus--color: var(--wp--preset--color--paper);
}
.di-cta-band__copy {
	flex: 1 1 360px;
}
.di-cta-band__title {
	margin: 0 0 8px;
	color: inherit;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.15;
}
.di-cta-band__text {
	margin: 0;
	font-size: 17px;
	color: var(--wp--preset--color--on-dark-muted);
}
.di-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Sticky bottom bar (mobile only; rendered by parts/footer.html) ---------- */
.di-sticky-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	box-sizing: border-box;
	height: 72px;
	padding: 12px 16px;
	border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--card);
	box-shadow: var(--wp--preset--shadow--sticky-bar);
}
.di-sticky-bar .di-btn {
	padding: 0;
}
/* Static specimen (component sheet): drawn 390px wide, full border, visible on desktop only. At 781px and below
   the real bar is on screen, so the specimen is hidden and two bars never show (see the mobile block below). */
.di-sticky-bar--static {
	position: static;
	display: grid;
	width: 390px;
	max-width: 100%;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
}

/* ---------- Breadcrumb ---------- */
.di-breadcrumb {
	margin-bottom: 28px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}
.di-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.di-breadcrumb a {
	display: inline-block;
	/* 44px hit area without changing the line box. */
	min-width: var(--wp--custom--control--min-tap-target);
	padding-block: 10px;
	margin-block: -10px;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
}
.di-breadcrumb a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}
.di-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* ---------- Page meta row (reviewer pill, dates, reading time under a page title) ---------- */
.di-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

/* ---------- Large section heading, 36px desktop / 30px mobile (the design's "var" H2) ---------- */
/* Margins and color stay with each page; this sets only the type. */
.di-h2-var {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 36px;
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading-1);
	letter-spacing: var(--wp--custom--letter-spacing--heading-1);
}

/* ---------- Numbered step list (Research method, About standards, Business owners checklist) ---------- */
.di-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.di-steps > li {
	display: flex;
	gap: 16px;
	padding: 18px 20px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--card);
}
.di-steps > li > div {
	min-width: 0;
}
.di-steps__n {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border: var(--wp--custom--border--emphasis) solid var(--wp--preset--color--accent);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18px;
	color: var(--wp--preset--color--accent);
}
.di-steps__title {
	margin: 0 0 2px;
	font-weight: 600;
}
.di-steps__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

/* ---------- Related link cards (kind label + serif title) ---------- */
.di-rel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 12px;
}
.di-rel-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-sizing: border-box;
	min-height: 100px;
	padding: 18px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.di-rel-card:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}
.di-rel-card__kind {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.di-rel-card__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	line-height: 1.25;
}

/* ---------- Quiet end CTA row (serif line + one button, rule above) ---------- */
.di-end-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 28px;
	border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
}
.di-end-cta__text {
	max-width: 520px;
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	line-height: 1.3;
}

/* ---------- Explainer card base (di/definition-simulator, di/stacking-planner) ---------- */
.di-explainer {
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 28px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
}
.di-explainer__title {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
.di-explainer__intro {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
	color: var(--wp--preset--color--slate);
}
.di-explainer__static {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--small);
}
.di-explainer__static[hidden],
.di-explainer__controls[hidden],
.di-explainer [hidden] {
	display: none;
}
.di-explainer__caption {
	margin-top: 16px;
	font-size: 15px;
	line-height: var(--wp--custom--line-height--small);
	color: var(--wp--preset--color--slate);
}

/* ---------- Mobile (D7: 781px) ---------- */
@media (max-width: 781px) {
	.di-h2-var {
		font-size: 30px;
	}
	h1.di-page-title {
		font-size: var(--wp--custom--font-size--page-title-mobile) !important;
	}
	.di-container {
		padding-inline: var(--wp--custom--layout--gutter-mobile);
	}
	.di-section {
		padding-block: var(--wp--custom--layout--section-mobile);
	}
	.di-answer {
		padding: 22px 20px;
	}
	.di-answer__text {
		font-size: 20px;
	}
	.di-cta-band {
		padding: 28px 24px;
	}
	.di-sticky-bar:not(.di-sticky-bar--static) {
		display: grid;
	}
	.di-sticky-bar--static {
		display: none;
	}
	.di-explainer {
		padding: 22px 20px;
	}
	/* The fixed bar never hides the footer. */
	body:has(.di-sticky-bar:not(.di-sticky-bar--static)) {
		padding-bottom: 72px;
	}
}

/* ---------- Index, archive and search listings (ruling R25; core blocks, article-card styling) ---------- */
.di-archive__query {
	margin-top: 32px;
}
.di-archive .di-card-article {
	gap: 14px;
}
.di-archive .di-card-article__title {
	font-size: 26px;
	line-height: 1.2;
	text-wrap: pretty;
}
.di-archive .di-card-article__excerpt p {
	margin: 0;
	line-height: 1.5;
}
.di-archive .di-card-article__meta {
	margin-top: auto;
	font-size: 16px;
}
.di-archive__pagination {
	margin-top: 48px;
	gap: 8px;
}
.di-archive__pagination a,
.di-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}
.di-archive__pagination .page-numbers.current {
	color: var(--wp--preset--color--ink);
}