/* ============================================================
   pengeguide.css — delt stilark for hele nettstedet.

   Erstatter den dupliserte CSS-en som lå inline i forsiden og
   artikkelmalen. Endres en verdi her, endres den begge steder.

   Følger dokumentasjon/responsiv-standard.md:
     breakpoints i rem, clamp() med rem-komponent, svh ikke dvh,
     container queries på gjenbrukte komponenter, 44 px trykkflater.

   Annonseflatene ligger i maler/annonseslot.css og lastes separat.
   Ikke definer .ad-slot-høyder her.

   FARGEPALETTEN ER IKKE AVKLART. Tokenene under er kopiert uendret
   fra de godkjente utkastene. Ikke juster dem uten avklaring.
   ============================================================ */

:root{
  /* ---- palett ----
     Blått er nettstedets farge. Verdiene er de samme som lå i
     [data-tema="blaa"] og ble godkjent på styringsrentesiden.

     Navnene er fra den grønne utgaven og beskriver ROLLEN, ikke fargen:
     --spruce er den mørke flaten, --green er lenkefargen, --rust er
     aksenten. Å døpe dem om ville rørt hver eneste regel i stilarket for
     ingen annen gevinst enn navnet. */
  --bg:#f4f7fa;
  --wash:#e4edf4;
  --ink:#0e1c28;
  --ink-2:#263846;
  --muted:#4a5c6b;
  --rule:#d3dee7;
  --rule-2:#c2d2de;

  /* Den mørke flaten: masthead, tallpanel, knapper. Marineblå. */
  --spruce:#00325a;
  --spruce-2:#0b4a7a;
  --spruce-3:#155e94;
  --on-spruce:#ffffff;
  --on-spruce-dim:#a9c6dd;
  --linje:rgba(255,255,255,.1);        /* kantlinjer på mørk flate */

  /* Aksenten, gyllen.
     --rust brukes på .kicker, som er liten tekst og derfor krever 4,5:1.
     #a86f0e målte 3,95:1 mot bakgrunnen og ble mørknet til #8a5a05.
     --rust-dim brukes bare på mørk flate og på grafens punktmarkør. */
  --rust:#8a5a05;
  --rust-dim:#eaa93f;

  --green:#0b4a7a;                     /* lenkefargen */

  /* Retningsfarger på LYS flate, i tabeller og brødtekst.
     Opp er dyrere for leseren, ned er billigere. */
  --opp:#b3401f;
  --ned:#1c6b52;

  /* Retningsfarger på MØRK flate, i tallpanelet. Kan ikke være de samme:
     --ned måler 1,3:1 mot marineblått. Egne verdier, egne navn, og begge
     med i skript/kontrast.mjs så de ikke kan skli. */
  --pil-opp:#f0a97a;
  --pil-ned:#79c9e8;

  /* ---- typografi ----
     Skala med forholdstall 1,25. Ingen størrelse på siden står utenfor den.
     Grunnlinja er 1,25rem = 20 px på desktop, som er nøyaktig det VG, E24 og
     DN bruker på brødtekst (Aftenposten 19 px). Målt med computed values
     12. august 2026, ikke valgt etter smak.
     Trinnene på desktop: 0,8 - 1 - 1,25 - 1,5625 - 1,9531 - 2,4414 - 3,0518.

     Mobilenden bruker forholdstall 1,2 og ikke 1,25. Samme forholdstall i
     begge ender gir enten en h1 på 44 px på en 320 px-skjerm, eller en for
     liten h1 på desktop. Skalaen leseren ser er 1,25 der den ble målt.

     Hver clamp() har rem i midtverdien, og maks er aldri over 2,5x min.
     Ren vw i midten ville brutt zoom og dermed WCAG 1.4.4.
     Mellomleddet er regnet ut så minsteverdien treffer ved 320 px og
     maksverdien ved 1440 px. */
  --tekst-xs:clamp(0.7813rem,0.776rem + 0.027vw,0.8rem);
  --tekst-sm:clamp(0.9375rem,0.92rem + 0.089vw,1rem);
  --tekst-base:clamp(1.125rem,1.089rem + 0.179vw,1.25rem);
  --tekst-lg:clamp(1.35rem,1.289rem + 0.304vw,1.5625rem);
  --tekst-xl:clamp(1.62rem,1.525rem + 0.476vw,1.9531rem);
  --tekst-2xl:clamp(1.944rem,1.802rem + 0.711vw,2.4414rem);
  --tekst-3xl:clamp(2.3328rem,2.127rem + 1.027vw,3.0518rem);

  /* Visningstallet «4,25 %» på styringsrentesiden. Ligger to trinn over
     --tekst-3xl på den samme 1,25-skalaen (3,0518 - 3,8147 - 4,7684).
     Egen token fordi det er et tall som skal leses på avstand, ikke en
     overskrift, men det står på skalaen som alt annet. */
  --tall-stor:clamp(3.3592rem,2.957rem + 2.013vw,4.7684rem);

  /* ---- luft ---- */
  --luft-seksjon:clamp(1.875rem,4vw,3rem);
  --luft-blokk:clamp(1.375rem,3vw,2rem);

  --z-sticky:100;
}

/* ---------- grunnoppsett ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:var(--tekst-base);line-height:1.5;
  font-variant-numeric:tabular-nums;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  /* Lange sammensatte ord er normalt på norsk («tolvmånedersveksten»,
     «forsinkelsesrenter»). Ved 200 % tekststørrelse på 320 px sprenger de
     containeren. Bryt ordet framfor å la siden få vannrett rulling. */
  overflow-wrap:break-word;
}
img,picture,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-variation-settings:"wdth" 78,"wght" 750;letter-spacing:-0.018em;
  line-height:1.08;text-wrap:balance}
h1{font-size:var(--tekst-3xl)}
h2{font-size:var(--tekst-2xl)}
h3{font-size:var(--tekst-lg)}
.cond{font-variation-settings:"wdth" 78,"wght" 750;letter-spacing:-0.018em;
  line-height:1.05;text-wrap:balance}
.num{font-variation-settings:"wdth" 92,"wght" 620;letter-spacing:-0.02em}

/* Trygg sone: alt som ligger mot en skjermkant må kompensere for hakk
   og hjørneradius. Krever viewport-fit=cover i viewport-taggen. */
.wrap{
  width:100%;max-width:80rem;margin-inline:auto;
  padding-inline:max(clamp(1rem,4vw,2rem),env(safe-area-inset-left));
}

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

.hopp-til-innhold{
  position:absolute;left:-9999px;
  background:var(--bg);color:var(--ink);padding:0.75rem 1rem;z-index:calc(var(--z-sticky) + 1);
}
.hopp-til-innhold:focus{left:1rem;top:1rem;position:fixed}

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

/* ---------- masthead ---------- */
.mast{background:var(--spruce);color:var(--on-spruce)}
.mast .wrap{display:flex;align-items:center;gap:clamp(0.875rem,3vw,2.75rem);padding-block:1rem;flex-wrap:wrap}
.wordmark{font-variation-settings:"wdth" 72,"wght" 820;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.375rem);
  letter-spacing:-0.035em;line-height:0.9;white-space:nowrap;
  display:inline-flex;align-items:center;min-block-size:2.75rem}
.wordmark span{color:var(--rust-dim)}
nav.main{margin-left:clamp(0.75rem,2vw,1.75rem);
  display:flex;gap:clamp(0.375rem,1.2vw,1rem);flex-wrap:wrap;
  font-size:var(--tekst-sm);font-variation-settings:"wdth" 88,"wght" 560}
/* 44 px trykkflate på alt som ikke er en inline-lenke i brødtekst. */
/* Målt: «Lån» var 25 px bred og «Bolig» 34 px. Høyden var 44 px, bredden
   ikke. Et menypunkt er ingen inline-lenke i en setning og har ikke
   unntaket i WCAG 2.5.8. */
nav.main a{min-block-size:2.75rem;min-inline-size:2.75rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-bottom:2px solid transparent;
  transition:border-color .18s cubic-bezier(.22,1,.36,1)}
nav.main a:hover,nav.main a:focus-visible{border-bottom-color:var(--rust-dim)}
.searchbtn{display:inline-flex;align-items:center;justify-content:center;gap:0.4375rem;
  min-block-size:2.75rem;min-inline-size:2.75rem;
  background:none;border:1px solid var(--linje);color:var(--on-spruce);
  font:inherit;font-size:var(--tekst-sm);padding-inline:0.8125rem;border-radius:2px;
  cursor:pointer;transition:background .18s}
.searchbtn:hover{background:var(--spruce-2)}

/* ---------- brødsmuler ---------- */
.smuler{border-bottom:1px solid var(--rule);font-size:var(--tekst-xs)}
.smuler .wrap{display:flex;gap:0.5rem;align-items:center;min-block-size:2.75rem;
  color:var(--muted);flex-wrap:wrap}
.smuler a{color:var(--green);font-variation-settings:"wdth" 92,"wght" 560;
  display:inline-flex;align-items:center;min-block-size:2.75rem}
.smuler a:hover{text-decoration:underline}

/* ---------- seksjonsoverskrift ---------- */
/* flex-wrap slipper «Se alle 34 banker» ned på egen linje når raden blir for
   trang. Uten den dyttet lenken forsiden 117 px utenfor ved 200 % tekst. */
.sechead{display:flex;align-items:baseline;gap:1rem;margin:0 0 1.25rem;flex-wrap:wrap}
.sechead h2{font-size:var(--tekst-xl);margin:0;font-variation-settings:"wdth" 76,"wght" 780;
  letter-spacing:-0.015em}
.sechead .line{flex:1;height:1px;background:var(--rule-2)}
.sechead a{font-size:var(--tekst-sm);color:var(--green);
  font-variation-settings:"wdth" 92,"wght" 600;white-space:nowrap;
  display:inline-flex;align-items:center;min-block-size:2.75rem}
.sechead a:hover{text-decoration:underline}

.kicker{display:inline-block;font-size:var(--tekst-xs);letter-spacing:0.07em;
  text-transform:uppercase;font-variation-settings:"wdth" 90,"wght" 700;
  color:var(--rust);margin-bottom:0.75rem}
.tag{font-size:var(--tekst-xs);letter-spacing:0.05em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 660;color:var(--green);
  margin-bottom:0.375rem;display:block}
.dot{width:3px;height:3px;border-radius:50%;background:var(--rule-2);display:inline-block}

figure{margin:0}
figcaption{font-size:var(--tekst-sm);color:var(--muted);margin-top:0.5625rem;line-height:1.45}

.byline{display:flex;flex-wrap:wrap;gap:0.375rem 0.625rem;align-items:center;
  font-size:var(--tekst-sm);color:var(--muted)}
.byline a{color:var(--green);font-variation-settings:"wdth" 96,"wght" 600}
.byline a:hover{text-decoration:underline}
.byline b{font-variation-settings:"wdth" 100,"wght" 600;color:var(--ink-2)}

/* ---------- knapper ---------- */
.knapp,.cta{display:inline-flex;align-items:center;justify-content:center;
  min-block-size:2.75rem;padding-inline:1.25rem;
  background:var(--spruce);color:var(--on-spruce);
  font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 640;
  border-radius:2px;transition:background .18s;white-space:nowrap;
  text-align:center;min-width:0}
/* Ved 200 % tekststørrelse på 320 px er «Åpne kalkulatoren» bredere enn
   spalten, og nowrap dyttet hele verktøyboksen 50 px utenfor. Under
   30rem får knappeteksten brekke. */
@media(max-width:29.999rem){
  .knapp,.sechead a{white-space:normal}
}
.knapp:hover,.cta:hover{background:var(--spruce-3)}
.ghost{display:inline-flex;align-items:center;justify-content:center;
  min-block-size:2.75rem;padding-inline:1rem;
  border:1px solid var(--linje);color:var(--on-spruce);
  font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 600;
  border-radius:2px;transition:background .18s}
.ghost:hover{background:var(--spruce-2)}

/* ============================================================
   TALLPANEL
   auto-fit + minmax gir seks kolonner på desktop, tre på nettbrett
   og én på mobil uten en eneste breakpoint.
   ============================================================ */
.board{background:var(--spruce-2);color:var(--on-spruce);border-top:1px solid var(--linje)}
.board .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(10.5rem,100%),1fr));gap:0}
.cell{padding:1rem 1.25rem 0.9375rem;border-right:1px solid var(--linje)}
.cell:first-child{padding-left:0}
.cell:last-child{border-right:0}
.cell .lab{font-size:var(--tekst-xs);letter-spacing:0.02em;color:var(--on-spruce-dim);
  margin-bottom:0.3125rem;font-variation-settings:"wdth" 92,"wght" 520}
/* Tall skal aldri brytes: «4,25 %» er én verdi, ikke to ord. */
.cell .val{font-size:var(--tekst-xl);line-height:1.1;display:flex;align-items:baseline;
  gap:0.5rem;flex-wrap:wrap;white-space:nowrap}
.cell .val small{font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 600;letter-spacing:0}
.cell .src{font-size:var(--tekst-xs);color:var(--on-spruce-dim);margin-top:0.4375rem;opacity:.85}
/* Retningspilene i tallpanelet. Måtte bli tokener: .down sto med en
   hardkodet grønn og var derfor det eneste stedet på nettstedet som IKKE
   fulgte med da paletten ble blå. Målt 1,51:1 mot panelflaten. */
.up{color:var(--pil-opp)}
.down{color:var(--pil-ned)}
.flat{color:var(--on-spruce-dim)}

/* Under 40rem stables cellene, og skillelinjen flytter fra høyre til bunn. */
@media(max-width:39.999rem){
  .cell{padding:0.875rem 0;border-right:0;border-bottom:1px solid var(--linje)}
}

/* ============================================================
   ARTIKKELKORT — brukes i nyhetslista, i høyrespalten og på temasider.
   Derfor container query, ikke media query.
   Smaleste tilstand står først, uten @container, som fallback.
   ============================================================ */
.liste{container-type:inline-size;container-name:liste}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:0.25rem;
  padding-block:1.1875rem;border-top:1px solid var(--rule);align-items:start}
.row:first-of-type{border-top:0;padding-top:0}
.row .time{font-size:var(--tekst-sm);color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 560}
.row h3{margin:0 0 0.3125rem;font-size:var(--tekst-lg);
  font-variation-settings:"wdth" 82,"wght" 700;letter-spacing:-0.012em;line-height:1.18}
.row h3 a{transition:color .16s}
.row h3 a:hover{color:var(--green)}
.row p{margin:0;color:var(--ink-2);font-size:var(--tekst-sm);max-width:72ch}

@container liste (min-width:30rem){
  .row{grid-template-columns:4.625rem minmax(0,1fr);gap:clamp(0.875rem,2vw,1.75rem)}
  .row .time{padding-top:3px}
}

/* Bakgrunnsstoff under nyhetslista. Bevisst annerledes enn .row: uten
   tidsstempel, med lettere vekt. Leseren skal se at det ikke er dagsnytt. */
.sechead-2{margin-top:2rem}
.bakgrunn{list-style:none;margin:0;padding:0}
.bakgrunn li{padding-block:0.9375rem;border-top:1px solid var(--rule)}
.bakgrunn li:first-child{border-top:0;padding-top:0}
.bakgrunn a{display:block;font-size:var(--tekst-base);
  font-variation-settings:"wdth" 88,"wght" 640;letter-spacing:-0.008em;
  line-height:1.25;color:var(--ink);text-decoration:none;transition:color .16s}
.bakgrunn a:hover{color:var(--green)}
.bakgrunn p{margin:0.25rem 0 0;color:var(--ink-2);font-size:var(--tekst-sm);
  max-width:72ch}

/* ---------- nyhetsoppsett med høyrespalte ---------- */
.newsgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:80rem){
  .newsgrid{grid-template-columns:minmax(0,1fr) 18.75rem}
}

/* ---------- sammenlign / tabell ---------- */
.compare{background:var(--wash);border-block:1px solid var(--rule);
  padding-block:var(--luft-seksjon)}
.disclosure{font-size:var(--tekst-sm);color:var(--muted);margin:-0.5rem 0 1.125rem;max-width:70ch}
/* Tabellen får rulle i sin egen boks. Alternativet er at hele siden
   får vannrett rulling på mobil, og da er feilen bare flyttet. */
.tabellramme{overflow-x:auto}
table.rates{width:100%;border-collapse:collapse;font-size:var(--tekst-sm);
  background:var(--bg);border:1px solid var(--rule);min-width:34rem}
table.rates th{text-align:left;font-size:var(--tekst-xs);letter-spacing:0.03em;
  text-transform:uppercase;color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 640;padding:0.75rem 1rem;
  border-bottom:1px solid var(--rule-2)}
table.rates td{padding:0.9375rem 1rem;border-top:1px solid var(--rule)}
table.rates tbody tr:first-child td{border-top:0}
table.rates .bank{font-variation-settings:"wdth" 96,"wght" 640}
table.rates .eff{font-variation-settings:"wdth" 92,"wght" 700;font-size:var(--tekst-base)}
.ad-merke{font-size:var(--tekst-xs);letter-spacing:0.05em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule-2);padding:2px 6px;border-radius:2px;
  font-variation-settings:"wdth" 92,"wght" 600;white-space:nowrap}

/* ---------- verktøykort ---------- */
.tools{padding-block:var(--luft-seksjon)}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:0;
  border-top:1px solid var(--rule-2)}
.tool{padding:1.25rem 1.5rem 1.375rem;border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);transition:background .18s}
.tool:hover{background:var(--wash)}
.tool:last-child{border-right:0}
.tool h3{margin:0 0 0.375rem;font-size:var(--tekst-lg);
  font-variation-settings:"wdth" 84,"wght" 700;letter-spacing:-0.01em}
.tool p{margin:0;font-size:var(--tekst-sm);color:var(--muted);line-height:1.45}
.tool .arrow{color:var(--green);font-variation-settings:"wdth" 92,"wght" 700}
@media(max-width:39.999rem){.tool{border-right:0}}

/* ---------- datamodul ---------- */
.datamod{background:var(--spruce);color:var(--on-spruce);padding-block:var(--luft-seksjon)}
.datamod .wrap{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.75rem);align-items:center}
@media(min-width:64rem){
  .datamod .wrap{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr)}
}
.datamod h2{font-size:var(--tekst-2xl);margin:0 0 0.875rem;
  font-variation-settings:"wdth" 76,"wght" 780;letter-spacing:-0.02em;line-height:1.06}
.datamod p{margin:0 0 1.25rem;color:var(--on-spruce-dim);max-width:52ch}

/* ---------- forsidens toppsak ---------- */
.lead{padding-block:var(--luft-seksjon);border-bottom:1px solid var(--rule)}
.lead .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.75rem)}
@media(min-width:64rem){
  .lead .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);align-items:start}
}
h1.lead-h{font-size:var(--tekst-3xl);margin:0 0 1.125rem}
.standfirst{font-size:var(--tekst-lg);color:var(--ink-2);max-width:60ch;margin:0 0 1.375rem}
.leadimg{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--wash)}

/* ============================================================
   ARTIKKELSIDE
   ============================================================ */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);
  padding-block:clamp(1.5rem,3.5vw,2.75rem)}
@media(min-width:80rem){
  .layout{grid-template-columns:minmax(0,1fr) 18.75rem;align-items:start}
}
article{container-type:inline-size;container-name:artikkel;max-width:42rem}

.ingress{font-size:var(--tekst-lg);color:var(--ink-2);margin:0 0 1.375rem;max-width:36ch;
  font-variation-settings:"wdth" 100,"wght" 430}
@container artikkel (min-width:34rem){.ingress{max-width:52ch}}

article .byline{padding-block:0.875rem;border-block:1px solid var(--rule)}
article figure{margin-block:var(--luft-blokk)}
article figure img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--wash)}

.oppsummert{background:var(--wash);border:1px solid var(--rule);
  padding:clamp(1.125rem,3vw,1.625rem);margin-block:var(--luft-blokk)}
.oppsummert h2{font-size:var(--tekst-sm);letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;margin:0 0 0.875rem;color:var(--muted)}
.oppsummert ul{margin:0;padding-left:1.1rem;display:grid;gap:0.625rem}
/* Grid-elementer har min-width:auto og krymper derfor ikke under sitt
   lengste ord. Ved 200 % tekststørrelse på 320 px stakk lista 192 px
   utenfor. Fikset her, ikke med overflow-x:hidden. */
.oppsummert li{min-width:0}
.oppsummert b{font-variation-settings:"wdth" 100,"wght" 650}
.oppsummert .kilde{color:var(--muted);font-size:var(--tekst-sm)}

.brod>p{margin:0 0 1.35em}
.brod h2{font-size:var(--tekst-xl);margin:2em 0 0.6em;max-width:32ch}
.brod h3{font-size:var(--tekst-lg);margin:1.8em 0 0.5em;max-width:38ch}
.brod h2:first-of-type{margin-top:1.4em}
/* Unntaket i standarden: lenker i brødtekst er Inline og trenger
   ikke 44 px høyde. */
/* .cta må unntas sammen med .knapp. Uten den slo denne regelen inn på
   «Prisliste» i rentetabellen og ga lenkefargen på grønn flate: målt
   2,12:1 i grønt tema og 1,42:1 i blått, mot kravet på 4,5:1. */
.brod a:not(.knapp):not(.cta){color:var(--green);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.brod blockquote{margin:1.8em 0;padding:0 0 0 1.2rem;border-left:1px solid var(--rule-2);
  font-size:var(--tekst-lg);color:var(--ink-2);max-width:52ch}
.brod blockquote cite{display:block;margin-top:0.625rem;font-size:var(--tekst-sm);
  font-style:normal;color:var(--muted)}

.tallboks{border:1px solid var(--rule);margin-block:var(--luft-blokk)}
.tallboks h2{font-size:var(--tekst-sm);letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;margin:0;padding:0.875rem 1.125rem;
  background:var(--spruce);color:var(--on-spruce)}
/* Tabeller får rulle i sin egen ramme. Ved 200 % tekststørrelse på 320 px
   stakk tallboksen 192 px utenfor, fordi .verdi har white-space:nowrap og
   tall ikke skal brytes. Rammen løser det uten overflow-x:hidden på siden. */
.tallboks .tabellramme{overflow-x:auto}
.tallboks table{width:100%;border-collapse:collapse;font-size:var(--tekst-sm)}
.tallboks td{padding:0.75rem 1.125rem;border-top:1px solid var(--rule);vertical-align:top}
.tallboks tr:first-child td{border-top:0}
.tallboks .verdi{font-variation-settings:"wdth" 92,"wght" 700;font-size:var(--tekst-base);
  white-space:nowrap;text-align:right}
.tallboks .kilde{color:var(--muted);font-size:var(--tekst-xs);display:block;margin-top:2px}

.verktoy{border:1px solid var(--rule-2);padding:clamp(1.125rem,3vw,1.5rem);
  margin-block:var(--luft-blokk);display:grid;gap:0.875rem}
.verktoy>*{min-width:0}
@container artikkel (min-width:32rem){
  .verktoy{grid-template-columns:1fr auto;align-items:center;gap:1.5rem}
}
.verktoy h3{margin:0 0 0.25rem;font-size:var(--tekst-lg)}
.verktoy p{margin:0;color:var(--muted);font-size:var(--tekst-sm)}

.kilder{margin-block:clamp(1.75rem,4vw,2.5rem) 0;padding-top:1.25rem;
  border-top:1px solid var(--rule-2)}
.kilder h2{font-size:var(--tekst-sm);letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;color:var(--muted);margin:0 0 0.75rem}
.kilder ol,.kilder ul{margin:0;padding-left:1.2rem;display:grid;gap:0.5625rem;font-size:var(--tekst-sm)}
.kilder li{min-width:0}
.kilder a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.rettelse{margin-top:1.375rem;padding:0.875rem 1rem;background:var(--wash);
  font-size:var(--tekst-sm);color:var(--ink-2)}
.rettelse a{color:var(--green);text-decoration:underline}

/* ---------- høyrespalte ---------- */
aside{display:grid;gap:1.75rem;align-content:start}
.rail-sticky{position:static}
@media(min-width:80rem){
  .rail-sticky{position:sticky;top:1.5rem;align-self:start}
}
/* Er vinduet høyt nok til hele spalten, følger «Mest lest» også med.
   Under 62rem høyde ville bunnen av annonsen blitt permanent kuttet,
   og en annonse teller ikke som visning før halvparten er synlig. */
@media(min-width:80rem) and (min-height:62rem){
  aside{position:sticky;top:1.5rem;align-self:start}
}
.mestlest h2{font-size:var(--tekst-sm);letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;color:var(--muted);margin:0 0 0.75rem;
  padding-bottom:0.625rem;border-bottom:1px solid var(--rule-2)}
.mestlest ol{margin:0;padding:0;list-style:none;counter-reset:n}
.mestlest li{counter-increment:n;display:grid;grid-template-columns:1.4rem 1fr;gap:0.625rem;
  padding-block:0.75rem;border-top:1px solid var(--rule)}
.mestlest li:first-child{border-top:0}
.mestlest li::before{content:counter(n);color:var(--rust);
  font-variation-settings:"wdth" 92,"wght" 700;font-size:var(--tekst-sm)}
.mestlest a{font-size:var(--tekst-sm);font-variation-settings:"wdth" 88,"wght" 620;line-height:1.3}
.mestlest a:hover{color:var(--green)}

/* ---------- relaterte ---------- */
.relatert{border-top:1px solid var(--rule-2);padding-block:var(--luft-seksjon)}
.relatert h2{font-size:var(--tekst-lg);margin:0 0 1.125rem}
.relatertgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:0}
.relatertgrid a{padding-block:1.125rem;border-top:1px solid var(--rule)}
@media(min-width:48rem){
  .relatertgrid a{padding:0 1.5rem;border-top:0;border-left:1px solid var(--rule)}
  .relatertgrid a:first-child{padding-left:0;border-left:0}
}
.relatertgrid h3{font-size:var(--tekst-base);margin:0;
  font-variation-settings:"wdth" 84,"wght" 680}
.relatertgrid a:hover h3{color:var(--green)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding-block:var(--luft-seksjon) 2.5rem;
  font-size:var(--tekst-sm)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:2rem 1.75rem}
.fgrid h4{margin:0 0 0.75rem;font-size:var(--tekst-xs);letter-spacing:0.05em;
  text-transform:uppercase;color:var(--muted);font-variation-settings:"wdth" 92,"wght" 660}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem}
.fgrid a{display:inline-flex;align-items:center;min-block-size:2.75rem}
.fgrid a:hover{color:var(--green)}

/* Eierskapslinjen står her bevisst. Pengeguide eies av samme selskap som
   driver flere lånetjenester, og det skal stå åpent. Ikke fjern den.
   Adressen skal ikke inn — den er offentlig i Brønnøysundregistrene. */
.eier{margin-top:2.25rem;padding-top:1.375rem;border-top:1px solid var(--rule);
  color:var(--muted);font-size:var(--tekst-xs);max-width:78ch}
.eier b{color:var(--ink-2);font-variation-settings:"wdth" 100,"wght" 620}

/* ---------- animasjon ---------- */
.rise{animation:rise .6s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Tallpanelceller som er lenker. Styringsrentecellen går til temasiden.
   Hele cellen er klikkflaten, ikke bare tallet. */
.cell-lenke{text-decoration:none;color:inherit;transition:background .18s}
.cell-lenke:hover,.cell-lenke:focus-visible{background:var(--spruce-3)}
.cell-pil{opacity:0;margin-left:.35em;transition:opacity .18s}
.cell-lenke:hover .cell-pil,.cell-lenke:focus-visible .cell-pil{opacity:1}

/* Skjult for øyet, lest av skjermleser. */
.visuelt-skjult{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Tabeller i brødtekst. Fagartiklene i artikler/*.md lager vanlige
   <table> uten klasse, og de var tidligere helt ustilte. */
.brod .tabellramme{overflow-x:auto;margin-block:var(--luft-blokk)}
.brod table{width:100%;border-collapse:collapse;font-size:var(--tekst-sm);
  background:var(--bg);border:1px solid var(--rule)}
.brod thead th{text-align:left;font-size:var(--tekst-xs);letter-spacing:0.03em;
  text-transform:uppercase;color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 640;padding:0.75rem 1rem;
  background:var(--wash);border-bottom:1px solid var(--rule-2)}
.brod td{padding:0.75rem 1rem;border-top:1px solid var(--rule)}
.brod tbody tr:first-child td{border-top:0}

/* Lister i brødtekst, blant annet kildelista nederst. */
.brod ul{margin-block:1em;padding-left:1.2rem;display:grid;gap:0.5rem}
.brod li{padding-left:2px;min-width:0}

/* FAQ. Artiklene lager <details> av avsnitt som starter med et spørsmål
   i fet skrift. Stilen lå tidligere bare i side-styringsrenten.css, så
   fagartiklene fikk nettleserens standardtrekant. */
.brod details{background:var(--wash);border:1px solid var(--rule);
  border-radius:4px;margin-bottom:0.625rem}
.brod summary{padding:1rem 1.25rem;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  font-variation-settings:"wdth" 96,"wght" 680;min-block-size:2.75rem}
.brod summary::-webkit-details-marker{display:none}
.brod summary::after{content:"+";font-size:1.4rem;color:var(--rust);
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
.brod details[open] summary::after{transform:rotate(45deg)}
.brod details p{margin:0 1.25rem 1.125rem}

/* Vekselvis bakgrunn på FAQ-en, så det er lett å se hvor ett spørsmål
   slutter og det neste begynner. */
.brod details:nth-of-type(odd){background:var(--wash)}
.brod details:nth-of-type(even){background:var(--bg)}
.brod details[open]{background:var(--wash)}

/* ---------- rettelser etter gjennomgang ---------- */

/* FAQ: spørsmål og svar så like ut. Spørsmålet får nå tydelig mer vekt og
   litt mer størrelse, så hierarkiet er synlig uten å lese. */
.brod summary{font-size:var(--tekst-base);
  font-variation-settings:"wdth" 96,"wght" 720;color:var(--ink)}
.brod details p{font-size:var(--tekst-sm);
  font-variation-settings:"wdth" 100,"wght" 400;color:var(--ink-2)}

/* Hele raden er klikkflate, ikke bare teksten. summary er allerede
   blokknivå, men uten dette strakk ikke flex-innholdet seg helt ut. */
.brod summary{width:100%}

/* Spørsmålsteksten er en naken tekstnode i en flex-boks, og blir dermed et
   anonymt flex-element med min-width:auto. Det kan ikke krympe under sitt
   lengste ord, og overflow-wrap:break-word hjelper ikke, for den påvirker
   ikke min-content-bredden. «anywhere» gjør det. Ved 200 % tekst på 320 px
   stakk spørsmålene 78 px utenfor. Bryter bare når linja faktisk ikke får
   plass, så vanlig lesing ser uendret ut. */
.brod summary,.brod details p{overflow-wrap:anywhere}

/* Tallpanelceller som er lenker: hover-flaten gikk helt inntil kanten.
   Innrykk gir flaten luft mot nabocellen og mot panelkanten. */
.cell-lenke{margin:0.25rem;border-radius:3px}