/* ============================================================
   side-forbrukslan.css

   Lastes etter css/pengeguide.css, som eier alle tokener. Ingen
   fargeverdier her som ikke står i paletten: skript/palett.mjs
   stopper bygget på dem.
   ============================================================ */

/* ---------- toppen ---------- */
/* Todelt fra 64rem, samme terskel som .lead-topp bruker ellers.
   Under det faller figuren bort helt: den er forklaring, ikke
   innhold, og skal ikke dytte teksten nedover på mobil. */
.topp-rad{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  padding-block:var(--luft-seksjon) 0}
@media(min-width:64rem){.topp-rad{grid-template-columns:1.05fr .95fr}}
/* Uten figur (forbrukslån, se listefigur.mjs): én kolonne, og teksten får
   lesebredde i stedet for å strekke seg over hele wrap-en. */
.topp-rad.uten-figur{grid-template-columns:1fr}
.topp-rad.uten-figur>div:first-child{max-width:44rem}
.topp-rad.uten-figur .figur{display:none}
.topp-rad h1{font-size:var(--tekst-3xl);margin:.625rem 0 1rem}

/* ---------- figuren ----------
   Tolv identiske kort spredt rundt ett ferdig kort. Den forklarer
   overskriften: tolv navn på det samme lånet.

   STÅR STILLE. Fram til 17. august 2026 samlet kortene seg og spredte seg
   igjen i en ni sekunders sløyfe. Tatt bort, og ikke av smak: siden skal
   levere tall, og en bevegelse i sidehodet konkurrerer med tallene om
   blikket. Figuren gjenbrukes dessuten på hver produktliste fra
   Finansportalen (forbrukslån, billån, refinansiering, og de som kommer),
   så det som velges her ganges med antall lister. Stillbildet er det samme
   som miniatyren på /lan bruker (figurStillbilde i forbrukslanside.mjs),
   så figuren ser lik ut alle steder.

   Kortene er TOMME med vilje. Med logoer ville figuren sagt det motsatte av
   det den skal: tolv ulike banker i stedet for tolv navn på samme tilbud.

   Skjules under 64rem: figuren er forklaring, ikke innhold, og skal ikke
   dytte teksten nedover på mobil. */
.figur{display:none}
@media(min-width:64rem){.figur{display:block}}
.figur svg{width:100%;height:auto;display:block;overflow:visible}
.figur .kort{transform-box:fill-box;transform-origin:center;
  transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.85}
.figur .ekte{transform-box:fill-box;transform-origin:center;opacity:1}

/* ---------- tre nøkkeltall ----------
   Ligger UNDER kalkulatoren. Se malen for hvorfor. Avstanden opp er kort
   med vilje: trippelen er utdata fra kontrollene rett over, ikke en ny
   seksjon, og skal leses som del av samme boks. */
/* min(11rem,100%): minsteverdien i en minmax() krymper ikke under seg selv.
   Se .bakgrunn--todelt i pengeguide.css for hele begrunnelsen. */
.spenn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-block:var(--luft-blokk)}
.kalk+.spenn{margin-top:.75rem}
.spenn+.disclosure{margin-top:.75rem}
.spenn>div{background:var(--bg);padding:1.125rem 1.25rem;min-width:0}
.spenn dt{font-size:var(--tekst-xs);font-variation-settings:"wdth" 92,"wght" 520;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.spenn dd{margin:0;font-size:var(--tekst-2xl);
  font-variation-settings:"wdth" 92,"wght" 620;letter-spacing:-.02em;line-height:1.05}
.spenn .kilde{display:block;font-size:var(--tekst-xs);color:var(--muted);
  margin-top:.375rem;overflow-wrap:anywhere}
.spenn .billig dd{color:var(--ned)}
.spenn .dyr dd{color:var(--opp)}

/* ---------- pivoten ---------- */
.pivot{background:var(--wash);border-left:3px solid var(--rust);
  padding:clamp(1.125rem,3vw,1.625rem);margin-block:var(--luft-blokk);min-width:0}
.pivot h2{font-size:var(--tekst-lg);font-variation-settings:"wdth" 80,"wght" 760;
  margin:0 0 .625rem;overflow-wrap:anywhere}
.pivot p{margin:0 0 .625rem;color:var(--ink-2);max-width:64ch}
.pivot p:last-child{margin:0}
.pivot b{font-variation-settings:"wdth" 100,"wght" 650;color:var(--ink)}

/* ---------- annonsefelt ----------
   MØRK flate, med vilje. Merkeplikten er oppfylt av «Annonselenker» og
   rel="sponsored", men en stiplet ramme rundt en lys boks ligner fortsatt
   på resten av siden. Den mørke flaten gjør det umulig å forveksle
   annonselenkene med lånetabellen, som er lys. Det er et strengere skille
   enn regelverket krever, og det er verdt å ha på en side som rangerer
   på pris. Kalkulatoren er lys av samme grunn: de to blokkene skal ikke
   kunne forveksles med hverandre heller. */
.annonsefelt{background:var(--spruce);color:var(--on-spruce);
  padding:clamp(1rem,2.5vw,1.5rem);margin-block:var(--luft-blokk);min-width:0}
.annonsefelt>.kicker{color:var(--rust-dim);margin-bottom:.25rem}
.annonsefelt .forklar{margin:.25rem 0 1.125rem;font-size:var(--tekst-sm);
  color:var(--on-spruce-dim);max-width:64ch}
.annonsefelt.etter h2{font-size:var(--tekst-lg);color:var(--on-spruce);
  font-variation-settings:"wdth" 80,"wght" 760;margin:.25rem 0 .5rem}
/* min(15rem,100%) er strengere nødvendig her enn de fleste andre steder:
   .formidlere ligger inne i .annonsefelt, som har sin egen polstring. Målt
   ved 320 px skjerm er beholderen 256 px mot en minsteverdi på 240, altså
   16 px klaring. Se .bakgrunn--todelt i pengeguide.css. */
.formidlere{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:1rem}
.formidler{background:rgba(255,255,255,.05);border:1px solid var(--linje);
  padding:1rem 1.125rem;display:flex;flex-direction:column;min-width:0;position:relative}
/* Anbefalt-merket beholder grønt. Det er samme farge som «Billigst» i
   tabellen, så leseren kjenner igjen at grønt betyr vår anbefaling.
   Kantlinjen er derimot IKKE grønn her: --ned mot --spruce måler 2,04:1,
   og en grønn kant på marineblått er både svak og utydelig. Kortet skilles
   ut med en lysere flate i stedet, og merket bærer betydningen. */
.formidler.anbefalt{background:rgba(255,255,255,.11);border-color:var(--ned)}
.anbefalt-merke{align-self:flex-start;background:var(--ned);color:var(--on-spruce);
  font-size:var(--tekst-xs);font-variation-settings:"wdth" 92,"wght" 660;
  letter-spacing:.07em;text-transform:uppercase;padding:.125rem .5rem;
  border-radius:2px;margin-bottom:.5rem}
.formidler h3{font-size:var(--tekst-base);color:var(--on-spruce);
  font-variation-settings:"wdth" 84,"wght" 700;margin:0 0 .25rem}
.formidler p.u{margin:0 0 1rem;font-size:var(--tekst-sm);color:var(--on-spruce-dim);
  flex:1;line-height:1.45}
/* Gul knapp med mørk tekst: 8,43:1. Hover følger husbanneret, som bytter
   til hvit flate med mørk tekst i stedet for å finne på en ny gulnyanse. */
/* Priseksempelet står etter knappen og har ulik lengde per annonsør. Med
   to kort ved siden av hverandre gjorde det at knappene havnet på ulik
   høyde: Uno bruker to linjer, Motty én. Plassen til to linjer settes av
   uansett, så knappene står på linje. Et eksempel på tre linjer ville
   bryte det igjen — da må denne opp. */
.formidler .eks{min-block-size:2.8em}
.annonsefelt .cta{width:100%;background:var(--rust-dim);color:var(--ink)}
.annonsefelt .cta:hover,.annonsefelt .cta:focus-visible{
  background:var(--on-spruce);color:var(--spruce)}
/* Renteeksempelet. anywhere fordi «etableringsgebyr» og
   «nedbetalingstid» er nøyaktig de ordene som sprenger en smal spalte. */
.eks{font-size:var(--tekst-xs);line-height:1.4;color:var(--muted);
  margin:.625rem 0 0;overflow-wrap:anywhere}
.annonsefelt .eks{color:var(--on-spruce-dim)}

/* ---------- kalkulator ----------
   LYS flate. To grunner. Den skal ikke ligne annonsefeltet, som nå er mørkt.
   Og gull på lys flate består ikke kontrastkravet: --rust-dim er dokumentert
   som aksentfarge kun for mørk flate. Aktive kontroller er derfor --spruce,
   ikke gull.

   To kontroller, ikke tre. Den tredje kolonnen inneholdt forklarende tekst i
   samme rutenett som feltene, med «Grått og farget» der en verdi skal stå.
   Den forklaringen er flyttet til en fargeforklaring rett over lista, der
   stolpene faktisk er. */
.kalk{background:#fff;border:1px solid var(--rule);color:var(--ink);
  padding:clamp(1rem,2.5vw,1.5rem);margin-block:var(--luft-blokk);
  display:grid;gap:1.5rem 2.5rem;min-width:0}
@media(min-width:44rem){.kalk{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.kalk .felt{min-width:0}
.kalk label,.kalk .felt-tittel{display:block;font-size:var(--tekst-xs);
  font-variation-settings:"wdth" 92,"wght" 520;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}

/* Tallfeltet. NN/g: en skyvekontroll er dårlig til presise verdier, og
   lånebeløp er nettopp en verdi folk ofte vet nøyaktig. De to styrer samme
   tall, og holdes i takt begge veier.

   Myk fylt flate, ikke hard ramme. En hard ramme leses som en ramme rundt
   en verdi — noe siden viser deg. En fylt flate med avrundede hjørner leses
   som et felt: noe du kan skrive i. */
.belopfelt{display:flex;align-items:center;gap:.75rem;max-width:15rem;
  border:0;background:var(--wash);border-radius:10px;
  padding:.5rem 1rem;min-block-size:3.25rem}
.belopfelt:focus-within{box-shadow:0 0 0 2px var(--spruce)}
.kalk .belopfelt input{
  width:100%;min-width:0;background:transparent;border:0;
  color:var(--ink);font:inherit;font-size:var(--tekst-2xl);
  font-variation-settings:"wdth" 92,"wght" 620;letter-spacing:-.02em;
  padding:0;appearance:textfield;-moz-appearance:textfield}
.kalk .belopfelt input::-webkit-outer-spin-button,
.kalk .belopfelt input::-webkit-inner-spin-button{appearance:none;margin:0}
.kalk .belopfelt input:focus{outline:0}
.kalk .enhet{color:var(--muted);font-size:var(--tekst-lg);
  font-variation-settings:"wdth" 92,"wght" 620}

/* Skyvekontrollen.

   Figur mot grunn. Tommelen er HVIT med en ring i --spruce, og fyllet er
   --spruce-3, som er lysere enn ringen. En tommel i samme farge som fyllet
   forsvinner inn i sporet, og da ser hele kontrollen billig ut.

   --fyll settes fra JavaScript ved hver bevegelse. accent-color slutter å
   virke i det øyeblikket sporet får egen stil, så fyllet må tegnes som en
   gradient med et stoppunkt fra en variabel. Variabelen settes i den
   UMIDDELBARE løypa, ikke inne i requestAnimationFrame: i rAF-en ligger
   fargen ett bilde bak tommelen mens du drar, og det ser man. */
/* touch-action:none slår av nettleserens egen «dette er kanskje en
   sidescroll»-vurdering på selve kontrollen. Uten den taper de første
   piksledragene på mobil mens nettleseren bestemmer seg, og kontrollen
   føles treg akkurat i det øyeblikket du tar i den. */
/* appearance:none på SELVE input-elementet er ikke valgfritt. Uten den
   ignorerer WebKit ::-webkit-slider-thumb helt og tegner sin egen tommel.
   Den feilen er usynlig så lenge accent-color er satt til omtrent samme
   farge som tommelen din skulle hatt: da ser standardtommelen riktig ut,
   og du tror reglene virker. De virket ikke. */
.kalk input[type=range]{appearance:none;-webkit-appearance:none;
  width:100%;margin:1.25rem 0 0;background:transparent;
  block-size:2.75rem;cursor:pointer;touch-action:none}
.kalk input[type=range]::-webkit-slider-runnable-track{
  block-size:.75rem;border-radius:999px;
  background:linear-gradient(90deg,var(--spruce-3) var(--fyll,25%),var(--rule) var(--fyll,25%))}
.kalk input[type=range]::-moz-range-track{
  block-size:.75rem;border-radius:999px;background:var(--rule)}
.kalk input[type=range]::-moz-range-progress{
  block-size:.75rem;border-radius:999px;background:var(--spruce-3)}
/* 36 px inkludert ringen, derav border-box. Grepet skal treffes med en
   tommel på en telefon, ikke med en musepeker: 36 px synlig inne i et
   44 px høyt trykkfelt. margin-top sentrerer tommelen på sporet i WebKit:
   (12 − 36) / 2 = −12 px. Endrer du størrelsen, må denne følge med. */
.kalk input[type=range]::-webkit-slider-thumb{
  appearance:none;box-sizing:border-box;
  inline-size:2.25rem;block-size:2.25rem;border-radius:50%;
  background:#fff;border:5px solid var(--spruce);
  box-shadow:0 2px 8px rgba(0,0,0,.25);margin-top:-.75rem;
  transition:transform .12s ease}
.kalk input[type=range]::-moz-range-thumb{
  box-sizing:border-box;inline-size:2.25rem;block-size:2.25rem;border-radius:50%;
  background:#fff;border:5px solid var(--spruce);
  box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .12s ease}
/* Vokser mens du holder. Gir kontrollen en fysisk følelse uten å flytte noe. */
.kalk input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.kalk input[type=range]:active::-moz-range-thumb{transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){
  .kalk input[type=range]::-webkit-slider-thumb,
  .kalk input[type=range]::-moz-range-thumb{transition:none}
  .kalk input[type=range]:active::-webkit-slider-thumb,
  .kalk input[type=range]:active::-moz-range-thumb{transform:none}
}
.kalk input[type=range]:focus-visible{outline:2px solid var(--spruce);
  outline-offset:4px}
.endepunkt{display:flex;justify-content:space-between;gap:1rem;
  font-size:var(--tekst-xs);color:var(--muted);margin-top:-.375rem}

/* Nedbetalingstid som knapper, ikke skyvekontroll. Sju verdier er ikke et
   kontinuum, og en skyvekontroll skjuler at 15 år i det hele tatt finnes:
   du ser bare tallet du står på. Radioknapper gir piltastnavigasjon og ett
   tabstopp gratis, uten JavaScript for tastaturet. */
.tidsvalg,.typevalg{display:flex;flex-wrap:wrap;gap:.5rem;position:relative}
.tidsvalg input,.typevalg input{position:absolute;inline-size:1px;block-size:1px;
  opacity:0;pointer-events:none}
.tidsvalg label,.typevalg label{display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:3.5rem;min-block-size:2.75rem;padding:0 .75rem;margin:0;
  border:1px solid var(--rule-2);background:#fff;color:var(--ink-2);
  font-size:var(--tekst-sm);letter-spacing:0;text-transform:none;
  font-variation-settings:"wdth" 92,"wght" 620;cursor:pointer;user-select:none}
.tidsvalg label:hover,.typevalg label:hover{border-color:var(--spruce);color:var(--ink)}
.tidsvalg input:checked+label,.typevalg input:checked+label{background:var(--spruce);border-color:var(--spruce);
  color:var(--on-spruce)}
.tidsvalg input:focus-visible+label,.typevalg input:focus-visible+label{outline:2px solid var(--spruce);outline-offset:2px}
.kalk .hint{font-size:var(--tekst-xs);color:var(--muted);
  margin:.625rem 0 0;line-height:1.4;max-width:44ch}

/* ---------- kildestripa over lista ----------
   FINANSPORTALEN-MERKET FØRST OG STORT. Det er en avtaleforpliktelse (logoen
   skal vises der dataene brukes) og det sterkeste troverdighetsargumentet
   lista har. Fram til 17. august 2026 sto det som en 36 px høy fotnote i en
   tekstblokk mellom fem andre avsnitt. Nå: en tonet stripe uten ramme, med
   logoen 3rem høy til venstre og ÉN setning ved siden av som sier hva som
   er deres og hva som er vårt.

   Uten ramme med vilje: lista under er kort med kanter, og en boks til over
   den ville vært den fjerde kanten i høyden. Flaten i --wash er nok til å
   skille stripa fra sidens hvite/blå grunn.

   Prinsipp: kilden er en del av dataene, ikke en fotnote til dem. Den skal
   leses FØR første rad, ikke etter.

   Ikke en annonse, og skal ikke ligne: ingen mørk flate, ingen knapp, ingen
   «Annonse». Logoen kjøres uendret, høyde låst, bredde følger (avtalen). */
.kilde{display:flex;align-items:center;gap:1rem 1.25rem;flex-wrap:wrap;
  padding:.875rem 1rem;margin:0 0 .75rem;background:var(--wash);border-radius:8px;
  min-width:0}
.kilde-merke{display:inline-flex;line-height:0;flex:0 0 auto}
.kilde-merke img{block-size:3rem;inline-size:auto;display:block}
.kilde p{margin:0;flex:1 1 20rem;min-width:0;font-size:var(--tekst-sm);
  color:var(--ink-2);line-height:1.5}
.kilde p b{font-variation-settings:"wdth" 100,"wght" 650;color:var(--ink)}
@media(max-width:44rem){.kilde{padding:.75rem .875rem}.kilde-merke img{block-size:2.5rem}}

/* Én linje under stripa: beløp og løpetid (JS oppdaterer), sortering, og
   hva stolpen viser. Rutemerket foran stolpesetningen er selve fargen
   stolpen har, så leseren kjenner den igjen på radene. */
.listelinje{margin:0 0 .875rem;font-size:var(--tekst-sm);color:var(--muted);
  max-width:80ch;line-height:1.55}
.listelinje b{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 650}
.listelinje .stolpe{display:inline-block;inline-size:1.5rem;block-size:.375rem;
  border-radius:999px;background:var(--opp);vertical-align:.15em;margin:0 .375rem 0 .125rem}

/* ---------- lånelista ----------
   LAGT OM 17. AUGUST 2026, MOBIL FØRST. Reglene under er skrevet for den
   smaleste raden (320 px) og bygges ut fra 44rem. Begrunnelsene, én per
   valg, står ved regelen; det samlede resonnementet i
   dokumentasjon/handoff-17-august-2026-kveld.md.

   ETT KANTNIVÅ. Kortet er beholderen. Ingenting inni kortet har egen kant:
   ikke logoen, ikke knappen, ikke banklista. Prinsipp: en boks i en boks
   er alltid feil. Målt før omleggingen: fire nivåer.

   KORT, IKKE HÅRSTREKER. På 390 px er hver rad en stabel på seks til åtte
   linjer, og en hårstrek mellom stabler skiller dem ikke godt nok fra
   hverandre. Kortet grupperer ved innramming der nærhet alene ikke rekker.
   Lett hånd: 1 px kant i --rule-2, ingen skygge, hvit flate mot --bg. */
.faller{font-size:var(--tekst-sm);color:var(--muted);margin:0 0 .75rem}
.lanliste{display:grid;gap:.625rem}
.ingen{padding:1.5rem 0;color:var(--ink-2)}
.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* .lan er en <article>, og article{max-width:42rem} i det delte stilarket
   ville stoppet raden midt i lista. Felle 1 i tokens.md.

   Mobilgrid: nummer og logo i to smale kolonner, resten i den tredje.
   Tallene, handlingen og stolpen spenner over kolonne 3, så de flukter med
   navnet, ikke med nummeret. */
.lan{max-width:none;background:#fff;border:1px solid var(--rule-2);
  border-radius:8px;padding:1rem 1rem 1.125rem;display:grid;
  grid-template-columns:1.25rem 2.25rem minmax(0,1fr);
  gap:0 .75rem;align-items:center;min-width:0}
/* Det billigste får grønn kant og grønne tall. IKKE en innskutt sidestripe:
   sidestripen var et dekorativt element som ga kortet en kant til. */
.lan.best{border-color:var(--ned)}
.lan .nr{font-size:var(--tekst-sm);align-self:start;padding-top:.3rem;
  font-variation-settings:"wdth" 92,"wght" 620;color:var(--muted)}
.lan.best .nr{color:var(--ned)}

/* LOGO UTEN BOKS. Ikonet vises bart med runde hjørner; initialene i en tonet
   rute uten kant, samme mål og samme hjørner, så de deler silhuett. Egen
   kolonne, på linje med navnet: den flytter seg ikke når flagg eller vilkår
   tar flere linjer, fordi flagget står ETTER navnet, ikke over. */
.logo{inline-size:2.25rem;block-size:2.25rem;align-self:start;
  display:grid;place-items:center;border-radius:6px;overflow:hidden;
  background:var(--wash);color:var(--muted);
  font-size:var(--tekst-xs);font-variation-settings:"wdth" 92,"wght" 700}
.logo.har-merke{background:none}
.logo img{inline-size:100%;block-size:100%;object-fit:contain;display:block;border-radius:6px}

.navn{min-width:0}
.navn h3{font-size:var(--tekst-base);margin:0;overflow-wrap:anywhere;
  font-variation-settings:"wdth" 82,"wght" 700;line-height:1.3}
.vilkar{display:block;font-size:var(--tekst-sm);color:var(--muted);
  margin-top:.125rem;overflow-wrap:anywhere}
/* MERKELAPPEN: på mobil på egen linje UNDER navnet, på bred skjerm etter
   navnet på samme linje. Aldri over: da skyver den navnet ned og logoen
   får ikke noe fast å flukte med. Aldri inni navnet på smal skjerm: målt
   på 390 px brakk «BN Bank ASA» til «BN Bank / ASA» for å gi plass til
   «SAMME LÅN HOS 13 BANKER». Prinsipp: en merkelapp er en egenskap ved
   navnet og skal ikke ødelegge lesingen av det. */
.flagg{display:table;margin:.25rem 0 0;
  font-size:var(--tekst-xs);letter-spacing:.06em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 640;padding:.1rem .45rem;border-radius:2px;
  line-height:1.4;white-space:nowrap}
.flagg.b{background:var(--ned);color:var(--on-spruce)}
.flagg.m{background:var(--wash);color:var(--ink-2)}

/* TO TALL PÅ ÉN LINJE. Totalprisen størst (lista er sortert på den),
   effektiv rente nest størst (tallet loven sier du skal sammenligne på).
   Undertekst under hver i stedet for versaletikett over. */
.tall{grid-column:3;margin-top:.625rem;display:flex;flex-wrap:wrap;
  gap:.25rem 1.5rem;align-items:flex-end;min-width:0}
.tall .pris,.tall .nokkel{display:block;min-width:0}
.tall .total{display:block;font-size:var(--tekst-xl);line-height:1.05;
  font-variation-settings:"wdth" 92,"wght" 620;letter-spacing:-.02em;color:var(--ink)}
.tall .verdi{display:block;font-size:var(--tekst-lg);line-height:1.1;
  font-variation-settings:"wdth" 92,"wght" 620;letter-spacing:-.02em;color:var(--ink)}
.tall .under{display:block;font-size:var(--tekst-xs);color:var(--muted);margin-top:.15rem}
.lan.best .tall .total,.lan.best .tall .verdi{color:var(--ned)}

/* HANDLINGEN: fylt, kantløs trykkflate på 2.75rem (44 px). «Søk nå» er den
   eneste MØRKE fylte knappen, så betalt og redaksjonell vei ikke ser like
   ut. Merkingen står over knappen den gjelder. */
.handling{grid-column:3;margin-top:.75rem;display:flex;flex-direction:column;
  gap:.375rem;min-width:0;align-items:stretch}
.les-mer{display:inline-flex;align-items:center;justify-content:center;
  min-block-size:2.75rem;padding-inline:1rem;border:0;border-radius:4px;
  background:var(--wash);color:var(--spruce);
  font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 640;
  text-align:center;text-decoration:none;transition:background .18s}
.les-mer:hover{background:var(--rule)}
.les-mer:focus-visible{outline:2px solid var(--spruce);outline-offset:2px}
.handling .cta{width:100%}
.handling .merk{font-size:var(--tekst-xs);color:var(--muted);text-align:left;
  letter-spacing:.05em;text-transform:uppercase;margin-top:.25rem;
  font-variation-settings:"wdth" 92,"wght" 520}

/* STOLPEN, uten egen etikett per rad. Tegnforklaringen over lista sier hva
   den viser. 100 prosent er den STØRSTE differansen i lista, ikke høyeste
   totalpris. position:relative er ikke pynt: overflow klipper bare det den
   er containing block for. Se overflow.mjs. */
.diff{grid-column:3;margin-top:.875rem;min-width:0}
.dspor{block-size:.375rem;background:var(--wash);border-radius:999px;
  overflow:hidden;position:relative}
.dfyll{display:block;block-size:100%;background:var(--opp);border-radius:999px}
.dgrunn{margin:.375rem 0 0;font-size:var(--tekst-sm);color:var(--ink-2);
  overflow-wrap:anywhere}
.diff.best .dgrunn{color:var(--muted)}

/* Priseksempelet. Står åpent (vakt 11). Dempet, men over 4,5:1. */
.lan .eks{grid-column:3;margin:.5rem 0 0;font-size:var(--tekst-xs);
  color:var(--muted);line-height:1.45;overflow-wrap:anywhere}

/* BANKENE BAK EN SAMLET RAD: <details>. Virker uten JavaScript. Summary er
   en trykkflate på 2.75rem. Lista er én setning, ingen bokser. */
.samme{grid-column:3;margin-top:.25rem;min-width:0;font-size:var(--tekst-sm)}
.samme summary{display:inline-flex;align-items:center;min-block-size:2.75rem;
  cursor:pointer;color:var(--green);font-variation-settings:"wdth" 100,"wght" 620;
  text-decoration:underline;text-underline-offset:.15em;list-style:none}
.samme summary::-webkit-details-marker{display:none}
.samme summary::before{content:"+";display:inline-block;inline-size:1em;margin-right:.25rem;text-decoration:none}
.samme[open] summary::before{content:"\2013"}
.samme summary:focus-visible{outline:2px solid var(--spruce);outline-offset:2px}
.samme p{margin:.25rem 0 0;color:var(--ink-2);overflow-wrap:anywhere}

/* ---------- bred skjerm ----------
   Fra 44rem legger raden seg som én linje: nummer, logo, navn og vilkår,
   tallene, handlingen; stolpe, priseksempel og banker under, i kolonne
   3 og utover. Rekkefølgen i markupen er den samme. */
@media(min-width:44rem){
  .lan{grid-template-columns:1.5rem 2.25rem minmax(0,1fr) auto auto;
    gap:0 1rem;padding:1.125rem 1.25rem}
  .lan .nr{align-self:center;padding-top:0}
  .logo{align-self:center}
  .flagg{display:inline-block;vertical-align:.12em;margin:0 0 0 .375rem}
  .tall{grid-column:auto;margin-top:0;flex-wrap:nowrap;gap:0 1.75rem;
    justify-content:flex-end;text-align:right}
  .tall .pris{order:2}
  .tall .nokkel{order:1}
  .handling{grid-column:auto;margin-top:0;inline-size:8.5rem;padding-left:.75rem}
  .diff,.lan .eks,.samme{grid-column:3/-1}
}
/* Fra 64rem får tallene fast bredde så kolonnene flukter nedover lista. */
@media(min-width:64rem){
  .tall .pris{inline-size:9rem}
  .tall .nokkel{inline-size:7rem}
}

/* ---------- brødteksten under tabellen ----------
   Seksjonen har ingen <article> rundt seg, og `article{max-width:42rem}`
   er nettopp derfor scopet til `.layout > article`. Uten en egen bredde
   her lå teksten på hele 1216 px, altså 121 tegn per linje. Det er omtrent
   det dobbelte av lesbar linjelengde, og det var usynlig så lenge
   seksjonen var tre avsnitt. Ved 1 316 ord er det ikke usynlig lenger. */
.langtekst .tekstgrid{display:grid;gap:2rem;align-items:start;min-width:0}
.langtekst .brod{max-width:42rem;min-width:0}
/* Innholdsfortegnelsen til høyre. Brødteksten beholder venstrekanten,
   som følger resten av siden nedover. */
@media(min-width:64rem){
  .langtekst .tekstgrid{grid-template-columns:minmax(0,42rem) minmax(0,1fr);gap:3rem}
  .innhold{position:sticky;top:1.5rem}
}

.innhold{min-width:0;padding:1.125rem 1.25rem;background:var(--wash);
  border-radius:10px}
.innhold-tittel{margin:0 0 .625rem;font-size:var(--tekst-xs);color:var(--muted);
  letter-spacing:.07em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 520}
.innhold ol{margin:0;padding:0;list-style:none;counter-reset:innhold}
.innhold li{counter-increment:innhold;margin:0}
.innhold a{display:block;padding:.4375rem 0 .4375rem 1.75rem;position:relative;
  font-size:var(--tekst-sm);line-height:1.35;color:var(--ink-2);
  text-decoration:none;overflow-wrap:anywhere}
.innhold a::before{content:counter(innhold);position:absolute;left:0;
  color:var(--muted);font-variation-settings:"wdth" 92,"wght" 620}
.innhold a:hover{color:var(--green);text-decoration:underline;
  text-underline-offset:.15em}

/* Hårfin strek over hver overskrift. Ti seksjoner under hverandre uten
   noe å bryte spalten på leses som én lang tekst. */
.langtekst .brod h2{border-top:1px solid var(--rule);padding-top:1.5rem;
  scroll-margin-top:1.5rem}
.langtekst .brod h2:first-of-type{border-top:0;padding-top:0}

/* Spørsmål og svar har ingen sidespalte, men samme lesebredde. */
.brod.faq{max-width:42rem}

/* På mobil er rutenettet én kolonne, og da havner innholdsfortegnelsen
   etter teksten i kildeordenen. En innholdsfortegnelse under 1 300 ord er
   ingen innholdsfortegnelse. order flytter den opp uten å bytte om på
   kilden, som skal ha brødteksten først for skjermlesere og for søk. */
@media(max-width:63.999rem){
  .langtekst .innhold{order:-1;margin-bottom:.5rem}
}

/* ---------- «Flere sammenligninger og verktøy» ----------
   Den interne lenkeblokka nederst på hver produktside og hvert verktøy, så
   en leser som lander på billån finner refinansiering og kredittkort uten å
   gå via forsiden, og så ingen produktside står uten inngående lenke i
   innholdet (skript/lenkevakt.mjs). Tonet flate uten ramme, som
   kildestripa; to kolonner der det er plass. */
.relatert{background:var(--wash);border-radius:10px;padding:1.125rem 1.25rem 1.25rem;margin:var(--luft-blokk) 0 0}
.relatert h2{font-size:var(--tekst-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 700;margin:0 0 .75rem;padding:0;border:0}
.relatert ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem 2rem;grid-template-columns:1fr}
@media(min-width:44rem){.relatert ul{grid-template-columns:1fr 1fr}}
.relatert li{font-size:var(--tekst-sm);line-height:1.5;min-width:0}
.relatert a{font-variation-settings:"wdth" 100,"wght" 640}
.relatert span{color:var(--muted)}
/* På verktøysidene ligger blokka inne i <article>; samme flate, litt mindre. */
.layout > article .relatert{margin-top:1.5rem}