/**
 * DigitaVision component primitives (spec 6.4): surfaces, button, chip,
 * badge, status, stat tile, type utilities, and the theme toggle and display
 * preferences. Colours come from tokens.css only.
 *
 * Doubled class selectors (.dv-btn.dv-btn--primary, .dv-chip.dv-chip) are
 * deliberate: Astra styles every bare `button`, `button:hover` and
 * `button:focus` (specificity 0,1,1) as a brand button, and 0,2,0 wins
 * without !important, so a <button> primitive keeps its colours in every state.
 */

/* Surfaces ------------------------------------------------------------------ */

/*
 * Console: a dark panel in both modes, separated by hairlines, never shadows.
 * It re-points the semantic tokens, so headings, text, links, focus rings,
 * borders, chips, badges and the secondary/ghost buttons inside it render for
 * a dark surface without console-specific variants.
 */
.dv-console {
	--dv-bg-canvas: var(--dv-console);
	--dv-bg-subtle: var(--dv-console-2);
	--dv-bg-surface: var(--dv-console-2);
	--dv-border: var(--dv-console-border);
	--dv-ink: var(--dv-console-ink);
	--dv-ink-2: var(--dv-console-ink-2);
	--dv-ink-3: var(--dv-console-ink-2);
	--dv-link: var(--dv-console-ink);
	--dv-shadow-card: 0 0 0 1px var(--dv-console-border);
	--dv-shadow-lift: 0 0 0 1px var(--dv-console-border);
	/*
	 * Astra's palette (tokens.css) and WordPress's preset copies of it (the block editor's colour classes,
	 * .has-ast-global-color-N-color) are resolved on :root, so an Astra or Spectra block placed in a console would
	 * otherwise keep the page's ink. Same slots, console values: the backgrounds go dark, the text goes light, and
	 * slot 6 (Astra's dark-contrast background, paired with slot 4/5 text) becomes the light console ink. The presets
	 * and Astra's alias variables are declared again here so they resolve against these values.
	 */
	--ast-global-color-0: var(--dv-brand);
	--ast-global-color-1: var(--dv-brand-hover);
	--ast-global-color-2: var(--dv-console-ink);
	--ast-global-color-3: var(--dv-console-ink-2);
	--ast-global-color-4: var(--dv-console);
	--ast-global-color-5: var(--dv-console-2);
	--ast-global-color-6: var(--dv-console-ink);
	--ast-global-color-7: var(--dv-console-border);
	--ast-global-color-8: var(--dv-console-ink);
	--wp--preset--color--ast-global-color-0: var(--ast-global-color-0);
	--wp--preset--color--ast-global-color-1: var(--ast-global-color-1);
	--wp--preset--color--ast-global-color-2: var(--ast-global-color-2);
	--wp--preset--color--ast-global-color-3: var(--ast-global-color-3);
	--wp--preset--color--ast-global-color-4: var(--ast-global-color-4);
	--wp--preset--color--ast-global-color-5: var(--ast-global-color-5);
	--wp--preset--color--ast-global-color-6: var(--ast-global-color-6);
	--wp--preset--color--ast-global-color-7: var(--ast-global-color-7);
	--wp--preset--color--ast-global-color-8: var(--ast-global-color-8);
	/* Astra's own aliases of the slots (form fields, Woo blocks, search inputs), also resolved on :root. */
	--ast-global-color-primary: var(--dv-console);
	--ast-global-color-secondary: var(--dv-console-2);
	--ast-global-color-subtle-background: var(--dv-console-border);
	--ast-global-color-alternate-background: var(--dv-console-ink);
	--ast-border-color: var(--dv-console-border);
	color-scheme: dark;
	padding: clamp(var(--dv-space-5), 4vw, var(--dv-space-6));
	border: 1px solid var(--dv-console-border);
	border-radius: var(--dv-radius-lg);
	background-color: var(--dv-console);
	color: var(--dv-console-ink);
}

/* The light-mode soft brand is too pale under console text. */
.dv-console ::selection {
	background-color: var(--dv-brand);
	color: var(--dv-on-brand);
}

/* Paper: a lifted card on the canvas (soft shadow in light mode, hairline ring in dark). */
.dv-paper {
	padding: clamp(var(--dv-space-5), 4vw, var(--dv-space-6));
	border-radius: var(--dv-radius-lg);
	background-color: var(--dv-bg-surface);
	box-shadow: var(--dv-shadow-card);
	color: var(--dv-ink);
}

/*
 * :where(:not(.dv *)) on .dv-btn, .dv-stat and .dv-em: the approved homepage design (site-shell.css, home.css) uses
 * the same class names for its own components; inside its .dv regions these rules stay out (no added specificity).
 */

/* Touch targets ------------------------------------------------------------- */

/* Interactive primitives keep their drawn size but take at least 44 x 44 px of input (spec 6.8). */
.dv-btn:where(:not(.dv *))::before,
.dv-chip::before,
.dv-theme-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 44px);
	height: max(100%, 44px);
	transform: translate(-50%, -50%);
}

/* Button -------------------------------------------------------------------- */

/*
 * <a class="dv-btn dv-btn--primary dv-btn--l" href="/tools/">Browse tools</a>
 * A variant is required: --primary | --secondary | --ghost | --on-console.
 * Sizes: --m (40 px, the default) | --l (48 px).
 */
.dv-btn:where(:not(.dv *)) {
	--dv-btn-height: 40px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dv-space-2);
	box-sizing: border-box;
	min-height: var(--dv-btn-height);
	padding: 0 var(--dv-space-4);
	border: 1px solid transparent;
	border-radius: var(--dv-radius-md);
	background-color: transparent;
	box-shadow: none;
	color: var(--dv-ink);
	font-family: var(--dv-font-body);
	font-size: var(--dv-text-body-s);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dv-dur-fast) var(--dv-ease), border-color var(--dv-dur-fast) var(--dv-ease), color var(--dv-dur-fast) var(--dv-ease);
	-webkit-tap-highlight-color: transparent;
}

.dv-btn--m {
	--dv-btn-height: 40px;
}

.dv-btn--l {
	--dv-btn-height: 48px;
	padding: 0 var(--dv-space-5);
	font-size: var(--dv-text-body);
}

.dv-btn:where(:not(.dv *)) svg {
	flex: none;
	width: 1.125em;
	height: 1.125em;
}

.dv-btn.dv-btn--primary {
	border-color: var(--dv-brand);
	background-color: var(--dv-brand);
	color: var(--dv-on-brand);
}

.dv-btn.dv-btn--primary:hover {
	border-color: var(--dv-brand-hover);
	background-color: var(--dv-brand-hover);
	color: var(--dv-on-brand);
}

.dv-btn.dv-btn--secondary {
	border-color: var(--dv-border);
	background-color: var(--dv-bg-surface);
	color: var(--dv-ink);
}

.dv-btn.dv-btn--secondary:hover {
	border-color: var(--dv-ink);
	background-color: var(--dv-bg-surface);
	color: var(--dv-ink);
}

.dv-btn.dv-btn--ghost {
	border-color: transparent;
	background-color: transparent;
	color: var(--dv-ink);
}

.dv-btn.dv-btn--ghost:hover {
	border-color: transparent;
	background-color: var(--dv-bg-subtle);
	color: var(--dv-ink);
}

/* Solid light button for console panels, in both modes. */
.dv-btn.dv-btn--on-console {
	border-color: var(--dv-console-ink);
	background-color: var(--dv-console-ink);
	color: var(--dv-console);
}

.dv-btn.dv-btn--on-console:hover {
	border-color: var(--dv-console-ink);
	color: var(--dv-console);
}

/*
 * color-mix() with var() is not validated at parse time, so a fallback
 * declaration before it would be ignored and a browser without color-mix()
 * would compute a transparent fill. Gated instead: without support, hover
 * keeps the solid fill of the .dv-btn--on-console rule.
 */
@supports (color: color-mix(in srgb, red, blue)) {
	.dv-btn.dv-btn--on-console:hover {
		background-color: color-mix(in srgb, var(--dv-console-ink) 86%, var(--dv-console));
	}
}

.dv-btn:where(:not(.dv *)):disabled,
.dv-btn:where(:not(.dv *))[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .45;
}

/* Chip ---------------------------------------------------------------------- */

/*
 * <a class="dv-chip" href="/tools/category/design/">Design <span class="dv-chip__count">24</span></a>
 * Selected: aria-current="page" on links, aria-pressed="true" on filter buttons.
 */
.dv-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--dv-space-2);
	box-sizing: border-box;
	min-height: 36px;
	padding: 0 var(--dv-space-4);
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-full);
	box-shadow: none;
	font-family: var(--dv-font-body);
	font-size: var(--dv-text-body-s);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dv-dur-fast) var(--dv-ease), border-color var(--dv-dur-fast) var(--dv-ease), color var(--dv-dur-fast) var(--dv-ease);
}

.dv-chip.dv-chip {
	border-color: var(--dv-border);
	background-color: var(--dv-bg-surface);
	color: var(--dv-ink);
}

.dv-chip.dv-chip:hover {
	border-color: var(--dv-ink);
	background-color: var(--dv-bg-surface);
	color: var(--dv-ink);
}

.dv-chip.dv-chip[aria-current="page"],
.dv-chip.dv-chip[aria-pressed="true"] {
	border-color: var(--dv-ink);
	background-color: var(--dv-ink);
	color: var(--dv-bg-canvas);
}

.dv-chip__count {
	color: var(--dv-ink-3);
	font-family: var(--dv-font-mono);
	font-size: var(--dv-text-label);
	font-variant-numeric: tabular-nums;
}

.dv-chip[aria-current="page"] .dv-chip__count,
.dv-chip[aria-pressed="true"] .dv-chip__count {
	color: inherit;
}

/* Badge --------------------------------------------------------------------- */

/*
 * <span class="dv-badge dv-badge--hot">Hot</span>
 * --hot | --new | --best | --personal | --shared | --pack | --save | --low. Labels, not controls.
 */
.dv-badge {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	box-sizing: border-box;
	min-height: 22px;
	padding: 0 var(--dv-space-2);
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-sm);
	background-color: transparent;
	color: var(--dv-ink-2);
	font-family: var(--dv-font-body);
	font-size: var(--dv-text-label);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: var(--dv-tracking-eyebrow);
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
}

.dv-badge--hot {
	border-color: var(--dv-brand);
	background-color: var(--dv-brand);
	color: var(--dv-on-brand);
}

.dv-badge--new {
	border-color: var(--dv-ink);
	background-color: var(--dv-ink);
	color: var(--dv-bg-canvas);
}

.dv-badge--best {
	border-color: var(--dv-ink);
	color: var(--dv-ink);
}

/* Personal: a filled dot (one owner). Shared: an open ring. */
.dv-badge--personal::before,
.dv-badge--shared::before {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.dv-badge--personal::before {
	background-color: currentColor;
}

.dv-badge--shared::before {
	border: 1.5px solid currentColor;
}

/* Pack: a bundle, not a plan type; the console's raised fill in both modes. */
.dv-badge--pack {
	border-color: var(--dv-console-border);
	background-color: var(--dv-console-2);
	color: var(--dv-console-ink);
}

/* Text on the status fills is the console tone, dark in both modes: at least 5.5:1. */
.dv-badge--save {
	border-color: var(--dv-success);
	background-color: var(--dv-success);
	color: var(--dv-console);
}

.dv-badge--low {
	border-color: var(--dv-warning);
	background-color: var(--dv-warning);
	color: var(--dv-console);
}

/* Status -------------------------------------------------------------------- */

/*
 * <span class="dv-status dv-status--operational">Operational <time datetime="2026-10-06T16:00Z">checked 2 min ago</time></span>
 * The label is always present: status is never conveyed by colour alone (spec 6.8).
 */
.dv-status {
	--dv-status-color: var(--dv-ink-3);
	display: inline-flex;
	align-items: center;
	gap: var(--dv-space-2);
	color: var(--dv-ink);
	font-size: var(--dv-text-body-s);
	font-weight: 500;
	line-height: 1.3;
}

.dv-status::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--dv-status-color);
}

/* Soft halo around the dot where color-mix() is supported (see the button note above). */
@supports (color: color-mix(in srgb, red, blue)) {
	.dv-status::before {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--dv-status-color) 22%, transparent);
	}
}

.dv-status--operational {
	--dv-status-color: var(--dv-success);
}

.dv-status--degraded {
	--dv-status-color: var(--dv-warning);
}

.dv-status--down {
	--dv-status-color: var(--dv-danger);
}

.dv-status time {
	color: var(--dv-ink-3);
	font-family: var(--dv-font-mono);
	font-size: var(--dv-text-label);
	font-weight: 400;
}

/* Stat tile ----------------------------------------------------------------- */

/*
 * <div class="dv-stat"><span class="dv-stat__value">99.9%</span><span class="dv-stat__label">Uptime, 90 days</span></div>
 * Corner ticks: ::before draws the top pair, ::after the bottom pair.
 */
.dv-stat:where(:not(.dv *)) {
	--dv-stat-tick: 12px;
	--dv-stat-tick-color: var(--dv-ink-3);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-2);
	padding: var(--dv-space-5);
	color: var(--dv-ink);
}

.dv-stat:where(:not(.dv *))::before,
.dv-stat:where(:not(.dv *))::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: var(--dv-stat-tick);
	background-image:
		linear-gradient(var(--dv-stat-tick-color), var(--dv-stat-tick-color)),
		linear-gradient(var(--dv-stat-tick-color), var(--dv-stat-tick-color)),
		linear-gradient(var(--dv-stat-tick-color), var(--dv-stat-tick-color)),
		linear-gradient(var(--dv-stat-tick-color), var(--dv-stat-tick-color));
	background-repeat: no-repeat;
	background-size: var(--dv-stat-tick) 1px, 1px 100%, var(--dv-stat-tick) 1px, 1px 100%;
	pointer-events: none;
}

.dv-stat:where(:not(.dv *))::before {
	top: 0;
	background-position: left top, left top, right top, right top;
}

.dv-stat:where(:not(.dv *))::after {
	bottom: 0;
	background-position: left bottom, left top, right bottom, right top;
}

.dv-stat__value {
	font-family: var(--dv-font-mono);
	font-size: var(--dv-text-h1);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: -0.01em;
}

.dv-stat__label {
	color: var(--dv-ink-2);
	font-size: var(--dv-text-body-s);
	line-height: 1.4;
}

/* Type utilities ------------------------------------------------------------ */

.dv-eyebrow {
	color: var(--dv-ink-3);
	font-family: var(--dv-font-body);
	font-size: var(--dv-text-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--dv-tracking-eyebrow);
	text-transform: uppercase;
}

/* Numbers, prices, IDs, timestamps. Geist Mono ships 400/500, so no synthesised bold. */
.dv-mono {
	font-family: var(--dv-font-mono);
	font-synthesis: style;
	font-variant-numeric: tabular-nums;
}

/* The one emphasis phrase in a headline: Instrument Serif Italic in brand red (spec 6.1, 6.3). */
.dv-em:where(:not(.dv *)) {
	color: var(--dv-brand);
	font-family: var(--dv-font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.dv-display-xl,
.dv-display-l {
	font-family: var(--dv-font-display);
	font-weight: 700;
	line-height: var(--dv-leading-display);
	letter-spacing: var(--dv-tracking-display);
	text-wrap: balance;
}

.dv-display-xl {
	font-size: var(--dv-text-display-xl);
}

.dv-display-l {
	font-size: var(--dv-text-display-l);
}

/* Theme toggle -------------------------------------------------------------- */

/*
 * [dv_theme_toggle]: <button type="button" class="dv-theme-toggle" data-dv-theme-toggle aria-label="Switch to dark mode"><svg>…</svg></button>
 * A 40 px round icon button with a 44 px hit area. The icon shows the active
 * theme, the sun in light mode and the moon in dark, and the two paths of
 * assets/svg/sun-moon.svg cross-fade with a quarter turn when it changes.
 */
.dv-theme-toggle.dv-theme-toggle {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-full);
	background-color: transparent;
	box-shadow: none;
	color: var(--dv-ink);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--dv-dur-fast) var(--dv-ease), border-color var(--dv-dur-fast) var(--dv-ease);
	-webkit-tap-highlight-color: transparent;
}

.dv-theme-toggle.dv-theme-toggle:hover {
	border-color: var(--dv-ink);
	background-color: var(--dv-bg-subtle);
	color: var(--dv-ink);
}

.dv-theme-toggle svg {
	display: block;
	width: 20px;
	height: 20px;
	overflow: visible;
}

.dv-theme-toggle .dv-sun,
.dv-theme-toggle .dv-moon {
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity var(--dv-dur) var(--dv-ease), transform var(--dv-dur) var(--dv-ease);
}

/* Both turn the same way: the sun leaves clockwise as the moon arrives clockwise, and back. */
:root[data-theme="dark"] .dv-theme-toggle .dv-sun {
	opacity: 0;
	transform: rotate(90deg) scale(.5);
}

:root:not([data-theme="dark"]) .dv-theme-toggle .dv-moon {
	opacity: 0;
	transform: rotate(-90deg) scale(.5);
}

/*
 * Both preference controls need JavaScript, and whenever it runs the
 * dv-theme-init script sets html[data-theme] before the body is parsed.
 * Without it they could not work, so they are not shown.
 */
:root:not([data-theme]) :is(.dv-theme-toggle, .dv-prefs) {
	display: none;
}

/* Display preferences ------------------------------------------------------- */

/*
 * [dv_prefs_controls]: <fieldset class="dv-prefs"> holding a segmented theme
 * control (native radios name="dv-theme": light | dark | system) and a
 * "Reduce motion" checkbox ([data-dv-motion-toggle]). Footer furniture.
 * Inline-level, so it follows its container's text-align (Astra's HTML
 * element alignment option); lines that wrap in a narrow column are centred.
 */
.dv-prefs {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--dv-space-2) var(--dv-space-5);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--dv-ink-2);
	font-family: var(--dv-font-body);
	font-size: var(--dv-text-body-s);
	font-weight: 500;
	line-height: 1.2;
}

/* A 44 px pill: 36 px options inside 3 px of padding and a hairline. */
.dv-prefs__theme {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-full);
	background-color: var(--dv-bg-surface);
}

.dv-prefs__option {
	position: relative;
	display: inline-flex;
}

/* Each radio stays native and focusable, stretched invisibly over its option to a 44 px target. */
.dv-prefs__radio.dv-prefs__radio {
	position: absolute;
	top: -4px;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	height: calc(100% + 8px);
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	appearance: none;
}

.dv-prefs__option .dv-prefs__text {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--dv-space-4);
	border-radius: var(--dv-radius-full);
	color: var(--dv-ink-2);
	transition: background-color var(--dv-dur-fast) var(--dv-ease), color var(--dv-dur-fast) var(--dv-ease);
}

.dv-prefs__radio:hover + .dv-prefs__text {
	color: var(--dv-ink);
}

.dv-prefs__radio:checked + .dv-prefs__text {
	background-color: var(--dv-ink);
	color: var(--dv-bg-canvas);
}

/* The radio itself is invisible, so its option carries the keyboard focus ring. */
.dv-prefs__radio:focus-visible + .dv-prefs__text {
	outline: 2px solid var(--dv-link);
	outline-offset: 2px;
}

/*
 * Forced colours (Windows High Contrast): the selected option's ink fill is dropped, so it gets an outline in the
 * system button-text colour, and its label (ours alone, so forced-color-adjust is safe there) keeps the system
 * highlight pair. The footer's aria-pressed buttons (.dv-theme-btn, .dv-motion-btn) get the outline only: the design
 * footer sets their colours (site-shell.css, inline styles), so those must stay forced. Keyboard focus is a dashed
 * Highlight ring, so the two never look alike.
 */
@media (forced-colors: active) {
	.dv-prefs__radio:checked + .dv-prefs__text,
	:is(.dv-theme-btn, .dv-motion-btn)[aria-pressed="true"] {
		outline: 2px solid ButtonText;
		outline-offset: 2px;
	}

	.dv-prefs__radio:checked + .dv-prefs__text {
		background-color: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

	.dv-prefs__radio:focus-visible + .dv-prefs__text,
	:is(.dv-theme-btn, .dv-motion-btn):focus-visible {
		outline: 2px dashed Highlight;
		outline-offset: 4px;
	}
}

.dv-prefs__motion {
	display: inline-flex;
	align-items: center;
	gap: var(--dv-space-2);
	min-height: 44px;
	color: var(--dv-ink-2);
	cursor: pointer;
}

.dv-prefs__motion:hover {
	color: var(--dv-ink);
}

.dv-prefs__checkbox.dv-prefs__checkbox {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--dv-ink);
	cursor: pointer;
}

/* FAQ ----------------------------------------------------------------------- */

/*
 * <section class="dv-faq-section"> eyebrow + h2 + <div class="dv-faq"> of <details class="dv-faq__item">
 * <summary class="dv-faq__question"><span class="dv-faq__title">Question</span></summary><div class="dv-faq__answer">..</div>
 * The tool page's FAQ prints the same list with plain text in the summary. The plus and minus marks are CSS: no script.
 * On the homepage (dv_faq_html(), template-parts/home/faq.php) and on the How it works page ([dv_faq]).
 */
.dv-faq {
	border-top: 1px solid var(--dv-border);
}

.dv-faq__item {
	border-bottom: 1px solid var(--dv-border);
}

.dv-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dv-space-4);
	min-height: 56px;
	padding: var(--dv-space-3) 0;
	color: var(--dv-ink);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.dv-faq__question::-webkit-details-marker {
	display: none;
}

.dv-faq__question::after {
	content: "+";
	flex: none;
	color: var(--dv-ink-3);
	font-family: var(--dv-font-mono);
	font-size: var(--dv-text-h3);
}

.dv-faq__item[open] > .dv-faq__question::after {
	content: "\2212";
}

.dv-faq__question:focus-visible {
	outline: 2px solid var(--dv-link);
	outline-offset: 2px;
}

/* The question as a span (homepage and How it works): the summary's own type, at the h3 size. */
.dv-faq__question > .dv-faq__title {
	display: block;
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: var(--dv-text-h3);
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
}

.dv-faq__answer {
	padding: 0 0 var(--dv-space-4);
	color: var(--dv-ink-2);
	line-height: 1.6;
}

.dv-faq__answer > :last-child {
	margin-bottom: 0;
}

.dv-faq__answer a {
	color: var(--dv-link);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.dv-faq-section__head {
	margin-bottom: var(--dv-space-6);
}

.dv-faq-section .dv-faq-section__head .dv-eyebrow {
	margin: 0 0 var(--dv-space-3);
	color: var(--dv-ink-2);
	letter-spacing: var(--dv-tracking-eyebrow);
}

.dv-faq-section .dv-faq-section__title {
	max-width: 24ch;
	margin: 0;
	color: var(--dv-ink);
	font-family: var(--dv-font-display);
	font-size: var(--dv-text-h2);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--dv-tracking-display);
	text-wrap: balance;
}

.dv-faq-section__title .dv-em {
	font-size: 1.08em;
	line-height: 0;
}

/* Wide enough: the heading beside the list. */
@media (min-width: 960px) {
	.dv-faq-section {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--dv-space-8);
		align-items: start;
	}

	.dv-faq-section__head {
		margin-bottom: 0;
	}
}

/* On the How it works page the section sits in the page content, 960 px wide like the steps (how.css). */
.entry-content > .dv-faq-section,
.entry-content[data-ast-blocks-layout] > .dv-faq-section {
	max-width: 960px;
	margin: var(--dv-space-8) auto;
}