:root {
  --c-accent: #1d7a74;
  --c-bg: #fdf6f0;
  --c-border: #e5d5c8;
  --c-error: #a52323;
  --c-focus: #a84a39;
  --c-link: #9a4433;
  --c-primary: #a84a39;
  --c-primary-contrast: #ffffff;
  --c-success: #22682f;
  --c-surface: #ffffff;
  --c-surface-alt: #f7e9de;
  --c-text: #33251f;
  --c-text-muted: #6b5348;
  --c-warning: #b45309;
  --font-heading: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-body: system-ui, 'Segoe UI', Roboto, sans-serif;
  --h-weight: 700;
  --h-tracking: normal;
  --h-transform: none;
  --radius: 14px;
  --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); }
.footer-legal, .footer-note { font-size: 0.88rem; color: var(--c-text-muted); margin: 0 0 0.3em; }

/* site custom.css */
/* Familjekalkylen — site-specific look on top of the kit tokens.
   Warm "kitchen-table" feel for parents: soft banner gradient, hand-set
   accents, friendly cards. No layout changes to the kit's structure. */

/* Banner: warm two-tone gradient instead of flat primary */
body[data-header="banner"] .site-header {
  background: linear-gradient(112deg, #a3452f 0%, #b85a37 62%, #c06a3c 100%);
}
body[data-header="banner"] .accent-divider { background: #c06a3c; }
.brand__name { letter-spacing: -0.01em; }
.logo-mark { border-radius: 10px; }

/* Hero: soft sun-spot glow behind the headline */
.hero {
  position: relative;
  background:
    radial-gradient(28rem 13rem at 12% -18%, rgba(192, 106, 60, 0.14), transparent 68%),
    radial-gradient(20rem 11rem at 88% -8%, rgba(29, 122, 116, 0.10), transparent 70%);
  border-radius: var(--radius);
}

/* Section headings get a short warm underline stroke */
main h2:not(.visually-hidden) {
  position: relative;
  padding-bottom: 0.28em;
}
main h2:not(.visually-hidden)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.4em;
  height: 0.22em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent), rgba(29, 122, 116, 0.25));
}
.results h2::after { display: none; }

/* Calculator card: warm top ribbon + softer body */
.calc-card {
  border-top: 6px solid var(--c-primary);
  background:
    linear-gradient(180deg, rgba(248, 234, 217, 0.55), transparent 5.5rem),
    var(--c-surface);
}

/* Tool cards on the home grid (kit v0.2): lift + teal keyline on hover/focus */
.tool-card {
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  border-left: 5px solid var(--c-surface-alt);
}
.tool-card:hover, .tool-card:focus-within {
  transform: translateY(-2px);
  border-left-color: var(--c-accent);
  box-shadow: 0 3px 8px rgba(51, 37, 31, 0.08), 0 10px 26px rgba(51, 37, 31, 0.09);
}
@media (prefers-reduced-motion: reduce) {
  .tool-card, .tool-card:hover, .tool-card:focus-within { transition: none; transform: none; }
}

/* Primary result row: warm highlight so the answer is unmissable */
.result--primary {
  background: linear-gradient(90deg, rgba(248, 234, 217, 0.9), rgba(248, 234, 217, 0.35));
  border-radius: calc(var(--radius) * 0.5);
  padding-left: 0.6em;
  padding-right: 0.6em;
}

/* Worked example: story-card treatment */
.worked-example ol {
  border-left: 6px solid var(--c-accent);
  background: linear-gradient(180deg, rgba(29, 122, 116, 0.05), transparent 70%), var(--c-surface);
}

/* FAQ: rounder, calmer */
.faq summary { font-weight: 600; }
.faq details { border-radius: calc(var(--radius) * 0.6); }

/* Changelog list: date chip */
.changelog-list time {
  display: inline-block;
  background: var(--c-surface-alt);
  color: var(--c-text);
  border-radius: 999px;
  padding: 0.1em 0.7em;
  font-weight: 600;
  margin-bottom: 0.25em;
}

/* Footer: quiet warm band */
.site-footer { background: linear-gradient(180deg, transparent, rgba(248, 234, 217, 0.5)); }