/* bordic.se: en stilmall för hela sajten. Kostnadsröntgen laddar den här och har dessutom en egen. */

/* ---------- Typsnitt (självhostade, SIL OFL) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: only light;

  --navy-950: #001026;
  --ink: #0B1F33;
  --ink-2: #3A5570;
  --ink-3: #52697F;
  --steel-900: #14293A;
  --steel-800: #1A3348;
  --steel-700: #1F3C53;
  --blue-800: #144D7A;
  --blue-700: #17547F;
  --blue-600: #1D649A;
  --blue-500: #2E86C1;
  --blue-300: #9FD8F5;
  --field: #447296;
  --field-top: #3D6A8F;
  --tint-100: #D4E6F4;
  --paper: #F5F9FC;
  --paper-2: #E9F1F7;
  --on-field: #FFFFFF;
  --on-field-2: #FFFFFF; /* vit i stället för #EFF7FD: skillnaden syns inte men kostade kontrast */
  /* Accenten: havsblågrön. Ligger på samma kalla sida som fältet (kulör 187° mot fältets 259°) men syns som
     en egen färg. Mörka steget används för grafik på ljusa ytor (4,96:1 mot panelen). */
  --accent: #6DD3C8;                            /* på fältet och på mörka kort */
  --accent-stark: #17796F;                      /* samma kulör, mörkare: grafik på ljusa ytor */
  --accent-ring: rgba(109, 211, 200, .2);       /* ringen runt datumprickarna */
  --accent-stark-mjuk: rgba(23, 121, 111, .36); /* spannets övre del i Kostnadsröntgen */
  --isbla-dampad: rgba(159, 216, 245, .55);     /* andra tonen: bara heronkortets första stapel */
  --accent-varm: #E8945A;                       /* koppar: bara i heronkortet, för det man betalar (Victor 28/9) */
  /* Värmeskalan i räkneexemplen (Victor 28/9): kostnad per ton, samma skala i alla tre exemplen. Fyra dämpade
     steg i OKLCH från svalt till varmt. Ljusheten sjunker och kromat stiger med allvarligheten, så att
     ordningen håller även i gråskala och vid färgblindhet. Steg 3 ligger nära heronkortets koppar.
     Nivån (data-niva på raden) skrivs av verktyg/siffror.mjs från gränserna i sifferblocket. -text är talets
     ton: samma kulör, ljusare. Kontrast mot kortet: staplarna 3,89:1 eller mer (3:1 mot spåret), talen 7,86:1. */
  --niva-1: #B3E3DC; --niva-1-text: #C2E3DE;    /* låg: dämpad havsblågrön  oklch(.88 .050 185) */
  --niva-2: #D3C2A0; --niva-2-text: #E4D6BA;    /* måttlig: sand            oklch(.82 .050 85)  */
  --niva-3: #DCA171; --niva-3-text: #F1D0B7;    /* hög: dov koppar          oklch(.755 .095 60) */
  --niva-4: #D4806F; --niva-4-text: #FACBC1;    /* mycket hög: terrakotta   oklch(.685 .108 32) */
  --success: #7FD1A8; /* används inte på sajten, behålls som token */
  --error: #A8432B;

  --line-light: rgba(11, 31, 51, .10);
  --line-input: #7690A8;
  --line-on-field: rgba(255, 255, 255, .18);
  --line-on-field-2: rgba(255, 255, 255, .30);
  --line-on-dark: rgba(160, 200, 226, .22);
  --line-in-dark: rgba(255, 255, 255, .12);

  --grad-steel: linear-gradient(158deg, #1F3C53 0%, #14293A 100%);
  --grad-steel-hover: linear-gradient(158deg, #26475F 0%, #183244 100%);
  --grad-paper: linear-gradient(180deg, #F5F9FC 0%, #E9F1F7 100%);
  --grad-footer: linear-gradient(180deg, #1F3C53 0%, #1A3348 46%, #14293A 100%);

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-display: clamp(2.375rem, 1.6rem + 3.2vw, 4rem);
  --t-h1: clamp(2.125rem, 1.8rem + 1.4vw, 3rem);
  --t-h2: clamp(1.875rem, 1.55rem + 1.3vw, 2.75rem);
  --t-h3: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-body: clamp(1rem, .96rem + .15vw, 1.0625rem);
  --t-small: .9375rem;
  --t-caption: .8125rem;
  --t-figure: clamp(2.375rem, 2rem + 1.2vw, 3rem);

  /* Rutnätet: tolv kolumner i en container på 1184 px. En spaltlinje per bredd:
     text i kolumn 1–7 och objekt i 8–12 från 1280 px, 6 + 6 mellan 1024 och 1279, staplat under 1024. */
  --container: 1184px;
  --gutter: 20px;
  --col-gap: 16px;
  --text: 680px;         /* textspalten = kolumn 1–7 vid 1440 */
  /* Vertikal rytm: bara de här avstånden mellan block */
  --section-y: 56px;     /* luft över och under varje sektion */
  --stack-l: 32px;       /* rubrikblock till innehåll, mellan stora block */
  --stack-m: 24px;       /* mellan rader av kort, rubrik till text i paneler */
  --stack-s: 16px;       /* etikett till rubrik, rubrik till ingress */
  --stack-xs: 8px;       /* inne i kort */
  --pad-card: 20px;      /* kort, mörka kort, celler i sammanfogade paneler */
  --pad-panel: 24px;     /* formulär, stora paneler, tackkortet */
  /* Objekt som börjar på rubrikens versalhöjd (startkortet mot h1, porträttet mot h2): etikettens rad, luften
     under den och avståndet från rubrikradens överkant till versalens topp. Uppmätt 0–0,1 px från 1024 px. */
  --linje-h1: calc(12px * 1.5 + var(--stack-s) + .19 * var(--t-display));
  --linje-h2: calc(12px * 1.5 + var(--stack-s) + .22 * var(--t-h2));

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 40px;
  --r-pill: 999px;

  --sh-card: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(3,16,30,.08), 0 20px 48px -28px rgba(3,16,30,.55);
  --sh-card-hover: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(3,16,30,.08), 0 28px 56px -28px rgba(3,16,30,.6);
  --sh-dark: inset 0 1px 0 rgba(255,255,255,.08), 0 32px 64px -32px rgba(3,16,30,.85);
  --sh-btn: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px -16px rgba(3,16,30,.8);
  --sh-header: 0 10px 30px -18px rgba(3,16,30,.6);

  --focus: #FFFFFF;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 160ms;
  --dur-2: 240ms;
}
@media (min-width: 640px) {
  :root { --gutter: 32px; --col-gap: 24px; --section-y: 72px; --stack-l: 40px; --pad-card: 32px; --pad-panel: 32px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --section-y: 88px; --stack-l: 48px; --pad-panel: 40px; }
}

/* ---------- Bas ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--field);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
}
/* Mjuk scroll bara för klick inom sidan: site.js sätter klassen efter load, så att en länk från
   en annan sida (till exempel /#fragor) landar direkt i stället för att rulla genom hela sidan */
@media (prefers-reduced-motion: no-preference) {
  html.mjuk-scroll { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--on-field);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Fältet: fast i vyn, lite djup upptill och en svag glöd uppe till höger (svag, så att kontrasten håller) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70% 55% at 88% -5%, rgba(126,182,221,.14), transparent 60%),
    radial-gradient(60% 50% at -10% 105%, rgba(20,77,122,.40), transparent 65%),
    linear-gradient(180deg, #3D6A8F 0%, #447296 38%, #467599 100%);
}
/* Våglinjerna, fast genom hela sidan */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background: url("/assets/vagor.svg") center 30% / cover no-repeat;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; overflow-wrap: break-word; } /* långa ord bryts hellre än att sidan får vågrät scroll */
h1, h2 { word-spacing: .05em; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
sub { font-size: .7em; line-height: 0; vertical-align: -.25em; }
strong { font-weight: 600; }
[hidden] { display: none !important; }

.num, .figure, [data-num] { font-variant-numeric: tabular-nums lining-nums; }
.tp { margin-left: -.05em; }
.tc { margin-inline: -.04em; }
.th { margin-inline: -.05em; }
.sent { display: inline-block; }
.nowrap { white-space: nowrap; }
/* Mittpunkten i de spärrade mono-etiketterna: utan spärrning och med lite snävare luft, så att etiketten läses
   som en enhet (hålet kring punkten var tre ordmellanrum) */
.sep { letter-spacing: 0; margin-inline: -.2em; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

::selection { background: var(--blue-600); color: #fff; }

/* ---------- Fokus och hoppa-länk ---------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.card, .panel-light, .faq, .form-card, .steps, .doc { --focus: var(--blue-600); }
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 100;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: #fff; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none;
  box-shadow: var(--sh-header);
}
.skip-link:focus { top: 16px; outline-color: var(--blue-600); }
[tabindex="-1"]:focus { outline: none; }

/* ---------- Länkar ---------- */
a { color: inherit; }
.link, .on-field a:not(.btn) {
  color: #fff; text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,.55); text-underline-offset: .2em;
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.link:hover, .on-field a:not(.btn):hover { text-decoration-color: #fff; }
.card a:not(.btn), .panel-light a:not(.btn), .faq a, .form-card a, .doc a {
  color: var(--blue-700); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(23,84,127,.4); text-underline-offset: .2em;
}
.card a:not(.btn):hover, .panel-light a:not(.btn):hover, .faq a:hover, .form-card a:hover, .doc a:hover { color: var(--navy-950); text-decoration-color: currentColor; }
.card-data a:not(.btn) { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: .2em; }

/* ---------- Layout: container, sektion, rubrikblock ---------- */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
/* En hårlinje i innehållets bredd markerar varje nytt kapitel */
.section + .section::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: min(var(--container), 100% - 2 * var(--gutter)); height: 1px; background: rgba(255,255,255,.16);
}

/* Rubrikblocket: etikett, rubrik och högst en ingress, alltid vänsterställt i textspalten */
.section-head { max-width: var(--text); margin-bottom: var(--stack-l); }
.section-head h2 { margin-top: var(--stack-s); font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.03em; max-width: 22ch; }
.section-head > p:not(.eyebrow) { margin-top: var(--stack-s); font-size: var(--t-lead); line-height: 1.6; max-width: 60ch; }
.section-head > :first-child { margin-top: 0; }

/* ---------- Rutnätet ---------- */
/* Delning: text + objekt på samma spaltlinje över hela sajten */
.hero-grid, .about-grid, .contact-grid, .boka-grid, .kr-hero-grid {
  display: grid; gap: var(--stack-l) var(--col-gap); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .hero-grid, .about-grid, .contact-grid, .boka-grid, .kr-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  :is(.hero-grid, .about-grid, .contact-grid, .boka-grid, .kr-hero-grid) > .text { grid-column: 1 / 7; }
  :is(.hero-grid, .about-grid, .contact-grid, .boka-grid, .kr-hero-grid) > .objekt { grid-column: 7 / 13; }
  /* Första skärmen: spalterna lika höga. I Kostnadsröntgen står texten mitt för objektet. På startsidan står
     texten överst och kortet börjar på h1:s versalhöjd (se Startkortet), så att rubriken inte glider. */
  .hero-grid, .kr-hero-grid { align-items: stretch; }
  .hero-grid > .text, .kr-hero-grid > .text { display: flex; flex-direction: column; justify-content: center; }
  .hero-grid > .text { justify-content: flex-start; }
}
@media (min-width: 1280px) {
  :is(.hero-grid, .about-grid, .contact-grid, .boka-grid, .kr-hero-grid) > .text { grid-column: 1 / 8; }
  :is(.hero-grid, .about-grid, .contact-grid, .boka-grid, .kr-hero-grid) > .objekt { grid-column: 8 / 13; }
}
/* Under 1024 px löses textspalten upp, så att objektet (formulär) kan stå mitt i texten. Ordningen står
   per sektion längre ner. Radavståndet är då rutnätets. Om Bordic löser upp den i alla bredder, se där. */
@media (max-width: 1023px) {
  :is(.contact-grid, .boka-grid) > .text { display: contents; }
  :is(.contact-grid, .boka-grid) > .text > .section-head { margin-bottom: 0; }
}

/* Tre i rad: en per rad under 1024 px, aldrig 2 + 1 */
.grid-3 { display: grid; gap: var(--stack-m) var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Fyra i rad: kort med mer text (.grid-4) fyra från 1280 px, korta rader (.band, .timeline) fyra från 1024 px */
.grid-4, .band, .timeline { display: grid; gap: var(--stack-m) var(--col-gap); grid-template-columns: minmax(0, 1fr); list-style: none; }
@media (min-width: 640px) { .grid-4, .band, .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .band, .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Par: två lika kort från 1024 px */
.grid-2, .faq-list { display: grid; gap: var(--stack-m) var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .grid-2, .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Etikett (utan piller) ---------- */
.eyebrow {
  display: flex; width: fit-content; align-items: flex-start; gap: 10px; /* flex, inte inline-flex: ingen radruta runt etiketten, så den börjar på blockets överkant */
  font: 500 12px/1.5 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .42em; border-radius: 50%; background: var(--accent); }

/* ---------- Knappar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: var(--r-pill);
  font: 600 16px/1.2 var(--font-sans); letter-spacing: -.005em; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), opacity var(--dur-1);
}
.btn-primary { color: #fff; background: var(--grad-steel); border-color: rgba(160,200,226,.28); box-shadow: var(--sh-btn); }
.btn-primary:hover { background: var(--grad-steel-hover); transform: translateY(-1px); }
.btn-primary:active { transform: none; }
/* Spökknappen: mörkt glas, så att texten klarar 4,5:1 även där fältet är ljusast */
.btn-ghost { color: #fff; background: rgba(11,31,51,.16); border-color: rgba(255,255,255,.42); }
.btn-ghost:hover { background: rgba(11,31,51,.26); border-color: rgba(255,255,255,.62); }
.card-data .btn-primary, .center-card .btn-primary { color: var(--ink); background: #F5F9FC; border-color: #fff; box-shadow: 0 12px 28px -16px rgba(0,0,0,.6); }
.card-data .btn-primary:hover, .center-card .btn-primary:hover { background: #fff; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .7; cursor: progress; transform: none; }
.btn .ico { width: 16px; height: 16px; flex: none; transition: transform var(--dur-1) var(--ease); }
.btn:hover .ico-right { transform: translateX(2px); }
.btn:hover .ico-down { transform: translateY(2px); }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Understrykningen under texten, inte under pilen: i en inline-flex stryks bara texten under */
.text-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,.45);
  text-underline-offset: .28em;
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.text-link:hover { text-decoration-color: #fff; }
.text-link .ico { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.text-link:hover .ico { transform: translateX(2px); }

/* Knappraden: vid spaltens vänsterkant, en andra knapp 16 px till höger, en textlänk 24 px till höger.
   Under 480 px blir knapparna hela bredden och länken hamnar under. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.actions .text-link { margin-left: 8px; }
@media (max-width: 479px) {
  .actions .btn { width: 100%; }
  .actions .text-link { margin-left: 0; }
}

/* ---------- Header ----------
   Genomskinlig: innehållets bredd, så att stjärnan och knappen står på containerns kanter.
   Scrollad: krymper till ett glaspiller. Kanten är 1 px, därför 13 och 15 px luft. */
.site-header {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: calc(100% - 24px); height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 calc(var(--gutter) - 13px); border-radius: var(--r-pill);
  border: 1px solid transparent; background: transparent;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
@media (min-width: 768px) {
  .site-header {
    top: 16px; height: 60px; padding: 0 15px;
    width: min(calc(var(--container) + 32px), calc(100% - 2 * var(--gutter) + 32px));
    transition: width var(--dur-2) var(--ease), padding var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  }
  .site-header.is-scrolled { width: min(1000px, calc(100% - 2 * var(--gutter) + 32px)); padding: 0 8px 0 20px; }
}
.site-header.is-scrolled, .menu-open .site-header {
  background: rgba(20, 41, 58, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: var(--sh-header);
}
.site-header.is-scrolled .header-cta { color: var(--ink); background: #F5F9FC; border-color: #fff; box-shadow: none; }
.site-header.is-scrolled .header-cta:hover { background: #fff; }
.menu-open .site-header { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: #fff; text-decoration: none; font: 700 17px/1 var(--font-sans); letter-spacing: -.02em;
  min-height: 44px; border-radius: var(--r-md);
}
.brand svg { width: 24px; height: 24px; }
@media (min-width: 768px) { .brand { font-size: 19px; } .brand svg { width: 26px; height: 26px; } }

.site-nav { display: none; }
.site-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 40px;
  font: 500 14px/1 var(--font-sans); color: #fff; padding: 0 12px; border-radius: var(--r-pill); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
.site-nav a:hover { background: rgba(255, 255, 255, .10); }
.site-nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); }
.header-actions { display: flex; align-items: center; gap: 4px; }
.header-cta { display: none; }
@media (min-width: 360px) { .header-cta { display: inline-flex; } }
@media (min-width: 960px) {
  .site-nav { display: block; }
  .menu-toggle { display: none !important; }
  /* Menyn mitt på sidan: tre spalter där sidospalterna är lika breda, så att en bredare knapp än
     loggan inte flyttar menyn åt vänster. Loggan vid vänsterkanten, knappen vid högerkanten. */
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-header > .brand { grid-column: 1; justify-self: start; }
  .site-header > .site-nav { grid-column: 2; }
  .site-header > .header-actions { grid-column: 3; justify-self: end; }
  /* Glaspillret: lika innermått på båda sidor, så att menyn står mitt i pillret. Loggan får sina 20 px
     från kanten som marginal i stället. */
  .site-header.is-scrolled { padding: 0 8px; }
  .site-header > .brand { transition: margin-left var(--dur-2) var(--ease); }
  .site-header.is-scrolled > .brand { margin-left: 12px; }
}
@media (min-width: 960px) and (max-width: 1099px) { .site-nav a { padding: 0 9px; } }
.header-back { display: inline-flex; align-items: center; gap: 8px; }
.header-back .ico { width: 16px; height: 16px; }

.menu-toggle {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: #fff;
}
.menu-toggle:hover { background: rgba(255,255,255,.10); }
.menu-toggle .ico { width: 22px; height: 22px; stroke-width: 1.75; }
.menu-toggle .ico-close { display: none; }
.menu-toggle[aria-expanded="true"] .ico-open { display: none; }
.menu-toggle[aria-expanded="true"] .ico-close { display: block; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 55; overflow-y: auto;
  background: rgba(20, 41, 58, .96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  padding: 84px var(--gutter) 32px;
  display: flex; flex-direction: column;
  opacity: 1; transition: opacity var(--dur-2) var(--ease);
}
@starting-style { .mobile-menu { opacity: 0; } }
.mobile-menu ul { list-style: none; }
.mobile-menu li + li { border-top: 1px solid var(--line-on-field); }
.mobile-menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; font: 600 21px/1.2 var(--font-sans); letter-spacing: -.015em; color: #fff; text-decoration: none;
}
.mobile-menu li a .ico { width: 20px; height: 20px; opacity: .7; }
.mobile-menu .menu-foot { margin-top: auto; padding-top: 28px; }
.mobile-menu .menu-foot p { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--on-field-2); text-align: center; }
.menu-open { overflow: hidden; }
.menu-open .header-cta { visibility: hidden; }
.mobile-menu .btn-primary { color: var(--ink); background: #F5F9FC; border-color: #fff; }
.mobile-menu .btn-primary:hover { background: #fff; }

/* ---------- Hero ----------
   Luften mellan menyraden och etiketten (--hero-luft) räknas från sidhuvudets underkant (64 px under 768 px,
   76 px från 768 px). Från 640 px är den sektionsluften, så att heron börjar med samma luft som mellan
   kapitlen (Victor 28/9: mer luft mellan menyraden och rubriken): 72 px på surfplatta och 88 px från 1024 px.
   Från 1024 px står luften kvar även i låga fönster. Där blir startkortet tätare i stället, och under 720 px
   vyhöjd står det på etiketten (se Startkortet, låga fönster). Först under cirka 650 px vyhöjd krymper
   luften, ned till 40 px, så att hela kortet syns i första vyn ned till cirka 600 px vyhöjd.
   Under 640 px står den kvar på 40 px, så att stortalet i kortet syns i första vyn i mobil (390 × 844). */
.hero { --hero-luft: 40px; position: relative; padding: calc(64px + var(--hero-luft)) 0 var(--section-y); }
@media (min-width: 640px) { .hero { --hero-luft: var(--section-y); } }
@media (min-width: 768px) { .hero { padding-top: calc(76px + var(--hero-luft)); } }
/* En svag glöd bakom datakortet. Under 1024 px står kortet under texten, så glöden flyttar ner dit
   (annars ljusnar den fältet bakom faktaraden och kontrasten sjunker under 4,5:1). */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px 320px at 70% 62%, rgba(159,216,245,.14), transparent 70%);
}
@media (min-width: 1024px) { .hero::before { background: radial-gradient(420px 320px at 76% 45%, rgba(159,216,245,.14), transparent 70%); } } /* mitt för kortet */
.hero h1 { margin-top: var(--stack-s); font-size: var(--t-display); line-height: 1.05; letter-spacing: -.035em; max-width: 15ch; }
.hero .lead { margin-top: var(--stack-m); font-size: var(--t-lead); line-height: 1.6; max-width: 34em; }
.hero .actions { margin-top: var(--stack-l); }
.hero .facts { margin-top: var(--stack-m); }
/* Faktaraden under knapparna: tre bockar, vit text. "Fast pris per månad" leder till villkoren */
.facts {
  display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; padding: 0;
  font: 500 14px/1.5 var(--font-sans); color: #fff;
}
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts .ico { width: 15px; height: 15px; color: var(--blue-300); stroke-width: 2.25; }
.facts a {
  padding-block: 2px; color: #fff; text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,.5); text-underline-offset: .22em;
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.facts a:hover { text-decoration-color: #fff; }
/* 1024–1199 px ryms bockarna inte på en rad i textspalten: en under en, i stället för en ensam bock på rad två.
   Under 1024 px står raden kvar som den är, så att stortalet i kortet syns i första vyn i mobil. */
@media (min-width: 1024px) and (max-width: 1199px) { .hero .facts { flex-direction: column; gap: 6px; } }

.hero-visual { position: relative; isolation: isolate; min-width: 0; }

/* Startkortets egna regler står samlade under "Startkortet (heronkortet)" efter det mörka datakortet */

/* Bandet "Kort sagt" under heron, och "Det här behöver vi från er": en hårlinje överst, celler på
   kolumnlinjerna, avdelare mitt i gapet */
.hero-strip { margin-top: var(--stack-l); }
.band { border-top: 1px solid var(--line-on-field-2); padding-top: 20px; }
.band > div { position: relative; min-width: 0; }
/* Rubrikerna i listor är Jakarta med vanliga bokstäver. Mono i versaler bara för kapitlens etiketter,
   kortens etikett och stegens tidsetiketter. */
.band dt { font: 600 14px/1.5 var(--font-sans); letter-spacing: -.005em; color: #fff; }
.band dd { margin-top: var(--stack-xs); font-size: 15px; line-height: 1.55; color: #fff; }
.band a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: .2em; white-space: nowrap; }
.band a:hover { text-decoration-color: #fff; }
@media (max-width: 639px) {
  .band { row-gap: 0; padding-top: 0; }
  .band > div { padding-block: 16px; }
  .band > div + div { border-top: 1px solid var(--line-on-field); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .band > div:nth-child(even)::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--col-gap) / -2); width: 1px; background: var(--line-on-field); }
}
@media (min-width: 1024px) {
  .band > div + div::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--col-gap) / -2); width: 1px; background: var(--line-on-field); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-in { animation: hero-in .6s var(--ease) both; }
  .hero-in.d1 { animation-delay: 60ms; }
  .hero-in.d2 { animation-delay: 120ms; }
  .hero-in.d3 { animation-delay: 180ms; }
  .hero-in.d4 { animation-delay: 240ms; }
  .hero-in.d5 { animation-delay: 300ms; }
  /* Staplarna växer in, siffran står still */
  .hero-visual .bar > i { animation: bar-in .9s var(--ease) .45s both; }
  .hero-visual .data-row + .data-row .bar > i { animation-delay: .6s; }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes bar-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Mörkt datakort ---------- */
.card-data {
  position: relative; background: var(--grad-steel); color: #fff;
  border: 1px solid var(--line-on-dark); border-radius: var(--r-xl);
  padding: var(--pad-card); box-shadow: var(--sh-dark); --focus: #fff;
}
.card-data .label {
  display: block; font: 500 12px/1.5 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78);
}
.card-data .subject { margin-top: var(--stack-xs); font: 600 16px/1.4 var(--font-sans); letter-spacing: -.005em; color: #fff; }
.card-data .figure {
  margin-top: var(--stack-s); font: 700 var(--t-figure)/1 var(--font-sans); letter-spacing: -.02em; color: #fff;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
/* "cirka" och enheten i halv storlek; mellanslagen står inuti spannen, så att de också blir halva */
.card-data .figure .unit, .card-data .figure .pre { font-size: .5em; font-weight: 600; color: rgba(255,255,255,.72); letter-spacing: 0; }
.card-data > p, .card-data .text { margin-top: 14px; color: rgba(255,255,255,.84); font-size: var(--t-small); line-height: 1.6; }
.card-data .text.after { margin-top: 20px; font-size: 14px; }
.card-data > :first-child { margin-top: 0; } /* etiketten överst i kortet har ingen egen luft utöver innermåttet */
.card-data h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-top: 10px; line-height: 1.35; }
.data-rows { margin-top: var(--stack-m); list-style: none; }
.data-row + .data-row { margin-top: var(--stack-s); }
.data-row .row-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
  font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.80);
}
.data-row .row-head .num { font: 400 14px/1.4 var(--font-sans); font-variant-numeric: tabular-nums lining-nums; color: rgba(255,255,255,.80); white-space: nowrap; text-align: right; }
/* Talet lyfts, "cirka" och "kr" blir lugnare */
.data-row .row-head .num > span { font-weight: 600; color: #fff; }
.data-row .row-head .num small { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.74); }
@media (max-width: 479px) {
  .data-rows:not(.keep) .row-head { grid-template-columns: minmax(0, 1fr); }
  .data-rows:not(.keep) .row-head .num { text-align: left; margin-top: 2px; }
}
.data-row.no-bar { padding-top: 14px; border-top: 1px solid var(--line-in-dark); }
.data-row .row-sub { margin-top: 6px; font-size: 13px; line-height: 1.4; text-align: right; color: rgba(255,255,255,.76); font-variant-numeric: tabular-nums lining-nums; }
/* Mobil och surfplatta: kronor per ton står på samma rad som stapeln, till höger om den. Alla rader i ett
   exempel har samma bredd på talet, så staplarna jämförs på samma längd. */
@media (max-width: 639px) {
  .examples .data-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.25rem; column-gap: 12px; align-items: center; }
  .examples .data-row .row-head { grid-column: 1 / -1; }
  .examples .data-row .bar { margin-top: 6px; }
  .examples .data-row .row-sub { margin-top: 6px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .examples .data-row { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; column-gap: 16px; align-items: center; }
  .examples .data-row .row-head { grid-column: 1 / -1; }
  .examples .data-row .bar, .examples .data-row .row-sub { margin-top: 8px; }
}
.bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); margin-top: var(--stack-xs); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--niva-farg, var(--accent)); }
/* Heronkortet, före avdrag: isblått */
.bar.is-muted > i { background: var(--isbla-dampad); }
/* Underlaget: källraderna som en liten tabell */
.card-data dl.basis {
  display: grid; gap: var(--stack-xs); margin-top: var(--stack-m); padding-top: var(--stack-s); border-top: 1px solid var(--line-in-dark);
  font: 400 13px/1.5 var(--font-sans); color: rgba(255,255,255,.80);
}
.card-data dl.basis > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.card-data dl.basis dt { font: 600 13px/1.5 var(--font-sans); letter-spacing: 0; color: rgba(255,255,255,.72); }
.card-data .basis sub { font-size: .75em; }
/* Källorna går att klicka på, men länkarna ska inte ta över kortet */
.card-data dl.basis a { color: inherit; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: .2em; white-space: nowrap; }
.card-data dl.basis a:hover { text-decoration-color: #fff; }

/* ---------- Startkortet (heronkortet): tre zoner ----------
   1 Vad och hur mycket: etikett, vara, stortal och en rad om vad det gäller.
   2 Hur det räknas: staplarna och kostnaden per ton i en infälld bricka med ljusare ton.
   3 Foten: mörkare ton, en rad förbehåll och raden "Så är det räknat" (<details>, fungerar utan
     JavaScript; länken /#underlag öppnar den via site.js).
   Zonerna skiljs av luft och ton, inte av linjer. Textkanten (--kant) är densamma i alla zoner och runt om:
   etiketten upptill, texten åt sidorna och ringen i "Så är det räknat" både åt höger och nedåt. Brickan
   sticker ut utanför den lika mycket som sitt eget innermått. Koppar bara för det man betalar för.
   Från 1024 px lägger sig underlaget som en baksida över kortet, i fotens mörka ton: kortet behåller sin
   höjd, så att texten bredvid står still. Under 1024 px står kortet under texten och underlaget fälls ut
   under foten. Allt är avgränsat till .hero-visual, så övriga .card-data på sajten påverkas inte. */
.hero-visual .card-data {
  --kant: var(--pad-card);
  --bricka: 16px;
  --zon-luft: 28px;
  --fot-ton: rgba(3,16,30,.32);
  --r-inre: calc(var(--r-xl) - 1px);
  display: flex; flex-direction: column; padding: 0;
}
@media (max-width: 639px) { .hero-visual .card-data { --kant: 24px; --bricka: 12px; --zon-luft: 24px; } }
.hero-visual .card-data .num { font-variant-numeric: tabular-nums lining-nums; }

/* 1 Vad och hur mycket. Stortalet är 40 px i mobil och 48 px från cirka 1000 px, i alla bredder därifrån;
   "cirka" och enheten 20 px, samma som kopparns tal. */
.hero-visual .zon-vad { padding: var(--kant) var(--kant) 0; }
.hero-visual .zon-vad .subject { margin-top: 8px; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.hero-visual .zon-vad .figure { margin-top: 20px; font-size: clamp(2.5rem, 2rem + 1.6vw, 3rem); letter-spacing: -.03em; }
.hero-visual .zon-vad .figure .pre, .hero-visual .zon-vad .figure .unit { font-size: .42em; }
.hero-visual .zon-vad .text { margin-top: 12px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.78); text-wrap: balance; }

/* 2 Hur det räknas: enheten står en gång, i rubrikraden; en svag avdelare före kronorna */
.hero-visual .zon-hur {
  margin: var(--zon-luft) calc(var(--kant) - var(--bricka)) 0;
  padding: calc(var(--bricka) - 2px) var(--bricka) var(--bricka);
  background: rgba(255,255,255,.055);
  border: 1px solid transparent; /* syns bara med tvingade färger */
  border-radius: var(--r-md); /* koncentriskt mot kortets 24 px */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.hero-visual .zon-rubrik {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font: 500 12px/1.5 var(--font-sans); letter-spacing: .01em; color: rgba(255,255,255,.74);
}
.hero-visual .zon-rubrik sub { font-size: .75em; }
.hero-visual .zon-hur .data-rows { margin-top: 10px; }
.hero-visual .zon-hur .data-row + .data-row { margin-top: 14px; }
.hero-visual .zon-hur .row-head .num > span { font-size: 15px; }
/* Spåret är mörkare än brickan, som en fåra: staplarna får minst 3:1 mot både spåret och brickan */
.hero-visual .zon-hur .bar { margin-top: 8px; background: rgba(3,16,30,.35); }
.hero-visual .zon-hur .bar.is-muted > i { background: rgba(159,216,245,.6); }
.hero-visual .zon-hur .bar:not(.is-muted) > i { background: var(--accent-varm); } /* koppar, Victor 28/9 */
.hero-visual .summa {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
  font: 600 14px/1.4 var(--font-sans); color: #fff;
}
.hero-visual .summa .num { font-weight: 400; color: rgba(255,255,255,.80); white-space: nowrap; }
.hero-visual .summa .num [data-siffra] { font: 700 20px/1 var(--font-sans); letter-spacing: -.01em; color: var(--accent-varm); }

/* 3 Foten: förbehållet och en hel rad att klicka på */
.hero-visual .zon-fot {
  margin-top: var(--zon-luft); padding-top: 16px;
  background: var(--fot-ton);
  border-top: 1px solid transparent; /* syns bara med tvingade färger */
  border-radius: 0 0 var(--r-inre) var(--r-inre);
}
.hero-visual .forbehall {
  position: relative; z-index: 2; padding-inline: var(--kant);
  font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.80); text-wrap: balance;
}
.hero-visual .underlag > summary {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; margin-top: 6px; padding: 0 var(--kant);
  list-style: none; cursor: pointer; font: 600 14px/1.3 var(--font-sans); color: #fff;
  border-radius: 0 0 var(--r-inre) var(--r-inre); /* fokusringen följer kortets hörn */
  transition: background-color var(--dur-1) var(--ease);
}
.hero-visual .underlag > summary::-webkit-details-marker { display: none; }
.hero-visual .underlag > summary:hover { background: rgba(255,255,255,.04); }
.hero-visual .underlag > summary:focus-visible { outline-offset: -4px; }
.hero-visual .underlag > summary .ico {
  flex: none; width: 28px; height: 28px; padding: 6px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%;
  stroke-width: 1.75; transition: transform var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
}
.hero-visual .underlag > summary:hover .ico { border-color: rgba(255,255,255,.6); }
.hero-visual .underlag[open] > summary .ico { transform: rotate(45deg); } /* plus blir kryss */

/* Underlaget: värdet först, källan tystare på raden under */
.hero-visual .underlag-panel { padding: 2px var(--kant) 24px; }
.hero-visual .underlag-panel > .label { display: none; }
.hero-visual .underlag-not { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.84); }
.hero-visual .card-data .underlag-panel dl.basis {
  display: block; margin-top: 12px; padding-top: 0; border-top: 0;
  font: 400 13px/1.5 var(--font-sans); color: rgba(255,255,255,.86);
}
.hero-visual .underlag-panel dl.basis > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding-block: 9px; border-top: 1px solid rgba(255,255,255,.09); }
.hero-visual .underlag-panel dl.basis > div:last-child { padding-bottom: 0; }
.hero-visual .underlag-panel .kalla { display: block; margin-top: 1px; font-size: 12px; color: rgba(255,255,255,.72); }
@media (max-width: 479px) {
  .hero-visual .underlag-panel dl.basis > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Under 1024 px: raden "Så är det räknat" är klickbar ända ned till kanten, och ringen står lika långt från
   underkanten som från sidan. Utfälld står underlaget direkt under raden. */
@media (max-width: 1023px) {
  .hero-visual .underlag > summary { min-height: calc(52px + var(--kant) - 12px); padding-bottom: calc(var(--kant) - 12px); }
  .hero-visual .underlag[open] > summary { min-height: 52px; padding-bottom: 0; border-radius: 0; }
  .hero-visual .underlag { interpolate-size: allow-keywords; }
  .hero-visual .underlag::details-content { block-size: 0; overflow-y: clip; }
  .hero-visual .underlag[open]::details-content { block-size: auto; }
}
/* Fälls ut mjukt där webbläsaren kan (::details-content och interpolate-size), annars direkt. Bara vid
   no-preference: sajtens regel för minskad rörelse gäller *, ::before och ::after, inte ::details-content. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .hero-visual .underlag::details-content {
    transition: block-size var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete;
  }
}
/* Från 1024 px står kortet bredvid texten (Victor 28/9): överkanten på versalhöjden i "Vi" (h1), inte på
   etiketten ovanför, och kortet i sin egen höjd med samma luft i alla bredder därifrån. Avståndet ligger som
   innermått i spalten (--linje-h1), så att spalten fortfarande börjar i linje med texten. Från 1200 px får
   kortet sluta nedanför bockraden (Victor 28/9: hellre ett kort i sina egna proportioner än ett avkapat).
   Blir texten högre än kortet står texten kvar överst och luften hamnar under kortet. I fönster under 768 px
   höjd är kortet tätare, och under 720 px står det på etiketten (se låga fönster nedan). */
@media (min-width: 1024px) {
  .hero-visual { align-self: start; padding-top: var(--linje-h1); }
  .hero-visual .card-data { --kant: 28px; --zon-luft: 22px; }
  .hero-visual .zon-vad .text { margin-top: 10px; }
  .hero-visual .zon-hur .data-rows { margin-top: 8px; }
  .hero-visual .zon-hur .data-row + .data-row { margin-top: 12px; }
  .hero-visual .zon-hur .bar { margin-top: 6px; }
  .hero-visual .summa { margin-top: 14px; padding-top: 12px; }
  /* Raden "Så är det räknat" går ända ned till kanten: ringen står --kant från både sidan och underkanten */
  .hero-visual .underlag > summary { min-height: calc(44px + var(--kant) - 8px); margin-top: 4px; padding-bottom: calc(var(--kant) - 8px); }

  .hero-visual .underlag-panel {
    position: absolute; inset: 0; z-index: 1; overflow-y: auto;
    padding: var(--kant) var(--kant) calc(96px + var(--kant) - 8px); /* nedtill ligger foten kvar */
    background: linear-gradient(var(--fot-ton), var(--fot-ton)), var(--grad-steel);
    border-radius: var(--r-inre);
  }
  .hero-visual .underlag-panel > .label { display: block; }
  .hero-visual .underlag-not { margin-top: 4px; font-size: 15px; color: #fff; }
  .hero-visual .underlag-panel dl.basis { margin-top: 10px; }
  .hero-visual .underlag-panel dl.basis > div { padding-block: 9px; }
  .hero-visual .underlag-panel dl.basis > div:last-child { padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.09); }
  /* Framsidan döljs under baksidan, så att den inte läses upp eller syns i tvingade färger */
  .hero-visual .card-data:has(.underlag[open]) > :not(.zon-fot) { visibility: hidden; }
  /* Länken /#underlag: webbläsaren rullar till <details>, som ligger i foten, men baksidan täcker hela
     kortet. Med en marginal på en hel vyhöjd stannar rullningen högst upp, så att hela kortet syns. */
  .hero-visual .underlag { scroll-margin-top: 100vh; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero-visual .underlag[open] .underlag-panel { animation: underlag-upp var(--dur-2) var(--ease); }
}
/* Låga fönster från 1024 px, till exempel 1366 × 657 och 1280 × 610 (vanliga Windows-laptopar) och iPad
   liggande: luften under menyraden står kvar på 88 px och kortet blir tätare, så att det syns helt i första
   vyn i stället för att kapas nedtill.
   - Under 768 px vyhöjd: 16 px mellan zonerna (i stället för 22), stortalet 44 px och tätare rader. Kanten
     är densamma runt om, så ringen i "Så är det räknat" står kvar 29 px från både sidan och underkanten.
     Kortet blir 474 px högt (495 vid 1024–1079 px bredd, där raden under stortalet bryts) i stället för 514,
     och baksidan ryms utan inre rullning.
   - Under 720 px vyhöjd: kortet står på etiketten i stället för på "Vi" (linjen mot h1 gäller från 720 px
     höjd). Luften krymper först när kortet inte ryms, ned till 40 px: 566 = sidhuvudet 76 + kortet 474 +
     16 px luft under kortet (587 med kortet 495). Hela kortet syns ned till cirka 600 px vyhöjd. */
@media (min-width: 1024px) and (max-height: 767px) {
  .hero-visual .card-data { --zon-luft: 16px; }
  .hero-visual .zon-vad .subject { margin-top: 6px; }
  .hero-visual .zon-vad .figure { margin-top: 14px; font-size: 2.75rem; }
  .hero-visual .zon-vad .text { margin-top: 6px; }
  .hero-visual .zon-hur .data-rows { margin-top: 6px; }
  .hero-visual .zon-hur .data-row + .data-row { margin-top: 10px; }
  .hero-visual .summa { margin-top: 12px; padding-top: 10px; }
  .hero-visual .zon-fot { padding-top: 12px; }
}
@media (min-width: 1024px) and (max-height: 719px) {
  .hero { --hero-luft: clamp(40px, 100vh - 587px, var(--section-y)); }
  .hero-visual { padding-top: 0; }
}
@media (min-width: 1080px) and (max-height: 719px) {
  .hero { --hero-luft: clamp(40px, 100vh - 566px, var(--section-y)); }
}
@keyframes underlag-upp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@media (forced-colors: active) {
  .hero-visual .zon-hur { border-color: CanvasText; }
  .hero-visual .zon-fot { border-top-color: CanvasText; }
  .hero-visual .zon-hur .bar.is-muted > i, .hero-visual .zon-hur .bar:not(.is-muted) > i { forced-color-adjust: none; background: CanvasText; }
  .hero-visual .underlag-panel { background: Canvas; }
  .hero-visual .underlag > summary .ico { border-color: CanvasText; }
}
@media print {
  /* Tätare än på skärmen (staplarna och tonerna skrivs inte ut), så att kortet och remsan under ryms på
     första sidan som i utgångsläget */
  .hero-visual .card-data { --zon-luft: 14px; }
  .hero-visual .summa { margin-top: 10px; padding-top: 8px; }
  .hero-visual .zon-fot { padding-top: 10px; border-top: 1px solid #bbb; }
  .hero-visual .zon-hur, .hero-visual .zon-fot { break-inside: avoid; }
  .hero-visual .underlag > summary .ico, .hero-visual .underlag-panel > .label { display: none; }
  .hero-visual .underlag > summary, .hero-visual .underlag[open] > summary { min-height: 0; margin-top: 6px; padding-block: 0; }
  .hero-visual .underlag::details-content { display: block; block-size: auto; content-visibility: visible; }
  .hero-visual .underlag-panel { position: static; padding: 2px var(--kant) 18px; }
  .hero-visual .card-data:has(.underlag[open]) > :not(.zon-fot) { visibility: visible; }
  /* Källorna som en löpande rad direkt efter "Certifikaten köps 2027.", som i utgångsläget, så att ingen rad delas */
  .hero-visual .underlag-not { display: inline; font-size: 13px; }
  .hero-visual .underlag-not::after { content: " "; }
  .hero-visual .card-data .underlag-panel dl.basis { display: inline; margin-top: 0; }
  .hero-visual .card-data .underlag-panel dl.basis > div, .hero-visual .card-data .underlag-panel dl.basis dt,
  .hero-visual .card-data .underlag-panel dl.basis dd, .hero-visual .underlag-panel .kalla { display: inline; margin: 0; padding: 0; border: 0; font-size: inherit; }
  .hero-visual .card-data .underlag-panel dl.basis dt { font-weight: 600; }
  .hero-visual .card-data .underlag-panel dl.basis dt::after { content: " "; }
  .hero-visual .card-data .underlag-panel dl.basis dd::after { content: ". "; }
  .hero-visual .underlag-panel .kalla::before { content: "("; }
  .hero-visual .underlag-panel .kalla::after { content: ")"; }
}

/* ---------- Ljusa kort ----------
   En ytterradie på sajten: alla stora ytor (ljusa och mörka kort, paneler, frågekorten, formulären) har 24 px,
   allt inuti 12 eller koncentriskt 8, knapparna är piller. */
.card {
  background: var(--grad-paper); color: var(--ink-2);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-xl);
  padding: var(--pad-card); box-shadow: var(--sh-card);
}
.card h3 { color: var(--ink); font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin-top: var(--stack-s); }
.card p { margin-top: var(--stack-xs); font-size: var(--t-small); line-height: 1.6; }

/* Numrerade kort: löpnummer i mono. Numren är dekor. */
.cards-numbered { counter-reset: kort; list-style: none; } /* /boka/ har korten som en lista */
.cards-numbered > .card::before {
  counter-increment: kort;
  content: counter(kort, decimal-leading-zero);
  content: counter(kort, decimal-leading-zero) / "";
  display: block; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--blue-700);
}
/* Samma rader i alla kort i raden (nummer, rubrik, text): numret, rubrikens överkant och brödtexten står
   på samma höjd. Blir en rubrik kortare än de andra hamnar luften under den. */
@media (min-width: 1024px) {
  .grid-3.cards-numbered { row-gap: 0; }
  .grid-3.cards-numbered > .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
  .grid-3.cards-numbered > .card h3 { align-self: start; }
}
@media (min-width: 640px) {
  .grid-4.cards-numbered { row-gap: 0; }
  .grid-4.cards-numbered > .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
  .grid-4.cards-numbered > .card h3 { align-self: start; }
}
/* Två i rad: luften mellan raderna blir marginal på andra radens kort (radgapet är 0 för subgrid) */
@media (min-width: 640px) and (max-width: 1279px) {
  .grid-4.cards-numbered > .card:nth-child(n+3) { margin-top: var(--stack-m); }
}

.panel-light {
  background: var(--grad-paper); color: var(--ink-2);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-xl); box-shadow: var(--sh-card);
}

/* ---------- Räkneexempel: sammanfogad panel ----------
   Cellerna står i samma rutnät som korten (gap som korten, cellerna börjar på kolumnlinjerna) och
   avdelaren ligger mitt i gapet. Kanten är en inre skugga, så att cellerna inte flyttas en pixel. */
.card-data.examples { display: grid; padding: 0; overflow: hidden; border: 0; box-shadow: inset 0 0 0 1px var(--line-on-dark), var(--sh-dark); }
.examples .ex { position: relative; display: grid; align-content: start; padding: var(--pad-card); }
.examples .ex + .ex { border-top: 1px solid var(--line-in-dark); }
.examples .ex h3 { margin-top: var(--stack-xs); }
.examples .data-rows { margin-top: 20px; }
.card-data.examples .ex-basis { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line-in-dark); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.80); }
.card-data.examples .ex-foot { margin: 0; padding: var(--stack-s) var(--pad-card) var(--pad-card); border-top: 1px solid var(--line-in-dark); font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.82); }
.examples .ex-foot strong { color: #fff; }
.examples .ex-foot a, .examples .ex-basis a { color: inherit; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: .2em; white-space: nowrap; }
.examples .ex-foot a:hover, .examples .ex-basis a:hover { text-decoration-color: #fff; }
@media (min-width: 1024px) {
  .card-data.examples { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
  /* Samma radhöjder i alla tre exemplen: källraden börjar på samma höjd */
  .examples .ex { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .examples .ex + .ex { border-top: 0; }
  .examples .ex + .ex::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--col-gap) / -2); width: 1px; background: var(--line-in-dark); }
  /* Fotraden i hela panelens bredd, men texten i en läsbar radlängd och lika luft upp och ned. Minst 214 px
     till höger: plats för värmeskalans förklaring (166 px) med luft även vid 1024 px */
  .card-data.examples .ex-foot { position: relative; grid-column: 1 / -1; padding-block: 24px; padding-right: max(var(--pad-card), calc(100% - 720px), 214px); }
}
/* Från 1280 px står fotraden på spalterna: texten i spalt 1–2, förklaringen på spalt 3:s textkant (samma linje
   som etiketten i tredje exemplet) och avdelaren mellan spalt 2 och 3 fortsätter ned genom foten.
   % är panelens bredd; en spalt är (100 % − 2 gap) / 3. */
@media (min-width: 1280px) {
  .card-data.examples .ex-foot { padding-right: calc((100% - 2 * var(--col-gap)) / 3 + var(--col-gap) + var(--pad-card)); }
  .card-data.examples .ex-foot::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
    left: calc((100% - 2 * var(--col-gap)) * 2 / 3 + 1.5 * var(--col-gap)); background: var(--line-in-dark);
  }
}

/* Värmeskalan: raden sätter bara variablerna --niva-farg (stapeln) och --niva-text (talet i kr per ton), så att
   regeln för tvingade färger (.bar > i) vinner utan extra väljare. Rader utan data-niva behåller accenten.
   Antalet nivåer här och i förklaringen ska stämma med sifferblocket: siffror.mjs --kontroll larmar annars. */
.examples .data-row[data-niva="1"] { --niva-farg: var(--niva-1); --niva-text: var(--niva-1-text); }
.examples .data-row[data-niva="2"] { --niva-farg: var(--niva-2); --niva-text: var(--niva-2-text); }
.examples .data-row[data-niva="3"] { --niva-farg: var(--niva-3); --niva-text: var(--niva-3-text); }
.examples .data-row[data-niva="4"] { --niva-farg: var(--niva-4); --niva-text: var(--niva-4-text); }
.examples .data-row[data-niva] .row-sub > [data-siffra] { color: var(--niva-text); font-weight: 500; }
/* Förklaringen: fyra rutor med gränserna under skarvarna, bara från 1024 px, i fotradens tomma högerdel
   (utanför flödet, så att rutnätet inte ändras). Smalare hamnar den långt under staplarna och gör fotraden
   60 px högre, så den döljs där; talen i kr per ton står ändå i text. */
.ex-skala {
  display: none; grid-template-columns: repeat(4, 40px); column-gap: 2px; width: max-content;
  font: 400 12px/1.3 var(--font-sans); font-variant-numeric: tabular-nums lining-nums; color: rgba(255,255,255,.76);
}
.ex-skala-namn { grid-column: 1 / -1; margin-bottom: 6px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.ex-skala > i { height: 6px; background: var(--niva-1); }
.ex-skala > i:nth-of-type(1) { border-radius: 999px 0 0 999px; }
.ex-skala > i:nth-of-type(2) { background: var(--niva-2); }
.ex-skala > i:nth-of-type(3) { background: var(--niva-3); }
.ex-skala > i:nth-of-type(4) { background: var(--niva-4); border-radius: 0 999px 999px 0; }
.ex-skala > span[data-siffra] { grid-row: 3; margin-top: 5px; text-align: center; white-space: nowrap; }
.ex-skala > span[data-siffra]:nth-of-type(2) { grid-column: 1 / span 2; }
.ex-skala > span[data-siffra]:nth-of-type(3) { grid-column: 2 / span 2; }
.ex-skala > span[data-siffra]:nth-of-type(4) { grid-column: 3 / span 2; }
/* Etiketten på textens första rad. 1024–1279 px längst till höger (två spalter ger för korta rader där),
   från 1280 px på tredje spaltens textkant. */
@media (min-width: 1024px) {
  .ex-skala { display: grid; position: absolute; top: 27px; right: var(--pad-card); }
}
@media (min-width: 1280px) {
  .ex-skala { right: auto; left: calc((100% - 2 * var(--col-gap)) * 2 / 3 + 2 * var(--col-gap) + var(--pad-card)); }
}

/* Räkna på er egen import: panelens bildtext och avslutning, centrerad under den från 640 px (Victor 28/9),
   texten i två lika långa rader och knappen och textlänken som ett par mitt under. Under 640 px vänsterställd
   som all löptext i mobil, och under 480 px knappen i hela bredden. */
.tool { max-width: var(--text); margin-top: var(--stack-l); }
.tool > p { font-size: var(--t-body); line-height: 1.6; color: #fff; }
.tool > p strong { font-weight: 600; }
.tool .actions { margin-top: var(--stack-m); }
@media (min-width: 640px) {
  .tool { margin-inline: auto; text-align: center; }
  .tool > p { text-wrap: balance; }
  .tool .actions { justify-content: center; gap: 16px 24px; }
  .tool .actions .text-link { margin-left: 0; }
}

/* ---------- Viktiga datum ---------- */
.timeline li { position: relative; min-width: 0; padding-left: 32px; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring);
}
/* Mobil: linjen går nedåt till nästa datum */
.timeline li::after { content: ""; position: absolute; left: 5px; top: 24px; bottom: calc(4px - var(--stack-m)); width: 1px; background: var(--line-on-field-2); }
.timeline li:last-child::after { display: none; }
/* Datumen är kapitlets innehåll och får tydlig storlek */
.timeline time {
  display: block; font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.3 var(--font-sans); letter-spacing: -.015em; color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
}
.timeline p { margin-top: 4px; font-size: var(--t-small); line-height: 1.6; max-width: 52ch; }
.source-line { margin-top: var(--stack-l); font-size: 13px; line-height: 1.5; color: #fff; }
/* Från 640 px står datumen i rad. Linjen går bara inom en rad och tonar ut efter radens sista datum. */
@media (min-width: 640px) {
  .timeline li { padding: 32px 0 0; }
  .timeline li::before { top: 0; }
  .timeline li::after { display: block; left: 19px; right: calc(8px - var(--col-gap)); top: 5px; bottom: auto; width: auto; height: 1px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .timeline li:nth-child(2n)::after { display: block; right: 0; background: linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,0)); }
}
@media (min-width: 1024px) {
  .timeline li:last-child::after { display: block; right: 0; background: linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,0)); }
}

/* ---------- Så går det till: en tidslinje med fyra steg ----------
   En enda rak skena går genom sifferbrickorna, från mitten av bricka 1 till mitten av bricka 4. Den ligger
   under brickorna, så den börjar och slutar i en bricka och syns bara mellan dem. Steg 2 och 3 står på en
   gemensam tonad yta, "Månad ett"; etiketten står en gång, överst på ytan (steg 3:s etikett finns kvar för
   skärmläsare). Inga avdelare: luften skiljer stegen åt.
   Skenan och ytan är pseudoelement på listan som placeras i listans rutnät (grid-row/grid-column på ett
   absolut placerat element): de följer stegen utan uppmätta tal.
   Staplat under 1280 px (brickorna i en spalt till vänster, skenan lodrät), fyra i rad från 1280 px.
   Ytan ligger --inset från kortets kant och innehållet --pad-card från kortets kant, så att luften inne i ytan
   är lika stor på alla fyra sidor: 16 px under 640 px (--inset 4 px), 24 px från 640 px (--inset 8 px).
   Ytan har ingen kantlinje på skärmen, bara tonen: skenan går då inte genom någon kant. */
.steps {
  --b: 32px;                                   /* brickans storlek */
  --inset: 4px;                                /* ytan "Månad ett" från kortets kant (8 px från 640 px) */
  --tag-h: 18px;                               /* etikettens rad */
  --tag-gap: 8px;                              /* etikett till rubrik */
  --rail: #9AB3C8;                             /* skenan: täckande stålblå, lika på kortet och på ytan */
  position: relative; isolation: isolate; list-style: none; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, auto);
  padding-block: var(--inset);
  border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), var(--sh-card);
}
/* Ytan "Månad ett": steg 2 och 3 */
.steps::before {
  content: ""; position: absolute; z-index: -1; grid-column: 1; grid-row: 2 / 4;
  top: 0; bottom: 0; left: var(--inset); right: var(--inset);
  border-radius: calc(var(--r-xl) - var(--inset));
  background: linear-gradient(180deg, rgba(46,134,193,.085) 0%, rgba(46,134,193,.06) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
/* Skenan, staplat: rad 1–3 plus steg 4 fram till brickans mitt. --y är brickans mitt räknat från stegets
   överkant: luften, etikettens rad och halva rubrikraden. Steg 1 och 4 har båda en etikett. */
.steps::after {
  --y: calc(var(--pad-card) - var(--inset) + var(--tag-h) + var(--tag-gap) + .65 * var(--t-h3));
  content: ""; position: absolute; grid-column: 1; grid-row: 1 / 4;
  top: var(--y); bottom: calc(-1 * var(--y));
  left: calc(var(--pad-card) + var(--b) / 2 - 1px); width: 2px;
  background: var(--rail); border-radius: 1px;
}
.step {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: var(--b) minmax(0, 1fr); column-gap: 16px; align-content: start;
  padding: calc(var(--pad-card) - var(--inset)) var(--pad-card);
}
@media (min-width: 640px) { .steps { --inset: 8px; } }
.step-head { display: contents; }
.step-tag {
  grid-column: 2; grid-row: 1; margin-bottom: var(--tag-gap); white-space: nowrap;
  font: 500 12px/var(--tag-h) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700);
}
.step-badge {
  grid-column: 1; grid-row: 2; align-self: start; position: relative; z-index: 1;
  /* mitt på rubrikens första rad */
  margin-top: calc(.65 * var(--t-h3) - var(--b) / 2);
  width: var(--b); height: var(--b); border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-steel); color: #fff;
  /* Ringen ligger innanför brickans 32 px: brickans vänsterkant står då i linje med etikettens och rubrikens */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(20,41,58,.9), 0 6px 14px -6px rgba(3,16,30,.55);
  font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
.step h3 { grid-column: 2; grid-row: 2; color: var(--ink); font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.step p:not(.step-tag) { grid-column: 2; grid-row: 3; margin-top: var(--stack-xs); font-size: var(--t-small); line-height: 1.6; }
/* 768–1279: ett steg per rad, rubriken och texten bredvid varandra på samma baslinje */
@media (min-width: 768px) and (max-width: 1279px) {
  .step { grid-template-columns: var(--b) minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col-gap); }
  .step h3 { align-self: baseline; padding-right: 8px; }
  .step p:not(.step-tag) { grid-column: 3; grid-row: 2; margin-top: 0; align-self: baseline; }
}
/* Fyra i rad från 1280 px. Samma rader i alla steg (etikett, bricka, rubrik, text) genom subgrid: brickorna
   står på en linje och rubrikerna börjar på samma höjd även när en rubrik har två rader. */
@media (min-width: 1280px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: 0; }
  .step { grid-row: 1 / -1; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 0; padding: var(--pad-card); }
  .step-tag { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .step-badge { grid-column: 1; grid-row: 2; margin: 16px 0 20px; }
  .step h3 { grid-column: 1; grid-row: 3; }
  .step p:not(.step-tag) { grid-column: 1; grid-row: 4; }
  .steps::before { grid-column: 2 / 4; grid-row: 1 / -1; top: var(--inset); bottom: var(--inset); }
  /* Brickornas rad, kolumn 1–3 plus gapet och steg 4 fram till brickans mitt */
  .steps::after {
    grid-column: 1 / 4; grid-row: 2; top: calc(16px + var(--b) / 2 - 1px); bottom: auto; height: 2px; width: auto;
    left: calc(var(--pad-card) + var(--b) / 2); right: calc(-1 * (var(--col-gap) + var(--pad-card) + var(--b) / 2));
  }
}

/* Det här behöver vi från er: samma band som under heron */
.skicka { margin-top: var(--stack-l); scroll-margin-top: 96px; }
.skicka > h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #fff; }
.skicka .band { margin-top: var(--stack-m); }
.skicka > p { max-width: var(--text); margin-top: var(--stack-m); font-size: var(--t-small); line-height: 1.6; }

/* ---------- Bordic Löpande: beslutskortet och villkoren som ett par ---------- */
.offer > .card-data { display: flex; flex-direction: column; margin: 0; }
.sample-card .subject { font-size: 18px; letter-spacing: -.01em; }
.sample-card .sample-sub { margin-top: 2px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.80); }
.terms { margin-top: var(--stack-xs); }
/* Samma radmall i båda korten under 1024 px: etiketten över värdet under 560 px, en etikettspalt på 136 px
   därifrån. Från 1024 px, när korten står bredvid varandra, har villkoren en smalare etikettspalt. */
.terms div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; border-top: 1px solid var(--line-in-dark); }
@media (min-width: 560px) { .terms div { grid-template-columns: 136px minmax(0, 1fr); gap: 16px; align-items: baseline; } }
@media (min-width: 1024px) { .offer-card .terms div { grid-template-columns: 104px minmax(0, 1fr); } }
.terms div:first-child { border-top: 0; }
.terms dt { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.76); }
.terms dd { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.5; }
.terms dd small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: rgba(255,255,255,.80); }
/* .terms står ovanför, så väljarna här har en klass till för att gå före */
.terms.sample-terms { margin-top: 18px; border-top: 1px solid var(--line-in-dark); }
.terms.sample-terms div:first-child { border-top: 0; }
.sample-terms dd span[data-siffra] { font-variant-numeric: tabular-nums lining-nums; }
/* Tomma fält med streckad kant och en svag fyllning: det som fylls i med era leverantörers uppgifter. Ser ut
   som ett fält att fylla i, inte som en skiss. */
.sample-terms dd.is-field {
  padding: 7px 12px; border: 1px dashed rgba(255,255,255,.26); border-radius: var(--r-md);
  background: rgba(255,255,255,.035);
  font-size: 14px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,.80);
}
@media (min-width: 1280px) { .terms.sample-terms div { grid-template-columns: 184px minmax(0, 1fr); } }
/* Bildtexten och knappen står sist i sina kort, så att korten slutar på samma linje */
.sample-card .terms { margin-bottom: var(--stack-m); }
.sample-card .sample-basis {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-in-dark);
  font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.80);
}
.offer-card .terms { margin-bottom: var(--stack-m); }
/* Från 1024 px är korten lika höga: raderna delar höjden lika och innehållet står mitt i raden, i stället för
   att lämna en tom yta ovanför knappen */
@media (min-width: 1024px) {
  .offer-card .terms { flex: 1 0 auto; display: flex; flex-direction: column; }
  .offer-card .terms > div { flex: 1 1 0; align-content: center; }
}
.offer-card .btn { width: 100%; margin-top: auto; }

/* ---------- Om Bordic: rubrikblocket och porträttet, principerna under ----------
   Porträttet är ett litet visitkort: bilden till vänster, namn, roll och mejl mitt för den (Victor 28/9:
   mindre och lugnare). Kortet står i HTML direkt efter rubrikblocket, så att läsordningen är densamma i alla
   bredder. Under 1024 px står allt i en spalt: rubrikblocket, kortet (en principspalts bredd från 720 px),
   principerna. Från 1024 px står kortet i objektspalten bredvid rubrikblocket, från etikettens versalhöjd
   ("OM BORDIC") till ingressens sista rad, alltså lika högt som all vit text i blocket (Victor 28/9 kväll:
   högre kort så att fotot syns mer; förut från rubrikens versalhöjd), och principerna i en rad under
   i hela bredden: två och två upp till 1279 px, fyra i rad från 1280 px (samma kolumnlinjer som remsan
   under heron). Ramen runt fotot är lika bred runt om (Victor 28/9: kanterna var för tunna). */
/* Textspalten är bara en ram i HTML: rubrikblocket, kortet och principerna är rutnätets egna rader */
.about-grid > .text { display: contents; }
.about-grid .section-head { margin-bottom: 0; }
.principles { display: grid; gap: var(--stack-m) var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .principles > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-content: start; }
  .principles > div:nth-child(n+3) { margin-top: var(--stack-m); }
  .principles h3 { align-self: start; } /* rubrikernas överkant i linje, luften under den kortare */
}
.principles > div { min-width: 0; padding-top: var(--stack-s); border-top: 1px solid var(--line-on-field-2); }
.principles h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: #fff; }
.principles p { margin-top: var(--stack-xs); font-size: var(--t-small); line-height: 1.6; }
.portrait {
  margin: 0; padding: 12px; border-radius: var(--r-xl);
  display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 16px;
  background: var(--grad-steel); border: 1px solid var(--line-on-dark); box-shadow: var(--sh-dark);
}
/* Koncentriska hörn: ramen 24 px minus 12 px luft ger 12 px */
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); background: var(--steel-700); }
.portrait figcaption { padding: 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.80); }
.portrait figcaption strong { display: block; margin-bottom: 2px; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.portrait figcaption a { display: block; width: fit-content; margin-top: 10px; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: .2em; }
.portrait figcaption a:hover { text-decoration-color: #fff; }
/* En principspalts bredd från 720 px. Smalare får texten inte plats bredvid fotot (mejlen gick in i ramen vid
   640 px), så där tar kortet hela bredden som i mobil. */
@media (min-width: 720px) and (max-width: 1023px) { .portrait { max-width: calc((100% - var(--col-gap)) / 2); } }
@media (min-width: 1024px) {
  .about-grid .section-head { grid-column: 1 / 7; grid-row: 1; }
  /* Kortet sträcks till rubrikblockets höjd och fotot fyller höjden, så att kortet följer texten även när
     ingressen har fyra, fem eller sex rader. contain: size gör att fotots egen höjd inte gör raden högre. */
  .about-grid .portrait {
    /* Etiketten är 12 px med radhöjd 18 px: versalernas överkant ligger cirka 5 px under radens överkant */
    grid-column: 7 / 13; grid-row: 1; margin-top: calc(12px * .42); align-self: stretch; contain: size;
    padding: 16px; gap: 24px; grid-template-columns: 176px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  }
  /* Ramen 16 px: 24 minus 16 ger 8 */
  .about-grid .portrait img { aspect-ratio: auto; height: 100%; object-position: 50% 28%; border-radius: var(--r-sm); }
  .about-grid .portrait figcaption { padding: 0 16px 0 0; }
  .about-grid .portrait figcaption strong { font-size: 18px; }
  .about-grid .principles { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 1280px) {
  .about-grid .section-head { grid-column: 1 / 8; }
  .about-grid .portrait { grid-column: 8 / 13; }
  .about-grid .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about-grid .principles > div:nth-child(n+3) { margin-top: 0; }
}

/* ---------- Vanliga frågor ----------
   Frågan i 15 px (16 från 640 px) och vikt 500, svaret i 15 px med luftig radhöjd: frågorna läses som en lugn
   lista, inte som en vägg av halvfeta rader (Victor 28/9: typsnittet kändes överdimensionerat). En ikon för att
   fälla ut på hela sajten: plus i ring, som "Så är det räknat" i startkortet. Öppen fråga: blå text och plus
   som vrids till kryss. Svaret står i frågans spalt, fritt från ringen. Gäller också Kostnadsröntgen. */
.faq-list { align-items: start; }
.faq {
  background: var(--grad-paper); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-xl); box-shadow: var(--sh-card); overflow: hidden;
}
.faq details + details { border-top: 1px solid var(--line-light); }
.faq details { scroll-margin-top: 96px; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 20px; min-height: 56px; font: 500 15px/1.45 var(--font-sans); letter-spacing: -.005em; color: var(--ink);
  text-wrap: balance;
  transition: color var(--dur-1) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
/* Ringen och plustecknet som mask, så att färgen följer läget (och tvingade färger) */
.faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; background: var(--blue-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23000'%3E%3Ccircle cx='14' cy='14' r='13.5' stroke-opacity='.32'/%3E%3Cpath d='M14 9.9v8.2M9.9 14h8.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23000'%3E%3Ccircle cx='14' cy='14' r='13.5' stroke-opacity='.32'/%3E%3Cpath d='M14 9.9v8.2M9.9 14h8.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat;
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-1) var(--ease);
}
.faq summary:hover { background: rgba(29,100,154,.035); }
.faq summary:hover::after { background-color: var(--blue-800); }
.faq details[open] summary { color: var(--blue-700); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--blue-700); } /* plus blir kryss */
.faq summary:focus-visible { outline-offset: -4px; border-radius: var(--r-md); }
.faq .answer { padding: 0 20px 20px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.faq .answer p + p { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > .answer { animation: faq-in var(--dur-2) var(--ease); }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
/* Från 640 px: raden 60 px (ringen 28), och svaret slutar där frågetexten slutar (24 + 28 + 20 = 72) */
@media (min-width: 640px) {
  .faq summary { padding: 16px 24px; min-height: 60px; font-size: 16px; }
  .faq .answer { padding: 0 72px 24px 24px; }
}
/* Startsidan: gruppen är kortet och gruppnamnet dess etikett, som EXEMPEL och VILLKOR i de mörka korten.
   Avdelarna står i textens bredd (--faq-x), inte kant i kant. */
.faq-group {
  --faq-x: 20px; --focus: var(--blue-600);
  background: var(--grad-paper); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-xl); box-shadow: var(--sh-card); overflow: hidden;
}
.faq-group > h3 {
  margin: 0; padding: 20px var(--faq-x) 12px;
  font: 500 12px/1.5 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700);
}
.faq-group > .faq { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.faq-group .faq details + details { border-top: 0; }
.faq-group .faq summary { position: relative; padding-inline: var(--faq-x); }
/* Avdelaren är en kant, så att den syns i tvingade färger */
.faq-group .faq summary::before { content: ""; position: absolute; top: 0; left: var(--faq-x); right: var(--faq-x); border-top: 1px solid var(--line-light); }
.faq-group .faq summary:hover { background: none; } /* ringen mörknar i stället */
.faq-group .faq .answer { padding: 0 var(--faq-x) 20px; }
@media (min-width: 640px) {
  .faq-group { --faq-x: 28px; }
  .faq-group > h3 { padding-top: 24px; }
  .faq-group .faq .answer { padding: 0 calc(var(--faq-x) + 48px) 24px var(--faq-x); }
}

/* ---------- Formulär ---------- */
.form-card {
  background: var(--grad-paper); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-xl); padding: var(--pad-panel); box-shadow: var(--sh-card); color: var(--ink-2);
}
.form-card > h2 { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.form-card > h2 + p { margin-top: var(--stack-xs); font-size: var(--t-small); }
.form-card form, .form-card .form-body { margin-top: 0; }
.form-card > h2 ~ form { margin-top: var(--stack-m); }
.field + .field, .fields-2 + .field, .field + .fields-2, .fields-2 + .fields-2 { margin-top: 20px; }
.fields-2 > .field { margin-top: 0; }
.fields-2 { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field label { display: block; margin-bottom: 8px; font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.field .hint { font-weight: 400; color: var(--ink-3); }
.input, .select, .textarea {
  display: block; width: 100%; height: 48px; padding: 0 16px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line-input); color: var(--ink);
  font: 400 16px/1.4 var(--font-sans); color-scheme: only light;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.textarea { height: auto; min-height: 112px; padding: 12px 16px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
/* Tydlig fokusring i fälten */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 2px solid var(--blue-600); outline-offset: 2px; border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(46,134,193,.18);
}
.input:user-invalid, .select:user-invalid, .textarea:user-invalid { border-color: var(--error); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--error); }
.check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
/* Tomma datum- och tidsfält ser tomma ut */
.input[type="date"]:invalid::-webkit-datetime-edit { color: var(--ink-3); }
.select:invalid { color: var(--ink-3); }
.select option { color: var(--ink); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  /* Ett långt val slutar med "…" i stället för att kapas mitt i ett ord; hela namnet syns i listan */
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23587087' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat;
}
.field .help { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.field-error { margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--error); }
.check + .field-error { margin-top: 8px; }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; margin-top: var(--stack-m); font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--blue-600); cursor: pointer; }
.form-card .btn[type="submit"] { width: 100%; margin-top: var(--stack-m); }
/* Finstilt vänsterställt som fälten ovanför, i alla formulär */
.form-card .fine { margin-top: var(--stack-s); text-align: left; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: var(--stack-s); padding: 14px 16px; border-radius: var(--r-md); font-size: 15px; line-height: 1.5; }
.form-status.is-error { background: rgba(168,67,43,.08); border: 1px solid rgba(168,67,43,.35); color: var(--error); }
.form-status.is-error a { color: var(--error); }
.form-done { padding: 8px 0; }
.form-done .done-icon {
  width: 56px; height: 56px; margin-bottom: 20px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(29,100,154,.10); color: var(--blue-600);
}
.form-done .done-icon .ico { width: 26px; height: 26px; stroke-width: 2.25; }
.form-done h3 { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.form-done p { margin-top: 10px; max-width: 44ch; font-size: 16px; }

/* Porträttrad: "Victor läser förfrågan …" */
.avatar-line { display: flex; align-items: center; gap: 14px; }
.avatar-line img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; background: var(--steel-700); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.avatar-line p { font-size: var(--t-small); line-height: 1.5; color: #fff; }
.avatar-line a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: .2em; }

/* ---------- Introsamtal: text till vänster, formuläret till höger ---------- */
.below-form { font-size: 15px; line-height: 1.6; }
.below-form p + p { margin-top: var(--stack-xs); }
.below-form .muted { color: var(--on-field-2); }
/* Raderna står efter formuläret i HTML, så att tabbordningen följer det man ser. Under 1024 px kommer de
   under formuläret av sig själva. Från 1024 px är de textspaltens fot, som på /boka/: textspalten och
   formuläret spänner båda raderna och är lika höga, och raderna står längst ner med en hårlinje överst
   (samma grepp som remsan under heron), så att sista raden slutar i höjd med formulärets underkant. Raderna
   kommer efter textspalten i HTML och ritas ovanpå den, så länkarna går att klicka på. */
@media (min-width: 1024px) {
  .contact-grid { grid-template-rows: auto 1fr; row-gap: var(--stack-s); }
  .contact-grid > .text { grid-row: 1 / span 2; align-self: stretch; }
  .contact-grid > .objekt { grid-row: 1 / span 2; align-self: stretch; }
  .contact-grid > .below-form { grid-column: 1 / 7; grid-row: 2; align-self: end; padding-top: 20px; border-top: 1px solid var(--line-on-field-2); }
}
@media (min-width: 1280px) { .contact-grid > .below-form { grid-column: 1 / 8; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--grad-footer); color: rgba(255,255,255,.78);
  border-radius: 32px 32px 0 0; border-top: 1px solid rgba(255,255,255,.12);
  padding: 56px 0 28px; font-size: 15px; line-height: 1.6;
}
@media (min-width: 768px) { .site-footer { border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: 72px 0 32px; } }
/* Tre lika spalter på trekolumnslinjerna från 640 px. I mobil: märket överst, två spalter under. */
.footer-cols { display: grid; gap: 36px var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 360px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-cols > :first-child { grid-column: 1 / -1; } }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-cols > :first-child { grid-column: auto; } }
/* Navigeringen i två spalter på dator, så att sidfoten inte blir hög */
@media (min-width: 1024px) {
  .site-footer nav ul { columns: 2; column-gap: var(--col-gap); }
  .site-footer nav li { break-inside: avoid; }
  .site-footer li + li { margin-top: 0; }
  .site-footer li a { padding: 4px 0; }
}
.site-footer .brand { font-size: 20px; }
.site-footer .brand svg { width: 32px; height: 32px; }
.footer-tag { margin-top: 20px; font: 500 14px/1.5 var(--font-sans); color: rgba(255,255,255,.80); max-width: 34ch; }
.footer-motto { margin-top: 10px; color: #fff; font-weight: 500; max-width: 36ch; }
.footer-company { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.74); }
.footer-company a { color: rgba(255,255,255,.88); text-underline-offset: .2em; }
.footer-company a:hover { color: #fff; }
.footer-icons { display: flex; gap: 8px; margin-top: 20px; }
.footer-icons a {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); color: #fff; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1);
}
.footer-icons a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
.footer-icons .ico { width: 18px; height: 18px; stroke-width: 1.75; }
.site-footer h2 { font: 600 14px/1.3 var(--font-sans); letter-spacing: -.005em; color: rgba(210,231,242,.9); margin-bottom: 10px; }
.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: 2px; }
.site-footer li a { display: inline-block; padding: 6px 0; color: rgba(255,255,255,.88); text-decoration: none; }
.site-footer li a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.site-footer li a .ico { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; opacity: .7; }
.site-footer .legal {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.74);
}
.site-footer .legal a { display: inline-block; padding: 6px 0; color: rgba(255,255,255,.88); text-underline-offset: .2em; }
.site-footer .legal a:hover { color: #fff; }
/* Jakartas kontextuella alternativ gör bindestreck mellan siffror till ett längre streck: stäng av dem i org.nr */
.footer-company, .no-calt { font-feature-settings: "calt" 0; }

/* ---------- /boka/ ----------
   Ordningen i HTML är datorns: textspalten (intro, Victor, samtalet) och formuläret. Under 1024 px:
   intro, Victor, formuläret, samtalet. */
.boka-top { padding: 104px 0 var(--section-y); }
@media (min-width: 640px) { .boka-top { padding-top: 128px; } }
@media (min-width: 1024px) { .boka-top { padding-top: 116px; } }
.boka-intro h1 { margin-top: var(--stack-s); font-size: var(--t-h1); line-height: 1.1; letter-spacing: -.03em; max-width: 20ch; }
.boka-aside h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: #fff; }
.talk-steps { margin-top: var(--stack-s); border-top: 1px solid var(--line-on-field); }
.talk-steps > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-on-field); }
.talk-steps dt { font: 600 14px/1.55 var(--font-sans); letter-spacing: -.005em; color: #fff; }
.talk-steps dd { font-size: var(--t-small); line-height: 1.55; color: #fff; }
@media (max-width: 479px) { .talk-steps > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
@media (max-width: 1023px) {
  .boka-grid .boka-intro { order: 1; }
  .boka-grid .avatar-line { order: 2; }
  .boka-grid .form-card { order: 3; }
  .boka-grid .boka-aside { order: 4; }
}
@media (min-width: 1024px) {
  /* Spalterna slutar på samma linje: samtalslistan står längst ner i textspalten, så att dess sista linje
     ligger i höjd med formulärets underkant. Raderna får mer luft (samma takt som formulärets fält), och det
     som blir över hamnar mellan Victor och listan, minst --stack-l. Rubrikblocket → Victor är 48 px som
     överallt. */
  .boka-grid { align-items: stretch; }
  .boka-grid > .text { display: flex; flex-direction: column; }
  .boka-grid > .text > .avatar-line { margin-bottom: var(--stack-l); }
  .boka-grid .boka-aside { margin-top: auto; }
  .boka-grid .talk-steps > div { padding: 20px 0; }
  /* Formuläret tätare, så att knappen syns i första vyn */
  .boka-grid > .form-card .field + .field, .boka-grid > .form-card .fields-2 + .field,
  .boka-grid > .form-card .field + .fields-2, .boka-grid > .form-card .fields-2 + .fields-2 { margin-top: 16px; }
  .boka-grid > .form-card .fields-2 > .field { margin-top: 0; }
  .boka-grid > .form-card .textarea { min-height: 96px; }
  .boka-grid > .form-card .check { margin-top: 20px; }
  .boka-grid > .form-card .fine { margin-top: 12px; }
}
@media (min-width: 1280px) { .boka-grid .talk-steps > div { padding: 28px 0; } }

/* ---------- Tack och 404: ett centrerat kort med vänsterställt innehåll (kolumn 4–9) ---------- */
.center-card {
  max-width: 580px; margin-inline: auto;
  background: var(--grad-steel); border: 1px solid var(--line-on-dark); border-radius: var(--r-xl);
  padding: var(--pad-panel); box-shadow: var(--sh-dark);
}
.center-card h1 { font-size: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; }
.center-card .eyebrow + h1 { margin-top: var(--stack-s); }
.center-card p:not(.eyebrow) { margin-top: var(--stack-s); max-width: 46ch; color: rgba(255,255,255,.84); font-size: 16px; line-height: 1.65; }
.center-card .actions { margin-top: var(--stack-m); }
.center-card p.small { font-size: 14px; }
.center-card a:not(.btn) { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: .2em; }
.center-card .prep { margin-top: var(--stack-m); padding-top: var(--stack-m); border-top: 1px solid var(--line-in-dark); }
.center-card .prep h2 { font-size: 16px; font-weight: 600; letter-spacing: -.005em; line-height: 1.4; color: #fff; }
.center-card .prep p { margin-top: var(--stack-s); font-size: var(--t-small); }
.checklist { list-style: none; margin-top: var(--stack-s); }
.checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: var(--t-small); line-height: 1.55; color: rgba(255,255,255,.84); }
.checklist li + li { margin-top: 10px; }
.checklist .tick { width: 18px; height: 1.55em; display: grid; place-items: center; color: var(--blue-300); }
.checklist .tick .ico { width: 16px; height: 16px; stroke-width: 2; }
/* Bocken i isblått */
.done-mark {
  width: 64px; height: 64px; margin-bottom: var(--stack-m); border-radius: 50%; display: grid; place-items: center;
  background: rgba(159,216,245,.12); border: 1px solid rgba(159,216,245,.32); color: var(--blue-300);
}
.done-mark .ico { width: 28px; height: 28px; stroke-width: 2.5; }
.page-simple { min-height: 100vh; display: flex; flex-direction: column; }
/* Kortet mitt i vyn och sidfoten under den, så att ingen flik av sidfoten syns i första vyn */
.page-simple main { flex: 1; display: grid; align-items: center; min-height: 100svh; padding: 104px 0 var(--section-y); }
@media (min-width: 640px) { .page-simple main { padding-top: 128px; } }
@media (min-width: 1024px) { .page-simple main { padding-top: 116px; } }

/* ---------- Integritetspolicy ---------- */
/* Samma luft som överdelen på de andra sidorna, och kortet på kolumnlinjerna: kolumn 2–11 mellan 1024
   och 1279 px, kolumn 3–10 från 1280 px (% är containerns bredd) */
.doc-wrap { padding-block: 104px var(--section-y); }
@media (min-width: 640px) { .doc-wrap { padding-top: 128px; } }
@media (min-width: 1024px) { .doc-wrap { padding-top: 116px; } }
.doc {
  margin-inline: auto; background: var(--grad-paper); color: var(--ink-2);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-xl); box-shadow: var(--sh-card);
  padding: 28px 24px 36px;
}
@media (min-width: 768px) { .doc { padding: 56px; } }
@media (min-width: 1024px) { .doc { max-width: calc((100% - 11 * var(--col-gap)) * 10 / 12 + 9 * var(--col-gap)); } }
@media (min-width: 1280px) { .doc { max-width: calc((100% - 11 * var(--col-gap)) * 8 / 12 + 7 * var(--col-gap)); } }
.doc h1 { margin-top: 20px; color: var(--ink); font-size: var(--t-h1); line-height: 1.1; letter-spacing: -.03em; }
.doc h1:first-child { margin-top: 0; }
.doc p.meta { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.doc p.intro { margin-top: 16px; font-size: 18px; line-height: 1.6; }
.doc h2 { margin-top: 40px; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.doc p:not(.eyebrow), .doc li { font-size: 16px; line-height: 1.7; max-width: 65ch; }
.doc p.meta { font-size: 14px; }
.doc h2 + p, .doc h2 + ul { margin-top: 10px; }
.doc p + p:not(.intro):not(.meta), .doc ul + p, .doc p + ul { margin-top: 12px; }
.doc ul { padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc strong { color: var(--ink); }
.doc .notice {
  margin: 24px 0; padding: 16px 20px; background: rgba(29,100,154,.06);
  border-left: 3px solid var(--blue-600); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.doc .notice p { color: var(--ink); }

/* ---------- Tvingade färger (Windows högkontrast) ---------- */
@media (forced-colors: active) {
  .site-header.is-scrolled { background: Canvas; border-color: CanvasText; }
  .bar { border: 1px solid CanvasText; }
  .bar > i { background: CanvasText; }
  /* Heronkortets två staplar har egna regler med högre specificitet och blev osynliga (Canvas på Canvas) */
  .bar.is-muted > i, .hero-visual .bar:not(.is-muted) > i { background: CanvasText; }
  /* Värmeskalan kan inte visas med systemfärger: talen står i text, förklaringen döljs */
  .ex-skala { display: none; }
  .eyebrow::before, .timeline li::before { forced-color-adjust: none; background: CanvasText; }
  /* Räkneexemplen och stegkortet har kanten som skugga, räkneexemplen avdelarna som bakgrund: båda försvinner annars */
  .card-data.examples, .steps { border: 1px solid CanvasText; }
  .examples .ex + .ex::before { forced-color-adjust: none; background: CanvasText; }
  /* Tidslinjen i Så går det till: skenan och brickorna i systemfärger, ytan "Månad ett" som ram */
  .steps::after { forced-color-adjust: none; background: CanvasText; }
  .steps::before { border: 1px solid CanvasText; }
  .step-badge { forced-color-adjust: none; background: CanvasText; color: Canvas; box-shadow: none; }
  /* Fotradens avdelare ramar in skalan, som är dold här: utan den blir det en tom ruta */
  .card-data.examples .ex-foot::before { display: none; }
  /* Plus i ring i frågorna är en mask: den behöver en systemfärg i alla tre lägena, annars försvinner krysset */
  .faq summary::after, .faq summary:hover::after, .faq details[open] summary::after { forced-color-adjust: none; background-color: CanvasText; }
}

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

/* ---------- Utskrift ---------- */
/* Svart text på vitt, inga knappar, formulär eller menyer. Webbläsaren skriver inte ut bakgrunder,
   så vit text i de mörka korten måste bli svart. kr-verktyg.css har egna regler. */
@media print {
  @page { margin: 14mm 14mm 16mm; }
  body::before, body::after, .site-header, .mobile-menu, .skip-link, .actions, .facts,
  #kontakt, .site-footer nav, .site-footer .footer-icons, .site-footer .legal,
  .bar, .ex-skala { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }
  *, *::before, *::after {
    color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; transition: none !important;
  }
  .card, .card-data, .panel-light, .form-card, .faq details { border: 1px solid #bbb !important; }
  /* Så går det till: brickorna som ringar med siffran, ytan "Månad ett" som ram, ingen skena.
     Chrome ritar inte ytan i utskrift (ett absolut placerat element som placeras i listans rutnät försvinner
     när sidan delas upp i sidor), så ramen ritas i stället på steg 2 och 3: marginalen och kanten tas från
     stegets luft, så att brickor och text står kvar på samma ställe. */
  .step-badge { border: 1px solid #000 !important; }
  .steps::before, .steps::after { display: none !important; }
  /* Staplat (A4 och Letter, stående och liggande) */
  @media (max-width: 1279px) {
    .step:nth-child(2), .step:nth-child(3) {
      margin-inline: var(--inset); padding-inline: calc(var(--pad-card) - var(--inset) - 1px); border: 1px solid #bbb !important;
    }
    /* Steg 2:s sidkanter går 1 px ned i steg 3 (marginalen −1 px, luften +1 px): annars syns en hårfin skarv i PDF:en */
    .step:nth-child(2) {
      border-bottom: 0 !important; padding-top: calc(var(--pad-card) - var(--inset) - 1px); break-after: avoid;
      margin-bottom: -1px; padding-bottom: calc(var(--pad-card) - var(--inset) + 1px);
      border-radius: calc(var(--r-xl) - var(--inset)) calc(var(--r-xl) - var(--inset)) 0 0;
    }
    .step:nth-child(3) {
      border-top: 0 !important; padding-bottom: calc(var(--pad-card) - var(--inset) - 1px);
      border-radius: 0 0 calc(var(--r-xl) - var(--inset)) calc(var(--r-xl) - var(--inset));
    }
  }
  /* Fyra i rad (A3 liggande och bredare): steg 2 går över gapet och 1 px in i steg 3, som saknar vänsterkant, så att
     över- och underkanten löper obrutna runt båda stegen (utan överlappet syns en hårfin skarv i PDF:en). Stegen är subgrid i höjdled: marginal, kant och luft
     blir tillsammans --pad-card som i steg 1 och 4, så att etiketter, brickor och rubriker står kvar på en linje. */
  @media (min-width: 1280px) {
    .step:nth-child(2), .step:nth-child(3) {
      margin-block: var(--inset); padding-block: calc(var(--pad-card) - var(--inset) - 1px); border: 1px solid #bbb !important;
    }
    .step:nth-child(2) {
      margin-left: var(--inset); margin-right: calc(-1 * var(--col-gap) - 1px);
      padding-left: calc(var(--pad-card) - var(--inset) - 1px); padding-right: calc(var(--pad-card) + var(--col-gap) + 1px);
      border-right: 0 !important; border-radius: calc(var(--r-xl) - var(--inset)) 0 0 calc(var(--r-xl) - var(--inset));
    }
    .step:nth-child(3) {
      margin-right: var(--inset); padding-right: calc(var(--pad-card) - var(--inset) - 1px);
      border-left: 0 !important; border-radius: 0 calc(var(--r-xl) - var(--inset)) calc(var(--r-xl) - var(--inset)) 0;
    }
  }
  .section { padding-block: 14pt; }
  .section + .section::before { display: none; }
  .hero { padding-top: 0; }
  .card, .card-data .ex, .step, .faq details, .timeline li, .data-row, .terms > div, .principles > div, .band > div, .skicka, .portrait { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  /* Frågorna: tätare rader utan ring, gruppnamnet närmare */
  .faq summary { min-height: 0; padding-block: 8px; }
  .faq summary::after, .faq-group .faq summary::before { display: none; }
  .faq-group > h3 { padding-top: 12px; }
  /* Om Bordic: rubrikblocket och visitkortet på samma sida */
  .about-grid .section-head { break-after: avoid; }
  /* Tacksidan och 404: kortet och sidfoten på samma sida. Vyhöjden och luften under menyraden gäller inte
     på papper, som i heron. */
  .page-simple, .page-simple main { min-height: 0; }
  .page-simple main { padding-top: 0; }
  .site-footer { padding-top: 12pt; border-top: 1px solid #bbb; }
}