/* =============================================================================
   Sonida — markedsnettsiden
   Bygget etter design/seksjoner/*.html. Verdiene under er hentet ordrett
   derfra; der noe avviker står det AVVIK med grunn.
   ========================================================================== */

/* ---- 1. Fonter, selvhostet ------------------------------------------------
   Aldri fonts.gstatic.com: en forespørsel dit sender den besøkendes IP-adresse
   til en tredjepart ved hvert sidevisning. Filene er variable woff2 (en fil per
   familie per subsett), så alle vektene designet bruker er dekket.
   Subsett-delingen latin / latin-ext er den samme som Google serverer: latin
   bærer Æ Ø Å og U+202F (det smale mellomrommet i 5 990), latin-ext lastes bare
   hvis et navn på siden faktisk trenger det.                                */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("../fonts/AzeretMono-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("../fonts/AzeretMono-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- 2. Tokens ---------------------------------------------------------- */

:root {
  /* Flater */
  --flate-side:        #F2F4F7;
  --flate-kort:        #FFFFFF;
  --flate-mork:        #111827;
  --flate-telefon:     #0B0D11;
  --flate-sitat:       #1B2331;
  --flate-svak:        #EDF0F4;
  --flate-svakere:     #F7F9FC;
  --flate-blaa-svak:   #EEF3FE;
  --flate-blaa-hvit:   #F7FAFF;
  --flate-nav-hover:   #E6EAF1;
  --flate-varsel:      #FBF2E2;

  /* Blekk */
  --blekk:             #111827;
  --blekk-2:           #374151;
  --blekk-3:           #4B5563;
  --blekk-4:           #6B7280;
  --blekk-5:           #9CA3AF;
  --blekk-varsel:      #8A5A00;
  /* AVVIK (kontrast): #6B7280 på #F2F4F7 gir 4,39:1 og stryker WCAG AA (4,5).
     Fargen brukes til småtekst på den grå sideflaten fire–fem steder. Minste
     mulige justering som består: 4,54:1. Visuelt umulig å skille fra #6B7280,
     men den holder. På hvitt er #6B7280 4,83:1 og står urørt.               */
  --blekk-4-paa-graa:  #667080;

  /* Blekk på mørk flate */
  --blekk-paa-mork:      #F2F4F7;
  --blekk-brod-mork:     #C3C9D4;
  --blekk-sitat-mork:    #EDF0F4;

  /* Primærfarge */
  --blaa:              #1D4ED8;
  --blaa-hover:        #1740B4;
  --blaa-trykk:        #123390;
  --blaa-paa-mork:     #93B4FA;
  --blaa-dempet:       #C9DAFB;

  /* Rammer */
  --ramme:             #DDE2EA;
  --ramme-svak:        #EDF0F4;
  --ramme-mork:        #374151;
  --ramme-skjerm:      #C9CFD8;
  --ramme-blaa:        #C9DAFB;

  /* Mål og rytme */
  --spalte:            1160px;
  --sideluft:          24px;
  --rytme:             clamp(48px, 6vw, 80px);
  --rytme-tett:        clamp(26px, 3vw, 34px);
  --topplinje:         76px;   /* headerens 73 px + 3 px luft */

  /* Skrift */
  --sans:  "Schibsted Grotesk", system-ui, sans-serif;
  --mono:  "Azeret Mono", ui-monospace, monospace;
  /* Signaturen i mockupen. Ingen av disse kan selvhostes — Segoe Script er
     Windows, Bradley Hand er macOS, resten faller til generisk cursive.
     Beholdt som designet skriver den; se BILDER-MANGLER.md.                 */
  --signatur: "Segoe Script", "Bradley Hand", cursive;
}

/* ---- 3. Grunnlag -------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--flate-side);
  color: var(--blekk);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dt, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--blekk); text-decoration: none; }
a:hover { color: var(--blaa); }

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

/* AVVIK: designet oppgir ingen scroll-oppførsel, men hele siden er
   ankernavigasjon. Uten dette hopper den hardt.                            */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.kun-skjermleser {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Hopp-til-innhold. Ikke i designet; en side med klebrig topplinje og ni
   ankere trenger den.                                                      */
.hopp-lenke {
  position: absolute; left: var(--sideluft); top: 8px; z-index: 60;
  transform: translateY(-160%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--blekk); color: #FFFFFF; border-radius: 7px;
  font: 600 14px/1 var(--sans);
}
.hopp-lenke:focus { transform: translateY(0); color: #FFFFFF; }

/* ---- 4. Topplinje ------------------------------------------------------- */

.topplinje {
  position: sticky; top: 0; z-index: 30;
  background: rgba(242, 244, 247, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ramme);
}
/* Uten backdrop-filter blir teksten under lesbar gjennom flaten. */
@supports not (backdrop-filter: blur(1px)) {
  .topplinje { background: var(--flate-side); }
}

.topplinje__rad {
  max-width: var(--spalte); margin: 0 auto;
  padding: 14px var(--sideluft);
  display: flex; align-items: center; gap: 20px;
}

.ordmerke {
  font: 700 20px/1 var(--sans); letter-spacing: -.042em; color: var(--blekk);
}
.ordmerke:hover { color: var(--blekk); }

.topplinje__nav { display: flex; gap: 2px; margin-left: 8px; }
.topplinje__nav a {
  padding: 9px 12px; border-radius: 6px;
  font: 500 13.5px/1 var(--sans); color: var(--blekk-3);
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.topplinje__nav a:hover { background: var(--flate-nav-hover); color: var(--blekk); }

/* «Logg inn» tar over margin-left: auto fra CTA-en, så de to står sammen ytterst
   til høyre. Den er dempet med vilje: siden selger en prøveperiode, og en som
   allerede har konto vet hva hen ser etter. */
.topplinje__inn {
  margin-left: auto;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  font: 500 13.5px/1 var(--sans); color: var(--blekk-3);
  border-radius: 6px; white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.topplinje__inn:hover { background: var(--flate-nav-hover); color: var(--blekk); }

.topplinje__cta {
  margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  background: var(--blekk); color: #FFFFFF;
  font: 600 14px/1 var(--sans); border-radius: 7px; white-space: nowrap;
  transition: background-color 120ms ease;
}
.topplinje__cta:hover { background: var(--blaa); color: #FFFFFF; }

/* AVVIK (feil i designet): topplinjen har verken flex-wrap eller brekkpunkt,
   og innholdet krever ca. 592 px. Under det ble CTA-en dyttet ut av skjermen
   og klippet bort av overflow-x:hidden. Fire ankere er en bekvemmelighet på
   en enkelt rulleside, ikke innholdet — de skjules, ordmerket og CTA-en blir.
   Ingen hamburgermeny for fire ankere.                                     */
@media (max-width: 767px) {
  .topplinje__nav { display: none; }
  /* Stablet skal de to hero-knappene ha samme bredde: 222 px over 142 px rett
     under hverandre leser som at den nederste er halvferdig. */
  .hero__knapper { flex-direction: column; align-items: stretch; }
  .hero__knapper .knapp { width: 100%; }
}

/* ---- 5. Gjentakende komponenter ---------------------------------------- */

.seksjon {
  max-width: var(--spalte); margin: 0 auto;
  padding: var(--rytme) var(--sideluft) 0;
  scroll-margin-top: var(--topplinje);
}
/* Fotnote-seksjoner: halv rytme, fordi de hører til seksjonen over. */
.seksjon--tett { padding-top: var(--rytme-tett); }

.eyebrow {
  font: 500 11px/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--blekk-3);
}
.eyebrow--mork { color: var(--blekk-5); }

.tittel-2 {
  font: 700 clamp(27px, 3.6vw, 40px)/1.08 var(--sans);
  letter-spacing: -.048em; text-wrap: pretty;
}

/* Todelt rad: overskrift til venstre, ingress til høyre, bunnjustert. */
.hoderad {
  margin-top: 20px; display: flex; flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px); align-items: flex-end;
}
.hoderad__tittel { flex: 1 1 320px; min-width: 0; }
.hoderad__ingress {
  flex: 1 1 300px; min-width: 0;
  font: 400 16px/1.62 var(--sans); color: var(--blekk-3); text-wrap: pretty;
}

.kort {
  background: var(--flate-kort);
  border: 1px solid var(--ramme);
  border-radius: 12px;
}
.kort--mork {
  background: var(--flate-mork); color: var(--blekk-paa-mork); border: 0;
}

/* Knapper. Alle er lenker; designet har ingen <button> utenfor fanene. */
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 0 28px;
  background: var(--blaa); color: #FFFFFF;
  font: 600 17px/1 var(--sans); letter-spacing: -.015em; border-radius: 8px;
  /* AVVIK: ikke i designet. «Prøv gratis i 30 dager» skal aldri brekke over to
     linjer — knappen er 222,5 px og får plass helt ned til ca. 280 px skjerm. */
  text-wrap: nowrap;
  /* AVVIK: designet oppgir ingen overgang. Et hardt fargehopp er dårligere
     håndverk enn 120 ms. Ingen transform, ingen løft.                      */
  transition: background-color 120ms ease;
}
.knapp:hover  { background: var(--blaa-hover); color: #FFFFFF; }
.knapp:active { background: var(--blaa-trykk); color: #FFFFFF; }

.knapp--stor { min-height: 60px; padding: 0 30px; font-size: 17.5px; }

.knapp--sekundaer {
  min-height: 58px; padding: 0 24px;
  background: var(--flate-kort); border: 1px solid var(--ramme);
  color: var(--blekk); font: 600 17px/1 var(--sans);
  transition: border-color 120ms ease;
}
.knapp--sekundaer:hover {
  background: var(--flate-kort); border-color: var(--blekk); color: var(--blekk);
}

/* =============================================================================
   01 — Hero
   ========================================================================== */

.hero { border-bottom: 1px solid var(--ramme); }

.hero__rad {
  max-width: var(--spalte); margin: 0 auto;
  padding: clamp(44px, 6vw, 76px) var(--sideluft) clamp(40px, 5vw, 64px);
  display: flex; flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}

.hero__tekst  { flex: 1 1 440px; min-width: 0; }
.hero__mockup { flex: 1 1 340px; min-width: 0; max-width: 390px; margin: 0 auto; }

/* Video-varianten (25. august 2026): 16:9-videoen trenger en bredere spalte
   enn portrett-telefonen den erstattet — ellers blir den et frimerke ved
   siden av teksten. Selve videoen er et kort i husets stil: tynn ramme,
   samme radius som portalflatene, flate-side bak plakaten mens den laster. */
.hero__mockup--video { flex: 1 1 520px; max-width: 640px; align-self: center; }
.video-figur .hero-video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--ramme); border-radius: 18px;
  background: var(--flate-side); object-fit: cover;
}
/* Mobil: videoen er et vanlig kort i spalten — full spaltebredde, luft på
   sidene (Anders prøvde full skjermbredde 25. august og fant det for
   voldsomt). Basisbredden nullstilles så video-spalten aldri kan presse
   mobil-layouten bredere enn skjermen. */
@media (max-width: 559px) {
  .hero__mockup--video { flex-basis: auto; width: 100%; max-width: 100%; }
  .video-figur .hero-video { border-radius: 14px; }
}

.hero h1 {
  margin-top: 22px;
  font: 700 clamp(38px, 5.6vw, 62px)/1.02 var(--sans);
  letter-spacing: -.05em; text-wrap: pretty; max-width: 15ch;
}
.hero__ingress {
  margin-top: 24px; font: 400 18.5px/1.6 var(--sans);
  color: var(--blekk-3); max-width: 52ch; text-wrap: pretty;
}
.hero__ingress--tung {
  margin-top: 14px; font: 500 18.5px/1.6 var(--sans);
  color: var(--blekk); max-width: 52ch; text-wrap: pretty;
}
.hero__knapper {
  margin-top: 32px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 16px;
}
.hero__tall {
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--ramme);
  display: flex; flex-wrap: wrap; gap: 32px;
}
.hero__tall dt {
  font: 500 10px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--blekk-4-paa-graa);
}
.hero__tall dd { margin-top: 9px; font: 500 15.5px/1 var(--sans); }

/* --- Telefonen. Ikke et bilde: hele flaten er tegnet i HTML og CSS. ------- */

.telefon-figur { margin: 0; }

/* Alt inne i telefonen er i px og tåler ikke å bli smalere, så den skaleres
   i stedet for å krympes. Designet setter scale(.86) og margin-bottom:-120px
   — den negative margen fjerner nøyaktig plassen skaleringen etterlater.
   AVVIK (feil i designet): med transform-origin:top center og fast bredde
   390 px flyter telefonen 12 px ut av skjermen på 375 px og blir klippet.
   Fikset med origin top left, en skaleringsfaktor som følger skjermen under
   438 px, og en margin-left som holder den sentrert på alle bredder.       */
.telefon {
  --skala: .86;
  --egenhoyde: 855px;          /* målt i nettleser på den ferdige flaten */
  width: 390px;
  transform: scale(var(--skala));
  transform-origin: top left;
  margin-left: calc((min(390px, 100%) - 390px * var(--skala)) / 2);
  margin-bottom: calc((var(--skala) - 1) * var(--egenhoyde));
}
/* Designets .86 holder seg innenfor helt ned til 384 px (48 + 390 × .86).
   Under det trappes den ned. Hvert trinn er valgt slik at telefonen får plass
   i den smaleste bredden trinnet dekker. (Skalaen kan ikke regnes ut fra
   skjermbredden: CSS kan ikke dele en lengde på en lengde og få et tall.)   */
@media (max-width: 383px) { .telefon { --skala: .83; } }
@media (max-width: 371px) { .telefon { --skala: .75; } }
@media (max-width: 340px) { .telefon { --skala: .68; } }
@media (max-width: 313px) { .telefon { --skala: .60; } }

.telefon__ramme {
  background: var(--flate-telefon); border-radius: 58px; padding: 11px;
  box-shadow: 0 44px 74px -34px rgba(17, 24, 39, .62);
}
.telefon__skjerm {
  /* Blå, ikke hvit. Telefonen skaleres (transform: scale), så skjøten mellom
     .telefon__status og .telefon__merke lander på en brøkdels piksel — målt til
     768.58 px på 0.86. Nettleseren må da kantutjevne den raden, og med en hvit
     forelder blandes hvitt inn: en hårfin lys strek tvers over toppen. Med blå
     forelder blandes blått i blått, og streken finnes ikke.

     Hvitfargen ligger nå på .telefon__kropp, som dekker resten av skjermen.
     Skjøten mellom merket og kroppen er et ekte fargeskifte, så en myk kant der
     er riktig og ikke en feil. */
  position: relative; background: var(--blaa);
  border-radius: 48px; overflow: hidden;
}
.telefon__notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 30px; border-radius: 16px;
  background: var(--flate-telefon); z-index: 2;
}
.telefon__status {
  background: var(--blaa); padding: 17px 26px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.telefon__klokke {
  font: 600 13.5px/1 var(--sans); color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.telefon__ikoner { display: flex; align-items: flex-end; gap: 3px; }
.telefon__strek { width: 3px; border-radius: 1px; background: rgba(255,255,255,.75); }
.telefon__strek--1 { height: 6px; }
.telefon__strek--2 { height: 8px; }
.telefon__strek--3 { height: 10px; }
.telefon__batteri {
  margin-left: 6px; width: 19px; height: 10px;
  border-radius: 2.5px; border: 1px solid rgba(255,255,255,.75);
}
.telefon__merke {
  background: var(--blaa); padding: 16px 18px;
  display: flex; align-items: center; gap: 11px;
}
.telefon__flis {
  width: 27px; height: 27px; border-radius: 7px; background: #FFFFFF; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--sans); color: var(--blaa);
}
.telefon__bedrift {
  font: 600 14px/1.2 var(--sans); letter-spacing: -.02em; color: #FFFFFF;
}
.telefon__kropp { background: #FFFFFF; padding: 20px 19px 14px; }
.telefon__tittel { font: 700 18.5px/1.2 var(--sans); letter-spacing: -.035em; }
.telefon__sum {
  margin-top: 12px; font: 500 31px/1 var(--sans);
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.telefon__note {
  margin-top: 6px; font: 400 10.5px/1.4 var(--mono); color: var(--blekk-4);
}
.telefon__tabell {
  margin-top: 14px; border: 1px solid var(--ramme);
  border-radius: 8px; overflow: hidden;
}
.telefon__linje {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--ramme-svak);
}
.telefon__linje:last-child { border-bottom: 0; }
.telefon__linje span:first-child { flex: 1; min-width: 0; font: 500 12px/1.35 var(--sans); }
.telefon__linje span:last-child  { font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.telefon__linje--dempet span { color: var(--blekk-3); }

.telefon__bolk { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--ramme-svak); }
.telefon__etikett {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blekk-4);
}
.telefon__samtale { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.boble {
  align-self: flex-start; max-width: 90%;
  background: var(--flate-side); border-radius: 11px 11px 11px 3px; padding: 10px 12px;
}
.boble p { font: 400 12.5px/1.5 var(--sans); }
/* Tag i selektoren over: «.boble p» veier tyngre enn en ren klasse, så
   tidsstempelet må skrives med samme vekt for å beholde monoen sin.         */
/* --blekk-4-paa-graa, ikke --blekk-4: boblen ligger på #F2F4F7, der #6B7280 gir
   4,39:1. Samme justering som de sju andre stedene småteksten står på grått.  */
.boble .boble__tid { margin-top: 5px; font: 400 10px/1 var(--mono); color: var(--blekk-4-paa-graa); }
.boble--ut {
  align-self: flex-end; background: var(--blaa); border-radius: 11px 11px 3px 11px;
}
.boble--ut p { color: #FFFFFF; }
.boble--ut .boble__tid { color: var(--blaa-dempet); }

.telefon__skrivefelt { margin-top: 11px; display: flex; align-items: center; gap: 8px; }
.telefon__plassholder {
  /* --blekk-5 ga 2,54:1. Det er en illustrasjon av et meldingsfelt, men det
     er fortsatt tekst noen leser, og under 3:1 er den nesten borte i dagslys. */
  flex: 1; min-width: 0; font: 400 11.5px/1 var(--mono); color: var(--blekk-4-paa-graa);
  border: 1px solid var(--ramme); border-radius: 8px; padding: 12px;
}
.telefon__send {
  font: 600 12px/1 var(--sans); color: #FFFFFF;
  background: var(--blekk); border-radius: 8px; padding: 12px 14px;
}

.telefon__avkryssing {
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--ramme-svak);
  display: flex; gap: 10px; align-items: flex-start;
}
.hake {
  width: 18px; height: 18px; border-radius: 5px; background: var(--blaa); flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; margin-top: 1px;
}
.hake svg { display: block; }
.telefon__vilkaar { flex: 1; min-width: 0; font: 400 12px/1.5 var(--sans); color: var(--blekk-2); }

.telefon__signatur {
  margin-top: 12px; border: 1px dashed var(--blekk-5); border-radius: 8px;
  padding: 12px 12px 7px; background: var(--flate-svakere);
}
.telefon__signatur p:first-child {
  font: 400 19px/1.1 var(--signatur); color: var(--blekk);
}
.telefon__signatur p:last-child {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--ramme);
  font: 400 9.5px/1 var(--mono); color: var(--blekk-4);
}
.telefon__godta {
  margin-top: 14px; display: flex; align-items: center; justify-content: center;
  min-height: 52px; background: var(--blekk); color: #FFFFFF;
  border-radius: 9px; font: 600 15px/1 var(--sans);
}
.telefon__hjem {
  margin: 18px auto 4px; display: block; width: 132px; height: 5px;
  border-radius: 3px; background: var(--blekk);
}

/* AVVIK: figcaption ligger inne i <figure> i designet og skaleres derfor ned
   til ca. 9,9 px. Skaleringen er en layout-mekanikk for telefonen; teksten er
   spesifisert til 11,5 px og gjengis her i sin egen størrelse.             */
.telefon-figur figcaption {
  margin-top: 18px; font: 400 11.5px/1.5 var(--mono);
  color: var(--blekk-4-paa-graa); text-align: center;
}

/* =============================================================================
   02 — Problemet. Eneste seksjon med egen bakgrunnsfarge.
   ========================================================================== */

.problemet { background: var(--flate-kort); border-bottom: 1px solid var(--ramme); }
.problemet__rad {
  max-width: var(--spalte); margin: 0 auto;
  padding: clamp(44px, 5vw, 68px) var(--sideluft);
  display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); align-items: center;
}
.problemet h2 {
  flex: 1 1 340px; min-width: 0;
  font: 700 clamp(26px, 3.4vw, 37px)/1.1 var(--sans);
  letter-spacing: -.045em; text-wrap: pretty;
}
.problemet__hoyre {
  flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px;
}
.problemet__brod { font: 400 16.5px/1.62 var(--sans); color: var(--blekk-3); text-wrap: pretty; }
.problemet__slutt { font: 600 19px/1.4 var(--sans); letter-spacing: -.02em; text-wrap: pretty; }
.problemet__par { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; }

.foer-etter {
  flex: 1 1 195px;
  background: var(--flate-side); border: 1px solid var(--ramme);
  border-radius: 10px; padding: 18px 20px;
}
.foer-etter--mork {
  background: var(--flate-mork); color: var(--blekk-paa-mork); border: 0;
}
.foer-etter__etikett {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blekk-4-paa-graa);
}
.foer-etter--mork .foer-etter__etikett { color: var(--blekk-5); }
.foer-etter__tall { margin-top: 12px; font: 500 25px/1 var(--sans); letter-spacing: -.045em; }
.foer-etter__under { margin-top: 9px; font: 400 13.5px/1.5 var(--sans); color: var(--blekk-3); }
.foer-etter--mork .foer-etter__under { color: var(--blekk-brod-mork); }

/* =============================================================================
   03 — Slik virker det
   ========================================================================== */

.steg {
  margin-top: 34px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 14px;
}
.steg__kort {
  background: var(--flate-kort); border: 1px solid var(--ramme); border-radius: 12px;
  padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px;
}
.steg__kort--mork {
  background: var(--flate-mork); color: var(--blekk-paa-mork); border: 0;
}
.merkelapp {
  font: 500 11px/1 var(--mono); letter-spacing: .1em;
  color: var(--blaa-hover); background: var(--flate-blaa-svak);
  border-radius: 5px; padding: 7px 9px; align-self: flex-start;
}
.merkelapp--fylt { color: #FFFFFF; background: var(--blaa); }
.steg__kort h3 { font: 600 20px/1.28 var(--sans); letter-spacing: -.03em; }
.steg__brod { font: 400 15.5px/1.62 var(--sans); color: var(--blekk-3); text-wrap: pretty; }
.steg__kort--mork .steg__brod { color: var(--blekk-brod-mork); }

/* margin-top:auto holder føttene i flukt når kortene får ulik teksthøyde. */
.steg__fot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ramme-svak);
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.steg__fot--kolonne { flex-direction: column; align-items: stretch; gap: 8px; }
.steg__kort--mork .steg__fot { border-top-color: var(--ramme-mork); }
.steg__fot-etikett { font: 400 11.5px/1 var(--mono); color: var(--blekk-4); }
.steg__kort--mork .steg__fot-etikett { color: var(--blekk-5); }
.steg__fot-sum {
  font: 500 17px/1 var(--sans); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.steg__fot-status { font: 500 13px/1 var(--sans); color: var(--blaa-hover); }
.steg__kort--mork .steg__fot-status { color: var(--blaa-paa-mork); }

.fagliste {
  margin-top: 16px; font: 400 12.5px/1.7 var(--mono);
  color: var(--blekk-4-paa-graa); letter-spacing: .02em;
}
/* Fagnavnene ble lenker 24. august 2026, da de seks fagsidene kom. Samme ord
   som før — dette er en opplisting, ikke en meny, så streken er svak nok til
   at linja fortsatt leses som én setning. Fargen løftes ett hakk fra
   omgivelsene, slik at det finnes en forskjell å se før man peker. */
.fagliste a {
  color: var(--blekk-3);
  text-decoration: underline; text-decoration-color: var(--ramme-skjerm);
  text-underline-offset: 3px;
}
.fagliste a:hover { color: var(--blaa); text-decoration-color: currentColor; }

/* =============================================================================
   04 — Portalen. Tre flater, alle tegnet i HTML/CSS, ingen skjermbilder.
   ========================================================================== */

.portal__faner {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px; padding: 5px;
  background: var(--flate-nav-hover); border-radius: 9px; width: fit-content;
  max-width: 100%;
}
/* Radioknappene bærer tilstanden. Skjult, men fokuserbar — piltastene bytter
   flate slik en ekte fanerad gjør, uten en linje JavaScript.               */
.portal__radio {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
/* AVVIK: designet sier min-height 40px. Fanene er sidens eneste ekte kontroll,
   og 44 px er det minste trykkmålet en finger treffer pålitelig. Faneraden blir
   4 px høyere enn i designet; ingenting annet flytter seg.                   */
.portal__fane {
  min-height: 44px; padding: 0 16px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13.5px/1 var(--sans); letter-spacing: -.01em;
  color: var(--blekk-3); background: transparent; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.portal__fane:hover { color: var(--blekk); }

#flate-dashbord:checked ~ .portal__faner [for="flate-dashbord"],
#flate-bygger:checked   ~ .portal__faner [for="flate-bygger"],
#flate-aksept:checked   ~ .portal__faner [for="flate-aksept"] {
  background: var(--blekk); color: #FFFFFF;
}
#flate-dashbord:focus-visible ~ .portal__faner [for="flate-dashbord"],
#flate-bygger:focus-visible   ~ .portal__faner [for="flate-bygger"],
#flate-aksept:focus-visible   ~ .portal__faner [for="flate-aksept"] {
  outline: 3px solid var(--blaa); outline-offset: 3px;
}

.portal__scene { margin-top: 18px; }

/* Designet regner zoom = min(1, bredde/1180) med JavaScript og ResizeObserver.
   Her er samme trapp lagt i CSS, så flaten virker uten en eneste linje skript.
   Verdiene er valgt slik at flaten akkurat får plass i den smaleste bredden i
   hvert trinn.                                                             */
.portal__stage { overflow-x: auto; overscroll-behavior-x: contain; }
.portal__zoom  { zoom: .942; }
@media (max-width: 1159px) { .portal__zoom { zoom: .86; } }
@media (max-width: 1062px) { .portal__zoom { zoom: .80; } }
@media (max-width:  991px) { .portal__zoom { zoom: .74; } }
/* Under ca. 900 px stopper nedskaleringen. Designet skalerer videre helt til
   27 % på 375 px — da er brødteksten 3,5 px, altså en grå strek. Flaten holdes
   lesbar og får rulle sidelengs i sin egen boks i stedet. Siden ruller ikke.  */
@media (max-width:  920px) { .portal__zoom { zoom: .72; } }

.portal__hint {
  display: none; margin-top: 10px;
  font: 400 11.5px/1.5 var(--mono); color: var(--blekk-4-paa-graa);
}
@media (max-width: 899px) { .portal__hint { display: block; } }

.portal__panel { display: none; }
#flate-dashbord:checked ~ .portal__scene .portal__panel--dashbord,
#flate-bygger:checked   ~ .portal__scene .portal__panel--bygger,
#flate-aksept:checked   ~ .portal__scene .portal__panel--aksept { display: block; }

.flate {
  width: 1180px;
  background: var(--flate-side); border: 1px solid var(--ramme-skjerm);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 48px -34px rgba(17, 24, 39, .45);
}
.flate--dashbord { display: flex; }

/* --- Sidemeny (dashbord) -------------------------------------------------- */
.flate__meny {
  width: 196px; flex: none; background: var(--flate-kort);
  border-right: 1px solid var(--ramme); display: flex; flex-direction: column;
}
.flate__merke {
  padding: 15px 16px; border-bottom: 1px solid var(--ramme);
  display: flex; align-items: center; gap: 10px;
}
.flate__flis {
  width: 26px; height: 26px; border-radius: 7px; background: var(--blaa); flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--sans); color: #FFFFFF;
}
.flate__bedrift { font: 600 12.5px/1.25 var(--sans); letter-spacing: -.02em; }
.flate__nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
/* Direkte barn: ellers arver tellerpilla inne i «Varsler» både padding og
   farge herfra, og blir en tom blå sirkel. */
.flate__nav > span { font: 400 13px/1 var(--sans); color: var(--blekk-2); padding: 11px 12px; }
.flate__nav .er-aktiv {
  font-weight: 600; color: #FFFFFF; background: var(--blekk); border-radius: 7px;
}
.flate__nav .med-teller {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.teller {
  font: 500 10px/1 var(--mono); color: #FFFFFF;
  background: var(--blaa); border-radius: 999px; padding: 4px 7px;
}
/* Barnekombinatoren over veier tyngre enn en ren klasse. Uten den samme vekten
   her arver gruppeoverskriften menypunktenes skrift og padding, og «ADMINISTRATOR»
   ser ut som en klikkbar linje på nivå med «Innstillinger».                  */
.flate__nav > .flate__gruppe {
  margin-top: 14px; font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blekk-4); padding: 6px 12px 4px;
}

/* --- Hovedfelt ------------------------------------------------------------ */
.flate__hoved { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.flate__topp { padding: 17px 22px 3px; display: flex; align-items: center; gap: 12px; }
.flate__topp h3 { font: 600 16px/1.2 var(--sans); letter-spacing: -.03em; }
.flate__handling {
  margin-left: auto; font: 600 12.5px/1 var(--sans); color: #FFFFFF;
  background: var(--blaa); border-radius: 7px; padding: 11px 14px;
}
.flate__kropp { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; }

.kpi-rad { display: flex; gap: 12px; }
.kpi {
  flex: 1; background: var(--flate-kort); border: 1px solid var(--ramme);
  border-radius: 9px; padding: 15px 17px;
}
.kpi__etikett {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blekk-4);
}
.kpi__tall {
  margin-top: 11px; font: 500 25px/1 var(--sans);
  letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.kpi__note { margin-top: 7px; font: 400 11px/1.4 var(--mono); color: var(--blekk-4); }

.flate__nedre { display: flex; gap: 12px; align-items: flex-start; }
.flate__panel {
  flex: 1.5; min-width: 0; background: var(--flate-kort);
  border: 1px solid var(--ramme); border-radius: 9px; overflow: hidden;
}
/* Blå ramme, ikke grå: den ene markøren i dashbordet som sier «her venter
   noe på deg». Ikke normaliser den bort.                                   */
.flate__panel--varsel { flex: 1; border-color: var(--ramme-blaa); }
.flate__panel-hode {
  padding: 12px 18px; border-bottom: 1px solid var(--ramme-svak);
  display: flex; align-items: center; gap: 10px;
}
.flate__panel--varsel .flate__panel-hode { background: var(--flate-blaa-hvit); }
.flate__panel-hode h4 { font: 600 13.5px/1.2 var(--sans); letter-spacing: -.02em; }
.flate__panel-meta { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--blekk-4); }

.tabellrad { display: grid; grid-template-columns: 1.5fr 1fr 96px 82px; gap: 10px; }
.tabellrad--hode {
  padding: 9px 18px; background: var(--flate-svakere);
  border-bottom: 1px solid var(--ramme-svak);
}
.tabellrad--hode span {
  font: 500 9px/1.3 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--blekk-4);
}
.tabellrad--data {
  padding: 13px 18px; border-bottom: 1px solid var(--ramme-svak); align-items: center;
}
.tabellrad--data:last-child { border-bottom: 0; }
.tabellrad__kunde { font: 500 12.5px/1.3 var(--sans); }
.tabellrad__sum { font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.tabellrad__dato { font: 400 11px/1 var(--mono); color: var(--blekk-4); text-align: right; }
.h-hoyre { text-align: right; }

.pille {
  font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  border-radius: 4px; padding: 6px 8px; justify-self: start;
}
.pille--aapnet  { color: var(--blaa-hover); background: var(--flate-blaa-svak); }
.pille--sendt   { color: var(--blekk-3); background: var(--flate-svak); }
.pille--utloper { color: var(--blekk-varsel); background: var(--flate-varsel); }
/* «Utkast» i tilbudsbyggeren: samme pille, litt videre sperring, står i en
   flex-rad og skal ikke justeres til start. */
.pille--utkast  { color: var(--blekk-3); background: var(--flate-svak); letter-spacing: .1em; justify-self: auto; }

.teller--hoyre { margin-left: auto; }

.melding { padding: 13px 18px; border-bottom: 1px solid var(--ramme-svak); }
.melding__navn { font: 500 12.5px/1.3 var(--sans); }
.melding__tekst { margin-top: 6px; font: 400 12px/1.5 var(--sans); color: var(--blekk-3); }
.melding__meta { margin-top: 7px; font: 400 10.5px/1 var(--mono); color: var(--blekk-4); }
.flate__panel-fot {
  padding: 12px 18px; display: flex; align-items: center; justify-content: center;
  font: 500 12px/1 var(--sans); color: var(--blaa-hover);
}

/* --- Tilbudsbyggeren ------------------------------------------------------ */
.bygger__kropp { padding: 20px 22px 24px; display: flex; gap: 14px; align-items: flex-start; }
.bygger__tabell {
  flex: 1.7; min-width: 0; background: var(--flate-kort);
  border: 1px solid var(--ramme); border-radius: 9px; overflow: hidden;
}
.linjerad { display: grid; grid-template-columns: 1fr 62px 90px 90px 96px; gap: 10px; }
.linjerad--hode {
  padding: 10px 18px; background: var(--flate-svakere);
  border-bottom: 1px solid var(--ramme);
}
.linjerad--hode span {
  font: 500 9px/1.3 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--blekk-4);
}
.linjerad--hode .er-sum { color: var(--blekk); }
.romrad {
  padding: 9px 18px; background: var(--flate-side);
  border-bottom: 1px solid var(--ramme-svak);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.romrad__navn {
  font: 600 11px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--blekk);
}
.romrad__sum { font: 400 11px/1 var(--mono); color: var(--blekk-3); font-variant-numeric: tabular-nums; }
.linjerad--data {
  padding: 12px 18px; border-bottom: 1px solid var(--ramme-svak); align-items: center;
}
.linje__navn { font: 500 12.5px/1.35 var(--sans); }
.linje__navn span { font: 400 11px/1 var(--mono); color: var(--blekk-4); }
.linje__antall { font: 400 12px/1 var(--mono); color: var(--blekk-3); }
.linje__innpris {
  font: 400 12px/1 var(--mono); color: var(--blekk-3);
  text-align: right; font-variant-numeric: tabular-nums;
}
.linje__paaslag { font: 400 12px/1 var(--mono); color: var(--blaa-hover); text-align: right; }
.linje__paaslag--tom { color: var(--blekk-5); }
.linje__sum {
  font: 500 12.5px/1 var(--sans); text-align: right; font-variant-numeric: tabular-nums;
}
.bygger__knapper { padding: 13px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bygger__knapper span {
  font: 500 12px/1 var(--sans); color: var(--blekk);
  border: 1px solid var(--ramme); border-radius: 6px; padding: 10px 13px;
}
.bygger__side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.summering { background: var(--flate-kort); border: 1px solid var(--ramme); border-radius: 9px; overflow: hidden; }
.summering__hode { padding: 12px 16px; border-bottom: 1px solid var(--ramme-svak); }
.summering__hode h4 { font: 600 13.5px/1.2 var(--sans); letter-spacing: -.02em; }
.summering__kropp { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sumrad { display: flex; justify-content: space-between; gap: 10px; }
.sumrad span:first-child { font: 400 12px/1 var(--mono); color: var(--blekk-3); }
.sumrad span:last-child  { font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.sumrad--mva { border-top: 1px solid var(--ramme-svak); padding-top: 10px; }
.sumrad--slutt {
  align-items: baseline; border-top: 1px solid var(--ramme); padding-top: 12px;
}
.sumrad--slutt span:first-child { font: 600 13px/1 var(--sans); color: var(--blekk); }
.sumrad--slutt span:last-child {
  font: 500 19px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.vilkaarkort {
  background: var(--flate-kort); border: 1px solid var(--ramme); border-radius: 9px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.vilkaarkort h4 { font: 600 13.5px/1.2 var(--sans); letter-spacing: -.02em; }
.vilkaarrad { display: flex; justify-content: space-between; gap: 10px; }
.vilkaarrad span { font: 400 12px/1.4 var(--mono); }
.vilkaarrad span:first-child { color: var(--blekk-3); }

/* --- Akseptsiden ---------------------------------------------------------- */
.aksept__kropp {
  padding: 28px 22px 32px; display: flex; gap: 26px;
  align-items: flex-start; justify-content: center;
}
/* AVVIK: designet sentrerer innholdet i flatens 1180 px. Fra 899 px og ned er
   flaten bredere enn boksen sin og må rulles — og da starter rullingen på 0,
   altså midt i tomrommet til venstre for kortet. Fanen åpnet på grå flate med
   telefonkortet klippet i høyre kant. Under samme brekkpunkt som hjelpeteksten
   legges innholdet derfor mot venstre, så kortet står der brukeren ser først.
   Over 899 px får flaten plass i sin helhet, og sentreringen står urørt.     */
@media (max-width: 899px) {
  .aksept__kropp { justify-content: flex-start; }
}
.aksept__kort {
  width: 300px; flex: none; background: var(--flate-kort);
  border: 1px solid var(--ramme); border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 40px -28px rgba(17, 24, 39, .5);
}
.aksept__topp { background: var(--blaa); padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.aksept__flis {
  width: 24px; height: 24px; border-radius: 6px; background: #FFFFFF; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--sans); color: var(--blaa);
}
.aksept__bedrift { font: 600 13px/1.2 var(--sans); color: #FFFFFF; letter-spacing: -.02em; }
.aksept__innhold { padding: 18px 16px 20px; }
.aksept__nummer {
  font: 400 10.5px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--blekk-4);
}
.aksept__tittel { margin-top: 11px; font: 700 18px/1.2 var(--sans); letter-spacing: -.035em; }
.aksept__pris {
  margin-top: 12px; font: 500 30px/1 var(--sans);
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.aksept__note { margin-top: 6px; font: 400 10.5px/1.4 var(--mono); color: var(--blekk-4); }
.aksept__sumboks { margin-top: 16px; border: 1px solid var(--ramme); border-radius: 8px; overflow: hidden; }
.aksept__sumrad {
  display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px;
  border-bottom: 1px solid var(--ramme-svak);
}
.aksept__sumrad:last-child { border-bottom: 0; }
.aksept__sumrad span:first-child { font: 500 12px/1.3 var(--sans); }
.aksept__sumrad span:last-child  { font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.aksept__sumrad--dempet span { color: var(--blekk-3); }
.aksept__avkryssing { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; }
.aksept__vilkaar { flex: 1; min-width: 0; font: 400 12px/1.5 var(--sans); color: var(--blekk-2); }
.aksept__signatur {
  margin-top: 12px; border: 1px dashed var(--blekk-5); border-radius: 8px;
  padding: 12px 12px 7px; background: var(--flate-svakere);
}
.aksept__signatur p:first-child { font: 400 19px/1.1 var(--signatur); }
.aksept__signatur p:last-child {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--ramme);
  font: 400 9.5px/1 var(--mono); color: var(--blekk-4);
}
.aksept__godta {
  margin-top: 12px; display: flex; align-items: center; justify-content: center;
  min-height: 46px; background: var(--blekk); color: #FFFFFF;
  border-radius: 8px; font: 600 13.5px/1 var(--sans);
}
.aksept__side { width: 360px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.aksept__notat {
  background: var(--flate-kort); border: 1px solid var(--ramme);
  border-radius: 9px; padding: 18px 20px;
}
.aksept__notat-etikett {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blekk-4);
}
.aksept__notat p { margin-top: 12px; font: 400 14.5px/1.6 var(--sans); color: var(--blekk-3); text-wrap: pretty; }
.aksept__samtale { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.aksept__boble {
  align-self: flex-start; max-width: 88%;
  background: var(--flate-side); border-radius: 10px 10px 10px 3px; padding: 11px 13px;
}
.aksept__boble p { margin-top: 0; font: 400 12.5px/1.5 var(--sans); color: var(--blekk); }
/* Som .boble__tid: boblen er #F2F4F7, så småteksten må ha grå-varianten. */
.aksept__boble .aksept__tid { margin-top: 6px; font: 400 10.5px/1 var(--mono); color: var(--blekk-4-paa-graa); }
.aksept__boble--ut {
  align-self: flex-end; background: var(--blaa); border-radius: 10px 10px 3px 10px;
}
.aksept__boble--ut p { color: #FFFFFF; }
.aksept__boble--ut .aksept__tid { color: var(--blaa-dempet); }

/* =============================================================================
   05 — Regnet ut
   ========================================================================== */

.regnet h2 { margin-top: 20px; max-width: 22ch; }
.regnet__rutenett {
  margin-top: 32px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); gap: 14px;
}
/* Flex-kolonne så foten kan skyves ned: kortene er strukket til lik høyde av
   rutenettet, men foten fulgte brødteksten, og de fire strekene lå på fire
   ulike høyder med 31–67 px ulik bunnluft under seg. */
.loftekort {
  background: var(--flate-kort); border: 1px solid var(--ramme);
  border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column;
}
/* Blå etikett her, grå i 05b: løftene står over trygghetskortene. */
.loftekort__etikett {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blaa-hover);
}
.loftekort h3 { margin-top: 14px; font: 600 18.5px/1.3 var(--sans); letter-spacing: -.03em; }
/* Brødteksten tar den ledige høyden, så foten lander i bunnen av kortet med
   sin egen luft i behold. */
.loftekort p { flex: 1 1 auto; margin-top: 12px; font: 400 15px/1.6 var(--sans); color: var(--blekk-3); text-wrap: pretty; }
.loftekort__fot {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ramme-svak);
  display: flex; justify-content: space-between; gap: 10px;
}
/* Verdien brekker ikke: i det smaleste kortet floket «Kunder · materiell ·
   pakker» og «en gang» seg inn i hverandre over to linjer hver. */
.loftekort__fot > span:last-child { white-space: nowrap; }
.loftekort__fot--stablet { flex-direction: column; gap: 7px; }
.loftekort__fot span { font: 400 12px/1 var(--mono); }
.loftekort__fot span:first-child { color: var(--blekk-3); }
.loftekort__rad { display: flex; justify-content: space-between; gap: 10px; }
.loftekort__rad span { font: 400 12px/1 var(--mono); }
.loftekort__rad span:first-child { color: var(--blekk-3); }
.er-blaa { color: var(--blaa-hover); }

/* =============================================================================
   05b — Trygghet
   ========================================================================== */

.trygghet { display: flex; flex-wrap: wrap; gap: 12px; }
.trygghetskort {
  flex: 1 1 230px; min-width: 0; background: var(--flate-kort);
  border: 1px solid var(--ramme); border-radius: 12px; padding: 22px 24px;
}
.trygghetskort__etikett {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blekk-4);
}
.trygghetskort p {
  margin-top: 12px; font: 400 14.5px/1.6 var(--sans);
  color: var(--blekk-3); text-wrap: pretty;
}

/* =============================================================================
   06 — Låst
   ========================================================================== */

.laast {
  background: var(--flate-mork); color: var(--blekk-paa-mork);
  border-radius: 14px; padding: clamp(30px, 4.4vw, 56px);
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center;
}
.laast__tekst { flex: 1 1 340px; min-width: 0; }
.laast h2 {
  margin-top: 20px; font: 700 clamp(26px, 3.4vw, 38px)/1.08 var(--sans);
  letter-spacing: -.048em; text-wrap: pretty; max-width: 18ch;
}
.laast__brod {
  margin-top: 20px; font: 400 16.5px/1.62 var(--sans);
  color: var(--blekk-brod-mork); max-width: 50ch; text-wrap: pretty;
}
/* Første avsnitt er problemet (dempet, vekt 400), andre er svaret (full
   hvit, vekt 500). Ikke gjør dem like.                                     */
.laast__svar {
  margin-top: 16px; font: 500 16.5px/1.62 var(--sans);
  max-width: 50ch; text-wrap: pretty;
}
.laast__sitat {
  flex: 1 1 320px; min-width: 0; position: relative;
  background: var(--flate-sitat); border: 1px solid var(--ramme-mork);
  border-radius: 10px; padding: 26px 26px 28px;
}
.laast__stempel {
  position: absolute; top: -11px; right: 18px; display: inline-flex;
  padding: 7px 12px; border-radius: 5px; background: var(--blaa); color: #FFFFFF;
  font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.laast__etikett {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blekk-5);
}
/* Eneste sted på siden der mono brukes til brødtekst i 15,5 px. Teksten skal
   se ut som noe en maskin har skrevet ned. Ikke bytt til Schibsted Grotesk. */
.laast__pdf {
  margin-top: 16px; font: 400 15.5px/1.65 var(--mono);
  color: var(--blekk-sitat-mork); text-wrap: pretty;
}
.laast__under {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ramme-mork);
  font: 400 13.5px/1.6 var(--sans); color: var(--blekk-5); text-wrap: pretty;
}

/* =============================================================================
   07 — Pris
   ========================================================================== */

.pris h2 { flex-basis: 300px; }
/* flex-start, ikke stretch: sammenligningskortet er høyt fordi det bærer en
   tabell, og med stretch ble de to prisrutene strukket til samme høyde med
   ~210 px tom hvit flate under teksten. Kortene tar sin egen høyde og flukter
   i toppen. */
/* De tre kortene har svært ulik mengde innhold: prisrutene har en etikett, et
   tall og en linje, mens sammenlikningskortet har et avsnitt og en tabell. Å la
   dem dele ett rutenett ga enten ulike høyder eller prisruter strukket til
   nesten det dobbelte av innholdet sitt, med tomrom under prisen.

   Rutenettet under løser det ved å gi ingressen jobben som utjevner. Den sto før
   i seksjonshodet; nå ligger den under prisrutene, der den dessuten leser som
   «dette får du» rett under prisene den gjelder. Den er ikke fyllstoff — den er
   flyttet til der den hører hjemme, og fyller tilfeldigvis akkurat differansen.

   Tre deler:
     .priskort-rad   rutenett, to kolonner: prisene til venstre, det mørke til høyre
     .priskort-priser  de to prisrutene, utjevnet mot HVERANDRE
     .priskort-under   ingressen, presset mot bunnen av restplassen

   Resultatet flukter både oppe og nede, prisrutene er like høye seg imellom, og
   ingen av dem har tomrom inni seg. Høydene stemmer av seg selv på enhver
   bredde — det mørke kortet spenner begge radene, så ingressen får akkurat det
   som blir til overs. Ingen magiske tall å vedlikeholde. */
/* TRE like kolonner, ikke «2fr 1fr». Med 2fr 1fr faar prisboksen 732 px, men
   den har et mellomrom paa 14 px INNE i seg, saa hver prisrute ble 359 mens det
   moerke kortet fikk hele 366. Sju piksler, og det synes naar kortene staar ved
   siden av hverandre.

   Med repeat(3, 1fr) og en prisboks som spenner to kolonner kommer det indre
   mellomrommet ut av samme rytme som det ytre, og alle tre kortene blir
   noeyaktig like brede. */
.priskort-rad {
  margin-top: 32px; display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr;
}
.priskort-priser { grid-column: 1 / 3; grid-row: 1; display: flex; gap: 14px; align-items: stretch; }
.priskort-priser > .priskort { flex: 1 1 0; }
/* Sentrert i begge retninger under de to prisrutene: teksten hoerer til DEM,
   ikke til seksjonens venstre marg, og en tekst som hang i venstrekanten leste
   som om den var falt ut av kortgruppen. */
.priskort-under {
  grid-column: 1 / 3; grid-row: 2;
  display: flex; align-items: center; justify-content: center;
}
.priskort-under p {
  margin: 0; max-width: 62ch; text-wrap: pretty;
  font: 400 15.5px/1.62 var(--sans); color: var(--blekk-3);
}
.priskort {
  min-width: 0; background: var(--flate-kort);
  border: 1px solid var(--ramme); border-radius: 12px; padding: 28px;
}
/* Uthevingen er blå ramme hele veien rundt pluss en 3 px strek på toppen.
   Ingen skygge, ingen skalering, ingen «mest populær»-flagg.               */
.priskort--uthevet { border-color: var(--blaa); border-top: 3px solid var(--blaa); }
.priskort--mork {
  grid-column: 3; grid-row: 1 / 3;
  background: var(--flate-mork); color: var(--blekk-paa-mork); border: 0;
  display: flex; flex-direction: column;
}
.priskort__etikett {
  font: 500 10px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blekk-4);
}
.priskort--mork .priskort__etikett { color: var(--blekk-5); }

/* Under 767 px stables alt, og rutenettet slaas av.

   Ingressen staar FOERST her, ikke mellom prisene og sammenlikningen. Paa
   bredde har den en jobb — den utjevner hoyden mot det moerke kortet — men
   stablet finnes ikke den jobben, og da er den bare en tekst som har havnet
   midt inne i en kortstabel. Oeverst leses den som det den er: ingressen til
   prisene. Det var ogsaa der den sto foer 20. august.

   I DOM-en ligger den sist, fordi den paa bredde maa vaere i rad to. Derfor
   settes rekkefoelgen med order.

   De to prisrutene utjevnes mot hverandre med grid-auto-rows: 1fr. Stablet er
   forskjellen bare noen faa piksler — merkeraden i aarskortet er hoyere enn den
   enkle etiketten i maanedskortet — og da koster utjevningen ingenting. Det
   moerke kortet er utenfor, det har en tabell og skal faa vaere hoyere. */
@media (max-width: 767px) {
  .priskort-rad { grid-template-columns: 1fr; grid-template-rows: none; }
  /* grid-row/grid-column maa nullstilles, ikke bare overstyres med order:
     order styrer AUTOMATISK plassering, mens et element med fast rad blir
     staaende der uansett. Uten dette flyttet ingressen seg ikke. */
  .priskort-under {
    grid-column: auto; grid-row: auto; order: 1;
    align-items: flex-start; justify-content: flex-start;
  }
  .priskort-priser {
    grid-column: auto; grid-row: auto; order: 2;
    display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr;
  }
  .priskort--mork { grid-column: auto; grid-row: auto; order: 3; }
}
.priskort__merkerad { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.priskort__merke {
  font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: #FFFFFF; background: var(--blaa); border-radius: 4px; padding: 5px 8px;
}
.priskort__pris {
  margin-top: 22px; font: 500 clamp(38px, 5vw, 50px)/1 var(--sans);
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.priskort__enhet {
  font: 400 16px/1 var(--sans); color: var(--blekk-4); letter-spacing: 0;
}
/* Tusenskillet i årsprisen. Tegnet ER et smalt mellomrom (U+202F), men den
   stramme sporingen (-.05em på ~50 px) spiste det ned til 3,5 px mot sifrenes
   29 - «5 990» leste som «5990», mens «1 497» og «3 992» rett under hadde
   tydelig mellomrom. Fast bredde, uavhengig av sporingen. */
.priskort__pris .pris-gap { display: inline-block; width: .17em; letter-spacing: normal; }
/* Setningen som selger staar foerst og alene; avgiftsforbeholdet er en
   presisering og ligger dempet under. Begge prisrutene faar dermed noeyaktig
   samme form — en linje pluss en — i stedet for at den ene brakk til to linjer
   og den andre ikke. text-wrap: pretty hindrer at siste ord havner alene om
   noen skriver om teksten senere. */
.priskort__fin { margin-top: 14px; font: 400 15px/1.6 var(--sans); color: var(--blekk-3); text-wrap: pretty; }
.priskort__mva { margin-top: 6px; font: 400 13px/1.5 var(--sans); color: var(--blekk-4); }
.priskort__brod {
  margin-top: 20px; font: 400 15.5px/1.62 var(--sans);
  color: var(--blekk-brod-mork); text-wrap: pretty;
}
.sammenligning { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.sammenligning__rad { display: grid; grid-template-columns: 52px 1fr 74px; gap: 10px; }
.sammenligning__rad--hode span {
  font: 500 9px/1.3 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--blekk-5);
}
.sammenligning__rad--hode .er-oss { color: var(--blekk-paa-mork); text-align: right; }
.sammenligning__rad--data { border-top: 1px solid var(--ramme-mork); padding-top: 9px; }
.sammenligning__antall { font: 400 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.sammenligning__andre {
  font: 400 13px/1 var(--mono); color: var(--blekk-brod-mork);
  font-variant-numeric: tabular-nums;
}
/* Den lyseblå brukes på EN verdi — der konkurrentens regning har løpt fra. */
.sammenligning__andre--topp { color: var(--blaa-paa-mork); }
.sammenligning__oss {
  font: 500 13px/1 var(--sans); text-align: right; font-variant-numeric: tabular-nums;
}
/* AVVIK (kontrast): #6B7280 på #111827 er 3,76:1. #9CA3AF finnes allerede i
   samme kort og gir 7,2:1 — ingen ny farge i paletten.                     */
.sammenligning__fot { margin-top: 6px; font: 400 11px/1.5 var(--mono); color: var(--blekk-5); }

/* =============================================================================
   08 — Veien videre
   ========================================================================== */

.veien__rad {
  margin-top: 20px; display: flex; flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px); align-items: flex-start;
}
.veien__tekst { flex: 1.2 1 340px; min-width: 0; }
.veien__brod {
  margin-top: 20px; font: 400 16.5px/1.62 var(--sans);
  color: var(--blekk-3); max-width: 52ch; text-wrap: pretty;
}
.veien__lofte {
  margin-top: 16px; font: 500 16.5px/1.62 var(--sans);
  max-width: 52ch; text-wrap: pretty;
}
.veien__hoyre { flex: 1 1 300px; min-width: 0; }
.veien__liste { display: flex; flex-direction: column; gap: 10px; }
.veien__liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--flate-kort); border: 1px solid var(--ramme);
  border-radius: 9px; padding: 15px 16px;
}
.veien__navn { font: 500 14.5px/1.35 var(--sans); }
.veien__status {
  font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--blekk-3); background: var(--flate-svak);
  border-radius: 4px; padding: 6px 8px; white-space: nowrap;
}
/* AVVIK (semantikk): fotnoten var et femte <li> uten kort. Den er ikke et
   punkt i samme liste — flyttet ut som <p>. Pikselidentisk.                */
.veien__fot {
  margin-top: 10px; padding: 2px 2px 0;
  font: 400 12.5px/1.6 var(--mono); color: var(--blekk-4-paa-graa);
}

/* =============================================================================
   08b — Spørsmål
   ========================================================================== */

.sporsmal h2 { margin-top: 20px; max-width: 20ch; }
.sporsmal__rutenett {
  margin-top: 32px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px;
}
.svarkort {
  background: var(--flate-kort); border: 1px solid var(--ramme);
  border-radius: 12px; padding: 24px 26px;
}
.svarkort h3 { font: 600 17px/1.35 var(--sans); letter-spacing: -.025em; }
.svarkort p { margin-top: 12px; font: 400 15px/1.62 var(--sans); color: var(--blekk-3); text-wrap: pretty; }

/* =============================================================================
   09 — Kom i gang, og bunnfoten
   ========================================================================== */

.komigang { padding-bottom: 0; }
.sluttpanel {
  background: var(--flate-kort); border: 1px solid var(--ramme); border-radius: 14px;
  padding: clamp(30px, 4.4vw, 56px);
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: flex-end;
}
.sluttpanel__tekst { flex: 1 1 340px; min-width: 0; }
.sluttpanel h2 {
  margin-top: 20px; font: 700 clamp(29px, 4.2vw, 46px)/1.04 var(--sans);
  letter-spacing: -.05em; max-width: 16ch; text-wrap: pretty;
}
.sluttpanel__ingress {
  margin-top: 20px; font: 400 17px/1.62 var(--sans);
  color: var(--blekk-3); max-width: 50ch; text-wrap: pretty;
}
.sluttpanel__handling {
  flex: 0 1 300px; min-width: 0;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.sluttpanel__fin { font: 400 14px/1.5 var(--sans); color: var(--blekk-4); }

/* AVVIK (semantikk): bunnfoten lå som en <div> inne i seksjon 09. Flyttet ut
   til et <footer>. Visuelt identisk — den indre wrapperen holder streken
   innenfor sideluften, akkurat som før.                                    */
.bunn { max-width: var(--spalte); margin: 0 auto; padding: 0 var(--sideluft) clamp(28px, 3vw, 36px); }

/* Bunnen var én flat rad med åtte lenker (.bunn__lenker) fram til 24. august
   2026. Da kom nettstedet opp i 26 sider, og 26 lenker på rad brekker til
   fire linjer der ingenting henger sammen med noe. Nå er de gruppert etter
   hva leseren er ute etter, i et rutenett som legger seg selv: auto-fit gir
   fem spalter på skrivebordet og færre etter hvert som vinduet krymper.   */
.bunn__nett {
  margin-top: 26px; padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--ramme);
  display: grid; gap: 28px 24px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
/* Gruppene er <details> og tittelen deres <summary>: på smale skjermer er
   bunnen en sammenleggbar meny — 26 lenker rett ned ble en fot på over
   1100 px (målt 24. august 2026, Anders sa fra 25.), fem titler er en
   skjermhøyde mindre. På brede skjermer åpner et lite skript nederst på
   siden alle gruppene, og titlene ser ut som overskrifter igjen (og kan
   ikke klikkes igjen der — kolonner som klapper sammen er ingen tjent med).
   Uten skript kan gruppene fortsatt åpnes for hånd. */
.bunn__tittel {
  font: 500 10.5px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--blekk-4-paa-graa);
  display: block; list-style: none; position: relative;
}
.bunn__tittel::-webkit-details-marker { display: none; }
@media (min-width: 560px) {
  .bunn__tittel { pointer-events: none; }
}
/* Ulik luft de to veiene: 20 px vannrett var riktig da lenkene sto på rad,
   men samme tall loddrett blir ~39 px når linjehøyden legges til. I en
   spalte er 9 px riktig — det gir ~27 px mellom klikkflatene. */
.bunn__liste { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.bunn__liste a {
  font: 400 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--blekk-3);
}
.bunn__liste a:hover { color: var(--blaa); }

/* Nederste linje: merket til venstre, selskapet til høyre. Streken over er
   den svake — den skiller to deler av samme fot, ikke foten fra siden. */
.bunn__rad {
  margin-top: clamp(28px, 3.4vw, 38px); padding-top: 20px;
  border-top: 1px solid var(--ramme-svak);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: baseline; justify-content: space-between;
}
.bunn__merke { font: 700 16px/1 var(--sans); letter-spacing: -.04em; }

/* Under ~560 px er det ikke plass til to spalter med monotekst uten at
   lenkenavnene brekker midt i ordet. Da stables gruppene — og siden de er
   <details>, er de her en lukket meny: tittel-raden får full høyde som
   klikkflate (≥44 px), en vinkel viser at den kan åpnes, og en svak strek
   skiller radene. */
@media (max-width: 559px) {
  .bunn__nett { grid-template-columns: 1fr; gap: 0; }
  .bunn__gruppe { border-bottom: 1px solid var(--ramme-svak); }
  .bunn__gruppe:last-child { border-bottom: 0; }
  .bunn__tittel { padding: 16px 28px 16px 0; cursor: pointer; }
  .bunn__tittel::after {
    content: ""; position: absolute; right: 5px; top: 50%;
    width: 7px; height: 7px; margin-top: -6px;
    border-right: 1.5px solid var(--blekk-4-paa-graa);
    border-bottom: 1.5px solid var(--blekk-4-paa-graa);
    transform: rotate(45deg);
  }
  .bunn__gruppe[open] > .bunn__tittel::after {
    transform: rotate(225deg); margin-top: -2px;
  }
  .bunn__liste { margin-top: 0; padding-bottom: 18px; }
}

/* =============================================================================
   /personvern/ — samme ramme, men en lesespalte. Juridisk infrastruktur,
   ikke markedsføring.
   ========================================================================== */

/* Lesespalte, ikke markedsføringsflate. Bredden er satt slik at løpende tekst
   lander på ca. 73 tegn per linje — 760 px ga 95, som er for langt å lese for
   en side folk faktisk må lese gjennom. */
.lesespalte {
  max-width: 600px; margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--sideluft) clamp(48px, 6vw, 72px);
}
.lesespalte h1 {
  margin-top: 20px; font: 700 clamp(32px, 4.4vw, 46px)/1.05 var(--sans);
  letter-spacing: -.05em; text-wrap: pretty;
}
/* «.lesespalte p» lenger nede veier tyngre enn en ren klasse. De tre avsnittene
   som ikke er brødtekst må derfor skrives med tag i selektoren, ellers rendres
   de som brødtekst: eyebrow-en mister monoen, ingressen blir ikke til å skille
   fra brødteksten, og «Sist oppdatert» leser som et vanlig avsnitt.          */
.lesespalte p.eyebrow {
  margin-top: 0; font: 500 11px/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--blekk-3);
}
.lesespalte p.lesespalte__ingress {
  margin-top: 20px; font: 400 17px/1.62 var(--sans);
  color: var(--blekk-3); text-wrap: pretty;
}
.lesespalte p.lesespalte__oppdatert { margin-top: 14px; font: 400 12px/1.5 var(--mono); color: var(--blekk-4-paa-graa); }
.lesespalte h2 {
  margin-top: 44px; font: 700 clamp(22px, 2.6vw, 27px)/1.2 var(--sans);
  letter-spacing: -.035em; text-wrap: pretty;
  /* #databehandleravtale er hoppmål fra bunnfoten på begge sidene. */
  scroll-margin-top: var(--topplinje);
}
.lesespalte h3 {
  margin-top: 28px; font: 600 17px/1.35 var(--sans); letter-spacing: -.025em;
}
.lesespalte p { margin-top: 14px; font: 400 16px/1.68 var(--sans); color: var(--blekk-3); text-wrap: pretty; }
.lesespalte p strong { color: var(--blekk); font-weight: 600; }
/* Lenker i lesespalta må se ut som lenker: den globale a-regelen gir dem
   husets nesten-svarte uten strek, og sidens eneste kontaktpunkt
   (hei@sonida.no under «Kontakt og klage») så ikke trykkbart ut. */
/* :not(.knapp) fordi en knapp inne i lesespalta ellers blir tegnet som en
   tekstlenke: denne regelen er (0,1,2) og slar bade .knapp og .topplinje__cta,
   som begge er (0,1,0). Resultatet var en mork knapp med bla, understreket
   tekst pa fem sider. Sett 22. august av Anders, i et skjermbilde. */
.lesespalte p a:not(.knapp), .lesespalte ul li a:not(.knapp) {
  color: var(--blaa); text-decoration: underline; text-underline-offset: 2px;
}
.lesespalte p a:not(.knapp):hover, .lesespalte ul li a:not(.knapp):hover { color: var(--blaa-hover); }
.lesespalte ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.lesespalte ul li {
  position: relative; padding-left: 20px;
  font: 400 16px/1.68 var(--sans); color: var(--blekk-3); text-wrap: pretty;
}
.lesespalte ul li::before {
  content: "·"; position: absolute; left: 6px; color: var(--blekk-5);
}
.lesespalte hr {
  margin: 40px 0 0; border: 0; border-top: 1px solid var(--ramme);
}

/* «Les også» — kryss-lenkene som ikke fant noen naturlig ankertekst inne i
   brødteksten. En dempet linje rett før foten, tydelig atskilt fra teksten
   over, men lavere i rang enn en overskrift: den skal kunne overses av den
   som er ferdig å lese.

   Selektoren må bære BÅDE tag og klasse. «.lesespalte p» er (0,1,1) og
   slår en ren klasse — samme felle som ga fem sider mørke knapper med blå,
   understreket tekst 22. august. */
.lesespalte p.les-ogsaa {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--ramme);
  font: 400 14.5px/1.75 var(--sans); color: var(--blekk-4-paa-graa);
}
.les-ogsaa__etikett {
  display: block; margin-bottom: 5px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--blekk-4-paa-graa);
}

/* Åpne punkter står som synlige TODO-er. Ingen juridisk tekst er diktet opp. */
.todo {
  margin-top: 20px; background: var(--flate-kort);
  border: 1px dashed var(--ramme-skjerm); border-left: 3px solid var(--blaa);
  border-radius: 10px; padding: 20px 22px;
}
.todo__etikett {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blaa-hover);
}
.todo p { margin-top: 10px; font: 400 15px/1.62 var(--sans); color: var(--blekk-3); }
.todo p:first-of-type { margin-top: 12px; }

/* Selgerens identitet i bunnen (ehandelsloven § 8). Dempet: den skal være
   lett å finne, ikke lett å legge merke til. */
.bunn__selskap {
  /* Sto på egen linje med width:100% da bunnraden bar lenkene. Nå deler den
     raden med merket, og flex-wrap gir den sin egen linje først når det er
     for trangt. */
  margin: 0;
  font: 400 12px/1.5 var(--mono); letter-spacing: .02em;
  /* --blekk-4-paa-graa, som de sju andre stedene småteksten står på grått.
     Eierskapslinja kom til etter den runden og ble ikke med: #6B7280 her gir
     4,39:1, altså rett under kravet på 4,5. */
  color: var(--blekk-4-paa-graa);
}

/* Tabellene på personvernsiden: oppbevaringstider og underdatabehandlere.
   Bred tabell på en smal skjerm skal rulle i sin egen boks, aldri dra hele
   siden sidelengs. */
.pv-tabell {
  width: 100%; border-collapse: collapse;
  margin: 10px 0 18px;
  display: block; overflow-x: auto;
  font: 400 14px/1.5 var(--sans);
}
.pv-tabell th, .pv-tabell td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--ramme-svak);
}
.pv-tabell th { font-weight: 600; color: var(--blekk); white-space: nowrap; }
.pv-tabell td:first-child { color: var(--blekk); font-weight: 500; }
.pv-tabell td { color: var(--blekk-3); }