/*
 * FinancialRatios.guide components: calculators, formulas, examples, directory, ad slots.
 * Colours come from the Bricks palette variables, with fallbacks for other themes.
 */

:root {
	--frg-ink: var(--ink, #14213d);
	--frg-muted: var(--ink-muted, #4a5568);
	--frg-surface: var(--surface, #fbfaf7);
	--frg-surface-muted: var(--surface-muted, #f3f0e9);
	--frg-paper: var(--paper, #ffffff);
	--frg-line: var(--line, #dcd6ca);
	--frg-line-strong: var(--line-strong, #7c7568);
	--frg-accent: var(--accent, #0f766e);
	--frg-accent-strong: var(--accent-strong, #115e59);
	--frg-accent-soft: var(--accent-soft, #e7f3f1);
	--frg-danger: var(--danger, #b42318);
	--frg-radius: 1.2rem;
}

.frg-calc,
.frg-formula,
.frg-example,
.frg-chart,
.frg-toc,
.frg-hub__list,
.frg-related,
.frg-more,
.frg-hero-viz,
.frg-directory,
.frg-hub,
.frg-breadcrumbs,
.frg-ad {
	box-sizing: border-box;
}

.frg-calc *,
.frg-calc *::before,
.frg-calc *::after {
	box-sizing: inherit;
}

.frg-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.frg-admin-notice {
	padding: 1rem 1.4rem;
	border: 1px dashed #b45309;
	border-radius: 0.6rem;
	background: #fffbeb;
	color: #78350f;
	font-size: 1.4rem;
}

/* ---------- Calculator ---------- */

.frg-calc {
	container-type: inline-size;
	width: 100%;
	padding: clamp(1.6rem, 3cqi, 2.8rem);
	border: 1px solid var(--frg-line);
	border-radius: var(--frg-radius);
	background: var(--frg-paper);
	color: var(--frg-ink);
}

.frg-calc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1.6rem;
	margin-bottom: 2rem;
}

.frg-calc__title {
	margin: 0;
	font-size: var(--text-l, 2.2rem);
	line-height: 1.25;
}

.frg-calc__privacy {
	margin: 0;
	color: var(--frg-muted);
	font-size: 1.4rem;
}

.frg-calc__body {
	display: grid;
	gap: 2.4rem;
}

@container (min-width: 720px) {
	.frg-calc__body {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
	}
}

.frg-calc__form {
	display: grid;
	gap: 1.6rem;
	margin: 0;
}

.frg-calc__modes {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--frg-line);
	border-radius: 0.8rem;
}

.frg-calc__modes legend {
	padding: 0 0.4rem;
	font-size: 1.4rem;
	font-weight: 600;
}

.frg-mode {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	font-size: 1.5rem;
	line-height: 1.4;
	cursor: pointer;
}

.frg-mode input {
	width: 1.8rem;
	height: 1.8rem;
	margin: 0.1rem 0 0;
	accent-color: var(--frg-accent);
	flex-shrink: 0;
}

.frg-calc__fields {
	display: grid;
	gap: 1.6rem;
}

.frg-field[hidden] {
	display: none;
}

.frg-field__label,
.frg-calc legend,
.frg-mode,
.frg-directory__search,
.frg-directory__cats label {
	/* Bricks greys out bare <label> text; keep form text at full contrast. */
	color: var(--frg-ink);
}

.frg-field__label {
	display: block;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
}

.frg-field__optional {
	color: var(--frg-muted);
	font-weight: 400;
}

.frg-field__help {
	margin: 0.2rem 0 0.6rem;
	color: var(--frg-muted);
	font-size: 1.35rem;
	line-height: 1.45;
}

.frg-field__control {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--frg-line-strong);
	border-radius: 0.8rem;
	background: var(--frg-paper);
	overflow: hidden;
}

.frg-field__control:focus-within {
	border-color: var(--frg-accent);
	box-shadow: 0 0 0 2px var(--frg-accent);
}

.frg-field__affix {
	display: flex;
	align-items: center;
	padding: 0 1rem;
	background: var(--frg-surface-muted);
	color: var(--frg-muted);
	font-size: 1.5rem;
}

.frg-field__affix[hidden] {
	display: none;
}

.frg-field__input {
	flex: 1;
	min-width: 0;
	min-height: 4.4rem;
	padding: 0.8rem 1.2rem;
	border: 0;
	background: transparent;
	color: var(--frg-ink);
	font: inherit;
	font-size: 1.6rem;
	font-variant-numeric: tabular-nums;
}

.frg-field__input:focus {
	outline: none;
}

.frg-field.is-invalid .frg-field__control {
	border-color: var(--frg-danger);
	border-width: 2px;
}

.frg-field__error {
	margin: 0.4rem 0 0;
	color: var(--frg-danger);
	font-size: 1.35rem;
	font-weight: 600;
}

.frg-field__error:empty {
	display: none;
}

.frg-calc__optional {
	border-top: 1px solid var(--frg-line);
	padding-top: 1.2rem;
}

.frg-calc__optional > summary {
	cursor: pointer;
	color: var(--frg-accent-strong);
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1.2rem;
}

.frg-calc__optional:not([open]) > summary {
	margin-bottom: 0;
}

.frg-calc__actions,
.frg-calc__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.2rem;
}

.frg-btn {
	min-height: 4.4rem;
	padding: 0.8rem 1.6rem;
	border: 2px solid var(--frg-accent);
	border-radius: 0.8rem;
	background: transparent;
	color: var(--frg-accent-strong);
	font: inherit;
	font-size: 1.5rem;
	font-weight: 600;
	cursor: pointer;
}

.frg-btn:hover {
	background: var(--frg-accent-soft);
}

.frg-btn--ghost {
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}

.frg-btn:disabled {
	border-color: var(--frg-line);
	color: var(--frg-muted);
	background: transparent;
	cursor: not-allowed;
	text-decoration: none;
}

.frg-currency {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
	color: var(--frg-muted);
	font-size: 1.4rem;
}

.frg-currency select {
	min-height: 4rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--frg-line-strong);
	border-radius: 0.6rem;
	background: var(--frg-paper);
	color: var(--frg-ink);
	font: inherit;
	font-size: 1.5rem;
}

.frg-calc__output {
	display: grid;
	gap: 1.6rem;
	padding: 2rem;
	border-radius: 1rem;
	background: var(--frg-surface);
	border: 1px solid var(--frg-line);
}

.frg-result__name {
	margin: 0;
	color: var(--frg-muted);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.frg-result__value {
	margin: 0.2rem 0 0.4rem;
	color: var(--frg-ink);
	font-size: clamp(3.2rem, 8cqi, 4.4rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.frg-result[data-state="empty"] .frg-result__value,
.frg-result[data-state="missing"] .frg-result__value,
.frg-result[data-state="invalid"] .frg-result__value,
.frg-result[data-state="zero_denominator"] .frg-result__value,
.frg-result[data-state="not_meaningful"] .frg-result__value {
	color: var(--frg-line-strong);
}

.frg-result__sentence {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.5;
}

.frg-result__meaning {
	margin: 0;
	color: var(--frg-muted);
	font-size: 1.45rem;
	line-height: 1.55;
}

.frg-result__meaning:empty {
	display: none;
}

.frg-companions {
	display: grid;
	gap: 0.8rem;
	margin: 0;
	padding: 1.2rem 0 0;
	border-top: 1px solid var(--frg-line);
}

.frg-companions[hidden],
.frg-steps[hidden],
.frg-notes[hidden] {
	display: none;
}

.frg-companions div {
	display: flex;
	justify-content: space-between;
	gap: 1.2rem;
	font-size: 1.5rem;
}

.frg-companions dt {
	color: var(--frg-muted);
}

.frg-companions dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.frg-steps__title {
	margin: 0 0 0.6rem;
	font-size: 1.4rem;
	font-weight: 600;
}

.frg-steps__list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding-left: 2rem;
	font-size: 1.45rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.frg-step__label {
	font-weight: 600;
}

.frg-notes {
	margin: 0;
	padding: 1rem 1.2rem 1rem 3rem;
	border-left: 3px solid var(--frg-accent);
	background: var(--frg-paper);
	font-size: 1.45rem;
	line-height: 1.5;
}

.frg-calc__copy-status {
	color: var(--frg-muted);
	font-size: 1.4rem;
}

.frg-calc__noscript {
	margin: 1.6rem 0 0;
	color: var(--frg-muted);
}

/* ---------- Formula anatomy ---------- */

.frg-formula {
	margin: 0;
	padding: 2rem 2.4rem;
	border: 1px solid var(--frg-line);
	border-radius: var(--frg-radius);
	background: var(--frg-paper);
	color: var(--frg-ink);
}

.frg-formula__equation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	margin-bottom: 1.4rem;
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	font-weight: 600;
}

.frg-formula__fraction {
	display: inline-grid;
	text-align: center;
}

.frg-formula__numerator {
	padding: 0 0.8rem 0.6rem;
	border-bottom: 2px solid var(--frg-ink);
}

.frg-formula__denominator {
	padding: 0.6rem 0.8rem 0;
}

.frg-formula__text {
	color: var(--frg-muted);
	font-size: 1.5rem;
	line-height: 1.5;
}

/* ---------- Worked example ---------- */

.frg-example {
	padding: 2rem 2.4rem;
	border-radius: var(--frg-radius);
	background: var(--frg-surface-muted);
	color: var(--frg-ink);
}

.frg-example__label {
	margin: 0 0 1.2rem;
	color: var(--frg-muted);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.frg-example__inputs {
	display: grid;
	gap: 0.4rem;
	margin: 0 0 1.6rem;
}

.frg-example__row {
	display: flex;
	justify-content: space-between;
	gap: 1.6rem;
	padding: 0.4rem 0;
	border-bottom: 1px dotted var(--frg-line);
	font-size: 1.5rem;
}

.frg-example__row dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.frg-example__result {
	margin: 1.6rem 0 0;
	font-weight: 600;
}

.frg-example__note {
	margin: 0.8rem 0 0;
	color: var(--frg-muted);
	font-size: 1.45rem;
}

.frg-formula-notes,
.frg-sources,
.frg-related {
	display: grid;
	gap: 0.8rem;
	padding-left: 2rem;
	line-height: 1.55;
}

.frg-related__why {
	color: var(--ink-muted, #4a5568);
	font-size: 0.9em;
}

/* ---------- Breadcrumbs ---------- */

.frg-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.4rem;
}

.frg-breadcrumbs li:not(:last-child)::after {
	content: "›";
	margin-left: 0.6rem;
	color: var(--frg-muted);
}

.frg-breadcrumbs a {
	color: var(--frg-accent-strong);
}

.frg-breadcrumbs [aria-current] {
	color: var(--frg-muted);
}

/* ---------- Ad slots (build plan §11.3) ---------- */

.frg-ad {
	display: grid;
	gap: 0.4rem;
	width: 100%;
	margin: 2.4rem 0;
}

.frg-ad__label {
	color: var(--frg-muted);
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.frg-ad__slot {
	min-height: var(--frg-ad-height, 280px);
}

.frg-ad--preview .frg-ad__slot {
	border: 2px dashed var(--frg-line-strong);
	border-radius: 0.8rem;
	background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(124, 117, 104, 0.06) 12px 24px);
}

.frg-ad--preview .frg-ad__label {
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- Directory and hub ---------- */

.frg-directory {
	display: grid;
	gap: 3.2rem;
}

.frg-directory__controls {
	display: grid;
	gap: 1.2rem;
	padding: 2rem;
	border: 1px solid var(--frg-line);
	border-radius: var(--frg-radius);
	background: var(--frg-paper);
}

.frg-directory__controls[hidden],
.frg-directory__group[hidden],
.frg-directory__item[hidden] {
	display: none;
}

.frg-directory__search {
	display: grid;
	gap: 0.6rem;
	font-weight: 600;
}

.frg-directory__search input {
	min-height: 4.4rem;
	padding: 0.8rem 1.2rem;
	border: 1px solid var(--frg-line-strong);
	border-radius: 0.8rem;
	font: inherit;
	font-weight: 400;
}

.frg-directory__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.6rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.frg-directory__cats legend {
	margin-bottom: 0.6rem;
	font-weight: 600;
}

.frg-directory__cats label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3.2rem;
	cursor: pointer;
}

.frg-directory__count {
	margin: 0;
	color: var(--frg-muted);
	font-size: 1.4rem;
}

.frg-directory__heading {
	margin: 0 0 0.4rem;
}

.frg-directory__heading a {
	color: inherit;
	text-decoration: none;
}

.frg-directory__heading a:hover {
	text-decoration: underline;
}

.frg-directory__question {
	margin: 0 0 1.6rem;
	color: var(--frg-muted);
}

.frg-directory__list,
.frg-hub__list {
	display: grid;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.frg-directory__list,
	.frg-hub__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.frg-directory__item,
.frg-hub__item {
	display: grid;
	gap: 0.4rem;
	padding: 1.6rem 1.8rem;
	border: 1px solid var(--frg-line);
	border-radius: 1rem;
	background: var(--frg-paper);
}

.frg-directory__link,
.frg-hub__link {
	color: var(--frg-ink);
	font-size: 1.7rem;
	font-weight: 650;
	text-decoration: underline;
	text-decoration-color: var(--frg-line-strong);
	text-underline-offset: 0.3rem;
}

.frg-directory__link:hover,
.frg-hub__link:hover {
	color: var(--frg-accent-strong);
}

.frg-directory__acronym {
	color: var(--frg-muted);
	font-size: 1.4rem;
	text-decoration: none;
}

.frg-directory__kind,
.frg-hub__meta {
	color: var(--frg-muted);
	font-size: 1.3rem;
}

.frg-directory__formula {
	color: var(--frg-muted);
	font-family: inherit;
	font-size: 1.4rem;
	line-height: 1.45;
	white-space: normal;
}

.frg-review {
	display: inline-block;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background: #fffbeb;
	color: #78350f;
	font-size: 1.3rem;
}

@media print {
	.frg-ad,
	.frg-calc__actions,
	.frg-calc__tools,
	.frg-directory__controls {
		display: none !important;
	}
}

/* ---------- Page layout used by the Bricks templates ---------- */

.frg-page-hero {
	padding: 4.8rem 2rem 3.2rem;
	border-bottom: 1px solid var(--line, #dcd6ca);
	background: var(--surface, #fbfaf7);
}

.brxe-container.frg-page-hero__inner {
	row-gap: 1.6rem;
}

.frg-page-hero h1 {
	max-width: 26ch;
	margin: 0;
	text-wrap: balance;
}

.frg-lede,
.frg-page-hero .brxe-post-excerpt {
	max-width: 62ch;
	margin: 0;
	color: var(--ink-muted, #4a5568);
	font-size: var(--text-l, 2rem);
	line-height: 1.5;
}

.frg-page-body {
	padding: 4rem 2rem 6.4rem;
}

.brxe-container.frg-page__grid {
	display: grid;
	gap: 4.8rem;
	align-items: start;
}

@media (min-width: 992px) {
	.brxe-container.frg-page__grid {
		grid-template-columns: minmax(0, 1fr) 30rem;
	}
}

.brxe-block.frg-page__main,
.brxe-block.frg-page__aside {
	display: flex;
	flex-direction: column;
	row-gap: 2.4rem;
	min-width: 0;
}

.frg-page__main > *,
.frg-page__aside > * {
	width: 100%;
	max-width: 100%;
}

.frg-section-title {
	margin: 1.6rem 0 1.2rem;
	font-size: var(--text-xl, 2.8rem);
}

.frg-page__aside .frg-section-title {
	margin-top: 0;
	font-size: var(--text-m, 1.8rem);
}

.frg-page__aside .frg-related {
	padding-left: 1.8rem;
	font-size: 1.5rem;
}

.frg-prose {
	max-width: 72ch;
	font-size: var(--text-m, 1.8rem);
	line-height: 1.7;
}

.frg-prose > * {
	margin-top: 0;
	margin-bottom: 1.6rem;
}

.frg-prose h2 {
	margin-top: 4rem;
	font-size: var(--text-xl, 2.8rem);
}

.frg-prose h3 {
	margin-top: 3.2rem;
	font-size: var(--text-l, 2.2rem);
}

.frg-prose ul,
.frg-prose ol {
	padding-left: 2.4rem;
}

.frg-prose li + li {
	margin-top: 0.6rem;
}

.frg-prose a,
.frg-sources a,
.frg-related a,
.frg-formula-notes a {
	color: var(--accent-strong, #115e59);
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}

.frg-prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.frg-prose th,
.frg-prose td {
	padding: 0.8rem 1.2rem;
	border-bottom: 1px solid var(--line, #dcd6ca);
	text-align: left;
	vertical-align: top;
}

.frg-disclaimer {
	margin: 1.6rem 0 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line, #dcd6ca);
	color: var(--ink-muted, #4a5568);
	font-size: 1.45rem;
	line-height: 1.6;
}

.frg-notfound__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}

/* ---------- Header search ---------- */

.frg-search {
	--frg-ink: var(--ink, #14213d);
	--frg-line: var(--line, #dcd6ca);
	--frg-line-strong: var(--line-strong, #7c7568);
	--frg-accent: var(--accent, #0f766e);
	--frg-accent-soft: var(--accent-soft, #e7f3f1);
}

.frg-search__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 4rem;
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--frg-line-strong);
	border-radius: 0.8rem;
	background: transparent;
	color: var(--frg-ink);
	font: inherit;
	font-size: 1.5rem;
	cursor: pointer;
}

.frg-search__toggle[hidden] {
	display: none;
}

.frg-search__toggle:hover {
	background: var(--frg-accent-soft);
}

@media (max-width: 478px) {
	.frg-search__toggle-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
}

.frg-search__dialog {
	width: min(64rem, calc(100vw - 3.2rem));
	max-height: min(70vh, 56rem);
	margin: 10vh auto auto;
	padding: 1.6rem;
	border: 1px solid var(--frg-line);
	border-radius: 1.2rem;
	background: var(--paper, #fff);
	color: var(--frg-ink);
	box-shadow: 0 24px 60px rgba(20, 33, 61, 0.25);
}

.frg-search__dialog::backdrop {
	background: rgba(20, 33, 61, 0.45);
}

.frg-search__form {
	display: flex;
	gap: 0.8rem;
}

.frg-search__input {
	flex: 1;
	min-width: 0;
	min-height: 4.8rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--frg-line-strong);
	border-radius: 0.8rem;
	font: inherit;
	font-size: 1.8rem;
}

.frg-search__input:focus {
	outline: 3px solid var(--frg-accent);
	outline-offset: 1px;
}

.frg-search__results {
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.frg-search__option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2rem;
	border-radius: 0.8rem;
}

.frg-search__option a {
	flex: 1;
	padding: 1rem 1.2rem;
	color: var(--frg-ink);
	font-size: 1.7rem;
	text-decoration: none;
}

.frg-search__option[aria-selected="true"],
.frg-search__option:hover {
	background: var(--frg-accent-soft);
	outline: 2px solid var(--frg-accent);
}

.frg-search__option mark {
	background: transparent;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

.frg-search__type {
	padding-right: 1.2rem;
	color: var(--ink-muted, #4a5568);
	font-size: 1.3rem;
}

.frg-search__empty {
	margin-top: 1.2rem;
	font-size: 1.5rem;
}

.frg-search__empty ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	padding: 0;
	list-style: none;
}

/* ---------- Comparison calculator ---------- */

.frg-calc__output--compare {
	display: grid;
	gap: 1.6rem;
	padding: 0;
	border: 0;
	background: transparent;
}

.frg-compare-panel {
	display: grid;
	gap: 1.2rem;
	align-content: start;
	padding: 2rem;
	border: 1px solid var(--frg-line);
	border-radius: 1rem;
	background: var(--frg-surface);
}

@container (min-width: 720px) {
	.frg-calc--compare .frg-calc__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.frg-calc--compare .frg-calc__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.frg-calc__output--compare {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.frg-calc__output--compare .frg-calc__tools,
	.frg-calc__output--compare [data-role="announce"] {
		grid-column: 1 / -1;
	}
}

.frg-compare-formulas {
	display: grid;
	gap: 1.6rem;
}

@media (min-width: 768px) {
	.frg-compare-formulas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.brxe-container.frg-page__grid--wide {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Embed control, cheat sheet, sources ---------- */

.frg-embed {
	padding: 1.2rem 1.6rem;
	border: 1px solid var(--line, #dcd6ca);
	border-radius: 0.8rem;
}

.frg-embed summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--accent-strong, #115e59);
}

.frg-embed__code {
	width: 100%;
	margin-top: 0.8rem;
	padding: 0.8rem;
	border: 1px solid var(--line-strong, #7c7568);
	border-radius: 0.6rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.3rem;
	resize: vertical;
}

.frg-cheatsheet__group {
	margin-bottom: 3.2rem;
}

.frg-cheatsheet table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.5rem;
}

.frg-cheatsheet th,
.frg-cheatsheet td {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--line, #dcd6ca);
	text-align: left;
	vertical-align: top;
}

.frg-cheatsheet thead th {
	color: var(--ink-muted, #4a5568);
	font-size: 1.3rem;
	font-weight: 600;
}

.frg-cheatsheet__variant th {
	padding-left: 2.4rem;
	font-weight: 400;
	color: var(--ink-muted, #4a5568);
}

.frg-cheatsheet__acr,
.frg-cheatsheet__note,
.frg-source-list__supports {
	color: var(--ink-muted, #4a5568);
	font-size: 0.9em;
}

.frg-source-list > li + li {
	margin-top: 1.2rem;
}

.frg-source-list p {
	margin: 0;
}

@media print {
	#brx-header,
	#brx-footer,
	#wpadminbar,
	.frg-breadcrumbs,
	.frg-cheatsheet__actions,
	.frg-embed,
	.frg-search {
		display: none !important;
	}

	html,
	body {
		background: #fff !important;
	}

	.frg-page-hero,
	.frg-page-body {
		padding: 0 !important;
		border: 0 !important;
	}

	.frg-cheatsheet table {
		font-size: 10pt;
	}

	.frg-cheatsheet__group {
		break-inside: avoid-page;
	}

	.frg-cheatsheet a {
		color: inherit;
		text-decoration: none;
	}
}

/* ---------- Financial Statement Map ---------- */

.frg-map {
	--frg-ink: var(--ink, #14213d);
	--frg-muted: var(--ink-muted, #4a5568);
	--frg-line: var(--line, #dcd6ca);
	--frg-accent: var(--accent, #0f766e);
	--frg-accent-strong: var(--accent-strong, #115e59);
	--frg-accent-soft: var(--accent-soft, #e7f3f1);
	display: grid;
	gap: 2rem;
	padding: clamp(1.6rem, 3vw, 2.8rem);
	border: 1px solid var(--frg-line);
	border-radius: 1.2rem;
	background: var(--paper, #fff);
	color: var(--frg-ink);
}

.frg-map__title {
	margin: 0 0 0.6rem;
	font-size: var(--text-l, 2.2rem);
}

.frg-map__intro {
	margin: 0;
	font-size: 1.6rem;
}

.frg-map__label {
	margin: 0.6rem 0 0;
	color: var(--frg-muted);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.frg-map__grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 900px) {
	.frg-map__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
	}
}

.frg-map__panel-title {
	margin: 0 0 0.8rem;
	font-size: 1.7rem;
}

.frg-map__group {
	margin: 1.2rem 0 0.4rem;
	color: var(--frg-muted);
	font-size: 1.3rem;
	font-weight: 600;
}

.frg-map__list {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.frg-map__item,
.frg-map__ratio {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.2rem 1.2rem;
	width: 100%;
	min-height: 4.4rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--frg-line);
	border-radius: 0.8rem;
	background: var(--paper, #fff);
	color: var(--frg-ink);
	font: inherit;
	font-size: 1.5rem;
	text-align: left;
	cursor: pointer;
}

.frg-map__item.is-subtotal .frg-map__name {
	font-weight: 600;
}

.frg-map__item:disabled {
	cursor: default;
}

.frg-map__value {
	font-variant-numeric: tabular-nums;
}

.frg-map__role {
	grid-column: 1 / -1;
	color: var(--frg-accent-strong);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.frg-map__role:empty {
	display: none;
}

.frg-map__item.is-related,
.frg-map__ratio.is-related {
	border-color: var(--frg-accent);
	background: var(--frg-accent-soft);
	box-shadow: inset 4px 0 0 var(--frg-accent);
}

.frg-map__item.is-selected,
.frg-map__ratio.is-selected {
	border: 2px solid var(--frg-ink);
	background: var(--frg-accent-soft);
	font-weight: 600;
}

.frg-map__detail {
	min-height: 8rem;
	padding: 1.6rem 2rem;
	border-radius: 1rem;
	background: var(--surface, #fbfaf7);
	border: 1px solid var(--frg-line);
	font-size: 1.55rem;
}

.frg-map__detail p {
	margin: 0 0 0.8rem;
}

.frg-map__detail-title {
	font-size: 1.7rem;
	font-weight: 700;
}

.frg-map__hint,
.frg-map__note {
	color: var(--frg-muted);
}

.frg-map__uses {
	margin: 0;
	padding-left: 2rem;
}

.frg-map__detail a,
.frg-map__text a {
	color: var(--frg-accent-strong);
	text-decoration: underline;
}

.frg-map__text summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--frg-accent-strong);
}

.frg-map__text dt {
	margin-top: 1rem;
	font-weight: 600;
}

.frg-map__text dd {
	margin: 0.2rem 0 0;
}

.frg-search--field {
	width: 100%;
	max-width: 56rem;
}

.frg-search--field .frg-search__toggle {
	width: 100%;
	min-height: 5.6rem;
	padding: 0.8rem 1.6rem;
	border: 2px solid var(--frg-line-strong);
	background: var(--paper, #fff);
	color: var(--ink-muted, #4a5568);
	font-size: 1.7rem;
	text-align: left;
}

.frg-search--field .frg-search__toggle-text {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

/* ---------- Result visuals ---------- */

.frg-visual {
	display: grid;
	gap: 0.8rem;
	margin: 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--frg-line);
}

.frg-visual[hidden] {
	display: none;
}

.frg-visual__caption {
	font-size: 1.4rem;
	font-weight: 600;
}

.frg-visual__legend {
	margin: 0;
	color: var(--frg-muted);
	font-size: 1.4rem;
	line-height: 1.5;
}

.frg-share {
	height: 1.6rem;
	border: 1px solid var(--frg-line-strong);
	border-radius: 999px;
	background: var(--frg-paper);
	overflow: hidden;
}

.frg-share__fill {
	display: block;
	height: 100%;
	background: var(--frg-accent);
}

.frg-dupont {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.frg-dupont__factor {
	display: grid;
	gap: 0.1rem;
	min-width: 9rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--frg-line);
	border-radius: 0.8rem;
	background: var(--frg-paper);
}

.frg-dupont__factor.is-result {
	border: 2px solid var(--frg-accent);
}

.frg-dupont__role {
	color: var(--frg-muted);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.frg-dupont__name {
	font-size: 1.3rem;
}

.frg-dupont__value {
	font-size: 1.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.frg-dupont__op {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--frg-muted);
}

.frg-cycle {
	display: grid;
	gap: 0.6rem;
}

.frg-cycle__row {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	align-items: center;
	gap: 0.8rem;
	font-size: 1.3rem;
}

.frg-cycle__lane {
	display: block;
	height: 1.4rem;
	border-radius: 0.4rem;
	background: var(--frg-surface-muted);
}

.frg-cycle__bar {
	display: block;
	height: 100%;
	border-radius: 0.4rem;
	background: var(--frg-accent);
}

.frg-cycle__bar.is-receivables {
	background: var(--frg-accent-strong);
}

.frg-cycle__bar.is-payables {
	background: repeating-linear-gradient(45deg, var(--frg-line-strong) 0 6px, var(--frg-paper) 6px 10px);
	border: 1px solid var(--frg-line-strong);
}

.frg-cycle__bar.is-gap {
	background: var(--frg-ink);
}

.frg-cycle__bar.is-negative {
	background: repeating-linear-gradient(-45deg, var(--frg-ink) 0 6px, var(--frg-paper) 6px 10px);
	border: 1px solid var(--frg-ink);
}

@media (max-width: 478px) {
	.frg-cycle__row {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

.brxe-container.frg-page__grid--article {
	max-width: min(76rem, 100%);
}

@media (min-width: 992px) {
	.brxe-container.frg-page__grid--article {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Worked-example charts (Charts.php) ---------- */

.frg-chart {
	display: grid;
	gap: 1.2rem;
	margin: 1.6rem 0 0;
	padding: 1.6rem;
	border: 1px solid var(--frg-line);
	border-radius: var(--frg-radius);
	background: var(--frg-paper);
}

.frg-chart__title {
	text-align: left;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--frg-ink);
}

.frg-chart__summary {
	margin: 0;
	color: var(--frg-muted);
	font-size: 1.5rem;
	line-height: 1.55;
}

.frg-bars {
	display: grid;
	gap: 1rem;
}

.frg-bars__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "label value" "track track";
	gap: 0.4rem 1.2rem;
	align-items: end;
	font-size: 1.4rem;
}

.frg-bars__label {
	grid-area: label;
	color: var(--frg-ink);
}

.frg-bars__value {
	grid-area: value;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.frg-bars__track {
	grid-area: track;
	display: block;
	height: 2.4rem;
	border-radius: 0.6rem;
	background: var(--frg-surface-muted);
	overflow: hidden;
}

.frg-bars__bar {
	display: flex;
	height: 100%;
	min-width: 2px;
	border-radius: 0.6rem;
	background: var(--frg-accent);
	overflow: hidden;
}

.frg-bars__row.is-denominator .frg-bars__bar {
	background: var(--frg-ink);
}

.frg-bars__row.is-part .frg-bars__bar {
	background: var(--frg-accent-soft);
	box-shadow: inset 0 0 0 2px var(--frg-accent);
}

.frg-bars__row.is-result .frg-bars__bar {
	background: repeating-linear-gradient(135deg, var(--frg-accent-strong) 0 8px, var(--frg-accent) 8px 16px);
}

.frg-bars__row.is-result .frg-bars__label {
	font-weight: 700;
}

.frg-bars__seg {
	display: block;
	height: 100%;
	border-right: 2px solid var(--frg-paper);
}

.frg-bars__seg:last-child {
	border-right: 0;
}

.frg-bars__seg.is-seg-0,
.frg-chart__swatch.is-seg-0 {
	background: #0f766e;
}

.frg-bars__seg.is-seg-1,
.frg-chart__swatch.is-seg-1 {
	background: #5fb3a6;
}

.frg-bars__seg.is-seg-2,
.frg-chart__swatch.is-seg-2 {
	background: #c2853d;
}

.frg-bars__seg.is-seg-3,
.frg-chart__swatch.is-seg-3 {
	background: #5b6b8c;
}

.frg-bars__seg.is-seg-4,
.frg-chart__swatch.is-seg-4 {
	background: #cfc8ba;
}

.frg-chart__key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.4rem;
}

.frg-chart__key li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.frg-chart__swatch {
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 0.3rem;
}

.frg-chart .frg-dupont__factor {
	flex: 1 1 12rem;
}

.frg-breakeven {
	display: block;
	width: 100%;
	max-width: 60rem;
	height: auto;
	font-family: inherit;
}

.frg-breakeven__axis {
	stroke: var(--frg-line-strong);
	stroke-width: 1;
}

.frg-breakeven__fixed {
	stroke: var(--frg-line-strong);
	stroke-width: 2;
	stroke-dasharray: 6 5;
}

.frg-breakeven__cost {
	stroke: var(--frg-ink);
	stroke-width: 3;
}

.frg-breakeven__revenue {
	stroke: var(--frg-accent);
	stroke-width: 3;
}

.frg-breakeven__guide {
	stroke: var(--frg-ink);
	stroke-width: 1;
	stroke-dasharray: 3 4;
}

.frg-breakeven__point {
	fill: var(--frg-paper);
	stroke: var(--frg-ink);
	stroke-width: 3;
}

.frg-breakeven__loss {
	fill: rgba(180, 35, 24, 0.1);
}

.frg-breakeven__profit {
	fill: rgba(15, 118, 110, 0.14);
}

.frg-breakeven__tick {
	fill: var(--frg-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.frg-breakeven__axis-label {
	fill: var(--frg-muted);
	font-size: 12px;
}

.frg-breakeven__zone {
	fill: var(--frg-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.frg-breakeven__key {
	margin-top: 0.8rem;
}

.frg-chart__line {
	display: inline-block;
	width: 2.4rem;
	height: 0;
	border-top: 3px solid var(--frg-ink);
}

.frg-chart__line.is-revenue {
	border-top-color: var(--frg-accent);
}

.frg-chart__line.is-fixed {
	border-top: 2px dashed var(--frg-line-strong);
}

/* ---------- Homepage hero picture (HeroVisual.php) ---------- */

@media (min-width: 992px) {
	#home-hero-inner {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-auto-rows: auto;
		column-gap: 6.4rem;
		align-items: start;
	}

	#home-hero-inner > * {
		grid-column: 1;
	}

	#home-hero-inner > #home-hero-visual {
		grid-column: 2;
		grid-row: 1 / span 6;
		align-self: center;
	}
}

#home-hero-visual {
	width: 100%;
}

.frg-hero-viz {
	display: grid;
	gap: 1.4rem;
	margin: 0;
	padding: 2rem;
	border: 1px solid var(--frg-line);
	border-radius: 1.6rem;
	background: var(--frg-paper);
	box-shadow: 0 1px 2px rgba(20, 33, 61, 0.06), 0 12px 32px -12px rgba(20, 33, 61, 0.18);
}

.frg-hero-viz__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.4rem 1.2rem;
	text-align: left;
}

.frg-hero-viz__title {
	color: var(--frg-ink);
	font-size: 1.5rem;
	font-weight: 700;
}

.frg-hero-viz__note {
	color: var(--frg-muted);
	font-size: 1.3rem;
}

.frg-hero-viz__sheet {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
	height: 30rem;
}

.frg-hero-viz__col {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
}

.frg-hero-viz__col-title {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 0.8rem;
	min-height: 2rem;
	color: var(--frg-muted);
	font-size: 1.3rem;
}

.frg-hero-viz__col-title strong {
	color: var(--frg-ink);
}

.frg-hero-viz__stack {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-height: 0;
}

.frg-hero-viz__block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	flex-basis: 0;
	min-height: 0;
	padding: 0 1rem;
	overflow: hidden;
	border-radius: 0.5rem;
	background: var(--frg-surface-muted);
	color: var(--frg-ink);
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.frg-hero-viz__block.is-num {
	background: var(--frg-accent);
	color: #fff;
}

.frg-hero-viz__block.is-den {
	background: var(--frg-ink);
	color: #fff;
}

.frg-hero-viz__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 1.25rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.frg-hero-viz__value {
	flex: none;
	font-size: 1.3rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.frg-hero-viz__ratios {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.frg-hero-viz__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	min-height: 3.6rem;
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--frg-line);
	border-radius: 999px;
	background: var(--frg-paper);
	color: var(--frg-ink);
	font: inherit;
	font-size: 1.35rem;
	cursor: pointer;
}

.frg-hero-viz__chip:hover {
	border-color: var(--frg-accent);
}

.frg-hero-viz__chip:focus-visible {
	outline: 3px solid var(--frg-accent);
	outline-offset: 2px;
}

.frg-hero-viz__chip[aria-pressed="true"] {
	border-color: var(--frg-ink);
	background: var(--frg-ink);
	color: #fff;
}

.frg-hero-viz__chip-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.frg-hero-viz__readout {
	display: grid;
	gap: 0.2rem;
	padding: 1.2rem 1.4rem;
	border-radius: 1rem;
	background: var(--frg-surface);
	font-size: 1.4rem;
}

.frg-hero-viz__readout p {
	margin: 0;
}

.frg-hero-viz__formula {
	font-weight: 700;
}

.frg-hero-viz__calc {
	color: var(--frg-muted);
	font-variant-numeric: tabular-nums;
}

.frg-hero-viz__link {
	margin-top: 0.4rem;
	color: var(--frg-accent-strong);
	font-weight: 600;
}

.frg-hero-viz__key {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	color: var(--frg-muted);
	font-size: 1.3rem;
}

.frg-hero-viz__key span {
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 0.3rem;
	background: var(--frg-accent);
}

.frg-hero-viz__key span.is-den {
	margin-left: 1rem;
	background: var(--frg-ink);
}

@media (max-width: 478px) {
	.frg-hero-viz {
		padding: 1.4rem;
	}

	.frg-hero-viz__sheet {
		gap: 0.8rem;
		height: 40rem;
	}

	.frg-hero-viz__col-title {
		display: grid;
		min-height: 3.6rem;
	}

	.frg-hero-viz__block {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0;
		padding: 0 0.6rem;
	}

	.frg-hero-viz__label {
		max-width: 100%;
		font-size: 1.15rem;
	}

	.frg-hero-viz__value {
		font-size: 1.2rem;
	}
}

/* ---------- Guide sidebar: contents list and more guides ---------- */

@media (min-width: 992px) {
	.frg-page__grid--guide .frg-page__aside {
		position: sticky;
		top: 2.4rem;
	}
}

.frg-toc {
	padding: 1.6rem 1.8rem;
	border: 1px solid var(--frg-line);
	border-radius: var(--frg-radius);
	background: var(--frg-paper);
}

.frg-toc__title {
	margin: 0 0 0.8rem;
	color: var(--frg-muted);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.frg-toc__list {
	display: grid;
	gap: 0.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
	font-size: 1.5rem;
	line-height: 1.4;
}

.frg-toc__list li {
	counter-increment: toc;
}

.frg-toc__list a {
	display: flex;
	gap: 0.8rem;
	padding: 0.5rem 0;
	color: var(--frg-ink);
	text-decoration: none;
}

.frg-toc__list a::before {
	content: counter(toc);
	min-width: 1.6rem;
	color: var(--frg-accent-strong);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.frg-toc__list a:hover {
	color: var(--frg-accent-strong);
	text-decoration: underline;
}

.frg-more .frg-related {
	font-size: 1.5rem;
}

.frg-prose h2[id] {
	scroll-margin-top: 2.4rem;
}

/* ---------- Comparison chart: both formulas from the same figures ---------- */

.frg-compare-chart__grid {
	display: grid;
	gap: 1.6rem;
	margin-top: 1.6rem;
}

@media (min-width: 768px) {
	.frg-compare-chart__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.frg-compare-chart__item {
	display: grid;
	align-content: start;
	min-width: 0;
}

.frg-compare-chart__name {
	margin: 0;
	font-size: 1.7rem;
}

.frg-compare-chart__item .frg-chart {
	margin-top: 0.8rem;
	height: 100%;
}

/* ---------- Guide figures (Figures.php) ---------- */

.frg-flow {
	display: grid;
	gap: 0.8rem;
}

@media (min-width: 768px) {
	.frg-flow--statements {
		grid-template-columns: minmax(0, 1fr) 10rem minmax(0, 1fr) 10rem minmax(0, 1fr);
		align-items: center;
	}
}

.frg-flow__card {
	padding: 1.2rem 1.4rem;
	border: 2px solid var(--frg-line);
	border-top-width: 6px;
	border-radius: 1rem;
	background: var(--frg-surface);
	font-size: 1.4rem;
}

.frg-flow__card.is-income {
	border-top-color: var(--frg-accent);
}

.frg-flow__card.is-balance {
	border-top-color: var(--frg-ink);
}

.frg-flow__card.is-cash {
	border-top-color: #c2853d;
}

.frg-flow__card p {
	margin: 0;
}

.frg-flow__title {
	font-size: 1.6rem;
	font-weight: 700;
}

.frg-flow__question {
	margin: 0.2rem 0 0.6rem !important;
	color: var(--frg-muted);
	line-height: 1.4;
}

.frg-flow__card ul {
	margin: 0;
	padding-left: 1.8rem;
}

.frg-flow__arrow {
	display: grid;
	place-items: center;
	color: var(--frg-muted);
	font-size: 1.25rem;
	line-height: 1.35;
	text-align: center;
}

.frg-flow__arrow::after {
	content: "\2193";
	color: var(--frg-accent-strong);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
}

@media (min-width: 768px) {
	.frg-flow__arrow::after {
		content: "\2192";
	}
}

.frg-steps-flow {
	display: grid;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 768px) {
	.frg-steps-flow {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.frg-steps-flow li {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	padding: 1.2rem;
	border-radius: 1rem;
	background: var(--frg-surface);
	font-size: 1.35rem;
	line-height: 1.4;
}

.frg-steps-flow strong {
	color: var(--frg-ink);
	font-size: 1.5rem;
}

.frg-steps-flow li > span:last-child {
	color: var(--frg-muted);
}

.frg-steps-flow__n {
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	background: var(--frg-accent);
	color: #fff;
	font-weight: 700;
}

.frg-compare-results {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.2rem;
}

.frg-compare-results p {
	display: grid;
	flex: 1 1 16rem;
	margin: 0;
	padding: 1rem 1.2rem;
	border-radius: 1rem;
	background: var(--frg-surface);
	font-size: 1.35rem;
}

.frg-compare-results strong {
	font-size: 2.2rem;
	font-variant-numeric: tabular-nums;
}

/* ---------- Hub cards with share images ---------- */

.frg-hub__item.has-image {
	position: relative;
	align-content: start;
	padding-top: 0;
	overflow: hidden;
}

.frg-hub__img {
	display: block;
	width: calc(100% + 3.6rem);
	max-width: none;
	height: auto;
	aspect-ratio: 1200 / 630;
	margin: 0 -1.8rem 1rem;
	border-bottom: 1px solid var(--frg-line);
	object-fit: cover;
}

/* The whole card is clickable through the title link. */
.frg-hub__item.has-image .frg-hub__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.frg-hub__item.has-image:hover {
	border-color: var(--frg-accent);
}

.frg-hub__item.has-image:focus-within {
	outline: 3px solid var(--frg-accent);
	outline-offset: 2px;
}

/* Larger radio buttons: a 20px target plus the clickable label. */
.frg-calc input[type="radio"],
.frg-directory input[type="radio"] {
	width: 2rem;
	height: 2rem;
	margin: 0;
	flex: none;
	accent-color: var(--frg-accent);
}

.frg-hub__notes {
	display: grid;
	gap: 0.6rem;
	max-width: 72ch;
	padding-left: 2rem;
	color: var(--frg-ink);
	font-size: 1.6rem;
	line-height: 1.6;
}