/* Hverdagsverktøy — site shell (shared by every "X on Site.html" page) */
:root{
  --font-sans:'Inter',system-ui,sans-serif;
  --font-serif:'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);
  --pos:#e6e1d8; --neg:#a8a39a;
  --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}
::selection{background:rgba(200,153,104,.28);color:#fff}
.container{max-width:1180px;margin:0 auto;padding:0 32px}

/* 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) */
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--accent);color:var(--bg);padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none;font-weight:600;font-size:14px}
.skip:focus{left:0;outline:2px solid var(--ink);outline-offset:-4px}

.nav-wrap{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px}
.brand-row{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.mark{width:28px;height:28px;border-radius:5px;background:#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:color-mix(in srgb, var(--bg) 72%, transparent);
  position:sticky;top:64px;z-index:40;backdrop-filter:blur(10px)}
.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(255,255,255,.03)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-7px;height:2px;background:var(--accent)}
.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)}
.page-hero .container{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:end}
.crumb{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--font-sans);
  letter-spacing:0;color:var(--ink3);margin-bottom:18px}
.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(255,255,255,.03);border-color:var(--line-warm);color:var(--ink) !important;transform:translateX(-2px)}
}
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)}
.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}

.calc-wrap{padding:28px 0 24px}
.calc-wrap .container{display:grid;grid-template-columns:1fr 320px;gap:32px;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) */
.calc-wrap .container.howto-wrap,.calc-wrap > .container.howto-wrap{display:block;grid-template-columns:none}
.container.howto-wrap{margin-left:auto;margin-right:auto}
.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)}
.ik-fg{display:flex;flex-direction:column;gap:6px;min-width:0}
.ik-lbl{font:500 12px/1.3 var(--font-sans);color:var(--ink2);
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ik-lbl .cap{font:400 11px/1 var(--font-sans);color:var(--ink4);letter-spacing:0}
.ik-input,.ik-select{
  width:100%;background:rgba(255,255,255,.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(255,255,255,.025);border-color:var(--line-2)}
.ik-select:hover{background-color:rgba(255,255,255,.04);border-color:var(--line-warm)}

/* 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 10.5px/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 11px/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(255,255,255,.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(255,255,255,.025)}
.ik-seg:hover .glyph{opacity:1}
.ik-seg[aria-pressed="true"]{
  background:rgba(200,153,104,.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:11.5px;color:var(--ink3);line-height:1.45}
.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)}
.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 22px;
  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 11px/1 var(--font-sans);letter-spacing:.2px;color:var(--ink3)}
.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 11px/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 28px 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{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(255,255,255,.02)}
.ks-mode[aria-pressed="true"]{background:rgba(200,153,104,.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 11.5px/1.4 var(--font-sans);color:var(--ink3)}

.ks-result{padding:28px 30px 26px;background:transparent;
  display:flex;flex-direction:column;min-width:0;text-align:left;align-items:stretch;position:relative}
.ks-r-eyebrow{font:500 11px/1 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(--ink);
  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;
  font-variant-numeric:tabular-nums lining-nums;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)}
.ks-bar-seg.s-trinn{background:rgba(200,153,104,.55)}
.ks-bar-seg.s-alm{background:rgba(200,153,104,.32)}
.ks-bar-seg.s-trygd{background:rgba(200,153,104,.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;font-variant-numeric:tabular-nums}
.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:11.5px;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 11px/1 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)}
.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 11.5px/1 var(--font-sans);color:var(--ink4);letter-spacing:0}
.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:11px;
  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 11px/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;justify-content:space-between;
  gap:6px 14px;font-size:11.5px;color:var(--ink3)}
.ks-r-sources .src{color:var(--ink3)}
.ks-r-sources .dot{display:none}
.ks-r-sources .upd{margin-left:auto;color:var(--ink4);font-size:11.5px}
.ks-r-sources .upd em{color:var(--ink3);font-style:normal;font-family:var(--font-sans);
  letter-spacing:0;margin-left:4px}

.ks-import{margin:0;padding:14px 32px;
  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(255,255,255,.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)}

@media (max-width:1024px){
  .calc-wrap .container{grid-template-columns:1fr}
  .side-col{position:static}
  .page-hero .container{grid-template-columns:1fr}
}
@media (max-width:768px){
  .ks-body{grid-template-columns:1fr}
  .ks-form{border-right:none;border-bottom:1px solid var(--line)}
  .ks-strip{grid-template-columns:repeat(2,1fr)}
}

/* ── 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(200,153,104,.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(255,255,255,.06);border-radius:5px;
  border:2px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{background:rgba(217,119,87,.35);background-clip:padding-box;border:2px solid transparent}
*::-webkit-scrollbar-corner{background:transparent}
html{scrollbar-color:rgba(255,255,255,.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.
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper does the soft fade only — no transform, so children own their
   own translate/blur/scale without compounding. */
.page-content{ animation: pageIn .65s var(--ease-soft) both; }
@keyframes pageIn{ from{opacity:0} to{opacity:1} }

/* Atmosphere flourish: accent light flares briefly behind the new page,
   then settles. Anchored on .page-content so it re-fires per load. */
.page-content::before{
  content:"";
  position:fixed;left:0;right:0;top:0;height:100vh;
  pointer-events:none;z-index:-1;
  background:radial-gradient(60% 40% at 50% 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 70%);
  opacity:0;
  animation: pageFlare 1.6s var(--ease-soft) both .05s;
}
@keyframes pageFlare{
  0%{ opacity:0; transform:translateY(-20px) }
  35%{ opacity:1 }
  100%{ opacity:0; transform:translateY(0) }
}

@keyframes hvRise{
  from{ opacity:0; transform:translate3d(0,28px,0); filter:blur(6px) }
  60%{ filter:blur(0) }
  to{ opacity:1; transform:none; filter:blur(0) }
}
@keyframes hvRiseSm{
  from{ opacity:0; transform:translate3d(0,14px,0); filter:blur(3px) }
  to{ opacity:1; transform:none; filter:blur(0) }
}
@keyframes hvTitle{
  from{ opacity:0; transform:translate3d(0,20px,0) scale(.96); filter:blur(14px) }
  55%{ filter:blur(0) }
  to{ opacity:1; transform:none; filter:blur(0) }
}
@keyframes hvFade{ from{opacity:0} to{opacity:1} }
@keyframes hvLine{ from{opacity:0; transform:scaleX(0)} to{opacity:1; transform:scaleX(1)} }

/* ── Hero (categorized landings — cat-hero) ── */
.page-content .cat-hero .ch-eyebrow{ animation: hvRiseSm .9s var(--ease-soft) both .15s; }
.page-content .cat-hero h2{ animation: hvTitle 1.3s var(--ease-soft) both .28s; }
.page-content .cat-hero .ch-sub{ animation: hvRiseSm .95s var(--ease-soft) both .50s; }
.page-content .cat-hero .ch-feats{ animation: hvLine 1.1s var(--ease-soft) both .68s; transform-origin:center top; }
.page-content .cat-hero .ch-feat{ animation: hvRise 1s var(--ease-soft) both; opacity:0; }
.page-content .cat-hero .ch-feat:nth-child(1){ animation-delay:.82s }
.page-content .cat-hero .ch-feat:nth-child(2){ animation-delay:.94s }
.page-content .cat-hero .ch-feat:nth-child(3){ animation-delay:1.06s }

/* ── Hero (fallback page-hero layout) ── */
.page-content .page-hero .page-eyebrow{ animation: hvRiseSm .85s var(--ease-soft) both .15s; }
.page-content .page-hero h1.page-title{ animation: hvTitle 1.3s var(--ease-soft) both .28s; }
.page-content .page-hero .page-lead{ animation: hvRiseSm .95s var(--ease-soft) both .52s; }
.page-content .page-hero .page-stats{ animation: hvRise 1s var(--ease-soft) both .68s; }
.page-content .page-hero .page-stat{ animation: hvFade .7s var(--ease-soft) both; opacity:0; }
.page-content .page-hero .page-stat:nth-child(1){ animation-delay:.82s }
.page-content .page-hero .page-stat:nth-child(2){ animation-delay:.92s }
.page-content .page-hero .page-stat:nth-child(3){ animation-delay:1.02s }
.page-content .page-hero .page-stat:nth-child(4){ animation-delay:1.12s }

/* Section header above the grid */
.page-content .calc-deck > .col-head,
.page-content section.tools > .container > .col-head{ animation: hvRiseSm .85s var(--ease-soft) both 1.00s; }

/* Category grid (large cards) — slower cascade, ~120ms apart */
.page-content .cat-grid > .cat-card{ animation: hvRise 1s var(--ease-soft) both; opacity:0; }
.page-content .cat-grid > .cat-card:nth-child(1){ animation-delay:1.12s }
.page-content .cat-grid > .cat-card:nth-child(2){ animation-delay:1.24s }
.page-content .cat-grid > .cat-card:nth-child(3){ animation-delay:1.36s }
.page-content .cat-grid > .cat-card:nth-child(4){ animation-delay:1.48s }
.page-content .cat-grid > .cat-card:nth-child(5){ animation-delay:1.60s }
.page-content .cat-grid > .cat-card:nth-child(6){ animation-delay:1.72s }
.page-content .cat-grid > .cat-card:nth-child(7){ animation-delay:1.84s }
.page-content .cat-grid > .cat-card:nth-child(n+8){ animation-delay:1.96s }

/* Tool grid — ~90ms apart */
.page-content section.tools .tool-grid > .tool-card{ animation: hvRise .95s var(--ease-soft) both; opacity:0; }
.page-content section.tools .tool-grid > .tool-card:nth-child(1){ animation-delay:1.12s }
.page-content section.tools .tool-grid > .tool-card:nth-child(2){ animation-delay:1.21s }
.page-content section.tools .tool-grid > .tool-card:nth-child(3){ animation-delay:1.30s }
.page-content section.tools .tool-grid > .tool-card:nth-child(4){ animation-delay:1.39s }
.page-content section.tools .tool-grid > .tool-card:nth-child(5){ animation-delay:1.48s }
.page-content section.tools .tool-grid > .tool-card:nth-child(6){ animation-delay:1.57s }
.page-content section.tools .tool-grid > .tool-card:nth-child(n+7){ animation-delay:1.66s }

/* Reference panel (right-side card on tool-grid pages) */
.page-content .ref-col{ animation: hvRiseSm .95s var(--ease-soft) both 1.20s; }

/* Veiledning — lands after the main grid has settled */
.page-content .veil-section{ animation: hvFade .8s var(--ease-soft) both 1.65s; }
.page-content .veil-section .col-head{ animation: hvRiseSm .75s var(--ease-soft) both 1.70s; }
.page-content .veil-grid > .veil-card{ animation: hvRise .85s var(--ease-soft) both; opacity:0; }
.page-content .veil-grid > .veil-card:nth-child(1){ animation-delay:1.78s }
.page-content .veil-grid > .veil-card:nth-child(2){ animation-delay:1.86s }
.page-content .veil-grid > .veil-card:nth-child(3){ animation-delay:1.94s }
.page-content .veil-grid > .veil-card:nth-child(4){ animation-delay:2.02s }
.page-content .veil-grid > .veil-card:nth-child(5){ animation-delay:2.10s }
.page-content .veil-grid > .veil-card:nth-child(6){ animation-delay:2.18s }

/* Budget hero (Personlig) — slides in below the hero trio */
.page-content .bud-hero{ animation: hvRise 1.1s var(--ease-soft) both .95s; }

/* Exit — fired by JS via .is-leaving on tab switch (optional, phase 2) */
.page-content.is-leaving{ animation: pageOut .32s var(--ease-glide) forwards; pointer-events:none; }
@keyframes pageOut{
  from{ opacity:1; transform:none; filter:blur(0) }
  to{ opacity:0; transform:translate3d(0,-8px,0) scale(.995); filter:blur(4px) }
}

@media (prefers-reduced-motion: reduce){
  .page-content,
  .page-content *{ animation:none !important; opacity:1 !important; transform:none !important; }
}