/* side-kredittkort.css — det kredittkortlista trenger UTOVER
   side-forbrukslan.css. Kalkulatoren, kildestripa, kortet (.lan) med
   nummer, logo, navn, tall, stolpe og priseksempel er listemønsterets
   felles stil. Her: det som er kortets eget i midten av raden.

   LAGT OM 18. AUGUST 2026. Raden er ordnet etter ett spørsmål, hva skiller
   dette kortet fra de andre, og hva som er svaret står i js/kredittkortrad.js.
   Her står formen:

     navn        kortets navn som tittel, banken under bare når navnet
                 ikke sier den, og kravene som én stille linje
     fakta       fire tall i tonede ruter: årsgebyr, valutapåslag,
                 rentefritt, kreditt inntil. Faste kolonner, så øyet finner
                 samme tall på samme sted rad etter rad. Det er den ene
                 fargen raden har fått i tillegg til grønt og rust, og den
                 er --wash: nok til å skille rutene fra kortflaten, ikke nok
                 til å konkurrere med tallene til høyre.
     merker      sjeldne fordeler som små runde merker, fravær av
                 forsikring som stille tekst
     vilkaar     tabellen i <details>, barbert til det som varierer, og
                 bankens tekst som liste med lenker

   Målt på 320, 390, 768, 1024 og 1400 den 18. august 2026. */

/* Utstederen under kortnavnet, når navnet ikke sier banken. */
.lan .utsteder{display:block;font-size:var(--tekst-sm);color:var(--muted);margin-top:.125rem}

/* Kravlinja. Ikke merkelapper: versaler ved siden av «Billigst» leste som en
   advarsel, og dette er en opplysning om hvem kortet er for. Ordet «Krever»
   er dempet, kravene i --ink-2, prikker mellom. */
.lan .krav{margin:.3rem 0 0;font-size:var(--tekst-sm);color:var(--ink-2);line-height:1.45;overflow-wrap:anywhere}
.lan .krav-ord{color:var(--muted);font-variation-settings:"wdth" 92,"wght" 640;margin-right:.125rem}

/* Faktastripa. To og to på mobil, fire i bredden fra 44rem. 1 px --rule
   mellom rutene, ingen kant rundt: kortet er allerede kanten. Etiketten
   liten og dempet OVER verdien. Ikke versaler: «VALUTAPÅSLAG» med
   bokstavavstand brakk i to i en 122 px rute på 390, og raden har nettopp
   kvittet seg med versaler som ropte. */
.lan .fakta{grid-column:3;margin:.75rem 0 0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border-radius:6px;overflow:hidden;min-width:0}
.lan .fakta>div{background:var(--wash);padding:.5rem .75rem .55rem;min-width:0}
.lan .fakta dt{font-size:var(--tekst-xs);color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 560;line-height:1.3}
.lan .fakta dd{margin:.15rem 0 0;font-size:var(--tekst-sm);color:var(--ink);line-height:1.25;
  font-variation-settings:"wdth" 92,"wght" 660;letter-spacing:-.01em;overflow-wrap:anywhere}

/* Merkene: runde, tonede, små. Bare de sjeldne fordelene. Fravær av
   forsikring er tekst, ikke merke: et merke ser ut som noe kortet HAR. */
.lan .merker{grid-column:3;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.375rem .5rem;
  align-items:center;font-size:var(--tekst-xs);min-width:0}
.lan .merke{display:inline-block;padding:.15rem .55rem;border-radius:999px;
  background:var(--wash);color:var(--ink-2);font-variation-settings:"wdth" 92,"wght" 620;line-height:1.4}
.lan .uten{color:var(--muted);line-height:1.4}

/* Andre feltoverskrift i samme kalkulatorfelt (beløp, så måneder). */
.kalk .felt-tittel.etter{margin-top:1rem}

/* Vilkårstabellen i <details> på raden. Samme tabellstil som ellers, men
   litt tettere: den er en oppslagstavle, ikke brødtekst. */
.samme.vilkaar table{width:100%;border-collapse:collapse;font-size:var(--tekst-sm);margin:.5rem 0 0}
.samme.vilkaar th,.samme.vilkaar td{text-align:left;vertical-align:top;padding:.45rem .75rem .45rem 0;
  border-top:1px solid var(--rule)}
.samme.vilkaar th{color:var(--muted);font-variation-settings:"wdth" 92,"wght" 600;inline-size:14.5rem}
.samme.vilkaar tr:first-child th,.samme.vilkaar tr:first-child td{border-top:0}
.samme.vilkaar p,.samme.vilkaar ul{margin:.5rem 0 0;font-size:var(--tekst-sm);color:var(--ink-2);max-width:70ch}
.samme.vilkaar ul{padding-left:1.125rem}
.samme.vilkaar li{margin:.2rem 0}
.samme.vilkaar .fotnote{color:var(--muted);font-size:var(--tekst-xs);margin-top:.625rem}
.samme.vilkaar h4{margin:1rem 0 0;font-size:var(--tekst-sm);color:var(--ink);
  font-variation-settings:"wdth" 92,"wght" 680}
/* Smal skjerm: etiketten over verdien i stedet for ved siden av. To
   kolonner på 260 px ga verdier på tre og fire linjer. */
@media(max-width:36rem){
  .samme.vilkaar th,.samme.vilkaar td{display:block;inline-size:auto}
  .samme.vilkaar th{padding-bottom:0}
  .samme.vilkaar td{border-top:0;padding-top:.1rem}
  .samme.vilkaar tr:first-child th{border-top:0}
}

/* Stripa står i kolonne 3, på linje med navnet, tallene og stolpen, på alle
   bredder. Fra 44rem under navn og tall, fra kolonne 3 og ut, fire ruter i
   bredden. Fra 64rem er rutene så brede som innholdet, samlet til venstre:
   fire tall strukket over 1 080 px så ut som en tom tabell. */
@media(min-width:44rem){
  .lan .fakta{grid-column:3/-1;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:.875rem}
  .lan .merker{grid-column:3/-1}
}
@media(min-width:64rem){
  .lan .fakta{grid-template-columns:repeat(4,auto);justify-content:start;
    inline-size:max-content;max-inline-size:100%}
  .lan .fakta>div{padding-inline:.875rem 1.75rem;min-inline-size:8rem}
}

/* «Vis alle»: knappen under lista der den vises i porsjoner (sparekonto,
   boliglån). Samme flate som «Les mer», som er den redaksjonelle veien. */
.visflere{margin:1rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.visflere .les-mer{cursor:pointer;font:inherit;font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 640}
.visflere .dempet{font-size:var(--tekst-sm);color:var(--muted)}
/* Aldersfeltet på sparekonto: samme flate som beløpsfeltet, smalere. */
.kalk .alderfelt{max-width:9rem;margin-top:.25rem}
.kalk label.etter{margin-top:1rem}

/* Lenker i bankens tekst. Det delte stilarket lar lenker arve farge og
   understreking (a{color:inherit}), så uten denne så «bankens side» ut som
   ord. */
.samme.vilkaar a{color:var(--green);text-decoration:underline;text-underline-offset:.15em}

/* ---------- broen til refinansiering ----------
   Står inne i lista, i «Nei»-modus, der regnestykket sier at et lån blir
   billigere: kortene over streken taper ikke på å bli, kortene under
   koster mer. Ikke et kort og ikke en annonse: tonet flate uten ramme, som
   kildestripa, med én tykk strek i toppen som er selve «streken». Sier
   lista nei, står den samme flaten øverst med nei-setningen. */
.lanliste .bro{background:var(--wash);border-radius:8px;padding:1rem 1.125rem 1.0625rem;
  border-top:4px solid var(--spruce);min-width:0}
.lanliste .bro p{margin:0;font-size:var(--tekst-sm);line-height:1.55;color:var(--ink-2);max-width:72ch}
.lanliste .bro b{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 680}
.lanliste .bro a{color:var(--green);text-decoration:underline;text-underline-offset:.15em}
.lanliste .bro .bro-vei{margin-top:.625rem;display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline}
.lanliste .bro .bro-vei a{font-variation-settings:"wdth" 92,"wght" 680;text-decoration:none;
  display:inline-flex;align-items:center;min-block-size:2.75rem;padding-inline:1rem;
  background:var(--spruce);color:var(--on-spruce);border-radius:4px}
.lanliste .bro .bro-vei a:hover,.lanliste .bro .bro-vei a:focus-visible{background:var(--spruce-2)}
.lanliste .bro .bro-vei span{color:var(--muted);font-size:var(--tekst-xs);flex:1 1 18rem}
.lanliste .bro--nei,.lanliste .bro--kort{border-top-color:var(--rule-2)}