:root {
  --c-accent: #14477d;
  --c-bg: #ffffff;
  --c-border: #e2ddd6;
  --c-error: #b3261e;
  --c-focus: #b60f2b;
  --c-link: #a90e28;
  --c-primary: #b60f2b;
  --c-primary-contrast: #ffffff;
  --c-success: #1b7a3d;
  --c-surface: #f8f7f5;
  --c-surface-alt: #efedea;
  --c-text: #191d21;
  --c-text-muted: #4c555d;
  --c-warning: #9a5b00;
  --font-heading: 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
  --font-body: system-ui, 'Segoe UI', 'Helvetica Neue', Roboto, sans-serif;
  --h-weight: 750;
  --h-tracking: -0.018em;
  --h-transform: none;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20, 24, 18, 0.07), 0 6px 20px rgba(20, 24, 18, 0.06);
  --space: 1.35rem;
}
/* CalcKit design system core.
   Theme tokens (colors, fonts, radius, shadow, spacing density) are injected
   as :root custom properties ahead of this file; structural variants come as
   body[data-header] / body[data-accent]. No language, no brand, no color
   literals for brand surfaces in here — that is all per-site theme data. */

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--h-weight);
  letter-spacing: var(--h-tracking);
  text-transform: var(--h-transform);
  line-height: 1.2;
  margin: 0 0 calc(var(--space) * 0.6);
  color: var(--c-text);
}
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-top: calc(var(--space) * 1.4); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 var(--space); }
a { color: var(--c-link); }
a:hover { text-decoration-thickness: 2px; }
ul, ol { padding-left: 1.4em; margin: 0 0 var(--space); }
hr { border: 0; border-top: 1px solid var(--c-border); margin: calc(var(--space) * 1.5) 0; }
code {
  background: var(--c-surface-alt);
  padding: 0.1em 0.35em;
  border-radius: calc(var(--radius) * 0.5);
  font-size: 0.92em;
}
blockquote {
  margin: 0 0 var(--space);
  padding: calc(var(--space) * 0.5) var(--space);
  border-left: 4px solid var(--c-accent);
  background: var(--c-surface-alt);
  border-radius: var(--radius);
}

/* ---------- a11y ---------- */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--c-primary);
  color: var(--c-primary-contrast);
  padding: 0.6em 1em;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- header ---------- */
.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.site-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--space) * 0.7) var(--space);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--space) * 0.7);
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  color: var(--c-text);
}
.brand svg { width: 2rem; height: 2rem; flex: none; }
.brand__name {
  font-family: var(--font-heading);
  font-weight: var(--h-weight);
  font-size: 1.25rem;
}
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space) * 0.9); }
.site-nav a { text-decoration: none; font-weight: 600; color: var(--c-text); }
.site-nav a:hover { color: var(--c-link); text-decoration: underline; }

/* Every calculator is in the menu (KIT-0006): direct items on wide screens,
   a native <details> group on narrow ones. Only one of the two variants is
   displayed, so the hidden one is out of the tab order + a11y tree. */
.site-nav__calcs { display: none; }
.site-nav__group { position: relative; }
.site-nav__group summary { cursor: pointer; font-weight: 600; }
.site-nav__group ul {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 40;
  min-width: 14rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.site-nav__group ul a {
  display: block;
  padding: 0.5em 0.75em;
  border-radius: calc(var(--radius) * 0.5);
  color: var(--c-text);
}
.site-nav__group ul a:hover { background: var(--c-surface-alt); color: var(--c-link); text-decoration: none; }
@media (min-width: 48rem) {
  .site-nav__calcs { display: contents; }
  .site-nav__group { display: none; }
}

/* header structural variants */
body[data-header="banner"] .site-header {
  background: var(--c-primary);
  border-bottom: none;
}
body[data-header="banner"] .site-header :is(.brand, .site-nav a, .site-nav__group summary) {
  color: var(--c-primary-contrast);
}
body[data-header="banner"] .site-header .site-nav__group ul a { color: var(--c-text); }
body[data-header="banner"] .site-header .brand svg { color: var(--c-primary-contrast); }
body[data-header="compact"] .site-header__inner { padding-top: 0.5rem; padding-bottom: 0.5rem; }
body[data-header="compact"] .brand__name { font-size: 1.05rem; }
body[data-header="split"] .site-header__inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
body[data-header="split"] .site-header { border-bottom: 3px solid var(--c-accent); }

.accent-divider { display: block; width: 100%; height: 2.6rem; }
body[data-header="banner"] .accent-divider { background: var(--c-primary); }
.accent-divider--dots {
  height: 0.9rem;
  background-image: radial-gradient(var(--c-accent) 22%, transparent 23%);
  background-size: 0.9rem 0.9rem;
  background-position: 0 0.2rem;
  background-repeat: repeat-x;
}

/* ---------- layout ----------
   Every page is main column + rail (KIT-0006 amendment). Narrow screens:
   single column, the rail stacks below main (its digest stays reachable; the
   rail AD slot is desktop-only). From 64rem: two-column grid, centered —
   no more mobile-width column pinned left on a wide viewport. */
.layout {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--space) * 1.2) var(--space) calc(var(--space) * 2);
}
main { min-width: 0; }
.rail { min-width: 0; margin-top: calc(var(--space) * 1.6); }
.ad-slot--rail { display: none; }
@media (min-width: 64rem) {
  .layout--rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: calc(var(--space) * 2);
    align-items: start;
  }
  .rail { margin-top: 0; }
  .ad-slot--rail { display: block; }
}
.lead { font-size: 1.15rem; color: var(--c-text-muted); max-width: 40rem; }

/* page head: product-header rhythm, not document-title rhythm */
.page-head { margin-bottom: var(--space); }
.page-head h1 { margin-bottom: 0.25em; }
.page-head .lead { margin: 0; }
.hero { padding: calc(var(--space) * 0.4) 0 0; }

/* single highlighted warning line above the tool (site-configurable) */
.calc-warning {
  max-width: 40rem;
  margin: 0.8em 0 0;
  padding: 0.55em 0.9em;
  font-weight: 600;
  font-size: 0.97rem;
  background: var(--c-surface);
  border: 1px solid var(--c-warning);
  border-left-width: 5px;
  border-radius: var(--radius);
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs { font-size: 0.88rem; margin-bottom: var(--space); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35em; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.35em; color: var(--c-text-muted); }
.breadcrumbs [aria-current="page"] { color: var(--c-text-muted); }

/* ---------- tool grid (home, KIT-0006) ----------
   Compact tool cards, not article cards: icon, short name, one-line benefit,
   visible action. Narrow: full-width horizontal rows (thumb-friendly list).
   From 40rem: 2-up vertical cards; from 64rem: one row of 4. */
.tool-grid { display: grid; gap: calc(var(--space) * 0.7); margin-bottom: var(--space); }
.tool-card {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: calc(var(--space) * 0.7) var(--space);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--c-text);
}
.tool-card:hover { border-color: var(--c-primary); }
.tool-card:hover .tool-card__name { color: var(--c-link); text-decoration: underline; }
.tool-card__icon { flex: none; width: 2.1rem; height: 2.1rem; color: var(--c-primary); }
.tool-card__icon svg { width: 100%; height: 100%; }
.tool-card__body { min-width: 0; }
.tool-card__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--h-weight);
  font-size: 1.06rem;
  line-height: 1.25;
}
.tool-card__benefit {
  display: block;
  margin-top: 0.15em;
  color: var(--c-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
.tool-card__cta {
  flex: none;
  margin-left: auto;
  color: var(--c-primary);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.tool-card__arrow { margin-left: 0.3em; }
@media (min-width: 40rem) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-card { flex-direction: column; align-items: flex-start; gap: 0.55em; padding: var(--space); }
  .tool-card__cta { margin-left: 0; margin-top: auto; }
}
@media (min-width: 64rem) {
  .tool-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- calculator ---------- */
.calc-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: calc(var(--space) * 1.2);
  margin: var(--space) 0;
}
.field { margin-bottom: var(--space); }
.field > label, .field--radio legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35em;
}
.field__control { display: flex; align-items: center; gap: 0.5em; max-width: 20rem; }
input[type="text"], select {
  font: inherit;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: calc(var(--radius) * 0.75);
  padding: 0.55em 0.7em;
  width: 100%;
  min-height: 44px;
}
input[type="text"]:focus-visible, select:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
  border-color: var(--c-focus);
}
input[aria-invalid="true"] { border-color: var(--c-error); }
.field__unit { color: var(--c-text-muted); white-space: nowrap; }
.field__help { font-size: 0.88rem; color: var(--c-text-muted); margin: 0.35em 0 0; }
.field__error { color: var(--c-error); font-weight: 600; margin: 0.35em 0 0; }
.field--checkbox { display: grid; grid-template-columns: auto 1fr; gap: 0.55em; align-items: start; }
.field--checkbox label { font-weight: 600; margin: 0; }
.field--checkbox .field__help, .field--checkbox .field__error { grid-column: 2; }
input[type="checkbox"], input[type="radio"] {
  width: 1.35rem; height: 1.35rem;
  margin: 0.2rem 0 0;
  accent-color: var(--c-primary);
}
.field--radio { border: 0; padding: 0; margin: 0 0 var(--space); }
.radio { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.35em; }
.radio label { font-weight: 400; }
.btn {
  font: inherit;
  font-weight: 700;
  background: var(--c-primary);
  color: var(--c-primary-contrast);
  border: none;
  border-radius: calc(var(--radius) * 0.75);
  padding: 0.7em 1.5em;
  min-height: 44px;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }

/* results — the live region exists from first paint (role="status" for
   screen-reader announcements). The result rows ship hidden and appear on
   the first calculation (user-initiated, so revealing them is not CLS);
   until then the area is one compact note line (KIT-0006). */
.results {
  margin-top: calc(var(--space) * 1.2);
  border-top: 2px solid var(--c-border);
  padding-top: var(--space);
}
.results h2 { margin-top: 0; }
#calc-live dl { margin: 0; }
.result {
  display: flex;
  justify-content: space-between;
  gap: var(--space);
  padding: 0.45em 0;
  border-bottom: 1px dashed var(--c-border);
}
.result dt { margin: 0; }
.result dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.result--primary {
  background: var(--c-surface-alt);
  border-bottom: none;
  border-radius: var(--radius);
  padding: 0.6em 0.8em;
  font-size: 1.12rem;
}
.result--primary dd { color: var(--c-primary); font-weight: 800; }
.results-note { color: var(--c-text-muted); font-size: 0.92rem; }

/* ---------- verdict line (KIT-0011) ----------
   The declarative plain-language decision line for decision tools. It lives
   inside #calc-live (role="status") so it is announced, ships hidden and
   reveals with the first calculation exactly like the result rows
   (user-initiated — no CLS). The number rows stay canonical; the verdict is
   the one-sentence reading of them, rendered as plain text (never HTML).
   Status TOKENS are declared per tool in definition.json; the kit ships the
   conventional trio ok / warn / bad, mapped to the theme's semantic color
   roles. A tool that declares other tokens styles them in its own custom.css. */
.calc-verdict {
  margin: 0 0 var(--space);
  padding: 0.7em 0.9em;
  border-left: 4px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
}
.calc-verdict--ok { border-left-color: var(--c-success); }
.calc-verdict--warn { border-left-color: var(--c-warning); }
.calc-verdict--bad { border-left-color: var(--c-error); }

/* ---------- results chart (KIT-0008) ----------
   Supplementary inline SVG under the result rows. Hidden until the first
   calculation (user-initiated reveal, like the result rows — no CLS); once
   visible its geometry is fixed by the SVG viewBox ratio, so redraws on
   recalculation can never shift layout. All colors are theme tokens: each
   site's charts wear its own identity. Restraint is the aesthetic — one
   baseline, direct labels, no gridlines, no legend. */
.calc-chart { margin: var(--space) 0 0; }
.calc-chart svg { display: block; width: 100%; height: auto; }
.chart-axis { stroke: var(--c-border); stroke-width: 1.5; }
.chart-area { stroke: none; }
.chart-area--0 { fill: var(--c-primary); fill-opacity: 0.28; }
.chart-area--1 { fill: var(--c-accent); fill-opacity: 0.38; }
.chart-area--2 { fill: var(--c-success); fill-opacity: 0.30; }
.chart-area--3 { fill: var(--c-link); fill-opacity: 0.28; }
.chart-edge { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-edge--0, .chart-dot--0 { stroke: var(--c-primary); }
.chart-edge--1, .chart-dot--1 { stroke: var(--c-accent); }
.chart-edge--2, .chart-dot--2 { stroke: var(--c-success); }
.chart-edge--3, .chart-dot--3 { stroke: var(--c-link); }
.chart-dot { fill: var(--c-surface); stroke-width: 2.5; }
.chart-label {
  font-family: var(--font-body);
  font-size: 14px;           /* SVG user units: scales with the chart */
  font-weight: 600;
  fill: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.chart-tick {
  font-family: var(--font-body);
  font-size: 12.5px;
  fill: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- sections ---------- */
.worked-example, .faq, .sources, .calc-changelog, .how-it-works {
  margin-top: calc(var(--space) * 1.4);
}
.worked-example li { margin-bottom: 0.4em; }

/* generic collapsible (how-it-works, worked example — KIT-0006): all text
   stays in the served DOM, just collapsed by default */
.collapsible {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.collapsible > summary {
  cursor: pointer;
  padding: 0.8em 1em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
}
.collapsible[open] > summary { border-bottom: 1px solid var(--c-border); }
.collapsible__body { padding: 0.9em 1.1em 0.1em; }
.faq details {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  padding: 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.75em 1em;
  border-radius: var(--radius);
}
.faq details[open] summary { border-bottom: 1px solid var(--c-border); }
.faq details p { padding: 0.75em 1em; margin: 0; }
.sources ul { list-style: none; padding: 0; }
.sources li { margin-bottom: 0.6em; }
.source__verified { color: var(--c-text-muted); font-size: 0.88rem; }
.disclaimer {
  margin-top: calc(var(--space) * 1.4);
  font-size: 0.88rem;
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border);
  padding-top: var(--space);
}

/* ---------- changelog ---------- */
.changelog-list { list-style: none; padding: 0; }
.changelog-list li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 0.8) var(--space);
  margin-bottom: 0.8rem;
}
.changelog-list time, .entry-meta time { display: block; font-size: 0.88rem; color: var(--c-text-muted); }
.changelog-list a { font-weight: 700; }
.changelog-list p { margin: 0.3em 0 0; }
.calc-changelog ul { list-style: none; padding: 0; }
.calc-changelog time { color: var(--c-text-muted); font-size: 0.88rem; margin-right: 0.5em; }
.related-calc { font-weight: 600; }

/* ---------- regelhistorik (rule-change timeline, KIT-0010) ----------
   A dated list of rule changes on their REAL effective timeline. Each item
   leads with the effective date (the differentiator vs the changelog, which
   is ordered by publish date), then the change and the tool it affects. */
.regelhistorik-list { list-style: none; padding: 0; margin: 0; }
.regelhistorik__item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  border-left: 4px solid var(--c-primary);
  padding: calc(var(--space) * 0.8) var(--space);
  margin-bottom: 0.8rem;
}
.regelhistorik__effective {
  margin: 0 0 0.15em;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}
.regelhistorik__eff-label { font-weight: 700; }
.regelhistorik__effective time { font-weight: 700; color: var(--c-text); }
.regelhistorik__title { display: inline-block; font-weight: 700; margin: 0.1em 0; }
.regelhistorik__summary { margin: 0.25em 0 0; }
.regelhistorik__affects { margin: 0.4em 0 0; font-size: 0.9rem; color: var(--c-text-muted); }
.regelhistorik-empty { color: var(--c-text-muted); }

/* ---------- ad slots ----------
   Slots RESERVE their space (fixed min-height) and are always siblings of
   content sections — never overlays, never inside the form or results. An
   empty slot keeps its reserved box so consent choices cause no layout shift. */
.ad-slot { margin: calc(var(--space) * 1.2) 0; }
.ad-slot__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  margin-bottom: 0.25rem;
}
.ad-slot__frame {
  min-height: 250px;
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  /* outline, not border: zero layout impact, so consent choices and demo
     fills can never change slot geometry (CLS 0 by construction) */
  outline: 1px dashed var(--c-border);
  outline-offset: -1px;
}
.ad-slot--rail .ad-slot__frame { min-height: 600px; }
@media (min-width: 64rem) {
  .ad-slot--rail { position: sticky; top: var(--space); margin: 0; }
}
/* Quiet posture (KIT-0006 amendment): while the ad client id is a
   placeholder, no ad can ever load — the slot renders small and tidy instead
   of a full reserved void. Static from first paint, so CLS stays 0; a real
   client id restores the reserved geometry above automatically. */
.ad-slot--quiet .ad-slot__frame { min-height: 4.5rem; }
.ad-slot--quiet .ad-slot__demo { padding: 0.6em 1em; font-size: 0.8rem; }
.ad-slot__demo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: inherit;
  padding: var(--space);
  color: var(--c-text-muted);
  font-size: 0.88rem;
  border-radius: var(--radius);
}

/* ---------- rail (updates digest + desktop ad) ---------- */
.rail-updates {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 0.8) var(--space);
}
.rail-updates h2 { margin: 0 0 0.6em; font-size: 1.02rem; }
.rail-updates ul { list-style: none; padding: 0; margin: 0 0 0.6em; }
.rail-updates li { margin-bottom: 0.55em; font-size: 0.92rem; line-height: 1.4; }
.rail-updates li:last-child { margin-bottom: 0; }
.rail-updates time { display: block; font-size: 0.8rem; color: var(--c-text-muted); }
.rail-updates p { margin: 0.6em 0 0; font-size: 0.92rem; }
.rail .ad-slot { margin-top: var(--space); }
.rail > :first-child { margin-top: 0; }

/* ---------- consent stub banner (dev/demo only) ---------- */
.tcf-stub {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: var(--c-surface);
  border-top: 2px solid var(--c-primary);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  padding: var(--space);
}
.tcf-stub__inner { max-width: 46rem; margin: 0 auto; }
.tcf-stub h2 { margin: 0 0 0.3em; font-size: 1.05rem; }
.tcf-stub p { margin: 0 0 0.8em; font-size: 0.95rem; }
.tcf-stub__actions { display: flex; gap: 0.7em; flex-wrap: wrap; }
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1.5px solid var(--c-border);
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: calc(var(--space) * 2);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--space) * 1.2) var(--space);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space); margin-bottom: calc(var(--space) * 0.6); }
.footer-nav a { color: var(--c-text); }
/* KIT-0032: the consent-withdrawal control sits in the footer nav and must read
   as one more footer link, not as a call to action. Button element for
   semantics (it opens a dialog, it does not navigate); link styling so it adds
   no visual weight. `hidden` until consent.js confirms a CMP is present. */
.footer-nav__consent {
  font: inherit;
  color: var(--c-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.footer-nav__consent[hidden] { display: none; }
.footer-legal, .footer-note { font-size: 0.88rem; color: var(--c-text-muted); margin: 0 0 0.3em; }

/* site custom.css */
/* Lønberegneren — site-specific layer on top of the shared shell.
   Danish minimalism: white, warm paper tones, Dannebrog red as the only
   loud color. All rule figures live in figures/2026.json, never here. */

/* Header: deepen the banner with a subtle red gradient + hairline */
.site-header {
  background: linear-gradient(120deg, #b60f2b 0%, #9c0d24 78%);
}
.brand svg { border-radius: 7px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }

/* Hero: quiet paper panel with a Dannebrog cross as a faint watermark */
.hero {
  position: relative;
  background:
    linear-gradient(90deg, rgba(182, 15, 43, 0.05) 0 3.2rem, transparent 3.2rem 4.1rem, rgba(182, 15, 43, 0.05) 4.1rem 100%) ,
    linear-gradient(180deg, transparent 0 42%, rgba(182, 15, 43, 0.05) 42% 58%, transparent 58% 100%),
    var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 1.4) calc(var(--space) * 1.2);
  overflow: hidden;
}
.hero h1 { max-width: 34ch; }
.hero .lead { max-width: 62ch; }

/* Calculator card: red top rule so the tool reads as the page's centre */
.calc-card {
  border-top: 4px solid var(--c-primary);
  background: #fffdfb;
}
.result--primary {
  border-left: 4px solid var(--c-primary);
  background: rgba(182, 15, 43, 0.045);
}

/* Worked example: red step counters */
.worked-example ol li::marker {
  color: var(--c-primary);
  font-weight: 700;
}

/* Home tool grid (kit v0.2.0: .card/.card-grid replaced by .tool-grid/
   .tool-card__*): hairline top accent + calm hover, matching the old look */
.tool-card { border-top: 3px solid transparent; transition: border-color 120ms ease; }
.tool-card:hover, .tool-card:focus-within { border-top-color: var(--c-primary); }

/* Right rail (new in v0.2.0): updates digest on the warm-paper surface */
.rail-updates time { color: var(--c-primary); font-weight: 600; }

/* Long official rate lists: compact two-column layout on wide screens */
.sources ul { font-size: 0.9rem; }
@media (min-width: 820px) {
  .sources ul { columns: 2; column-gap: calc(var(--space) * 1.5); }
  .sources li { break-inside: avoid; }
}

/* Changelog list: date column in red, entries as a quiet timeline */
.changelog-list time { color: var(--c-primary); font-weight: 600; }

/* Footer on warm paper */
.site-footer { background: var(--c-surface); border-top: 1px solid var(--c-border); }