/* src/styles.css */

@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4-Variable.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Färg — accenten bär bara tillstånd, aldrig primärknapp.
     Paletten flyttades från varmt papper och teal till kall grund och
     logotypens blå, så att märket och gränssnittet talar samma språk.
     Varje par nedan är UTRÄKNAT, inte bedömt. Kvoterna står i kommentaren
     efter värdet. Räkna om vid varje ändring: tre gånger i det här
     projektet har ett färgvärde som såg rimligt ut varit underkänt.

     Grönt är sedan startsidans designpass öppet, men med en tydlig
     arbetsdelning så att sajten fortfarande läser som ett märke och inte
     som två. Blått är sajtens röst: länkar, handling, quizet. Grönt är
     redovisningsapparaten: linjen över de källbelagda talen, linjen som
     skiljer de två jämförelsetalen, och citatets kantlinje på den mörka
     ytan. Grönt bär ALDRIG text och ALDRIG en dom — det säger inte att
     relining är rätt val, det säger att här redovisas underlaget. */
  --paper: #F5F8FB;
  --surface: #FFFFFF;
  --ink: #12202E;        /* 15,49:1 på paper · 16,51:1 på surface */
  --ink-muted: #485666;  /*  7,04:1 på paper ·  7,50:1 på surface */
  --ink-faint: #5D6B7A;  /*  5,12:1 på paper ·  5,46:1 på surface */
  --eyebrow: #5A6875;    /*  5,37:1 på paper */
  --rule: #D6DFE8;       /*  1,26:1 — hårlinje, dekorativ. Sektionsgränsen
                            bärs redundant av bakgrundsbytet i .avsnitt--yta,
                            så linjen är inte ensam bärare av någon gräns.
                            Den gamla varma paletten låg på 1,27. */
  --accent: #1C6FAF;     /*  5,00:1 på paper ·  5,33:1 på surface. Samma blå
                            som logotypen. */
  --accent-wash: #E8F1F9;/*  accent på wash: 4,66:1 */
  --warn: #8A5A2B;       /*  5,07:1 på #F6EDE2. Varm signalfärg mot den kalla
                            grunden, alltså läsbar som varning och inte som
                            ännu en accent. */

  /* Djupplanet. Ett tredje underlag, mörkt, för exakt ett avsnitt på
     startsidan: --paper och --surface ligger 1,07:1 isär, alltså har
     sidan i praktiken ETT underlag och fem likadana sektioner i rad
     läser som en enda lång sida. Kulören är accentens egen — #1C6FAF är
     hsl(206, 72 %, 40 %), #0E3350 är hsl(206, 70 %, 18 %). Sajten är
     fortfarande låst till ljust läge: det här är en sektionsyta, inte ett
     mörkt tema, och inget prefers-color-scheme-block har tillkommit. */
  --djup: #0E3350;         /* underlag. vitt 13,06:1 · --paper 12,25:1 */
  --pa-djup: #FFFFFF;      /* 13,06:1 på --djup */
  --pa-djup-dampad: #A8C4DA;/* 7,20:1 på --djup. Samma kulör (206°) som
                              underlaget, alltså tonad ur grunden och inte
                              grå. */
  --djup-linje: #2C5877;   /* 1,72:1 på --djup — hårlinje INUTI ett plan,
                              samma kategori som --rule (1,26:1) och lika
                              dekorativ. Bär aldrig ensam en gräns mellan
                              två plan; det gör underlagsbytet. */

  /* Logotypens grönt. Uppmätt: 2,31:1 på --paper och 2,46:1 på vitt, alltså
     underkänt både som text och som 3:1-gräns mot ljus grund. Det får
     därför bara förekomma mot djupplanet, där det klarar även textkravet,
     och en mörkare syskonton bär de gröna linjerna på ljus grund. */
  --gron: #6EB744;         /* 5,30:1 på --djup. Aldrig mot ljus grund. */
  --gron-linje: #57912C;   /* 3,59:1 på --paper · 3,82:1 på --surface.
                              Grafisk linje och yta, aldrig text. */

  /* Typografi */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;

  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1rem;
  --size-md: 1.125rem;
  --size-lg: 1.3125rem;
  --size-xl: 1.6875rem;
  --size-2xl: 2.125rem;
  --size-3xl: 2.75rem;

  /* Rum */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 2px 16px rgba(28, 111, 175, 0.08);
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

/* Sajten är låst till ljust läge. Det är ett beslut, inte en glömska: estetiken
   efterliknar tryck, och målgruppen är 45–70 år där mörkt läge är mindre
   vanligt. Lägg inte till ett prefers-color-scheme-block utan att först räkna
   om kontrasten på varje par — tre gånger i det här projektet har ett färgvärde
   som såg rimligt ut varit underkänt. */

/* Webbläsarens egen [hidden]-regel är en UA-stil, och varje författarregel som
   sätter display slår ut den. .btn sätter display: inline-block, vilket gjorde
   att quizets Tillbaka- och Skicka-knappar syntes på steg 1 trots hidden=true.
   Buggen levde i tre planer och nio kodgranskningar, eftersom verifieringen
   läste hidden-attributet i DOM:en i stället för att titta på sidan.
   Regeln gäller alla element, inte bara .btn — nästa komponent som sätter
   display ska inte återuppliva samma fel. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--size-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--size-3xl); }
h2 { font-size: var(--size-xl); }
h3 { font-size: var(--size-lg); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

/* Listor ärver brödtextens radlängd. Utan max-width springer en <ul> eller
   <ol> ut till hela .container--narrow (46rem) medan styckena runt den bryts
   vid 68ch — två olika satsbredder i samma textkolumn, vilket syns direkt.
   Indraget är var(--space-4) i stället för webbläsarens 40px, som är bredare
   än allt annat indrag på sajten. */
ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-4); max-width: var(--measure); }
li { margin-bottom: var(--space-2); }

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* .eyebrow är borttagen. Den lilla versaletiketten stod på tretton sidor,
   dels ovanför varje H1, dels som rubrik i .nasta-steg. André tog bort den:
   ingen sådan text ska finnas på någon sida. Återinför den inte.
   Rubriken bär sitt eget ämne, och .nasta-steg känns igen på sin överlinje
   och sin displaylänk utan att behöva etiketteras.
   Planens mekaniska checklista punkt 14 ("etiketten i .nasta-steg är
   .eyebrow") är därmed överspelad. */

/* Primärknapp är bläck, inte accent. */
.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--size-base);
  text-decoration: none;
}

/* Källcitat — återkommande element på hela sajten. */
.kalla {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
}
.kalla blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-md);
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
}
.kalla cite {
  font-style: normal;
  font-size: var(--size-sm);
  color: var(--ink-faint);
}

/* Verifieringsmärke för sakpåståenden. */
.markning {
  display: inline-block;
  font-size: var(--size-xs);
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: 3px;
}
.markning--verifierad { background: var(--accent-wash); color: var(--accent); }
.markning--reservation { background: #F6EDE2; color: var(--warn); }
.markning--overifierad { background: #EDF0F3; color: var(--ink-faint); }

.container { max-width: 68rem; margin: 0 auto; padding: 0 var(--space-4); }
.container--narrow { max-width: 46rem; }

img { max-width: 100%; height: auto; }

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

.hero { padding: var(--space-16) 0 var(--space-12); }
.hero__lead { font-size: var(--size-md); color: var(--ink-muted); }

/* ── Headern ───────────────────────────────────────────────────────────
   Tre ändringar, alla motiverade av mätning och inte av smak.

   1. KLIBBIG PÅ DESKTOP. Sidorna är 7 000–11 500 px höga. Besökaren
      passerar sajtens enda navigation på de första 63 px och ser den
      sedan aldrig igen. Klibbig header håller den nåbar. Motivering:
      hierarki, inte dekoration.
   2. EN CTA. Sajten är en leadsajt vars hela syfte är formuläret, och
      kromet hade noll väg dit på 56 sidor. Knappen pekar på /#starta,
      alltså hjältepanelen på startsidan, som rymmer både quizet och
      reservblocket och därför fungerar även utan JavaScript.
   3. EN RAD, ÄVEN PÅ MOBIL. Uppmätt före: 143,7 px vid 375 px, eftersom
      logotypen staplades ovanför en nav som bröt till två rader. Det är
      över skillens tak på 80 px och äter en sjättedel av mobilskärmen.

   Ingen ny JavaScript. Klibbigheten är position: sticky. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;   /* under cookiebannerns 50, som ska ligga överst */
}
.site-header__inner,
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-header__inner { justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }
.site-header__cta {
  flex: none;
  padding: var(--space-2) var(--space-4);
  font-size: var(--size-sm);
  transition: box-shadow .18s ease, translate .18s ease;
}
.site-header__cta:hover { translate: 0 -1px; box-shadow: 0 10px 22px -12px rgba(14, 51, 80, .5); }
/* Navigationen tar mellanrummet och skjuter knappen till högerkanten. */
.site-nav { margin-left: auto; }

/* Skuggan visar att headern lossnat från sidan, inte att den finns.
   Driven av scrollpositionen, alltså ren CSS och ingen observer. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: header-lossnar linear both;
      animation-timeline: scroll();
      animation-range: 0 6rem;
    }
    @keyframes header-lossnar {
      from { box-shadow: 0 0 0 rgba(14, 51, 80, 0); }
      to   { box-shadow: 0 6px 20px -14px rgba(14, 51, 80, .55); }
    }
  }
}
.site-header__brand { font-family: var(--font-display); font-size: var(--size-lg); font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: var(--space-2); }
/* Ordmärket är HTML-text med symbolen inline som Ö, inte en SVG med text
   inbakad. Skälet är dyrt köpt: en SVG med <text> kräver ett viewBox som
   räcker till, och textbredden beror på vilket typsnitt som råkar finnas på
   läsarens maskin. Century Gothic ligger i Windows och är bredare än
   fallbacken, så märket klipptes på högerkanten hos användaren men inte i
   testwebbläsaren. Med HTML-text lägger webbläsaren ut ordet och det kan
   inte klippas, oavsett typsnitt.
   brand/jamforrelining-logo.svg finns kvar som fristående fil och måste
   konverteras till banor innan den används i tryck eller e-post. */
.site-header__brand { gap: 0; }

/* WCAG 2.2 Target Size (Minimum) kräver 24×24 px. Ordmärkeslänkarna mätte
   217×21 i headern vid 375 px och 188×24 i sidfoten, alltså under respektive
   precis på gränsen.

   Höjden sätts med min-block-size och INTE med padding. Headerns första rad är
   redan 39 px hög eftersom knappen står bredvid, så länken växer in i utrymme
   som ändå finns och headern blir inte en pixel högre. Padding hade lagt på
   tolv pixlar på en header som redan är 106 px på mobil. */
.site-header__brand,
.site-footer__brand { min-block-size: 32px; align-items: center; }
.ordmarke {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: var(--font-ui);
  font-size: 1.5rem; line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}
.ordmarke__tung { font-weight: 700; letter-spacing: -0.02em; }
.ordmarke__latt { font-weight: 400; letter-spacing: 0.01em; }
/* Kalibrerat, inte gissat. Uppmätt vid 24 px Inter: versalhöjd 18 px, och
   Ä:s prickar sitter 5 px ovanför den. viewBoxen slutar vid ringens
   underkant, så baslinjejusteringen lägger ringen exakt på textens baslinje.
   Ringen är 156 av viewBoxens 204 enheter, alltså 0.98em * 156/204 = 18 px,
   och symbolens prickar hamnar 4,7 px över versalhöjden. Ö:et läser därmed
   som en bokstav i ordet, inte som en logga inklistrad bredvid det. */
.ordmarke__o { height: 0.98em; width: auto; display: block; flex: none; margin-inline: 0.03em; }
/* padding-block lyfter träffytan till 24 px, som är golvet i WCAG 2.5.8.
   Länkarna låg på 23. Inline-länkar i löptext är undantagna och rörs inte. */
.site-nav a { font-size: var(--size-sm); color: var(--ink-muted); text-decoration: none; display: inline-block; padding-block: 3px; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }

/* ── Sidfoten ──────────────────────────────────────────────────────────
   Byggd för 13 sidor, sajten är 56. Fem länkar räckte när det fanns fem
   ställen att gå; nu ligger 30 ortssidor och 14 innehållssidor utanför
   kromet och nås bara via brödtext och /sidkarta/. Sidfoten är den plats
   där en sajt av den här storleken publicerar sin struktur.

   Ingen ny färg. Ytan byter från --paper till --surface, som bara är
   1,07:1 isär och därför inte kan bära gränsen själv — den bärs av
   hårlinjen i --ink. 1 px, inte 2: den tjocka bläcklinjen är .nasta-stegs
   signatur och ska inte dubbleras. */
.site-footer {
  border-top: 1px solid var(--ink);
  background: var(--surface);
  margin-top: var(--space-16);
  padding: var(--space-12) 0 var(--space-8);
}

.site-footer__topp { display: grid; gap: var(--space-8); }
@media (min-width: 60rem) {
  .site-footer__topp { grid-template-columns: minmax(15rem, 1fr) 3fr; gap: var(--space-12); }
}

.site-footer__ord { display: grid; justify-items: start; gap: var(--space-4); align-content: start; }
/* Ordmärket igen, i sidfotens första spalt. Samma markup som i headern och
   samma .ordmarke-regler, så symbolens kalibrering mot versalhöjden gäller
   här också. Något mindre än headerns 1,5rem: sidfoten ska bära märket,
   inte upprepa det lika högt. */
.site-footer__brand { display: inline-flex; text-decoration: none; }
.site-footer__brand .ordmarke { font-size: 1.3125rem; }
.site-footer__promise {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  line-height: 1.3;
  max-width: 22ch;
  margin: 0;
}
.site-footer__cta { font-size: var(--size-base); }

/* Fyra grupper som följer besökarens frågor, inte sajtens filträd:
   vad det kostar, vad som görs, vad som ska beslutas, var man bor. */
.site-footer__karta { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .site-footer__karta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.site-footer__rubrik {
  font-family: var(--font-ui);
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  letter-spacing: 0;
  line-height: 1.3;
}
.site-footer__grupp ul { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: var(--space-2); }
.site-footer__grupp li { margin: 0; }
.site-footer__grupp a {
  font-size: var(--size-sm);
  color: var(--ink-muted);          /* 7,50:1 på --surface */
  text-decoration: none;
  display: inline-block;
  padding-block: 3px;               /* träffytan till 24 px, WCAG 2.5.8 */
  transition: color .15s ease;
}
.site-footer__grupp a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

.site-footer__botten {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
/* Bottenraden bär bara de fem systemlänkarna sedan den juridiska raden togs
   bort på Andrés begäran den 21 augusti 2026. Upplysningen om att sajten
   finansieras genom att förmedla förfrågningar finns kvar på /om-oss/ under
   rubriken "Så tjänar vi pengar", men inte längre på varje sida. */
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; }
.site-footer__nav a { font-size: var(--size-sm); color: var(--ink-muted); padding: var(--space-1) 0; }

@media (max-width: 51.25rem) {
  /* Uppmätt före: 143,7 px, för att logotypen staplades ovanför en nav som
     bröt till två rader. Nu: märket och knappen på en rad, navigationen som
     en dragbar remsa under. Remsan får bryta ut ur .container-paddingen så
     att den sista länken inte ser ut att sluta mitt i skärmen.

     Klibbigheten stängs av här med flit. En klibbig header äter en dryg
     sjättedel av en 375-skärm, och sidorna har två till tre egna vägar till
     formuläret i brödtexten. Desktop har gott om höjd och behåller den. */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-4) 0;
  }
  /* Explicit placering, inte autoflöde. Navigationen spänner båda
     kolumnerna och står före knappen i markupen, så autoflödet lade
     knappen på en TREDJE rad under remsan i stället för bredvid märket.
     Uppmätt: 145,7 px, alltså sämre än de 143,7 px ändringen skulle laga. */
  .site-header__brand { grid-area: 1 / 1; }
  .site-header__cta   { grid-area: 1 / 2; justify-self: end; }
  .site-nav {
    grid-area: 2 / 1 / 3 / -1;
    margin-left: 0;
    gap: var(--space-4);
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0 0 var(--space-3);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
}

@media (max-width: 640px) {
  h1 { font-size: var(--size-2xl); }
}

/* Navigationen behöver cirka 820 px för att rymmas inline bredvid märket och
   knappen. Uppmätt vid 768 px: 214 px märke + 83 px knapp + fyra länkar bröt
   till två rader, vilket skillens navregel underkänner. 820 är samma
   brytpunkt som .split redan använder. */
@media (max-width: 51.25rem) {
  .site-header { position: static; }
}

/* Under 400 px räcker inte bredden till märke plus knapp på samma rad.
   Uppmätt vid 320 px (klientbredd 305): 214,4 + 83,2 + 16 gap + 32 padding
   = 345,6 px, alltså 41 px spill. Märket och knappen krymper i stället för
   att radbrytas, eftersom en knapp under logotypen skjuter ner allt innehåll
   på varje sida. */
@media (max-width: 25rem) {
  .ordmarke { font-size: 1.125rem; }
  .site-header__cta { padding: var(--space-2) var(--space-3); }
}

/* Långa svenska sammansättningar spränger rubrikspalten på smala skärmar.
   Uppmätt vid 320 px: "bostadsrättsförening" (20 tecken) spiller 67 px på
   /relining-brf/, "Kemikalieinspektionen" (21) spiller 11 px på
   /relining-av-vattenror/. Båda är H1 respektive H2 och båda drar hela
   dokumentet i sidled.

   hyphens: auto avstavar på giltiga svenska brytpunkter — sidorna bär
   lang="sv", så webbläsaren har ordlistan. overflow-wrap är en reserv för
   ord utan giltig brytpunkt. Scopat till smala skärmar: på desktop finns
   ingen trängsel och en avstavad rubrik vore en försämring. */
@media (max-width: 30rem) {
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
}

.quiz, .quiz-reserv {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}

.quiz__meta { display: flex; justify-content: space-between; margin-bottom: var(--space-3); }
.quiz__stegetikett { font-size: var(--size-xs); letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--eyebrow); }
.quiz__tid { font-size: var(--size-xs); color: var(--ink-faint); }

.quiz__rail { height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-bottom: var(--space-6); }
/* Fylld via scale, inte width. Att animera width tvingar fram en ny layout
   på varje bildruta, och stapeln rör sig vid varje steg i quizet — alltså på
   den yta där en hackig animation kostar mest. scale körs på compositorn. */
.quiz__rail-fyll { display: block; height: 100%; width: 100%; transform-origin: left; scale: .2 1; background: var(--accent); transition: scale .35s ease; }

.quiz__fraga { font-family: var(--font-display); font-size: var(--size-lg); margin: 0 0 var(--space-2); }
.quiz__under { font-size: var(--size-sm); color: var(--ink-faint); margin: 0 0 var(--space-2); }
.quiz__hjalp { font-size: var(--size-sm); color: var(--ink-muted); margin: 0 0 var(--space-4); }

.quiz__alternativ { display: grid; gap: var(--space-2); margin: 0; }

.quiz__val {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-family: inherit; font-size: var(--size-base); color: var(--ink);
}
.quiz__val:hover { border-color: var(--accent); }
.quiz__val[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); font-weight: 600; }
.quiz__val-under { display: block; font-size: var(--size-xs); color: var(--ink-faint); font-weight: 400; margin-top: 2px; }

.quiz__falt { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.quiz__falt label { font-size: var(--size-sm); font-weight: 600; display: block; margin-bottom: var(--space-1); }
.quiz__falt input[type="text"],
.quiz__falt input[type="tel"],
.quiz__falt input[type="email"] {
  width: 100%; font-family: inherit; font-size: var(--size-base);
  padding: var(--space-3); border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.quiz__falt input[aria-invalid="true"] { border-color: var(--warn); }
.quiz__faltfel { font-size: var(--size-sm); color: var(--warn); margin: var(--space-1) 0 0; }

/* Kryssrutan ritades i webbläsarens grundstorlek, 13×13 px. WCAG 2.2 Target
   Size (Minimum) kräver 24×24. Etiketten runt om var klickbar, så rutan gick
   att träffa — men den som siktar på rutan siktade på ett för litet mål. */
.quiz__samtycke { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--size-sm); }
.quiz__samtycke input[type="checkbox"] {
  inline-size: 24px; block-size: 24px; flex: 0 0 24px;
  margin: 0; accent-color: var(--accent); cursor: pointer;
}
/* Egen toppmarginal. Rutan arvde bara p-regelns botten, sa den lag dikt an
   mot innehallet ovanfor nar den visades — samma fel som knapparna hade. */
.quiz__fel { color: var(--warn); font-size: var(--size-sm); margin: var(--space-4) 0 0; }
/* Avstandet till knapparna ligger HAR och ingen annanstans. Det satt forut
   som margin-bottom pa .quiz__alternativ, vilket bara traffade valstegen:
   kontaktsteget slutar med samtyckesetiketten, som inte har nagon marginal,
   sa knapparna lag dikt an mot raden om integritetspolicyn. En regel per steg
   hade gett fyra stallen att halla i takt. */
.quiz__knappar { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-6); }
.btn--tyst { background: transparent; color: var(--ink-muted); border: 1.5px solid var(--rule); }
.quiz__honung { position: absolute; left: -9999px; opacity: 0; height: 0; }


/* Cookiebanner. Fast i underkant, ligger över innehållet men flyttar det aldrig
   — därför noll bidrag till CLS. Inga nya färgvärden: varje token här är redan
   kontrastmätt. Ingen animation, alltså inget att stänga av vid reducerad
   rörelse. */
.cookie-banner {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 50;
  max-width: 46rem;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cookie-banner strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-md);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.cookie-banner p {
  font-size: var(--size-sm);
  color: var(--ink-muted);
  max-width: none;
  margin: 0 0 var(--space-4);
}
.cookie-banner__knappar { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cookie-banner .btn--tyst { border-color: var(--ink-faint); }

/* Knappen som öppnar bannern igen. Ligger i footern, är dold i markupen och
   avslöjas av samtyckesmodulen — en kontroll som inte fungerar ska inte synas. */
.site-footer__samtycke {
  background: none;
  border: 0;
  padding: var(--space-1) 0;
  margin-bottom: var(--space-4);
  font: inherit;
  font-size: var(--size-sm);
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
  cursor: pointer;
}

/* HTML-sidkartan. Listan genereras av build.mjs ur manifestet. */
.sitemap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.sitemap-list a { font-size: var(--size-md); }

@media (max-width: 640px) {
  .cookie-banner {
    left: var(--space-2);
    right: var(--space-2);
    bottom: var(--space-2);
    padding: var(--space-4);
  }
  .cookie-banner__knappar { flex-direction: column; }
  .cookie-banner__knappar .btn { width: 100%; text-align: center; }
}

/* Statrad. Serif-siffror, eftersom Source Serif 4 har proportionella siffror
   som läser som text och inte som en dashboard.
   Låst till tre kolumner: med två blir det en tom lucka till höger, med fyra
   hamnar det fjärde ensamt på rad två. Behöver ett annat antal någonsin visas
   är det en ny variant, inte en generalisering av den här. */
.statrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin: var(--space-8) 0; }
.statrad__tal { font-family: var(--font-display); font-size: var(--size-2xl); line-height: 1.1; display: block; }
.statrad__etikett { font-size: var(--size-sm); color: var(--ink-muted); }

/* Jämförelsetabell. Finns på exakt en sida: /relining-eller-stambyte/.
   overflow-x på omslaget, aldrig på sidan — en tabell som spränger viewporten
   ska scrolla i sin egen låda.
   overscroll-behavior-x hindrar att en sidoswipe i lådan kedjar vidare till
   webbläsarens bakåtgest, samma skäl som på cookiebannern.
   Omslaget måste bära tabindex="0" i markupen: utan det går lådan inte att
   fokusera, och en tangentbordsanvändare når aldrig den avskurna delen. */
.tabell-omslag { overflow-x: auto; overscroll-behavior-x: contain; margin: var(--space-6) 0; }
/* 34rem är mätt, inte gissat: tabellens naturliga golv är 362 px, men där
   bryts "250 000–300 000 kr" mitt i talet. Vid 544 px håller varje rad ihop. */
.tabell { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--size-sm); }
.tabell th, .tabell td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.tabell th { font-weight: 600; }
.tabell thead th { border-bottom: 2px solid var(--ink); }
.tabell caption { text-align: left; font-size: var(--size-sm); color: var(--ink-faint); margin-bottom: var(--space-2); }

/* FAQ-dragspel. <details> och <summary> — ingen JavaScript alls, vilket också
   är enda sättet det ryms i JS-budgeten. Fungerar med tangentbord och
   skärmläsare utan att vi bygger något.
   list-style: none i stället för display: block — det senare tar bort
   display: list-item och därmed disclosure-semantiken i Safari.
   Markören är absolutpositionerad, inte flytande: en float hamnar på frågans
   sista rad, och vid 360 px lindar de flesta frågor till tre eller fyra rader.
   Då sitter plustecknet nere i högra hörnet, lösryckt från där ögat börjar. */
.faq { margin: var(--space-8) 0; }
.faq details { border-bottom: 1px solid var(--rule); padding: var(--space-4) 0; }
.faq summary { font-family: var(--font-display); font-size: var(--size-md); cursor: pointer; list-style: none; position: relative; padding-right: var(--space-6); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+' / ''; position: absolute; right: 0; top: 0; color: var(--accent); font-weight: 600; }
.faq details[open] summary::after { content: '\2212' / ''; }
.faq details p { margin-top: var(--space-3); }

/* Fördjupa dig. Spec 7.5: exakt ett utpekat nästa steg per sida, som eget
   block ovanför footern. Det är mekanismen som skiljer tratt från bibliotek.
   Etiketten är .eyebrow, som redan finns — ingen egen klass för samma sak. */
.nasta-steg { border-top: 2px solid var(--ink); padding-top: var(--space-4); margin: var(--space-12) 0 var(--space-8); }
.nasta-steg__lank { font-family: var(--font-display); font-size: var(--size-lg); display: block; }

/* Källregistret. En rad per påstående, fyra kolumner: påstående, källa, årtal,
   status. Klassen sitter på .tabell-omslag, inte på tabellen.
   44rem är mätt: registrets naturliga golv är 558 px, men vid 704 px blir
   högsta raden 140 px i stället för 233 och tabellen 35 % lägre. Det är också
   exakt .container--narrow minus padding, så registret scrollar aldrig på
   desktop.
   Under 640 px ligger källa, årtal och status utanför synfältet i viloläge.
   Registret är en referenssida med tio sökningar i månaden, så det får kosta —
   men sidan måste säga i text att tabellen dras i sidled. Den fullständiga
   lösningen är staplade rader på mobil, och den är en designändring. */
.kallregister .tabell { min-width: 44rem; }
.kallregister td:nth-child(3), .kallregister td:nth-child(4) { white-space: nowrap; }
/* Radrubriken är <th scope="row">, inte <td> — .tabell th { font-weight: 600 }
   skulle annars göra alla 30+ påståendeceller halvfeta. */
.kallregister tbody th { font-weight: 400; }
/* Deep-link-besökaren är sidans primära ingång, inte ett specialfall: hon
   klickar en källänk på en annan sida och landar mitt i tabellen.
   --rule i stället för --accent-wash: verifierad-märket har exakt
   --accent-wash som egen bakgrund, så en :target-tvätt i samma färg gör
   märket osynligt mot raden — det gäller 19 av 33 rader. --rule är mörkare
   än alla tre märkbakgrunder (verifierad, reservation, overifierad) så
   märket förblir en synlig, ljusare platta oavsett vilken status raden bär. */
.kallregister tr:target { background: var(--rule); box-shadow: inset 3px 0 0 var(--accent); }
.kallregister tr[id] { scroll-margin-top: var(--space-8); }
/* position: sticky; top: 0 på thead gjorde ingenting: .tabell-omslag har bara
   overflow-x: auto, scrollar aldrig vertikalt, och en sticky-regel utan en
   scrollande axel att fästa mot är dekoration som ser ut som funktion. Borttagen. */

/* Mobil deep-link, del två: raden landar rätt i höjdled (scroll-margin-top
   ovan), men på en 375 px-skärm ligger statuskolumnen ändå utanför synfältet
   vid scrollLeft: 0 — och statuskolumnen är sidans egen huvudpoäng. Lösningen
   är att låta status vara den kolumn som ALDRIG scrollar bort: fäst den mot
   höger kant av .tabell-omslag, som redan är den scrollande axeln (till
   skillnad från den vertikala sticky-thead ovan, som inte hade någon).
   Ingen JavaScript, fungerar identiskt för musscroll och touch-drag. */
.kallregister thead th:nth-child(4),
.kallregister tbody td:nth-child(4) {
  position: sticky;
  right: 0;
  background: var(--paper);
  border-left: 1px solid var(--rule);
}
.kallregister tr:target td:nth-child(4) { background: var(--rule); }

@media (max-width: 640px) {
  .statrad { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ── Grundlager från det tidigare startsidepasset ───────────────────────
   Bevarande läge: tokens, typografi och accent oförändrade. Det som ändras
   är layoutrytmen.

   Blocket står kvar som grund. Startsidans nya pass (längst ner i filen)
   skriver över det mesta av det här via .sida-start, men två av reglerna
   är delade av alla tretton sidorna och får aldrig försvinna: .site-header
   och .figur. Resten (.avsnitt, .split, .kontrast, .band) finns bara på
   startsidan och står här som de värden .sida-start räknar med att ha
   under sig. */

/* Loggan är blå och grön. Headern får en vit yta så att märket står på det
   underlag det ritades för i stället för att konkurrera med papperstonen. */
.site-header { background: var(--surface); border-bottom: 1px solid var(--rule); }

/* Sektionsrytm. Varannan sektion byter underlag så att ögat får en gräns
   att vila mot utan att en ny färg införs. */
.avsnitt { padding: var(--space-16) 0; }
.avsnitt--yta { background: var(--surface); border-block: 1px solid var(--rule); }

/* Bild plus text. Kollapsar till en kolumn under 820 px, med bilden först
   eftersom den bär betydelsen på just de här sektionerna. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.split--omvand > :first-child { order: 2; }
.split__text > :first-child { margin-top: 0; }

.figur { margin: 0; }
.figur img { width: 100%; height: auto; display: block; border-radius: var(--radius); background: var(--rule); }
.figur figcaption { font-size: var(--size-sm); color: var(--ink-faint); margin-top: var(--space-3); }

/* Helbreddsband. Bilden får bära en sektionsgräns utan att bli dekoration:
   texten under den säger vad man ser. */
.band { margin: var(--space-12) 0 0; }
.band img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; display: block; }

/* Jämförelsefelet. Två tal mot varandra, inte en tabell — jämförelsetabellen
   relining mot stambyte finns bara på /relining-eller-stambyte/. */
.kontrast { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-6); align-items: start; margin: var(--space-8) 0; }
.kontrast__tal { font-family: var(--font-display); font-size: var(--size-3xl); line-height: 1; display: block; }
.kontrast__vad { font-size: var(--size-sm); color: var(--ink-muted); display: block; margin-top: var(--space-2); }
.kontrast__mot { font-size: var(--size-sm); color: var(--ink-faint); align-self: center; }
/* Slutsatsen bär INTE vänsterlinjen. Den markeringen är citatspråket på
   sajten (.kalla), och två identiska markeringar på samma sida urvattnar
   båda. Slutsatsen får i stället displaysnittet, vilket är den vikt den
   faktiskt har: det är sidans enda mening som drar en slutsats av talen. */
.kontrast__slutsats { font-family: var(--font-display); font-size: var(--size-lg); line-height: 1.35; color: var(--ink); max-width: 34ch; }

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .split--omvand > :first-child { order: 0; }
  .kontrast { grid-template-columns: 1fr; gap: var(--space-4); }
  .kontrast__mot { justify-self: start; }
}

/* Den gamla rörelseregeln — samma inglidning på .avsnitt > .container och
   på bandet — är borttagen och ersatt av rörelseblocket längst ner. Skälet
   står där: fem identiska entréer är inte rytm. */

/* ══ Startsidan ═════════════════════════════════════════════════════════
   Allt nedan hänger på .sida-start, som bara startsidans <body> bär.
   styles.css delas av tretton sidor medan det här passet gäller en, och
   .hero, .statrad, .faq, .kalla, .figur, .band och .nasta-steg finns på
   flera av dem. .kontrast, .split och .avsnitt finns bara här men står
   ändå med prefix, så att blocket går att läsa och flytta som en enhet.

   Diagnosen: sidan hade EN rytm (64 px kring varje sektion, utan
   undantag), ETT underlag (--paper och --surface ligger 1,07:1 isär), EN
   layoutfamilj (samma smala spalt hela vägen ner, två vänsterkanter på
   hela sidan) och EN rörelse (samma inglidning på varje sektion). Fem
   lika starka sektioner ger ingen sektion företräde, och en sida utan
   företräde läser som stel hur väl den än är skriven.

   Svaret är färre och tyngre beslut, inte fler effekter: hjälten blir
   ett uppslag med quizet upphöjt och de tre källbelagda talen som remsa
   under; ett mörkt plan bär tesen och ger logotypens gröna en grund där
   färgen klarar kontrastkraven; rytmen skalas per sektionstyp; rörelsen
   samlas till ett gestaltat ögonblick där talen monteras ihop framför
   läsaren, plus bruksrörelse (klibbande bild och slutsats, djup i
   bandet).

   Trovärdigheten är uppdraget, inte kostnaden: statusmärkena har gått
   från understruket ord inne i en mening till synliga, klickbara märken,
   och varje tal har fått en egen härkomstrad. Inget sakpåstående är
   ändrat. */

/* Typskalan är frikopplad från --size-2xl och --size-3xl INNAN något
   höjs: .statrad__tal ärvde 2xl och .kontrast__tal ärvde 3xl, så en
   höjning av de tokens hade spräckt talen i sina spalter på sex andra
   sidor. Taken är mätta: "400–8 000 kr" är 195 px vid 34 px och växer
   5,74 px per punkt; "250–300 000 kr" är 299 px vid 44 px och växer
   6,79 px per punkt. Båda ryms med marginal i sina nya spalter. */
.sida-start h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
}
.sida-start h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.125rem);
  letter-spacing: -0.024em;
  line-height: 1.12;
  text-wrap: balance;
}

/* Rytmen är inte längre en konstant. Hjälten får mest luft uppåt,
   prosan en jämn takt, tesen mest av alla, frågorna minst — de avslutar
   och inleder inte. */
.sida-start .hero { padding: clamp(2.5rem, 1rem + 5vw, 4.5rem) 0 clamp(2.5rem, 1rem + 4vw, 4rem); }
.sida-start .avsnitt { padding: clamp(3.5rem, 1rem + 7vw, 6.5rem) 0; }
.sida-start .avsnitt--fragor { padding-bottom: clamp(2.5rem, 1rem + 4vw, 4rem); }

/* Ett H2 följt av åtta likadana stycken har ingen inre hierarki. Ett
   tydligt ingångsstycke ger ögat en väg in och kostar noll i
   trovärdighet. */
.sida-start .ingress { font-size: var(--size-md); line-height: 1.55; max-width: 34ch; }

/* ── Hjälten ───────────────────────────────────────────────────────── */

/* .container--narrow lämnade 265 px död marginal per sida och tvingade
   ändå quizet under texten. Uppslaget använder bredden och lyfter quizet
   från "något längre ner" till "det första du ser". */
.sida-start .hero__rutnat {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.sida-start .hero__ord { padding-top: clamp(0rem, -1rem + 2vw, 1.25rem); }
.sida-start .hero__lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34ch;
  margin-top: var(--space-6);
}

/* Panelen är sidans enda upphöjda yta och ska läsa som ett föremål på
   pappret: skugga med både förskjutning och mjuk oskärpa i två lager, en
   nollförskjuten gloria är dekoration.

   Här satt först en 4 px accentribba i överkanten. Den är borttagen, och
   det är ett beslut: quizet har redan en accentfärgad stapel sextio pixlar
   längre ner, och den bär information — hur långt besökaren har kommit.
   Två blå streck ovanför varandra gjorde det informationsbärande till ett
   av två dekorativa. Panelen håller sig själv på vit yta mot papper med
   skugga, och accenten sparas till stapeln. */
.sida-start .hero__panel { container-type: inline-size; container-name: panel; }
.sida-start .hero__panel .quiz,
.sida-start .hero__panel .quiz-reserv {
  margin: 0;
  padding: clamp(1.25rem, 0.5rem + 2vw, 1.75rem);
  box-shadow: 0 1px 2px rgba(18, 32, 46, .05), 0 14px 34px -12px rgba(14, 51, 80, .22);
}
.sida-start .hero__panel .quiz-reserv p { font-size: var(--size-md); }
.sida-start .hero__panel noscript p { font-size: var(--size-sm); color: var(--ink-muted); margin-top: var(--space-4); }

/* Hover får både färg och förskjutning, så att en 45–70-årig besökare
   ser att ytan svarar och inte bara skiftar nyans. */
.sida-start .quiz__val { transition: border-color .18s ease, background-color .18s ease, translate .18s ease; }
.sida-start .quiz__val:hover { translate: 2px 0; }
.sida-start .quiz__val[aria-pressed="true"] { translate: none; }

/* ── Vägen ─────────────────────────────────────────────────────────────
   Ersätter bevisremsan, som stod direkt under hjältepanelen och bar tre
   lösa tal utan handling. Två av talen sålde ingenting: 69 % av beståndet
   före 1980 är marknadsstatistik, inte ett skäl att svara på fyra frågor.
   De två som sålde — 3–5 dagar med kvarboende, och 400–8 000 kr per meter
   — finns kvar, men som argument inne i stegen i stället för som fristående
   siffror. Inga nya sakpåståenden har tillkommit; talen är de som redan
   stod på sidan.

   Blocket är sidans andra väg in i quizet. Besökaren som skrollat förbi
   panelen får veta vad som händer efter att hen svarat, vilket är den
   invändning som stoppar ett leadformulär, och en knapp tillbaka upp.

   FÄRG. Inga nya färgvärden. Nya PARNINGAR är däremot uträknade, eftersom
   regeln gäller kvoten och inte hexkoden:
     --ink        på --paper      15,49:1   (redan uppmätt)
     --ink-muted  på --paper       7,04:1   (redan uppmätt)
     --accent     på --paper       5,00:1   — stegnumren
     --paper      på --accent      5,00:1   — pilen inuti cirkeln
     --paper      på --ink        15,49:1   — knapptexten
   Grönt förekommer inte här. Grönt är redovisningsapparat och bär aldrig en
   uppmaning; den här ytan är en uppmaning rakt igenom.

   DJUP. Paletten är avsiktligt flat — --paper och --surface ligger 1,07:1
   isär — så ett kort kan inte få djup av sin bakgrund. Djupet kommer i
   stället av två koncentriska hårlinjer med 6 px emellan, alltså en vit
   bricka som håller en pappersplatta. Samma trick som en fysisk inramning,
   och det kostar ingen ny kulör. */

.vagen { margin: clamp(2.5rem, 1rem + 4vw, 4rem) 0 0; }

.vagen__ogonbryn {
  font-size: var(--size-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--eyebrow);
  margin: 0 0 var(--space-2);
}

.vagen__rubrik {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-8);
  max-width: 24ch;
}

/* Bentot: första steget är dubbelt så högt som de två andra och bär den
   fråga som faktiskt avgör ärendet. Tre symmetriska tredjedelar hade sagt
   att stegen väger lika, och det gör de inte. */
.vagen__steg {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  /* ol arver max-width: var(--measure) fran bastypografin, alltsa 68ch. Det
     ar ratt for lopande text och fel for ett rutnat: listan kroktes till 686 px
     inne i en container pa 1056 och bentot slutade mitt pa sidan. */
  max-width: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
}
/* li barvar margin-bottom fran bastypografin. I ett rutnat lades den ovanpa
   gap och gav 24 px mellan raderna dar kolumnerna hade 16. */
.vagen__steg > .kort { grid-column: span 12; margin: 0; }

/* Tablet får ett eget steg. Under 820 px låg alla tre korten i en enda spalt,
   vilket vid 768 px gav tre kort på 721 px bredd staplade under varandra och
   en onödigt hög sektion. Första steget behåller full bredd — det bär den
   fråga som avgör ärendet — och de två andra delar raden. */
@media (min-width: 600px) and (max-width: 51.1875rem) {
  .vagen__steg > .kort:not(.kort--forst) { grid-column: span 6; }
}

@media (min-width: 820px) {
  .vagen__steg > .kort--forst { grid-column: span 6; grid-row: span 2; }
  .vagen__steg > .kort:not(.kort--forst) { grid-column: 7 / -1; }
}

/* Ytterskal och kärna. Skalet bär hårlinjen och skuggan, kärnan bär texten
   och sin egen hårlinje. Radierna är koncentriska: 20 − 6 = 14. */
.kort {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 6px;
  box-shadow: var(--shadow-card);
  transition: translate .5s cubic-bezier(.32, .72, 0, 1),
              border-color .5s cubic-bezier(.32, .72, 0, 1);
}
.kort:hover { translate: 0 -3px; border-color: var(--accent); }

.kort__kropp {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: var(--space-6);
  height: 100%;
}

.kort__nr {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-xl);
  line-height: 1;
  color: var(--accent);          /* 5,00:1 på --paper */
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}

.kort__rubrik {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}

.kort__text {
  font-size: var(--size-base);
  line-height: 1.6;
  color: var(--ink-muted);       /* 7,04:1 på --paper */
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}

/* Handlingskortet. Samma inramning som stegen, men med accentens linje i
   överkant — blått är sajtens handlingsfärg, och den linjen är hela
   skillnaden mellan ett kort som berättar och ett kort som ber om något. */
.vagen__handling {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 6px;
  box-shadow: var(--shadow-card);
}
.vagen__handling-kropp {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.vagen__loften { flex: 1 1 28ch; }
.vagen__slut {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}
.vagen__slut-text {
  font-size: var(--size-base);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* Knapp med nästlad pil. Pilen sitter i en egen cirkel i stället för naken
   intill texten, så att den läser som en yta att träffa och inte som ett
   tecken i meningen. Cirkeln flyttar sig vid hover, knappen trycks ihop vid
   klick. Båda är transform, alltså ingen ny layout per bildruta. */
.knapp-pil {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--ink);
  color: var(--paper);           /* 15,49:1 på --ink */
  font-weight: 600;
  font-size: var(--size-base);
  font-family: inherit;
  text-decoration: none;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
  border-radius: 999px;
  flex: 0 0 auto;
  transition: scale .35s cubic-bezier(.32, .72, 0, 1);
}
.knapp-pil:active { scale: .98; }
.knapp-pil__cirkel {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);           /* 5,00:1 på --accent */
  transition: translate .5s cubic-bezier(.32, .72, 0, 1);
}
.knapp-pil:hover .knapp-pil__cirkel { translate: 3px 0; }

/* Inträdet. Korten stiger och tonar in i tur och ordning i stället för att
   stå still vid sidladdning. Blocket ligger direkt under hjältepanelen, så
   det behövs ingen IntersectionObserver — och därmed ingen ny JavaScript på
   en sajt som har budget för mycket lite. */
@media (prefers-reduced-motion: no-preference) {
  .vagen .kort,
  .vagen__handling {
    animation: vagen-in .8s cubic-bezier(.32, .72, 0, 1) backwards;
  }
  .vagen__steg > .kort:nth-child(1) { animation-delay: .05s; }
  .vagen__steg > .kort:nth-child(2) { animation-delay: .14s; }
  .vagen__steg > .kort:nth-child(3) { animation-delay: .23s; }
  .vagen__handling { animation-delay: .32s; }
}

@keyframes vagen-in {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (max-width: 560px) {
  .vagen__handling-kropp { align-items: stretch; }
  .knapp-pil { justify-content: space-between; flex: 1 1 auto; }
}

/* Märkena är länkar i stället för <span> intill en länk: en status som
   går att klicka på tar besökaren till raden som bär den, vilket är just
   vad statusen påstår finns. Understrykningen tas bort eftersom plattan
   redan säger att det är ett märke, och kommer tillbaka vid hover och
   fokus så att det syns att den är klickbar. */
.sida-start a.markning { text-decoration: none; transition: box-shadow .16s ease; }
.sida-start a.markning:hover,
.sida-start a.markning:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.sida-start a.markning--verifierad:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.sida-start a.markning--reservation:hover { box-shadow: inset 0 0 0 1px var(--warn); }
.sida-start a.markning--overifierad:hover { box-shadow: inset 0 0 0 1px var(--ink-faint); }

/* ── Bild och text ─────────────────────────────────────────────────── */

/* 1fr 1fr med align-items: center gav en bild som svävade mitt emot fem
   stycken text. Nu får texten mer bredd, spalterna sträcks lika höga och
   bilden fäster medan texten om den rullar förbi — rörelse som hjälper
   läsningen: motivet finns kvar när stycket beskriver det. */
.sida-start .split {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: stretch;
}
.sida-start .figur { position: sticky; top: var(--space-8); }
.sida-start .figur img { box-shadow: 0 1px 2px rgba(18, 32, 46, .05), 0 12px 28px -14px rgba(14, 51, 80, .28); }
.sida-start .figur figcaption { max-width: 40ch; line-height: 1.55; }

/* ── Djupplanet: sidans tes ────────────────────────────────────────── */

.sida-start .avsnitt--djup {
  background: var(--djup);
  color: var(--pa-djup);
  border-block: 0;
  padding-bottom: 0;
}
.sida-start .avsnitt--djup h2 { color: var(--pa-djup); }
.sida-start .djup__inledning p,
.sida-start .djup__spalt p { color: var(--pa-djup-dampad); }

/* Länkar på mörk grund: --accent mot --djup är 2,45:1, underkänt både
   som text och som gräns. Alltså vit text med grön understrykning
   (5,30:1). Samma skäl gör att fokusringen byter färg här nere.
   :not(.markning) är inte kosmetik — utan den färgas statusmärkenas
   text vit på sin egen ljusa platta och blir oläslig. */
.sida-start .avsnitt--djup a:not(.markning) { color: var(--pa-djup); text-decoration-color: var(--gron); }
.sida-start .avsnitt--djup a:not(.markning):hover { text-decoration-thickness: 2px; }
.sida-start .avsnitt--djup :focus-visible { outline-color: var(--gron); }

.sida-start .djup__inledning { max-width: 44ch; }
.sida-start .djup__inledning p { margin-bottom: 0; }

/* Talen. Grönt bär hängslet mellan dem: en linje, inte ett omdöme.
   align-items: stretch, inte start — de två sidorna är olika höga
   eftersom "Avser rören och badrummen." tar två rader, och med start
   hamnade märkena på olika höjd. Sträckta spalter plus margin-top: auto
   på märkesraden lägger dem på samma linje, vilket är hela poängen: det
   ska synas att BÅDA talen bär reservation. */
.sida-start .kontrast {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  align-items: stretch;
  margin: clamp(2.5rem, 1rem + 4vw, 4rem) 0;
}
.sida-start .kontrast__sida { display: flex; flex-direction: column; }
.sida-start .kontrast__tal {
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pa-djup);
  margin: 0 0 var(--space-3);
}
.sida-start .kontrast__vad {
  display: block;
  font-size: var(--size-sm);
  color: var(--pa-djup-dampad);
  margin: 0 0 var(--space-3);
  max-width: 26ch;
}
/* Raden som gör hela poängen: "Avser rören." mot "Avser rören och
   badrummen." Displaysnitt och full styrka, eftersom det är asymmetrin
   och inte talen som är argumentet. Understrykningen är grönt vid 32 %
   över djupplanet, alltså #2D5D4C, och vit text på den ytan är 7,55:1. */
.sida-start .kontrast__avser {
  font-family: var(--font-display);
  font-size: var(--size-md);
  line-height: 1.35;
  color: var(--pa-djup);
  margin: 0 0 var(--space-6);
  max-width: 26ch;
  text-wrap: pretty;
}
.sida-start .kontrast__extra { box-shadow: inset 0 -0.42em 0 -0.06em rgba(110, 183, 68, .32); }
.sida-start .kontrast__kalla { margin: auto 0 0; }

/* Hängslet: två CSS-boxar och ett ord. Inga geometriska tecken — uppmätt
   att U+2192 och U+25C6 faller igenom till systemsnitt, medan + och
   U+2212 finns i båda de subsatta snitten. */
.sida-start .kontrast__mot {
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  gap: var(--space-3);
  font-size: var(--size-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pa-djup-dampad);
  margin: 0;
  padding-top: 0.4em;
  min-height: 6rem;
}
.sida-start .kontrast__mot::before,
.sida-start .kontrast__mot::after {
  content: '';
  width: 2px;
  background: var(--gron);
  transform-origin: top;
}
.sida-start .kontrast__mot::after { transform-origin: bottom; }

/* Slutsatsen fäster medan bevisningen rullar förbi. Det är sidans enda
   mening som drar en slutsats av talen, och den ska vara kvar på skärmen
   medan de tre styckena som bevisar den läses. Hårlinjen under sitter på
   .djup__utred och inte på citatet, så att den går hela spaltbredden i
   stället för att sluta där citatets radlängd tar slut. */
.sida-start .djup__utred {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 1rem + 3vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 1rem + 3vw, 3.5rem);
  border-bottom: 1px solid var(--djup-linje);
}
.sida-start .kontrast__slutsats {
  position: sticky;
  top: var(--space-8);
  font-size: clamp(1.3125rem, 1rem + 1vw, 1.6875rem);
  line-height: 1.3;
  color: var(--pa-djup);
  max-width: 26ch;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--gron);
  text-wrap: pretty;
}
.sida-start .djup__spalt p:last-child { margin-bottom: 0; }

/* Citatets kantlinje är grön här, inte blå: --accent försvinner i
   underlaget (2,45:1) medan grönt ligger på 5,30:1. Samma betydelse som
   på resten av sajten, bara den färg som håller mot den här grunden. */
.sida-start .avsnitt--djup .kalla {
  border-left-color: var(--gron);
  border-left-width: 3px;
  padding-left: var(--space-6);
  margin: 0;
  max-width: 56ch;
}
.sida-start .avsnitt--djup .kalla blockquote { font-size: var(--size-lg); line-height: 1.45; color: var(--pa-djup); }
.sida-start .avsnitt--djup .kalla cite { color: var(--pa-djup-dampad); }

/* Bandet stänger kapitlet och möter nästa sektions kant rakt av.
   overflow: hidden finns för djupanimationen längre ner. */
.sida-start .band { margin: clamp(3rem, 1rem + 5vw, 5rem) 0 0; overflow: hidden; }
.sida-start .band img { height: clamp(220px, 32vw, 400px); }

/* ── Frågor ────────────────────────────────────────────────────────── */

/* Rubriken lämnar textspalten och blir en egen kolumn. Det ger sidan sin
   tredje vänsterkant — den hade exakt två — och gör frågorna till ett
   avsnitt i stället för fyra hårlinjer i samma spalt som allt annat. */
.sida-start .fraga-rutnat {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.sida-start .fraga-rutnat__rubrik { position: sticky; top: var(--space-8); }
.sida-start .fraga-rutnat__rubrik h2 { margin: 0; }

.sida-start .faq { margin: 0; max-width: 46rem; }
.sida-start .faq details {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-6);
  margin-bottom: var(--space-3);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.sida-start .faq details:hover,
.sida-start .faq details[open] {
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(18, 32, 46, .04), 0 10px 24px -14px rgba(14, 51, 80, .3);
}
.sida-start .faq summary {
  font-size: var(--size-lg);
  line-height: 1.3;
  padding-right: var(--space-8);
  padding-block: var(--space-3);
}

/* Markören är ritad av två boxar, inte satt som tecken: en ritad markör
   går att animera och kan inte gå sönder av en framtida subsättning.
   Tomt content betyder att skärmläsare inte läser upp något —
   disclosure-semantiken sitter i <details>.

   content nollställs på BÅDA lägena, och det är inte överflödigt.
   Grundregeln .faq details[open] summary::after { content: '\2212' } har
   specificiteten (0,2,3) och slår .sida-start .faq summary::after
   (0,2,2), så minustecknet ritades kvar OVANPÅ den ritade markören: två
   vågräta streck i öppet läge. Buggen fanns inte i DOM:en, bara i bild,
   och hittades genom att zooma in på markören i en renderad skärmbild. */
.sida-start .faq details summary::after,
.sida-start .faq details[open] summary::after { content: ''; }
.sida-start .faq summary::before,
.sida-start .faq summary::after {
  content: '';
  position: absolute;
  top: 50%;
  background: var(--accent);
}
.sida-start .faq summary::after { right: 0; width: 16px; height: 2px; margin-top: -1px; }
.sida-start .faq summary::before {
  right: 7px;
  width: 2px;
  height: 16px;
  margin-top: -8px;
  transition: scale .28s cubic-bezier(.22, .61, .36, 1);
}
.sida-start .faq details[open] summary::before { scale: 1 0; }
.sida-start .faq details p { max-width: 62ch; color: var(--ink-muted); margin-bottom: var(--space-3); }

/* ── Nästa steg ────────────────────────────────────────────────────── */

/* Startsidan har ingen .nasta-steg. Spec 7.5 kräver exakt ETT utpekat
   nästa steg per sida, och på just den här sidan är steget quizet —
   inte ännu en artikel. Blocket nedan ÄR därför det utpekade steget,
   och det får inte kompletteras med en vidarelänk: två block skulle
   göra sidan till ett bibliotek igen. Övriga tolv sidor behåller
   .nasta-steg, vars basregler står kvar orörda längre upp i filen.

   Ytan är medvetet densamma som quizpanelens i hjälten: samma yta,
   samma överlinje i bläck, samma skugga. Läsaren ska känna igen
   handlingen från toppen av sidan, inte möta ett nytt erbjudande —
   knappen leder tillbaka till exakt det formulär hon redan sett.
   Målet är #starta på .hero__panel, inte #quiz: quizlådan bär hidden
   tills skriptet kört, och ett ankare till ett dolt element hoppar
   ingenstans. Panelen rymmer både quizet och reservblocket, så länken
   landar rätt oavsett om JavaScript är på.

   Löftet står som variabel. Skriv aldrig om det i prosa bredvid
   {{promise.text}} — vakten OGRUNDAT_LOFTE i checks.mjs fäller det,
   och den finns för att det redan hänt en gång. */
.sida-start .cta {
  display: grid;
  justify-items: start;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin: clamp(3rem, 1rem + 4vw, 4.5rem) 0 0;
  padding: clamp(1.5rem, 0.75rem + 2.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: inset 0 3px 0 var(--ink), 0 1px 2px rgba(18, 32, 46, .05);
}
.sida-start .cta__rubrik {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.sida-start .cta__text { margin: 0; max-width: 46ch; color: var(--ink-muted); }
.sida-start .cta__knapp {
  padding: var(--space-4) var(--space-8);
  font-size: var(--size-md);
  transition: box-shadow .2s ease, translate .2s ease;
}
.sida-start .cta__knapp:hover {
  translate: 0 -1px;
  box-shadow: 0 12px 26px -14px rgba(14, 51, 80, .55);
}
/* Vågrätt så snart texten inte längre behöver hela bredden: orden vänster,
   knappen höger i samma optiska linje som pilen satt i förra blocket.
   Staplat under 46rem, där en knapp bredvid texten kapar båda. */
/* Knappen hoppar 4 845 px uppåt vid 1280. Utan övergång läser det som en
   sidladdning, inte som en förflyttning, och läsaren tappar var hon var.
   Återställningen på rad 212 sätter scroll-behavior: auto !important vid
   reducerad rörelse, så den här raden är redan avstängd där. */
.sida-start { scroll-behavior: smooth; }

@media (min-width: 46rem) {
  .sida-start .cta { grid-template-columns: 1fr auto; }
  .sida-start .cta__rubrik,
  .sida-start .cta__text { grid-column: 1; }
  .sida-start .cta__knapp { grid-column: 2; grid-row: 1 / 3; justify-self: end; }
}

/* ── Webbläsarens egna ytor ────────────────────────────────────────── */

/* Markering, karet och rullningslist ärvde annars operativsystemets
   färger, som inte hör till någon palett. Alla är hakade på .sida-start,
   så de tolv andra sidorna ser ut precis som förut. Rullningslistens
   tumme mot spåret är 4,54:1, över 3:1-kravet för en
   gränssnittskomponent; spåret mot --paper är 1,13:1 och alltså en ton,
   inte en gräns. */
.sida-start {
  accent-color: var(--accent);
  caret-color: var(--accent);
  scrollbar-color: var(--ink-faint) #E4EBF2;
  scrollbar-width: thin;
}
.sida-start ::selection { background: #D5E6F5; color: var(--ink); } /* --ink på #D5E6F5: 12,95:1 */
.sida-start .avsnitt--djup ::selection { background: #1E5580; color: var(--pa-djup); } /* vitt på #1E5580: 7,88:1 */

.sida-start a { transition: text-decoration-thickness .15s ease, text-underline-offset .15s ease; }
.sida-start a:hover { text-underline-offset: 3px; }

/* Dragspelets höjd animeras i ren CSS. interpolate-size sätts på
   .sida-start och inte på :root, så ingen annan sida får plötsligt
   animerbara nyckelordshöjder. Utan ::details-content öppnas det direkt,
   som förut. */
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .sida-start { interpolate-size: allow-keywords; }
    .sida-start .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .3s cubic-bezier(.22, .61, .36, 1), content-visibility .3s allow-discrete;
    }
    .sida-start .faq details[open]::details-content { block-size: auto; }
  }
}

/* ── Rörelse ───────────────────────────────────────────────────────── */

/* Den gamla regeln lade samma inglidning på varje .avsnitt > .container
   och på bandet. Fem identiska entréer är inte rytm, det är en tick. Här
   står tre olika rörelser med var sitt skäl, alla drivna av
   scrollpositionen och alla utan en byte JavaScript.

   Ingenting animeras i hjälten: det som redan syns vid laddning ska inte
   vara halvgenomskinligt, och view() ger precis det för element som
   ligger i synfältet när sidan laddas. Allt nedan ligger så långt ner att
   det aldrig är synligt vid laddning. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* 1. Bilderna avtäcks nerifrån i stället för att tona in. En bild som
          byggs upp läser som att den avtäcks, vilket är vad de här två
          bilderna gör: de visar insidan av ett rör. clip-path påverkar
          inte layouten, alltså noll bidrag till CLS. */
    .sida-start .figur img {
      animation: avtack cubic-bezier(.16, 1, .3, 1) both;
      animation-timeline: view();
      animation-range: entry 10% cover 24%;
    }
    @keyframes avtack {
      from { clip-path: inset(0 0 36% 0); opacity: .3; }
      to { clip-path: inset(0 0 0 0); opacity: 1; }
    }

    /* 2. Det gestaltade ögonblicket. Hängslet ritas ut och de två sidorna
          kommer i tur och ordning, vänster före höger, så att jämförelsen
          byggs framför läsaren i stället för att ligga färdig. Alla tre
          delar hänger på SAMMA tidslinje — .kontrast som namngiven
          view-timeline — så att fördröjningen mellan dem är koreografi
          och inte tre element som mäter sina egna olika höga lådor. */
    .sida-start .kontrast { view-timeline: --tes block; }

    .sida-start .kontrast__mot::before,
    .sida-start .kontrast__mot::after {
      animation: rita-lodrat cubic-bezier(.16, 1, .3, 1) both;
      animation-timeline: --tes;
      animation-range: entry 25% entry 95%;
    }
    @keyframes rita-lodrat { from { scale: 1 0; } to { scale: 1 1; } }

    .sida-start .kontrast__sida {
      animation: stig-in cubic-bezier(.16, 1, .3, 1) both;
      animation-timeline: --tes;
    }
    .sida-start .kontrast__sida:first-child { animation-range: entry 5% entry 65%; }
    .sida-start .kontrast__sida:last-child { animation-range: entry 25% entry 85%; }
    @keyframes stig-in {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: none; }
    }

    /* 3. Djup i helbreddsbandet: från en aning inzoomad till rätt läge
          medan bilden passerar. Långsam och liten, 6 %. */
    .sida-start .band img {
      animation: band-djup linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes band-djup { from { scale: 1.06; } to { scale: 1; } }
  }
}

/* ── Responsivt ────────────────────────────────────────────────────── */

/* Klibbandet stängs av under 1024 px. En klibbande bild i en enspaltig
   mobillayout är inte hjälp, den är ett element som vägrar rulla. */
@media (max-width: 1023px) {
  .sida-start .hero__rutnat { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .sida-start .hero__ord { padding-top: 0; }
  .sida-start .hero__lead { max-width: 46ch; }

  /* Panelen flyttas upp mellan rubriken och ingressen.

     Uppmatt vid 375x812 innan: quizet borjade pa y=531, forsta svarsknappen
     pa y=687 och tredje pa y=827 - alltsa under vikningen. Den tredje fanns
     inte ens i tillganglighetstradet. Sajtens enda konverteringspunkt lag
     utanfor forsta skarmen pa mobil.

     Efterat ligger rubriken forst, quizet direkt under, forsakran under det
     och ingressen sist. Ingressen ar stodtext: den overtygar den som redan
     laser, medan quizet ar det som ska ga att borja pa utan att skrolla.

     display: contents loser upp ordblocket sa att rubrik, ingress och
     forsakran blir syskon till panelen i samma rutnat och gar att ordna om.
     Blocket bar ingen bakgrund och ingen ram, bara en padding som anda inte
     galler pa den har bredden, sa det finns ingen lada att forlora. */
  .sida-start .hero__ord { display: contents; }
  .sida-start .hero__ord > h1 { order: 1; }
  .sida-start .hero__panel { order: 2; }
  .sida-start .hero__ord > p:not(.hero__lead) { order: 3; }
  .sida-start .hero__lead { order: 4; margin-top: 0; }

  /* Panelen tar hela spaltbredden när uppslaget kollapsar. Vid 768 px blev
     quizet 721 px brett, alltså svarsknappar på nästan sjuhundra pixlar som
     läser mer som fält än som val. Taket är satt över containerfrågans
     30rem-tröskel, så alternativraden beter sig likadant som förut. */
  .sida-start .hero__panel { max-inline-size: 34rem; inline-size: 100%; justify-self: center; }
  .sida-start .djup__utred { grid-template-columns: minmax(0, 1fr); }
  .sida-start .kontrast__slutsats { position: static; max-width: 40ch; }
  .sida-start .fraga-rutnat { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .sida-start .fraga-rutnat__rubrik { position: static; }
  .sida-start .figur { position: static; }
}

/* Hängslet blir en vågrät linje när talen ligger under varandra.
   justify-self: stretch är inte överflödigt: grundlagret sätter
   .kontrast__mot { justify-self: start } under 820 px, vilket krymper
   elementet till ordets bredd — då får de två linjerna noll utrymme och
   försvinner. Uppmätt: de var borta i mobilvyn tills raden fanns. */
@media (max-width: 820px) {
  .sida-start .split { grid-template-columns: minmax(0, 1fr); }
  .sida-start .kontrast { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .sida-start .kontrast__mot {
    grid-template-rows: none;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: stretch;
    justify-self: stretch;
    padding-top: 0;
    min-height: 0;
    text-align: center;
  }
  .sida-start .kontrast__mot::before,
  .sida-start .kontrast__mot::after { width: auto; height: 2px; transform-origin: left; }
  .sida-start .kontrast__mot::after { transform-origin: right; }
}
/* Eget keyframe-namn i stället för ett omdefinierat: @keyframes inne i en
   mediefråga är giltigt men skört, två namn går inte att läsa fel. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sida-start .kontrast__mot::before,
    .sida-start .kontrast__mot::after { animation-name: rita-vagrat; }
    @keyframes rita-vagrat { from { scale: 0 1; } to { scale: 1 1; } }
  }
}

@media (max-width: 560px) {
  .sida-start .faq details { padding: var(--space-2) var(--space-4); }
  .sida-start .nasta-steg__lank { font-size: var(--size-md); gap: var(--space-3); }
  .sida-start .avsnitt--djup .kalla { padding-left: var(--space-4); }
}