/* Bygglovsklart — site styles built on the design system tokens
   (Spec/design/Bygglovsklart Design System/tokens/, adopted verbatim). */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* Graphite / blue-grey ramp */
  --grey-000:#ffffff; --grey-025:#f7f9fa; --grey-050:#eef2f5; --grey-100:#e2e8ed;
  --grey-200:#cdd6dd; --grey-300:#adbac4; --grey-400:#8695a2; --grey-500:#657482;
  --grey-600:#4d5a66; --grey-700:#39444e; --grey-800:#28313a; --grey-900:#1b2129;
  --grey-950:#11161b;
  /* Accent: förvaltningsblå */
  --blue-050:#eaf0f6; --blue-100:#cfdeeb; --blue-300:#7fa3c4; --blue-500:#2d5f8f;
  --blue-600:#1f4d78; --blue-700:#173c5e; --blue-800:#112c45;
  /* Ritningsröd (drawing only) + status */
  --red-050:#faeeeb; --red-100:#f0d4cd; --red-500:#b4402b; --red-600:#963321; --red-700:#73271a;
  --green-050:#e9f1ec; --green-500:#2f6b4f; --green-700:#204a37;
  --amber-050:#f8f1e2; --amber-500:#8a6612; --amber-700:#63490c;
  /* Semantic aliases */
  --text-strong:var(--grey-900); --text-body:var(--grey-800); --text-muted:var(--grey-500);
  --text-faint:var(--grey-400); --text-inverse:var(--grey-000);
  --text-link:var(--blue-600); --text-link-hover:var(--blue-700);
  --surface-page:var(--grey-025); --surface-card:var(--grey-000); --surface-sunken:var(--grey-050);
  --surface-inset:var(--grey-100); --surface-inverse:var(--grey-900);
  --surface-accent-soft:var(--blue-050); --surface-paper:#fdfdfb;
  --surface-paper-warm:#fdfcf6; --surface-paper-sunken:#f6f4ea;
  --border-hairline:var(--grey-100); --border-default:var(--grey-200); --border-strong:var(--grey-300);
  --border-focus:var(--blue-500);
  --action-primary:var(--blue-600); --action-primary-hover:var(--blue-700); --action-primary-active:var(--blue-800);
  --action-quiet-hover:var(--grey-050); --action-quiet-active:var(--grey-100);
  --status-ok-fg:var(--green-700); --status-ok-bg:var(--green-050);
  --status-warn-fg:var(--amber-700); --status-warn-bg:var(--amber-050);
  --status-error-fg:var(--red-600); --status-error-bg:var(--red-050);
  --focus-ring:0 0 0 3px rgba(45,95,143,.28);
  /* Type */
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* Space & layout */
  --width-content:1160px; --width-prose:720px; --width-form:520px;
  --control-h-md:38px; --control-h-lg:46px;
  --gutter-page:24px; --gutter-page-lg:48px;
  --section-y:96px; --section-y-tight:64px;
  /* Radius */
  --radius-xs:2px; --radius-sm:3px; --radius-md:4px;
  /* Elevation */
  --shadow-raised:0 1px 2px rgba(17,22,27,.06);
  --shadow-overlay:0 8px 24px -8px rgba(17,22,27,.18),0 2px 6px rgba(17,22,27,.06);
  --shadow-paper:0 1px 1px rgba(17,22,27,.05),0 12px 32px -12px rgba(17,22,27,.22);
  /* Motion */
  --duration-fast:130ms; --ease-standard:cubic-bezier(.2,0,.2,1);
  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
  /* Drawing */
  --ink-existing:var(--grey-700); --ink-context:var(--grey-400); --ink-dimension:var(--grey-500);
  --ink-new:var(--red-500);
  --grid-size:8mm; --grid-line:rgba(101,116,130,.16);
}

/* --- Base --- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-sans); font-size:16px; line-height:1.65;
  color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { margin:0; color:var(--text-strong); font-weight:600; line-height:1.3; letter-spacing:-.015em; }
p { margin:0; text-wrap:pretty; }
a { color:var(--text-link); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color:var(--blue-300); transition:color var(--duration-fast) var(--ease-standard),text-decoration-color var(--duration-fast) var(--ease-standard); }
a:hover { color:var(--text-link-hover); text-decoration-color:currentColor; }
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
img,svg { display:block; max-width:100%; }
table { border-collapse:collapse; }
::selection { background:var(--blue-100); color:var(--grey-900); }
.mono { font-family:var(--font-mono); }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }

/* --- Header --- */
.site-header {
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-hairline);
}
.site-header .wrap { max-width:var(--width-content); margin:0 auto; padding:0 var(--gutter-page-lg); height:64px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; text-decoration:none; }
.brand img { height:32px; width:auto; display:block; }
.brand-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); border-left:1px solid var(--border-default); padding-left:10px; }
.site-header nav { display:flex; gap:24px; margin-left:auto; font-size:14px; }
.site-header nav a { color:var(--text-muted); text-decoration:none; }
.site-header nav a:hover { color:var(--text-strong); }

/* --- Mobilmeny: hamburgare under 768px, CSS-driven via details/summary.
   44px träffyta på knappen, 48px-rader i panelen --- */
.mobilmeny { display:none; position:relative; margin-left:auto; }
.mobilmeny summary { list-style:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer; border:1px solid var(--border-default); border-radius:var(--radius-sm); background:var(--surface-card); transition:var(--transition-control); }
.mobilmeny summary::-webkit-details-marker { display:none; }
.mobilmeny[open] summary { background:var(--action-quiet-active); }
.mobilmeny svg { width:20px; height:20px; color:var(--text-strong); }
.mobilmeny-panel { position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-overlay); padding:8px; display:flex; flex-direction:column; z-index:30; }
.mobilmeny-panel a { display:flex; align-items:center; min-height:48px; padding:0 14px; font-size:16px; color:var(--text-strong); text-decoration:none; border-radius:var(--radius-sm); }
.mobilmeny-panel a:hover { background:var(--action-quiet-hover); }
@media (max-width:768px) {
  .site-header nav, .brand-tag { display:none; }
  .mobilmeny { display:block; }
}

/* --- Startsidans hero-underrubrik: kortare variant på smala skärmar --- */
.hero-lead-kort { display:none; }
@media (max-width:480px) {
  .hero-lead-lang { display:none; }
  .hero-lead-kort { display:inline; }
}

/* --- Layout --- */
main { display:block; }
.wrap { max-width:var(--width-content); margin:0 auto; padding-left:var(--gutter-page-lg); padding-right:var(--gutter-page-lg); }
.section { padding-top:var(--section-y-tight); padding-bottom:var(--section-y-tight); }
.section-sunken { background:var(--surface-sunken); border-top:1px solid var(--border-hairline); border-bottom:1px solid var(--border-hairline); }
.prose { max-width:66ch; }

/* --- Breadcrumbs --- */
.crumbs { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); margin-bottom:24px; }
.crumbs .sep { color:var(--grey-300); }
.crumbs .current { color:var(--text-body); }
.crumbs a { color:var(--text-muted); text-decoration:none; }
.crumbs a:hover { color:var(--text-strong); }

/* --- Hero (intent pages) --- */
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:64px; align-items:start; padding-top:48px; padding-bottom:var(--section-y-tight); }
.hero h1 { margin:12px 0 0; font-size:52px; line-height:1.08; letter-spacing:-.025em; }
.hero .lead { margin:16px 0 0; font-size:18px; line-height:1.6; max-width:46ch; }
.cta-row { display:flex; gap:12px; margin-top:32px; align-items:center; flex-wrap:wrap; }
.trust-row { display:flex; gap:24px; margin-top:24px; font-size:13px; color:var(--text-muted); flex-wrap:wrap; }
@media (max-width:1000px) {
  .hero { grid-template-columns:minmax(0,1fr); gap:32px; }
  .hero h1 { font-size:40px; }
  .wrap, .site-header .wrap { padding-left:var(--gutter-page); padding-right:var(--gutter-page); }
}

/* --- Paper figure: the document as hero motif --- */
.paper { margin:0; background:var(--surface-paper); border:1px solid var(--border-default); box-shadow:var(--shadow-paper); }
.paper a { display:block; }
.paper img { width:100%; height:auto; }
.paper figcaption { font-size:13px; color:var(--text-muted); padding:10px 12px; border-top:1px solid var(--border-hairline); }

/* --- Buttons --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--control-h-lg); padding:0 22px;
  font-family:var(--font-sans); font-size:16px; font-weight:500;
  border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:var(--transition-control);
}
.btn-primary { background:var(--action-primary); color:var(--text-inverse); }
.btn-primary:hover { background:var(--action-primary-hover); color:var(--text-inverse); text-decoration:none; }
.btn-primary:active { background:var(--action-primary-active); transform:translateY(.5px); }
.btn-primary:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn-secondary { background:var(--surface-card); color:var(--text-strong); border-color:var(--border-strong); }
.btn-secondary:hover { background:var(--action-quiet-hover); border-color:var(--grey-400); color:var(--text-strong); text-decoration:none; }
.btn-secondary:active { background:var(--action-quiet-active); transform:translateY(.5px); }
.btn.block { width:100%; }

/* --- Cards --- */
.card {
  display:block; background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-md); padding:24px; color:var(--text-body);
  text-decoration:none; transition:var(--transition-control);
}
a.card:hover { box-shadow:var(--shadow-raised); border-color:var(--border-strong); color:var(--text-body); text-decoration:none; }
.card h3 { font-size:18px; margin:0 0 8px; }
.card p { font-size:14px; color:var(--text-muted); line-height:1.6; }
.card .pris { display:block; margin-top:16px; font-family:var(--font-mono); font-size:14px; color:var(--text-strong); }
.card-grid { display:grid; gap:16px; grid-template-columns:1fr; margin-top:32px; }
@media (min-width:40rem) { .card-grid { grid-template-columns:1fr 1fr; } }

/* --- Requirement/content tables --- */
.kravtabell { width:100%; font-size:14px; margin-top:24px; }
.kravtabell td { padding:14px 16px 14px 0; vertical-align:top; border-top:1px solid var(--border-default); }
.kravtabell td:first-child { width:46%; color:var(--text-strong); font-weight:500; }
.kravtabell td:last-child { color:var(--text-muted); font-size:13px; line-height:1.6; padding-right:0; }
ul.radlista { list-style:none; padding:0; margin:24px 0 0; font-size:15px; }
ul.radlista li { padding:12px 0; border-top:1px solid var(--border-default); }

/* --- Step list (static) --- */
.steg { counter-reset:steg; list-style:none; margin:16px 0 0; padding:0; }
.steg li { counter-increment:steg; display:flex; gap:14px; padding:10px 0; font-size:15px; }
.steg li::before {
  content:counter(steg); flex:0 0 26px; height:26px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); border-radius:var(--radius-xs);
  font-family:var(--font-mono); font-size:13px; color:var(--text-muted); background:var(--surface-card);
}
.steg .hint { display:block; font-size:13px; color:var(--text-muted); }
.steg li.aktiv::before { background:var(--surface-accent-soft); border-color:var(--blue-500); color:var(--blue-600); font-weight:600; }
.steg li.aktiv > span { color:var(--text-strong); font-weight:500; }
.steg li.klar::before { background:var(--grey-700); border-color:var(--grey-700); color:var(--text-inverse);}

/* --- Forms --- */
.form-block { max-width:var(--width-form); }
.form-row { margin-bottom:16px; }
.field label { display:block; margin-bottom:6px; }
.field label strong { display:block; font-size:14px; font-weight:500; color:var(--text-strong); }
.field .hjalp { display:block; font-size:13px; color:var(--text-muted); margin-top:2px; }
input[type="text"], input[type="number"], select {
  width:100%; height:var(--control-h-lg); padding:0 12px; font-size:16px; font-family:var(--font-sans);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface-card); color:var(--text-body); transition:var(--transition-control);
}
input[type="text"]:focus, input[type="number"]:focus, select:focus { outline:none; border-color:var(--border-focus); box-shadow:var(--focus-ring); }
input[type="number"] { font-family:var(--font-mono); font-size:15px; }
input[type="email"] {
  width:100%; height:var(--control-h-lg); padding:0 12px; font-size:16px; font-family:var(--font-sans);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface-card); color:var(--text-body); transition:var(--transition-control);
}
input[type="email"]:focus { outline:none; border-color:var(--border-focus); box-shadow:var(--focus-ring); }
label.consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-muted); line-height:1.6; }
label.consent input { margin-top:3px; accent-color:var(--blue-600); }

/* --- Offer/kassa panel --- */
.panel {
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-md); padding:24px; margin:48px 0;
}
.panel .produkt { font-size:16px; font-weight:600; color:var(--text-strong); }
.panel .pris { font-family:var(--font-mono); font-size:26px; color:var(--text-strong); margin-top:4px; }
.panel .paket { margin-top:8px; color:var(--text-muted); font-size:13px; }
.garanti { font-size:13px; color:var(--text-muted); margin-top:16px; }
.garanti strong { color:var(--text-body); font-weight:500; }
.retreat { font-size:14px; margin-top:16px; }

/* --- Variantväljare (ADR-0008): två köpvarianter som kort i heron. Radion
   ligger som direkt barn av article; :checked-reglerna genereras per sida --- */
.variantradio { position:absolute; width:1px; height:1px; opacity:0; }
.variantval { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; max-width:560px; }
.variantkort { display:flex; flex-direction:column; gap:6px; background:var(--surface-card); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:14px 16px; cursor:pointer; transition:var(--transition-control); }
.variantkort:hover { border-color:var(--grey-400); }
.varianttopp { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.variantnamn { font-size:15px; font-weight:600; color:var(--text-strong); }
.varianttag { font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--blue-600); }
.variantpris { font-family:var(--font-mono); font-size:14px; color:var(--text-strong); }
.varianthjalp { font-size:13px; color:var(--text-muted); line-height:1.55; }
@media (max-width:560px) { .variantval { grid-template-columns:1fr; } }

/* --- Garantikortet (intentsidor, godkänd variant 1a): tre namngivna
   åtaganden på papperston, bolagsuppgifter + villkorslänk i foten --- */
.garantikort { background:var(--surface-paper-warm); border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; }
.garantikort-huvud { padding:20px 24px; border-bottom:1px solid var(--border-hairline); display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.garantikort-huvud h3 { margin:0; font-size:17px; letter-spacing:-.01em; }
.garantikort-huvud .etikett { font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); }
.garantikort-kropp { padding:8px 24px 4px; }
.garantikort-rader { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px 14px; padding:16px 0; border-bottom:1px solid var(--border-hairline); }
.garantikort-rader svg { width:18px; height:18px; color:var(--blue-600); margin-top:2px; }
.garantikort-rader .rubrik { font-size:15px; font-weight:600; color:var(--text-strong); }
.garantikort-rader p { font-size:14px; line-height:1.65; color:var(--text-muted); margin-top:4px; }
.garantikort-fot { background:var(--surface-paper-sunken); border-top:1px solid var(--border-hairline); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.garantikort-fot .bolag { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-faint); }
.garantikort-fot a { font-size:13px; }

/* --- Processsida (/sa-gar-det-till): stegkedja med ritningsfigurer.
   Figurerna är inline-SVG i ritningsspråket, en partial per steg
   (_ProcessFigur1–6). Under 900px staplas korten: text över figur,
   figuren behåller 348:200 via aspect-ratio och SVG:ns viewBox --- */
.process-sida { padding-top:96px; padding-bottom:112px; background-image:linear-gradient(var(--grid-line) .5px,transparent .5px),linear-gradient(90deg,var(--grid-line) .5px,transparent .5px); background-size:60px 60px; }
.process-kedja { position:relative; margin-top:72px; display:flex; flex-direction:column; gap:28px; }
.process-kedja::before { content:""; position:absolute; left:27px; top:56px; bottom:56px; width:0; border-left:1px dashed var(--border-default); }
.process-steg { display:flex; gap:28px; align-items:flex-start; position:relative; }
.process-bricka { flex:none; width:56px; height:56px; border-radius:50%; border:1px solid var(--border-default); background:var(--surface-card); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:15px; color:var(--text-muted); margin-top:52px; }
.process-bricka.klar { border-color:var(--green-500); background:var(--status-ok-bg); }
.process-bricka.klar svg { width:22px; height:22px; }
.process-kort { flex:1; min-width:0; display:flex; gap:32px; align-items:center; padding:24px; background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md); }
.process-kort-text { flex:1; min-width:0; }
.process-kort-text h3 { margin:0; font-size:19px; letter-spacing:-.02em; }
.process-kort-text p { margin:8px 0 0; font-size:15px; line-height:1.6; color:var(--text-muted); }
.process-kort-text .mattchip { font-family:var(--font-mono); font-size:14px; background:var(--surface-sunken); padding:2px 6px; border-radius:var(--radius-xs); color:var(--text-strong); }
.process-figur { flex:0 0 348px; height:200px; position:relative; border:1px solid var(--border-hairline); border-radius:var(--radius-sm); background:var(--surface-paper); overflow:hidden; }
.process-figur.rutad { background-image:linear-gradient(var(--grid-line) .5px,transparent .5px),linear-gradient(90deg,var(--grid-line) .5px,transparent .5px); background-size:15.5px 15.5px; }
.process-figur.sank { background:var(--surface-sunken); }
.process-figur > svg { position:absolute; inset:0; width:100%; height:100%; }
.process-figur.ui { padding:20px; display:flex; flex-direction:column; gap:12px; }
.process-figur .mikro { font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); }
.process-slut { margin-top:96px; display:flex; align-items:stretch; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-card); overflow:hidden; }
.process-slut-ark { flex:0 0 420px; background:var(--surface-sunken); border-right:1px solid var(--border-hairline); padding:40px; display:flex; align-items:center; justify-content:center; }
.process-slut-innehall { flex:1; min-width:0; padding:48px; }
.process-slut-innehall h2 { margin:0; font-size:30px; letter-spacing:-.025em; }
.process-punkter { margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.process-punkt { display:flex; gap:12px; align-items:center; font-size:16px; color:var(--text-body); }
.process-punkt svg { width:18px; height:18px; flex:none; }
@media (max-width:900px) {
  .process-sida { padding-top:56px; padding-bottom:72px; }
  .process-kort { flex-direction:column; align-items:stretch; gap:20px; }
  .process-figur { flex:none; width:100%; height:auto; aspect-ratio:348/200; }
  /* UI-fragmentet (figur 1) radbryter sina chips på smala skärmar — naturlig
     höjd i stället för låst proportion, annars klipps fältet. */
  .process-figur.ui { aspect-ratio:auto; }
  .process-slut { flex-direction:column; }
  .process-slut-ark { flex:none; border-right:0; border-bottom:1px solid var(--border-hairline); padding:32px 24px; }
  .process-slut-innehall { padding:32px 24px; }
}
@media (max-width:600px) {
  /* Brickan ovanför kortet, vänsterställd — kortet får hela viewportbredden.
     Tidslinjen slopas här: utan sidokolumn finns ingen ledig kant att rita den i. */
  .process-kedja { gap:24px; }
  .process-kedja::before { display:none; }
  .process-steg { flex-direction:column; gap:0; }
  .process-bricka { width:40px; height:40px; font-size:13px; margin-top:0; margin-bottom:-10px; margin-left:-10px; position:relative; z-index:1; box-shadow:0 2px 6px -1px rgba(17,22,27,.18),0 1px 2px rgba(17,22,27,.06); }
  .process-bricka.klar svg { width:18px; height:18px; }
  .process-kort { padding:16px; }
}

/* --- Alerts --- */
.notice {
  background:var(--surface-accent-soft); border:1px solid var(--blue-100);
  border-radius:var(--radius-sm); padding:14px 16px; font-size:14px; line-height:1.6;
}
.notice-warn { background:var(--status-warn-bg); border-color:#e5d9b8; color:var(--text-body); }

/* --- FAQ --- */
details.faq { border-top:1px solid var(--border-default); padding:14px 0; }
details.faq:last-of-type { border-bottom:1px solid var(--border-default); }
details.faq summary { cursor:pointer; font-weight:500; font-size:15px; color:var(--text-strong); }
details.faq p { margin:10px 0 4px; font-size:15px; max-width:66ch; }

/* --- Sources --- */
.kallor { font-size:13px; color:var(--text-muted); margin-top:64px; border-top:1px solid var(--border-default); padding-top:16px; }
.kallor ul { padding-left:18px; margin:6px 0 0; }

/* --- Headings rhythm on article pages --- */
article h2 { font-size:26px; letter-spacing:-.02em; margin-top:64px; }
article h2:first-of-type { margin-top:48px; }

/* --- Footer --- */
.site-footer { border-top:1px solid var(--border-hairline); background:var(--surface-sunken); margin-top:var(--section-y-tight); }
.site-footer .wrap { padding-top:32px; padding-bottom:32px; font-size:13px; color:var(--text-muted); }
.site-footer p { margin:0 0 4px; }

/* --- Consent banner --- */
.consent-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:var(--surface-inverse); color:var(--grey-100);
  padding:14px var(--gutter-page); font-size:13px; line-height:1.5;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center;
  box-shadow:var(--shadow-overlay);
}
.consent-banner button {
  font-family:var(--font-sans); font-size:13px; font-weight:500;
  height:var(--control-h-md); padding:0 16px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; transition:var(--transition-control);
}
.consent-banner .accept { background:var(--blue-500); color:#fff; }
.consent-banner .accept:hover { background:var(--blue-600); }
.consent-banner .decline { background:transparent; color:var(--grey-100); border-color:var(--grey-600); }
.consent-banner .decline:hover { background:var(--grey-800); }

/* --- Hero fact rows (startsida) --- */
.faktarad { border-top: 1px solid var(--border-default); padding: 16px 0; }
.faktarad .faktarubrik { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-strong); }
.faktarad p { margin-top: 6px; font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* --- Product card CTA (startsida): the whole card is the link, the button is
   its visual affordance and darkens on card hover --- */
.card-cta { display:flex; flex-direction:column; }
.card-cta .btn { margin-top:auto; padding-top:0; padding-bottom:0; white-space:nowrap; }
.card-cta h3 + p { margin-bottom:16px; }
a.card-cta:hover .btn-primary { background:var(--action-primary-hover); }