/* Hverdagsverktøy — site shell (shared by every "X on Site.html" page) */
:root{
  --font-sans:'Geist','Inter',system-ui,sans-serif;
  --font-serif:'Newsreader','Source Serif 4',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ink:#ececea; --ink2:#a8a39a; --ink3:#797469; --ink4:#54514a;
  --bg:#0c0b0a; --surface:#131312; --surface-2:#191917; --surface-3:#1f1e1c;
  --accent:#c89968; --accent-2:#d8ad7e; --accent-deep:#a87842;
  --line:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.10);
  --line-warm:rgba(200,153,104,.14);
  /* Vasketonen — fargen på de nesten usynlige lagene som ligger på felt,
     hover-flater og scrollbaren. Den var hardkodet til kald hvit overalt, og på
     et varmt tema trekker kald hvit flatene mot grått nettopp der brukeren tar
     på dem: jo mer du interagerer, jo kaldere blir siden.
     Bare TONEN ligger i tokenet — hvert brukssted beholder sin egen alpha, så
     de ni andre temaene rendrer bit for bit uendret med standardverdien her.
     carbon overstyrer den til varm krem i themes.css.
     Standardverdien her gjelder de MØRKE temaene. De fire lyse (frost, glass,
     pink, hendrix) setter 0,0,0 i themes.css — kald hvit på en lys flate ble
     hvit-på-hvit, så scrollbar-tommelen og alle hover-flatene var usynlige. */
  --wash-rgb:255,255,255;
  /* Tekstfargen på en aksentfylt flate. Standarden gjelder de seks temaene der
     --bg gir over 4,5:1 mot --accent; glass, rosa og hendrix overstyrer den i
     themes.css. Se den lange begrunnelsen der. */
  --on-accent:var(--bg);
  --pos:#e6e1d8; --neg:#a8a39a;
  /* Feiltone — dempet leire, ikke alarmrød. Skal lese som "se her" uten å
     bryte den rolige paletten. Lyse temaer dypner den (themes.css). */
  --err:#cc7a66;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:400 15px/1.55 var(--font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* 19 sider (oversiktssidene, lov, regnskap) har inline `html,body{overflow-x:hidden}`.
   hidden på body gjør body til en egen rullecontainer, så toppmenyen og lovenes
   innholdsliste (position:sticky) rullet bort. clip klipper like mye uten å lage
   rullecontainer. html body (0,0,2) slår den inline body-regelen; nettlesere uten
   clip dropper linja og beholder hidden som før. */
html body{overflow-x:clip}
/* Markering fulgte ikke temaet: bakgrunnen var carbons cognac uansett tema, og
   teksten var hardkodet hvit. På de lyse temaene ga det hvit tekst på en lys
   sandfarget markering — ~1,3 i kontrast, altså praktisk talt usynlig markert
   tekst. colors_and_type.css hadde allerede den riktige regelen, men denne fila
   lastes etter og overstyrte den med samme spesifisitet. */
::selection{background:rgba(var(--glow-rgb),.28);color:var(--ink)}
.container{max-width:1180px;margin:0 auto;padding:0 32px}
/* Logo og faner hoppet sideveis når du klikket deg rundt: 17 sider hadde en inline
   .container på 1120px, og mobilmargen var 32, 22, 20, 16 eller 14px alt etter side.
   body-prefikset (0,1,1) slår de inline kopiene (0,1,0), så alle sider får samme
   bredde og marg. padding-inline, ikke padding: noen containere har egen padding-top.
   .fr-inner er forsidens egen container rundt «Viktige frister», med samme tall. */
body .container,body .fr-inner{max-width:1180px;padding-inline:32px}
@media (max-width:640px){body .container,body .fr-inner{padding-inline:16px}}

/* Linjeskift: ikke ett ord alene på siste linje. Langformen text-wrap-style, ikke
   kortformen text-wrap: kortformen setter også text-wrap-mode:wrap, og ville opphevet
   nowrap for en overskrift eller et listepunkt som arver det. */
h1,h2,h3,h4,.cat-hero .ch-sub{text-wrap-style:balance}
p,li,dd,summary{text-wrap-style:pretty}

/* ATMOSPHERE — aurora ON site-wide (2026-05-31). Reverses the earlier "flat
   calm" experiment. The aurora markup + atmosphere.js + per-theme tokens are
   present on every editorial page, so we let it render. Base keeps a gradient;
   body goes transparent (dark-family themes only) so the fixed aurora shows.
   Light themes (frost/glass/hendrix/bw/pink) hide the aurora elsewhere and keep
   their opaque --bg. Embed widgets stay flat (rules below). */
.atmo-base{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:linear-gradient(to bottom, var(--atmo-base-top, var(--bg)) 0%, var(--atmo-base-bottom, var(--bg)) 100%)}
html:not(:is([data-theme="frost"],[data-theme="glass"],[data-theme="hendrix"],[data-theme="bw"],[data-theme="pink"])) body:not(.embed){background:transparent}
/* Dark ("Mørk-blå") theme reads faint — lift band opacity tokens. */
html[data-theme="dark"]{--atmo-band-a-op:.20;--atmo-band-a-op-breathe:.26;--atmo-band-b-op:.13;--atmo-band-b-op-breathe:.17}

/* Aurora bands + cursor light + grain. Markup is injected by atmosphere.js when
   absent, so every .ks page animates (ports the inline-atmosphere look site-wide).
   Light themes hide it (block below); their opaque --bg covers the fixed layers. */
.atmo{position:fixed;inset:0;z-index:-2;pointer-events:none;isolation:isolate;overflow:hidden;contain:layout paint}
.band{position:absolute;pointer-events:none;will-change:transform;mix-blend-mode:screen;transform-origin:center}
.band-inner{position:absolute;inset:0;will-change:transform,opacity;transform-origin:center}
.band-a{width:140vw;height:30vh;left:50%;top:18%;margin-left:-70vw;animation:bandADriftX 38s ease-in-out infinite}
.band-a .band-inner{background:radial-gradient(ellipse at center,hsl(var(--atmo-band-a)) 0%,transparent 50%);opacity:var(--atmo-band-a-op);animation:bandADriftY 53s ease-in-out infinite,bandABreathe 24s ease-in-out infinite}
.band-b{width:110vw;height:22vh;left:42%;top:30%;margin-left:-55vw;animation:bandBDriftX 41s ease-in-out infinite;animation-delay:-20.5s}
.band-b .band-inner{background:radial-gradient(ellipse at center,hsl(var(--atmo-band-b)) 0%,transparent 50%);opacity:var(--atmo-band-b-op);animation:bandBDriftY 47s ease-in-out infinite,bandBBreathe 31s ease-in-out infinite;animation-delay:-23.5s,-15.5s}
@keyframes bandADriftX{0%,100%{transform:translate3d(-4%,0,0)}50%{transform:translate3d(4%,0,0)}}
@keyframes bandADriftY{0%,100%{transform:translate3d(0,-1.5%,0)}50%{transform:translate3d(0,1.5%,0)}}
@keyframes bandABreathe{0%,100%{opacity:var(--atmo-band-a-op)}50%{opacity:var(--atmo-band-a-op-breathe)}}
@keyframes bandBDriftX{0%,100%{transform:translate3d(4%,0,0)}50%{transform:translate3d(-4%,0,0)}}
@keyframes bandBDriftY{0%,100%{transform:translate3d(0,1.5%,0)}50%{transform:translate3d(0,-1.5%,0)}}
@keyframes bandBBreathe{0%,100%{opacity:var(--atmo-band-b-op)}50%{opacity:var(--atmo-band-b-op-breathe)}}
.cursor-light{position:fixed;left:0;top:0;width:1200px;height:1200px;margin:-600px 0 0 -600px;pointer-events:none;background:radial-gradient(circle,hsla(var(--atmo-cursor),var(--atmo-cursor-op)) 0%,transparent 60%);transform:translate3d(50vw,50vh,0);will-change:transform;mix-blend-mode:screen}
.film-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;width:100%;height:100%}
/* Light themes — hide the aurora entirely (opaque --bg would cover it anyway). */
html:is([data-theme="frost"],[data-theme="glass"],[data-theme="hendrix"],[data-theme="bw"],[data-theme="pink"]) .atmo,
html:is([data-theme="frost"],[data-theme="glass"],[data-theme="hendrix"],[data-theme="bw"],[data-theme="pink"]) .atmo-base,
html:is([data-theme="frost"],[data-theme="glass"],[data-theme="hendrix"],[data-theme="bw"],[data-theme="pink"]) .film-grain{display:none !important}
@media (max-width:768px){
  .band-a{animation-duration:57s}
  .band-a .band-inner{animation:bandADriftY 79s ease-in-out infinite}
  .band-b{animation-duration:61s}
  .band-b .band-inner{animation:bandBDriftY 70s ease-in-out infinite}
  .cursor-light{display:none}
  .film-grain{opacity:.02}
}
@media (max-width:1023px){.cursor-light{display:none}}
@media (prefers-reduced-motion:reduce){
  .band,.band-inner{animation:none !important}
  .band-a .band-inner{opacity:.04 !important}
  .band-b .band-inner{opacity:.025 !important}
  .cursor-light{display:none !important}
}
@media (prefers-reduced-data:reduce),(update:slow){
  .band,.band-inner{animation:none !important}
  .cursor-light{display:none !important}
  .film-grain{opacity:.02 !important}
}

/* Embed mode — used when this page is loaded in a focus iframe.
   Hides site chrome so only the calculator shows. Parent sets body.embed via contentDocument. */
body.embed .nav-wrap,
body.embed .tabs-wrap,
body.embed .page-hero,
body.embed .side-col,
body.embed footer,
body.embed .atmo,
body.embed .atmo-base,
body.embed .cursor-light,
body.embed .film-grain{display:none !important}
html:has(body.embed),body.embed{background:var(--bg) !important}
body.embed .calc-wrap{padding:0}
body.embed .calc-wrap .container{grid-template-columns:1fr;padding:0;max-width:none}

/* A11y: skip-to-main link — off-screen until keyboard focus (was only styled in legacy style.css as .skip-link) */
/* Fargeparet er --ink på --bg, ikke --accent på --bg. Aksenten er en mellomtone
   på de lyse temaene, så hvit tekst på den ga 3,06:1 på rosa og 3,28:1 på glass
   — under AA, og det på nettopp den lenka som bare finnes for tastaturbrukere.
   --ink er per definisjon lesbar mot --bg; målt 14,3–17,6:1 på alle ni temaene.
   Fokusringen må ha --bg av samme grunn: med --ink som bakgrunn ville en ring i
   --ink vært bit-identisk med flata, og outline-offset er negativ så ringen
   tegnes inne i elementet. */
.skip{position:absolute;inset-inline-start:0;top:0;transform:translateY(-120%);z-index:1000;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none;font-weight:600;font-size:14px}
.skip:focus{transform:none;outline:2px solid var(--bg);outline-offset:-4px}

/* Barene dekker helt. 96 % holdt ikke: de 4 prosentene som slapp gjennom
   var nok til at en stor overskrift leste som spøkelsestekst når den gled
   under fanerekka — målt på /kalkulator/timer/, der h1 (46px) ligger på
   y 66–116 og baren på 65–112. Blurren fulgte med ut: den kan ikke sees
   gjennom en ugjennomsiktig flate, så den var bare en fullskjerms
   re-sampling per scroll-frame. Mobil hadde den allerede av. */
.nav-wrap{position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px}
/* Samme høyde på toppmenyen overalt. Høyden ble 92px der søkefeltet står i menyen
   (lov, regnskap), 70px på forsiden med timer-pilla og 64px ellers, så alt under
   hoppet opp og ned. min-height, ikke height: raden må kunne vokse hvis den brytes. */
body .nav-wrap nav{min-height:64px;padding-block:0}
.brand-row{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
/* Flisa bak logomerket. Fargen eies av --mark-bg i themes.css, som setter den
   for alle ni temaene — mørke temaer løfter flisa fra den nesten svarte
   navraden, lyse temaer gjør den mørk så messingmerket ikke forsvinner.
   Fallbacken beholdes med vilje: laster en side dette arket uten themes.css,
   står flisa igjen med den verdien den hadde før tokenet fantes, i stedet for
   å bli helt bakgrunnsløs. */
.mark{width:28px;height:28px;border-radius:5px;background:var(--mark-bg,#1a1714);
  border:1px solid var(--line-warm);display:flex;align-items:center;justify-content:center}
.wordmark{font-family:var(--font-serif);font-weight:500;font-size:18px;letter-spacing:-.2px;line-height:1}

.tabs-wrap{border-bottom:1px solid var(--line);
  background:var(--bg);
  position:sticky;top:64px;z-index:40}
/* --nav-h = nav-padding*2 + .mark-høyde + 1px bunnstrek. Fanerekka fester seg
   til denne, ikke til et hardkodet tall — de to hadde drevet fra hverandre
   (nav måler 65px, mens .tabs-wrap sto på top:64px her og top:60px i 17 siders
   inline-kopier), så fanerekka la seg noen piksler feil i forhold til baren
   over. body-prefiks (0,1,1) slår både regelen over og inline-kopiene (0,1,0). */
:root{--nav-h:65px}
body .tabs-wrap{top:var(--nav-h)}
/* 13 av sidene som laster dette arket har i tillegg egen kopi av de to
   reglene over i <style>, med sin egen --nav-bg og sin egen blur — to av
   dem (forsiden og /kalkulator/) står fortsatt på 78 %/72 %. Kopiene er
   (0,1,0) og taper mot body-prefikset (0,1,1), så dekningen bor her.
   Verdiene som ble stående der har ingen virkning lenger.
   De 8 sidene som IKKE laster dette arket — lov/{aksjelov,bokforingslov,
   mvalov,skattelov} og regnskap/{balanse,kontantstrom,kontoplan,resultat}
   — er rettet i sin egen fil; de kan ikke nås herfra. */
body .nav-wrap,
body .tabs-wrap{
  background:var(--bg);
  backdrop-filter:none; -webkit-backdrop-filter:none}
.tabs{display:flex;gap:2px;padding:6px 0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex-shrink:0;padding:10px 14px;border-radius:4px;
  font:500 13px/1 var(--font-sans);color:var(--ink3);text-decoration:none;
  display:flex;align-items:center;gap:8px;position:relative;
  transition:color .2s var(--ease),background .2s var(--ease)}
.tab:hover{color:var(--ink2);background:rgba(var(--wash-rgb),.03)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-6px;height:2px;background:var(--accent)}
/* -6px, ikke -7px: .tabs har 6px bunnpolstring, så en strek på -7px stakk
   én piksel forbi scrollerens polstringsboks. Det ga .tabs 1px vertikal
   scroll (scrollHeight 47 mot clientHeight 46) — nok til at et skrått sveip
   på mobil dro hele fanerekka en piksel opp mens du dro den bortover, og
   til at streken var klippet i halv høyde resten av tiden. -6px legger den
   flush mot bunnkanten: samme sted visuelt, ingen overflow.
   Egen body-regel fordi alle 20 inline-kopiene gjentar -7px med samme
   spesifisitet (0,2,0) og ligger etter <link> i kaskaden. */
body .tab[aria-selected="true"]::after{bottom:-6px}
.tab svg{width:14px;height:14px;color:currentColor;opacity:.6}
.tab[aria-selected="true"] svg{opacity:1;color:var(--accent)}

.page-hero{padding:48px 0 28px;border-bottom:1px solid var(--line)}
/* minmax(0,…) + min-width:0 — grid-barn har min-width:auto som default, så
   sporet kunne ikke krympe under innholdets min-content. På 375px ble
   hero-kolonnen 403px bred og dro hele siden ut i sidelengs scroll. */
.page-hero .container{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:end}
.page-hero .container > *{min-width:0}
/* flex-wrap: brødsmulen er inline-flex og kunne ikke krympe — på 375px dro
   den siden 9px ut i sidelengs scroll på alle undersider med langt navn. */
.crumb{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;font:500 12px/1 var(--font-sans);
  letter-spacing:0;color:var(--ink3);margin-bottom:18px;max-width:100%}
.crumb a{color:var(--ink3);text-decoration:none;transition:color .2s var(--ease)}
.crumb a:hover{color:var(--ink)}
.crumb .sep{width:3px;height:3px;border-radius:50%;background:var(--ink4)}
.crumb .here{color:var(--ink)}
.crumb-back{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:transparent;border:1px solid var(--line-2);
  color:var(--ink2) !important;margin-right:4px;
  transition:background .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
@media(hover: hover){
.crumb-back:hover{background:rgba(var(--wash-rgb),.03);border-color:var(--line-warm);color:var(--ink) !important;transform:translateX(-2px)}
}
/* overflow-wrap: norske sammensatte ord («Refinansieringskalkulator») er
   lengre enn en telefonskjerm og brekker ikke av seg selv — 60px overflow. */
h1.page-title{font-family:var(--font-serif);font-style:normal;font-weight:500;
  font-size:clamp(34px,4vw,46px);line-height:1.08;letter-spacing:-1px;
  margin:0 0 14px;color:var(--ink);overflow-wrap:break-word}
.page-lead{font-size:14px;line-height:1.6;color:var(--ink2);margin:0;max-width:58ch}
.page-stats{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.page-stat{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.page-stat:last-child{border-bottom:none}
.page-stat .l{font:400 12.5px/1.4 var(--font-sans);letter-spacing:0;color:var(--ink3)}
.page-stat .v{font-family:var(--font-sans);font-weight:500;font-size:18px;line-height:1;
  letter-spacing:0;color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;display:inline-flex;align-items:baseline;gap:5px}
.page-stat .v .u{font-family:var(--font-sans);font-weight:400;font-size:12px;
  color:var(--ink4);letter-spacing:0;text-transform:none}
/* Hero-knappene (? og ⛶): tegnene i HTML-en kom i nettleserens standardskrift (Arial),
   og ⛶ så ulik ut fra maskin til maskin. Tegnet skjules med font-size:0 på alle
   bredder, og ikonet tegnes som maske i currentColor, så det følger temaet og hover.
   På PC er knappen allerede rund, så spørsmålstegnet står her uten egen ring. */
.page-hero-actions > .calc-help-btn,
.page-hero-actions > .focus-card-btn{font-size:0}
.page-hero-actions > .calc-help-btn::before,
.page-hero-actions > .focus-card-btn::before{content:'';width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:var(--hv-ico) center/contain no-repeat;mask:var(--hv-ico) center/contain no-repeat}
.page-hero-actions > .calc-help-btn{--hv-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5.5 5.8a2.6 2.6 0 0 1 5.1.7c0 1.8-2.6 2.1-2.6 3.8'/%3E%3Ccircle cx='8' cy='12.9' r='.5' fill='%23000'/%3E%3C/svg%3E")}
.page-hero-actions > .focus-card-btn{--hv-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6V2.5H6M10 2.5h3.5V6M13.5 10v3.5H10M6 13.5H2.5V10'/%3E%3C/svg%3E")}
/* Når heroen står i én kolonne: to tomme rundinger hang alene under tittelen. Her
   blir de pillknapper med ikon og ord. Ordet er aria-label (oversatt i core.js). */
@media (max-width:1024px){
  .page-hero .page-hero-actions{flex-wrap:wrap;gap:8px}
  .page-hero-actions > .calc-help-btn,
  .page-hero-actions > .focus-card-btn,
  .page-hero-actions > .hero-csv-btn{
    width:auto;height:32px;padding:0;padding-inline:10px 12px;gap:0;border-radius:999px;
    font-size:0;background:rgba(var(--wash-rgb),.03);border:1px solid var(--line-2);color:var(--ink2)}
  .page-hero-actions > .calc-help-btn::before,
  .page-hero-actions > .focus-card-btn::before{width:14px;height:14px;margin-inline-end:6px}
  .page-hero-actions > .hero-csv-btn svg{margin-inline-end:6px}
  .page-hero-actions > .calc-help-btn::after,
  .page-hero-actions > .focus-card-btn::after{content:attr(aria-label)}
  .page-hero-actions > .hero-csv-btn::after{content:'CSV'}
  .page-hero-actions > *::after{font:500 12.5px/1 var(--font-sans);letter-spacing:0}
  .page-hero-actions > .calc-help-btn{--hv-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.6'/%3E%3Cpath d='M6.2 6.2a1.9 1.9 0 0 1 3.7.6c0 1.3-1.9 1.6-1.9 2.8'/%3E%3Ccircle cx='8' cy='11.6' r='.4' fill='%23000'/%3E%3C/svg%3E")}
  .page-hero-actions > button:active{background:rgba(var(--wash-rgb),.08)}
  body.focus-mode .page-hero-actions > .focus-card-btn{color:var(--ink);border-color:var(--line-warm)}
}
/* Telefon: siste ledd i brødsmulen er det samme som tittelen rett under,
   og det brøt alene ned på en ny linje med en løs prikk foran. */
@media (max-width:640px){
  .crumb .here,.crumb .sep:nth-last-child(2){display:none}
}
/* Trykkflate i brødsmulen på berøringsskjerm: lenkene var 12px høye og pila 22×22.
   Polstring + like stor negativ marg: teksten står der den stod, og flaten vokser ut
   i lufta rundt. Pila tegner ringen sin som ::before, for selve knappen må være 44×44.
   Lenka rett etter pila vokser ikke mot venstre, ellers ville flatene overlappet. */
@media (pointer:coarse){
  .crumb a:not(.crumb-back){padding:16px 10px;margin:-16px -10px}
  .crumb .crumb-back + a{padding-inline-start:0;margin-inline-start:0}
  body .crumb-back{position:relative;width:44px;height:44px;border-color:transparent;
    margin-block:-11px;margin-inline:-11px -7px}
  body .crumb-back::before{content:"";position:absolute;inset:11px;
    border:1px solid var(--line-2);border-radius:50%}
}

.calc-wrap{padding:28px 0 24px}
.calc-wrap .container{display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:start}
/* Howto-drawer skal være en sentrert blokk i full container-bredde — ikke fanges av .calc-wrap-grid (3 klasser slår 2-klasse grid-regelen uansett kilderekkefølge). Skjult som standard — vises kun når ?-knappen legger til .howto-open. */
.calc-wrap .container.howto-wrap,.calc-wrap > .container.howto-wrap{display:none;grid-template-columns:none}
.calc-wrap .container.howto-wrap.howto-open,.calc-wrap > .container.howto-wrap.howto-open{display:block}
.container.howto-wrap{margin-left:auto;margin-right:auto}
/* Åpen veiledning lå klistret inntil kalkulatoren over (0 px luft på 25 sider). */
.container + .container.howto-wrap.howto-open{margin-top:24px}
/* Lenker i løpende tekst uten egen stil fikk nettleserens standardblå
   (#9e9eff i mørk modus) på 13 sider. Samme farger som .lrn-p a; :where holder
   spesifisiteten lav, så alle komponentregler vinner fortsatt. Understrek, ikke
   border-bottom: lenker som allerede har egen understrek fikk ellers to streker. */
:where(main p, main .gd-steps li, main .gd-field .h) a:not([class]){color:var(--accent-2);text-decoration:underline;text-decoration-color:var(--line-warm);text-underline-offset:3px}
.ks-host{min-width:0;display:flex;flex-direction:column}

.ik-stack{display:flex;flex-direction:column;gap:18px}
.ik-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ik-row.full > *{grid-column:1 / -1}
.ik-row.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:580px){.ik-row{grid-template-columns:1fr}}
.ik-fg{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Skjulte felt: display:grid/flex over overstyrer ellers hidden-attributtet */
.hidden{display:none !important}
.ik-row[hidden],.ik-row.is-hidden,.ik-fg[hidden],.ik-fg.is-hidden,.ks-r-stat[hidden],.ks-section[hidden]{display:none}
.ik-lbl{font:500 12px/1.3 var(--font-sans);color:var(--ink2);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px}
.ik-lbl .cap{font:400 12px/1 var(--font-sans);color:var(--ink4);letter-spacing:0;white-space:nowrap}
.ik-input,.ik-select{
  width:100%;background:rgba(var(--wash-rgb),.025);border:1px solid var(--line-2);border-radius:5px;
  padding:11px 13px;color:var(--ink);
  font:500 14px/1.2 var(--font-sans);outline:none;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.ik-input:focus,.ik-select:focus{
  border-color:rgba(var(--glow-rgb),.45);background:var(--surface-2);
  /* focus bloom — crisp inner ring + soft accent halo (theme-native --glow-rgb) */
  box-shadow:0 0 0 3px rgba(var(--glow-rgb),.10),
             0 0 20px -2px rgba(var(--glow-rgb),.13)}
.ik-select{appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23a8a39a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 5 5 9 1'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
  background-color:rgba(var(--wash-rgb),.025);border-color:var(--line-2)}
.ik-select:hover{background-color:rgba(var(--wash-rgb),.04);border-color:var(--line-warm)}

/* ── Feiltilstand på felt ──────────────────────────────────────
   Slås på med .is-error på feltet, eller native [aria-invalid="true"].
   Hvile = leire-kant + svak leire-vask. Fokus dypner SAMME tone, så feilen
   leses gjennom fokusringen istedenfor å bli overdøvet av den (fokus-
   geometrien er den samme 3px + 20px-bloomen som .ik-input:focus over).
   .ik-err er inline-meldingen under feltet — samme plass som .ik-hint. */
.ik-input.is-error,.ik-select.is-error,
.ik-input[aria-invalid="true"],.ik-select[aria-invalid="true"]{
  border-color:color-mix(in srgb, var(--err) 62%, var(--line-2));
  background:color-mix(in srgb, var(--err) 6%, var(--surface))}
.ik-input.is-error:focus,.ik-select.is-error:focus,
.ik-input[aria-invalid="true"]:focus,.ik-select[aria-invalid="true"]:focus{
  border-color:var(--err);
  background:color-mix(in srgb, var(--err) 7%, var(--surface-2));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--err) 26%, transparent),
             0 0 20px -2px color-mix(in srgb, var(--err) 18%, transparent)}
.ik-fg.is-error .ik-lbl{color:color-mix(in srgb, var(--err) 66%, var(--ink2))}
.ik-err{display:flex;align-items:center;gap:6px;
  font:500 12px/1.4 var(--font-sans);color:var(--err);letter-spacing:0}
.ik-err svg{flex:none;width:13px;height:13px;stroke:currentColor}

/* Read-only derived value — mirrors ik-input shape but with accent + label inside */
.ik-derived{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:8px 14px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 6%, transparent),
    color-mix(in srgb, var(--accent) 3%, transparent));
  border:1px dashed color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius:5px;min-height:46px;
}
.ik-derived .l{font:500 11px/1 var(--font-sans);color:var(--ink3);
  letter-spacing:.16em;text-transform:uppercase}
.ik-derived .v{font:500 16px/1 var(--font-sans);color:var(--accent-2);
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.1px}
.ik-derived .v .u{font:400 12px/1 var(--font-sans);color:var(--ink3);margin-left:2px}

.ik-segs{display:grid;grid-template-columns:repeat(var(--segs,4),1fr);gap:4px;
  padding:3px;background:rgba(var(--wash-rgb),.025);
  border:1px solid var(--line-2);border-radius:5px}
.ik-seg{position:relative;padding:10px 8px 9px;border:0;cursor:pointer;
  background:transparent;color:var(--ink3);text-align:center;border-radius:3px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:background .2s var(--ease),color .2s var(--ease)}
.ik-seg .glyph{display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:currentColor;opacity:.7;
  transition:opacity .2s var(--ease),color .2s var(--ease)}
.ik-seg .glyph svg{width:100%;height:100%}
.ik-seg .lab{font:500 12px/1 var(--font-sans);letter-spacing:0}
.ik-seg:hover{color:var(--ink2);background:rgba(var(--wash-rgb),.025)}
.ik-seg:hover .glyph{opacity:1}
.ik-seg[aria-pressed="true"]{
  background:rgba(var(--glow-rgb),.10);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-warm)}
.ik-seg[aria-pressed="true"] .glyph{opacity:1;color:var(--accent-2)}
.ik-hint{font-size:12px;color:var(--ink3);line-height:1.45}
.ik-note{font-size:12px;color:var(--ink3);line-height:1.5;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ik-section-head{display:flex;align-items:baseline;gap:14px;
  padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.ik-section-head h3{font:500 13px/1 var(--font-sans);letter-spacing:0;color:var(--ink2);margin:0}
.ik-section-head .meta{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink3)}
@media(max-width:560px){.ik-section-head{flex-wrap:wrap;row-gap:4px}}
.ik-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;background:transparent;border:0;cursor:pointer;
  padding:6px 0;color:var(--ink2);font:500 12.5px/1 var(--font-sans);text-align:left}
.ik-toggle::after{content:'';width:6px;height:6px;
  border-right:1.4px solid var(--ink3);border-bottom:1.4px solid var(--ink3);
  transform:rotate(45deg);transition:transform .15s var(--ease)}
.ik-toggle[aria-expanded="true"]::after{transform:rotate(225deg)}
.ik-collapse{display:none;margin-top:12px}
.ik-collapse.open{display:block}

.ks{background:var(--surface);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 16px 40px rgba(0,0,0,.3)}

.ks-strip{display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line)}
.ks-strip-cell{padding:18px 24px;
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:left;position:relative}
.ks-strip-cell + .ks-strip-cell::before{content:'';position:absolute;left:0;
  top:22%;bottom:22%;width:1px;background:var(--line)}
.ks-strip-cell .l{font:500 12px/1.25 var(--font-sans);letter-spacing:.2px;color:var(--ink3);text-wrap-style:balance}
.ks-strip-cell .v{font-family:var(--font-serif);font-weight:500;font-style:normal;
  font-size:22px;color:var(--ink);letter-spacing:-.4px;line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
  display:inline-flex;align-items:baseline;gap:4px}
.ks-strip-cell .v .u{font:500 12px/1 var(--font-sans);font-style:normal;
  color:var(--ink4);letter-spacing:0}
.ks-strip-cell.accent .v{color:var(--accent-2)}
.ks-body{display:grid;grid-template-columns:minmax(0,1fr) 360px}
.ks-form{padding:22px 24px 24px;border-right:1px solid var(--line);min-width:0}
.ks-section{margin-bottom:24px}
.ks-section:last-child{margin-bottom:0}

.ks-modes{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  background:transparent;margin-bottom:22px}
.ks-modes.three{grid-template-columns:1fr 1fr 1fr}
.ks-mode{display:flex;flex-direction:column;justify-content:flex-start;padding:11px 14px;background:transparent;border:0;cursor:pointer;
  color:var(--ink3);text-align:left;
  transition:background .2s var(--ease),color .2s var(--ease);
  border-right:1px solid var(--line)}
.ks-mode:last-child{border-right:0}
.ks-mode:hover{color:var(--ink2);background:rgba(var(--wash-rgb),.02)}
.ks-mode[aria-pressed="true"]{background:rgba(var(--glow-rgb),.06);color:var(--ink);position:relative}
.ks-mode[aria-pressed="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
}
.ks-mode[aria-pressed="true"] .mtitle{color:var(--ink)}
.ks-mode .mtitle{display:block;font:500 13px/1.2 var(--font-sans);
  letter-spacing:0;margin-bottom:2px}
.ks-mode .mdesc{display:block;font:400 12px/1.4 var(--font-sans);color:var(--ink3)}
.ks-mode[aria-pressed="true"] .mdesc{color:var(--ink2)}

.ks-result{padding:22px 24px 26px;background:transparent;
  display:flex;flex-direction:column;min-width:0;text-align:left;align-items:stretch;position:relative}
.ks-r-eyebrow{font:500 12px/1.25 var(--font-sans);letter-spacing:.2px;
  color:var(--ink3);margin-bottom:10px}
.ks-r-net{font-family:var(--font-serif);font-style:normal;font-weight:500;
  font-size:54px;line-height:1;letter-spacing:-1.6px;color:var(--accent-2);
  font-variant-numeric:tabular-nums lining-nums;
  display:inline-flex;align-items:baseline;gap:8px}
.ks-r-net.small{font-size:44px;letter-spacing:-1.2px}
.ks-r-net .unit{font:500 12px/1 var(--font-sans);font-style:normal;
  color:var(--ink3);letter-spacing:0;
  align-self:flex-start;margin-top:10px}
.ks-r-mnd{margin-top:10px;color:var(--ink3);font-size:12.5px;letter-spacing:0}
.ks-r-mnd b{font-weight:500;color:var(--ink);font-family:var(--font-sans);font-style:normal;letter-spacing:0}

/* Add-to-budget — only shown when calc is hosted inside the budget page.
   Quiet outline that lifts to the accent on hover, flips to a "done" state
   for a beat after the user clicks. */
.ks-r-add{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:9px 13px 9px 11px;border-radius:5px;cursor:pointer;
  background:transparent;color:var(--ink2);
  border:1px solid var(--line-2);
  font:500 12.5px/1 var(--font-sans);letter-spacing:0;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .25s var(--ease);
}
.ks-r-add .ico{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;color:var(--accent-2);opacity:.9;transition:color .18s var(--ease)}
.ks-r-add:hover{color:var(--ink);border-color:var(--line-warm);
  background:color-mix(in srgb, var(--accent) 7%, transparent)}
.ks-r-add:active{transform:translateY(1px)}
.ks-r-add.is-added{
  color:var(--ink);border-color:var(--line-warm);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.ks-r-add.is-added .ico{color:var(--accent)}

.ks-bar{margin:20px 0 16px;padding:14px 0 6px;width:100%;border-top:1px solid var(--line)}
.ks-bar-track{display:flex;gap:1px;height:6px;border-radius:1px;overflow:hidden;background:var(--bg)}
.ks-bar-seg{height:100%;transition:flex-basis .35s var(--ease)}
.ks-bar-seg.s-net{background:var(--accent)}
/* Stolpen var det tydeligste stedet hardkodingen kunne ses: .s-net tok temaets
   --accent mens de tre andre segmentene sto på carbons gamle cognac. På carbon
   lå to ulike messingtoner rett ved siden av hverandre i samme stolpe, og på
   f.eks. nordlys ble en grønn aksent fulgt av tre brune segmenter. */
.ks-bar-seg.s-trinn{background:rgba(var(--glow-rgb),.55)}
.ks-bar-seg.s-alm{background:rgba(var(--glow-rgb),.32)}
.ks-bar-seg.s-trygd{background:rgba(var(--glow-rgb),.18)}
.ks-bar-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 18px;
  margin:12px 0 0;font-size:12px;color:var(--ink3)}
.ks-bar-legend .row{display:flex;align-items:center;gap:8px;
  padding:5px 0}
.ks-bar-legend .dot{width:7px;height:7px;border-radius:1px;flex-shrink:0}
.ks-bar-legend .row b{font-family:var(--font-sans);font-style:normal;font-weight:500;color:var(--ink);
  margin-left:auto;font-size:12.5px;letter-spacing:0;
  font-variant-numeric:tabular-nums lining-nums}

.ks-r-stats{display:flex;flex-direction:column;width:100%;text-align:left;margin:8px 0 0}
.ks-r-stat{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;font-size:13px;border-bottom:1px solid var(--line)}
.ks-r-stat:last-child{border-bottom:none}
.ks-r-stat.div{margin-top:0;padding-top:10px}
.ks-r-stat .l{color:var(--ink3);font:400 12.5px/1.2 var(--font-sans);letter-spacing:0}
.ks-r-stat .v{font-family:var(--font-sans);font-style:normal;font-weight:500;
  font-size:13.5px;color:var(--ink);letter-spacing:0;
  font-variant-numeric:tabular-nums lining-nums}
.ks-r-stat .v.dim{color:var(--ink3);font-weight:400}
.ks-r-stat .v.pos{color:var(--pos)}
.ks-r-stat .v.neg{color:var(--neg)}
.ks-r-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink3);line-height:1.55}

.side-col{display:flex;flex-direction:column;gap:14px}
.side-card{background:transparent;
  border:1px solid var(--line);border-radius:6px;padding:18px 20px}
.side-card h4{font:500 12px/1.25 var(--font-sans);letter-spacing:.2px;
  color:var(--ink3);margin:0 0 12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.ref-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 0;font-size:13px}
.ref-row + .ref-row{border-top:1px solid var(--line)}
.ref-row .l{color:var(--ink3);text-wrap-style:balance}
.ref-row .v{font-family:var(--font-sans);font-style:normal;font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:0;font-size:13.5px;
  display:inline-flex;align-items:baseline;gap:5px}
.ref-row .v .u{font:400 12px/1 var(--font-sans);color:var(--ink4);letter-spacing:0}
.ref-row .v:has(.u){white-space:nowrap}
.ref-row .v.accent{color:var(--ink)}
.related a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 0;text-decoration:none;color:var(--ink2);
  transition:color .2s var(--ease);border-top:1px solid var(--line)}
.related a:first-of-type{border-top:none}
.related a:hover{color:var(--ink)}
@media(hover: hover){
.related a:hover .arr{color:var(--accent);transform:translateX(2px)}
}
.related .name{font-size:13.5px;font-family:var(--font-sans);font-weight:400;letter-spacing:0}
.related .arr{color:var(--ink4);font-size:12px;
  transition:color .2s var(--ease),transform .2s var(--ease)}

.method-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.method-list li{display:flex;gap:10px;align-items:flex-start;
  font-size:12.5px;line-height:1.55;color:var(--ink2)}
.method-list .n{flex-shrink:0;font:500 12px/1.55 var(--font-sans);color:var(--ink4);width:14px}
.method-list .t{padding-top:0}
.method-list b{font-family:var(--font-sans);font-weight:500;color:var(--ink);letter-spacing:0}

.ks-r-sources{margin-top:14px;padding-top:14px;width:100%;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 14px;font-size:12px;color:var(--ink3)}
.ks-r-sources .src{color:var(--ink3)}
.ks-r-sources .dot{display:none}
.ks-r-sources .upd{color:var(--ink3);white-space:nowrap}
.ks-r-sources .upd em{color:var(--ink3);font-style:normal;font-family:var(--font-sans);letter-spacing:0}

.ks-import{margin:0;padding:14px 24px;
  background:transparent;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:14px;text-decoration:none;
  transition:background .2s var(--ease)}
.ks-import:hover{background:rgba(var(--wash-rgb),.015)}
.ks-import .ic{display:none}
.ks-import .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ks-import .ttl{font:500 13.5px/1.2 var(--font-sans);font-style:normal;
  color:var(--ink);letter-spacing:0;display:flex;align-items:center;gap:9px}
.ks-import .ttl .badge{display:none}
.ks-import .desc{font:400 12px/1.45 var(--font-sans);color:var(--ink3)}
.ks-import .btn{flex-shrink:0;padding:8px 14px;border-radius:4px;
  background:transparent;border:1px solid var(--line-2);
  color:var(--ink2);font:500 12px/1 var(--font-sans);letter-spacing:0;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.ks-import:hover .btn{border-color:var(--line-warm);color:var(--ink)}

footer{border-top:1px solid var(--line);padding:32px 0 36px;color:var(--ink4);font-size:12.5px;margin-top:32px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot em{font-style:normal;color:var(--ink4)}
footer a{color:var(--ink3);text-decoration:none;transition:color .2s var(--ease)}
@media(hover:hover){footer a:hover{color:var(--ink)}}
footer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
/* Én bunntekst overalt. Sidene hadde fire utgaver med ulik størrelse, farge og skilletegn.
   «body > footer»: lovsidene har også en <footer> inne i innholdet, den skal ikke treffes.
   Lenkene får avstand i stedet for prikker: font-size:0 på .foot-links skjuler « · » som
   ligger som ren tekst på oversiktssidene. .foot-links.foot-links er for å slå
   .site-footer-full .foot-links a (0,2,1) i regnskapssidenes egen kopi. */
body > footer{margin-top:32px;padding:32px 0 36px;font-size:12.5px;color:var(--ink4)}
body > footer .foot{gap:24px;font:400 12.5px/1.55 var(--font-sans);color:var(--ink4)}
body > footer .foot-text{flex:1 1 100%}
body > footer .foot{flex-direction:column;align-items:flex-start}
body > footer #fl-copy,body > .site-footer-full #fl-copy{max-width:72ch;text-wrap-style:pretty}
body > footer .foot-links.foot-links{display:block;margin:0;font-size:0}
body > footer .foot-links .foot-sep{display:none}
body > footer .foot-links.foot-links a{display:inline-block;margin:0;margin-inline-end:16px;padding:0;border:0;
  font:400 12.5px/1.4 var(--font-sans);letter-spacing:0;color:var(--ink3);text-decoration:none}
body > footer .foot-links.foot-links a:last-child{margin-inline-end:0}
@media(hover:hover){body > footer .foot-links.foot-links a:hover{color:var(--ink)}}
/* Trykkflate: 16px høye lenker blir 44px, uten at teksten flytter seg. */
@media (pointer:coarse){
  body > footer .foot-links.foot-links a{min-width:40px;text-align:center;padding:13.25px 8px;margin-block:-13.25px;margin-inline:-8px 8px}
  body > footer .foot-links.foot-links a:last-child{margin-inline-end:-8px}
}
/* «Hverdagsverktøy» som ekstra linje finnes bare på oversiktssidene og regnskap. Style-
   attributtet i HTML-en setter display:block, derfor !important. */
#fl-author{display:none !important}
/* Regnskapssidene: eget felt, logotekst og navnet to ganger. Samme oppsett som resten:
   teksten øverst, lenkene under. */
body > .site-footer-full{margin-top:32px;padding:32px 0 36px;background:none;font-size:12.5px;color:var(--ink4)}
body > .site-footer-full .container{flex-direction:column-reverse;gap:24px}
body > .site-footer-full .footer-logo{display:none}
body > .site-footer-full .footer-inner{margin:0}
body > .site-footer-full .footer-copy{font-size:12.5px;line-height:1.55;color:var(--ink4)}

/* Seksjonstitlene hadde to stiler på samme side (serif med teller i store bokstaver mot
   liten sans med «5 emner»). Alle følger nå stilen i components.css (.calc-deck > .col-head). */
body .calc-deck > .col-head,
body .col-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;height:auto;
  padding:0 0 12px;margin-bottom:18px;border-bottom:1px solid var(--line)}
body .col-head h2,
body .col-head h3{font-family:var(--font-serif);font-weight:500;font-size:14px;line-height:1.5;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);margin:0}
body .col-head .count{flex-shrink:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}

/* ── Lær-seksjonene: formel-ledger og satstabeller ──
   41 sider har en identisk inline-kopi med tallkolonne 130px og tekstkolonne 1fr,
   og tabellceller uten luft mellom kolonnene. To klasser slår inline-kopien.
   Tre-kolonnene krever at ledgeren selv er minst 900px bred: på lonn står den i
   en 764px smal kolonne, og der ville teksten blitt klemt til 278px. */
.lc-ledger{container-type:inline-size}
@container (min-width:900px){.lc-ledger .lc-led{grid-template-columns:190px 240px minmax(0,560px)}}
.lc-ledger .lc-led .fig{text-wrap:balance}
@media(max-width:900px){.lc-ledger .lc-led{grid-template-columns:170px minmax(0,1fr)}.lc-ledger .lc-led .dsc{grid-column:1 / -1}}
@media(max-width:560px){.lc-ledger .lc-led{grid-template-columns:1fr}}
.lc-tblwrap .lc-trinn :is(th,td) + :is(th,td){padding-left:14px}
.lc-rates > :only-child{grid-column:1 / -1}

@media (max-width:1024px){
  .calc-wrap .container{grid-template-columns:1fr}
  .side-col{position:static}
  .page-hero .container{grid-template-columns:minmax(0,1fr)}
}
/* Skjema, resultat og sidekolonne side om side gir skjemaet 246-325 px mellom 981 og 1100 px
   (faner og sats-brikker presses sammen). Egen inline-regel (max-width:980px) på mange sider slo
   den delte regelen over, så body-prefikset trengs. Under 1100 px ligger sidekortet under;
   1101-1180 px får smalere sidekolonne så skjemaet holder ca. 380 px. */
@media (max-width:1100px){
  body .calc-wrap .container{grid-template-columns:minmax(0,1fr)}
  body .side-col{position:static}
}
@media (min-width:1101px) and (max-width:1180px){
  body .calc-wrap .container{grid-template-columns:minmax(0,1fr) 270px;gap:24px}
}
@media (max-width:768px){
  .ks-body{grid-template-columns:1fr}
  .ks-form{border-right:none;border-bottom:1px solid var(--line)}
  /* minmax(0,…) — bare 1fr gir sporet en minstebredde lik cellens min-content,
     så en lang verdi som "Største post" presset stripen 11px ut av .ks og ble
     klippet bort av .ks{overflow:hidden}. */
  .ks-strip{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .ks-strip-cell:nth-child(2n+1)::before{display:none}
  /* Verdien er inline-flex uten min-width:0 og målte derfor max-content — en
     lang tekstverdi (f.eks. navnet på største abonnement) stakk ut av cellen. */
  .ks-strip-cell .v{max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere}
  .ks-strip-cell .v > *{min-width:0}
}

/* ── Kalkulatorskallet: felles overstyring (2026-11) ──
   Rundt 50 sider har egen inline-kopi av .ks-*, .ik-* og .side-card, og inline <style>
   kommer etter <link> i kaskaden. body-prefikset slår kopiene uten å røre sidene.
   .ks-result og noen etiketter ligger i calm-override.css, der reglene bruker !important. */

/* Samme tekstkant i alle kort. Før på mobil: tallstripe 31, skjema 43, resultat 47 og sidekort 35 px. */
body .ks-strip-cell,body .ks-form,body .ks-import,body .ks-breakdown,body .spare-graph-wrap,body .bok-strip-cap{padding-inline:24px}
/* Formelen i kalkylekortene har polstringen i style-attributtet. */
body .ks > details.howto > summary,body .ks > details.howto > .howto-body{padding-inline:24px !important}
@media (max-width:1024px){body .side-card{padding-inline:24px}}
@media (max-width:640px){
  body .ks-strip-cell,body .ks-form,body .ks-import,body .ks-breakdown,body .spare-graph-wrap,body .bok-strip-cap,body .side-card{padding-inline:16px}
  body .ks > details.howto > summary,body .ks > details.howto > .howto-body{padding-inline:16px !important}
}

/* PC: kolonnene i kortet er ulikt høye (opptil 540 px tomt felt). Innholdet i den korteste
   følger med ved rulling, og sidekolonnen likeså. overflow:clip: med hidden blir kortet en
   rullecontainer, og da fester sticky seg til kortet i stedet for skjermen.
   Bakgrunnen ligger på .ks og skillestreken på .ks-body, så begge går hele veien ned uansett
   hvilken kolonne som er kortest. grid-column på et absolutt element plasserer streken i
   rutenettet uten å ta opp en rute. Bare sticky når innholdet får plass under toppmenyen:
   ved 700 px høyde er det 576 px. Fem kolonner er litt høyere (580–653 px); bunnen av dem kommer
   til syne nederst i kortet. */
body .ks{overflow:clip}
@media (min-width:769px){
  body .ks-body{position:relative}
  body .ks-body::before{content:"";position:absolute;grid-column:2;top:0;bottom:0;inset-inline-start:0;width:1px;background:var(--line)}
  body .ks-body > .ks-form{border-right:0}
}
@media (min-width:981px){
  body .ks-body{gap:0;background:transparent}
  body .ks-body > .ks-form,body .ks-body > .ks-result{background:transparent}
}
@media screen and (min-width:1101px) and (min-height:700px){
  body .ks-body > .ks-form,body .ks-body > .ks-result,body .side-col{position:sticky;top:124px;align-self:start}
  /* Hjelpebobler i skjemaet skal ligge over resultatkolonnen. */
  body .ks-body > .ks-form{z-index:1}
  body.focus-mode .ks-body > .ks-form,body.focus-mode .ks-body > .ks-result,body.focus-mode .side-col{top:16px}
  body.embed .ks-body > .ks-form,body.embed .ks-body > .ks-result{position:static}
}

/* Tallet står på samme høyde i raden selv om etiketten ved siden av brytes til to linjer. */
body .ks-strip-cell .v{margin-top:auto}

/* Gulv for liten tekst: 12 px for alt som skal leses, 11 px for små etiketter i store bokstaver. */
body .ik-lbl,body .ik-lbl .cap,body .ik-hint,body .ik-note,body .ik-err,body .ik-warning,
body .ks-mode .mdesc,body .ks-r-note,body .ks-bar-legend,body .related .arr,body .calc-disclaimer,
body .side-card .method-step .n,body .side-card .method-list .n,body .ref-row .v .u{font-size:12px}
body .ks-r-subhead,body .ks-r-shdr,body .bd-table th,body .rates-table thead th{font-size:11px}
/* Ikke ett ord alene på siste linje (samme regel som p i skallet; dette er div og span). */
body .ks-r-mnd,body .ks-r-foot,body .ik-hint,body .ik-note,body .ks-mode .mdesc{text-wrap-style:pretty}
/* Kildene: samme luft mellom alle, også der siden har sin egen gap. */
body .ks-r-sources{gap:4px 14px}
/* Hintet i seksjonsoverskriften: til høyre på samme linje, til venstre når det brytes ned på mobil.
   Med margin-left:auto havnet det alene helt til høyre på egen linje. */
body .ik-section-head{justify-content:space-between}
body .ik-section-head .meta{margin-left:0}
body .ik-section-head h3{flex-shrink:0}

/* Listerader i sans. Serif er for hovedsvaret og tallstripa. */
body .bd-table td.v{font-family:var(--font-sans)}

/* Rader som kan rulles sidelengs: tonet kant bare i den enden det er mer innhold. Maske i stedet
   for farget overlegg, så det virker i alle tema. Uten overflyt er tidslinja inaktiv og kanten 0.
   Nettlesere uten scroll-tidslinje: fast kant på brikkeraden, som vi vet ruller på smale skjermer. */
@property --rull-v{syntax:'<length>';inherits:false;initial-value:0px}
@property --rull-h{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes rull-kant{
  0%{--rull-v:0px;--rull-h:36px}
  8%{--rull-v:16px}
  92%{--rull-h:36px}
  100%{--rull-v:16px;--rull-h:0px}
}
body .kk-picker-strip,body .bd-table-wrap,body .lrn-seg.scr{
  -webkit-mask-image:linear-gradient(var(--rull-fra,to right),transparent,#000 var(--rull-v,0px),#000 calc(100% - var(--rull-h,0px)),transparent);
          mask-image:linear-gradient(var(--rull-fra,to right),transparent,#000 var(--rull-v,0px),#000 calc(100% - var(--rull-h,0px)),transparent)}
html[dir="rtl"] body .kk-picker-strip,html[dir="rtl"] body .bd-table-wrap,html[dir="rtl"] body .lrn-seg.scr{--rull-fra:to left}
@supports (animation-timeline:scroll()){
  body .kk-picker-strip,body .bd-table-wrap,body .lrn-seg.scr{animation:rull-kant linear both;animation-timeline:scroll(self inline)}
}
/* Brikkeraden går helt ut til skjermkanten, så brikkene ikke forsvinner en marg før kanten. */
@media (max-width:1180px){
  body .kk-picker-strip{margin-inline:-32px;padding-inline:32px}
  @supports not (animation-timeline:scroll()){body .kk-picker-strip{--rull-h:36px}}
}
@media (max-width:640px){body .kk-picker-strip{margin-inline:-16px;padding-inline:16px}}

/* Inter gjør bindestreken bredere med tabulære sifre (6,45 mot 9,08 px på 14 px), så «NRK-lisens»
   ser ut som «NRK - lisens». Bare rene tall skal ha dem; .ref-row .v beholder sine. */
body .rates-table{font-variant-numeric:lining-nums}
body .rates-table tbody td.rate{font-variant-numeric:tabular-nums lining-nums}
body .side-card .ref-row{font-variant-numeric:normal}
body .cc-a{font-variant-numeric:lining-nums}
body .rv-cond .v{font-variant-numeric:normal}

/* ── Help dot + popover (?-veiledning ved seksjonshoder) ────── */
.help-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;
  background:transparent;border:1px solid var(--line-2);
  color:var(--ink3);font:500 10px/1 var(--font-sans);
  cursor:help;position:relative;padding:0;margin-left:4px;
  transition:border-color .15s,color .15s;vertical-align:baseline;
}
.help-dot::before{content:"?"}
.help-dot:hover,.help-dot:focus-visible{
  border-color:var(--accent);color:var(--accent);outline:none;
}
.help-pop{
  position:absolute;left:0;top:calc(100% + 8px);z-index:30;
  width:280px;max-width:calc(100vw - 32px);
  background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:4px;padding:12px 14px;
  font:400 12px/1.5 var(--font-sans);color:var(--ink2);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-3px);
  transition:opacity .15s,visibility .15s,transform .15s;
  pointer-events:none;text-align:left;text-transform:none;letter-spacing:0;
}
.help-pop::before{
  content:"";position:absolute;left:5px;top:-5px;width:8px;height:8px;
  background:var(--surface-2);border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);
  transform:rotate(45deg);
}
.help-pop p{margin:0 0 6px}
.help-pop p:last-child{margin-bottom:0}
.help-pop b,.help-pop strong{color:var(--ink);font-weight:500}
.help-pop code,.help-pop .formula{
  font:500 11.5px/1.4 var(--font-mono);color:var(--accent-2);
  background:rgba(var(--glow-rgb),.08);padding:1px 5px;border-radius:2px;
}
.help-dot:focus-visible .help-pop,
.help-dot[aria-expanded="true"] .help-pop{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
@media(hover: hover){
.help-dot:hover .help-pop{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
}

/* ── Refined scrollbars (Webkit) — applies inside embedded iframes too ─ */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:rgba(var(--wash-rgb),.06);border-radius:5px;
  border:2px solid transparent;background-clip:padding-box;
}
/* Hover-tonen var rgb(217,119,87) — en oransjerød som ikke finnes i noen av de
   ti palettene. Scrollbaren var altså det ene stedet på nettstedet med en helt
   egen farge, uansett tema. Følger nå aksenten. */
*::-webkit-scrollbar-thumb:hover{background:rgba(var(--glow-rgb),.35);background-clip:padding-box;border:2px solid transparent}
*::-webkit-scrollbar-corner{background:transparent}
html{scrollbar-color:rgba(var(--wash-rgb),.1) transparent;scrollbar-width:thin}

/* ── Embed-mode "Legg til i budsjettet" CTA ───────────────────
   Injected by site-shell.js when ?embed=1&budgetAdd=1. Lives inside
   the calc's .ks-result column, between the headline number and the
   stats grid — so the action sits where the value is. */
.bud-cta-embed{
  margin:14px 0 18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  position:relative;
}
.bud-cta-btn{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--accent) 11%, transparent) 100%);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius:5px;cursor:pointer;
  color:var(--ink);
  padding:10px 14px 10px 12px;
  display:inline-flex;align-items:center;gap:11px;
  font:inherit;letter-spacing:0;
  position:relative;overflow:hidden;
  transition:background .2s var(--ease),
             border-color .2s var(--ease),
             transform .14s var(--ease),
             box-shadow .25s var(--ease);
  box-shadow:0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent) inset,
             0 2px 6px -3px rgba(0,0,0,.6);
}
.bud-cta-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.04) 0%, transparent 60%);
  pointer-events:none;
}
@media(hover: hover){
.bud-cta-btn:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 28%, transparent) 0%,
    color-mix(in srgb, var(--accent) 18%, transparent) 100%);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent) inset,
             0 6px 14px -6px rgba(0,0,0,.5);
}
}
.bud-cta-btn:active, .bud-cta-btn.is-pressed{
  transform:translateY(1px);
}
.bud-cta-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
.bud-cta-icn{
  width:24px;height:24px;flex-shrink:0;
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) 70%, transparent);
  color:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease), transform .25s var(--ease);
}
@media(hover: hover){
.bud-cta-btn:hover .bud-cta-icn{
  background:var(--accent);transform:rotate(90deg);
}
}
.bud-cta-lbl{
  display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;
  text-align:left;min-width:0;
}
.bud-cta-eyebrow{
  font:600 9.5px/1 var(--font-sans);
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 80%, var(--ink));
  margin-bottom:4px;
}
.bud-cta-text{
  font:500 13.5px/1.1 var(--font-sans);
  color:var(--ink);letter-spacing:-.01em;
}
.bud-cta-arrow{
  margin-left:6px;color:color-mix(in srgb, var(--ink) 60%, transparent);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease), color .2s var(--ease);
}
@media(hover: hover){
.bud-cta-btn:hover .bud-cta-arrow{
  transform:translate(2px,-2px);color:var(--ink);
}
}
.bud-cta-btn.is-added{
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  border-color:color-mix(in srgb, var(--accent) 60%, transparent);
}
.bud-cta-btn.is-added .bud-cta-icn{
  background:var(--accent);
  /* swap plus → check */
}
.bud-cta-btn.is-added .bud-cta-icn svg{display:none}
.bud-cta-btn.is-added .bud-cta-icn::after{
  content:"";display:block;width:8px;height:5px;
  border-left:1.6px solid var(--bg);
  border-bottom:1.6px solid var(--bg);
  transform:rotate(-45deg) translate(1px,-1px);
}

.bud-cta-toast{
  font:500 12px/1.4 var(--font-sans);
  color:var(--accent-2);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding:8px 12px;border-radius:4px;
  opacity:0;transform:translateY(-2px);pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.bud-cta-toast.show{opacity:1;transform:none;pointer-events:auto}
.bud-cta-toast.warn{
  color:#d18a8a;
  background:color-mix(in srgb, #d18a8a 10%, transparent);
  border-color:color-mix(in srgb, #d18a8a 28%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE-ENTRY CHOREOGRAPHY (Fase 4) — ported from Claude Design master
   (_incoming/claude-design/Subpage Preview.html:448-625).
   Scoped to .page-content → only the cat-hero landings that carry the
   wrapper animate (skatt, avgift, boliglan, personlig, selskap). Pages
   without .page-content are untouched. Eases live in colors_and_type.css.
   ═══════════════════════════════════════════════════════════════ */

/* Reserve the injected search box's height so the deferred search.js
   injection (it inserts #site-search as a sibling before the 0-height
   #site-search-anchor) doesn't shove the page down ~56px = the "jump"
   when landing on a body-anchor page (budsjett/personlig m.fl.).
   :has(> …) targets only the body container that directly holds the
   anchor — the nav-anchor pages (anchor inside .nav-right) never match. */
.container:has(> #site-search-anchor){ min-height:72px; }

/* ═══════════════════════════════════════════════════════════════
   PAGE-ENTRY CHOREOGRAPHY v2 — «ett åndedrag» (jank-fri, 2026-07-02)
   Designprinsipper:
   · KUN transform + opacity i alle keyframes. Eneste unntak er
     hero-tittelen (ETT element per side) som får dempet blur(8px)→0
     på desktop — mobil bruker blur-fri hvxTitleLite.
   · Total koreografi ferdig ≤ 1,2 s (før: 2,2 s). Stagger 40-50 ms.
   · Nye keyframe-navn (hvx*): 5 landings redefinerer @keyframes pageIn
     inline (sist definerte @keyframes vinner globalt) — nye navn kan
     ikke kapres av inline-kopiene.
   · body-prefiksede selektorer: slår inline-kopienes
     `.page-content{animation:pageIn …}` på spesifisitet (0,1,1 > 0,1,0).
   · body.hv-entered settes av støtteskriptet i atmosphere.js (~1,4 s)
     og fjerner flare-laget (fixed ::before) når entreen er over —
     backdrop-filter-barene slipper å re-sample et levende fullskjermlag.
   · Reisedistanser kortet ned (28→18 px) — mindre paint-areal per
     frame, mykere opplevd bevegelse med samme expo-out-ease.
   Eases ligger i colors_and_type.css (--ease-soft, --ease-glide).
   ═══════════════════════════════════════════════════════════════ */

/* ── Kompat-shims: gamle keyframe-navn beholdes fordi
      personlig/budsjett/index.html refererer hvRise/hvRiseSm/hvLine
      inline — men de er redefinert UTEN filter:blur. Blur-animasjon
      på mange elementer = repaint-storm.
      IKKE bruk disse i ny kode — bruk hvx*-settet under. ── */
@keyframes hvRise{ from{opacity:0; transform:translate3d(0,18px,0)} to{opacity:1; transform:none} }
@keyframes hvRiseSm{ from{opacity:0; transform:translate3d(0,10px,0)} to{opacity:1; transform:none} }
@keyframes hvTitle{ from{opacity:0; transform:translate3d(0,16px,0) scale(.985)} to{opacity:1; transform:none} }
@keyframes hvFade{ from{opacity:0} to{opacity:1} }
@keyframes hvLine{ from{opacity:0; transform:scaleX(0)} to{opacity:1; transform:scaleX(1)} }

/* ── Nye keyframes (hvx*) — kun transform + opacity ── */
@keyframes hvxPageIn{ from{opacity:0} to{opacity:1} }
@keyframes hvxRise{ from{opacity:0; transform:translate3d(0,18px,0)} to{opacity:1; transform:none} }
@keyframes hvxRiseSm{ from{opacity:0; transform:translate3d(0,10px,0)} to{opacity:1; transform:none} }
@keyframes hvxTitle{ /* SYSTEMETS ENESTE blur — ett heroelement per side, kun desktop */
  from{ opacity:0; transform:translate3d(0,16px,0) scale(.985); filter:blur(8px) }
  60%{ filter:blur(0) }
  to{ opacity:1; transform:none; filter:blur(0) }
}
@keyframes hvxTitleLite{ /* mobil-variant — identisk bevegelse, ingen blur */
  from{ opacity:0; transform:translate3d(0,16px,0) scale(.985) }
  to{ opacity:1; transform:none }
}
@keyframes hvxFade{ from{opacity:0} to{opacity:1} }
@keyframes hvxLine{ from{opacity:0; transform:scaleX(0)} to{opacity:1; transform:scaleX(1)} }
@keyframes hvxFlare{
  0%{ opacity:0; transform:translateY(-14px) }
  40%{ opacity:1 }
  100%{ opacity:0; transform:translateY(0) }
}
@keyframes hvxPageOut{ to{ opacity:0; transform:translate3d(0,-6px,0) } }

/* Wrapper: ren fade — barna eier egen translate/scale (ingen kompounding) */
body .page-content{ animation: hvxPageIn .4s var(--ease-soft) both; }

/* Atmosphere-flare: kort aksentlys bak toppen av siden.
   60vh (ikke 100vh) og 1,0 s (ikke 1,6 s) — og laget FJERNES helt av
   body.hv-entered når entreen er over. */
body .page-content::before{
  content:"";
  position:fixed; left:0; right:0; top:0; height:60vh;
  pointer-events:none; z-index:-1;
  background:radial-gradient(60% 55% at 50% 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 70%);
  opacity:0;
  animation: hvxFlare 1s var(--ease-soft) both .05s;
}
body.hv-entered .page-content::before{ content:none; }

/* Slutt-tilstand: når entreen er over (eller siden lastes i en skjult
   fane og hopper rett hit), skal ingen entrance-elementer stå og vente
   på opacity:0. animation:none + opacity:1 = identisk med fill-forwards-
   sluttbildet for synlige faner, og øyeblikkelig synlig innhold for
   faner som åpnes i bakgrunnen. Treffer KUN entrance-elementene —
   ikke UI-keyframes (budflash, spark-pulse osv.).
   Tittelen må med: blur-animasjonen (hvxTitle) blir stående med fill:both og filter
   på h1. Tegnes siden på nytt med ny visningsstørrelse (målt med skjermbilde av hele
   siden) forsvinner tittelen, med opacity:1 og blur(0) i stilen. Uten animasjon: ingen feil. */
body.hv-entered .page-content .cat-hero h1,
body.hv-entered .page-content .cat-hero h2,
body.hv-entered .page-content .page-hero h1.page-title,
body.hv-entered .page-content .page-hero .page-stat,
body.hv-entered .page-content .cat-grid > .cat-card,
body.hv-entered .page-content section.tools .tool-grid > .tool-card,
body.hv-entered .page-content .veil-grid > .veil-card{ animation:none; opacity:1; }

/* ── Beat 1 · Hero (0-0,55 s) — cat-hero-landings ── */
body .page-content .cat-hero .ch-eyebrow{ animation: hvxRiseSm .5s var(--ease-soft) both .04s; }
body .page-content .cat-hero h1,
body .page-content .cat-hero h2{ animation: hvxTitle .7s var(--ease-soft) both .10s; }
body .page-content .cat-hero .ch-sub{ animation: hvxRiseSm .5s var(--ease-soft) both .20s; }

/* ── Beat 1 · Hero-fallback (page-hero) ── */
body .page-content .page-hero .page-eyebrow{ animation: hvxRiseSm .5s var(--ease-soft) both .04s; }
body .page-content .page-hero h1.page-title{ animation: hvxTitle .7s var(--ease-soft) both .10s; }
body .page-content .page-hero .page-lead{ animation: hvxRiseSm .5s var(--ease-soft) both .20s; }
body .page-content .page-hero .page-stats{ animation: hvxRise .5s var(--ease-soft) both .28s; }
body .page-content .page-hero .page-stat{ animation: hvxFade .4s var(--ease-soft) both; opacity:0; }
body .page-content .page-hero .page-stat:nth-child(1){ animation-delay:.32s }
body .page-content .page-hero .page-stat:nth-child(2){ animation-delay:.38s }
body .page-content .page-hero .page-stat:nth-child(3){ animation-delay:.44s }
body .page-content .page-hero .page-stat:nth-child(4){ animation-delay:.50s }

/* ── Beat 2 · Grids (0,30-1,19 s) ── */
body .page-content .calc-deck > .col-head,
body .page-content section.tools > .container > .col-head{ animation: hvxRiseSm .5s var(--ease-soft) both .30s; }

/* Kategori-grid — 45 ms stagger (før: 120 ms, start 1,12 s) */
body .page-content .cat-grid > .cat-card{ animation: hvxRise .5s var(--ease-soft) both; opacity:0; }
body .page-content .cat-grid > .cat-card:nth-child(1){ animation-delay:.38s }
body .page-content .cat-grid > .cat-card:nth-child(2){ animation-delay:.42s }
body .page-content .cat-grid > .cat-card:nth-child(3){ animation-delay:.47s }
body .page-content .cat-grid > .cat-card:nth-child(4){ animation-delay:.51s }
body .page-content .cat-grid > .cat-card:nth-child(5){ animation-delay:.56s }
body .page-content .cat-grid > .cat-card:nth-child(6){ animation-delay:.60s }
body .page-content .cat-grid > .cat-card:nth-child(7){ animation-delay:.65s }
body .page-content .cat-grid > .cat-card:nth-child(n+8){ animation-delay:.69s }

/* Tool-grid — samme takt */
body .page-content section.tools .tool-grid > .tool-card{ animation: hvxRise .5s var(--ease-soft) both; opacity:0; }
body .page-content section.tools .tool-grid > .tool-card:nth-child(1){ animation-delay:.38s }
body .page-content section.tools .tool-grid > .tool-card:nth-child(2){ animation-delay:.42s }
body .page-content section.tools .tool-grid > .tool-card:nth-child(3){ animation-delay:.47s }
body .page-content section.tools .tool-grid > .tool-card:nth-child(4){ animation-delay:.51s }
body .page-content section.tools .tool-grid > .tool-card:nth-child(5){ animation-delay:.56s }
body .page-content section.tools .tool-grid > .tool-card:nth-child(6){ animation-delay:.60s }
body .page-content section.tools .tool-grid > .tool-card:nth-child(n+7){ animation-delay:.65s }

/* Referansepanel + budsjett-hero */
body .page-content .ref-col{ animation: hvxRiseSm .5s var(--ease-soft) both .55s; }
body .page-content .bud-hero{ animation: hvxRise .55s var(--ease-soft) both .45s; }

/* ── Beat 3 · Veiledning (0,55-1,20 s) ── */
body .page-content .veil-section{ animation: hvxFade .4s var(--ease-soft) both .55s; }
body .page-content .veil-section .col-head{ animation: hvxRiseSm .45s var(--ease-soft) both .58s; }
body .page-content .veil-grid > .veil-card{ animation: hvxRise .4s var(--ease-soft) both; opacity:0; }
body .page-content .veil-grid > .veil-card:nth-child(1){ animation-delay:.60s }
body .page-content .veil-grid > .veil-card:nth-child(2){ animation-delay:.64s }
body .page-content .veil-grid > .veil-card:nth-child(3){ animation-delay:.68s }
body .page-content .veil-grid > .veil-card:nth-child(4){ animation-delay:.72s }
body .page-content .veil-grid > .veil-card:nth-child(5){ animation-delay:.76s }
body .page-content .veil-grid > .veil-card:nth-child(n+6){ animation-delay:.80s }

/* Below-fold-optimalisering: hopp over layout/paint for veiledningen
   til den nærmer seg viewport. «auto 640px» = husk målt høyde etter
   første render → ingen scrollbar-hopp ved gjenbesøk. */
body .page-content .veil-section{ content-visibility:auto; contain-intrinsic-size:auto 640px; }

/* Exit — fyres av JS via .is-leaving ved fanebytte (blur fjernet) */
body .page-content.is-leaving{ animation: hvxPageOut .28s var(--ease-glide) forwards; pointer-events:none; }

/* Mobil (<768 px): dropp systemets ene blur også — samme bevegelse */
@media (max-width:767px){
  body .page-content .cat-hero h1,
  body .page-content .cat-hero h2,
  body .page-content .page-hero h1.page-title{ animation-name: hvxTitleLite; }
}

/* Reduced motion: alt statisk, flare-laget lages aldri */
@media (prefers-reduced-motion: reduce){
  body .page-content,
  body .page-content *{ animation:none !important; opacity:1 !important; transform:none !important; }
  body .page-content::before{ content:none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL SCROLL-YTELSE — «animasjonen henger igjen» (2026-08-04)
   Symptom: på telefon hakket scrollen og bakgrunnen slepte etter
   innholdet — på ALLE temaer, altså ikke WebGL-nordlyset alene
   (det er av på carbon og de lyse temaene).
   Tre kilder, alle kun aktuelle på små skjermer:
     1. De sticky barene har backdrop-filter:blur(). Et blur-lag må
        re-sample HELE siden bak seg for hver scroll-frame — den
        dyreste operasjonen som finnes under scroll på en mobil-GPU,
        og den som gir «bakgrunnen henger etter»: blur-laget rekker
        ikke å følge innholdet som glir under det. Samme innsikt som
        PAGE-ENTRY v2 over (~linje 657), nå brukt på det permanente
        laget og ikke bare på entré-flaren. Siden 18.08.2026 er blurren
        borte på alle bredder — se grunnregelen, ikke her.
     2. Lagene bak alt er inset:0 på position:fixed. Når adresselinja
        skjules ved scroll NED vokser viewporten → hele stabelen får
        ny høyde og må legges om + tegnes på nytt midt i scrollen.
        100lvh = «stor viewport», konstant uansett adresselinje.
        Gjelder også #nordlysCanvas: uten dette fyrer ResizeObserver
        og reallokerer WebGL-teksturen akkurat idet du scroller ned.
     3. Kornlaget er allerede nede i 2 % opacity på mobil — usynlig på
        en telefonskjerm — men koster et fullskjerms SVG-turbulens-
        filter med mix-blend-mode:overlay på et fixed lag.
   Auroraen selv står urørt — kun kostnaden er fjernet.
   body-prefiks slår landingssidenes inline-kopier (0,1,1 > 0,1,0).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* 1 — flyttet ut herfra (~linje 116): barene er nå ugjennomsiktige og
     blurfrie på alle bredder, så mobil trenger ingen egen versjon. */

  /* 2 — fast høyde, så adresselinja kan skjules uten omlegging.
     height vinner over bottom når top+height+bottom alle er satt, så
     inset:0 blir stående som fallback uten lvh-støtte. */
  body .atmo-base,
  body .atmo,
  body #nordlysCanvas{ height:100lvh; }

  /* 3 — usynlig på mobil, men dyrt å tegne. Trenger både !important og
     html-prefiks: forsiden/atmo-sidene tvinger display:block!important
     via `body.atmo-on .film-grain` (0,2,1), så vi må over den (0,2,2). */
  html body .film-grain,
  html body.atmo-on .film-grain{ display:none !important; }

  /* Eget kompositor-lag → ingen repaint per scroll-frame. Trygt her:
     .cursor-light er allerede display:none under 1023 px, og .atmo er
     uansett containing block via contain:paint. */
  body .atmo-base,
  body .atmo{ transform:translateZ(0); }
}

/* ═══════════════════════════════════════════════════════════════
   iOS SAFARI ZOOMER PÅ FELT UNDER 16px — OG ZOOMER IKKE UT IGJEN
   Hvert eneste skjemafelt på nettstedet lå på 13–14px, så hvert
   trykk i et felt på iPhone hoppet visningen inn. Målt ved 375px:
   33 felt på personlig/abo, 18 på regnskap/kontantstrom, 12 på
   skatt/inntekt — samtlige under grensen.

   16px gjelder kun under 768px; desktop beholder sin typografi.

   !important er bevisst her. Feltstørrelsen settes lokalt på ~50 sider
   med selektorer som `#fc-fields .fc` (1,1,0) og `.ab-cell select`
   (0,1,1), og de lastes etter denne fila. Uten !important måtte hver
   av de 50 sidene rettes for hånd — og neste kopi ville falt utenfor
   igjen. Ingen side har legitim grunn til mindre enn 16px på mobil.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  body select,
  body textarea{
    font-size:16px !important;
  }

  /* Fanerekka rommer 2 av 10 faner på 360px. Den er allerede en scroller,
     men `scrollbar-width:none` gjorde at ingenting antydet det — rekka så
     bare avkuttet ut. Uttoning mot kanten sier «det er mer her».
     Aktiv fane rulles inn i bildet av top-chrome.js.

     Uttoningen lå fast på høyre side, og bare der. Det ga to utslag som
     begge leste som at rekka oppførte seg ulikt alt etter hvilken vei du dro:
     · Ruller du helt ut, lå siste fane («Kalkyle») fortsatt under uttoningen
       og løste seg opp — den kunne ikke sees hel uansett hvor langt du dro,
       og rekka så avkuttet ut selv når det ikke var mer å hente.
     · Venstre side hadde ingen uttoning i det hele tatt, så der ble fanene
       klippet tvert av midt i ordet.
     top-chrome.js setter nå data-fade-l/-r etter faktisk rulleposisjon, så
     hver kant tones bare når den faktisk skjuler noe.

     --tabs-bleed: scrolleren lå inne i .container sin luft, så en fane
     forsvant en gutter-bredde før skjermkanten og uttoningen døde ut i en
     stripe ensfarget bakgrunn. Negativ margin + samme verdi som polstring
     gir en scroller som går kant til kant, mens første og siste fane
     fortsatt hviler på gutteren når rekka står i ro. Verdien måles av
     top-chrome.js fordi .container har ulik luft per breddetrinn
     (32/16px); uten JS står den på 0px og rekka er som før.

     body-prefiks: 20 sider har egen inline-kopi av `.tabs{…padding:6px 0…}`,
     og inline <style> kommer etter <link> i kaskaden. Uten prefikset ville
     padding-shorthanden deres nullet ut polstringen mens den negative
     marginen ble stående — da hadde rekka stukket ut over skjermkanten. */
  body .tabs{
    margin-inline:calc(var(--tabs-bleed, 0px) * -1);
    padding-inline:var(--tabs-bleed, 0px);
    --fade-l:0px; --fade-r:0px;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),
      #000 calc(100% - var(--fade-r)),transparent);
            mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),
      #000 calc(100% - var(--fade-r)),transparent);
  }
  body .tabs[data-fade-l="1"]{--fade-l:26px}
  body .tabs[data-fade-r="1"]{--fade-r:26px}
}

/* ── Merkevaren i samme størrelse på alle sider (2026-08-07) ──
   Forsiden krympet nav, logo og ordmerke på små skjermer; ingen annen side
   gjorde det. Toppen hoppet derfor fra 55px til 65px — og logoen fra 26px til
   28px — hver gang du klikket deg inn fra forsiden. Verdiene her er forsidens,
   løftet opp i det delte skallet så alle sider følger samme trapp.
   --nav-h følger med, ellers driver fanerekka fra nav-høyden igjen.
   body-prefiks: mange sider har en inline-kopi av `nav{…padding:18px 0}` og
   `.mark{width:28px…}`, og inline <style> kommer etter <link> i kaskaden —
   uten prefikset ville disse sidene ignorert hele blokka. */
@media (max-width:640px){
  :root{--nav-h:55px}
  body nav{padding:14px 0;gap:12px}
  body .nav-wrap nav{min-height:54px}
  body .mark{width:26px;height:26px}
  body .wordmark{font-size:16.5px}
}
@media (max-width:380px){
  :root{--nav-h:53px}
  body .nav-wrap nav{min-height:52px}
  body .mark{width:24px;height:24px}
  body .wordmark{font-size:15.5px}
}

/* ════════ Forklaringene som lukkede nedtrekk (sw v285) ════════
   site-shell.js legger .hvt-dd på hver forklaringsseksjon og en knapp i hodet. Lukket står
   bare hodet igjen, som en rad lik nedtrekkene på /lov/ (.cc-drop): overskrift, én linje
   ingress og et pluss som blir et kryss når den er åpen. Hele raden er knappen. */
.hvt-dd:not(.is-open) > :not(.lrn-head,.lc-head,.hvt-dd-head),.hvt-dd-tail:not(.is-open){display:none!important}
.hvt-dd > :is(.lrn-head,.lc-head,.hvt-dd-head){position:relative;box-sizing:border-box;max-width:none;margin:0;padding:18px 60px 18px 22px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:background .2s var(--ease)}
.hvt-dd > :is(.lrn-head,.lc-head,.hvt-dd-head):hover,.hvt-dd.is-open > :is(.lrn-head,.lc-head,.hvt-dd-head){background:var(--surface-2)}
.hvt-dd > * > :is(.lrn-h2,.lrn-h3,.lc-title),.hvt-dd-head > h2{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.2px}
.hvt-dd > * > :is(.lrn-lede,.lc-intro){margin:0;font-size:14.5px;line-height:1.55}
.hvt-dd:not(.is-open) > * > :is(.lrn-lede,.lc-intro){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}
.hvt-dd > * > .lc-kicker{margin:0 0 2px}
.hvt-dd-btn{position:absolute;inset:0;width:100%;margin:0;padding:0 20px 0 0;display:flex;align-items:center;justify-content:flex-end;background:none;border:0;border-radius:inherit;color:var(--ink3);cursor:pointer;font:inherit}
.hvt-dd-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hvt-dd-chev{font:300 22px/1 var(--font-sans);width:22px;height:22px;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),color .2s var(--ease)}
.hvt-dd.is-open .hvt-dd-chev{transform:rotate(45deg);color:var(--accent)}
/* Lukket: seksjonene ligger tett, uten skillelinjene og luften en åpen forklaring trenger */
.lc-sec.hvt-dd:not(.is-open){padding:8px 0;border-top:0}
.lc-sec.hvt-dd.is-open{padding-top:8px;border-top:0}
.lc-sec.hvt-dd.is-open > .lc-head{margin-bottom:26px}
.lrn-also.hvt-dd{border-top:0;padding-top:0}
@media (max-width:560px){.hvt-dd > :is(.lrn-head,.lc-head,.hvt-dd-head){padding:16px 52px 16px 18px}.hvt-dd-btn{padding-right:14px}}
/* Forklaringsblokka (.lrn) med nedtrekk: radene ligger tett når de er lukket, åpne får luft */
.lrn:has(> .hvt-dd){gap:12px;padding-bottom:40px}
.lrn > .hvt-dd.is-open:not(:first-child),.lrn > .hvt-dd.is-open + *,.lrn > .hvt-dd-tail.is-open{margin-top:28px}
.lrn-faq.hvt-dd.is-open > .lrn-qs{margin-top:-8px}