/* ══════════════════════════════════════════════════════════════
   Nirona — hjemmesiden (M110)
   Lastes KUN av hjemmesiden. apex.css bærer rammen, opprettelsen, de
   juridiske sidene og innloggingen; den skal ikke vokse med
   markedsflatens stiler.

   ── Hvorfor ingen `style=` finnes her ───────────────────────────
   Sikkerhetshodene setter `style-src 'self'`. Et `style=`-attributt blir
   kastet av nettleseren uten feilmelding, og siden ser ut som en side som
   virker, bare skjev. Mockupen for denne siden var full av dem; hver
   eneste er en klasse her. porter/csp.mjs håndhever det.
   ══════════════════════════════════════════════════════════════ */

/* ── Hopp til innholdet ──────────────────────────────────────── */

/* Hoppelenken og bryterne i topplinjen er definert i apex.css, som denne siden også
   laster. De sto tidligere DUPLISERT her — og de to utgavene hadde drevet
   fra hverandre: min-width 33 px her mot 34 px der. Ingen av dem var feil,
   og ingenting sa fra om at det fantes to. */

/* ── HEROEN ──────────────────────────────────────────────────── */
/* Her sto `padding:86px 0 0`. Den hadde ingen virkning: `.hjem section`
   lenger nede i arket er én spesifisitet sterkere (klasse + element mot
   klasse alene) og satte 104 px i begge ender. Heroen har alltid hatt
   seksjonsluften, og regelen som så ut til å bestemme noe annet, gjorde
   det ikke. Funnet ved å lese den beregnede verdien i nettleseren, ikke
   arket — arket så riktig ut. */
.hero{position:relative;text-align:center;overflow:hidden;border:none}
/* Den radiale gløden bak rammen. Den er ikke pynt: uten den flyter
   glasskortet på en flat flate, og hele dybdevirkningen forsvinner. */
.hero::before{content:"";position:absolute;left:50%;top:-140px;
  transform:translateX(-50%);width:1200px;height:760px;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 38%,var(--glod) 0%,
    var(--lysfall-svak) 42%,transparent 72%);filter:blur(46px)}
/* Samme spalte som topplinjen og hver seksjon under. Sto på 1140/24 og lå
   12 px lenger ut i begge kanter enn alt annet på siden — se apex.css. */
.hero .in{position:relative;z-index:2;max-width:var(--spalte);margin:0 auto;
  padding:0 var(--spaltemarg)}
.merkelapp{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-xs);
  color:var(--dempet);background:var(--kort);border:1px solid var(--haar);
  border-radius:var(--r-pill);padding:6px 13px;margin-bottom:26px}
.merkelapp .ny{font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--aksent-tekst);
  font-weight:700}
.hero h1{font-size:clamp(44px,6.2vw,74px);line-height:1.04;letter-spacing:-.035em;
  max-width:900px;margin:0 auto 22px;font-weight:600}
/* Ingressen er smalere enn overskriften med vilje. Det er den avsmalningen
   som gjør en midtstilt blokk lesbar i stedet for klumpete. */
.hero .sub{font-size:clamp(17px,1.7vw,20px);color:var(--dempet);max-width:620px;
  margin:0 auto 30px;line-height:1.5}
.cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.hero .under{font-size:var(--t-xs);color:var(--svak);margin:18px 0 0}
.knapp.stor{height:50px;font-size:var(--t-md);padding:0 26px}

/* Produktrammen. Negativ bunnmarg: den skal skjæres av folden, slik at det
   som er igjen er grunnen til å rulle. */
/* Bunnen av heroen strammes med 104 px, slik at båndet under begynner der
   det skal. Løftet ligger på det SISTE elementet i gruppa — forbeholdet —
   ikke på rammen.

   ── Feilen dette er rettelsen av ───────────────────────────────
   Fram til M120 lå løftet på `.ramme`. En negativ bunnmarg drar det
   NESTE elementet opp, og det neste var forbeholdet. Det ble dratt 104 px
   opp og landet midt oppå mockupen — tvers over samtalen i tredje
   kolonne.

   Målt: rammen 634→1032, forbeholdet 950→988. Fullstendig inni kortet.

   Begge reglene var fornuftige hver for seg, og koblingen mellom dem sto
   ingen steder. Den står her nå: ETT tall, brukt ett sted.

   ── Og tallet er ikke 104 for seg ──────────────────────────────
   M120: løftet er ikke et eget mål. Det er nøyaktig seksjonsluften, og det
   MÅ være det — jobben er å oppheve heroens egen bunnluft, slik at båndet
   under begynner der det ville begynt uten forbeholdet. Sto de som to
   like tall, ville den ene kunne endres alene, og forbeholdet ville
   begynt å skli. Det er ett tall nå, ikke to som stemmer. */
:root{--seksjon:104px;--ramme-loft:var(--seksjon)}
/* `--spalte` og `--spaltemarg` er erklært i apex.css, som alltid lastes før
   dette arket — hjemmesiden er den eneste flaten som laster hjem.css, og
   den laster begge. Porten porter/topplinje.mjs holder erklæringen der.

   Rammen er søsken til `.hero .in`, ikke barn av den, og hadde derfor sin
   egen spalte: 1060/24 mot sidens 1120/26. Kortet sto 28 px innenfor
   merket i topplinjen rett over og innenfor hver seksjon under — nok til
   at det så ujustert ut, for lite til at det så villet ut. Nå er det
   samme spalte som alt annet. */
.ramme{position:relative;z-index:2;max-width:var(--spalte);
  margin:52px auto 0;padding:0 var(--spaltemarg)}
.rammekort{border:1px solid var(--haar-sterk);border-radius:var(--r-xl);
  background:var(--kort);box-shadow:var(--ramme-skygge);overflow:hidden;
  position:relative}
.rammekort::after{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:var(--glans)}
.forbehold{font-size:var(--t-xs);color:var(--svak);text-align:center;
  max-width:640px;line-height:1.5;position:relative;z-index:2;
  /* Løftet sitter her, på gruppas siste element. Båndet under begynner
     dermed på nøyaktig samme sted som før rettelsen — rytmen i siden er
     uendret, det er bare teksten som har flyttet seg ut av kortet. */
  margin:22px auto calc(var(--ramme-loft) * -1)}

/* ── PRODUKTFLATEN ───────────────────────────────────────────────
   Tegnet i produktets egne tokens. Det er ikke en illustrasjon av
   Nirona — det er Nironas eget uttrykk, og bytter noen en farge i
   tokens.css, følger denne med. */
.app{display:grid;grid-template-columns:186px 1fr;min-height:396px;
  font-size:var(--t-sm);text-align:left}
/* Uten menyskinnen skal rammen være én kolonne. Første utgave arvet
   186px-kolonnen og sto som en smal stripe med tomrom ved siden av —
   funnet på et skjermbilde, ikke ved å lese koden. */
.app.enkel{grid-template-columns:1fr}
.app .rail{background:var(--meny);color:var(--meny-tekst);padding:15px 11px;
  display:flex;flex-direction:column;gap:3px}
.app .rail .logo{display:flex;align-items:center;gap:8px;padding:0 6px 15px;
  font-family:var(--disp);font-weight:600;font-size:13.5px;
  color:var(--meny-aktiv-tekst)}
.app .rail .logo .m{width:18px;height:18px;color:var(--meny-aktiv-tekst)}
.app .rail .logo svg{width:100%;height:100%;display:block}
.app .rail a{display:flex;align-items:center;gap:9px;padding:7px 9px;min-height:var(--trykk);
  /* Lenketeksten er lenketekst, ikke metadata: `--meny-dempet` bærer
     sekundærrollens 4,5:1-gulv fra A14, og en navigasjonslenke skal ikke
     stå der. Fanget av rollekontrollen i porter/kontrast.mjs ved dens
     første kjøring, 5. oktober 2026. */
  border-radius:var(--r-sm);color:var(--meny-tekst);text-decoration:none;
  font-size:13px}
.app .rail a.na{background:var(--meny-aktiv);color:var(--meny-aktiv-tekst);
  font-weight:600}
.app .rail a .t{margin-left:auto;font-size:11px;background:var(--meny-teller);color:var(--meny-teller-tekst);
  border-radius:var(--r-xs);padding:1px 6px;font-variant-numeric:tabular-nums}
.app .rail .pr{margin-top:auto;display:flex;align-items:center;gap:8px;
  padding:9px 6px 0;border-top:1px solid var(--meny-haar);font-size:12px}
.app .rail .pr .av{width:24px;height:24px;border-radius:var(--r-sm);
  /* Var rgba(127,217,199,.22) — CIRON-teal med alpha, blandet med menyen.
     Følger nå menyfamilien, som er løst mot sin lyseste flate. */
  background:var(--meny-teller);color:var(--meny-teller-tekst);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:10.5px}
.app .flate{background:var(--kort);display:grid;grid-template-columns:1fr 1fr}
.app .flate.en{grid-template-columns:1fr}
.app .kol{border-right:1px solid var(--haar);min-width:0}
.app .kol:last-child{border-right:none}
.app .khode{padding:12px 15px;border-bottom:1px solid var(--haar);display:flex;
  align-items:center;gap:9px}
.app .khode b{font-family:var(--disp);font-size:14.5px}
.app .khode .teller{margin-left:auto;font-size:11px;color:var(--svak);
  font-variant-numeric:tabular-nums;text-align:right}
.app .rad{padding:10px 15px;border-bottom:1px solid var(--haar);display:flex;
  gap:10px;align-items:flex-start}
.app .rad.valgt{background:var(--felt);
  box-shadow:inset 2px 0 0 var(--aksent-hev)}
.app .rad .nr{font-family:var(--mono);font-size:10.5px;color:var(--svak);
  padding-top:2px}
.app .rad .t{font-size:13px;font-weight:500;line-height:1.35;display:block;
  margin-bottom:3px}
.app .rad .u{font-size:11px;color:var(--svak)}
.app .sakhode{padding:13px 15px;border-bottom:1px solid var(--haar)}
.app .sakhode h4{font-size:15px;margin:0 0 5px}
.app .sakhode .meta{font-size:11px;color:var(--svak);display:flex;gap:9px;
  align-items:center;flex-wrap:wrap}
.app .trad{padding:13px 15px;display:flex;flex-direction:column;gap:10px}
.app .boble{border:1px solid var(--haar);border-radius:var(--r);padding:9px 11px;
  font-size:12.5px;line-height:1.5;background:var(--felt);max-width:88%}
.app .boble.oss{background:var(--felt);border-color:var(--aksent-hev);
  align-self:flex-end}
.app .boble .hvem{font-size:10px;color:var(--svak);margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
/* Treffkortet — «dette har vi svart på før». Hele produktet i én komponent. */
.app .treff{margin:0 15px 13px;border:1px solid var(--aksent-hev);
  border-radius:var(--r);background:var(--felt);padding:10px 12px}
.app .treff .e{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--aksent-tekst);margin-bottom:5px;font-weight:700}
.app .treff .s{font-size:12.5px;line-height:1.45}
.app .treff .k{font-size:10.5px;color:var(--svak);margin-top:6px}
/* Innmeldingsfeltet slik det ser ut mens noen skriver i det. */
.app .felt{padding:17px}
.app .felt .merkelapp-sm{font-size:11px;color:var(--svak);font-family:var(--mono);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.app .felt .boks{border:1px solid var(--haar-sterk);border-radius:var(--r);
  padding:12px 14px;font-size:13.5px;background:var(--felt);min-height:74px;
  line-height:1.5}
.app .felt .boks.kort{min-height:52px}
.app .felt .etter{margin-top:13px;font-size:12px;color:var(--svak)}
.app .handlinger{padding:0 17px 17px;display:flex;gap:9px;flex-wrap:wrap}
.app .utkast{padding:17px}
.app .utkast h4{font-family:var(--disp);font-size:16px;font-weight:600;
  margin:0 0 9px}
.app .utkast .brod{font-size:13px;color:var(--dempet);line-height:1.55;
  margin-bottom:13px}
.app .utkast .merker{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.app .utkast .fot{border-top:1px solid var(--haar);padding-top:13px;display:flex;
  gap:9px;align-items:center;flex-wrap:wrap}
.app .utkast .fot .hvem{font-size:11px;color:var(--svak);margin-left:auto;
  text-align:right}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .app .rail{display:none}
  .app .flate{grid-template-columns:1fr}
  .app .flate .kol:last-child{display:none}
  .app .flate.en .kol:last-child{display:block}
}

/* ── BÅNDET SOM AVSLUTTER HEROEN ─────────────────────────────────
   Der markedslederne har en logovegg. Jobben er typografisk: et bredt,
   lavt, stille bånd som avslutter heroen og sier at siden fortsetter i
   et annet toneleie. Vi har ingen kundelogoer, og setter det produktet
   faktisk garanterer i stedet. */
.band{border-top:1px solid var(--haar);border-bottom:1px solid var(--haar);
  background:var(--kort);padding:142px 0 26px}
.bandrad{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:center;
  font-size:var(--t-xs);color:var(--svak);font-family:var(--mono)}
.bandrad span{display:inline-flex;align-items:center;gap:8px}
.bandrad span::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--aksent-hev);flex:none}

/* ── SEKSJONER ───────────────────────────────────────────────── */
.hjem section{padding:var(--seksjon) 0;border:none}
.overl{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--aksent-tekst);margin-bottom:13px}
.hjem section h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;
  margin-bottom:16px;font-weight:600;max-width:760px}
.hjem section .ing{font-size:var(--t-lg);color:var(--dempet);max-width:620px;
  line-height:1.5}
.midtstilt h2,.midtstilt .ing{margin-left:auto;margin-right:auto}

/* ── BENTO ───────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;
  text-align:left}
.flis{background:var(--kort);border:1px solid var(--haar);
  border-radius:var(--r-xl);padding:26px}
.flis.stor{grid-column:span 2}
.flis h3{font-size:var(--t-h3);margin:0 0 9px}
.flis p{font-size:var(--t-sm);color:var(--dempet);margin:0}
.flis .ikon{width:34px;height:34px;border-radius:var(--r-sm);
  background:var(--felt);color:var(--aksent-tekst);display:flex;
  align-items:center;justify-content:center;margin-bottom:15px}
.flis .ikon svg{width:18px;height:18px;fill:currentColor}
@media (max-width:860px){
  .bento{grid-template-columns:1fr}
  .flis.stor{grid-column:span 1}
}

/* Fanene har en klasse, og selektoren bruker den.
   Uten klassen traff `button:not([class])` i komponenter.css dem — det er
   sikkerhetsnettet for knapper noen glemte å navngi, og det ga dem
   min-height 44 px og vekt 600 ved siden av reglene her. Det biter ikke i
   dag (fanene er 57 px høye), men to regler som konkurrerer på lik
   spesifisitet, avgjøres av rekkefølgen på arkene — og den er ingen
   egenskap ved designet.

   ── DEMOEN ──────────────────────────────────────────────────── */
.demo{background:var(--kort);border-top:1px solid var(--haar);
  border-bottom:1px solid var(--haar);position:relative;overflow:hidden}
.demo::before{content:"";position:absolute;left:50%;top:-200px;
  transform:translateX(-50%);width:1100px;height:700px;pointer-events:none;
  background:radial-gradient(50% 46% at 50% 40%,var(--lysfall),
    transparent 70%);filter:blur(52px)}
.demo .midtspalte{position:relative;z-index:2}
.demosteg{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;
  margin:44px 0 22px;list-style:none;padding:0}
/* `font-size:inherit`: uten den står knappen på nettleserens egen 13,33 px.
   Ingen tekst ligger direkte i den i dag — alt står i `.n` og `.h` — så det
   syntes ikke. Den dagen noen skriver et ord rett inn i fanen, ville det
   kommet ut i en størrelse ingen har valgt. */
.demosteg .demofane{width:100%;text-align:left;font-family:var(--sans);
  font-size:inherit;
  background:transparent;border:none;border-top:2px solid var(--haar);
  padding:13px 2px 0;cursor:pointer;color:var(--svak);display:block}
.demosteg .demofane .n{font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.1em;display:block;margin-bottom:5px}
.demosteg .demofane .h{font-family:var(--disp);font-size:var(--t-md);font-weight:600;
  color:var(--dempet);display:block;letter-spacing:-.02em;line-height:1.25}
.demosteg .demofane[aria-selected="true"]{border-top-color:var(--aksent-hev);
  color:var(--aksent-tekst)}
.demosteg .demofane[aria-selected="true"] .h{color:var(--blekk)}
.demosteg .demofane:hover .h{color:var(--aksent-tekst)}
.demoramme{border:1px solid var(--haar-sterk);border-radius:var(--r-xl);
  background:var(--side);box-shadow:var(--ramme-skygge);overflow:hidden;
  position:relative}
/* Uten skriptet står alle panelene. Det første er det som gjelder, og
   resten skjules av skriptet i det det kjører. En demo som er borte uten
   JavaScript, er en side som ikke selger uten JavaScript. */
.demopanel{display:none}
.demopanel[data-pa],.demoramme.rolig .demopanel:first-child{display:block}
.demopanel[data-pa]{animation:demo-inn .45s ease both}
@keyframes demo-inn{from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}}
.demofot{display:flex;align-items:center;gap:15px;margin-top:18px;flex-wrap:wrap}
.demofot .sp{flex:1;min-width:150px;height:3px;background:var(--haar);
  border-radius:2px;overflow:hidden}
.demofot .sp i{display:block;height:100%;width:0;background:var(--aksent-hev);
  border-radius:2px}
.demofot .sp i.gaar{animation:demo-fyll 5.5s linear forwards}
@keyframes demo-fyll{from{width:0}to{width:100%}}
.demofot .merknad{font-size:var(--t-xs);color:var(--svak)}
/* Her sto `.demoknapp` — pause-knappen under demoen, med egen høyde (33 px
   mot 36), eget hjørne (var(--r) mot var(--r-sm)) og egen skriftstørrelse.
   Den så ut som en knapp, oppførte seg som en knapp, og var ingen: den var
   en fjerde knappeform på en side som har tre.
   Den er `.knapp.kant.liten` nå, som hver annen sekundær handling. */
/* Utfallslinjen. Den er demoens egentlige argument: hva det kostet. */
.utfall{display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-top:1px solid var(--haar);background:var(--felt);font-size:var(--t-sm)}
.utfall .m{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--aksent-tekst);font-weight:700}
.utfall .klokke{margin-left:auto;font-family:var(--mono);font-size:var(--t-sm);
  color:var(--svak)}
.skriver::after{content:"";display:inline-block;width:2px;height:1em;
  background:var(--aksent);margin-left:1px;vertical-align:-2px;
  animation:demo-blink 1s step-end infinite}
@keyframes demo-blink{50%{opacity:0}}
@media (max-width:820px){
  .demosteg{grid-template-columns:1fr 1fr;gap:9px}
  .demosteg .demofane .h{font-size:var(--t-sm)}
}

/* ── VEKSLENDE BLOKKER ───────────────────────────────────────── */
.blokk{display:grid;grid-template-columns:42% 1fr;gap:58px;align-items:center}
.blokk.speil{grid-template-columns:1fr 42%}
.blokk.speil .tekst{order:2}
.blokk.speil .bilde{order:1}
.blokk+.blokk{margin-top:var(--seksjon)}
.blokk .punkter{list-style:none;margin:22px 0 0;padding:0}
.blokk .punkter li{display:flex;gap:11px;padding:9px 0;font-size:var(--t-sm);
  color:var(--dempet);border-top:1px solid var(--haar)}
.blokk .punkter li::before{content:"";width:16px;height:16px;
  border-radius:var(--r-xs);background:var(--felt);flex:none;
  margin-top:3px;box-shadow:inset 0 0 0 1px var(--aksent-hev)}
.blokk .bilde .rammekort{box-shadow:var(--skygge)}
@media (max-width:900px){
  .blokk,.blokk.speil{grid-template-columns:1fr;gap:30px}
  .blokk.speil .tekst,.blokk.speil .bilde{order:0}
  .blokk+.blokk{margin-top:72px}
}

/* ── MØRKT BÅND ──────────────────────────────────────────────── */
/* ── Et mørkt bånd er en mørk øy, ikke bare en bakgrunn ──────────
 *
 * Fram til v1.0.3 satte `.mork` bare `background` og `color`. Alt inni arvet
 * de LYSE blekktokene videre, og hvilken farge et avsnitt fikk, ble avgjort
 * av en spesifisitetskamp:
 *
 *   .hjem section .ing   (0,3,0)  → var(--dempet)   #2A333E
 *   .mork .ing           (0,2,0)  → var(--meny-dempet)
 *
 * Den første vant. Innledningen i det mørke båndet sto derfor i lys
 * dempet-blekk på CIRON-navy: **1,38:1**, målt i nettleseren 27. september
 * 2026 — altså tekst ingen kunne lese, på forsiden, i drift. Den gamle
 * kontrastporten kunne ikke se det: den sammenlignet tokenPAR i stilarket, og
 * begge tokenene var riktige hver for seg. Det er nøyaktig formen R6 v1.4
 * beskriver som «et riktig par brukt i feil rolle».
 *
 * Rettingen er å definere blekket om på øya. Da arver hvert etterkommende
 * element riktig verdi uansett hvilken velger som vinner, og en ny seksjon
 * inne i båndet kan ikke gjøre feilen om igjen.
 */
.mork,.sluttkall{
  /* Solide flater, av samme grunn som statusflatene i tokens.css: en
     rgba-flate her blandes med menyen, og teksten ble målt til 6,39:1 mot
     det blandede resultatet. */
  --kort:var(--meny); --side:var(--meny); --felt:var(--meny-felt);
  --hev:var(--meny-aktiv);
  --blekk:var(--meny-aktiv-tekst); --dempet:var(--meny-tekst); --svak:var(--meny-dempet);
  --aksent:var(--meny-aktiv-tekst);
  /* Aksenten er delt i fyll og tekst fra og med v3 av paletten, og på denne
     øya må BEGGE snus. Uten linjen under arver hver lenke her
     `--aksent-tekst` #07424B — en mørk teal på et mørkt bånd, altså
     nøyaktig den feilen resten av denne kommentaren handler om. */
  --aksent-tekst:var(--meny-aktiv-tekst);
  --slekt-tekst:var(--meny-tekst);
  /* Fokusringen snur også. Blekkringen er 1,00:1 mot menyflaten. */
  --fokus:var(--fokus-meny);
  /* Blekket PÅ aksenten må snu med den: en fylt knapp på øya har lys
     flate, og hvit tekst på den gir 1,7:1. Målt 27. september 2026.
     Verdien er menyflaten selv, ikke et tall — da følger den temaet i
     stedet for å stå igjen som CIRON-navy når paletten byttes. */
  --paa-aksent:var(--meny);
  --haar:var(--meny-haar); --haar-sterk:var(--meny-haar-sterk)}
.mork{background:var(--meny);color:var(--meny-tekst);position:relative;
  overflow:hidden}
.mork::before{content:"";position:absolute;right:-180px;top:-160px;width:760px;
  height:760px;background:radial-gradient(circle,var(--glod),
    transparent 66%);filter:blur(50px);pointer-events:none}
.mork .midtspalte{position:relative;z-index:2}
.mork h2{color:var(--meny-aktiv-tekst)}
.mork .ing{color:var(--meny-dempet)}
.mork .overl{color:var(--meny-aktiv-tekst)}
.morkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:44px}
.morkkort{background:var(--meny-felt);border:1px solid var(--meny-haar);
  border-radius:var(--r-lg);padding:24px}
.morkkort h3{font-size:var(--t-md);color:var(--meny-aktiv-tekst);margin:0 0 8px}
.morkkort p{font-size:var(--t-sm);color:var(--meny-dempet);margin:0}
@media (max-width:860px){.morkgrid{grid-template-columns:1fr}}

/* ── UTEN TÅKEPRAT ───────────────────────────────────────────────
   L3. Avgrensningene, ikke fordelene.

   Gult venstremerke, som innrømmelsen hadde før den ble en egen seksjon: de
   er en advarsel til oss selv like mye som til leseren, og de er det første
   en som ville gjøre siden mer selgende ville strøket.

   To spalter og ikke tre: punktene er avsnitt, ikke stikkord, og tre spalter
   ville gjort dem til stikkord. */
.avgrensninger{display:grid;grid-template-columns:1fr 1fr;gap:18px;
  margin-top:44px;text-align:left}
.avgrens{border-left:3px solid var(--gul);background:var(--kort);
  border:1px solid var(--haar);border-left:3px solid var(--gul);
  border-radius:0 var(--r) var(--r) 0;padding:22px 24px}
.avgrens b{display:block;font-family:var(--disp);font-size:var(--t-md);
  color:var(--blekk);margin-bottom:8px;letter-spacing:-.02em}
.avgrens p{margin:0;font-size:var(--t-sm);color:var(--dempet)}
@media (max-width:760px){.avgrensninger{grid-template-columns:1fr}}

/* ── SYSTEMTALL ──────────────────────────────────────────────────
   Der markedslederne har kundetall. Våre er systemtall: hva produktet
   samler inn, hvor det ligger, hvor lenge. De kan etterprøves, og de er
   ikke avhengige av at vi har kunder å telle. */
.tallband{border-top:1px solid var(--haar);border-bottom:1px solid var(--haar);
  background:var(--kort);padding:52px 0}
.tallgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;
  text-align:center}
.tallgrid .v{font-family:var(--disp);font-size:clamp(28px,3.4vw,40px);
  font-weight:600;color:var(--aksent-tekst);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}
.tallgrid .m{font-size:var(--t-xs);color:var(--svak);margin-top:5px;
  line-height:1.4}
@media (max-width:860px){.tallgrid{grid-template-columns:repeat(2,1fr);gap:30px}}

/* ── ROLLER ──────────────────────────────────────────────────── */
.rollegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:44px}
.rolle{background:var(--kort);border:1px solid var(--haar);
  border-radius:var(--r-xl);padding:26px}
.rolle .hvem{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--aksent-tekst);margin-bottom:11px}
.rolle h3{font-size:var(--t-h3);margin:0 0 10px}
.rolle p{font-size:var(--t-sm);color:var(--dempet);margin:0}
@media (max-width:860px){.rollegrid{grid-template-columns:1fr}}

/* ── ENDRINGSLOGGEN ──────────────────────────────────────────────
   Det ærligste beviset vi har på at produktet lever: hva som kom, med
   dato. Den kan ikke forfalskes uten at noen som følger med oppdager
   det. */
.loggliste{margin-top:44px;border-top:1px solid var(--haar)}
.loggrad{display:grid;grid-template-columns:130px 1fr;gap:26px;padding:20px 0;
  border-bottom:1px solid var(--haar);align-items:baseline}
.loggrad .dato{font-family:var(--mono);font-size:var(--t-xs);color:var(--svak);
  font-variant-numeric:tabular-nums}
.loggrad h3{font-size:var(--t-md);margin:0 0 5px}
.loggrad p{font-size:var(--t-sm);color:var(--dempet);margin:0}
@media (max-width:700px){.loggrad{grid-template-columns:1fr;gap:6px}}

/* ── PRIS ────────────────────────────────────────────────────── */
.prisgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:44px}
.priskort{background:var(--kort);border:1px solid var(--haar);
  border-radius:var(--r-xl);padding:26px}
.priskort h3{font-size:var(--t-md);margin:0 0 9px}
.priskort p{font-size:var(--t-sm);color:var(--dempet);margin:0}
.prisinkl{margin-top:18px;background:var(--felt);
  border:1px solid var(--aksent-hev);border-radius:var(--r-xl);padding:26px}
.prisinkl h3{font-size:var(--t-md);color:var(--aksent-tekst);margin:0 0 13px}
.prisinkl ul{margin:0;padding-left:18px;font-size:var(--t-sm);
  color:var(--dempet);columns:2;column-gap:32px}
.prisinkl li{margin-bottom:6px;break-inside:avoid}
@media (max-width:860px){
  .prisgrid{grid-template-columns:1fr}
  .prisinkl ul{columns:1}
}

/* ── SPØRSMÅL ────────────────────────────────────────────────────
   <details>, ikke et skript. Trekkspillet virker uten JavaScript, det kan
   åpnes av nettleserens egen søkefunksjon, og det er tilgjengelig uten at
   vi må skrive én linje aria. */
.faq{max-width:820px;margin:44px auto 0;text-align:left}
.faq details{border-top:1px solid var(--haar)}
.faq details:last-child{border-bottom:1px solid var(--haar)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-family:var(--disp);
  font-size:var(--t-h3);font-weight:600;list-style:none;position:relative;
  letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;
  font-family:var(--mono);font-size:22px;color:var(--aksent-tekst);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq .svar{padding:0 40px 22px 0;font-size:var(--t-sm);color:var(--dempet)}
.faq .svar p:last-child{margin:0}

/* ── SLUTTKALLET ─────────────────────────────────────────────────
   Gjentar heroen ordrett — samme overskrift, samme to knapper. Intercom,
   HubSpot og Plain gjør alle nøyaktig dette. */
.sluttkall{background:var(--meny);color:var(--meny-tekst);padding:var(--seksjon) 0;
  text-align:center;position:relative;overflow:hidden}
.sluttkall::before{content:"";position:absolute;left:50%;top:-120px;
  transform:translateX(-50%);width:900px;height:600px;
  background:radial-gradient(circle,var(--glod),transparent 66%);
  filter:blur(46px);pointer-events:none}
.sluttkall .midtspalte{position:relative;z-index:2}
/* Varemerket i heroen. Portalstandardens L5, og design-regler R9a.

   R9a setter gulvet: aldri under 200×200 px — derfor `clamp` med 200 som
   nedre grense og ikke en ren vw-verdi, som ville krympet under gulvet på
   telefon.

   Her sto `.sluttorbit`, som bar merket i det mørke sluttkallet. L5 sier
   heroen: merket skal si hvem som står bak FØR leseren bestemmer seg. Et
   merke nederst er en signatur på et brev som allerede er lest. */
.heroorbit{width:clamp(200px,18vw,236px);aspect-ratio:1;margin:0 auto 30px}
.sluttkall h2{color:var(--meny-aktiv-tekst);margin:0 auto 20px;font-size:clamp(34px,4.4vw,56px);
  letter-spacing:-.035em;max-width:820px}
.sluttkall .sub{color:var(--meny-dempet);max-width:580px;margin:0 auto 30px;
  font-size:var(--t-lg)}
.sluttkall .knapp.kant{border-color:var(--meny-haar-sterk);
  color:var(--meny-aktiv-tekst);
  background:transparent}
.sluttkall .under{font-size:var(--t-xs);color:var(--meny-dempet);margin-top:20px}

/* ── BEVEGELSE VED RULLING ───────────────────────────────────────
   Dempet, som hos alle åtte flatene jeg målte mot: falming og 16 px opp,
   én gang. `prefers-reduced-motion` slår av alt sammen — også skrivingen
   og framdriftsstolpen i demoen. Uten det er bevegelsen en plage for noen,
   ikke en detalj. */
.inn-ved-rull{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease}
.inn-ved-rull.synlig{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .inn-ved-rull{opacity:1;transform:none;transition:none}
  .demopanel[data-pa]{animation:none}
  .demofot .sp i.gaar{animation:none;width:100%}
  .skriver::after{animation:none}
}

/* ── Uthevingen i overskrifter ───────────────────────────────────
   `<em>` er semantisk riktig for det uthevede leddet i en overskrift, men
   nettleserens standard er kursiv. Her skal det være aksentfargen, ikke
   skråstilt tekst — en kursiv display-skrift i 74 px leser som en feil.

   Sto i mockupen og ikke i denne filen. Det syntes først på et
   skjermbilde: «husker svaret» kom ut svart og skrådd. */
.hjem h1 em,.hjem h2 em,.sluttkall h2 em{font-style:normal;color:var(--aksent-tekst)}
.mork h2 em,.sluttkall h2 em{color:var(--meny-aktiv-tekst)}

/* Menyen skal ikke brekke. Seks punkter på én linje, eller ingen meny —
   «Slik virker det» over tre linjer er verre enn en skjult meny. */
.hjem .top nav a{white-space:nowrap}

/* ── Tekst som SER UT som en overskrift, men ikke er det ─────────
   Sakstittelen i produktrammene sto som `<h4>` fram til M111. Rammene er
   bilder av et grensesnitt, ikke deler av dokumentets disposisjon — og en
   `<h4>` rett etter sidens `<h1>` hopper to nivåer.

   axe-core meldte det som `heading-order`. Rettingen er ikke å nummerere
   om overskriften, men å slutte å kalle den en overskrift. */
.app .sakhode .sakt,.app .utkast .sakt{font-family:var(--disp);font-weight:600;
  letter-spacing:-.02em;line-height:1.15}
.app .sakhode .sakt{font-size:15px;margin:0 0 5px}
.app .utkast .sakt{font-size:16px;margin:0 0 9px}