/* ============================================================================
   Kreddo, designsystem
   Nordiskt, dämpat, tillgängligt. Ljust och mörkt läge via [data-theme].
   ========================================================================== */

/* ------------------------------------------------------------------ TYPSNITT
   Typsnitten ligger pa var egen server. Tidigare hamtades de fran Google
   Fonts, vilket kostade tre saker:

   1. Juridiken. Bade fonts.googleapis.com och fonts.gstatic.com loggar
      besokarens IP-adress hos en tredje part utanfor vart personuppgifts-
      biltrade. Sajten ar en konsumentkreditjamforelse i EU och skriver
      sjalv i sidhuvudet att den inte samlar personuppgifter. Att bada
      pastaendena inte kan vara sanna samtidigt ar precis det LG Munchen I
      provade i mal 3 O 17493/20, och tredjeparts-Google-Fonts ar den
      mest processade kakfria GDPR-fragan i unionen. Bytet ar darfor inte
      en optimering utan en rattelse.

   2. Vikten. De tva woff2-filerna fran gstatic vagde 170 616 B, plus en
      renderingsblockerande stilmall fran googleapis. Det var mellan 56 och
      70 procent av forsta sidvisningens vikt pa samtliga 109 sidor.

   3. Layouthoppen. Hela sajtens uppmatta CLS kom harifran: 0,0437 pa
      jamforelsesidan, 0,0125 pa guiderna och 0,0031 pa startsidan gick
      alla till 0,0000 nar lankarna togs bort. layout-shift-API:et pekade
      ut textomflode i det ogonblick typsnittet kom fram.

   Filerna nedan ar samma variabla typsnitt som Google levererar, nerskurna
   med pyftsubset: samma teckenomfang som Googles egen latin-delmangd, sa
   ingenting som renderas i dag byter till ett systemtypsnitt, plus de
   latinska tillaggsbokstaver nordiska, baltiska och polska namn behover.
   Viktaxeln ar klippt till 400..700 eftersom sajten aldrig renderar utanfor
   det spannet, och Source Serif 4 behaller sin opsz-axel mellan 15 och 56
   eftersom rubrikerna gar fran 15,2 px till 54,4 px och font-optical-sizing
   ar pa som standard. Resultat: 99 972 B i stallet for 170 616 B.

   Viktdeklarationerna nedan speglar exakt de fyra respektive tre som Google
   levererade. Det ar med flit: en enda deklaration med intervallet 400 700
   hade latit font-weight: 650 rendera i aakta 650, medan CSS-viktmatchningen
   i dag valjer 700. Samma filer, samma rendering, bara fran var egen server.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/inter-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-serif-4-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/source-serif-4-400-700.woff2") format("woff2");
}

/* Reserven, matt mot det riktiga typsnittet.

   font-display: swap betyder att texten ritas med ett systemtypsnitt forst
   och byts nar filen kommit fram. Ar reserven bredare eller smalare an det
   riktiga typsnittet flyttar bytet texten, och da har vi bara flyttat
   layouthoppet fran Google till oss sjalva.

   Familjerna nedan ar samma systemtypsnitt som forut, men med metriken
   omskriven sa att raden tar lika stor plats fore som efter bytet. Talen ar
   uppmatta i Chromium mot sidans egen text pa jamfor-lan, inte hamtade ur en
   tabell.

   En reserv per vikt, inte en for alla. Det ar sjalva poangen: Arial saknar
   500 och 600, sa webblasaren tar Arial Regular for 500 och Arial Bold for
   600. Kvoten mot Inter blir da helt olika i olika vikter, fran 101,65 till
   106,95 procent, och ett enda size-adjust kan bara traffa en av dem. Med en
   deklaration per vikt traffar var och en sin egen.

     Inter 400 / Arial 400   = 105,916 %%
     Inter 500 / Arial 500   = 106,954 %%   (Arial har ingen 500)
     Inter 600 / Arial 600   = 101,650 %%   (faller pa Arial Bold)
     Inter 700 / Arial 700   = 102,626 %%
     Source Serif 4 400 / Georgia 400 =  90,487 %%
     Source Serif 4 600 / Georgia 600 =  79,869 %%
     Source Serif 4 700 / Georgia 700 =  81,590 %%

   Uppgang och nedgang delas med size-adjust, eftersom webblasaren raknar dem
   mot teckenstorleken innan skalningen slar till. Inter har uppgang 1984 och
   nedgang 494 pa 2048 enheter, Source Serif 4 har 1036 och 335 pa 1000.

   Ordningen i src spelar roll. Arial finns pa Windows och macOS, pekas om
   till Roboto av Androids fonts.xml och till Liberation Sans pa de flesta
   Linuxsystem, som alla ar metriskt narliggande. Georgia finns pa Windows och
   macOS och pekas om till Noto Serif pa Android. Saknas allihop laddas
   familjen aldrig, och stacken faller vidare till nasta namn utan
   overskrivningar, alltsa precis som fore den har andringen.

   Uppmatt effekt, med typsnitten konstgjort fordrojda 2500 ms sa att bytet
   garanterat sker efter forsta malningen: guidesidans CLS gick fran 0,0127
   till 0,0000. Utan de har deklarationerna ligger den kvar pa 0,0127. */
@font-face {
  font-family: "Inter Reserv"; font-weight: 400; font-style: normal;
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Liberation Sans");
  size-adjust: 105.92%;
  ascent-override: 91.46%;
  descent-override: 22.77%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Reserv"; font-weight: 500; font-style: normal;
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Liberation Sans");
  size-adjust: 106.95%;
  ascent-override: 90.58%;
  descent-override: 22.55%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Reserv"; font-weight: 600; font-style: normal;
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Liberation Sans");
  size-adjust: 101.65%;
  ascent-override: 95.30%;
  descent-override: 23.73%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Reserv"; font-weight: 700; font-style: normal;
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Liberation Sans");
  size-adjust: 102.63%;
  ascent-override: 94.40%;
  descent-override: 23.50%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif Reserv"; font-weight: 400; font-style: normal;
  src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("Liberation Serif");
  size-adjust: 90.49%;
  ascent-override: 114.49%;
  descent-override: 37.02%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif Reserv"; font-weight: 600; font-style: normal;
  src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("Liberation Serif");
  size-adjust: 79.87%;
  ascent-override: 129.71%;
  descent-override: 41.94%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif Reserv"; font-weight: 700; font-style: normal;
  src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("Liberation Serif");
  size-adjust: 81.59%;
  ascent-override: 126.98%;
  descent-override: 41.06%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------------ TOKENS */
:root {
  color-scheme: light;

  /* Ytor */
  --bg:            #FFFFFF;
  --bg-alt:        #FAFBFB;
  --surface:       #FFFFFF;
  --surface-2:     #F4F5F6;
  --surface-3:     #E8EAEC;

  /* Text */
  --ink:           #13161A;
  --ink-2:         #434A52;
  --ink-3:         #616970;
  --ink-inv:       #FFFFFF;

  /* Linjer */
  --line:          #E2E5E8;
  --line-2:        #C9CED4;

  /* Varumärke */
  --brand:         #14395E;
  --brand-600:     #0F2C49;
  --brand-700:     #0A2036;
  --brand-soft:    #EDF1F6;
  --brand-ring:    rgba(20,57,94,.26);

  /* Sekundär (nordisk djupgrön) */
  --deep:          #1D5E46;
  --deep-2:        #14432F;
  --deep-bg:       #14432F;
  --deep-soft:     #E9F2ED;

  /* Semantiskt */
  --ok:            #1D6B4F;
  --ok-soft:       #E9F2ED;
  --warn:          #7A5A12;
  --warn-soft:     #F5F1E6;
  --bad:           #9E2A24;
  --bad-soft:      #F7EBEA;
  --gold:          #7A5A12;

  /* Form */
  /* Två familjer med avsikt: data får en stram radie, interaktiva ytor en
     mjukare. Samma radie överallt gör att inget känns viktigare än något
     annat. */
  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(20,23,28,.05), 0 1px 3px rgba(20,23,28,.04);
  --sh-2: 0 2px 4px rgba(20,23,28,.05), 0 8px 20px rgba(20,23,28,.06);
  --sh-3: 0 10px 24px rgba(20,23,28,.08), 0 24px 56px rgba(20,23,28,.09);

  /* Himlen i hjalten. Egna variabler, sa att morkt lage kan byta hela
     stamningen utan att rora gradienten. */
  /* Scenen. Dagsljus: langt bort ar nastan dis, nara ar mattad klippa. */
  /* Hjaltens text ligger pa ett foto, sa den ar ljus i bada lagen. */
  --sh-focus: 0 0 0 3px var(--brand-ring);

  --ff: "Inter", "Inter Reserv", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ff-num: "Inter", "Inter Reserv", ui-sans-serif, system-ui, sans-serif;
  /* Rubrikerna sätts med serif. En jämförelse av kreditvillkor ska se ut som
     ett dokument man kan lita på, inte som en kampanj, och en serif gör mer
     för det intrycket än någon färg kan. Georgia som reserv, den finns på i
     stort sett varje maskin och har samma allvar. */
  --ff-head: "Source Serif 4", "Source Serif Reserv", Georgia, "Times New Roman", serif;

  /* Innehallets bredd. Vaxer i steg: 1220 px racker for lasbar text, men
     jamforelsetabellen har atta kolumner och tjanar pa mer plats pa en stor
     skarm. Over 1800 px slutar den vaxa, langre radlangder blir svarlasta. */
  --wrap: 1220px;
  --gut: clamp(16px, 4vw, 40px);
  --step: clamp(56px, 8vw, 104px);
  --nav-h: 68px;
}

[data-theme="dark"] {
  /* Natthimmel. Samma gradient, andra toner, hjalten byter stamning utan att
     en enda regel i .hero--sky behover roras. */

  color-scheme: dark;
  --bg:        #0D0F11;
  --bg-alt:    #111417;
  --surface:   #15181B;
  --surface-2: #1C2024;
  --surface-3: #252A2F;
  --ink:       #ECEEF0;
  --ink-2:     #B6BCC3;
  --ink-3:     #8A9199;
  --line:      #282D33;
  --line-2:    #3A4149;
  --brand:     #8FB6DA;
  --brand-600: #A8C7E4;
  --brand-700: #C2D8EC;
  --brand-soft:#131C25;
  --brand-ring: rgba(143,182,218,.30);
  --deep:      #77BE9C;
  --deep-2:    #9BD2B7;
  --deep-bg:   #102A1F;
  --deep-soft: #122019;
  --ok:        #77BE9C; --ok-soft:  #122019;
  --warn:      #D2B270; --warn-soft:#221D12;
  --bad:       #E08C86; --bad-soft: #241514;
  --gold:      #D2B270;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.34);
  --sh-3: 0 12px 30px rgba(0,0,0,.5), 0 30px 64px rgba(0,0,0,.4);
}

/* ------------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0; font-family: var(--ff); background: var(--bg); color: var(--ink);
  font-size: 16.5px; line-height: 1.65; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-600); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* Displaystorlekarna får mer kontrast mot brödtexten och stramare knipning.
   En rubrik i 3,5 rem med -.032em läser som en mall; 4,4 rem med -.045em och
   tätare radavstånd läser som en tidning. */
h1,h2,h3,h4 { line-height: 1.15; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.95rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -.038em;
     font-weight: 800; text-wrap: balance; }
@media (min-width: 941px) { .hero h1 { max-width: 15ch; } }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.034em; line-height: 1.08; }
h3 { font-size: clamp(1.12rem, 1.8vw, 1.3rem); letter-spacing: -.02em; }
/* Ingressen ska bära vikt, inte bara vara mindre än rubriken. */
.lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.6; color: var(--ink-2);
        text-wrap: pretty;
        max-width: 54ch; }
p  { margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
@media (min-width: 1440px) { :root { --wrap: 1320px; } }
@media (min-width: 1800px) { :root { --wrap: 1440px; } }
/* Den smala spalten ska ha SAMMA vänsterkant som allt annat på sidan, inte
   centreras för sig.

   .wrap centrerar sig med margin-inline:auto. Sätter man bara max-width på
   den centrerades den 74ch breda spalten mitt i fönstret, 275 px till
   höger om rubriken ovanför. På metodsidan innebar det att h1 stod i en
   spalt och brödtexten som hörde till den i en annan; på undersidorna
   flöt "Se även" ensam ut mot mitten under ett vänsterställt innehåll.

   Vänstermarginalen räknas därför fram till exakt det en full .wrap får:
   halva överskottet, eller rännan när fönstret är smalare än --wrap. Höger
   marginal är auto, så spalten behåller sitt läsmått i stället för att
   sträckas ut. */
/* Den smala spalten centreras i fönstret. Ett tag låg den vid
   vänstermarginalen, vilket löste ett problem på undersidorna men skapade
   ett värre: rubriken stod i en spalt och texten under den i en annan.
   Centrerad överallt är det som håller ihop, sidan blir ett dokument,
   inte ett innehåll med en lös spalt bredvid. */
.narrow { max-width: 74ch; }
.wrap.narrow { margin-inline: auto; }


/* Listan bar tidigare .hchips, hjältens chipsrad, som är centrerad. Under
   en vänsterställd rubrik gav det trasiga, mittställda rader. Länkarna
   delar nu rubrikens kant. */
.seealso { display: flex; flex-wrap: wrap; gap: 10px 14px;
           list-style: none; padding: 0; margin: 0; }
.seealso a { display: inline-block; }

.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:12px; top:-60px; z-index:200; background:var(--brand); color:var(--bg); padding:10px 18px; border-radius:var(--r-sm); font-weight:600;
        transition:top .18s; }
.skip:focus { top:12px; }

/* Beskedet till besökare utan JavaScript, som annars möter tomma listor. */
.noscript { max-width: 760px; margin: 18px auto; padding: 16px 20px;
            border: 1px solid var(--warn, #C98A12); border-left-width: 4px;
            border-radius: var(--r-sm); background: var(--surface);
            color: var(--ink-2); font-size: .92rem; line-height: 1.6; }
.noscript b { color: var(--ink); display: block; margin-bottom: 4px; }
.noscript a { color: var(--brand-700); }

h1, h2, h3, .hero__panel-h { font-family: var(--ff-head); font-weight: 600;
                             letter-spacing: -.008em; }
h1 { font-weight: 700; }
/* Små etiketter i gränssnittet står kvar i Inter. En serif i 13 px versaler
   blir grötig, inte värdig. */
h4, h5, h6, .sec__kicker, .kpi__k, .num__k, thead th { font-family: var(--ff); }

/* ------------------------------------------------------------------- IKONER */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em;
      fill: none; stroke: currentColor; stroke-width: 1.85;
      stroke-linecap: round; stroke-linejoin: round; }
.ic--fill { fill: currentColor; stroke: none; }














/* ------------------------------------------------------------------ HEADER */
.hdr { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
       backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; gap: 18px; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.06rem;
         letter-spacing: -.03em; color: var(--ink); text-decoration: none; flex: none; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft);
               display: grid; place-items: center; overflow: hidden; flex: none;
               border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.brand__mark svg { width: 24px; height: 24px; color: var(--brand); }
/* Ordbilden. Tyngre och tatare an brodtexten, ett namn ar inte en mening.
   Sista o:et bar varumarkesfargen; det ar hela accenten. */
.brand__nm { font-weight: 900; letter-spacing: -.04em; }
.brand__nm i { font-style: normal; color: var(--brand); }
.brand__sub { display: block; font-size: .66rem; font-weight: 600; color: var(--ink-3);
              letter-spacing: .08em; text-transform: uppercase; margin-top: -3px; }

.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: 8px 12px; border-radius: var(--r-sm); font-size: .92rem; font-weight: 550;
         color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"], .nav a.is-active { color: var(--brand-700); background: var(--brand-soft); }
@media (max-width: 1100px) { .nav { display: none; } }
/* --------------------------------------------------------- HUVUDETS BREDD
   Engelska etiketter är längre än de svenska och språkväljaren tar 80 px.
   Menyn stramas åt i två steg innan lådan tar över, så att raden aldrig
   spränger sidbredden. */
@media (max-width: 1330px) {
  .nav a { padding: 8px 9px; font-size: .88rem; }
  .hdr__in { gap: 12px; }
}
@media (max-width: 1330px) { .hdr__act .btn--primary { display: none; } }


.hdr__act { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
@media (min-width: 1101px) { .hdr__act { margin-left: 10px; } }
/* På smala skärmar får varumärket krympa, och den handlingsknapp som ändå
   upprepas i lådan och i hjälten tas bort, annars sticker huvudet utanför
   sidbredden vid 375 px. */
@media (max-width: 560px) {
  .hdr__in { gap: 10px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand > span:not(.brand__mark) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hdr__act .btn--primary { display: none; }
  /* Underrubriken göms på liten skärm. Den klipptes mitt i ett ord, 
     "JÄMFÖR LÅN I SVI", och gick under språkflaggorna. Ellipsen på
     .brand__nm kunde inte rädda den: underrubriken är ett block INUTI den
     nowrap-satta spannen, och text-overflow gäller spannets egen inline-text,
     inte ett block-barn. Den klipptes alltså hårt, utan ens tre punkter.

     Att gömma den kostar ingenting: exakt samma ord står som kicker i
     hjälten en centimeter längre ned. */
  .brand__sub { display: none; }
}

.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm);
           border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
           cursor: pointer; transition: .15s; }
.iconbtn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
/* ------------------------------------------------------------ SPRAKVALJARE
   Tva flaggknappar i huvudet. Den aktiva ar markerad med aria-current och
   ar inte klickbar, den ar ett tillstand, inte en lank. */
.langsw { display: flex; align-items: center; gap: 4px; padding: 3px;
          border: 1px solid var(--line); border-radius: var(--r-pill);
          background: var(--surface); flex: none; }
.langsw a, .langsw span { display: grid; place-items: center; width: 34px; height: 26px;
          border-radius: var(--r-pill); text-decoration: none; transition: .15s; }
.langsw a:hover { background: var(--surface-2); }
.langsw [aria-current="true"] { background: var(--brand-soft);
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 32%, transparent); }
.langsw .flag { width: 20px; height: 14px; display: block;
          border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
/* .ic tvingar fill:none pa ikoner, flaggorna maste aterstalla det. */
.flag { fill: initial; stroke: none; }
@media (max-width: 380px) { .langsw a, .langsw span { width: 28px; } }

.navtoggle { display: none; }
@media (max-width: 1100px) { .navtoggle { display: grid; } }

.drawer { position: fixed; inset: var(--nav-h) 0 0; z-index: 89; background: var(--bg-alt);
          border-top: 1px solid var(--line); padding: 18px var(--gut) 40px; overflow-y: auto; }
.drawer a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--line);
            font-weight: 600; color: var(--ink); text-decoration: none; }

/* --------------------------------------------------------------- KNAPPAR */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid transparent;
       font-weight: 650; font-size: .95rem; cursor: pointer; text-decoration: none;
       transition: transform .12s, box-shadow .18s, background .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 16px var(--brand-ring); }
.btn--primary:hover { background: var(--brand-600); color: var(--bg); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--deep { background: var(--deep); color: var(--bg-alt); }
.btn--deep:hover { filter: brightness(1.08); color: var(--bg-alt); }
.btn--sm { padding: 8px 14px; font-size: .85rem; }

/* Reklammärkningen under varje utlänk. MFL 9 §: det ska framgå att det är
   reklam och vem som får betalt, i samma vy som knappen, inte i sidfoten.
   Liten men inte svag: --ink-2 håller 4,5:1, och den står centrerad direkt
   under knappen så att den läses som knappens bildtext, inte som brus. */
.ad { display: block; text-align: center; font-size: .74rem; line-height: 1.3;
      color: var(--ink-2); margin-top: 6px; letter-spacing: .01em; }
td .ad { margin-top: 4px; white-space: nowrap; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------- BADGES */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
       border-radius: var(--r-pill); font-size: .74rem; font-weight: 650; letter-spacing: .01em;
       background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.tag--brand { background: var(--brand-soft); color: var(--brand-700); border-color: color-mix(in srgb, var(--brand) 26%, transparent); }
.tag--ok    { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.tag--warn  { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.tag--bad   { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.tag--deep  { background: var(--deep-soft); color: var(--deep); border-color: color-mix(in srgb, var(--deep) 26%, transparent); }

/* ------------------------------------------------------------------- HERO */
/* ================================================================== HJÄLTEN
   Centrerad kolumn mot en himmel som är ren CSS, ingen bildfil, och därför
   ingen kB och ingen genererad bild. Gradienten går från djup himmel upp till
   varmt ljus vid horisonten, och vänder till natt i mörkt läge.

   Sökrutan är sidans första handling. Två knappar tvingar ett val innan
   läsaren vet vad hen letar efter; ett sökfält gör inte det. */
/* Dolt för ögat, uppläst av skärmläsare. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Hjälten är typografisk: ingen bild, ingen film, ingen överlagring. Det är
   avsikten, sidan ska kännas som ett uppslag i en årsredovisning. */
/* Hjältens egen luft upptill står som variabel därför att den behövs på två
   ställen: här, och i regeln som lägger huvudet på bilden, där den ska
   ADDERAS till navhöjden, inte ersätta den. Skrivs talet två gånger glider
   de isär, och det gjorde de: när huvudet blev genomskinligt ersatte
   navhöjden den här fyllnaden, och rubriken hamnade nio pixlar under
   menyn. */
:root { --hero-pad: clamp(40px, 7vw, 96px); }
.hero { position: relative; overflow: hidden;
        padding: var(--hero-pad) 0 0; }
/* Banden går olika långt och åt olika håll. Långsamt, moln som rusar ser ut
   som en skärmsläckare. */

@keyframes clDrift2 { from { transform: translate3d(300px,0,0); }
                      to   { transform: translate3d(-300px,0,0); } }
@keyframes clDrift3 { from { transform: translate3d(-260px,0,0); }
                      to   { transform: translate3d(260px,0,0); } }

.hero__center { max-width: 46rem; margin: 0 auto; text-align: center; }

/* Kickern: versalgemener med luft och ett streck på var sida, som referensen. */
.kicker { display: inline-flex; align-items: center; gap: 14px;
          font-size: .74rem; font-weight: 650; letter-spacing: .18em;
          text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.kicker::before, .kicker::after {
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .5; }

.hero__center h1 { color: var(--ink); margin-bottom: .34em; max-width: none; }
.hero__center .lead { color: var(--ink-2); margin-inline: auto; max-width: 44ch; }

/* ------------------------------------------------------------------ SÖKRUTAN */
.hfind { position: relative; display: flex; align-items: center;
         margin: 30px auto 16px; max-width: 40rem;
         background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-pill); box-shadow: var(--sh-3);
         padding: 7px 7px 7px 18px; }
.hfind:focus-within { border-color: var(--brand);
                      box-shadow: var(--sh-3), 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.hfind__ic { color: var(--ink-3); flex: none; }
.hfind__in { flex: 1; min-width: 0; border: 0; background: none; outline: none;
             font: inherit; font-size: 1rem; color: var(--ink); padding: 10px 12px; }
.hfind__in::placeholder { color: var(--ink-3); }
.hfind__in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hfind__go { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0;
             background: var(--deep); color: var(--bg); display: grid; place-items: center;
             cursor: pointer; transition: background .15s, transform .15s; }
.hfind__go:hover { background: var(--deep-700, var(--deep)); transform: scale(1.05); }
.hfind__go:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Träfflistan. Ligger ovanpå kortet under, därav z-index. */
.hfind__list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
               margin: 0; padding: 6px; list-style: none; text-align: left;
               background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--r-lg); box-shadow: var(--sh-3);
               max-height: 340px; overflow-y: auto; }
.hfind__opt { display: flex; align-items: center; gap: 10px; width: 100%;
              padding: 9px 12px; border: 0; background: none; border-radius: var(--r-sm);
              font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.hfind__opt:hover, .hfind__opt[aria-selected="true"] { background: var(--surface-2); }
.hfind__opt b { font-weight: 650; }
.hfind__kind { margin-left: auto; font-size: .72rem; color: var(--ink-3);
               text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.hfind__none { padding: 12px; color: var(--ink-3); font-size: .9rem; }

/* -------------------------------------------------------------------- CHIPS */
/* Hjaltens snabbval. Egna namn, .chip agdes redan av produktfiltret. */
.hchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
.hchip { font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
         padding: 7px 15px; border-radius: var(--r-pill);
         border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
         background: color-mix(in srgb, var(--surface) 55%, transparent);
         color: var(--ink); transition: background .15s, border-color .15s; }
.hchip:hover { background: var(--surface); border-color: var(--ink); }
.hchip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Hjaltens formular. Tre falt och en knapp pa en rad, staplade pa telefon.
   Det ar sidans viktigaste kontroll och far darfor se ut som en: tydlig ram,
   riktiga etiketter ovanfor falten, ingen platshallartext som forsvinner nar
   man borjar skriva. */
.hform { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 12px;
         align-items: end; max-width: 780px; margin: 26px auto 0;
         background: var(--surface); border: 1px solid var(--line-2);
         border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh-2);
         text-align: left; }
.hform__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hform__f > label { font-size: .78rem; font-weight: 650; color: var(--ink-2);
                    letter-spacing: .01em; }
.hform__in { position: relative; display: flex; align-items: center; }
.hform__in input, .hform__in select {
  width: 100%; min-width: 0; font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 11px 12px; appearance: none; }
.hform__in select { padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.hform__in input:focus-visible, .hform__in select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.hform__suf { position: absolute; right: 12px; font-size: .9rem; color: var(--ink-3);
              pointer-events: none; font-weight: 600; }
.hform__in:has(.hform__suf) input { padding-right: 34px; }
.hform__go { height: 44px; padding-inline: 22px; white-space: nowrap; }
@media (max-width: 720px) {
  .hform { grid-template-columns: 1fr 1fr; }
  .hform__f:first-child { grid-column: 1 / -1; }
  .hform__go { grid-column: 1 / -1; }
}

/* Raden låg dikt an mot formulärkortet, noll avstånd, och när de tre
   löftena bröt till två rader satt de dessutom tätt ihop inbördes. Det såg
   ut som spill under kortet i stället för tre påståenden som hör ihop.
   Marginalen uppåt skiljer dem från kortet, radavståndet skiljer dem från
   varandra, och samma maxbredd som formuläret gör att de bryter i takt med
   det i stället för på egen hand. */
/* Löftena bröt 2 + 1, med det tredje ensamt och centrerat under de två
   andra. Orsaken var inte marginalen utan bredden: .hero__center håller
   736 px, och de tre påståendena behöver 741 på svenska, fem pixlar för
   lite. På danska, norska och finska är texterna längre än så och behövde
   806–875, alltså långt över. Raden bröt på varje språk.

   Att bredda .hero__center vore fel: den håller rubriken, ingressen och
   formuläret, och hela hjältens komposition hänger på det måttet. I
   stället bryter bara den här raden ut ur spalten och tar exakt den bredd
   dess text kräver, width: max-content, centrerad kring samma mittlinje.
   Svenskan blir 741 px bred, finskan 875, och ingen tar mer plats än den
   behöver.

   Taket hindrar den från att växa förbi rännan på små skärmar; där bryter
   den till flera rader, vilket är rätt när alternativet är att spilla ut
   över kanten. */
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .87rem;
               color: var(--ink-2); justify-content: center;
               position: relative; left: 50%; transform: translateX(-50%);
               width: max-content;
               max-width: min(1080px, calc(100vw - var(--gut) * 2));
               margin: 16px 0 0; }

/* --------------------------------------------------------- ÖVERLAPPANDE KORT
   Kortet skjuter upp i himlen och binder ihop hjälten med sidan under. */
.hero__card { position: relative; margin: clamp(34px, 5vw, 56px) auto 0;
              max-width: 42rem; background: var(--surface);
              border: 1px solid var(--line); border-radius: var(--r-lg);
              padding: 20px; box-shadow: var(--sh-3); }

.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust .ic { color: var(--ok); }

.hero__art { position: relative; display: grid; place-items: center; }
.hero__chip { position: absolute; background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--sh-2); font-size: .82rem; }
.hero__chip b { display: block; font-size: 1.06rem; letter-spacing: -.02em; }
.hero__chip--a { top: 1%;    left: -5%;  animation: chipA 5.4s ease-in-out infinite; }
.hero__chip--b { bottom: 2%; right: -5%; animation: chipB 6.2s ease-in-out infinite; }
@keyframes chipA { 0%,100% { transform: translateY(0)     rotate(-1.5deg); }
                   50%     { transform: translateY(-8px)  rotate(1deg); } }
@keyframes chipB { 0%,100% { transform: translateY(0)     rotate(1.5deg); }
                   50%     { transform: translateY(-10px) rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) { .hero__chip { animation: none; } }
@media (max-width: 940px) { .hero__chip { display: none; } }

/* --------------------------------------------------------------- RÄNTELÄGE */
.ticker { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg);
          padding: 4px; box-shadow: var(--sh-1); margin-top: clamp(20px, 3vw, 34px); }
.ticker__in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ticker__i { padding: 14px 18px; border-right: 1px solid var(--line); }
.ticker__i:last-child { border-right: 0; }
.ticker__k { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
             color: var(--ink-3); font-weight: 650; }
.ticker__v { display: block; font-size: 1.28rem; font-weight: 750; letter-spacing: -.03em;
             font-variant-numeric: tabular-nums; line-height: 1.3; }
.ticker__n { display: block; font-size: .76rem; color: var(--ink-3); line-height: 1.35; }
@media (max-width: 860px) { .ticker__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticker__i { border-bottom: 1px solid var(--line); }
  .ticker__i:nth-child(2n) { border-right: 0; }
  .ticker__i:last-child { grid-column: span 2; border-bottom: 0; } }

/* --------------------------------------------------------------- SEKTIONER */
.sec { padding: var(--step) 0; }
/* "Se även" är en liten navigationsfot, inte ett eget kapitel. Med .sec
   fick den 104 px luft över och under, vilket lämnade ett tomt fält lika
   högt som ett kort mellan innehållet och länkarna. */
.sec--seealso { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(32px, 4vw, 56px); }

.sec--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.sec--deep { background: var(--deep-bg); color: #E9F1EE; border-block: 1px solid var(--deep-bg); }
.sec--deep h2, .sec--deep h3 { color: #fff; }
.sec--deep .sec__lead { color: #B9CFC9; }

.sec__head { max-width: 68ch; margin-bottom: clamp(26px, 4vw, 44px); }
.sec__head--center { margin-inline: auto; text-align: center; }
.sec__lead { color: var(--ink-2); font-size: 1.03rem; }
.sec__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700;
               letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
/* Pa de morkgrona avsnitten ar varumarkesfargen, marinbla, osynlig.
   Overskrivningen star efter basregeln, inte fore. */
.sec--deep .sec__kicker { color: #9FD4BE; }

.headrow { display: flex; align-items: flex-end; gap: 22px; margin-bottom: clamp(26px, 4vw, 40px); }
.headrow__art { width: clamp(88px, 12vw, 132px); flex: none; }
.headrow__txt { flex: 1; min-width: 0; }
.headrow__txt > :last-child { margin-bottom: 0; }
@media (max-width: 620px) { .headrow { flex-direction: column; align-items: flex-start; gap: 12px; }
  .headrow__art { width: 92px; } }



/* ------------------------------------------------------------- GUIDEBILD
   Illustrationen ligger i guidens huvud i stället för maskoten. Den har
   ljus botten i motivet, så den får en egen ram i mörkt läge i stället för
   att flyta ut i sidan. width/height står i HTML så att raden inte hoppar
   medan bilden laddas. */
/* Illustrationen är liggande 3:2, inte en liten kvadratisk maskot, den får
   därför en egen bredd i stället för .headrow__art:s smala kolumn, och
   flyttas ovanför texten så att den får plats. */
.headrow--art { flex-direction: column; align-items: stretch; gap: 20px; }
.guide-art { width: 100%; max-width: 720px; border-radius: var(--r-lg);
             overflow: hidden; background: var(--surface-2); }
.guide-art img { display: block; width: 100%; height: auto; }
[data-theme="dark"] .guide-art { box-shadow: 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide-art { box-shadow: 0 0 0 1px var(--line); }
}

/* ================================================================== HJÄLTEN
   Panelen visar de tre billigaste lånen vid standardkalkylen, riktiga
   logotyper, riktiga räntor, samma modell som listan längre ned. Produkten
   själv gör mer nytta i hjälten än en bild av den. */
.hero__panel { background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-2);
               align-self: start; }
.hero__panel-h { display: flex; align-items: baseline; justify-content: space-between;
                 gap: 12px; margin-bottom: 14px; }
.hero__panel-h h2 { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.hero__panel-note { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
                    white-space: nowrap; }

.peek { list-style: none; margin: 0; padding: 0; }
.peek__row { display: grid; grid-template-columns: auto 34px minmax(0, 1fr) auto; align-items: center;
             gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.peek__row:first-child { border-top: 0; padding-top: 4px; }
.peek__rank { font-size: .78rem; font-weight: 700; color: var(--ink-3);
              font-variant-numeric: tabular-nums; width: 1ch; }
.peek__mark { width: 34px; height: 34px; border-radius: var(--r-sm); flex: none;
              display: grid; place-items: center; color: #fff; font-size: .72rem;
              font-weight: 800; letter-spacing: -.02em; overflow: hidden; }
.peek__name { font-weight: 650; font-size: .95rem; line-height: 1.25; min-width: 0; }
.peek__rate { font-weight: 800; font-size: 1.16rem; letter-spacing: -.03em; text-align: right;
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.peek__sub { display: block; font-weight: 500; font-size: .72rem; color: var(--ink-3);
             letter-spacing: 0; }
/* Minst 24 px hog. WCAG 2.2 satter 24×24 som minsta traffyta (2.5.8), och
   den har lag pa 23, en pixel under, alltsa formellt underkand och i
   praktiken svar att traffa med tummen. */
.peek__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
             min-height: 24px; padding: 2px 0;
             font-size: .88rem; font-weight: 650; text-decoration: none; }

/* "Villkor och omdome" fallde ut kortets detaljer men var bara 22 px hog, 
   ocksa under 2.5.8. Den ar en knapp mitt bland fakta och far darfor sin
   yta genom fyllnad, inte genom storre text. */
.js-det { min-height: 24px; padding: 3px 2px; }

@media (max-width: 940px) { .hero__panel { margin-top: 26px; } }
@media (max-width: 420px) {
  .hero__panel-h { flex-direction: column; align-items: flex-start; gap: 2px; }
}



/* ============================================================ LOGOTYPBANDET
   Tva rader som gar at var sitt hall. Ett band ser ut som en dekoration; tva
   som ror sig mot varandra ser ut som nagot man byggt med avsikt.

   Sa har blir varvet somlost, och det ar latt att rakna fel:
   spaaret innehaller listan exakt tva ganger och forskjuts -50 %. Mellanrummet
   maste da ligga som margin PA korten, inte som gap pa spaaret, med gap blir
   halva sparbredden inte en hel omgang, och bandet hoppar det avstandet vid
   varje varv. */
.strip { padding: clamp(30px, 4.5vw, 56px) 0 clamp(26px, 4vw, 44px);
         background: var(--bg-alt); border-block: 1px solid var(--line);
         overflow: hidden; }

/* Siffrorna. Riktiga varden, hamtade ur datan av app.js. */
.stats { list-style: none; margin: 0 0 clamp(26px, 4vw, 40px); padding: 0;
         display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
         gap: 18px; text-align: center; }
.stats li { position: relative; }
.stats li + li::before { content: ""; position: absolute; left: 0; top: 12%;
                         height: 76%; width: 1px; background: var(--line); }
.stats b { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
           letter-spacing: -.035em; color: var(--deep);
           font-variant-numeric: tabular-nums; line-height: 1.1; }
.stats span { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 620px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .stats li:nth-child(3)::before { display: none; } }

.strip__h { text-align: center; font-size: .74rem; font-weight: 650;
            letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
            margin: 0 0 18px; }

/* Kanterna tonar ut, sa att korten inte klipps tvart av. */
.mq { position: relative;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq__row { overflow: hidden; }
.mq__row + .mq__row { margin-top: 12px; }
.mq__track { display: flex; width: max-content; }
.mq__row--a .mq__track { animation: mqA var(--mq-dur, 70s) linear infinite; }
.mq__row--b .mq__track { animation: mqB var(--mq-dur, 90s) linear infinite; }
@keyframes mqA { from { transform: translate3d(0,0,0); }      to { transform: translate3d(-50%,0,0); } }
@keyframes mqB { from { transform: translate3d(-50%,0,0); }   to { transform: translate3d(0,0,0); } }

/* Pekar man pa bandet stannar det, annars gar det inte att lasa ett namn. */
.mq:hover .mq__track, .mq:focus-within .mq__track { animation-play-state: paused; }
/* Utanfor rutan star det stilla. Ett band som rullar i en flik ingen tittar pa
   ar ren batteritid. */
.mq--rest .mq__track { animation-play-state: paused; }

.mqi { display: flex; align-items: center; gap: 10px; flex: none;
       margin-right: 12px; padding: 10px 16px 10px 11px;
       border-radius: var(--r-md); border: 1px solid var(--line);
       background: var(--surface); box-shadow: var(--sh-1);
       text-decoration: none; color: var(--ink); }
.mqi__mark { width: 32px; height: 32px; border-radius: var(--r-sm); flex: none;
             display: grid; place-items: center; color: #fff; font-size: .72rem;
             font-weight: 800; letter-spacing: -.02em; overflow: hidden; }
.mqi__mark--img { background: #fff; border: 1px solid var(--line); padding: 4px; }
.mqi__mark--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
[data-theme="dark"] .mqi__mark--img { background: #fff; border-color: transparent; }
.mqi__n { font-weight: 650; font-size: .9rem; white-space: nowrap; }

.strip__note { text-align: center; max-width: 62ch; margin: clamp(20px, 3vw, 30px) auto 0;
               font-size: .82rem; color: var(--ink-3); }

/* Ett band med tva kort ar inget band. Den finska marknaden har tva
   langivare; spaaret blev da smalare an rutan, och -50 %-forskjutningen drog
   de tva korten till vanstermarginalen med tom yta over halva sidan.

   Kort lista far darfor samma stillastaende, centrerade och radbrutna lage
   som redan finns for lasare som valt bort rorelse. Det ar inte en
   nodlosning, tva logotyper som star still ser avsiktliga ut, tva som
   rullar ser trasiga ut. */
.mq--few { -webkit-mask-image: none; mask-image: none; }
.mq--few .mq__row { overflow: visible; }
.mq--few .mq__track { animation: none; width: auto; flex-wrap: wrap;
                      justify-content: center; padding-inline: var(--gut); }
.mq--few .mqi { margin-bottom: 10px; }
.mq--few .mq__track [data-dup] { display: none; }

/* Rullande text gor vissa lasare asksjuka. Vid reduced motion star bandet
   stilla och blir en vanlig radbruten lista. */
@media (prefers-reduced-motion: reduce) {
  .mq { -webkit-mask-image: none; mask-image: none; }
  .mq__row { overflow: visible; }
  .mq__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center;
               padding-inline: var(--gut); }
  .mqi { margin-bottom: 10px; }
  .mq__track [data-dup] { display: none; }
}

/* ============================================================ LÅNGIVARRUTNÄT
   Statiskt rutnät i stället för ett rullande band: gar att lasa, gar att klicka
   och star still. Brickorna filtrerar jamforelsen. */
.lgrid { padding: clamp(34px, 5vw, 60px) 0 0; }
.lgrid__head { text-align: center; max-width: 56ch; margin: 0 auto 26px; }
.lgrid__h { font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -.03em; margin: 0 0 8px; }
.lgrid__lead { color: var(--ink-2); font-size: .96rem; margin: 0; }

.lgrid__tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .lgrid__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .lgrid__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .lgrid__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ltile { display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: 9px; padding: 18px 10px 15px; border: 1px solid var(--line);
         border-radius: var(--r-md); background: var(--surface); text-decoration: none;
         color: var(--ink); text-align: center; cursor: pointer;
         transition: border-color .15s, box-shadow .15s, transform .15s; }
.ltile:hover, .ltile:focus-visible { border-color: var(--line-2); box-shadow: var(--sh-2);
                                     transform: translateY(-2px); color: var(--ink); }
.ltile[aria-pressed="true"] { border-color: var(--brand);
                              box-shadow: 0 0 0 1px var(--brand) inset; }
.ltile__mark { width: 40px; height: 40px; border-radius: var(--r-sm); flex: none;
               display: grid; place-items: center; color: #fff; font-size: .8rem;
               font-weight: 800; letter-spacing: -.02em; overflow: hidden; }
.ltile__n { font-size: .82rem; font-weight: 650; line-height: 1.2; }
.ltile__t { font-size: .7rem; color: var(--ink-3); }

.lgrid__foot { display: flex; justify-content: center; margin-top: 22px; }

@media (prefers-reduced-motion: reduce) { .ltile { transition: none; } }

/* -------------------------------------------------------------- SVARSRUTA */
.answer { border-left: 4px solid var(--brand); background: var(--brand-soft);
          padding: 18px 22px; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 0 0 26px; }
.answer__k { font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
             color: var(--brand-700); display: block; margin-bottom: 6px; }
.answer p { margin: 0; color: var(--ink); font-size: 1.02rem; }
.answer p + p { margin-top: .7em; }

/* ---------------------------------------------------------------- KATEGORI */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .cats { grid-template-columns: minmax(0, 1fr); } }
.cat { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--r-lg);
       background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink);
       transition: transform .16s, box-shadow .18s, border-color .16s; }
.cat:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); color: var(--ink); }
.cat__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
           background: var(--brand-soft); color: var(--brand-700); }
.cat__ic .ic { width: 22px; height: 22px; }
.cat b { font-size: 1.03rem; letter-spacing: -.02em; }
.cat span { font-size: .87rem; color: var(--ink-3); line-height: 1.5; }
.cat__go { margin-top: auto; padding-top: 8px; font-size: .84rem; font-weight: 650; color: var(--brand-700);
           display: inline-flex; align-items: center; gap: 5px; }
.cat:hover .cat__go .ic { transform: translateX(3px); }
.cat__go .ic { width: 15px; height: 15px; transition: transform .16s; }

/* ============================== JÄMFÖRELSE ================================ */
.compare { display: grid; grid-template-columns: 306px minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 1040px) { .compare { grid-template-columns: minmax(0, 1fr); } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
         box-shadow: var(--sh-1); }
.panel__h { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex;
            align-items: center; gap: 9px; font-weight: 700; font-size: .96rem; }
.panel__b { padding: 20px; }

/* Filterpanelen fastnar bara i tvåspaltsläget, och bara om den får plats.

   Den var sticky utan takhöjd. Panelen är omkring 1 000 px hög och fönstret
   ofta 820, och ett sticky-element som är högre än fönstret kan inte
   fastna: det följer med sidan tills dess NEDERKANT når fönstrets nederkant,
   vilket i praktiken betyder att det rullar bort. Sökfältet längst ned gick
   aldrig att nå utan att rulla tillbaka.

   Med ett tak som är fönstret minus huvudet får panelen rulla invändigt i
   stället, och då fastnar den som avsett. overscroll-behavior hindrar att
   rullningen fortsätter ut i sidan när man når panelens slut.

   Under 1040 px är layouten enspaltig och panelen ligger i flödet ovanför
   träffarna; där ska den inte fastna alls. */
@media (min-width: 1041px) {
  .filters {
    position: sticky;
    top: calc(var(--nav-h) + 16px);
    max-height: calc(100vh - var(--nav-h) - 32px);
    max-height: calc(100dvh - var(--nav-h) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 1040px) { .filters { position: static; } }

.fgroup { margin-bottom: 22px; }
.fgroup:last-child { margin-bottom: 0; }
.flabel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
          font-size: .82rem; font-weight: 650; color: var(--ink-2); margin-bottom: 9px; }
.flabel output { font-variant-numeric: tabular-nums; font-weight: 750; color: var(--ink); font-size: .95rem; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px;
                      background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--surface-3); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--surface-3); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px;
  margin-top: -8px; border-radius: 50%; background: var(--brand); border: 3px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--sh-focus); }

.field { width: 100%; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
         background: var(--bg-alt); color: var(--ink); }
.field:focus { outline: none; border-color: var(--brand); box-shadow: var(--sh-focus); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
        background: var(--bg-alt); font-size: .84rem; font-weight: 600; cursor: pointer;
        color: var(--ink-2); transition: .14s; }
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--bg); }

.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; font-size: .89rem; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }

/* Resultat */
.reshead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.reshead__n { font-weight: 700; }
.reshead__n b { color: var(--brand-700); }
/* min-width: 0 later raden krympa under sitt innehall. Utan den tar
   select-elementet sin inneboende bredd, och den styrs av det LANGSTA
   alternativet. Pa finska ar det "Matalin todellinen vuosikorko", vilket
   gav 288 px i en spalt pa 288 och sköt hela raden 60 px utanfor. Vid
   320 px bred skarm rann sidan over med 44 px. Svenskan klarade sig med
   kortare ord, sa felet syntes bara pa ett sprak. */
.reshead__sort { margin-left: auto; display: flex; align-items: center; gap: 8px;
                 font-size: .87rem; color: var(--ink-3); min-width: 0; max-width: 100%; }
/* Sorteringsväljaren stod i .87rem. Webbläsarens egen rullgardin ärver
   storleken från select-elementet, så de sju alternativen visades i knappt
   14 px, läsbart för mig, för smått för många. 1rem gäller både knappen
   och listan som fälls ut. */
/* width: auto lat select-elementet vaxa till sitt langsta alternativ.
   min-width: 0 + max-width later det krympa i stallet, och texten kortas
   av webblasaren. Storleken star kvar pa 1rem: rullgardinen arver den, och
   det var hela poangen med att hoja den. */
.reshead__sort select { width: auto; min-width: 0; max-width: 100%;
                        padding: 9px 32px 9px 13px; font-size: 1rem;
                        text-overflow: ellipsis; }

.offers { display: flex; flex-direction: column; gap: 14px; }

.offer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
         box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.offer:hover { box-shadow: var(--sh-2); border-color: var(--line-2); }
.offer--top { border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: 0 0 0 1px var(--brand-ring), var(--sh-2); }
.offer__rank { position: absolute; top: 0; left: 0; }

.offer__main { display: grid; grid-template-columns: 200px minmax(0, 1fr) 190px; gap: 20px; padding: 18px 20px; align-items: center; }
@media (max-width: 900px) { .offer__main { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.offer__id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.logo { display: flex; align-items: center; gap: 11px; }
.logo__mark { width: 44px; height: 44px; border-radius: 11px; flex: none; display: grid; place-items: center;
              font-weight: 800; font-size: 1.05rem; color: #fff; letter-spacing: -.03em; }

/* Långivarlogotyper. Plattan blir vit och neutral när det finns en riktig
   logotyp, en färgad bakgrund bakom ett främmande varumärke ser ut som
   om vi hade ändrat i det. object-fit: contain så att inget beskärs. */
.logo__mark--img, .peek__mark--img, .ltile__mark--img {
  background: #fff; border: 1px solid var(--line); padding: 4px;
  color: inherit;
}
.logo__mark--img img, .peek__mark--img img, .ltile__mark--img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* I mörkt läge behåller logotypplattan sin vita botten, de flesta
   varumärken är ritade för ljus bakgrund. */
[data-theme="dark"] .logo__mark--img,
[data-theme="dark"] .peek__mark--img,
[data-theme="dark"] .ltile__mark--img { background: #fff; border-color: transparent; }
/* Hjältepanelens brickor är mindre, så plattan får smalare luft. Måste stå
   efter regeln ovan, samma specificitet, sist vinner. */
.peek__mark--img { padding: 3px; }
.logo__t { min-width: 0; }
.logo__t h3 { margin: 0; font-size: 1.04rem; letter-spacing: -.02em; line-height: 1.25; font-weight: 700; }
.logo__t span { display: block; font-size: .78rem; color: var(--ink-3); }
.stars { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--ink-3); }
.stars .ic { width: 14px; height: 14px; color: var(--gold); fill: var(--gold); stroke: none; }

.offer__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .offer__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.num { min-width: 0; }
.num__k { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
          color: var(--ink-3); font-weight: 650; margin-bottom: 1px; }
.num__v { display: block; font-size: 1.16rem; font-weight: 750; letter-spacing: -.03em;
          font-variant-numeric: tabular-nums; line-height: 1.25; }
.num__v.is-hero { color: var(--brand-700); }
.num__n { display: block; font-size: .74rem; color: var(--ink-3); line-height: 1.35; }

.offer__act { display: flex; flex-direction: column; gap: 8px; }
.offer__act .btn { width: 100%; }
.offer__meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 14px; }
.offer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 11px 20px;
               border-top: 1px solid var(--line); background: var(--surface-2); font-size: .82rem; color: var(--ink-3); }
.offer__foot button { background: none; border: 0; padding: 0; color: var(--brand-700); font-weight: 650;
                      cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; }
.offer__foot .ic { width: 14px; height: 14px; }
.offer__det { padding: 0 20px 20px; border-top: 1px solid var(--line); }
.offer__det[hidden] { display: none !important; }
.detgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding-top: 18px; }
@media (max-width: 760px) { .detgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.detgrid h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 8px; }
.plist { list-style: none; padding: 0; margin: 0 0 14px; font-size: .89rem; }
.plist li { display: flex; gap: 8px; padding: 3px 0; align-items: flex-start; }
.plist .ic { width: 16px; height: 16px; margin-top: 4px; flex: none; }
.plist--pro .ic { color: var(--ok); }
.plist--con .ic { color: var(--bad); }
.spectable { font-size: .87rem; }
.spectable tr { border-bottom: 1px solid var(--line); }
.spectable tr:last-child { border-bottom: 0; }
/* Etiketten får radbrytas, långa etiketter (betygsmodellen) sprängde annars
   sidbredden på mobil. Värdet hålls ihop i stället, det är alltid kort. */
.spectable th { text-align: left; font-weight: 550; color: var(--ink-3); padding: 6px 12px 6px 0; }
.spectable td { text-align: right; padding: 6px 0; font-variant-numeric: tabular-nums; font-weight: 600;
                white-space: nowrap; }

.repex { font-size: .78rem; color: var(--ink-3); line-height: 1.55; padding: 12px 20px;
         border-top: 1px dashed var(--line); background: var(--bg-alt); }
.repex b { color: var(--ink-2); font-weight: 650; }

.empty { text-align: center; padding: 56px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }

/* Poängmätare */
.score { display: inline-flex; align-items: center; gap: 8px; }
.score__bar { display: block; width: 54px; height: 6px; border-radius: 3px;
              background: var(--surface-3); overflow: hidden; flex: none; }
.score__fill { display: block; height: 100%; border-radius: 3px;
               background: linear-gradient(90deg, var(--brand), var(--gold)); }
.score__v { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .82rem; }

/* Jämförelsefack */
.tray { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 80;
        background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill);
        box-shadow: var(--sh-3); padding: 9px 9px 9px 20px; display: flex; align-items: center; gap: 14px;
        max-width: calc(100% - 24px); }
.tray[hidden] { display: none !important; }
.tray__n { font-size: .88rem; font-weight: 650; white-space: nowrap; }
.tray__x { background: none; border: 0; cursor: pointer; color: var(--ink-3); display: grid; place-items: center; }

/* ------------------------------------------------------------------ MODAL */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; }
.modal[hidden] { display: none !important; }
.modal__bd { position: absolute; inset: 0; background: rgba(12,14,17,.55); backdrop-filter: blur(3px); }
.modal__box { position: relative; background: var(--surface); border-radius: var(--r-xl);
              box-shadow: var(--sh-3); width: min(980px, 100%); max-height: min(86vh, 900px);
              overflow: auto; border: 1px solid var(--line); }
.modal__h { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--line);
            padding: 18px 22px; display: flex; align-items: center; gap: 12px; z-index: 2; }
.modal__h h3 { margin: 0; }
.modal__h .iconbtn { margin-left: auto; }
.modal__b { padding: 22px; }

.cmp { width: 100%; font-size: .89rem; }
.cmp th, .cmp td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { position: sticky; top: 0; background: var(--surface-2); font-size: .8rem;
                text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.cmp tbody th { font-weight: 550; color: var(--ink-3); white-space: nowrap; }
.cmp td { font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp .is-best { color: var(--ok); }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------- KALKYLER */
.calcgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
/* Rutnätsceller får som standard inte krympa under sitt innehåll (min-width: auto).
   Utan detta spränger en bred tabell hela sidbredden i stället för att rulla
   inuti sin egen .tablewrap. */
.calcgrid > *, .compare > *, .grid2 > *, .grid3 > * { min-width: 0; }
@media (max-width: 940px) { .calcgrid { grid-template-columns: minmax(0, 1fr); } }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
/* Tva kolumner far inte plats under ~380 px, varden som "36 389 kr" i
   1,5 rem bryts inte. */
@media (max-width: 380px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
.kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.kpi__k { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
          color: var(--ink-3); font-weight: 650; }
.kpi__v { display: block; font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em;
          font-variant-numeric: tabular-nums; line-height: 1.3; }
.kpi--hero { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 24%, transparent); }
.kpi--hero .kpi__v { color: var(--brand-700); }

/* Staplarna sträcks till full höjd (align-items: stretch är standard) så att
   segmentens procenthöjder har något definit att räknas mot. */
.bars { display: flex; align-items: stretch; gap: 3px; height: 132px; padding-top: 8px; }
.bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
       gap: 2px; min-width: 0; height: 100%; }
.bar__i { display: block; flex: 0 0 auto; border-radius: 2px 2px 0 0; min-height: 2px; }
.bar__i--r { background: var(--brand); }
.bar__i--a { background: var(--deep); }
.legend { display: flex; gap: 16px; font-size: .8rem; color: var(--ink-3); margin-top: 10px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }

.amort { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.amort table { font-size: .84rem; }
.amort th, .amort td { padding: 7px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.amort thead th { position: sticky; top: 0; background: var(--surface-2); text-align: right;
                  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.amort thead th:first-child, .amort td:first-child { text-align: left; }
.amort td { text-align: right; }
.amort tbody tr:nth-child(12n) { background: var(--surface-2); }

/* ---------------------------------------------------------------- TABELLER */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.dtable { font-size: .9rem; min-width: 640px; }
.dtable th, .dtable td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.dtable thead th { background: var(--surface-2); font-size: .77rem; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.dtable .name { font-weight: 700; }

/* ------------------------------------------------------------------- KORT */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 940px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
        padding: 22px; box-shadow: var(--sh-1); }
.card--flat { box-shadow: none; background: var(--bg-alt); }
.card h2, .card h3 { font-size: 1.06rem; margin-bottom: .4em; }
.card > :last-child { margin-bottom: 0; }
.card__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
            background: var(--deep-soft); color: var(--deep); margin-bottom: 14px; }

.stepgrid { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .stepgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stepgrid { grid-template-columns: minmax(0, 1fr); } }
.step { counter-increment: s; background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-lg); padding: 22px; position: relative; }
.step::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px;
                border-radius: 50%; background: var(--brand); color: var(--bg); font-weight: 750;
                font-size: .95rem; margin-bottom: 14px; }
.step h3 { font-size: 1.02rem; }
.step p { font-size: .9rem; color: var(--ink-2); margin: 0; }

/* -------------------------------------------------------------------- FAQ */
.faq { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { padding: 17px 22px; cursor: pointer; font-weight: 650; list-style: none;
               display: flex; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq summary:hover { background: var(--surface-2); }
.faq__a { padding: 0 22px 20px 22px; color: var(--ink-2); max-width: 82ch; }
.faq__a > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- ORDLISTA */
.gloss { columns: 2; column-gap: 34px; }
@media (max-width: 760px) { .gloss { columns: 1; } }
.gloss div { break-inside: avoid; margin-bottom: 15px; }
.gloss dt { font-weight: 700; font-size: .95rem; }
.gloss dd { margin: 2px 0 0; font-size: .89rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ TEAM */
.person { display: flex; gap: 14px; }
.person__av { width: 58px; height: 58px; border-radius: 50%; background: var(--brand-soft); flex: none;
              display: grid; place-items: center; font-weight: 750; color: var(--brand-700); font-size: 1.05rem;
              border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.person b { display: block; font-size: 1.02rem; letter-spacing: -.02em; }
.person > div > span { display: block; font-size: .82rem; color: var(--brand-700); font-weight: 650; }
.person p { font-size: .88rem; color: var(--ink-2); margin: 6px 0 0; }

/* --------------------------------------------------------------- VARNING */
/* ---------------------------------------------- VARNINGSRUTAN, KOVFS 2025:1
   Svart text på vit botten, röd varningssymbol. Färgerna står som hexkoder
   med flit och FÖLJER INTE TEMAT: föreskriften anger utseendet, och en
   mörk variant vore en annan ruta än den lagen beskriver. Rutan ser alltså
   likadan ut i mörkt läge, det är meningen. Ramen är svart av samma skäl.
   Måtten är satta så att rubriken är lika stor som kortens namn: rutan ska
   läsas, inte skummas förbi som en fotnot. */
.kovfs { display: flex; gap: 16px; align-items: flex-start;
         background: #FFFFFF; color: #000000; border: 2px solid #000000;
         border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 18px; }
.kovfs__sym { width: 40px; height: 40px; flex: none; margin-top: 1px; }
.kovfs__txt { min-width: 0; }
.kovfs__txt p { margin: 0; color: #000000; font-size: .95rem; line-height: 1.5; }
.kovfs__txt p + p { margin-top: .45em; }
.kovfs__h { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.kovfs__txt a { color: #000000; text-decoration: underline; text-underline-offset: 3px;
                font-weight: 600; }
.kovfs__txt a:hover { text-decoration-thickness: 2px; }
@media (max-width: 600px) {
  .kovfs { gap: 12px; padding: 14px; }
  .kovfs__sym { width: 32px; height: 32px; }
}

.warnbox { border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent); background: var(--warn-soft);
           border-radius: var(--r-lg); padding: 20px 24px; display: flex; gap: 16px; }
.warnbox .ic { width: 26px; height: 26px; color: var(--warn); flex: none; margin-top: 2px; }
.warnbox h3 { color: var(--warn); font-size: 1.05rem; margin-bottom: .3em; }
.warnbox p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.warnbox p + p { margin-top: .6em; }

/* --------------------------------------------------------------- SOURCES */
.sources { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sources li { display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; }
.sources .ic { width: 16px; height: 16px; margin-top: 5px; color: var(--ink-3); flex: none; }
.sources li > span { min-width: 0; }
.sources b { display: block; font-weight: 650; }
.sources li > span > span { display: block; color: var(--ink-3); font-size: .85rem; line-height: 1.45; }

/* ------------------------------------------------------------------ FOOTER */
.ftr { background: var(--deep-bg); color: #C6D6D1; padding: clamp(46px, 6vw, 76px) 0 32px; font-size: .9rem; }
.ftr a { color: #C6D6D1; text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 30px; margin-bottom: 38px; }
@media (max-width: 1000px) { .ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px)  { .ftr__grid { grid-template-columns: minmax(0, 1fr); } }
.ftr h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 14px; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ftr__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; color: #fff; font-weight: 800; }
.ftr__brand .brand__mark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
/* #93A9A3 mot den mörka bottenplattan gav 3,92:1, under WCAG:s 4,5:1 för
   brödtext. Just den här texten är den som måste gå att läsa: utgivare,
   momsnummer, annonsmärkning och riskvarningen om att låna pengar kostar
   pengar. Att den satt i den svagaste tonen på sidan är precis fel prioritet.
   #A9BDB7 ger 4,94:1 mot samma bakgrund och ser likadant dämpad ut. */
.ftr__legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; font-size: .8rem;
              color: #A9BDB7; display: grid; gap: 12px; }
.ftr__legal p { margin: 0; max-width: 105ch; }

/* Den juridiska texten låg kvar i en enda spalt på 105ch, 848 px, mitt i
   en sidfot som är 1320 px bred. Bredvid det femspaltiga rutnätet ovanför
   såg de 472 tomma pixlarna till höger ut som ett fel, inte som ett val.

   Att bara ta bort taket vore att byta ett fel mot ett annat: 1320 px
   löpande text i 12,8 px blir 165 tecken per rad, långt bortom vad som går
   att följa med ögat. Spalter löser båda: bredden fylls, och raden håller
   sig runt 80 tecken. Antalet stycken varierar mellan sidorna, sex på
   startsidan, tre på metodsidan, och spalterna balanserar sig själva. */
@media (min-width: 1100px) {
  .ftr__legal { display: block; columns: 2; column-gap: 56px; }
  .ftr__legal p { max-width: none; break-inside: avoid; margin-bottom: 12px; }
  .ftr__legal p:last-child { margin-bottom: 0; }
}
/* Länkarna här låg i #C6D6D1 mot #A9BDB7–1,65:1 mot texten runt omkring,
   alltså osynliga för den som inte skiljer de tonerna åt. Understrykningen
   gör dem urskiljbara utan att färgen behöver bära informationen. */
.ftr__legal a { text-decoration: underline; }
/* ---------------------------------------------------------- TILLITSRADEN
   Fyra piller i rundad ram: SSL-krypterad, GDPR, Ingen UC tas här,
   Uppdaterad. Formen sa "märke", alltså marknadsföring, och ett märke är
   det första en läsare avfärdar. Uppgifterna är dessutom sanna och värda
   att tro på, vilket gör pillerformen dubbelt fel.

   Enklare, Sambla och Compricer har inga sådana märken alls. De skriver ut
   tillsyn, tillstånd och organisationsnummer som text och låter
   typografin bära allvaret. Det är rätt instinkt: en jämförelsetjänst för
   krediter ska se ut som en myndighetsbilaga, inte som en produktsida.

   Här blir det en remsa i stället för märken. Versaler, glest spärrade, i
   samma dämpade ton som den juridiska texten under, med hårfina lodräta
   streck emellan. Ingen ram, ingen platta, ingen rundning, bara fyra
   påståenden som står för sig själva.

   Markupen är orörd: klasserna finns kvar precis som de var, så
   översättningsparen och deras uppslagsnycklar påverkas inte alls. */
.ftr__badges { display: flex; flex-wrap: wrap; align-items: center;
               gap: 9px 18px; margin-top: 20px; }
.ftr__badges .tag {
  background: none; border: 0; border-radius: 0; padding: 0;
  font-size: .7rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: #A9BDB7; position: relative;
}
/* Skiljestrecket sitter mitt i mellanrummet, inte klistrat vid ordet. */
.ftr__badges .tag + .tag::before {
  content: ""; position: absolute; left: -9px; top: 50%;
  transform: translateY(-50%); width: 1px; height: 11px;
  background: rgba(255,255,255,.22);
}
/* Bryter raden försvinner strecket, annars hänger det i luften först på
   nästa rad, där det inte skiljer något från något. */
@media (max-width: 600px) {
  .ftr__badges { gap: 7px 16px; }
  .ftr__badges .tag + .tag::before { display: none; }
}

/* ------------------------------------------------------------------- MISC */
.disclosure { display: flex; gap: 12px; align-items: flex-start; font-size: .84rem; color: var(--ink-2);
              background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
              padding: 13px 16px; }
.disclosure .ic { width: 17px; height: 17px; margin-top: 3px; color: var(--ink-3); flex: none; }
.updated { font-size: .82rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; }
.updated .ic { width: 15px; height: 15px; }

.toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 150;
         background: var(--ink); color: var(--bg); padding: 11px 20px; border-radius: var(--r-pill);
         font-size: .88rem; font-weight: 600; box-shadow: var(--sh-3); opacity: 0; pointer-events: none;
         transition: opacity .22s, transform .22s; }
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(-6px); }

/* Inzoomning är en förstärkning, aldrig ett krav. Utan JS (eller vid
   reducerad rörelse) är allt innehåll synligt från början. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

.crumbs { font-size: .84rem; color: var(--ink-3); padding-top: 18px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand-700); text-decoration: underline; }

@media print {
  .hdr, .tray, .filters, .ftr, .btn, .toast { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .offer { break-inside: avoid; box-shadow: none; }
}

/* ============================================================== HJÄLTEBILD
   En bild av åtta, slumpad vid varje sidladdning, olika motiv per land.
   Bilden ligger som bakgrund på ett eget lager med en mörk slöja över:
   slöjan är fast och tillräckligt tät för den LJUSASTE av de trettiotvå,
   så texten håller kontrast oavsett vilken som kommer upp. Att lita på att
   varje bild är mörk nog vore att lita på tur.

   Rörelsen är en långsam inzoomning, fyrtio sekunder, som aldrig går tillbaka
   till utgångsläget under ett besök. Den ska kännas som att bilden andas,
   inte som en bildspelsövergång. */
.hero--photo { position: relative; isolation: isolate; overflow: hidden; }
.hero--photo .wrap { position: relative; z-index: 2; }
.hero__bg, .hero__scrim { position: absolute; inset: 0; z-index: 0; }
.hero__bg { background-size: cover; background-position: 50% 42%;
            background-repeat: no-repeat; background-color: #263140;
            animation: heroBreathe 40s ease-in-out infinite alternate;
            will-change: transform; }
@keyframes heroBreathe {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(0, -1.2%, 0); }
}
.hero__scrim { z-index: 1; background:
  linear-gradient(180deg, rgba(11,15,20,.80) 0%, rgba(11,15,20,.66) 46%, rgba(11,15,20,.78) 100%); }

/* Texten står på foto och är därför ljus, men bara i hjälten. */
.hero--photo .kicker { color: #C7D3E0; }
.hero--photo h1 { color: #FFFFFF; }
.hero--photo .lead { color: #DCE4EC; }
.hero--photo .hero__trust { color: #C7D3E0; }
.hero--photo .hero__trust span { color: #C7D3E0; }

/* Formuläret är ett vitt kort mot fotot, sidans viktigaste kontroll ska
   inte behöva slåss med en bakgrund. */
.hero--photo .hform { box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.22);
                      border-color: transparent; }

@media (prefers-reduced-motion: reduce) { .hero__bg { animation: none; } }

/* ==========================================================================
   SIDHUVUDET SOM DEL AV HJÄLTEN

   Förut: en vit list överst, fotot under, och en hård kant rakt igenom
   bilden. Två plattor staplade på varandra, och den övre hade ingenting
   med den undre att göra.

   Nu börjar fotot ovanför huvudet. Hjälten dras upp exakt en navhöjd och
   får samma höjd tillbaka som toppfyllnad, så bilden ligger bakom huvudet
   utan att innehållet flyttar sig en pixel. Huvudet är genomskinligt så
   länge det står på fotot, och tar tillbaka sin platta först när man
   rullat förbi.

   Klassen hero-hdr sätts av samma inline-skript i <head> som slumpar
   hjältebilden, alltså före första målningen, och bara på de sidor som
   HAR ett foto att stå på. Utan JavaScript sätts den aldrig, och huvudet
   ser ut precis som förut. Rullningsvakten sitter i samma skript, inte i
   app.js: blir huvudet genomskinligt måste det som gör det ogenomskinligt
   igen komma från samma håll, annars kan texten bli oläslig om app.js
   uteblir.

   Kontrasten: skärmen överst är rgba(11,15,20,.80) över en mellanton, och
   det ger ungefär #20262B. Vit text mot det ligger kring 15:1, alltså
   långt över kravet. Mätt, inte gissat.
   ========================================================================== */
html.hero-hdr .hero--photo {
  margin-top: calc(var(--nav-h) * -1);
  /* Navhöjden ADDERAS till hjältens egen luft. Satte man bara navhöjden
     ersattes luften, och rubriken kröp upp till nio pixlar under menyn. */
  padding-top: calc(var(--nav-h) + var(--hero-pad));
}

html.hero-hdr .hdr {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}

/* Ljus text medan huvudet står på fotot. */
html.hero-hdr:not(.is-scrolled) .brand,
html.hero-hdr:not(.is-scrolled) .brand:hover,
html.hero-hdr:not(.is-scrolled) .nav a { color: #F4F7FA; }
html.hero-hdr:not(.is-scrolled) .brand__sub { color: #B9C7D4; }
html.hero-hdr:not(.is-scrolled) .nav a:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
html.hero-hdr:not(.is-scrolled) .nav a[aria-current="page"] {
  background: rgba(255,255,255,.16); color: #FFFFFF;
}
/* Märket och språkväljaren är plattor i ljust läge; på fotot blir de glas. */
html.hero-hdr:not(.is-scrolled) .brand__mark {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22);
}
html.hero-hdr:not(.is-scrolled) .brand__mark svg { color: #FFFFFF; }
html.hero-hdr:not(.is-scrolled) .langsw {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20);
}
html.hero-hdr:not(.is-scrolled) .langsw a:hover { background: rgba(255,255,255,.16); }
html.hero-hdr:not(.is-scrolled) .langsw [aria-current="true"] { background: rgba(255,255,255,.22); }
html.hero-hdr:not(.is-scrolled) .navtoggle { color: #F4F7FA; border-color: rgba(255,255,255,.22); }

/* Rullat förbi hjälten: huvudet återtar sin platta, sin oskärpa och sin
   hårfina kant. Övergången är mjuk åt båda hållen. */
html.hero-hdr.is-scrolled .hdr {
  background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}

@media (prefers-reduced-motion: reduce) {
  html.hero-hdr .hdr { transition: none; }
}

/* Lanken till hela listan, under de fem pa startsidan. */
.offers__all { margin-top: 18px; }

/* === HJALTEBILD: FORVAL PER MARKNAD ===
   Hjalten slumpades mellan atta bilder per marknad. Det kostade tre saker,
   alla uppmatta:

   1. Cachen. Atta bilder delar pa traffen, sa en aterkommande besokare fick
      ratt bild ur cachen i 12,5 procent av fallen. De ovriga sju attondelarna
      laddades ner igen, varje gang.

   2. LCP-vikten. Den lattaste och den tyngsta varianten skiljer 3,3 ganger:
      no-7 vager 22 857 B och no-6 vager 76 096 B i 1920-bredd, bada AVIF.
      Vilken sida som helst kunde alltsa bli tre ganger tyngre an nasta, utan
      att nagot i innehallet andrats.

   3. Forhandshamtningen. En bild som valjs av slumpen gar inte att peka ut i
      <head>. Sa lange valet gors i JavaScript hittas hjalten forst nar
      stilmallen hamtats, tolkats och selektorn matchat, och den ar sidans
      LCP-element.

   Regeln nedan pekar ut EN bild per marknad, den lattaste av de atta, och
   ligger med LAGRE specificitet an [data-hero]-reglerna langre ner. Sa lange
   det inline-skriptet i <head> fortfarande satter data-hero vinner de aldre
   reglerna och ingenting andras. Tas skriptet bort, vilket ar meningen och
   star i rapporten, slar forvalet in och bilden blir bade cachebar och
   mojlig att forhandshamta statiskt.

   De atta varianterna ligger kvar. De kostar 753 B brotlipackat av
   stilmallens 19 455, alltsa 3,9 procent, eftersom blocken ar nastan
   identiska och packas omkring 24:1. Uppmatt, inte uppskattat: att kasta
   dem hade sparat mindre an en kilobyte pa tradet och tagit bort mojligheten
   att byta bild med en radandring.
   ========================================================================== */
html[lang^="sv"] .hero__bg, html[lang="en"] .hero__bg {
  background-color: #73767b;
  background-image: image-set(url("../img/hero/sv-7-1920.avif") type("image/avif"), url("../img/hero/sv-7-1920.webp") type("image/webp"), url("../img/hero/sv-7-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="sv"] .hero__bg, html[lang="en"] .hero__bg {
    background-image: image-set(url("../img/hero/sv-7-1280.avif") type("image/avif"), url("../img/hero/sv-7-1280.webp") type("image/webp"), url("../img/hero/sv-7-1280.jpg") type("image/jpeg"));
  }
}

html[lang^="da"] .hero__bg {
  background-color: #495763;
  background-image: image-set(url("../img/hero/da-3-1920.avif") type("image/avif"), url("../img/hero/da-3-1920.webp") type("image/webp"), url("../img/hero/da-3-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="da"] .hero__bg {
    background-image: image-set(url("../img/hero/da-3-1280.avif") type("image/avif"), url("../img/hero/da-3-1280.webp") type("image/webp"), url("../img/hero/da-3-1280.jpg") type("image/jpeg"));
  }
}

html[lang^="no"] .hero__bg {
  background-color: #212e3f;
  background-image: image-set(url("../img/hero/no-7-1920.avif") type("image/avif"), url("../img/hero/no-7-1920.webp") type("image/webp"), url("../img/hero/no-7-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="no"] .hero__bg {
    background-image: image-set(url("../img/hero/no-7-1280.avif") type("image/avif"), url("../img/hero/no-7-1280.webp") type("image/webp"), url("../img/hero/no-7-1280.jpg") type("image/jpeg"));
  }
}

html[lang^="fi"] .hero__bg {
  background-color: #293c4a;
  background-image: image-set(url("../img/hero/fi-5-1920.avif") type("image/avif"), url("../img/hero/fi-5-1920.webp") type("image/webp"), url("../img/hero/fi-5-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="fi"] .hero__bg {
    background-image: image-set(url("../img/hero/fi-5-1280.avif") type("image/avif"), url("../img/hero/fi-5-1280.webp") type("image/webp"), url("../img/hero/fi-5-1280.jpg") type("image/jpeg"));
  }
}

/* === HJALTEBILDER: genererade av _photos/build-heroes.js === */
html[lang^="sv"][data-hero="1"] .hero__bg, html[lang="en"][data-hero="1"] .hero__bg {
  background-color: #737f8b;
  background-image: image-set(url("../img/hero/sv-1-1920.avif") type("image/avif"), url("../img/hero/sv-1-1920.webp") type("image/webp"), url("../img/hero/sv-1-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="sv"][data-hero="1"] .hero__bg, html[lang="en"][data-hero="1"] .hero__bg {
    background-image: image-set(url("../img/hero/sv-1-1280.avif") type("image/avif"), url("../img/hero/sv-1-1280.webp") type("image/webp"), url("../img/hero/sv-1-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="sv"][data-hero="2"] .hero__bg, html[lang="en"][data-hero="2"] .hero__bg {
  background-color: #586472;
  background-image: image-set(url("../img/hero/sv-2-1920.avif") type("image/avif"), url("../img/hero/sv-2-1920.webp") type("image/webp"), url("../img/hero/sv-2-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="sv"][data-hero="2"] .hero__bg, html[lang="en"][data-hero="2"] .hero__bg {
    background-image: image-set(url("../img/hero/sv-2-1280.avif") type("image/avif"), url("../img/hero/sv-2-1280.webp") type("image/webp"), url("../img/hero/sv-2-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="sv"][data-hero="3"] .hero__bg, html[lang="en"][data-hero="3"] .hero__bg {
  background-color: #60666a;
  background-image: image-set(url("../img/hero/sv-3-1920.avif") type("image/avif"), url("../img/hero/sv-3-1920.webp") type("image/webp"), url("../img/hero/sv-3-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="sv"][data-hero="3"] .hero__bg, html[lang="en"][data-hero="3"] .hero__bg {
    background-image: image-set(url("../img/hero/sv-3-1280.avif") type("image/avif"), url("../img/hero/sv-3-1280.webp") type("image/webp"), url("../img/hero/sv-3-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="sv"][data-hero="4"] .hero__bg, html[lang="en"][data-hero="4"] .hero__bg {
  background-color: #5b6167;
  background-image: image-set(url("../img/hero/sv-4-1920.avif") type("image/avif"), url("../img/hero/sv-4-1920.webp") type("image/webp"), url("../img/hero/sv-4-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="sv"][data-hero="4"] .hero__bg, html[lang="en"][data-hero="4"] .hero__bg {
    background-image: image-set(url("../img/hero/sv-4-1280.avif") type("image/avif"), url("../img/hero/sv-4-1280.webp") type("image/webp"), url("../img/hero/sv-4-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="sv"][data-hero="5"] .hero__bg, html[lang="en"][data-hero="5"] .hero__bg {
  background-color: #3e4957;
  background-image: image-set(url("../img/hero/sv-5-1920.avif") type("image/avif"), url("../img/hero/sv-5-1920.webp") type("image/webp"), url("../img/hero/sv-5-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="sv"][data-hero="5"] .hero__bg, html[lang="en"][data-hero="5"] .hero__bg {
    background-image: image-set(url("../img/hero/sv-5-1280.avif") type("image/avif"), url("../img/hero/sv-5-1280.webp") type("image/webp"), url("../img/hero/sv-5-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="sv"][data-hero="6"] .hero__bg, html[lang="en"][data-hero="6"] .hero__bg {
  background-color: #6a778e;
  background-image: image-set(url("../img/hero/sv-6-1920.avif") type("image/avif"), url("../img/hero/sv-6-1920.webp") type("image/webp"), url("../img/hero/sv-6-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="sv"][data-hero="6"] .hero__bg, html[lang="en"][data-hero="6"] .hero__bg {
    background-image: image-set(url("../img/hero/sv-6-1280.avif") type("image/avif"), url("../img/hero/sv-6-1280.webp") type("image/webp"), url("../img/hero/sv-6-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="sv"][data-hero="7"] .hero__bg, html[lang="en"][data-hero="7"] .hero__bg {
  background-color: #73767b;
  background-image: image-set(url("../img/hero/sv-7-1920.avif") type("image/avif"), url("../img/hero/sv-7-1920.webp") type("image/webp"), url("../img/hero/sv-7-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="sv"][data-hero="7"] .hero__bg, html[lang="en"][data-hero="7"] .hero__bg {
    background-image: image-set(url("../img/hero/sv-7-1280.avif") type("image/avif"), url("../img/hero/sv-7-1280.webp") type("image/webp"), url("../img/hero/sv-7-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="sv"][data-hero="8"] .hero__bg, html[lang="en"][data-hero="8"] .hero__bg {
  background-color: #66696c;
  background-image: image-set(url("../img/hero/sv-8-1920.avif") type("image/avif"), url("../img/hero/sv-8-1920.webp") type("image/webp"), url("../img/hero/sv-8-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="sv"][data-hero="8"] .hero__bg, html[lang="en"][data-hero="8"] .hero__bg {
    background-image: image-set(url("../img/hero/sv-8-1280.avif") type("image/avif"), url("../img/hero/sv-8-1280.webp") type("image/webp"), url("../img/hero/sv-8-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="da"][data-hero="1"] .hero__bg {
  background-color: #69747e;
  background-image: image-set(url("../img/hero/da-1-1920.avif") type("image/avif"), url("../img/hero/da-1-1920.webp") type("image/webp"), url("../img/hero/da-1-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="da"][data-hero="1"] .hero__bg {
    background-image: image-set(url("../img/hero/da-1-1280.avif") type("image/avif"), url("../img/hero/da-1-1280.webp") type("image/webp"), url("../img/hero/da-1-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="da"][data-hero="2"] .hero__bg {
  background-color: #6b7681;
  background-image: image-set(url("../img/hero/da-2-1920.avif") type("image/avif"), url("../img/hero/da-2-1920.webp") type("image/webp"), url("../img/hero/da-2-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="da"][data-hero="2"] .hero__bg {
    background-image: image-set(url("../img/hero/da-2-1280.avif") type("image/avif"), url("../img/hero/da-2-1280.webp") type("image/webp"), url("../img/hero/da-2-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="da"][data-hero="3"] .hero__bg {
  background-color: #495763;
  background-image: image-set(url("../img/hero/da-3-1920.avif") type("image/avif"), url("../img/hero/da-3-1920.webp") type("image/webp"), url("../img/hero/da-3-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="da"][data-hero="3"] .hero__bg {
    background-image: image-set(url("../img/hero/da-3-1280.avif") type("image/avif"), url("../img/hero/da-3-1280.webp") type("image/webp"), url("../img/hero/da-3-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="da"][data-hero="4"] .hero__bg {
  background-color: #636c71;
  background-image: image-set(url("../img/hero/da-4-1920.avif") type("image/avif"), url("../img/hero/da-4-1920.webp") type("image/webp"), url("../img/hero/da-4-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="da"][data-hero="4"] .hero__bg {
    background-image: image-set(url("../img/hero/da-4-1280.avif") type("image/avif"), url("../img/hero/da-4-1280.webp") type("image/webp"), url("../img/hero/da-4-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="da"][data-hero="5"] .hero__bg {
  background-color: #6d7175;
  background-image: image-set(url("../img/hero/da-5-1920.avif") type("image/avif"), url("../img/hero/da-5-1920.webp") type("image/webp"), url("../img/hero/da-5-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="da"][data-hero="5"] .hero__bg {
    background-image: image-set(url("../img/hero/da-5-1280.avif") type("image/avif"), url("../img/hero/da-5-1280.webp") type("image/webp"), url("../img/hero/da-5-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="da"][data-hero="6"] .hero__bg {
  background-color: #677074;
  background-image: image-set(url("../img/hero/da-6-1920.avif") type("image/avif"), url("../img/hero/da-6-1920.webp") type("image/webp"), url("../img/hero/da-6-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="da"][data-hero="6"] .hero__bg {
    background-image: image-set(url("../img/hero/da-6-1280.avif") type("image/avif"), url("../img/hero/da-6-1280.webp") type("image/webp"), url("../img/hero/da-6-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="da"][data-hero="7"] .hero__bg {
  background-color: #707579;
  background-image: image-set(url("../img/hero/da-7-1920.avif") type("image/avif"), url("../img/hero/da-7-1920.webp") type("image/webp"), url("../img/hero/da-7-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="da"][data-hero="7"] .hero__bg {
    background-image: image-set(url("../img/hero/da-7-1280.avif") type("image/avif"), url("../img/hero/da-7-1280.webp") type("image/webp"), url("../img/hero/da-7-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="da"][data-hero="8"] .hero__bg {
  background-color: #71777f;
  background-image: image-set(url("../img/hero/da-8-1920.avif") type("image/avif"), url("../img/hero/da-8-1920.webp") type("image/webp"), url("../img/hero/da-8-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="da"][data-hero="8"] .hero__bg {
    background-image: image-set(url("../img/hero/da-8-1280.avif") type("image/avif"), url("../img/hero/da-8-1280.webp") type("image/webp"), url("../img/hero/da-8-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="no"][data-hero="1"] .hero__bg {
  background-color: #656c75;
  background-image: image-set(url("../img/hero/no-1-1920.avif") type("image/avif"), url("../img/hero/no-1-1920.webp") type("image/webp"), url("../img/hero/no-1-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="no"][data-hero="1"] .hero__bg {
    background-image: image-set(url("../img/hero/no-1-1280.avif") type("image/avif"), url("../img/hero/no-1-1280.webp") type("image/webp"), url("../img/hero/no-1-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="no"][data-hero="2"] .hero__bg {
  background-color: #686e77;
  background-image: image-set(url("../img/hero/no-2-1920.avif") type("image/avif"), url("../img/hero/no-2-1920.webp") type("image/webp"), url("../img/hero/no-2-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="no"][data-hero="2"] .hero__bg {
    background-image: image-set(url("../img/hero/no-2-1280.avif") type("image/avif"), url("../img/hero/no-2-1280.webp") type("image/webp"), url("../img/hero/no-2-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="no"][data-hero="3"] .hero__bg {
  background-color: #545e6b;
  background-image: image-set(url("../img/hero/no-3-1920.avif") type("image/avif"), url("../img/hero/no-3-1920.webp") type("image/webp"), url("../img/hero/no-3-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="no"][data-hero="3"] .hero__bg {
    background-image: image-set(url("../img/hero/no-3-1280.avif") type("image/avif"), url("../img/hero/no-3-1280.webp") type("image/webp"), url("../img/hero/no-3-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="no"][data-hero="4"] .hero__bg {
  background-color: #696e73;
  background-image: image-set(url("../img/hero/no-4-1920.avif") type("image/avif"), url("../img/hero/no-4-1920.webp") type("image/webp"), url("../img/hero/no-4-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="no"][data-hero="4"] .hero__bg {
    background-image: image-set(url("../img/hero/no-4-1280.avif") type("image/avif"), url("../img/hero/no-4-1280.webp") type("image/webp"), url("../img/hero/no-4-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="no"][data-hero="5"] .hero__bg {
  background-color: #3b444a;
  background-image: image-set(url("../img/hero/no-5-1920.avif") type("image/avif"), url("../img/hero/no-5-1920.webp") type("image/webp"), url("../img/hero/no-5-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="no"][data-hero="5"] .hero__bg {
    background-image: image-set(url("../img/hero/no-5-1280.avif") type("image/avif"), url("../img/hero/no-5-1280.webp") type("image/webp"), url("../img/hero/no-5-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="no"][data-hero="6"] .hero__bg {
  background-color: #5a6067;
  background-image: image-set(url("../img/hero/no-6-1920.avif") type("image/avif"), url("../img/hero/no-6-1920.webp") type("image/webp"), url("../img/hero/no-6-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="no"][data-hero="6"] .hero__bg {
    background-image: image-set(url("../img/hero/no-6-1280.avif") type("image/avif"), url("../img/hero/no-6-1280.webp") type("image/webp"), url("../img/hero/no-6-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="no"][data-hero="7"] .hero__bg {
  background-color: #212e3f;
  background-image: image-set(url("../img/hero/no-7-1920.avif") type("image/avif"), url("../img/hero/no-7-1920.webp") type("image/webp"), url("../img/hero/no-7-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="no"][data-hero="7"] .hero__bg {
    background-image: image-set(url("../img/hero/no-7-1280.avif") type("image/avif"), url("../img/hero/no-7-1280.webp") type("image/webp"), url("../img/hero/no-7-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="no"][data-hero="8"] .hero__bg {
  background-color: #858e99;
  background-image: image-set(url("../img/hero/no-8-1920.avif") type("image/avif"), url("../img/hero/no-8-1920.webp") type("image/webp"), url("../img/hero/no-8-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="no"][data-hero="8"] .hero__bg {
    background-image: image-set(url("../img/hero/no-8-1280.avif") type("image/avif"), url("../img/hero/no-8-1280.webp") type("image/webp"), url("../img/hero/no-8-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="fi"][data-hero="1"] .hero__bg {
  background-color: #3b4957;
  background-image: image-set(url("../img/hero/fi-1-1920.avif") type("image/avif"), url("../img/hero/fi-1-1920.webp") type("image/webp"), url("../img/hero/fi-1-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="fi"][data-hero="1"] .hero__bg {
    background-image: image-set(url("../img/hero/fi-1-1280.avif") type("image/avif"), url("../img/hero/fi-1-1280.webp") type("image/webp"), url("../img/hero/fi-1-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="fi"][data-hero="2"] .hero__bg {
  background-color: #687581;
  background-image: image-set(url("../img/hero/fi-2-1920.avif") type("image/avif"), url("../img/hero/fi-2-1920.webp") type("image/webp"), url("../img/hero/fi-2-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="fi"][data-hero="2"] .hero__bg {
    background-image: image-set(url("../img/hero/fi-2-1280.avif") type("image/avif"), url("../img/hero/fi-2-1280.webp") type("image/webp"), url("../img/hero/fi-2-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="fi"][data-hero="3"] .hero__bg {
  background-color: #758089;
  background-image: image-set(url("../img/hero/fi-3-1920.avif") type("image/avif"), url("../img/hero/fi-3-1920.webp") type("image/webp"), url("../img/hero/fi-3-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="fi"][data-hero="3"] .hero__bg {
    background-image: image-set(url("../img/hero/fi-3-1280.avif") type("image/avif"), url("../img/hero/fi-3-1280.webp") type("image/webp"), url("../img/hero/fi-3-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="fi"][data-hero="4"] .hero__bg {
  background-color: #68748c;
  background-image: image-set(url("../img/hero/fi-4-1920.avif") type("image/avif"), url("../img/hero/fi-4-1920.webp") type("image/webp"), url("../img/hero/fi-4-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="fi"][data-hero="4"] .hero__bg {
    background-image: image-set(url("../img/hero/fi-4-1280.avif") type("image/avif"), url("../img/hero/fi-4-1280.webp") type("image/webp"), url("../img/hero/fi-4-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="fi"][data-hero="5"] .hero__bg {
  background-color: #293c4a;
  background-image: image-set(url("../img/hero/fi-5-1920.avif") type("image/avif"), url("../img/hero/fi-5-1920.webp") type("image/webp"), url("../img/hero/fi-5-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="fi"][data-hero="5"] .hero__bg {
    background-image: image-set(url("../img/hero/fi-5-1280.avif") type("image/avif"), url("../img/hero/fi-5-1280.webp") type("image/webp"), url("../img/hero/fi-5-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="fi"][data-hero="6"] .hero__bg {
  background-color: #6c7371;
  background-image: image-set(url("../img/hero/fi-6-1920.avif") type("image/avif"), url("../img/hero/fi-6-1920.webp") type("image/webp"), url("../img/hero/fi-6-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="fi"][data-hero="6"] .hero__bg {
    background-image: image-set(url("../img/hero/fi-6-1280.avif") type("image/avif"), url("../img/hero/fi-6-1280.webp") type("image/webp"), url("../img/hero/fi-6-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="fi"][data-hero="7"] .hero__bg {
  background-color: #52595f;
  background-image: image-set(url("../img/hero/fi-7-1920.avif") type("image/avif"), url("../img/hero/fi-7-1920.webp") type("image/webp"), url("../img/hero/fi-7-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="fi"][data-hero="7"] .hero__bg {
    background-image: image-set(url("../img/hero/fi-7-1280.avif") type("image/avif"), url("../img/hero/fi-7-1280.webp") type("image/webp"), url("../img/hero/fi-7-1280.jpg") type("image/jpeg"));
  }
}
html[lang^="fi"][data-hero="8"] .hero__bg {
  background-color: #485466;
  background-image: image-set(url("../img/hero/fi-8-1920.avif") type("image/avif"), url("../img/hero/fi-8-1920.webp") type("image/webp"), url("../img/hero/fi-8-1920.jpg") type("image/jpeg"));
}
@media (max-width: 900px) {
  html[lang^="fi"][data-hero="8"] .hero__bg {
    background-image: image-set(url("../img/hero/fi-8-1280.avif") type("image/avif"), url("../img/hero/fi-8-1280.webp") type("image/webp"), url("../img/hero/fi-8-1280.jpg") type("image/jpeg"));
  }
}
/* === SLUT HJALTEBILDER === */