/* site.css — FELLES grunnlag for hero-easy-d.html og om-oss.html (2026-07-30).
   Tokens, bakgrunn, nav, seksjonsrytme, kolonner, lenkespråk, avsløring.
   Sidespesifikk CSS bor inline i hver side når ÉN side bruker den; deles den av
   flere sider (artikkelstilene for nyhet-*.html), bor den her. Endres tokens/gradient her,
   gjelder de BEGGE sidene. Nav-platen er koblet til gradientens verdi. */

:root{
  /* Varm-nøytral rampe (bruker 2026-07-29): samme lyshet som før, temperatur
     b−r = −4 i stedet for kjølig +6…+13. Blåstikket satt i BLEKKET, ikke bare
     bakgrunnen. Overstyrer DIRECTION.md pkt 3 (kjølig monokrom) for nettsiden;
     DIRECTION.md står urørt — dette er foreløpig, per bruker. */
  --surface:#fffefc; --ink:#1a1816; --text-2:#72706e; --text-3:#a3a19f;
  /* Aksent = blekk (bruker 2026-07-29, «inntil videre»): det blå #0f4c81 fra
     DIRECTION.md pkt 2 er satt til side for nettsiden. Lenker merkes derfor
     med UNDERSTREK, ikke farge. DIRECTION.md står urørt. */
  --hair:#e3e1df; --accent:#1a1816; --accent-soft:#f0eeec;
  /* Vedtatt 2026-08-08: hover-blekk, fokusradius, og rundt portrett som
     navngitt unntak -- ikke et tredje hjørnetrinn. */
  --ink-hover:#343230; --r-focus:3px; --r-round:50%;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
  /* Hjørneskala (2026-08-02, bruker: skarpere hjørner kler den tynne
     hårlinje-/lettvekts-stilen — men ikke helt kvadratisk). Halvert fra
     11-12/9-10/8: store flater (nav-platen, lysboksbildet), bilder/kort,
     knapper/småelementer. Portretter (50 %) og fokusmarkører er urørt.
     Skal hele nettstedet skarpere/rundere, justeres disse tre. */
  --r-lg:6px; --r-sm:4px;
  /* ÉN felles avstand mellom alle seksjoner (bruker 2026-07-25). Endre her,
     og hero→produkt, produkt→datakilder, datakilder→referanser osv. følger. */
  /* ÉN avstand mellom alle seksjoner. Ingen seksjon har lenger etterluft
     (min-height:100vh er fjernet — den ga datakilder 65px ekstra), så denne
     verdien ER den målte avstanden ved hver overgang. */
  --sec-gap:32vh;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
/* fast gradient-lag bak ALLE seksjoner → sømløs, identisk bakgrunn ved scroll */
/* VARM-NØYTRAL rampe, FJERDE lysning (bruker 2026-08-07): endepunktene er
   varm-nøytrale (b−r = −3), ikke r=g=b — samme regel som tokens: lyshet
   bevart, temperatur snudd til svak varme. Rampen er hevet 249 → 255 (var
   245 → 253, før det 239 → 249 og 218 → 246). Spennet er 6 nivåer; gradienten
   SKAL beholdes (bruker, presisert 2026-07-29), bare lysnes.
   NB: .bg er fixed, så toppen av SKJERMEN er alltid den mørkeste enden.
   Endres tallene her, må nav-platen følge etter — den er satt til gradientens
   egen verdi der navet står, og det er hele grunnen til at den forsvinner inn
   i flaten. Panelene finnes ikke lenger, så det er den ENESTE koblingen. */
/* GRADIENTEN ER FJERNET (vedtatt 2026-08-08). Den porterte ikke — PDF, Word
   og e-post er flate uansett — og spennet var krympet fra 28 til 6 nivåer
   gjennom fire lysninger. Dybden kommer nå fra hårlinje og skygge alene.
   Historikken står i spec-en; ikke gjeninnfør den her. */
.bg{position:fixed;inset:0;z-index:-2;background:var(--surface)}

/* ---------- nav ---------- */
/* Opak plate i SIDENS EGEN bakgrunnsfarge med hårlinje (bruker 2026-07-29).
   Først hvit, nå #fffefc = gradientens verdi der navet står: over
   siden forsvinner platen inn i flaten og bare hårlinjen tegner formen, mens
   den over videoen fortsatt er en solid plate. Mørk tekst står (låst 2026-07-24).

   Om hårlinjens styrke: en TIDLIGERE note her sa at den «MÅ være .18», fordi
   .08 alpha ga ~236 mot 239 — usynlig. Den observasjonen står, men den handlet
   om alpha over platen, ikke om styrke generelt. Kravet er egentlig at kanten
   må ligge nok nivåer under platen for å tegne formen. Målt 2026-07-30 etter at
   bruker ba om svakere kant: rgba(26,24,22,.18) ga 205 mot 245 = 40 nivåer,
   --hair (#e3e1df) gir 227 mot 245 = 18 nivåer. 18 er godt synlig; 3 var ikke.
   Går kanten enda lavere, er neste steg å droppe den og la skyggen bære
   formen — ikke å tynne den videre. */
/* KOMPAKT PILLE (bruker 2026-08-19, samlet 2026-08-20). Platen spente før
   fra 8 % til 8 % og ble strukket uansett hvor lite den inneholdt. Da menyen
   gikk fra seks punkter + nyhetstikker til fire, ble midten 631px tom hvit
   flate — MÅLT ved 1440. Nå krymper platen til innholdet og flyter sentrert.
   Logg inn satt tidligere som egen pille 8px til høyre (NAV-ØY, 2026-07-30).
   2026-08-20: knappen bor INNE i platen, så det er én bar, ikke to. */
.nav{position:fixed;top:22px;left:0;right:0;z-index:50;padding:0 8%;
  display:flex;align-items:center;justify-content:center}
.nav-plate{flex:0 1 auto;display:flex;align-items:center;gap:22px;
  background:#fffefc;
  /* Kanten er dempet til --hair (bruker 2026-07-30). Var rgba(26,24,22,.18),
     som over platens #fffefc ga en effektiv kant på ~#cdcccb — altså
     mørkere enn nettstedets svakeste hårlinje, på det ene elementet som ligger
     over alt annet. --hair (#e3e1df) er ett hakk lysere og er et token som alt
     finnes. Skyggen er urørt og bærer avgrensningen mot video på forsiden. */
  border:1px solid var(--hair);border-radius:999px;padding:5px 5px 5px 16px;
  box-shadow:0 1px 2px rgba(31,29,27,.05),0 12px 32px -12px rgba(31,29,27,.12);
  font-size:13.5px;color:var(--ink)}
/* margin-left:auto er FJERNET med den kompakte pillen: det grepet fantes for
   å skyve lenkene mot høyre kant i en strukket plate. Nå er det ingen slakk å
   skyve i — platen er nøyaktig så bred som innholdet. */
/* white-space:nowrap (2026-08-02, hamburgerrunden): «Easy Eiendom» brakk til
   to linjer ved 320-360px og ga platen 2px ekstra høyde (48→50px) — MÅLT
   under samme sveip som fant hamburger-tersklene. Uten ordmerket å konkurrere
   med (lenkene er borte fra platen under 900px) er nowrap trygt ved de
   fleste bredder — MEN ved 320/340px SPRENGER det i stedet platen+øy ut over
   viewporten (20px / 1px overflow, målt), fordi ordmerket da ikke lenger kan
   gi etter. 360px er nedre grense der nowrap er overflowfritt (0px målt);
   under den reverteres til vanlig ombryting igjen, som bare kostet 2px
   plate-høyde og aldri overflow. */
/* «Book prat» bor som dempet tekst inne i platen. Logg inn er den fylte
   knappen i samme plate — ikke en egen pille utenfor. */
.nav-plate .login{flex:none;color:var(--text-2);white-space:nowrap}
.nav-plate .login:hover{color:var(--ink)}
.nav-plate .wordmark{display:flex;align-items:center;gap:7px;font-weight:500;
  color:var(--ink);font-size:14.5px;white-space:nowrap}
@media (max-width:359px){.nav-plate .wordmark{white-space:normal}}
.nav-plate .wordmark svg{width:16px;height:16px}
.nav-plate a{color:inherit;text-decoration:none}
/* HOVER: understrek. Aksentfargen er avviklet (§11), så understrek er
   nettstedets lenkespråk — både for markering av ekte lenker i innhold og som
   hover-tilstand her.

   Vekst (transform:scale(1.09)) ble prøvd 2026-07-31 og REVERSERT samme dag:
   bruker fant understreken renere og mer i tråd med uttrykket. Målingene fra
   forsøket står i §11 for den som vurderer det på nytt — den var layoutnøytral
   og skarp, men effekten var diskré (~6px på et 65px ord).

   :focus-visible er BEHOLDT fra det forsøket. Nav hadde ingen fokusmarkør før,
   og hover-stil hjelper ikke den som navigerer med tastatur. Samme mønster som
   .pl-item og FAQ-en på forsiden. */
.nav-plate a:hover{text-decoration:underline;text-underline-offset:3px}
.nav-plate a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
/* FYLT BLEKK (vedtatt 2026-08-08, spec punkt 7). Knappen var tidligere
   #fffefc med hårlinje — altså sidens SVAKESTE flate på sidens VIKTIGSTE
   knapp. Systemets regel for handling er fylt blekk med hvit tekst, og det
   fylte feltet er den eneste viktighetsmarkøren som finnes. Derfor er den
   fylt her og bare her i navigasjonen.
   Tilstandene var to reelle feil spec-en navngir: knappen manglet både
   :hover og :focus-visible, så tastaturbrukere så ingenting.

   Selektorene er mer spesifikke enn `.nav-plate a`, ellers arver knappen
   blekkfarge og understrek-hover fra platens lenkeregel. Skygge er ute:
   platen bærer avgrensningen, knappen er innhold. */
.nav-plate .tryfree{flex:none;align-self:stretch;display:flex;align-items:center;
  justify-content:center;margin-left:-6px;background:var(--ink);border:1px solid var(--ink);
  border-radius:999px;padding:0 16px;font-weight:500;font-size:13.5px;
  color:var(--surface);text-decoration:none;white-space:nowrap;line-height:1;
  box-shadow:none;
  transition:background .15s cubic-bezier(.22,.61,.36,1),
             border-color .15s cubic-bezier(.22,.61,.36,1)}
.nav-plate .tryfree:hover{background:var(--ink-hover,#343230);border-color:var(--ink-hover,#343230);
  color:var(--surface);text-decoration:none}
.nav-plate .tryfree:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:999px;
  color:var(--surface);text-decoration:none}
@media (prefers-reduced-motion:reduce){.nav-plate .tryfree{transition:none}}

/* Wrap-systemet som satt her (760px platen foldet internt i tre rader,
   460px øya falt til en fjerde) er FJERNET 2026-08-02 (bruker) og erstattet
   av en ordentlig hamburgermeny — se «MOBILMENY / HAMBURGER» nedenfor.
   Historikken (måltallene bak 760/446/460) står i NETTSIDE-DESIGN.md §6/§11
   for den som trenger den; ingen grunn til å la reglene ligge ubrukt her. */

/* ---------- MENYENS LENKER: SKILLESTREKER OG NEDTREKK ----------
   Omskrevet 2026-08-19 (bruker, referanse: solgt.no).

   Her sto nyhetstikkeren: ~90 linjer .nav-siste/.ns-* med finmålte tall
   (404px/236px vindu, 1199px-terskel, 83px luft til lenkene) og en egen
   JS-fil på 8,6 KB. Alt er borte. Tikkeren rullet én tittel hvert 6. sekund
   midt i platen og tok 404px av den; «Nyheter» er nå en vanlig rad under
   Innsikt. Måletallene og begrunnelsene ligger i git-historikken og i
   NETTSIDE-DESIGN.md §5 for den som skal vurdere noe liknende igjen.

   SKILLESTREKENE er --hair, samme hårlinje som platens egen kant og resten av
   nettstedet. Ikke en ny farge: nettstedet har én streksverdi, og en meny er
   ikke stedet å innføre den andre.

   Polstringen (5px 15px) setter samtidig strekhøyden — streken er like høy som
   punktets innholdsboks, ca. 28px. Endres polstringen, endres streken. */
.nav-plate .links{display:flex;align-items:center}
.nav-plate .links>*{display:flex;align-items:center;padding:5px 15px}
.nav-plate .links>*+*{border-left:1px solid var(--hair)}
.nav-plate .links>*:last-child{padding-right:4px}

/* NEDTREKK. HTML-en har en vanlig lenke (.lknapp som <a>) og et panel med
   `hidden`; assets/undermeny.js bytter lenken mot en <button> og legger pila
   til. Begge formene treffes av .lknapp, så stilen er den samme før og etter
   oppgraderingen — bortsett fra pila, som bare finnes når JS har kjørt.
   font/color/background/border nullstilles fordi <button> ikke arver dem. */
.lgruppe{position:relative}
.lknapp{font:inherit;line-height:inherit;color:inherit;background:none;border:0;
  padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none}
.lknapp:hover{text-decoration:underline;text-underline-offset:3px}
.lknapp:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.lpil{width:9px;height:6px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;color:var(--text-3);
  transition:transform .15s cubic-bezier(.22,.61,.36,1)}
.lknapp[aria-expanded="true"] .lpil{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.lpil{transition:none}}

/* Panelet henger under platen. 14px = platens bunnpolstring (7px) + 7px luft,
   så det ser ut til å komme ut av platen og ikke ut av teksten. Kant, radius
   og skygge er PLATENS egne verdier — panelet er samme materiale, ikke et nytt.
   z-index 60 er over .nav (50), ellers legger platen seg oppå sitt eget panel. */
.undermeny{position:absolute;top:calc(100% + 14px);left:6px;z-index:60;
  display:flex;flex-direction:column;width:330px;padding:5px;
  background:#fffefc;border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(31,29,27,.05),0 12px 32px -12px rgba(31,29,27,.12)}
.undermeny[hidden]{display:none}

/* RADENE (2026-08-19, cotality.com som referanse). Hver rad er navn + én
   forklarende linje, ikke bare et navn: fire bare produktnavn krever at leseren
   alt vet hva de er. Tekstene er sidenes EGNE titler, ikke ny copy — se
   nav-kommentaren i HTML-en.

   Fast bredde 330px, ikke min-width: forklaringslinjene har ulik lengde, og et
   panel som endrer bredde mellom Produkter og Innsikt ville hoppet. */
.um-rad{display:block;padding:10px 11px;border-radius:var(--r-sm);text-decoration:none}
/* Hårlinje som box-shadow, ikke border: en border ville stukket ut av
   hover-flatens avrundede hjørner, og kan ikke slås av på raden over den
   hovrede. Skyggen kan begge deler. */
.um-rad+.um-rad{box-shadow:inset 0 1px 0 var(--hair)}
.um-rad:hover{background:var(--accent-soft);text-decoration:none;box-shadow:none}
.um-rad:hover+.um-rad{box-shadow:none}
.um-t{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink);white-space:nowrap}
/* Fremhevet rad (Grunnerverv). Cotality bruker et farget kort til dette;
   nettstedet er monokromt, så vekt er markøren vi har. */
.um-frem .um-t{font-weight:500}
.um-pil{width:12px;height:8px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;color:var(--text-3);
  transition:transform .15s cubic-bezier(.22,.61,.36,1),color .15s}
.um-rad:hover .um-pil{transform:translateX(3px);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.um-pil{transition:none}}
.um-b{display:block;margin-top:3px;font-size:12.5px;font-weight:300;color:var(--text-2);
  line-height:1.4;white-space:normal}

/* TO KOLONNER (2026-08-19, bruker; referanse: cotality.com, som har «products»
   og «solutions» side om side under ett overdomene). BARE Produkter-nedtrekket
   bruker dette: tjenestene er enkeltoppdrag utført av folk, ikke noe man
   abonnerer på, og hører derfor ikke hjemme i produktlista — men de hører
   hjemme i samme meny. De tre andre nedtrekkene er én kolonne som før.

   width:auto her overstyrer de faste 330px: to kolonner à 300px + skille +
   panelets polstring. Kolonnene har fast bredde av samme grunn som panelet
   hadde det, at forklaringslinjene ellers ville gitt ulik bredde per nedtrekk. */
.undermeny.um-todelt{flex-direction:row;width:auto}
.um-kol{display:flex;flex-direction:column;width:300px}
/* Skillet som skygge, ikke border — samme grunn som hårlinja mellom radene:
   den skal verken ta bredde eller stikke ut av hover-flatenes hjørner. */
.um-kol+.um-kol{margin-left:5px;padding-left:5px;box-shadow:inset 1px 0 0 var(--hair)}
/* Kolonneoverskrift i bunntekstens etikett-stil (.f-tittel), ikke en ny stil. */
.um-tit{display:block;padding:8px 11px 6px;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* MÅLT, IKKE ANTATT: to kolonner er 617px bredt, og panelet henger 6px inn fra
   Produkter-punktet — som ligger nær midten av en sentrert plate. Under ca.
   1035px vindusbredde stikker panelets høyre kant utenfor skjermen. Å høyre-
   stille det hjelper ikke; da stikker venstre kant ut i stedet, og verre.
   Kolonnene legges derfor under hverandre i god tid før det skjer. Panelet
   blir høyere (≈500px), men alt står synlig, og hamburgeren overtar 250px
   lenger ned uansett. */
@media (max-width:1150px){
  .undermeny.um-todelt{flex-direction:column;width:330px}
  .um-kol{width:auto}
  .um-kol+.um-kol{margin:5px 0 0;padding:5px 0 0;box-shadow:inset 0 1px 0 var(--hair)}
}

/* Alle seksjoner: samme toppavstand, ingen min-høyde. min-height:100vh ble
   fjernet fordi den strakk korte seksjoner (datakilder fikk 65px etterluft) og
   dermed gjorde overgangene ulike selv med identisk padding. Seksjonene er nå
   like høye som innholdet, så --sec-gap alene bestemmer avstanden.
   Ingen bakgrunn her — .bg bærer fargen. En opak flate på .section dekker
   hero-videoen og ødelegger uttoningen (landing-page-pimpet). */
.section{position:relative;padding:var(--sec-gap) 0 0}
.section:last-of-type{padding-bottom:var(--sec-gap)}
.wrap{max-width:1200px;margin:0 auto;padding:0 8%}
.s-kicker{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.s-h2{font-size:clamp(30px,3.4vw,44px);font-weight:200;letter-spacing:-.02em;line-height:1.1;margin:14px 0 0}

/* Gjenbrukbart seksjonshode: kun hårlinje-delelinje + kicker (venstre). Ingen tittel — minimal.
   Kicker er ren versal (ingen pill — låst regel). Brukes på alle innholdsseksjoner. */
.sec-head{border-top:1px solid var(--hair);padding-top:24px;margin-bottom:58px}

/* full bredde, samme 8%-marg som heroen */
.secwrap{padding:0 8%}
/* Gjenbrukbar avsløring (ref: lightfield.app — seksjonene stiger opp nedenfra).
   Justert 2026-07-24: 160px var et LØFT som leste som en hopp; 40px + mykere
   ease-out gir samme «premium»-følelse uten at innholdet flytter seg langt.
   Utløses av IntersectionObserver → egen jevn timing, ikke scroll-scrubbet. */
.reveal{opacity:0;transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
/* Trapp: direkte barn kommer inn etter hverandre i stedet for samtidig.
   Legges på en container INNE i en .reveal (f.eks. datakilde-radene, priskortene). */
.stagger>*{opacity:0;transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.reveal.in .stagger>*{opacity:1;transform:none}
.reveal.in .stagger>*:nth-child(1){transition-delay:.06s}
.reveal.in .stagger>*:nth-child(2){transition-delay:.13s}
.reveal.in .stagger>*:nth-child(3){transition-delay:.20s}
.reveal.in .stagger>*:nth-child(4){transition-delay:.27s}
.reveal.in .stagger>*:nth-child(5){transition-delay:.34s}
.reveal.in .stagger>*:nth-child(6){transition-delay:.41s}
/* Venstretekst sentreres vertikalt mot innholdet til høyre (bruker 2026-07-25:
   «all text on the left side ... should always be in the middle»). Dette
   overstyrer den tidligere regelen om at venstre tekst-topp skulle flukte med
   kortets toppkant. */
/* ---------- LÅST KOMPONENT: venstrekolonne-tekst (ref. lightfield.app) ----------
   Kort tittel + kort beskrivelse. INGENTING ANNET. Ikke chips, ikke rader med
   nøkkeltall, ikke tallklynger — alt slikt hører til høyre, sammen med innholdet.
   Referansen holder venstresiden bevisst liten og dempet; det er derfor den
   virker rolig. Typegradene her er med vilje mindre enn før (tittel 26→19px). */
.coltext .ct-h{font-size:19px;font-weight:500;letter-spacing:-.012em;color:var(--ink);
  line-height:1.32;margin:0}
.coltext .ct-p{margin-top:13px;font-size:14.5px;font-weight:300;color:var(--text-2);
  line-height:1.62;max-width:36ch}
.coltext .ct-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);
  font-size:14.5px;font-weight:400;color:var(--ink);line-height:1.5;max-width:34ch}
.dk-cols{display:grid;grid-template-columns:minmax(280px,4fr) 8fr;gap:72px;align-items:center}
@media (max-width:960px){
  .dk-cols{grid-template-columns:1fr;gap:44px}
}

/* Uten aksentfarge må lenker merkes med noe — understrek er Olson Kundig-
   språket («Learn about our practice.»). */
.plink{display:inline-block;margin-top:auto;padding-top:22px;align-self:flex-start;font-size:13.5px;font-weight:400;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.plink:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- nyhetsartikkel — deles av alle nyhet-*.html (2026-07-31) ----------
   Bor her og ikke inline fordi FLERE sider deler dem (se toppkommentaren).
   Undersidene har ikke .reveal: uten forsidens observer-skript ville
   opacity:0 aldri blitt løftet, og siden vært blank. */
.artikkel{padding:150px 0 120px}
/* De to mobile terskelverdiene som satt her (190px ≤760, 232px ≤460) er
   FJERNET 2026-08-02: de kompenserte for at nav-en selv ble opptil 202px høy
   i det gamle wrap-systemet. Hamburgermenyen (site.css, «MOBILMENY») gjør
   navets bunnkant FLAT igjen — MÅLT 70–72px ved alle bredder 320–899px (var
   146–202px, bredde for bredde). Verste MÅLTE bunnkant i det nye systemet er
   72px; med basisverdien 150px over gir det 78px klaring — langt over
   ≥26px-kravet — ved HVER bredde, ikke bare noen. Ingen medieregel trengs
   lenger; én verdi dekker alt. (300px har fortsatt overflow, men fra
   .h1p i heroen, ikke fra artikkel-navet — utenfor denne rundens omfang.) */
/* Sto som inline style="margin:0;color:var(--ink)" i alle tre nyhetsfilene
   (fjernet 2026-07-31). Delt artikkelstil hører i site.css, og inline kunne
   ikke overstyres herfra. Samme grep som .om-hero h1 i om-oss.html. */
.artikkel h1{margin:0;color:var(--ink)}
.artikkel .a-dato{display:block;margin-top:14px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  font-variant-numeric:tabular-nums}
/* PROSAMÅLET — ÉN deklarasjon for begge sidetypene (samlet 2026-07-31).
   .a-ingress/.a-brod var byte-for-byte verdilike kloner av om-oss sine
   .om-intro/.om-brod, som lå inline i om-oss.html. To navn for samme regel er
   nøyaktig driften §5 advarer mot, så definisjonen bor nå ETT sted — her — og
   om-oss.html har bare en peker igjen.
   Ingress: 700px, ikke 62ch: 62ch løser til 743px på 19px Inter og stakk 43px
   ut av målebredden. Brødtekst: «så bredt komforten tillater», 66ch = 584,9px
   ved 15px; ikke .ct-p sin 36ch, som er en FORSIDEregel for den smale
   4fr-kolonnen og brakk leaden på ~420px her. */
.om-intro,.artikkel .a-ingress{margin-top:20px;font-size:19px;font-weight:400;
  color:var(--ink);line-height:1.6;max-width:700px}
/* Eneste bevisste forskjell mellom de to: artikkelsidene har .a-dato mellom h1
   og ingressen og trenger 6px mer luft etter den. */
.artikkel .a-ingress{margin-top:26px}
.om-brod,.artikkel .a-brod{margin-top:20px;font-size:15px;font-weight:300;
  color:var(--text-2);line-height:1.7;max-width:66ch}
/* Lenker INNE i brødtekst (2026-08-02, innsiktsinnholdet): ingen artikkel
   hadde tidligere lenker midt i .a-brod (nyhetssidene har ingen, produktsidene
   bruker separate .a-tilbake-lenker), så gapet fantes usett til artiklene her
   fikk kryssreferanser til produktsidene. Samme mønster som .ct-note a og
   .faq-a a: arv fargen, understrek som ellers i innholdet. Uten denne regelen
   viser nettleseren standard blått/lilla for lenker og besøkte lenker. */
.om-brod a,.artikkel .a-brod a{color:inherit;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.om-brod + .om-brod,.artikkel .a-brod+.a-brod{margin-top:18px}
.artikkel .a-tilbake{display:inline-block;margin-top:48px;font-size:14.5px;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.artikkel .a-tilbake:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
/* Mellomtitler i lengre artikler/guider (2026-08-02, innsiktsinnholdet):
   samme størrelse/vekt som seksjonstitlene (.ct-h) så en artikkel med flere
   avsnittsgrupper kan brytes opp uten å innføre en ny titteltype.
   :not(.in-tittel) er nødvendig: uten den vinner denne regelens høyere
   spesifisitet (klasse+type) over .in-tittel sin margin-top:64px på
   innsikt.html sine seksjonstitler («Artikler»/«Spesialsider»), og luften
   der ville krympet fra 64 til 44px uten at noen ba om det. Målt og rettet
   samme runde den ble innført. */
.artikkel h2:not(.in-tittel){margin:44px 0 0;font-size:19px;font-weight:500;
  letter-spacing:-.012em;color:var(--ink);line-height:1.32}
.artikkel h2:not(.in-tittel)+.a-brod{margin-top:14px}

/* ---------- nyhetsliste — deles av nyheter.html (2026-07-31) ----------
   Flyttet hit fra hero-easy-d.html sitt sidehode da nyhetsstripen gikk ut av
   forsiden (spec: docs/specs/2026-07-31-nyhetstikker-i-nav-design.md §8).
   Radstilene (.ny-rad/.ny-dato/.ny-tittel/.ny-pil) er delte og uscopede; SELVE
   LISTEN er scopet til .ny-stablet. Scopet er BEHOLDT selv om stripen ikke
   finnes lenger: det skiller radenes utseende fra listens layout, så en
   framtidig visning av de samme radene (horisontalt, i et rutenett, i en marg)
   kan legges til uten å arve hårlinjene og blokkflyten som hører til oversikten.
   I dag er .ny-stablet den eneste listeformen som finnes. */
.ny-rad{display:block;text-decoration:none;color:inherit}
.ny-dato{display:block;font-size:12px;letter-spacing:.14em;color:var(--text-2);
  font-variant-numeric:tabular-nums}
.ny-tittel{display:block;margin-top:5px;font-size:14.5px;color:var(--ink)}
/* Kildelinje under tittelen (2026-08-19, Analyser): hvem som har skrevet det
   og hva slags arbeid det er. Samme dempede vekt som .ny-dato, men uten
   sperring — den er en setning, ikke en etikett. */
.ny-av{display:block;margin-top:6px;font-size:12.5px;font-weight:300;color:var(--text-2)}

/* NYHETSBREV (2026-08-19). Boks nederst på Analyser. Rammen er platens
   materiale — samme hårlinje, radius og flate som navplaten og nedtrekkene,
   så den leser som en del av systemet og ikke som et innlimt skjema. */
.nyhetsbrev{margin-top:72px;padding:28px 30px;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--r-lg)}
.nyhetsbrev .a-brod{margin-top:8px}
/* HubSpot tegner skjemaet inn i .hs-form-frame. Til skjema-ID-en finnes er
   rammen tom, og da skal fallback-setningen stå. Regelen snur når HubSpot har
   lagt inn et barn: :not(:empty) treffer først da, og skjuler fallbacken.
   Ingen JS trengs til vekslingen. */
.hs-form-frame{margin-top:18px}
.hs-form-frame:not(:empty)+.nyhetsbrev-fallback{display:none}
.nyhetsbrev-fallback{margin-top:18px;font-size:13.5px;color:var(--text-2)}
.ny-rad:hover .ny-tittel{text-decoration:underline;text-underline-offset:3px}
.ny-rad:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.ny-pil{color:var(--text-3)}
/* STABLET på egen side, ikke horisontalt som i stripen. Begrunnelsen for
   horisontale kort var at stripen måtte være lav (169px → 84px); det presset
   finnes ikke her, og stablet gir hver tittel hele bredden. Dette var variant B
   i den opprinnelige stripe-spec-en. */
.ny-liste.ny-stablet{display:block;margin-top:40px}
.ny-liste.ny-stablet .ny-rad{padding:18px 0;border-top:1px solid var(--hair)}
.ny-liste.ny-stablet .ny-rad:last-child{border-bottom:1px solid var(--hair)}
.ny-liste.ny-stablet .ny-tittel{font-size:17px;margin-top:7px}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in,.stagger>*,.reveal.in .stagger>*{
    transition:none!important;transform:none!important;opacity:1!important}
  .reveal.in .stagger>*{transition-delay:0s!important}
}

/* ---------- FOOTER (2026-08-01, brukerbeslutning i innsiktsrunden) ----------
   Sidene hadde ingen footer. Den er hjemmet til sekundærsidene (produktsider,
   Innsikt, selskap) uten å røre nav-en, som forblir et argument og ikke en
   meny (§4/§11). Fire kolonner: merke + org/kontakt, Produkter, Innsikt,
   Selskap. Kolonnetitlene bruker samme versalkicker-stil som .s-kicker —
   det er seksjonskonvensjonen på siden (nav-versalene som røk 2026-08-01
   var et annet grep: løpende tekst i platen, ikke merkelapper).
   Footeren dupliseres per side som nav-en (ingen include-mekanisme);
   href-ene varierer med sidens plassering, som i nav (§2.4). */
.footer{margin-top:110px;border-top:1px solid var(--hair);background:var(--surface);
  padding:46px 8% 58px;display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;align-items:start}
.f-merke a.f-ordmerke{display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.f-ordmerke svg{width:20px;height:20px}
.f-info{margin:14px 0 0;font-size:12.5px;font-weight:300;color:var(--text-2);line-height:1.6}
.f-info a{color:var(--text-2);text-decoration:none}
.f-info a:hover{text-decoration:underline;text-underline-offset:3px}
.f-tittel{display:block;font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:12px}
.f-kol a{display:block;padding:5px 0;font-size:13.5px;font-weight:300;
  color:var(--text-2);text-decoration:none}
.f-kol a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .footer{grid-template-columns:1fr 1fr;gap:34px}
  .f-merke{grid-column:1/-1}
}
@media (max-width:460px){
  .footer{grid-template-columns:1fr}
}

/* Delt skjermbilde-stil for undersider (samme uttrykk som forsidens .pshot,
   som bor inline i hero-easy-d.html). */
.side-skjermbilde{display:block;width:100%;height:auto;margin-top:44px;
  border-radius:var(--r-lg);border:1px solid var(--hair);
  box-shadow:0 8px 22px -14px rgba(36,34,32,.22)}

/* «Kommer»-rader på Innsikt-oversikten: samme liste som nyhetene, men rader
   uten lenke (innholdet finnes ikke ennå — ærlig merket, jf. §10-regelen om
   merkede plassholdere). div, ikke a; ingen hover-understrek, ingen pil. */
.ny-rad.kommer{cursor:default}
.ny-rad.kommer .ny-tittel{color:var(--text-2)}
.ny-rad.kommer:hover .ny-tittel{text-decoration:none}

/* Innsikt-oversikten: seksjonstitler mellom listene + luft mellom to
   tilbake-lenker på undersider. */
.in-tittel{margin-top:64px;font-size:19px;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
.a-tilbake+.a-tilbake{margin-left:28px}

/* ---------- LYSBOKS på produktsidene (2026-08-02) ----------
   Flyttet hit fra forsiden (der den var inline): bruker bestemte at klikk på
   produktpanelene på forsiden skal GÅ TIL produktsiden, og at forstørringen
   i stedet bor PÅ produktsiden (klikk på skjermbildet der). Reglene er
   kopiert uendret fra forsidens .lb-blokk; logikken bor i assets/lysboks.js,
   som kun produktsidene laster. */
.lb-lenke{display:block;cursor:zoom-in}
.lb-lenke:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-lg)}
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:5vh 5vw;background:rgba(22,21,20,.74);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s ease}
.lb[data-open]{display:flex}
.lb.in{opacity:1}
.lb img{max-width:100%;max-height:86vh;border-radius:var(--r-lg);display:block;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.lb-cap{position:absolute;left:5vw;bottom:3.5vh;color:#fff;font-size:13.5px}
.lb-close{position:absolute;top:3.5vh;right:5vw;width:40px;height:40px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;
  cursor:pointer;display:grid;place-items:center}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.lb{transition:none}}

/* Lenker i ct-note (2026-08-02, kontaktrunden): «Ta kontakt» i prisnotatet
   ble gjort klikkbar — tekst som inviterer til handling uten å være lenke
   er mønsteret brukere straffer. Arver den dempede fargen, understrek som
   ellers i innholdet. */
.ct-note a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- MOBILMENY / HAMBURGER (2026-08-02, bruker) ----------
   Erstatter HELE wrap-systemet under 900px. Det gamle systemet foldet platen
   i stadig flere rader i stedet for å bli en meny: 33px (≥900) → 50px
   (820-899, et UTILSIKTET brudd — «Om oss» fikk wrap inni .links fordi
   lenkeraden manglet white-space:nowrap, og den ene lenkens doble høyde dro
   HELE platen med seg) → 122px (761-819, platen selv wrapper i tre rader) →
   164px (≤460, øya faller til egen fjerde rad). Målt konsekvens ved 375px:
   navet alene tok 186px av skjermhøyden, FØR noe innhold.

   900px er MÅLT, ikke anslått: det er nøyaktig grensen der platen sist var
   én rad (33px) før 820px-bruddet startet. Under den grensen skjules
   .links fra platen og en hamburgerknapp tar over; platen
   er da ordmerke, hamburger og Logg inn og har aldri grunn til å wrappe
   uansett bredde, så alle de gamle wrap-reglene (760px, 460px) er
   FJERNET som død kode i stedet for latt stå ubrukt — se §11/§6 i
   NETTSIDE-DESIGN.md for før/etter-målingene.

   Målingen er gjort da nyhetstikkeren fortsatt lå i platen og tok 404px.
   Den er fjernet 2026-08-19, så platen har nå MER slakk enn 900px-tallet
   forutsetter — terskelen er altså trygg, men konservativ. Skal den flyttes
   ned, må den måles på nytt; ikke gjett.

   Panelet ligger under navet i full sidemarg, den vanlige mobilmeny-formen,
   og unngår at panelet må ta stilling til hvor bred platen alene er blitt. */
@media (min-width:900px){
  .nav-meny-knapp,.nav-meny{display:none!important}
}
@media (max-width:899px){
  /* Book prat (.login) og lenkene skjules; Logg inn blir stående
     som den sorte knappen inne i platen, ved hamburgeren. */
  .nav-plate{gap:8px}
  .nav-plate .links,.nav-plate .login{display:none}
  .nav-plate .tryfree{margin-left:0}
  .nav-meny-knapp{display:flex;flex-direction:column;align-items:center;justify-content:center;
    flex:none;width:32px;height:32px;margin-left:0;
    background:none;border:none;padding:0;cursor:pointer;
    color:var(--ink);border-radius:var(--r-sm)}
  .nav-meny-knapp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* Tre streker som morfer til en kryss, samme prinsipp som .faq-mark sitt
     plussminus-tegn (to streker, den ene roterer bort). Her: tre streker,
     ytre to roterer 45°/-45° inn til et kryss, midterste tones bort. Ingen
     ikon-bytte i JS — knappens eneste jobb er å sette aria-expanded, CSS gjør
     resten via attributtselektoren under. */
  .nav-meny-linje{display:block;width:16px;height:1.4px;background:currentColor;
    transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .22s ease}
  .nav-meny-linje+.nav-meny-linje{margin-top:4px}
  .nav-meny-knapp[aria-expanded="true"] .nav-meny-linje:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
  .nav-meny-knapp[aria-expanded="true"] .nav-meny-linje:nth-child(2){opacity:0}
  .nav-meny-knapp[aria-expanded="true"] .nav-meny-linje:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}
  /* RETTET 2026-08-19: panelet var `position:absolute` med `top:calc(100% + 10px)`,
     men det ligger som SØSKEN av <nav>, ikke inni den. Uten en posisjonert
     forelder regnet nettleseren 100% av vindushøyden i stedet for av navet, så
     panelet havnet 910px ned i dokumentet — utenfor skjermen. Hamburgeren har
     altså ikke virket på telefon: knappen vekslet, panelet fantes, men ingen
     så det. Målt i nettleser, ikke antatt.

     `fixed` i stedet for `absolute`, og toppen regnet ut av kjent geometri:
     navet står fast 22px fra toppen, platen er 48px høy under 900px, pluss
     10px luft = 80px. Sidegrensen 8% er sidens egen marg (samme som .nav og
     seksjonene bruker), så panelet flukter med innholdet under.

     Taket: 18 rader får plass på en vanlig telefon, men ikke på en lav. dvh,
     ikke vh, fordi vh på iOS regner med adresselinja borte og gir et panel som
     stikker under skjermkanten. 96px = 80px topp + 16px luft nederst. */
  .nav-meny{position:fixed;top:80px;left:8%;right:8%;z-index:49;
    background:#fffefc;border:1px solid var(--hair);border-radius:var(--r-lg);
    box-shadow:0 1px 2px rgba(31,29,27,.05),0 12px 32px -12px rgba(31,29,27,.12);
    padding:6px 16px;display:flex;flex-direction:column;
    max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
  .nav-meny a{display:block;padding:13px 0;font-size:14.5px;color:var(--ink);
    text-decoration:none;border-top:1px solid var(--hair)}
  .nav-meny a:first-child{border-top:none}
  .nav-meny a:hover,.nav-meny a:focus-visible{text-decoration:underline;text-underline-offset:3px}
  .nav-meny a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:3px}
  /* Undersidene fra nedtrekkene: innrykket og dempet, så panelet leser som
     to nivåer uten at det trengs nedtrekk her. På liten skjerm er alt åpent. */
  .nav-meny .nm-under{padding-left:17px;font-size:13.5px;color:var(--text-2)}
  .nav-meny[hidden]{display:none}
}

/* ---------- Leveranser, spor, punktlister, kontaktkort ----------
   Delt av forsiden (#leveranser) og undersidene for API / uttrekk /
   skreddersøm / kontakt. Tokens som resten av site.css. */
.lev-ingress{margin:14px 0 0;font-size:15px;font-weight:300;color:var(--text-2);
  line-height:1.55;max-width:54ch}
.dummy-viz{width:100%;margin:36px 0 8px}
.dummy-viz svg{width:100%;height:auto;display:block}
.dummy-caption{margin:10px 0 0;font-size:12.5px;font-weight:300;color:var(--text-3);
  line-height:1.5;max-width:62ch}
.lev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.lev-kort{background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:22px 22px 20px;display:flex;flex-direction:column}
.lev-nr{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);margin:0 0 10px}
.lev-kort h3{font-size:19px;font-weight:500;letter-spacing:-.012em;line-height:1.2;
  color:var(--ink);margin:0 0 10px}
.lev-kort p{font-size:14.5px;font-weight:300;line-height:1.5;color:var(--text-2);
  margin:0 0 18px;flex:1}
.lev-kort-lenker{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.lev-kort-lenker a{font-size:13px;font-weight:500;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.lev-kort-lenker a.lev-prat{background:var(--ink);color:var(--surface);border:none;
  border-radius:var(--r-sm);padding:7px 13px;text-decoration:none;font-weight:500;
  font-size:13px}
.lev-kort-lenker a.lev-prat:hover{background:var(--ink-hover)}
.lev-kort-lenker a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
  border-radius:var(--r-focus)}

.pkt{margin:16px 0 0;padding:0;list-style:none;max-width:66ch}
.pkt li{font-size:14.5px;font-weight:300;line-height:1.5;color:var(--text-2);
  padding:9px 0 9px 16px;border-bottom:1px solid var(--hair);position:relative}
.pkt li:last-child{border-bottom:none}
.pkt li::before{content:"";position:absolute;left:0;top:16px;width:5px;height:5px;
  background:var(--ink)}
.coltext .pkt{max-width:36ch;margin-top:14px}
.coltext .pkt li{font-size:14px}

.spor-rad{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 8px}
.spor{border:1px solid var(--hair);background:var(--surface);border-radius:var(--r-lg);
  padding:22px 24px}
.spor h3{font-size:19px;font-weight:500;letter-spacing:-.012em;margin:0 0 8px;color:var(--ink)}
.spor p{font-size:14.5px;font-weight:300;line-height:1.5;color:var(--text-2);margin:0 0 12px}
.spor a{font-size:13.5px;font-weight:400;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px}

.kt-kort{display:flex;gap:16px;align-items:flex-start;margin:0 0 22px}
.kt-kort img{width:72px;height:72px;object-fit:cover;flex-shrink:0;border-radius:var(--r-round);
  border:1px solid var(--hair)}
.kt-kort h3{font-size:16px;font-weight:500;margin:0 0 4px;color:var(--ink)}
.kt-kort p{font-size:14px;font-weight:300;line-height:1.5;color:var(--text-2);margin:0}
.kt-kort a{color:var(--ink)}
.kt-meta{margin-top:28px;font-size:14.5px;font-weight:300;line-height:1.7;color:var(--text-2)}
.kt-meta a{color:var(--ink)}

.tidycal-wrap{margin:20px 0 48px;min-height:640px;border:1px solid var(--hair);
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.tidycal-wrap iframe{width:100%;min-height:640px;border:0;display:block}

@media (max-width:900px){
  .lev-grid{grid-template-columns:1fr 1fr}
  .spor-rad{grid-template-columns:1fr}
}
@media (max-width:560px){
  .lev-grid{grid-template-columns:1fr}
  .dummy-viz{display:none}
}