/* ==========================================================================
   Energie – design system (family of Overstapmaatje, calmer and data-first)
   Same ink + paper neutrals, Bricolage Grotesque headings, Instrument Sans body,
   hairline cards and the same button family. Own accent: dark teal, from the family's energy variant.
   Only the primary CTA (.ep-btn) gets the hard sticker shadow.
   All colours and spacing are tokens on :root, so the brand can be swapped.
   Fonts: self-hosted subsets from the Overstapmaatje theme, SIL Open Font License 1.1
   (assets/fonts/OFL-*.txt). No external requests.
   ========================================================================== */

@font-face {
	font-family: "Bricolage";
	src: url("../fonts/bricolage.woff2") format("woff2-variations"), url("../fonts/bricolage.woff2") format("woff2");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
}
@font-face {
	font-family: "Instrument";
	src: url("../fonts/instrument.woff2") format("woff2-variations"), url("../fonts/instrument.woff2") format("woff2");
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
}
/* Metric-matched fallbacks (numbers from the Overstapmaatje font build), so text doesn't jump at the swap. */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 800; size-adjust: 90.05%; ascent-override: 103.27%; descent-override: 29.98%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400 599; size-adjust: 103.33%; ascent-override: 93.87%; descent-override: 24.19%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 100.06%; ascent-override: 96.94%; descent-override: 24.98%; line-gap-override: 0%; }

:root {
	/* neutrals (shared with Overstapmaatje) */
	--ep-ink: #13291f;
	--ep-ink-2: #1f3d2f;
	--ep-text: #13291f;
	--ep-text-2: #354c40;
	--ep-muted: #56615c;           /* 6.4:1 on white */
	--ep-bg: #f5f7f0;              /* paper */
	--ep-surface: #ffffff;
	--ep-surface-2: #ebf0e4;
	--ep-border: #d3ddd0;
	--ep-border-strong: #8a978f;   /* form borders, 3:1 on white */

	/* accent: teal (the family's energy neckerchief colour), next to Overstapmaatje's frog green and sun yellow */
	--ep-accent: #0a6660;          /* dark text variant of the family teal #15a39a, 6.8:1 on white */
	--ep-accent-2: #08524e;        /* hover */
	--ep-accent-contrast: #ffffff;
	--ep-accent-soft: #dff2ef;
	--ep-sun: #ffd23f;             /* family accent, used only in the brand mark */
	--ep-frog: #6fd35b;

	/* status */
	--ep-good: #1d6e29;
	--ep-good-soft: #e5f6de;
	--ep-bad: #a8321f;
	--ep-bad-soft: #ffe8e3;
	--ep-warn: #7a5200;
	--ep-warn-soft: #fff4c7;
	--ep-warn-line: #d9a300;

	/* charts: colour-blind safe order, every colour ≥ 4.5:1 on white */
	--ep-chart-1: #0a6660;         /* teal */
	--ep-chart-2: #b4530a;         /* orange */
	--ep-chart-3: #8a3b8f;         /* plum */
	--ep-chart-4: #2c5aa0;         /* blue */
	--ep-chart-5: #56615c;         /* grey */
	--ep-chart-grid: #e3e9df;      /* gridlines */
	--ep-chart-axis: #56615c;      /* axis text and ticks, 6.4:1 */

	/* type */
	--ep-font: "Instrument", "Instrument Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ep-font-display: "Bricolage", "Bricolage Fallback", "Arial Narrow", system-ui, sans-serif;
	--ep-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--ep-t-h1: clamp(2rem, 1.5rem + 2vw, 2.9rem);
	--ep-t-hero: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem);
	--ep-t-h2: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
	--ep-t-h3: 1.2rem;
	--ep-t-lg: 1.125rem;
	--ep-t-sm: .9375rem;
	--ep-t-xs: .875rem;            /* 14px: the minimum anywhere */

	/* space and shape */
	--ep-space: 1rem;
	--ep-gutter: clamp(16px, 4vw, 40px);
	--ep-measure: 46.6em;          /* ~72ch of body text */
	--ep-wide: 1100px;
	--ep-radius: 16px;
	--ep-radius-sm: 12px;
	--ep-radius-ctl: 12px;         /* inputs and buttons */
	--ep-hair: 1px solid var(--ep-border);
	--ep-line: 2px solid var(--ep-ink);
	--ep-sticker: 3px 3px 0 var(--ep-ink);
	--ep-focus: var(--ep-ink);
	--ep-header-h: 64px;
	--ep-ease: cubic-bezier(.22, 1, .36, 1);
	color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ep-header-h) + 16px); }
body { margin: 0; background: var(--ep-bg); color: var(--ep-text); font: 400 1rem/1.6 var(--ep-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
/* links as on Overstapmaatje: ink text, coloured underline */
a { color: var(--ep-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: #12968d; }
a:hover { color: var(--ep-ink); text-decoration-color: var(--ep-ink); }
:focus-visible { outline: 3px solid var(--ep-focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ep-accent-soft); color: var(--ep-ink); }
h1, h2, h3, h4 { font-family: var(--ep-font-display); color: var(--ep-ink); line-height: 1.05; letter-spacing: -.015em; margin: 0; text-wrap: balance; font-weight: 750; font-stretch: 88%; }
h1 { font-size: var(--ep-t-h1); }
h2 { font-size: var(--ep-t-h2); }
h3 { font-size: var(--ep-t-h3); font-stretch: 96%; }
h4 { font-size: 1.05rem; font-stretch: 100%; }
p { margin: 0; }
b, strong { font-weight: 650; }
small { font-size: var(--ep-t-xs); }
code, kbd, samp { font-family: var(--ep-mono); font-size: .92em; }
hr { border: 0; border-top: var(--ep-hair); margin: 2rem 0; }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.ep-skip { position: absolute; left: -999px; top: 8px; z-index: 200; padding: 10px 14px; background: var(--ep-surface); color: var(--ep-ink); border: var(--ep-line); border-radius: var(--ep-radius-sm); font-weight: 700; }
.ep-skip:focus { left: 8px; }
.ep-wrap { width: 100%; max-width: calc(var(--ep-wide) + 2 * var(--ep-gutter)); margin-inline: auto; padding-inline: var(--ep-gutter); }
.ep-icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }
.ep-muted { color: var(--ep-muted); }
.ep-small { display: block; margin-top: 2px; font-size: var(--ep-t-xs); line-height: 1.45; font-weight: 400; }
.ep-eyebrow { font: 700 var(--ep-t-xs)/1.2 var(--ep-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ep-text-2); }
.ep-num, .ep-facts dd, table { font-variant-numeric: tabular-nums; }

/* ---------- buttons (same family as Overstapmaatje) ---------- */
.ep-btn, .ep-content a.ep-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: .7em 1.2em;
	font: 700 1rem/1.1 var(--ep-font); text-decoration: none; text-align: center;
	color: var(--ep-accent-contrast); background: var(--ep-accent);
	border: var(--ep-line); border-radius: var(--ep-radius-sm);
	box-shadow: var(--ep-sticker); cursor: pointer;
	transition: transform .15s var(--ep-ease), box-shadow .15s var(--ep-ease), background .15s;
}
.ep-btn:hover { color: var(--ep-accent-contrast); background: var(--ep-accent-2); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ep-ink); }
.ep-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ep-ink); }
.ep-btn--secondary, .ep-content a.ep-btn--secondary {
	color: var(--ep-ink); background: var(--ep-surface); border: 1.5px solid var(--ep-border-strong); box-shadow: none;
}
.ep-btn--secondary:hover { color: var(--ep-ink); background: var(--ep-surface-2); border-color: var(--ep-ink); transform: none; box-shadow: none; }
.ep-btn--secondary:active { transform: none; box-shadow: none; }
.ep-linkbtn { padding: 0; background: none; border: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ep-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
@media (max-width: 480px) { .ep-actions .ep-btn { flex: 1 1 100%; } }

/* forms (tools.css may refine) */
input[type=text], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=url], select, textarea {
	font: 500 1rem/1.3 var(--ep-font); color: var(--ep-ink); min-height: 46px; padding: .6em .85em; max-width: 100%;
	background: var(--ep-surface); border: 1.5px solid var(--ep-border-strong); border-radius: var(--ep-radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ep-ink); outline: 3px solid var(--ep-accent); outline-offset: 1px; }
label { font-weight: 600; }

/* ---------- header ---------- */
.ep-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ep-bg) 92%, transparent); backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.ep-header.is-scrolled { border-bottom-color: var(--ep-border); }
.ep-header__in { display: flex; align-items: center; gap: 1rem; min-height: var(--ep-header-h); }
.ep-brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; color: var(--ep-ink); text-decoration: none; min-width: 0; }
.ep-brand:hover { color: var(--ep-ink); }
.ep-brand__mark { width: 40px; height: 40px; flex: none; }
.ep-brand__text { display: flex; flex-direction: column; min-width: 0; }
.ep-brand__name { font: 780 1.2rem/1.05 var(--ep-font-display); font-stretch: 88%; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-brand__suffix { font: 500 var(--ep-t-xs)/1.2 var(--ep-font); color: var(--ep-muted); white-space: nowrap; }
.ep-brand--footer .ep-brand__suffix { color: #b5c7bb; }
.ep-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ep-nav__item { position: relative; }
.ep-nav__link, .ep-nav__btn { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: .5em .8em; border-radius: 10px; font: 600 .975rem/1.2 var(--ep-font); color: var(--ep-ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.ep-nav__link:hover, .ep-nav__btn:hover { background: var(--ep-surface-2); color: var(--ep-ink); }
.ep-nav__link[aria-current=page], .ep-nav__item.is-current > .ep-nav__btn { box-shadow: inset 0 -3px 0 var(--ep-accent); border-radius: 10px 10px 0 0; }
.ep-nav__chev { width: 1em; height: 1em; transition: transform .2s var(--ep-ease); }
.ep-nav__btn[aria-expanded=true] .ep-nav__chev { transform: rotate(180deg); }
.ep-nav__sub { list-style: none; margin: 0; padding: 6px; }
.ep-nav__sub a { display: block; padding: .6em .8em; border-radius: 8px; color: var(--ep-ink); text-decoration: none; font-weight: 500; }
.ep-nav__sub a:hover { background: var(--ep-surface-2); }
.ep-nav__sub a[aria-current=page] { font-weight: 700; box-shadow: inset 3px 0 0 var(--ep-accent); }
.ep-nav-toggle { display: none; align-items: center; gap: .4em; min-height: 44px; padding: .45em .9em; font: 700 .975rem/1 var(--ep-font); color: var(--ep-ink); background: var(--ep-surface); border: 1.5px solid var(--ep-border-strong); border-radius: var(--ep-radius-sm); cursor: pointer; }

@media (min-width: 901px) {
	.js .ep-nav__sub { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 240px; background: var(--ep-surface); border: var(--ep-hair); border-radius: 14px; box-shadow: 0 12px 32px rgb(19 41 31 / .12); display: none; }
	.js .ep-nav__item.is-open > .ep-nav__sub { display: block; }
	html:not(.js) .ep-nav__item.has-sub { display: flex; align-items: center; }
	html:not(.js) .ep-nav__sub { display: flex; padding: 0; }
}
@media (max-width: 900px) {
	.js .ep-nav-toggle { display: inline-flex; }
	.ep-header__in { flex-wrap: wrap; }
	html:not(.js) .ep-nav { width: 100%; }
	.js .ep-nav { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--ep-header-h)); max-height: calc(100dvh - var(--ep-header-h)); overflow: auto; padding: 8px var(--ep-gutter) 20px; background: var(--ep-bg); border-bottom: var(--ep-line); box-shadow: 0 24px 48px rgb(19 41 31 / .2); display: none; }
	.js .ep-nav.is-open { display: block; }
	.ep-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.ep-nav__item { border-bottom: 1px solid var(--ep-border); }
	.ep-nav__link, .ep-nav__btn { width: 100%; justify-content: space-between; min-height: 52px; padding: .8em .25em; font-size: 1.05rem; border-radius: 0; }
	.ep-nav__link[aria-current=page], .ep-nav__item.is-current > .ep-nav__btn { box-shadow: inset 4px 0 0 var(--ep-accent); padding-left: .8em; border-radius: 0; }
	.ep-nav__sub { padding: 0 0 10px 10px; }
	.js .ep-nav__sub { display: none; }
	.js .ep-nav__item.is-open > .ep-nav__sub { display: block; }
	.ep-nav__sub a { padding: .7em .8em; }
	html.ep-nav-open body::after { content: ""; position: fixed; inset: var(--ep-header-h) 0 0 0; background: rgb(19 41 31 / .3); z-index: 40; }
}

/* ---------- page layout ---------- */
.ep-main { padding-block: 0 clamp(48px, 7vw, 88px); }
.ep-main--home { padding-bottom: 0; }
.ep-page--default { max-width: calc(var(--ep-measure) + 2 * var(--ep-gutter) + 2rem); }
.ep-page:not(:has(.page-head)) { padding-top: clamp(20px, 4vw, 44px); }
.ep-page__head { margin-bottom: 1.25rem; }
.ep-page__head .ep-eyebrow { margin-bottom: .5rem; }

/* running text keeps a readable measure; blocks for data may use the full width */
.ep-content > * { max-width: var(--ep-measure); }
.ep-content > :is(.ep-hero, .ep-tool, .ep-table-wrap, .ep-cards, .ep-two, .ep-facts, .ep-section, .ep-band, .ep-steps, figure, .ep-toc, .ep-honest-row, .honest, .tool-cards, .kpis, .sumstrip, .compare, .hmini, .steps, .faq, .ep-help, .provider-grid) { max-width: none; }
.ep-page--default .ep-content > * { max-width: 100%; }
.ep-content > * + * { margin-top: 1rem; }
.ep-content > h2 { margin-top: 2.4rem; }
.ep-content > h3 { margin-top: 1.8rem; }
.ep-content > h2 + *, .ep-content > h3 + * { margin-top: .6rem; }
.ep-content > :first-child { margin-top: 0; }
.ep-content ul, .ep-content ol { padding-left: 1.3em; }
.ep-content li + li { margin-top: .35em; }
.ep-content li::marker { color: var(--ep-muted); }
.ep-content figure { margin-inline: 0; }
.ep-content figcaption { margin-top: .5rem; font-size: var(--ep-t-xs); color: var(--ep-muted); }
.ep-content blockquote { margin: 0; padding: .25rem 0 .25rem 1rem; border-left: 4px solid var(--ep-border); color: var(--ep-text-2); }
.ep-list { list-style: none; padding: 0; }

/* section helpers for the home page */
.ep-section { padding-block: clamp(32px, 5vw, 64px); }
.ep-section + .ep-section { border-top: var(--ep-hair); }
.ep-section > * + * { margin-top: 1rem; }
.ep-section > h2 + p { color: var(--ep-text-2); max-width: var(--ep-measure); }

/* ---------- hero ---------- */
.ep-hero { padding-block: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 48px); }
.ep-hero > * + * { margin-top: 1rem; }
.ep-hero h1 { font-size: var(--ep-t-hero); line-height: 1.02; max-width: 18em; font-stretch: 88%; letter-spacing: -.02em; }
.ep-hero .ep-lead { max-width: 36em; }
.ep-hero .ep-actions { margin-top: 1.5rem; }
.ep-lead { font-size: var(--ep-t-lg); line-height: 1.55; color: var(--ep-text-2); }
.ep-main--home .ep-hero { border-bottom: var(--ep-hair); margin-bottom: clamp(24px, 4vw, 48px); }

/* ---------- cards ---------- */
.ep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 1.25rem; }
.ep-content > .ep-cards { margin-top: 1.25rem; }
.ep-card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 20px 20px 18px; background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius); transition: border-color .15s; }
.ep-card:hover { border-color: var(--ep-border-strong); }
.ep-card h2, .ep-card h3 { font-size: 1.2rem; font-stretch: 96%; }
.ep-card p { color: var(--ep-text-2); font-size: var(--ep-t-sm); }
.ep-card > a:last-child { margin-top: auto; padding-top: .5rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .35em; }
.ep-card > a:last-child::after { content: ""; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--ep-arrow) center / contain no-repeat; mask: var(--ep-arrow) center / contain no-repeat; transition: transform .15s var(--ep-ease); }
.ep-card > a:last-child:hover { text-decoration: underline; }
.ep-card > a:last-child:hover::after { transform: translateX(3px); }
/* the whole card is clickable via its last link */
.ep-card > a:last-child::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ep-card:has(> a:last-child:focus-visible) { outline: 3px solid var(--ep-focus); outline-offset: 3px; }
.ep-card > a:last-child:focus-visible { outline: none; }
:root { --ep-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E"); --ep-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.9' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E"); --ep-i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.8 17.5A2 2 0 0 0 4.5 20.5h15a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); --ep-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.1 8.2-7.5 9.5-4.4-1.3-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.3-4.4'/%3E%3C/svg%3E"); }

/* ---------- callouts ---------- */
.ep-note, .ep-warn { position: relative; padding: 14px 16px 14px 48px; border-radius: var(--ep-radius-sm); font-size: var(--ep-t-sm); line-height: 1.55; color: var(--ep-text); }
.ep-note { background: var(--ep-accent-soft); border: 1px solid #b3dfd9; }
.ep-warn { background: var(--ep-warn-soft); border: 1px solid #f0d77a; }
.ep-note::before, .ep-warn::before { content: ""; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; background: var(--ep-accent); -webkit-mask: var(--ep-i-info) center / contain no-repeat; mask: var(--ep-i-info) center / contain no-repeat; }
.ep-warn::before { background: var(--ep-warn); -webkit-mask-image: var(--ep-i-warn); mask-image: var(--ep-i-warn); }
.ep-note > * + *, .ep-warn > * + * { margin-top: .5rem; }
.ep-note strong:first-child, .ep-warn strong:first-child { color: var(--ep-ink); }
.ep-note a, .ep-warn a { color: var(--ep-ink); }

/* honesty block ("Zo rekenen we", "Hier verdienen we niets aan"): calm card with a shield */
.ep-honest { position: relative; padding: 18px 20px 18px 58px; background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius); }
.ep-honest::before { content: ""; position: absolute; left: 20px; top: 19px; width: 24px; height: 24px; background: var(--ep-good); -webkit-mask: var(--ep-i-shield) center / contain no-repeat; mask: var(--ep-i-shield) center / contain no-repeat; }
.ep-honest > :is(h2, h3, h4) { font-size: 1.1rem; font-stretch: 96%; }
.ep-honest > * + * { margin-top: .4rem; }
.ep-honest p { color: var(--ep-text-2); font-size: var(--ep-t-sm); }
/* help block with the family helper ([ep_hulp]): explanation only, never next to amounts or buttons */
.ep-help { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 20px; background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius); }
.ep-help--plain { grid-template-columns: minmax(0, 1fr); }
.ep-help__fig { width: 88px; height: 88px; }
.ep-help__body > * + * { margin-top: .5rem; }
.ep-help__body > :is(h2, h3, h4) { font-size: 1.15rem; font-stretch: 96%; }
.ep-help__body p { color: var(--ep-text-2); }
@media (max-width: 480px) { .ep-help { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px; } .ep-help__fig { width: 64px; height: 64px; } }
.ep-honest-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }

/* ---------- key figures ---------- */
.ep-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-block: 1.25rem 0; padding: 0; }
.ep-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 16px 18px; background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius); }
.ep-facts dt { font-size: var(--ep-t-xs); line-height: 1.4; color: var(--ep-muted); font-weight: 600; }
.ep-facts dd { margin: 0; font: 760 clamp(1.35rem, 1.15rem + .8vw, 1.7rem)/1.1 var(--ep-font-display); font-stretch: 90%; color: var(--ep-ink); }
.ep-facts dd small, .ep-facts dd .ep-small { font: 400 var(--ep-t-xs)/1.4 var(--ep-font); color: var(--ep-muted); display: block; margin-top: 4px; }
.ep-facts dt, .ep-facts dd { overflow-wrap: anywhere; min-width: 0; }
/* <dl> without wrapper divs: a list of label above value, safe for long text in either */
.ep-facts:not(:has(> div)) { display: block; background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius); padding: 4px 18px; }
.ep-facts:not(:has(> div)) > dt { display: block; padding-top: 12px; font-size: 1rem; font-weight: 700; color: var(--ep-ink); }
.ep-facts:not(:has(> div)) > dd { display: block; padding: 2px 0 12px; border-bottom: var(--ep-hair); font: 400 var(--ep-t-sm)/1.55 var(--ep-font); color: var(--ep-text-2); }
.ep-facts:not(:has(> div)) > dd:last-child { border-bottom: 0; }
/* ---------- tables ---------- */
.ep-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: 1.25rem 0; background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius); }
.ep-table-wrap:focus-visible { outline: 3px solid var(--ep-focus); outline-offset: 2px; }
.ep-table-wrap table, .ep-content > table { width: 100%; border-collapse: collapse; font-size: var(--ep-t-sm); line-height: 1.45; }
.ep-table-wrap caption { caption-side: top; text-align: left; padding: 14px 16px 10px; font: 700 var(--ep-t-sm)/1.3 var(--ep-font); color: var(--ep-text-2); }
.ep-table-wrap th, .ep-table-wrap td, .ep-content > table th, .ep-content > table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: var(--ep-hair); }
.ep-table-wrap thead th, .ep-content > table thead th { background: var(--ep-surface-2); font-weight: 700; color: var(--ep-ink); white-space: nowrap; border-bottom: 1px solid var(--ep-border-strong); }
.ep-table-wrap tbody tr:last-child > * { border-bottom: 0; }
.ep-table-wrap tbody th { font-weight: 650; }
.ep-table-wrap tbody tr:hover { background: #fafbf7; }
.ep-table-wrap td { min-width: 7em; }
.ep-table-wrap th, .ep-table-wrap td { padding-inline: 12px; }
.ep-nowrap { white-space: nowrap; }
.ep-table-wrap .ep-small { color: var(--ep-muted); white-space: normal; }
.ep-noot { margin-top: 4px; font-size: var(--ep-t-xs); line-height: 1.45; color: var(--ep-muted); }
.ep-noot summary { cursor: pointer; width: fit-content; white-space: nowrap; color: var(--ep-text-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.ep-noot summary:hover { color: var(--ep-ink); }
.ep-noot p { margin-top: 4px; max-width: 28em; }
.ep-src { white-space: nowrap; }
.ep-table-intro { font-size: var(--ep-t-sm); }
.ep-table-intro + .ep-meta { margin-top: .25rem; }

/* card mode for data tables on phones */
@media (max-width: 720px) {
	.ep-table-wrap:has(.ep-table--cards) { overflow: visible; background: none; border: 0; border-radius: 0; }
	.ep-table--cards, .ep-table--cards tbody, .ep-table--cards tr, .ep-table--cards th, .ep-table--cards td { display: block; }
	.ep-table--cards caption { display: block; padding: 0 0 10px; }
	.ep-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ep-table--cards tbody tr { margin-bottom: 12px; padding: 4px 16px; background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius); }
	.ep-table--cards tbody tr:hover { background: var(--ep-surface); }
	.ep-table--cards tbody th { padding: 12px 0 8px; font-size: 1.05rem; border-bottom: 1px solid var(--ep-border-strong); }
	.ep-table--cards tbody th::before { display: none; }
	.ep-table--cards td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; padding: 10px 0; }
	.ep-table--cards tbody tr > td:last-child { border-bottom: 0; }
	.ep-table--cards td::before { content: attr(data-label); font-size: var(--ep-t-xs); font-weight: 600; color: var(--ep-muted); line-height: 1.45; hyphens: auto; overflow-wrap: anywhere; }
	.ep-table--cards td { min-width: 0; }
	.ep-table--cards td.ep-num { white-space: normal; }
}

/* ---------- steps ---------- */
.ep-steps { list-style: none; counter-reset: ep-step; padding: 0 !important; display: grid; gap: 12px; }
.ep-steps > li { counter-increment: ep-step; position: relative; margin: 0 !important; padding: 16px 18px 16px 64px; background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius); }
.ep-steps > li::before { content: counter(ep-step); position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; font: 780 1rem/1 var(--ep-font-display); color: var(--ep-ink); background: var(--ep-accent-soft); border: 2px solid var(--ep-ink); border-radius: 50%; }
.ep-steps > li > :is(h3, h4, strong:first-child) { display: block; font-size: 1.05rem; margin-bottom: .25rem; }
.ep-steps > li p { color: var(--ep-text-2); }
@media (min-width: 900px) { .ep-steps.ep-steps--row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }

/* ---------- sources, meta, toc ---------- */
.ep-sources { margin-top: 2.5rem !important; padding: 16px 16px 16px 2.4em !important; font-size: var(--ep-t-xs); line-height: 1.5; color: var(--ep-text-2); background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius-sm); overflow-wrap: anywhere; }
.ep-sources li + li { margin-top: .4em; }
.ep-sources a { color: var(--ep-accent); }
h2 + .ep-sources, h3 + .ep-sources { margin-top: .6rem !important; }
.ep-meta { font-size: var(--ep-t-xs); color: var(--ep-muted); }
.ep-meta a { color: inherit; }
.ep-toc { padding: 16px 18px; background: var(--ep-surface); border: var(--ep-hair); border-radius: var(--ep-radius); font-size: var(--ep-t-sm); }
.ep-toc > :is(h2, h3, p:first-child, strong:first-child) { display: block; margin: 0 0 .5rem; font: 700 var(--ep-t-xs)/1.2 var(--ep-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ep-text-2); }
.ep-toc ol, .ep-toc ul { margin: 0; padding-left: 1.3em; columns: 2 16em; column-gap: 2rem; }
.ep-toc li { break-inside: avoid; margin: 0 0 .35em !important; }

/* ---------- two columns ---------- */
.ep-two { display: grid; gap: clamp(16px, 3vw, 32px); }
.ep-two > * > * + * { margin-top: .75rem; }
@media (min-width: 820px) { .ep-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* ---------- FAQ ---------- */
.ep-faq { display: grid; gap: 8px; }
.ep-faq > * { margin: 0 !important; }
.ep-faq details, details.ep-faq { background: var(--ep-surface); border: var(--ep-hair); border-radius: 14px; }
.ep-faq details[open], details.ep-faq[open] { border-color: var(--ep-border-strong); }
.ep-faq summary, details.ep-faq > summary { list-style: none; cursor: pointer; position: relative; padding: 14px 48px 14px 16px; font-weight: 700; line-height: 1.4; border-radius: 14px; }
.ep-faq summary::-webkit-details-marker { display: none; }
.ep-faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2.5px solid var(--ep-ink); border-bottom: 2.5px solid var(--ep-ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.ep-faq details[open] > summary::after, details.ep-faq[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.ep-faq summary:hover { background: #fafbf7; }
.ep-faq details > :not(summary), details.ep-faq > :not(summary) { padding: 0 16px; color: var(--ep-text-2); max-width: var(--ep-measure); }
.ep-faq details > :not(summary):last-child, details.ep-faq > :not(summary):last-child { padding-bottom: 16px; }
.ep-faq details > :not(summary) + :not(summary) { margin-top: .6em; }

/* ---------- calculators (base; details in app/tools.css) ---------- */
.ep-tool { display: block; margin-block: 1.5rem; min-height: 4rem; }
.ep-content > .ep-tool { margin-top: 1.5rem; }

/* ---------- footer ---------- */
.ep-footer { background: var(--ep-ink); color: #cfdcd2; padding-block: 44px 28px; font-size: var(--ep-t-sm); }
.ep-footer a { color: #fff; text-decoration: none; }
.ep-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--ep-frog); }
.ep-footer :focus-visible { outline-color: #fff; }
.ep-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 28px; }
.ep-footer__brand p { margin-top: 10px; max-width: 30em; }
.ep-brand--footer { color: #fff; }
.ep-brand--footer:hover { color: #fff; text-decoration: none !important; }
.ep-footer__company { display: grid; gap: 2px; font-size: var(--ep-t-xs); color: #b5c7bb; }
.ep-footer__title { margin-bottom: 10px; font: 700 1rem/1.2 var(--ep-font); letter-spacing: 0; color: #fff; }
.ep-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ep-footer .ep-linkbtn { color: #fff; text-decoration: none; }
.ep-footer .ep-linkbtn:hover { text-decoration: underline; text-decoration-color: var(--ep-frog); }
.ep-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .15); font-size: var(--ep-t-xs); color: #b5c7bb; }
.ep-family { color: #dfe8e2 !important; }
.ep-family strong { color: #fff; font-weight: 650; }
@media (max-width: 900px) { .ep-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ep-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .ep-footer__grid { grid-template-columns: 1fr; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- print ---------- */
@media print {
	.ep-header, .ep-footer, .ep-skip, .ep-cb { display: none !important; }
	body { background: #fff; }
	.ep-table-wrap { overflow: visible; border: 0; }
	a { color: inherit; }
}