/* Loans in Norway, forsidemockup 07.10.2026. Alle verdier er tokens i :root; komponentene bruker bare tokens.
   Identitet: hvit side, granfarge som eneste aksent, kjølig granskjær på panelene, strektegninger,
   Source Serif 4 i titler, hovedtall og norske ord, Public Sans i resten. */

@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-wght-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;

  /* Farger. Panelet er kjølig grantonet (165°, lyshet 96,5 %). */
  --bg:#FFFFFF;
  --panel:#F4F9F7;
  --track:#DCE8E4;
  --line:#D3DDD9;
  --line-strong:#7B8985;
  --ink:#1B2129;
  --ink-soft:#3F4852;
  --muted:#56606A;
  --bar:#3F4852;
  --accent:#2B6558;
  --accent-tint:#E2EFEA;
  --on-accent:#FFFFFF;
  --focus:#2B6558;
  --shadow:0 1px 2px rgb(27 33 41 / .06),0 6px 16px -4px rgb(27 33 41 / .10);
  /* ID-kortene i toppen: grått D-nummer, grønt fødselsnummer, samme strek som resten av illustrasjonene */
  --card-grey:#ECEFEE;
  --card-green:#C6E2D5;
  --card-shadow:0 1px 2px rgb(27 33 41 / .06),0 12px 28px -10px rgb(27 33 41 / .22);

  /* Typografi: tre grader over folden (hovedtall, visning, brødtekst) */
  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-hero:clamp(2rem,10.5vw,2.75rem); --lh-hero:1.05;
  --t-lead:1.25rem;    --lh-lead:1.75rem;
  --t-num:4rem;        --lh-num:.82;
  --t-display:1.5rem;  --lh-display:1.75rem;
  --t-h2:1.5rem;       --lh-h2:1.875rem;
  --t-h3:1.125rem;     --lh-h3:1.5rem;
  --t-body:1rem;       --lh-body:1.5rem;
  --t-small:.875rem;   --lh-small:1.25rem;
  --w-regular:400; --w-medium:500; --w-strong:600;

  /* Avstand: 4 px-skala */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem;
  --gutter:1rem;
  --col-gap:1.5rem;
  --section-pad:2.5rem;

  /* Former */
  --radius-sm:.25rem;
  --radius:.5rem;
  --radius-lg:.875rem;
  --stroke:1.5;
  --stroke-px:1.5px;
  --ring:2px;
  --focus-offset:3px;
  --measure:40rem;
  --target:2.75rem;
  --header-h:3.25rem;
  --nav-h:3.25rem;
  --icon:1.25rem;
  --bar-h:.625rem;
  --row-h:auto;
  --plot-h:6.5rem;
  --age-max:45;
  --lenders:55;
  --logo-h:2.875rem;
  --brick-h:1.375rem;

  /* Bevegelse: en gest per figur, bare transform og opacity */
  --ease:cubic-bezier(.2,0,0,1);
  --t-press:120ms;
  --t-state:180ms;
  --t-swap:200ms;
  --t-move:250ms;
  --t-grow:500ms;
  --t-cols:450ms;
  --t-brick:400ms;
  --stagger:50ms;
  --t-card:580ms;
  --t-card-fade:240ms;
  --card-lag:70ms;
  --t-link:400ms;
  --stagger-link:60ms;
  --nudge:4px;
  --press:.985;

  --z-sticky:20;
  --z-menu:40;
}
@media (min-width:48em){
  :root{--gutter:2rem;--t-hero:clamp(2.75rem,5.2vw,4.5rem);--lh-hero:1.02;--t-lead:1.375rem;--lh-lead:2rem;--t-num:5rem;--t-display:1.75rem;--lh-display:2.125rem;--t-h2:1.625rem;--lh-h2:2rem;--section-pad:4.5rem;--brick-h:1.75rem;--plot-h:8rem}
}
@media (min-width:64em){
  :root{--t-lead:1.5rem;--lh-lead:2.125rem;--t-num:6rem;--t-display:2rem;--lh-display:2.375rem;--t-h2:2rem;--lh-h2:2.375rem;--t-h3:1.1875rem;--lh-h3:1.625rem;--t-body:1.0625rem;--lh-body:1.625rem;--header-h:3.75rem;--row-h:6rem;--bleed:clamp(1.25rem,(100vw - 75rem) / 2 + 1.25rem,2rem);--section-pad:5.5rem;--plot-h:9rem}
}

/* ---------- Grunnlag ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + var(--s4));scrollbar-color:var(--line-strong) var(--bg);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--w-regular) var(--t-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
::selection{background:var(--accent-tint);color:var(--ink)}
img,svg{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:var(--w-strong);color:var(--ink);text-wrap:balance}
a{color:var(--ink);text-decoration-line:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:.22em}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration-color:var(--accent);text-decoration-thickness:2px}}
:focus-visible{outline:var(--ring) solid var(--focus);outline-offset:var(--focus-offset);border-radius:var(--radius-sm)}
.wrap{width:100%;max-width:75rem;margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.icon{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:var(--s2);z-index:var(--z-menu);padding:var(--s3) var(--s4);background:var(--ink);color:var(--bg);transform:translateY(-200%)}
.skip:focus{transform:none}
.ph{font-style:italic;color:var(--muted)}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0}

/* Norske ord: serif kursiv i samme grad og farge som teksten rundt. Den røde tråden på siden. */
.nb-word{font-family:var(--serif);font-style:italic;font-weight:var(--w-regular)}

/* Lenker i løpende tekst får 44 px trykkflate uten å endre linjeavstanden */
.text-link{padding-block:.8125rem;overflow-wrap:anywhere}

/* ---------- Topptekst ---------- */
.site-header{position:relative;background:var(--bg)}
.header-inner{display:flex;align-items:center;justify-content:space-between;column-gap:var(--s6);min-height:var(--header-h)}
.wordmark{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--target);font:var(--w-strong) var(--t-body)/1 var(--serif);color:var(--ink);text-decoration:none}
.mark{width:1.375rem;height:1.375rem;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mark circle{fill:var(--accent);stroke:none}
.main-nav{display:none}
.main-nav ul,.menu ul{list-style:none;margin:0;padding:0}
.menu summary{display:flex;align-items:center;gap:var(--s2);min-height:var(--target);min-width:var(--target);margin-right:calc(-1 * var(--s2));padding-inline:var(--s2);border-radius:var(--radius);font:var(--w-strong) var(--t-body)/1 var(--sans);color:var(--ink);cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--panel)}
.menu nav{position:absolute;left:0;right:0;top:100%;z-index:var(--z-menu);background:var(--bg);box-shadow:var(--shadow);padding:var(--s2) var(--gutter) var(--s4)}
.menu nav a{display:flex;align-items:center;min-height:var(--target);text-decoration:none}
@media (min-width:64em){
  .menu{display:none}
  .main-nav{display:block}
  .main-nav ul{display:flex;gap:var(--s1)}
  .main-nav a{display:inline-flex;align-items:center;min-height:var(--target);padding-inline:var(--s3);border-radius:var(--radius);color:var(--ink-soft);text-decoration:none}
}
@media (min-width:64em) and (hover:hover) and (pointer:fine){.main-nav a:hover{color:var(--ink);background:var(--panel)}}

/* ---------- Toppen: tekst til venstre, illustrasjon til høyre, fyller første skjerm ----------
   Tre tekststørrelser: tittelen, ingressen (samme grad som ordene på kortene) og brødtekst (knapp og stempel).
   Toppen er minst like høy som skjermen under toppteksten, så svaret med tallet begynner rett under folden. */
/* overflow-x:clip: kortenes starttilstand i introen skal aldri gi sidelengs rulling på smale skjermer */
.hero{display:grid;padding-block:var(--s6) var(--s10);overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;row-gap:var(--s6)}
.hero-text{display:grid;row-gap:var(--s4);justify-items:start}
.hero-title{font-size:var(--t-hero);line-height:var(--lh-hero);font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.hero-title span{display:block}
.hero-lead{max-width:34rem;font:var(--w-regular) var(--t-lead)/var(--lh-lead) var(--sans);color:var(--ink-soft);text-wrap:balance}
.hero-action{margin-top:var(--s2)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:var(--s3) var(--s6);border-radius:var(--radius);background:var(--ink);color:var(--on-accent);font:var(--w-strong) var(--t-body)/1.25 var(--sans);text-align:center;text-decoration:none;transition:transform var(--t-press) var(--ease)}
.button:active{transform:scale(var(--press))}
@media (hover:hover) and (pointer:fine){.button:hover{background:var(--accent)}}

/* Illustrasjonen: to ID-kort som overlapper, litt skjeve. Bare grafikken skaleres; ordene har faste størrelser. */
.hero-art{position:relative;align-self:center;justify-self:center;width:100%;max-width:21rem;aspect-ratio:5 / 4;container-type:inline-size}
.id-card{position:absolute;width:68%;aspect-ratio:8 / 5;border-radius:4.5cqw;box-shadow:inset 0 0 0 var(--stroke-px) var(--line-strong),var(--card-shadow)}
.id-card.is-d{left:0;top:4%;background:var(--card-grey);transform:rotate(-6deg)}
.id-card.is-f{right:0;bottom:6%;background:var(--card-green);box-shadow:inset 0 0 0 var(--stroke-px) var(--accent),var(--card-shadow);transform:rotate(3deg)}
.id-face{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--line-strong);stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round}
.id-face *{vector-effect:non-scaling-stroke}
.id-face .id-photo,.id-face .id-digits rect{fill:var(--bg)}
.is-f .id-face{stroke:var(--accent)}
.id-word{position:absolute;left:7%;top:7.5%;font:italic var(--w-regular) var(--t-lead)/1.2 var(--serif);color:var(--ink);white-space:nowrap}
.stamp{position:absolute;right:7%;top:30%;padding:var(--s1) var(--s2);border:3px double var(--ink-soft);border-radius:var(--radius);background:var(--card-grey);font:var(--w-strong) var(--t-body)/1.25 var(--sans);color:var(--ink);white-space:nowrap;font-variant-numeric:lining-nums;transform:rotate(-8deg)}

@media (min-width:48em){
  .hero{align-items:center;padding-block:var(--s16) var(--s12)}
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto;column-gap:var(--col-gap);align-items:center}
  .hero-text{grid-column:1 / 8;row-gap:var(--s5)}
  .hero-art{grid-column:8 / 13;max-width:32rem;justify-self:end}
  .hero-action{margin-top:var(--s3)}
}

/* Svaret og kravtavlen: første seksjon under folden */
.answer-block{padding-block:var(--s6) var(--s10)}
.answer-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s3)}
.answer-summary{display:grid;row-gap:var(--s3);min-width:0}
.answer-caveats{display:grid;row-gap:var(--s1);color:var(--ink-soft);text-wrap:pretty}

/* Svaret: ett hovedtall og hva det betyr, side om side */
.answer{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s4);align-items:center}
.answer-num{font:var(--w-strong) var(--t-num)/var(--lh-num) var(--serif);color:var(--accent);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.answer-text{font:var(--w-medium) var(--t-lead)/var(--lh-lead) var(--sans);letter-spacing:-.01em;text-wrap:balance}
.answer-text a{display:inline-block;min-height:44px;padding-block:.625rem;line-height:1.5rem;white-space:nowrap;text-decoration-color:var(--accent);text-decoration-thickness:2px}

/* Kravtavlen: tre valg for situasjonen og tre krav som stolper */
.board{position:relative;isolation:isolate;margin-top:var(--s5);padding:var(--s4);display:grid;row-gap:var(--s5)}
.board::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius-lg);background:var(--panel)}
.board-head{display:block;margin:0 0 var(--s2);font:var(--w-strong) var(--t-body)/var(--lh-body) var(--sans);color:var(--ink)}

.sits{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s2)}
.sit{position:relative;display:flex;align-items:center;gap:var(--s2);min-height:var(--target);padding:var(--s2) var(--s4) var(--s2) var(--s3);border-radius:var(--radius);background:var(--bg);box-shadow:inset 0 0 0 var(--stroke-px) var(--line-strong);font:var(--w-medium) var(--t-body)/1.25 var(--sans);color:var(--ink);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform var(--t-press) var(--ease)}
.sit::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent-tint);box-shadow:inset 0 0 0 var(--ring) var(--accent);opacity:0;transition:opacity var(--t-state) var(--ease)}
.sit>*{position:relative}
.sit input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sit::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 var(--stroke-px) var(--ink);opacity:0;pointer-events:none;transition:opacity var(--t-press) var(--ease)}
.sit:active{transform:scale(var(--press))}
.sit:has(input:focus-visible){outline:var(--ring) solid var(--focus);outline-offset:var(--focus-offset)}
.sit:has(input:checked)::before{opacity:1}
.sit-box{display:grid;place-items:center;flex:none;width:1.25rem;height:1.25rem;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 var(--stroke-px) var(--line-strong);background:var(--bg)}
.sit-box::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:0;transition:opacity var(--t-state) var(--ease)}
.sit-box svg{position:relative;width:1rem;height:1rem;fill:none;stroke:var(--on-accent);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.sit-box svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t-press) var(--ease)}
.sit:has(input:checked) .sit-box svg path{stroke-dashoffset:0;transition-duration:var(--t-state)}
.sit:has(input:checked) .sit-box::before{opacity:1}
.sit-ill{flex:none;width:1.5rem;height:1.5rem;fill:none;stroke:var(--ink);stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.sit:hover::after{opacity:1}}

.reqs{margin:0;min-width:0}
.req-list{list-style:none;margin:0;padding:0;display:grid;row-gap:var(--s2)}
.req{--on:0;position:relative;padding:var(--s3) var(--s3) var(--s2)}
.req::before,.req::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius);background:var(--bg)}
.req::before{opacity:.7}
.req::after{box-shadow:var(--shadow);opacity:var(--on);transition:opacity var(--t-swap) var(--ease)}
.req>*{position:relative}
.sits{position:relative}
.req-label-wrap{font-weight:var(--w-medium)}
.req-line{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s2)}
.req-label{display:inline-flex;align-items:center;padding-block:.625rem;margin-block:-.625rem;font-weight:var(--w-medium)}
.req-count{font:var(--w-strong) var(--t-body)/1 var(--sans);font-variant-numeric:tabular-nums lining-nums;min-width:2ch;text-align:right}
.bar{display:block;height:var(--bar-h);border-radius:var(--radius-sm);background:var(--track);overflow:hidden}
.bar i{position:relative;display:block;height:100%;width:calc(var(--n) / var(--lenders) * 100%);border-radius:inherit;background:var(--bar)}
.bar i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:var(--on,0);transition:opacity var(--t-swap) var(--ease)}
.req-nb{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s2);color:var(--ink-soft)}
.req-check{display:inline-flex;align-items:center;gap:var(--s1);flex:none;font-weight:var(--w-strong);color:var(--accent);opacity:var(--on);visibility:hidden;transform:translateX(calc((1 - var(--on)) * var(--nudge)));transition:opacity var(--t-swap) var(--ease),transform var(--t-swap) var(--ease),visibility 0s linear var(--t-swap)}
.board:has(#s-id:checked) .req[data-req="id"] .req-check,
.board:has(#s-address:checked) .req[data-req="address"] .req-check,
.board:has(#s-new:checked) .req[data-req="new"] .req-check{visibility:visible;transition-delay:0s}
.req-pre{display:none}
@media (max-width:47.99em){
  /* Telefon: hele linjen «Look for fødselsnummer» kommer når situasjonen er valgt */
  .req-pre{display:inline;font-weight:var(--w-strong);color:var(--accent);white-space:pre}
  .req-check{display:none}
  .req{padding-block:var(--s3) var(--s1)}
  .req-nb{display:block;margin-top:var(--s1);min-height:1.25rem;line-height:1.25rem;opacity:var(--on);transform:translateY(calc((1 - var(--on)) * -1 * var(--nudge)));transition:opacity var(--t-swap) var(--ease),transform var(--t-swap) var(--ease)}
}
.req-check svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.board:has(#s-id:checked) .req[data-req="id"],
.board:has(#s-address:checked) .req[data-req="address"],
.board:has(#s-new:checked) .req[data-req="new"]{--on:1}

.fp{display:inline-flex;align-items:center;min-height:var(--target);border-radius:var(--radius-sm)}
.fp img{display:block;width:auto;height:var(--logo-h)}

@media (min-width:64em){
  .answer-block{padding-block:var(--s8) var(--s6)}
  .answer-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s10);align-items:start}
  .answer-summary{grid-column:1 / 9}
  .answer{column-gap:var(--s5);align-items:start}
  .answer-num{margin-top:-.125rem}
  .board{grid-column:1 / -1;grid-template-columns:subgrid;margin-top:0;padding:var(--s10) 0;row-gap:var(--s2)}
  .board::before{inset:0 calc(-1 * var(--bleed))}
  .sits{grid-column:1 / 5;grid-auto-rows:var(--row-h);row-gap:var(--s2);align-content:start;align-items:start}
  .sit{margin-top:0}
  .reqs{grid-column:6 / 13}
  .req{height:var(--row-h)}
  /* Båndet strekker seg bak valget i samme rad: fem kolonner og fem mellomrom til venstre */
  .req{margin-inline:calc(-1 * var(--s3))}
  .req::before,.req::after{left:calc(-1 * ((100% - 2 * var(--s3) - 6 * var(--col-gap)) * 5 / 7 + 5 * var(--col-gap)) + var(--s3) - var(--s4))}
  .sit{min-height:3rem}
}

/* ---------- Seksjoner ---------- */
.section{padding-block:var(--section-pad)}
.section-head{max-width:var(--measure);margin-bottom:var(--s6)}
.section-head h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:-.01em}
.section-lead{margin-top:var(--s3);color:var(--ink-soft);text-wrap:pretty}
@media (min-width:64em){.section-head{margin-bottom:var(--s10)}}

/* Paneler: kjølig flate, ingen hårstreker. To like paneler side om side på desktop. */
.panel{margin:0;padding:var(--s5) var(--s4);border-radius:var(--radius-lg);background:var(--panel)}
.panel-title{display:block;font:var(--w-strong) var(--t-h3)/var(--lh-h3) var(--serif);text-wrap:balance}
.panel-note{margin-top:var(--s3);color:var(--muted)}
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
@media (min-width:48em){.panel{padding:var(--s8)}}
@media (min-width:64em){
  .pair>.panel:first-child,.flowfig,.help{margin-left:calc(-1 * var(--bleed));padding-left:var(--bleed)}
  .pair>.panel:last-child,.flowfig,.help,.sample{margin-right:calc(-1 * var(--bleed));padding-right:var(--bleed)}
  .more{margin-inline:calc(-1 * var(--bleed))}
  .more summary,.more-body{padding-inline:var(--bleed)}
  .how .more{margin-left:calc(-1 * var(--bleed));margin-right:0}
}
@media (min-width:64em){
  .pair{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}
  .pair.is-sub{grid-template-rows:auto 1fr;row-gap:0}
  .pair.is-sub>.panel{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:var(--s4);align-content:start}
}

/* Minstealder: fem søyler, samme skala for lån og kort, bytte med glidning */
.age{display:grid;row-gap:var(--s4)}
.age-body{display:grid;row-gap:var(--s4);align-content:start}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);max-width:100%;justify-self:start;padding:var(--s1);border-radius:var(--radius);background:var(--track)}
.seg::before{content:"";position:absolute;top:var(--s1);bottom:var(--s1);left:var(--s1);width:calc(50% - var(--s1));border-radius:calc(var(--radius) - 2px);background:var(--bg);box-shadow:var(--shadow);transition:transform var(--t-state) var(--ease)}
.seg:has(#age-cards:checked)::before{transform:translateX(100%)}
.seg label{position:relative;display:grid;place-items:center;min-height:var(--target);min-width:0;padding-inline:var(--s4);font-weight:var(--w-medium);text-align:center;text-wrap:balance;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (max-width:22.49em){.req-nb{min-height:2.5rem}}
@media (max-width:22.49em){.seg{justify-self:stretch;grid-auto-columns:minmax(0,1fr)}.seg label{padding-inline:var(--s2);white-space:normal;text-align:center;line-height:1.25}}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg label:has(input:focus-visible){outline:var(--ring) solid var(--focus);outline-offset:1px;border-radius:var(--radius-sm)}
.cols{--v:var(--l);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--s3);align-items:end}
.age:has(#age-cards:checked) .cols .col{--v:var(--c)}
.col{--v:var(--l);display:grid;row-gap:var(--s2);justify-items:stretch;text-align:center}
.age:has(#age-cards:checked) .col{--v:var(--c)}
.col-plot{position:relative;display:block;height:calc(var(--plot-h) + var(--lh-body) + var(--s1))}
.col-bar{position:absolute;left:0;right:0;bottom:0;height:var(--plot-h);overflow:hidden;border-radius:var(--radius-sm) var(--radius-sm) 0 0;box-shadow:0 1px 0 var(--line)}
.col-bar i{position:absolute;inset:0;background:var(--bar);border-radius:var(--radius-sm) var(--radius-sm) 0 0;transform:translateY(calc((1 - var(--v) / var(--age-max)) * 100%));transition:transform var(--t-move) var(--ease)}
.col-n{position:absolute;left:0;right:0;bottom:var(--s1);display:grid;font-weight:var(--w-strong);font-variant-numeric:tabular-nums lining-nums;transform:translateY(calc(var(--v) / var(--age-max) * -1 * var(--plot-h)));transition:transform var(--t-move) var(--ease)}
.col-n>span{grid-area:1 / 1}
.v-c{opacity:0;transform:translateY(calc(var(--dir,1) * var(--nudge)))}
.v-l,.v-c{transition:opacity var(--t-swap) var(--ease),transform var(--t-swap) var(--ease)}
.age:has(#age-cards:checked) .v-l{opacity:0;transform:translateY(calc(-1 * var(--dir,1) * var(--nudge)))}
.age:has(#age-cards:checked) .v-c{opacity:1;transform:none}
.col-age{font-variant-numeric:tabular-nums lining-nums;color:var(--ink-soft)}
.cols-axis{margin-top:calc(-1 * var(--s2));text-align:center;color:var(--ink-soft)}
.age-take{display:grid;font-weight:var(--w-medium);text-wrap:pretty}
.age-take>span{grid-area:1 / 1;transition:opacity 140ms var(--ease) 60ms,visibility 0s linear 0s}
.age-take>.v-c,.age:has(#age-cards:checked) .age-take>.v-l{visibility:hidden;transition:opacity 100ms var(--ease),visibility 0s linear 100ms}
.age:has(#age-cards:checked) .age-take>.v-c{visibility:visible;opacity:1;transform:none;transition:opacity 140ms var(--ease) 60ms,visibility 0s linear 0s}
.panel-foot{display:flex}

/* Andre krav: samme stolpespråk som toppen */
.facts{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
.fact{min-width:0}
.fact-line{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:var(--s3);align-items:baseline}
.fact-n{font:var(--w-strong) var(--t-h3)/1 var(--sans);font-variant-numeric:tabular-nums lining-nums}
.fact-text{text-wrap:pretty}
.fact .bar{margin-top:var(--s2);margin-left:calc(2.5rem + var(--s3))}
.panel-caveat{margin-top:var(--s5);color:var(--ink-soft);text-wrap:pretty}
.fact-nb{margin-top:var(--s1);margin-left:calc(2.5rem + var(--s3));color:var(--ink-soft)}

/* Strektegninger i lånetypene og søknadsflyten: samme strek (1,5 px) uansett skala, ingen fylte flater */
.ill{display:block;flex:none;width:calc(120px * var(--k-ill,1));height:calc(80px * var(--k-ill,1));max-width:none;overflow:visible;fill:none;stroke:var(--ink);stroke-width:calc(var(--stroke) / var(--k-ill,1));stroke-linecap:round;stroke-linejoin:round}

/* ---------- Lånetypene: seks like fliser, 3 × 2 fra nettbrett, delte rader med subgrid ----------
   Telefon (under 30 em): en kolonne med tegningen til venstre. 30–64 em: to, så tre kolonner med tegningen øverst.
   Desktop: tre kolonner med tegningen til venstre. Alle tegningene har samme boks (viewBox 60 × 40, vist 84 × 56),
   samme strek (1,5 px), samme bunnlinje (y = 35) og ingen fylte flater. Sikkerheten er en etikett på en linje;
   pantsikrede lån har granskjær i etiketten, alle andre har samme nøytrale etikett. Teksten er lik i alle. */
/* Luften mellom fliserekkene ligger i flisene (padding), ikke i rutenettets row-gap, som ellers lekker inn mellom radene i subgridet. */
.tiles{--tile-gap:var(--s6);list-style:none;margin:0 0 calc(-1 * var(--tile-gap));padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--s6);row-gap:0}
.tile{grid-row:span 3;display:grid;grid-template-rows:subgrid;grid-template-columns:84px minmax(0,1fr);column-gap:var(--s4);row-gap:0;align-items:center;min-width:0;padding-bottom:var(--tile-gap)}
.tile .ill{--k-ill:1.4;grid-column:1;grid-row:1 / -1;width:84px;height:56px}
.tile-title,.tile-nb,.sec{grid-column:2;min-width:0}
.tile-title{grid-row:1;font:var(--w-strong) var(--t-body)/var(--lh-body) var(--sans)}
.tile-nb{grid-row:2;color:var(--ink-soft)}
.sec{grid-row:3;justify-self:start;margin-top:var(--s2);padding:.125rem var(--s2);border-radius:var(--radius-sm);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font:var(--w-medium) var(--t-small)/var(--lh-small) var(--sans);color:var(--ink);white-space:nowrap}
.sec.is-secured{background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
@media (min-width:30em) and (max-width:63.99em){
  .tiles{--tile-gap:var(--s8);grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{grid-row:span 4;grid-template-columns:minmax(0,1fr);align-items:start}
  .tile .ill{grid-row:1;margin-bottom:var(--s3)}
  .tile-title,.tile-nb,.sec{grid-column:1}
  .tile-title{grid-row:2}
  .tile-nb{grid-row:3}
  .sec{grid-row:4}
}
@media (min-width:45em){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:64em){.tiles{--tile-gap:var(--s10);column-gap:var(--col-gap)}}

/* ---------- Grensene: inntekten som en kloss, gjelden som fem ---------- */
.limit{display:grid;row-gap:var(--s5);align-content:start}
.stack{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:var(--s3);max-width:26rem}
.stack-col{display:grid;grid-row:1 / span 3;grid-template-rows:subgrid;row-gap:var(--s1);min-width:0}
.stack-col:first-child{grid-column:1}
.stack-col:last-child{grid-column:3}
.bricks{display:flex;flex-direction:column-reverse;gap:var(--s1);height:calc(5 * var(--brick-h) + 4 * var(--s1))}
.brick{display:block;flex:none;height:var(--brick-h);border-radius:var(--radius-sm);background:var(--accent-tint);box-shadow:inset 0 0 0 var(--stroke-px) var(--accent)}
.brick.is-income{background:var(--bar);box-shadow:none}
.stack-times{grid-column:2;grid-row:1;align-self:end;margin-bottom:var(--s1);font:var(--w-strong) var(--t-h3)/1.75rem var(--serif);color:var(--accent);white-space:nowrap}
.stack-label{margin-top:var(--s2);font-weight:var(--w-medium)}
.stack-value{color:var(--ink-soft);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.stack-label{text-wrap:balance}

.rules{list-style:none;margin:0;padding:var(--s5) 0 0;display:grid;row-gap:var(--s5);align-content:start}
@media (min-width:64em){.rules{padding:var(--s8) 0 0 var(--s4)}}
.rule{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s2)}
.dia{display:block;width:160px;height:72px;overflow:visible;fill:none;stroke:var(--ink);stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round}
.dia .a{stroke:var(--accent)}
.dia .t{fill:var(--accent-tint)}
.dia .n,.dia .cells rect{stroke:var(--line-strong)}
.dia .fill-a{fill:var(--accent);stroke:var(--accent)}
.dia text{fill:var(--ink-soft);stroke:none;font:var(--w-regular) var(--t-small) var(--sans);font-variant-numeric:tabular-nums lining-nums}
.dia text.ta{fill:var(--accent);font-weight:var(--w-strong)}
.rule-title{font:var(--w-strong) var(--t-body)/var(--lh-body) var(--sans)}
.rule-text{color:var(--ink-soft);text-wrap:pretty}
@media (min-width:40em){
  .rule{grid-template-columns:160px minmax(0,1fr);grid-template-areas:"dia title" "dia text";column-gap:var(--s6);row-gap:var(--s1);align-content:center}
  .rule .dia{grid-area:dia}
  .rule-title{grid-area:title;align-self:end}
  .rule-text{grid-area:text;align-self:start}
}

/* ---------- Søknaden: fem steg ----------
   Under 64 em: stegene loddrett, tegningen midt i en kolonne på 72 px og en rett strek mellom tegningene.
   Desktop: fem steg på en linje og en rett strek midt på tegningenes høyde, fra tegning til tegning.
   Hver tegning er beskåret til sin egen bredde (--w i viewBox-enheter), så streken står 12 px fra hver tegning
   og aldri i tekstradene. Strektegningene har ingen fylte flater; .p dekker bare streker bak seg, i panelfargen. */
.flowfig{display:grid;row-gap:var(--s5)}
.flowfig .ill .p{fill:var(--panel)}
.flow{--flow-gap:var(--s10);list-style:none;margin:0;padding:0;display:grid;row-gap:var(--flow-gap)}
.step{--k-ill:.6;position:relative;display:grid;grid-template-columns:4.5rem minmax(0,1fr);grid-template-areas:"art title" "art nb";column-gap:var(--s4);align-items:start}
.step-art{grid-area:art;display:grid;justify-items:center}
.step .ill{width:calc(var(--w) * var(--k-ill) * 1px);height:calc(80px * var(--k-ill))}
.step-title{grid-area:title;font:var(--w-strong) var(--t-body)/var(--lh-body) var(--sans)}
.step-nb{grid-area:nb;color:var(--ink-soft)}
.step-link{position:absolute;left:calc(2.25rem - var(--stroke-px) / 2);top:calc(80px * var(--k-ill) + var(--s2));bottom:calc(var(--s2) - var(--flow-gap));width:var(--stroke-px);background:var(--line-strong);transform-origin:50% 0}
.flow-lang{max-width:var(--measure);font-weight:var(--w-medium);text-wrap:pretty}
@media (min-width:64em){
  .flow{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,auto);column-gap:var(--s6);row-gap:0}
  .step{--k-ill:.8;grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);grid-template-areas:none;row-gap:var(--s1)}
  .step-art{grid-row:1;grid-column:1;position:relative;justify-items:start;margin-bottom:var(--s4)}
  .step-title{grid-row:2;grid-column:1}
  .step-nb{grid-row:3;grid-column:1}
  .step-link{left:calc(var(--w) * var(--k-ill) * 1px + var(--s3));right:calc(var(--s3) - var(--s6));top:calc(50% - var(--stroke-px) / 2);bottom:auto;width:auto;height:var(--stroke-px);transform-origin:0 50%}
}

/* ---------- Mer bak klikk ---------- */
.more{margin-top:var(--s5);border-radius:var(--radius-lg);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.more summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:3.25rem;padding:var(--s2) var(--s4);font-weight:var(--w-strong);cursor:pointer;list-style:none;border-radius:var(--radius-lg)}
.more summary::-webkit-details-marker{display:none}
.more-icon{color:var(--ink-soft);transition:transform var(--t-state) var(--ease)}
.more[open] .more-icon{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.more summary:hover span{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.22em}}
.more-body{padding:0 var(--s4) var(--s5)}
.more[open] .more-body,.menu[open] nav{animation:panel-in var(--t-swap) var(--ease)}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px)}}
.more-body>*+*{margin-top:var(--s4)}

.data-table{width:100%;border-collapse:collapse}
.data-table caption{margin:var(--s2) 0 var(--s3);text-align:left;font:var(--w-strong) var(--t-h3)/var(--lh-h3) var(--serif)}
.data-table th,.data-table td{padding:var(--s3) var(--s4) var(--s3) var(--s3);text-align:left;vertical-align:top}
.data-table thead th{padding-block:var(--s2);font-weight:var(--w-strong);color:var(--ink-soft)}
.data-table tbody th{font-weight:var(--w-regular)}
.data-table tbody tr:nth-child(odd){background:var(--panel)}
@media (max-width:47.99em){
  .reflow,.reflow tbody,.reflow tr,.reflow th,.reflow td{display:block}
  .reflow caption{display:block}
  .reflow thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .reflow tbody tr{padding:var(--s3)}
  .reflow tbody th,.reflow td{padding:0}
  .reflow td+td{margin-top:var(--s1)}
  .glossary td[data-label="English"]{font-weight:var(--w-strong)}
  .glossary td[data-label="What it means"]{color:var(--ink-soft)}
}

/* ---------- Hjelp ved betalingsproblemer ---------- */
.help{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ill text" "call call";column-gap:var(--s4);row-gap:var(--s4);align-items:center}
.help-ill{--k-ill:.55;grid-area:ill;align-self:start}
.help-text{grid-area:text}
.help-text h2{font-size:var(--t-h3);line-height:var(--lh-h3)}
.help-text p{margin-top:var(--s2);color:var(--ink-soft);text-wrap:pretty}
.help-call{grid-area:call;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s4);row-gap:var(--s1)}
.phone{display:inline-flex;align-items:center;min-height:var(--target);font:var(--w-strong) var(--t-display)/1 var(--serif);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.help-hours{color:var(--ink-soft)}
@media (min-width:48em){
  .help{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ill text call";column-gap:var(--s8)}
  .help-ill{--k-ill:.8;align-self:center}
  .help-call{flex-direction:column;align-items:flex-start}
}

/* ---------- Slik sjekket vi ---------- */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
.how-text{max-width:46rem}
.sample{margin:0;align-self:start}
.sample-bar{display:flex;gap:3px;height:1.5rem;margin-top:var(--s3);border-radius:var(--radius-sm);overflow:hidden}
.sample-bar i{flex:var(--n) 1 0;background:var(--sw);box-shadow:inset 0 0 0 var(--stroke-px) var(--sw-ring,transparent)}
.sample-keys{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;row-gap:var(--s2)}
.sample-keys li{display:grid;grid-template-columns:.875rem 2rem minmax(0,1fr);column-gap:var(--s3);align-items:center}
.sample-keys li::before{content:"";width:.875rem;height:.875rem;border-radius:2px;background:var(--sw);box-shadow:inset 0 0 0 var(--stroke-px) var(--sw-ring,transparent)}
.sample-keys b{font-weight:var(--w-strong);font-variant-numeric:tabular-nums lining-nums;text-align:right}
.sample-keys span{color:var(--ink-soft)}
.sw-loans{--sw:var(--line-strong)}
.sw-both{--sw:var(--bar)}
.sw-cards{--sw:var(--bg);--sw-ring:var(--bar)}
.sample .panel-foot{margin-top:var(--s4)}
@media (min-width:64em){
  .how-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .how-text{grid-column:1 / 8}
  .sample{grid-column:8 / 13}
}
.how h2{font-size:var(--t-h3);line-height:var(--lh-h3)}
.how-body{margin-top:var(--s3)}
.how-body>p{color:var(--ink-soft);text-wrap:pretty}
.byline{margin-top:var(--s3)}
.method p{color:var(--ink-soft);text-wrap:pretty}
.sources-title{font:var(--w-strong) var(--t-h3)/var(--lh-h3) var(--serif)}
.source-list{display:grid;margin:var(--s2) 0 0;padding-left:var(--s6)}
.source-list li{padding-left:var(--s1)}
.source-list a{display:inline-block;padding-block:.625rem;line-height:var(--lh-body);overflow-wrap:anywhere}

/* ---------- Bunntekst ---------- */
.site-footer{padding-block:var(--s8) var(--s12);background:var(--panel)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4)}
.footer-owner{color:var(--ink-soft)}
.footer-name{margin-right:var(--s2);font:var(--w-strong) var(--t-body)/1 var(--serif);color:var(--ink)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);list-style:none;margin:0 calc(-1 * var(--s2));padding:0}
.footer-links a{display:inline-flex;align-items:center;min-height:var(--target);min-width:var(--target);padding-inline:var(--s2)}

/* ---------- Seksjonsstripe: dukker opp etter toppen, uten fremdriftsstrek ---------- */
.section-nav{position:fixed;inset:0 0 auto;z-index:var(--z-sticky);background:var(--bg);box-shadow:0 1px 0 var(--line);transform:translateY(-100%);visibility:hidden;transition:transform var(--t-move) var(--ease),visibility 0s linear var(--t-move)}
.section-nav.is-visible{transform:none;visibility:visible;transition:transform var(--t-move) var(--ease)}
.section-nav-inner{display:flex;align-items:center;gap:var(--s2);min-height:var(--nav-h)}
.section-nav-top{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);flex:none;min-height:var(--target);min-width:var(--target);padding-right:var(--s2);font-weight:var(--w-strong);text-decoration:none}
.section-nav ol{display:flex;gap:var(--s1);min-width:0;margin:0;padding:0 var(--s4);list-style:none;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--s6);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--s5),#000 calc(100% - var(--s5)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--s5),#000 calc(100% - var(--s5)),transparent)}
.section-nav ol::-webkit-scrollbar{display:none}
.section-nav ol a{position:relative;display:inline-flex;align-items:center;min-height:var(--target);padding-inline:var(--s3);border-radius:var(--radius);white-space:nowrap;color:var(--ink-soft);text-decoration:none}
.section-nav ol a::before{content:"";position:absolute;inset:var(--s1) 0;border-radius:var(--radius);background:var(--accent-tint);opacity:0;transition:opacity var(--t-state) var(--ease)}
.section-nav ol a>span{position:relative}
.section-nav ol a{font-weight:var(--w-medium)}
.section-nav ol a[aria-current]{color:var(--ink)}
.section-nav ol a[aria-current]::before{opacity:1}
@media (max-width:47.99em){.section-nav-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}

/* ---------- Introer: bare datagrafikk, en gang per figur, bare når <html> har .motion ----------
   Standardtilstanden er ferdig tegnet. .motion settes i <head> bare uten redusert bevegelse, og
   client.js slipper høyst to figurer i gang samtidig. Tekst og tall står ferdig fra første bilde. */
.motion [data-motion]:not(.is-in) .bar i{transform:translateX(-100%)}
.motion [data-motion].is-in:not(.is-done) .bar i{transition:transform var(--t-grow) var(--ease) calc(var(--k,0) * var(--stagger))}
.motion .cols:not(.is-in) .col-bar i{transform:translateY(100%)}
.motion .cols.is-in:not(.is-done) .col-bar i{transition:transform var(--t-cols) var(--ease) calc(var(--k,0) * var(--stagger))}
.motion .stack:not(.is-in) .brick{opacity:0;transform:translateY(calc(-1 * var(--s3)))}
.motion .hero-art:not(.is-in) .id-card{opacity:0}
.motion .hero-art:not(.is-in) .id-card.is-d{transform:translate(-3%,7%) rotate(-1deg)}
.motion .hero-art:not(.is-in) .id-card.is-f{transform:translate(5%,9%) rotate(9deg)}
.motion .hero-art.is-in:not(.is-done) .id-card{transition:opacity var(--t-card-fade) var(--ease) var(--lag,0ms),transform var(--t-card) var(--ease) var(--lag,0ms)}
.motion .hero-art.is-in:not(.is-done) .id-card.is-f{--lag:var(--card-lag)}
.motion .stack.is-in:not(.is-done) .brick{transition:opacity var(--t-brick) var(--ease),transform var(--t-brick) var(--ease);transition-delay:calc(var(--k,-1) * var(--stagger) + var(--stagger))}
.motion .flow:not(.is-in) .step-link{transform:scaleY(0)}
@media (min-width:64em){.motion .flow:not(.is-in) .step-link{transform:scaleX(0)}}
.motion .flow.is-in:not(.is-done) .step-link{transition:transform var(--t-link) var(--ease) calc(var(--k,0) * var(--stagger-link))}

/* ---------- Redusert bevegelse: alt står i ferdig tilstand, også ved endring mens siden er åpen ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--nudge:0px}
  *,*::before,*::after{transition-property:opacity !important;transition-delay:0s !important;animation:none !important}
  .sit:active{transform:none}
}