/* =========================================================================
   seniorlån.com — styles.css
   REDESIGN V2: "Varm, menneskelig, foto-drevet moderne"
   Moderne, lys, foto-drevet. Stor vennlig sans. Mye pust, myke former.
   Senior-vennlig: stor lesbar skrift, høy kontrast, ro.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0) DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Fast headerhøyde (litt større enn faktisk ~81px) — brukes til å dra
     hero-flaten opp bak den gjennomsiktige headeren, se .hero. */
  --header-h: 84px;
  /* Farger */
  --bg:        #FCFBF8;   /* ren, varm nesten-hvit bunn */
  --bg-soft:   #F5F0E7;   /* myk varm sand — seksjonstint */
  --card:      #FFFFFF;
  --pine:      #1E4D3A;   /* furugrønn — primær merkefarge */
  --pine-deep: #143526;
  --pine-soft: #E7F0EA;   /* lys grønn tint bak foto/paneler */
  --brass:     #A96E1F;   /* messing — aksent (mørknet for AAA på lys bunn) */
  --brass-2:   #B07D2B;
  --brass-soft:#F6ECD8;
  --ink:       #21201C;   /* varm nær-svart tekst */
  --ink-stamp: #24201A;   /* varm nær-svart blekk — redaksjonelle rammer + harde offset-skygger */
  --muted:     #514C43;   /* dempet tekst (AAA på lys bunn) */
  --line:      #EAE2D3;   /* myk hårstrek */
  --line-soft: #F0EADD;
  /* --- VEVTEKSTUR (EGET motiv for seniorlån) ---------------------------------
     Varm lin-/vevtekstur: to fine, kryssende hårlinjer i diagonal (kryss-hatch),
     som en myk, vevd tekstilflate. Bevisst et HELT annet motiv enn bankerfaringers
     prikke-raster (linjer, ikke prikker; diagonalt, ikke ortogonalt rutenett).
     Én diagonal er hakket kraftigere enn den andre (som renning vs innslag i ekte
     lin) → gir vevd dybde uten støy. Svært lav opacity: liv/materialfølelse uten
     å konkurrere med tall, felt eller boks-håndverk. repeating-linear-gradient
     definerer selv rasteret (ingen background-size), og gradienter gir aldri
     horisontal overflow. */
  --weave-ink: 52,41,26;         /* varm blekk-tone på lyse flater */
  --weave-light: 255,253,249;    /* lys blekk på mørke furugrønne bånd */
  --weave-page:
    repeating-linear-gradient( 45deg, rgba(52,41,26,.055) 0, rgba(52,41,26,.055) .7px, transparent .7px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(52,41,26,.038) 0, rgba(52,41,26,.038) .7px, transparent .7px, transparent 9px);
  --weave-surface:
    repeating-linear-gradient( 45deg, rgba(52,41,26,.036) 0, rgba(52,41,26,.036) .7px, transparent .7px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(52,41,26,.026) 0, rgba(52,41,26,.026) .7px, transparent .7px, transparent 9px);
  --weave-dark:
    repeating-linear-gradient( 45deg, rgba(255,253,249,.05) 0, rgba(255,253,249,.05) .7px, transparent .7px, transparent 10px),
    repeating-linear-gradient(-45deg, rgba(255,253,249,.034) 0, rgba(255,253,249,.034) .7px, transparent .7px, transparent 10px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rule-soft: #D8CEBB;   /* litt tydeligere hårstrek til delelinjer i boks-rader */

  /* Radius */
  --r-xs: 10px;
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 26px;
  --r-xl: 34px;
  --pill: 999px;

  /* Skygger — myke og diffuse */
  --sh-1: 0 2px 10px -4px rgba(24,54,38,.12);
  --sh-2: 0 14px 34px -16px rgba(24,54,38,.18);
  --sh-3: 0 24px 58px -22px rgba(24,54,38,.24);
  --sh-lift: 0 34px 66px -26px rgba(24,54,38,.32);

  /* Avstander */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5.5rem;

  --wrap: 1180px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --sect: clamp(3.5rem, 8vw, 7rem);

  /* Typografi */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------------------
   1) RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip (ikke hidden) hindrer horisontal scroll UTEN å gjøre html til en
     scroll-container – det er nettopp «overflow-x:hidden» som brekker den
     faste (sticky) headeren. clip lar overflow-y forbli visible. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.25rem); /* 18–20px */
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;   /* se merknad på html – clip bevarer sticky-header */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Rolig, statisk vevtekstur på hele siden — seniorlåns EGNE motiv (varm lin-
   kryss-hatch, ikke prikker). Ligger BAK alt innhold (z-index:-1), dekker
   viewporten (position:fixed), gjentas sømløst, helt statisk. Ingen bredde
   bundet til window og gradient-raster → null horisontal overflow. Svært lav
   opacity: liv/materialfølelse nedover siden uten å konkurrere med boks-
   håndverket eller svekke lesbarheten (senior-vennlig). De opake fargede
   båndene (--tint/--pine/footer) og hero legger seg oppå og leser rent. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--weave-page);
}

/* Fint papir-korn over hele flaten (som bankerfaringers .grain):
   fast fractalNoise-lag, svært lav opacity, multiply → varm papir-følelse.
   Ligger visuelt over bakgrunn/innhold, men UNDER den faste headeren
   (z-index:1000) og påvirker ikke klikk (pointer-events:none). Kornet er
   så svakt at hvit tekst/tall og boks-håndverket fortsatt leser knivskarpt.
   Løst som body::after → gjelder alle seks sider via delt styles.css uten
   ekstra markup, og skaper ingen horisontal overflow (fixed, inset:0). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: var(--grain);
  background-size: 160px 160px;
}

a { color: var(--pine); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--pine); color: #fff; }

/* Konsekvent fokus-ring overalt. Setter IKKE border-radius (det ville
   omforme pill-knapper/felt ved fokus) — omrisset følger elementets egen form. */
:focus-visible {
  outline: 3px solid var(--pine);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   2) LAYOUT-HJELPERE
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--sect); }
/* Lyse sand-bånd får samme diskrete vevtekstur som resten av flatene
   (paper-/tekstilfølelse). Linjene ligger på den opake tinten, dempet nok til
   at hvite kort oppå og all tekst leser knivskarpt. */
.section--tint {
  background-color: var(--bg-soft);
  background-image: var(--weave-surface);
}
.section--pine {
  position: relative;
  isolation: isolate;      /* holder halftone-laget i seksjonens egen stabel */
  background: var(--pine);
  color: #F3EEE4;
  overflow: hidden;        /* halftone kan aldri skape horisontal overflow */
}
/* Diskret vevtekstur på det mørke furugrønne båndet: lys lin-kryss-hatch i
   svært lav synlighet, som fader mot kantene via radial maske. Ligger bak
   innholdet (z-index:-1 i egen isolert stabel), så all hvit tekst beholder
   AAA-kontrast. Samme EGNE motiv som resten av siden, aldri prikker. */
.section--pine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--weave-dark);
  -webkit-mask-image: radial-gradient(130% 120% at 50% 40%, #000 45%, transparent 82%);
          mask-image: radial-gradient(130% 120% at 50% 40%, #000 45%, transparent 82%);
}

.centered { text-align: center; max-width: 760px; margin-inline: auto; }

/* -------------------------------------------------------------------------
   2b) REDAKSJONELL BOKS-STIL  (.card-editorial)
   Bankerfaringers boks-håndverk oversatt til seniorlåns palett/font:
   hårfin mørk ramme + hard offset-skygge (ingen blur) + skarpe kanter.
   Gjenbrukbar på tvers av hele siden. Legg til .card-editorial--key for en
   tyngre nøkkelboks, og .card-editorial--hover for lift-interaksjon.
   ------------------------------------------------------------------------- */
.card-editorial {
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  box-shadow: 6px 6px 0 0 var(--ink-stamp);
}
.card-editorial--key {
  border-width: 2.5px;
  box-shadow: 8px 8px 0 0 var(--ink-stamp);
}
.card-editorial--hover {
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card-editorial--hover:hover {
  transform: translateY(-3px);
  box-shadow: 8px 10px 0 0 var(--brass);
}
@media (max-width: 560px) {
  /* Mildere skygger på små skjermer, aldri utenfor viewport-kanten. */
  .card-editorial { box-shadow: 4px 4px 0 0 var(--ink-stamp); }
  .card-editorial--key { box-shadow: 5px 5px 0 0 var(--ink-stamp); }
}

.visually-hidden, .skip-link:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: .75rem; z-index: 200;
  background: var(--pine); color: #fff;
  padding: .75rem 1.15rem; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
}

.tekst-lenke {
  color: var(--pine);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.tekst-lenke:hover { text-decoration-color: var(--pine); }

/* -------------------------------------------------------------------------
   3) MODERNE SEKSJONSHODER
   ------------------------------------------------------------------------- */
/* Redaksjonell kicker-chip — ÉN felles etikett-stil på hele siden
   (matcher hero-chippen: skarp, rammet, brass-dot, liten hard offset). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .005em;
  color: #6D4712;
  background: var(--brass-soft);
  padding: .42rem .82rem .42rem .7rem;
  border: 1.5px solid var(--ink-stamp);
  border-radius: 3px;
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 3px rgba(169,110,31,.22);
  flex: none;
}
/* På mørke bånd (pine/CTA) beholdes samme brass-chip, men den harde
   skyggen byttes til messing så den løftes rent fra den grønne bunnen. */
.section--pine .eyebrow,
.cta-band .eyebrow {
  color: #6D4712;
  background: var(--brass-soft);
  box-shadow: 2px 2px 0 0 var(--brass);
}

.sect-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
/* Beholdt for bakoverkompatibilitet — .sect-head er nå midtstilt som standard */
.sect-head--center { margin-inline: auto; text-align: center; }
.sect-head .eyebrow { margin-bottom: 1.1rem; }
/* Ingressen kan ha egen, smalere maksbredde — hold den sentrert i det midtstilte hodet */
.sect-head .section-intro { margin-inline: auto; }

.section-title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.08;
}
.sect-head .section-intro,
.section-intro {
  margin-top: 1.05rem;
  font-size: clamp(1.15rem, 0.5vw + 1.05rem, 1.3rem);
  color: var(--muted);
  line-height: 1.6;
  text-wrap: balance;   /* jevn ragging, unngå enslige orphan-ord på siste linje */
}
.sect-head .section-intro { max-width: 54ch; }
.section--pine .section-intro { color: #D8E2D6; }

/* -------------------------------------------------------------------------
   4) KNAPPER
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 56px;
  padding: .9rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.075rem;
  line-height: 1.15;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--pill);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
  text-align: center;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed;
  transform: none; box-shadow: none;
}

.btn--primary { background: var(--pine); color: #fff; box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--pine-deep); box-shadow: var(--sh-3); }

.btn--brass { background: var(--brass); color: #fff; box-shadow: var(--sh-2); }
.btn--brass:hover { background: #915d16; box-shadow: var(--sh-3); }

.btn--ghost { background: #fff; color: var(--pine); border-color: var(--line); box-shadow: var(--sh-1); }
.btn--ghost:hover { border-color: var(--pine); background: var(--pine-soft); }

.btn--lg { min-height: 60px; font-size: 1.15rem; padding: 1rem 1.9rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 1.75rem; }
.btn-row--center { justify-content: center; }

/* -------------------------------------------------------------------------
   5) HEADER
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;              /* over all annet innhold, også reveal-kort */
  /* På toppen: helt gjennomsiktig, ingen skjøt mot hero. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: box-shadow .28s var(--ease), border-color .28s var(--ease),
              background-color .28s var(--ease), backdrop-filter .28s var(--ease);
}
/* Når man scroller: solid varm bunn + myk frostet blur + hårfin underkant
   og en subtil skygge som løfter headeren rent fra innholdet under. */
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 32px -24px rgba(24,54,38,.5);
}
/* Krymper til en slankere, roligere linje når man scroller (samme idé som
   gjeldsproblemer.no, men i seniorlåns eget uttrykk – full bredde, ikke pille).
   Mindre høyde + logo, og undertittelen «En del av Zen Finans» folder seg
   pent bort så baren blir kompakt og profesjonell. */
.header-inner { transition: min-height .32s var(--ease), padding-block .32s var(--ease); }
.brand__logo { transition: width .32s var(--ease), height .32s var(--ease); }
.brand__name { transition: font-size .32s var(--ease); }
.brand__tag {
  overflow: hidden;
  transition: max-height .32s var(--ease), opacity .24s var(--ease), margin-top .32s var(--ease);
  max-height: 1.4em;
}
.site-header.scrolled .header-inner { min-height: 58px; padding-block: .3rem; }
.site-header.scrolled .brand__logo { width: 34px; height: 31px; }
.site-header.scrolled .brand__name { font-size: 1.22rem; }
.site-header.scrolled .brand__tag { max-height: 0; opacity: 0; margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .header-inner, .brand__logo, .brand__name, .brand__tag { transition: none; }
}
/* Uten backdrop-filter-støtte: gjør bunnen helt solid når scrollet,
   så teksten alltid er lesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.scrolled { background: var(--bg); }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
  padding-block: .7rem;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__logo { width: 42px; height: 38px; flex: none; color: var(--pine); }
.footer-brand .brand__logo { color: #FAF5EA; }   /* lyst hus på mørk footer */
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.brand__name b { color: var(--pine); font-weight: 800; }
.brand__tag {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .28rem;
  white-space: nowrap;   /* «En del av Zen Finans» skal aldri brekke til to linjer */
}
@media (max-width: 400px) {
  .brand__tag { font-size: .66rem; letter-spacing: .02em; }
}

.main-nav { display: flex; align-items: center; gap: .35rem; }
.main-nav > a:not(.btn) {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  text-decoration: none;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.main-nav > a:not(.btn):hover { background: var(--pine-soft); color: var(--pine); }
.nav-cta { margin-left: .5rem; }

.header-actions { display: flex; align-items: center; gap: .6rem; }
.phone-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--pine);
  padding: .55rem .75rem;
  border-radius: var(--pill);
  min-height: 48px;
}
.phone-cta:hover { background: var(--pine-soft); }
.phone-cta__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--pine); color: #fff; flex: none;
}
.phone-cta__ic svg { width: 20px; height: 20px; }
.phone-num { font-size: 1.05rem; white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 52px; height: 52px;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--pine); cursor: pointer;
  box-shadow: var(--sh-1);
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* -------------------------------------------------------------------------
   6) HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Vevteksturen (seniorlåns eget motiv) ligger ØVERST i stabelen, over de myke
     pine-/messing-gradientene → heroen får samme levende materialflate som
     resten av siden, synlig bak konverterings-kortet. Kortet er opakt (z-index:2)
     og legger seg rent oppå, så alle tall og all tekst leser knivskarpt. */
  background:
    var(--weave-page),
    radial-gradient(125% 85% at 100% -10%, var(--pine-soft) 0%, transparent 50%),
    radial-gradient(95% 75% at -8% 108%, var(--brass-soft) 0%, transparent 48%),
    var(--bg);
  /* Headeren er gjennomsiktig og «sticky»; den okkuperer likevel toppen i
     normalflyten. Uten dette begynner hero-gradienten rett UNDER headeren →
     et synlig fargehakk i skjøten (særlig den grønne øverst til høyre). Vi drar
     derfor hele hero-flaten opp bak headeren (negativ topp-margin) og skyver
     innholdet tilsvarende ned, så gradienten når helt til topps og skjøten
     forsvinner. --header-h er satt litt større enn faktisk headerhøyde (~81px). */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(1.6rem, 3.6vw, 3rem));
  padding-bottom: clamp(2.6rem, 5vw, 4.4rem);
  overflow: hidden;
}
.hero-wrap { position: relative; z-index: 1; }

/* Bakgrunnsmotiv i heroen — seniorlåns eget: hus + nøkkel (frigjøre verdien i
   hjemmet). Store, svært lette linjetegninger som svever i sidefeltene bak
   kortet, à la refinansiering.no sine mynter, men med vårt eget motiv og
   vår egen palett. Ligger over vevteksturen, under kortet (z-index:0). */
.hero-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-decor__art { position: absolute; height: auto; }
.hero-decor__house {
  left: clamp(-90px, -3vw, -30px); top: 16%;
  width: clamp(230px, 24vw, 400px);
  color: var(--pine); opacity: .07;
  transform: rotate(-7deg);
}
.hero-decor__key {
  right: clamp(-70px, -3vw, -20px); top: 40%;
  width: clamp(230px, 25vw, 420px);
  color: var(--brass); opacity: .11;
  transform: rotate(11deg);
}
/* Under ~1080px blir det ikke plass i sidefeltene → skjul, unngå at motivet
   krasjer med kortet. */
@media (max-width: 1080px) { .hero-decor { display: none; } }
/* Ren konverterings-hero (refinansiering-stil): ett sentralt, bredere kort
   som helt, med nøkkeltall-raden rett under. Ingen foto. */
.hero-shell {
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(.85rem, 1.7vw, 1.2rem);
}
/* Når kortet står i to spalter (bred skjerm) trenger heltet mer bredde. */
@media (min-width: 900px) {
  .hero-shell { max-width: 1000px; }
}

/* ---------- KONVERTERINGS-KORT (redaksjonell nøkkelboks) ---------- */
.hero-card {
  position: relative;
  z-index: 2;
  padding: clamp(1.25rem, 2.3vw, 1.95rem) clamp(1.4rem, 2.8vw, 2.4rem);
}
.hero-card__top {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .7rem clamp(.9rem, 2.2vw, 1.6rem);
  margin-bottom: clamp(1.15rem, 2.4vw, 1.6rem);
}
/* Offisielle godkjennings-logoer til høyre for Trustpilot i kort-toppen */
.hero-badges {
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.55rem, 1.5vw, .95rem) clamp(.7rem, 1.8vw, 1.15rem);
}
.hero-badges .trust-logo--fintil img { height: 27px; }
.hero-badges .trust-logo--finaut img { height: 31px; }
.hero-badges .trust-logo--bankid img { height: 23px; }
.hero-badges .trust-logo__bankid { font-size: 1.08rem; }

/* --- To-spalters heltet: venstre = hva det er + trygghet, høyre = anslag + søk.
   Stables på smal skjerm (én kolonne), to spalter fra 900px. --- */
.hero-lockup {
  display: grid;
  gap: clamp(1.35rem, 3vw, 2.1rem);
}
@media (min-width: 900px) {
  .hero-card__top { justify-content: space-between; margin-bottom: clamp(1.3rem, 2.4vw, 1.7rem); }
  .hero-lockup {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(1.8rem, 3.4vw, 2.9rem);
  }
  /* Rolig hårstrek som skiller de to spaltene */
  .hero-offer {
    padding-left: clamp(1.8rem, 3.4vw, 2.9rem);
    border-left: 1.5px solid var(--line);
  }
}
.hero-pitch { min-width: 0; }
.hero-offer { min-width: 0; display: flex; flex-direction: column; }

/* Redaksjonell kicker-chip: skarp, rammet, liten hard skygge */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--brass-soft);
  color: #6D4712;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .01em;
  padding: .42rem .8rem .42rem .68rem;
  border: 1.5px solid var(--ink-stamp);
  border-radius: 3px;
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
}
.hero-eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 3px rgba(169,110,31,.22);
}

.hero-card h1 {
  font-size: clamp(2.2rem, 1rem + 5.2vw, 4.35rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-align: center;
}
.hero-card h1 .em { color: var(--pine); }
.hero-card .lead {
  margin-top: .75rem;
  font-size: clamp(1.08rem, 0.4vw + 1rem, 1.24rem);
  color: var(--muted);
  max-width: 42ch;
  margin-inline: auto;
  line-height: 1.55;
  text-align: center;
}
/* På bred skjerm venstrestilles pitch-teksten (premium redaksjonell venstremarg) */
@media (min-width: 900px) {
  .hero-card h1 { text-align: left; }
  .hero-card .lead { text-align: left; margin-inline: 0; max-width: 34ch; }
}

/* Trygghets-fakta under ingressen – ett sted for produktløftene (ingen
   gjentagelse ellers i heroen). Én kolonne, store hakelinjer, senior-lesbar. */
.hero-facts {
  list-style: none;
  margin: clamp(1.15rem, 2.4vw, 1.5rem) auto 0;
  padding: 0;
  display: grid;
  gap: .62rem;
  width: fit-content;
}
.hero-facts li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1rem, .96rem + .2vw, 1.08rem);
  color: var(--ink);
  line-height: 1.3;
}
.hero-facts__ic {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--pine);
}
@media (min-width: 900px) {
  .hero-facts { margin-inline: 0; }
}

/* Trustpilot-widget (behold) */
.hero-tp[hidden] { display: none; }   /* [hidden] må vinne over display:inline-flex */
.hero-tp {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  padding: .4rem .68rem .4rem .44rem;
  background: #fff;
  border: 1.5px solid var(--ink-stamp);
  border-radius: 3px;
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.hero-tp:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 0 var(--brass); }
.hero-tp__tiles { display: inline-flex; gap: 3px; }
.tp-tile {
  width: 23px; height: 23px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #00B67A; border-radius: 3px;
}
.tp-tile svg { width: 15px; height: 15px; fill: #fff; }
.hero-tp__meta { display: inline-flex; flex-direction: column; line-height: 1.12; }
.tp-wordmark { display: inline-flex; align-items: center; gap: .3rem; }
.tp-wordmark__star { width: 14px; height: 14px; }
.tp-wordmark__name { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--ink); }
.hero-tp__score { font-size: .8rem; font-weight: 700; color: var(--muted); }

/* Fordeler med hake — diskret, integrert rad (ikke to konkurrerende kolonner) */
.hero-benefits {
  list-style: none; padding: 0;
  margin: .95rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.35rem;
}
.hero-benefits li {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-display);
  font-weight: 700; font-size: .98rem;
  color: var(--muted); line-height: 1.25;
}
.hero-benefits svg { width: 20px; height: 20px; color: var(--pine); flex: none; }

/* Levende anslag — redaksjonell inset-boks. Selve beviset på «hva kan JEG få».
   Første element i høyre spalte, så ingen topp-margin. */
.hero-est {
  position: relative;
  margin-top: 0;
  background: linear-gradient(180deg, var(--pine-soft) 0%, #FBFDFB 62%);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 4px;
  box-shadow: 3px 3px 0 0 var(--ink-stamp);
  /* Ekstra topp-luft så «Din alder» får tydelig avstand ned fra «Regn ut selv»-fanen. */
  padding: clamp(2.35rem, 3vw, 2.7rem) clamp(1.05rem, 2vw, 1.4rem) clamp(1.05rem, 2vw, 1.4rem);
}
.hero-est__tag {
  position: absolute; top: -1.5px; left: -1.5px;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800; font-size: .66rem;
  letter-spacing: .11em; text-transform: uppercase;
  color: #F3EEE4; background: var(--pine);
  padding: .3rem .62rem;
  border: 1.5px solid var(--ink-stamp);
  border-top-left-radius: 4px;
  border-bottom-right-radius: 5px;
}
/* De to glidebryterne stables over hverandre (full bredde hver) — enklere å dra. */
.hero-est__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
}
.hero-est__field { display: flex; flex-direction: column; min-width: 0; }
.hero-est__field label {
  font-family: var(--font-display);
  font-weight: 700; font-size: .98rem;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: .4rem;
  flex-wrap: wrap;
}
.hero-est__val {
  font-family: var(--font-display);
  font-weight: 800; color: var(--pine);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.hero-est input[type="range"] { height: 56px; }
.hero-est__result {
  margin-top: .7rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .1rem;
}
.hero-est__label {
  font-family: var(--font-display);
  font-weight: 700; font-size: .98rem;
  color: var(--muted);
}
.hero-est__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 1rem + 3.4vw, 3rem);
  color: var(--pine);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hero-est__bar {
  margin-top: .65rem;
  height: 15px;
  border-radius: 3px;
  background: #EAE1CF;
  border: 1.5px solid var(--ink-stamp);
  overflow: hidden;
}
.hero-est__bar-fill {
  display: block;
  height: 100%;
  border-radius: 0;
  background: repeating-linear-gradient(45deg, var(--pine) 0 8px, #256B4D 8px 16px);
  transition: width .5s var(--ease);
}
.hero-est__pct {
  font-weight: 800;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
}
.hero-est__note {
  margin-top: .45rem;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.45;
}

/* CTA — dominerende, redaksjonell primærknapp rett under anslaget:
   «se tallet ditt → søk». Én tydelig primær-CTA i hele heroen. */
.hero-søk {
  margin-top: clamp(1rem, 2.2vw, 1.3rem);
  min-height: 64px;
  font-size: 1.2rem;
  border: 2px solid var(--ink-stamp);
  border-radius: 4px;
  box-shadow: 5px 5px 0 0 var(--ink-stamp);
}
.hero-søk:hover {
  transform: translateY(-2px);
  box-shadow: 7px 7px 0 0 var(--brass);
}
.hero-søk:active {
  transform: translate(1px, 2px);
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
}
/* Service-fakta samlet på ÉN linje (erstatter det tidligere fire-ikoners
   rutenettet, og «gratis» nevnes kun her – ikke i ingressen). */
.hero-microtrust {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.hero-microtrust li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .73rem;
  color: var(--pine);
  background: var(--pine-soft);
  border: 1.5px solid var(--ink-stamp);
  border-radius: var(--pill);
  padding: .3rem .5rem;
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
  white-space: nowrap;
}
.hero-microtrust li svg { width: 13px; height: 13px; color: var(--pine); flex: none; }
/* Fra der kortet står i to spalter: tving alle tre chips på én rad */
@media (min-width: 900px) {
  .hero-microtrust { flex-wrap: nowrap; gap: .4rem; }
}
/* Mobil: løft de små trygghets-chipsene så de er behagelige å lese for 60+.
   Chipsene bryter fritt på smal skjerm, så større tekst gir ingen overflow. */
@media (max-width: 600px) {
  .hero-microtrust li { font-size: .82rem; padding: .34rem .58rem; }
  .hero-microtrust li svg { width: 15px; height: 15px; }
}
/* Ring-en-rådgiver: uten boks, midtstilt. Ikon + tekst side om side,
   under CTA. Stort nummer for senior-vennlighet. */
.hero-phone {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  width: 100%;
  margin-top: clamp(1rem, 2vw, 1.25rem);
  text-decoration: none;
  transition: transform .15s var(--ease);
}
.hero-phone:hover, .hero-phone:focus-visible {
  transform: translateY(-1px);
}
.hero-phone:hover .hero-phone__ic, .hero-phone:focus-visible .hero-phone__ic {
  background: var(--brass);
}
.hero-phone__row {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
}
.hero-phone__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--pine); color: #fff;
  border: 1.5px solid var(--ink-stamp);
  transition: background .15s var(--ease);
}
.hero-phone__ic svg { width: 22px; height: 22px; }
.hero-phone__label { font-size: .92rem; color: var(--muted); font-weight: 600; text-align: center; }
.hero-phone__num {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--pine);
}

/* ---------- STØTTE-BLOKK (lett mekanisme-forklaring) ----------
   Forklarer STEGENE (motta → velge utbetaling → oppgjør), ikke løftene fra
   kortet over. BEVISST IKKE en boks: en rammeløs tretrinns-flyt som svever
   rett på hero-bunnen, bundet sammen av en dempet messing-rail gjennom de tre
   nummer-nodene. Lettere og mer levende enn en tung ramme. */
.hero-explain {
  position: relative; z-index: 1;
  padding: clamp(.3rem, 1vw, .6rem) clamp(.2rem, 1.5vw, 1rem) 0;
}

/* Overskrift uten boks: sentrert, med en kort messing-strek som "signatur". */
.hx-head { text-align: center; }
.hx-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 2.1vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 22ch;
}
.hx-title__rule {
  display: block;
  width: 54px; height: 3px;
  margin: clamp(.7rem, 1.6vw, .95rem) auto 0;
  border-radius: 3px;
  background: var(--brass);
}

/* --- Tretrinns-fortelling (rail-bundet reise) --- */
.hx-journey {
  list-style: none;
  margin: clamp(1.2rem, 2.6vw, 1.75rem) 0 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(1.9rem, 4vw, 2.2rem);
}
.hx-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .85rem;
}
/* Mobil: kort stiplet messing-strek i mellomrommet mellom stegene (ikke gjennom tekst) */
.hx-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  width: 2px;
  height: clamp(1.9rem, 4vw, 2.2rem);
  background-image: repeating-linear-gradient(to bottom,
    rgba(169,110,31,.5) 0 6px, transparent 6px 12px);
  z-index: 0;
}
/* ÉN ikon-sirkel per steg = noden på railen. Opak, så den dekker railen bak seg. */
.hx-step__art {
  position: relative;
  z-index: 1;
  width: 92px; height: 92px; flex: none;
  margin: 0;
  display: grid; place-items: center;
  background: var(--pine-soft);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 50%;
  box-shadow: 3px 3px 0 0 var(--ink-stamp);
}
/* Lite nummer-merke oppe til høyre på ikon-sirkelen */
.hx-step__num {
  position: absolute;
  top: -6px; right: -6px;
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  border: 2px solid var(--bg);
}
.hx-ill { width: 62%; height: 62%; overflow: visible; }
.hx-ln {
  fill: none; stroke: var(--pine); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.hx-br-fill { fill: var(--brass); }
.hx-coin-b { fill: var(--card); stroke: var(--pine); stroke-width: 2.4; }
.hx-coin-a { fill: var(--brass-soft); stroke: var(--brass); stroke-width: 2.4; }
.hx-coin-kr {
  fill: #6D4712; font-family: var(--font-display);
  font-weight: 800; font-size: 13px;
}
.hx-step__h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.08rem, 1rem + .5vw, 1.22rem);
  line-height: 1.2;
  color: var(--pine);
  margin: .1rem 0 0;
}
.hx-step__p {
  color: var(--ink);
  font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height: 1.5;
  margin: .25rem auto 0;
  max-width: 30ch;
}

/* Horisontal reise med messing-rail på ≥700px: tre noder på én linje, bundet
   av en dempet stiplet strek fra første til siste node-senter. Nodene er opake
   og dekker railen bak seg → ren "stasjons"-effekt uten maskeringstriks. */
@media (min-width: 700px) {
  .hx-journey {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.6vw, 1.9rem);
    align-items: start;
  }
  /* Horisontal rail på høyde med node-senter (52px node → 26px). Løper kun
     mellom ytternodene (kol-sentre ligger på 1/6 og 5/6 av bredden). */
  .hx-journey::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 16.667%; right: 16.667%;
    height: 2px;
    transform: translateY(-1px);
    background-image: repeating-linear-gradient(to right,
      rgba(169,110,31,.5) 0 9px, transparent 9px 17px);
    z-index: 0;
  }
  /* Mobil-connectoren skrus av når railen tar over. */
  .hx-step:not(:last-child)::after { display: none; }

  /* Rolig steg-for-steg avsløring (piggybacker på .reveal.is-visible) */
  .hx-step { opacity: 0; transform: translateY(14px); }
  .hero-explain.is-visible .hx-step {
    opacity: 1; transform: none;
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay: calc(.14s + var(--i) * .16s);
  }
}

/* Redusert bevegelse: ingen inn-glid, ingen skalering. Alt synlig og rolig. */
@media (prefers-reduced-motion: reduce) {
  .hx-step { opacity: 1 !important; transform: none !important; }
  .hero-explain.is-visible .hx-step { transition: none !important; }
}

/* Rammeløs tillitsstripe: en rolig, luftig avslutning på heroen — bevisst
   IKKE en ny boks (ingen ramme/offset-skygge). En sentrert kicker hviler på
   en hårfin regel, og under den ligger de fire offisielle merkene luftig på
   én rad. Gjentar ikke sjekklisten lenger opp; signaliserer bare «regulert». */
.hero-assure {
  text-align: center;
  padding: clamp(.2rem, 1vw, .55rem) clamp(.4rem, 2vw, 1.1rem) 0;
}
.hero-assure__kicker {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2.6vw, 1.5rem);
  max-width: 32rem;
  margin: 0 auto clamp(1.15rem, 2.7vw, 1.65rem);
}
.hero-assure__kicker::before,
.hero-assure__kicker::after {
  content: "";
  flex: 1 1 0;
  height: 1.5px;
  background: var(--rule-soft);
}
.hero-assure__kicker span {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.76rem, 1.4vw, .84rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   7) TILLITSSTRIPE (logo-rad)
   ------------------------------------------------------------------------- */
.trust-strip-section { background: var(--bg); padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.trust-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .85rem 1.5rem;
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  box-shadow: 5px 5px 0 0 var(--ink-stamp);
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.15rem, 3vw, 2rem);
}
.trust-logos { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(.6rem, 1.6vw, .95rem) clamp(1.1rem, 3vw, 1.75rem); justify-content: center; }
/* Ekte offisielle logoer (bildefiler i bilder/logo/) med lenke til hver
   utsteder. Optisk balansert høyde per logo; hårfine skillelinjer imellom.
   Full 44px tap-flate per lenke (senior-UX), rolig hover: full opasitet + løft. */
.trust-logo { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding-inline: .15rem; color: var(--ink); text-decoration: none; opacity: .92; transition: opacity .2s ease, transform .2s ease; }
.trust-logo:hover, .trust-logo:focus-visible { opacity: 1; transform: translateY(-2px); }
.trust-logo:focus-visible { outline: 2px solid var(--pine); outline-offset: 4px; border-radius: 4px; }
.trust-logo img { width: auto; display: block; }
.trust-logo--tp img { height: 24px; }
.trust-logo--finaut img { height: 34px; }
.trust-logo--fintil img { height: 29px; }
.trust-logo--bankid img { height: 25px; }
.trust-logo__bankid { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 1.22rem; letter-spacing: -.03em; color: #39134C; }
.trust-logo__div { width: 1px; height: 30px; background: var(--rule-soft); flex: none; }

/* -------------------------------------------------------------------------
   7b) SAMARBEIDSBANKER (logo-vegg)
   Ryddige hvite fliser i samme boks-språk som resten av siden, så de mange
   ulike banklogoene leser samlet og konsistent. Rolig hover-løft.
   ------------------------------------------------------------------------- */
/* To samarbeidsbanker → hver bank sin egen premium-boks, side om side.
   Ingen felles ytterboks. Redaksjonelt uttrykk (hårfin ramme + hard offset-
   skygge), rolig løft med messing-skygge på hover. Logoene har ulik form, så
   en fast, sentrert logo-sone gir dem lik optisk høyde og balanse. */
.banks-duo {
  list-style: none; margin: clamp(1.7rem, 3.4vw, 2.8rem) auto 0; padding: 0;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.bank-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--bg-soft);
  padding: clamp(1.5rem, 3.2vw, 2.3rem) clamp(1.2rem, 2.6vw, 2rem);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.bank-card:hover {
  transform: translateY(-3px);
  box-shadow: 8px 10px 0 0 var(--brass);
}
.bank-card__logo {
  width: 100%;
  height: clamp(72px, 12vw, 92px);
  display: flex; align-items: center; justify-content: center;
}
.bank-card__logo img {
  max-height: clamp(42px, 8vw, 56px);
  max-width: 100%; width: auto; object-fit: contain; display: block;
}
.bank-card__role {
  margin-top: clamp(1rem, 2.2vw, 1.4rem);
  padding-top: clamp(1rem, 2.2vw, 1.4rem);
  border-top: 1.5px solid var(--line);
  width: 100%;
  font-family: var(--font-display); font-weight: 800;
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brass);
}
@media (max-width: 560px) {
  .banks-duo { grid-template-columns: 1fr; max-width: 380px; }
}
.banks-note { text-align: center; margin: clamp(1.3rem, 2.8vw, 1.9rem) auto 0; font-size: .95rem; color: var(--muted); }

/* Samarbeidsbanker — én lik, sentrert logo-vegg. Alle tiles like store
   (flex-basis uten grow), så ingen bank fremheves foran de andre. Siste rad
   sentreres i stedet for å strekkes. */
.banks-grid {
  list-style: none; margin: clamp(1.8rem, 3.6vw, 2.8rem) auto 0; padding: 0;
  max-width: 900px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
}
.banks-grid li {
  flex: 0 1 158px;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  height: clamp(84px, 12vw, 104px);
  padding: 1rem 1.3rem;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.banks-grid li:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 0 var(--brass); }
.banks-grid img {
  max-height: clamp(34px, 6vw, 46px);
  max-width: 100%; width: auto; object-fit: contain; display: block;
}
@media (max-width: 560px) {
  .banks-grid li { flex: 0 1 calc(50% - .55rem); }
}

/* -------------------------------------------------------------------------
   FEATURE-LENKER (forside) → kalkulator + analyse
   To store, iøynefallende call-to-action-kort med håndlaget SVG-illustrasjon
   i en furugrønn kunst-sone på toppen. Redaksjonell offset-skygge, messing-
   løft på hover. To kolonner desktop, én på mobil.
   ------------------------------------------------------------------------- */
.feature-links__lead {
  text-align: center; max-width: 54ch;
  margin: clamp(1.7rem, 3.4vw, 2.5rem) auto 0;
  color: var(--muted); line-height: 1.5;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
}
.feature-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  margin-top: clamp(1.2rem, 2.6vw, 1.8rem);
}
.feature-link {
  display: flex; flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.feature-link:hover, .feature-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 8px 10px 0 0 var(--brass);
}
.feature-link__art {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  background: var(--pine-soft);
  border-bottom: 1.5px solid var(--ink-stamp);
}
.feature-link__art .gf-ill { max-width: 256px; }
.feature-link__body {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  flex: 1 1 auto;
}
.feature-link__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 1.14rem + 1vw, 1.82rem);
  color: var(--pine); line-height: 1.14; margin: 0 0 .6rem;
}
.feature-link__desc {
  color: var(--muted); font-size: clamp(1.02rem, .98rem + .3vw, 1.12rem);
  line-height: 1.55; margin: 0 0 1.3rem;
}
.feature-link .guide-card__more { font-size: 1.06rem; margin-top: auto; }
@media (max-width: 720px) {
  .feature-links { grid-template-columns: 1fr; }
  .feature-link__art .gf-ill { max-width: 220px; }
}

/* ====================================================================
   ANALYSE-RAPPORT — søylediagram, tabell, paradoks-visual
   ==================================================================== */
.rapport-figur{
  background:var(--card);
  border:1.6px solid var(--ink-stamp);
  border-radius:var(--r-lg);
  box-shadow:8px 8px 0 -2px var(--ink-stamp);
  padding:clamp(1.5rem, 3.4vw, 2.4rem);
  margin-top:clamp(1.6rem, 3.4vw, 2.4rem);
}
.rapport-figur__cap{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.18rem; color:var(--ink); margin-bottom:.35rem;
}
.rapport-figur__sub{ display:block; font-size:.96rem; color:var(--muted); margin-bottom:clamp(1.1rem,2.4vw,1.6rem); }
.bars{ display:flex; flex-direction:column; gap:.9rem; }
.bar{ display:grid; grid-template-columns:minmax(96px,33%) 1fr auto; gap:.75rem; align-items:center; }
.bar__k{ font-family:var(--font-body); font-weight:700; font-size:1.02rem; color:var(--ink); line-height:1.25; }
.bar__track{ background:var(--bg-soft); border-radius:var(--pill); height:32px; overflow:hidden; }
.bar__fill{
  height:100%; border-radius:var(--pill);
  background:linear-gradient(90deg, var(--pine-deep), var(--pine));
  min-width:6px;
  transition:width .9s var(--ease);
}
.bar--brass .bar__fill{ background:linear-gradient(90deg, var(--brass), var(--brass-2)); }
.bar__val{ font-family:var(--font-display); font-weight:800; font-size:1.06rem; color:var(--pine); min-width:3.4rem; text-align:right; }
.bar--brass .bar__val{ color:var(--brass); }
@media (max-width:540px){
  .bar{ grid-template-columns:1fr auto; row-gap:.35rem; }
  .bar__k{ grid-column:1 / -1; }
  .bar__track{ grid-column:1 / 2; }
  .bar__val{ grid-column:2 / 3; }
}

/* Paradoks-visual: to store søyler i skala mot hverandre */
.paradox{ display:grid; gap:1.3rem; }
.paradox__row{ display:flex; flex-direction:column; gap:.5rem; }
.paradox__top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.paradox__label{ font-family:var(--font-body); font-weight:700; font-size:1.08rem; color:var(--ink); }
.paradox__num{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,4vw,2rem); line-height:1; }
.paradox__num--pine{ color:var(--pine); }
.paradox__num--brass{ color:var(--brass); }
.paradox__track{ background:var(--bg-soft); border-radius:var(--r-sm); height:44px; overflow:hidden; }
.paradox__fill{ height:100%; border-radius:var(--r-sm); }
.paradox__fill--pine{ background:linear-gradient(90deg, var(--pine-deep), var(--pine)); }
.paradox__fill--brass{ background:linear-gradient(90deg, var(--brass), var(--brass-2)); }

/* Sammenligningstabell 60+ vs under 60 */
.rapport-tabell-wrap{ overflow-x:auto; margin-top:clamp(1.4rem,3vw,2rem); }
.rapport-tabell{ width:100%; border-collapse:collapse; min-width:460px; font-size:1.02rem; }
.rapport-tabell th, .rapport-tabell td{ padding:.9rem 1rem; text-align:left; border-bottom:1px solid var(--line); }
.rapport-tabell thead th{ font-family:var(--font-display); font-weight:800; color:var(--ink); border-bottom:2px solid var(--ink-stamp); }
.rapport-tabell tbody th{ font-weight:700; color:var(--ink); }
.rapport-tabell td{ font-variant-numeric:tabular-nums; color:var(--muted); }
.rapport-tabell .col-senior{ color:var(--pine); font-weight:800; font-family:var(--font-display); }
.rapport-tabell tbody tr:last-child th, .rapport-tabell tbody tr:last-child td{ border-bottom:none; }

/* =========================================================================
   ANALYSESIDE — side-scopet polish (påvirker KUN /seniorlan-analyse/).
   Alt er scopet under .analyse eller .dstat-grid--tre, så de DELTE
   komponentene (forside + undersider) er helt urørt.
   ========================================================================= */

/* OPPGAVE 1 — Symmetrisk hovedfunn-rutenett: 3×2 desktop, 2 medium, 1 mobil.
   Alle seks kortene like høye, ingen løsrevet 4+2-rad. */
.dstat-grid--tre{ grid-template-columns:repeat(3, 1fr); align-items:stretch; }
.dstat-grid--tre .dstat-card{
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.dstat-grid--tre .dstat-card:hover{ transform:translateY(-4px); box-shadow:9px 11px 0 -1px var(--brass); }
.dstat-grid--tre .dstat-card--accent:hover{ box-shadow:9px 11px 0 -1px var(--brass); }
/* De store tallene skal aldri brekke stygt til to linjer */
.dstat-grid--tre .dstat-num{
  white-space:nowrap;
  font-size:clamp(2rem, 4.4vw, 2.9rem);
  font-variant-numeric:tabular-nums;
}
@media (max-width:920px){ .dstat-grid--tre{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .dstat-grid--tre{ grid-template-columns:1fr; } }

/* OPPGAVE 2 — figurkortene: rolig løft + polert caption med skillelinje */
.analyse .rapport-figur{
  position:relative;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.analyse .rapport-figur:hover{
  transform:translateY(-3px);
  box-shadow:11px 12px 0 -2px var(--brass);
}
.analyse .rapport-figur__cap{
  font-size:clamp(1.18rem, 1.05rem + .5vw, 1.36rem); letter-spacing:-.01em;
}
.analyse .rapport-figur__sub{
  padding-bottom:clamp(1rem, 2.2vw, 1.4rem);
  border-bottom:1.5px solid var(--line);
  margin-bottom:clamp(1.3rem, 2.8vw, 1.8rem);
}
/* mild sheen + litt høyere spor på søylene */
.analyse .bar__fill, .analyse .paradox__fill{ box-shadow:inset 0 2px 0 0 rgba(255,255,255,.18); }
.analyse .bar__track{ height:34px; }

/* Paradoks-visualet ekstra slående — sidens kjernepoeng */
.analyse .paradox{ gap:1.6rem; }
.analyse .paradox__track{
  height:clamp(52px, 9vw, 64px);
  border:1.5px solid var(--ink-stamp);
  box-shadow:4px 4px 0 -1px var(--ink-stamp);
}
.analyse .paradox__fill{ transition:width 1.1s var(--ease); min-width:8px; }
.analyse .paradox__num{ font-size:clamp(1.7rem, 4.6vw, 2.3rem); }

/* Sammenligningstabell: rolig zebra, fremhevet senior-kolonne, hover-rad */
.analyse .rapport-tabell{ border:1.6px solid var(--ink-stamp); border-radius:var(--r-sm); overflow:hidden; }
.analyse .rapport-tabell thead th{ background:var(--pine-soft); }
.analyse .rapport-tabell tbody tr:nth-child(even){ background:var(--bg-soft); }
.analyse .rapport-tabell tbody tr:hover{ background:var(--brass-soft); }
.analyse .rapport-tabell .col-senior{ background:rgba(30,77,58,.06); }

/* -------------------------------------------------------------------------
   8) TRYGGHETSKORT (assurance)
   ------------------------------------------------------------------------- */
.assurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;           /* alle kort NØYAKTIG like høye, også ved wrap */
  gap: clamp(1rem, 2vw, 1.5rem);
}
.assurance {
  display: flex;
  flex-direction: column;
  align-items: center;           /* midtstilt: ikon + tittel + tekst sentrert */
  text-align: center;
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  padding: clamp(1.75rem, 2.6vw, 2.35rem) clamp(1.35rem, 2.2vw, 1.85rem);
  box-shadow: 5px 5px 0 0 var(--ink-stamp);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.assurance:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 0 var(--brass); }
/* Finere ikon-plate: rund messing-innramming rundt furugrønn plate,
   sentrert med hard offset-skygge (samme boks-håndverk som resten). */
.assurance .a-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--pine);
  color: #FDF7EC;
  border: 2px solid var(--ink-stamp);
  box-shadow: 3px 3px 0 0 var(--brass);
  margin-bottom: 1.35rem;
}
.assurance .a-ic svg { width: 30px; height: 30px; }
.assurance h3 { font-size: 1.26rem; line-height: 1.25; margin-bottom: .6rem; }
/* Reserver to linjer til korttittelen i fler-kolonne-rader, så brødteksten
   under starter på samme linje i alle kortene (jevn rytme, ingen «nesten på linje»). */
@media (min-width: 561px) { .assurance h3 { min-height: calc(2 * 1.25em); } }
.assurance p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 30ch; }

/* -------------------------------------------------------------------------
   9) REDAKSJONELL FORKLARING (tekst + boks, uten foto)
   ------------------------------------------------------------------------- */
.explain {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
.explain__body > p { margin-top: 1.1rem; color: var(--ink); font-size: 1.12rem; line-height: 1.7; }
.explain__body > p:first-child { margin-top: 0; }
.explain__body > p strong { color: var(--ink); }
.explain__body .pullquote { margin: 1.6rem 0; }
.explain__body .sources { margin-top: 1.4rem; }
.explain__aside { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); align-content: start; }

/* Definisjonskort — redaksjonell boks (hårfin ramme + hard offset) */
.define {
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-left: 5px solid var(--brass);
  border-radius: 5px;
  padding: 1.5rem 1.6rem;
  box-shadow: 5px 5px 0 0 var(--ink-stamp);
}
.define__term {
  font-family: var(--font-display);
  font-weight: 800; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brass);
}
.define__label { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); margin: .4rem 0 .55rem; }
.define p:not(.define__label) { color: var(--muted); font-size: 1.02rem; line-height: 1.6; }

/* Definisjonsrad (tre kort side om side) */
.define-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  /* Luft under boksene også, så etterfølgende avsnitt ikke havner oppi
     boks-skyggen (den harde offset-skyggen stikker ~6px ned). */
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Pine info-boks — «passer typisk for deg» */
.info-panel {
  background: var(--pine);
  color: #F3EEE4;
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  padding: clamp(1.7rem, 3vw, 2.2rem);
  box-shadow: 6px 6px 0 0 var(--ink-stamp);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.info-panel .info-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .info-panel .info-list { grid-template-columns: 1fr; } }
/* Info-panel plassert i høyre kolonne (aside): smalt felt → én kolonne,
   ingen topp-margin (aside-grid styrer avstanden med gap). */
.explain__aside .info-panel { margin-top: 0; }
.explain__aside .info-panel .info-list { grid-template-columns: 1fr; }
.info-panel h3 { color: #fff; font-size: 1.3rem; margin-bottom: 1.1rem; }
.info-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.info-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.05rem; line-height: 1.5; color: #E7EFE7; }
.info-list li b { color: #fff; }
.info-list svg { width: 24px; height: 24px; flex: none; color: #FFD98A; margin-top: .1rem; }

.pullquote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  color: var(--pine);
  letter-spacing: -0.02em;
  padding-left: 1.25rem;
  border-left: 4px solid var(--brass);
}
.section--pine .pullquote { color: #FFE9C2; border-left-color: #FFD98A; }

.sources { font-size: .95rem; color: var(--muted); }
.sources__label {
  font-family: var(--font-display);
  font-weight: 800; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brass);
  margin-right: .5rem;
}
.sources a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.section--pine .sources { color: #C9D5C7; }
.section--pine .sources a { color: #C9D5C7; }

/* generisk «narrow» tekstkolonne.
   NB: kun DIREKTE p-barn styles her, så .narrow ikke lekker tekstregler
   inn i nøstede komponenter (kort, .prose) som har egen rytme/typografi. */
.narrow { max-width: 780px; }
.narrow > p { margin-top: 1.1rem; font-size: 1.12rem; color: var(--ink); line-height: 1.7; }
.narrow > p:first-child { margin-top: 0; }
.narrow > p strong { color: var(--ink); }

/* -------------------------------------------------------------------------
   10) STEG
   ------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  counter-reset: step;
}
/* Tre-stegs-variant (f.eks. utbetalingsformer): tre like kolonner som fyller
   raden, så boksene står midtstilt uten en tom fjerde kolonne til høyre. */
.steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .steps--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps--3 { grid-template-columns: 1fr; } }
.step {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  padding: 1.75rem 1.5rem;
  box-shadow: 5px 5px 0 0 var(--ink-stamp);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  text-align: center;
}
.step:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 0 var(--brass); }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border-radius: 4px;
  background: var(--pine);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.4rem;
  margin-bottom: 1.15rem;
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 3px 3px 0 0 var(--brass);
}
.step h3 { font-size: 1.24rem; margin-bottom: .5rem; }
@media (min-width: 561px) { .step h3 { min-height: calc(2 * 1.12em); } }
.step p { color: var(--muted); font-size: 1.02rem; line-height: 1.55; }

/* Steg-for-steg: koble de fire kortene til én prosess 1→2→3→4.
   Desktop (4-kol): stiplet forbindelseslinje + pilspiss i mellomrommet,
   i høyde med tallmerkene (padding-top 1.75rem + halv badge 27px ≈ 55px). */
@media (min-width: 1025px) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; z-index: 3;
    top: 55px; left: 100%;
    width: clamp(1rem, 2vw, 1.5rem); height: 0;
    border-top: 2.5px solid var(--brass);
    transform: translateY(-50%);
  }
  .step:not(:last-child)::before {
    content: ""; position: absolute; z-index: 3;
    top: 55px; left: calc(100% + clamp(1rem, 2vw, 1.5rem));
    width: 8px; height: 8px;
    border-top: 2.5px solid var(--brass);
    border-right: 2.5px solid var(--brass);
    transform: translate(-8px, -50%) rotate(45deg);
  }
}
/* Mobil (1-kol): vertikalt spor mellom kortene, midtstilt under det
   sentrerte tallmerket. */
@media (max-width: 560px) {
  .steps { row-gap: clamp(1.6rem, 6vw, 2.1rem); }
  .step:not(:last-child)::after {
    content: ""; position: absolute; z-index: 3;
    top: 100%; left: 50%; width: 0;
    height: clamp(1.6rem, 6vw, 2.1rem);
    border-left: 2.5px solid var(--brass);
    transform: translateX(-50%);
  }
  .step:not(:last-child)::before {
    content: ""; position: absolute; z-index: 3;
    left: 50%; top: calc(100% + clamp(1.6rem, 6vw, 2.1rem));
    width: 8px; height: 8px;
    border-right: 2.5px solid var(--brass);
    border-bottom: 2.5px solid var(--brass);
    transform: translate(-50%, -8px) rotate(45deg);
  }
}

/* -------------------------------------------------------------------------
   11) KALKULATOR
   ------------------------------------------------------------------------- */
.calc-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 6px;
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  box-shadow: 7px 7px 0 0 var(--ink-stamp);
  align-items: stretch;
  max-width: 960px;
  margin-inline: auto;
}

/* Venstre spalte: rolig, jevn vertikal rytme. Boksede kontroll-felt gir
   spalten samme visuelle tyngde som det grønne resultat-kortet — ingen
   tomt gap under knappen lenger. */
.calc-panel__form {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.35rem);
  justify-content: space-between;
}
.calc-panel__form-head { display: flex; flex-direction: column; gap: .3rem; }
.calc-panel__kicker {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass);
}
.calc-panel__form-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 800; color: var(--ink);
  line-height: 1.12; letter-spacing: -0.01em;
}
.calc-panel__form .btn { margin-top: .1rem; }
@media (max-width: 760px) {
  .calc-panel__form { justify-content: flex-start; }
  .calc-panel__form .btn { margin-top: .3rem; }
}

/* Boks-språk (mykt): 1.5px hårstrek, varm sand-bunn, 5px radius.
   Bevisst uten hard offset-skygge så det ikke konkurrerer med panelet. */
.calc-panel__form .field {
  display: flex; flex-direction: column;
  gap: .55rem;
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: 5px;
  padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2.2vw, 1.3rem);
}
.calc-panel__form .field__top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; flex-wrap: wrap;
}
.calc-panel__form .field label {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem;
  color: var(--ink);
  margin: 0;
}
.calc-panel__form .field__value {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--pine);
  font-size: 1.35rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc-panel__form .field__scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 700;
  color: var(--muted);
  letter-spacing: .01em;
}
/* Tydeligere spor på den varme sand-bunnen (senior-UX / kontrast) */
.calc-panel__form .field input[type="range"] { height: 44px; }
.calc-panel__form .field input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--pine) 0%, var(--pine) var(--fill,50%), #D6CAB4 var(--fill,50%), #D6CAB4 100%);
}
.calc-panel__form .field input[type="range"]::-moz-range-track { background: #D6CAB4; }
.calc-panel__form .field input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--brass); outline-offset: 2px;
}

/* Range sliders */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 52px;
  background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 12px; border-radius: var(--pill);
  background: linear-gradient(to right, var(--pine) 0%, var(--pine) var(--fill,50%), var(--line) var(--fill,50%), var(--line) 100%);
}
input[type="range"]::-moz-range-track {
  height: 12px; border-radius: var(--pill); background: var(--line);
}
input[type="range"]::-moz-range-progress {
  height: 12px; border-radius: var(--pill); background: var(--pine);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px; margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--pine);
  box-shadow: var(--sh-2);
}
input[type="range"]::-moz-range-thumb {
  width: 34px; height: 34px;
  border-radius: 50%; background: #fff;
  border: 4px solid var(--pine);
  box-shadow: var(--sh-2);
}
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--brass); outline-offset: 2px; }

.calc-panel__result {
  background: var(--pine);
  color: #F3EEE4;
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  box-shadow: 4px 4px 0 0 var(--ink-stamp);
  padding: clamp(1.6rem, 3.2vw, 2.3rem);
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
}
/* Resultat-toppen: liten etikett + stort tall, avsluttet med en hårfin
   delelinje for tydelig hierarki. */
.calc-panel__result-head {
  padding-bottom: 1.3rem;
  border-bottom: 1.5px solid rgba(255,255,255,.16);
}
.calc-panel__result h3 {
  color: #CDDBCB;
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
}
.result-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 3.5rem);
  color: #fff;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: .5rem 0 0;
  font-variant-numeric: tabular-nums;
}
.calc-bars { display: grid; gap: 1.05rem; margin: 0; }
.calc-bar__label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem;
  font-size: .92rem; color: #CDDBCB; font-weight: 700; margin-bottom: .45rem;
}
.calc-bar__label b { color: #fff; font-family: var(--font-display); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.calc-bar__track { height: 16px; border-radius: var(--pill); background: rgba(255,255,255,.14); overflow: hidden; }
.calc-bar__fill { height: 100%; border-radius: var(--pill); transition: width .5s var(--ease); }
.calc-bar__fill--total { background: rgba(255,255,255,.42); }
.calc-bar__fill--free { background: linear-gradient(90deg, #E6A94A, #FFD98A); }
.calc-panel__result > p { color: #DDE7DB; font-size: .95rem; line-height: 1.6; margin: 0; }

/* -------------------------------------------------------------------------
   12) FORDELER / ULEMPER
   ------------------------------------------------------------------------- */
.pro-con {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;   /* begge boksene NØYAKTIG like høye */
}
.pc-col {
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  box-shadow: 6px 6px 0 0 var(--ink-stamp);
}
.pc-col--pro { border-top: 6px solid var(--pine); }
.pc-col--con { border-top: 6px solid var(--brass); }
.pc-col h3 {
  display: flex; align-items: center; gap: .65rem;
  font-size: 1.4rem; margin-bottom: 1.2rem;
}
.pc-col--pro h3 { color: var(--pine); }
.pc-col--con h3 { color: var(--brass); }
.pc-col h3 svg { width: 28px; height: 28px; }
.pc-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.pc-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: 1.06rem; line-height: 1.55; color: var(--ink); }
.pc-list svg { width: 24px; height: 24px; flex: none; margin-top: .15rem; }
.pc-col--pro .pc-list svg { color: var(--pine); }
.pc-col--con .pc-list svg { color: var(--brass); }

/* -------------------------------------------------------------------------
   13) DRAWBACK-LISTE (når ikke passer)
   ------------------------------------------------------------------------- */
.drawback-list { list-style: none; padding: 0; counter-reset: dl; display: grid; gap: 1rem; margin-top: 1.5rem; }
.drawback-list li {
  counter-increment: dl;
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  padding: 1.4rem 1.6rem 1.4rem 4.6rem;
  box-shadow: 4px 4px 0 0 var(--ink-stamp);
  font-size: 1.06rem; line-height: 1.6; color: var(--ink);
}
.drawback-list li::before {
  content: counter(dl);
  position: absolute; left: 1.3rem; top: 1.3rem;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brass-soft);
  color: var(--brass);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 4px;
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
}
.drawback-list li b { color: var(--ink); }
.drawback-close { margin-top: 1.5rem; font-size: 1.12rem; color: var(--ink); }

/* -------------------------------------------------------------------------
   14) PINE GARANTI-BÅND (uten foto — segl-kort + løfter)
   ------------------------------------------------------------------------- */
.guarantee {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
}
.guarantee__seal-card {
  background: #FBFDF9;
  box-shadow: 7px 7px 0 0 var(--brass);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  text-align: center;
}
.guarantee__seal {
  display: inline-block;
  width: clamp(92px, 20vw, 118px);
  margin-bottom: 1.1rem;
  transform: rotate(-4deg);
}
.guarantee__seal svg { width: 100%; height: auto; }
.guarantee__seal-kicker {
  font-family: var(--font-display);
  font-weight: 800; font-size: .8rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.1rem;
}
.guarantee__promises { list-style: none; padding: 0; display: grid; gap: .95rem; text-align: left; }
.guarantee__promises li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.04rem; line-height: 1.5; color: var(--ink); }
.guarantee__promises li b { color: var(--pine); }
.guarantee__promises svg { width: 24px; height: 24px; flex: none; color: var(--pine); margin-top: .1rem; }
.guarantee__text h2 { color: #fff; }
.guarantee__text > p { margin-top: 1.1rem; color: #D8E2D6; font-size: 1.12rem; line-height: 1.65; }
.guarantee__text > p strong { color: #fff; }
.guarantee__text .btn-row { margin-top: 1.75rem; justify-content: flex-start; }
.guarantee__text .sources { margin-top: 1.4rem; }

/* -------------------------------------------------------------------------
   15) SAMMENLIGNINGSTABELL
   ------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 6px 6px 0 0 var(--ink-stamp);
  background: var(--card);
}
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 1.02rem;
}
.compare-table caption {
  text-align: left;
  padding: 1.1rem 1.3rem;
  color: var(--muted);
  font-size: .95rem;
  border-bottom: 1px solid var(--line);
}
.compare-table th, .compare-table td { padding: 1rem 1.15rem; text-align: center; vertical-align: middle; }
.compare-table thead th {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.05rem;
  color: var(--ink);
  border-bottom: 2px solid var(--line);
  background: var(--bg-soft);
}
.compare-table tbody th[scope="row"] {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem;
  color: var(--ink);
  min-width: 190px;
}
.compare-table tbody tr + tr th, .compare-table tbody tr + tr td { border-top: 1px solid var(--line); }
.compare-table td { color: var(--muted); font-weight: 600; }
.col-highlight {
  background: var(--pine-soft) !important;
  color: var(--pine) !important;
  font-weight: 800;
  /* Vertikale rammer binder den uthevede kolonnen sammen som ett «featured»-felt */
  border-left: 2px solid var(--pine) !important;
  border-right: 2px solid var(--pine) !important;
}
.compare-table thead th.col-highlight {
  background: var(--pine) !important;
  color: #fff !important;
  border-bottom-color: var(--pine) !important;
  border-top: 2px solid var(--pine) !important;
}
.compare-table tbody tr:last-child .col-highlight {
  border-bottom: 2px solid var(--pine) !important;
}
.cell-icon { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; }
.cell-icon svg { width: 20px; height: 20px; }
.cell-yes { color: var(--pine); }
.cell-no { color: #A2382B; }
.col-highlight .cell-yes { color: var(--pine); }

/* -------------------------------------------------------------------------
   16) SØKNADSSKJEMA
   ------------------------------------------------------------------------- */
.soknad-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.soknad-points { list-style: none; padding: 0; display: grid; gap: .9rem; }
.soknad-points li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.1rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.soknad-points svg { width: 26px; height: 26px; color: var(--pine); flex: none; margin-top: .1rem; }

.soknad-form {
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 6px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 7px 7px 0 0 var(--ink-stamp);
}
.soknad-fields { display: grid; gap: 1.15rem; }
.soknad-form .field label { margin-bottom: .5rem; }
.req { color: #A2382B; }
.opt { font-weight: 600; font-size: .9rem; color: var(--muted); }
.soknad-form input[type="text"],
.soknad-form input[type="tel"],
.soknad-form input[type="number"],
.soknad-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 4px;
  padding: .85rem 1rem;
  min-height: 56px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.soknad-form textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.soknad-form input:focus, .soknad-form textarea:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 3px 3px 0 0 var(--brass);
}
.form-consent {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: 1rem; color: var(--muted); line-height: 1.45;
  cursor: pointer;
}
.form-consent input { width: 26px; height: 26px; flex: none; accent-color: var(--pine); margin-top: .1rem; }
.form-assurance {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .95rem; color: var(--muted); line-height: 1.45;
}
.form-assurance svg { width: 22px; height: 22px; color: var(--pine); flex: none; margin-top: .1rem; }

.form-success { text-align: center; padding: 1.5rem 1rem; }
.form-success__seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--pine-soft); color: var(--pine);
  margin-bottom: 1.2rem;
}
.form-success__seal svg { width: 42px; height: 42px; }
.form-success h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.form-success p { color: var(--muted); font-size: 1.1rem; }

/* «fylles inn»-badge (rådgiver + skjema-plassholdere) */
.slot-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brass-soft);
  color: var(--brass);
  font-family: var(--font-display);
  font-weight: 700; font-size: .95rem;
  padding: .3rem .75rem;
  border-radius: var(--pill);
  border: 1px dashed var(--brass);
}
.slot-badge::before { content: "✎"; font-size: .9em; }

/* -------------------------------------------------------------------------
   17) RÅDGIVER
   ------------------------------------------------------------------------- */
.advisor {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 1.6fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: stretch;
  background: var(--bg-soft);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 6px;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: 7px 7px 0 0 var(--ink-stamp);
}
.advisor__figure { position: relative; display: flex; }
.advisor__figure > .advisor__portrait { flex: 1; }
.advisor__portrait {
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--ink-stamp);
  border-radius: 6px;
  box-shadow: 4px 4px 0 0 var(--brass);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--pine-soft) 0%, #FBFDF9 70%);
  max-width: 300px;
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}
.advisor__avatar {
  width: clamp(84px, 22vw, 104px); height: clamp(84px, 22vw, 104px);
  border-radius: 50%;
  background: var(--pine); color: #F3EEE4;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 3px 3px 0 0 var(--ink-stamp);
}
.advisor__avatar svg { width: 56%; height: 56%; }
.advisor__portrait-mark {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display);
  font-weight: 700; font-size: .9rem;
  color: var(--brass);
  background: var(--brass-soft);
  border: 1px dashed var(--brass);
  border-radius: var(--pill);
  padding: .32rem .8rem;
}
.advisor__portrait-mark::before { content: "✎"; font-size: .9em; }
.advisor__figcap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 2.1rem .9rem .95rem;
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: #FBF7EE; text-align: center;
  background: linear-gradient(to top, rgba(15,40,28,.95) 0%, rgba(15,40,28,.68) 45%, rgba(15,40,28,0) 100%);
}
/* liten brass-keyline over teksten = redaksjonelt, troverdig lower-third */
.advisor__figcap::before {
  content: "";
  display: block;
  width: 32px; height: 3px;
  margin: 0 auto .55rem;
  background: var(--brass);
  border-radius: 2px;
}

.advisor__role {
  font-family: var(--font-display);
  font-weight: 800; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brass);
}
.advisor__name { font-size: clamp(1.7rem, 3vw, 2.35rem); margin: .35rem 0 .6rem; }
.advisor__body > p { color: var(--muted); font-size: 1.08rem; line-height: 1.65; margin-top: .8rem; }
.advisor__creds { list-style: none; padding: 0; display: grid; gap: .75rem; margin: 1.35rem 0; }
.advisor__creds li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.02rem; color: var(--ink); font-weight: 600; line-height: 1.45; }
.advisor__creds svg { width: 24px; height: 24px; color: var(--pine); flex: none; margin-top: .1rem; }
.advisor__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem; line-height: 1.4;
  color: var(--pine);
  padding-left: 1.2rem;
  border-left: 4px solid var(--brass);
  margin: 1.15rem 0 1.25rem;
  letter-spacing: -0.01em;
}
.advisor__contact { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.advisor__contact a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700;
  color: var(--pine); text-decoration: none;
  min-height: 48px;
}
.advisor__contact svg { width: 22px; height: 22px; }
.advisor__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Ekte portrettfoto i det stemplede rammehåndverket (Edmund).
   Fotoet fyller HELE venstre kolonne i full høyde (matcher tekstkolonnen), så
   det aldri blir tomrom over eller under. Bildeteksten ligger som en diskré
   stripe nederst på selve fotoet i stedet for under det. */
.advisor__portrait--photo {
  padding: 0;
  background: #FBFDF9;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
  max-width: none;
  aspect-ratio: auto;
  position: relative;
}
.advisor__photo {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: 46% 22%;
  border-radius: inherit;
  display: block;
}
/* Stillingslinje under navnet */
.advisor__title-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pine);
  margin: -.15rem 0 .2rem;
}
.advisor__body > p.advisor__title-line { color: var(--pine); }
/* Attribusjon i sitatet */
.advisor__cite {
  display: block;
  margin-top: .6rem;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brass);
}

/* -------------------------------------------------------------------------
   18) FAQ
   ------------------------------------------------------------------------- */
.faq { max-width: 820px; display: grid; gap: 1.1rem; }
.faq-item {
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  box-shadow: 4px 4px 0 0 var(--ink-stamp);
  overflow: hidden;
  transition: box-shadow .18s var(--ease);
}
.faq-item:has(.faq-q[aria-expanded="true"]) { box-shadow: 6px 7px 0 0 var(--brass); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.1rem;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  padding: 1.4rem 1.6rem;
  min-height: 68px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.35;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.faq-q:hover { color: var(--pine); background: var(--pine-soft); }
.faq-q:hover .faq-icon { background: var(--pine); color: #fff; }
/* Åpen tilstand: uthevet spørsmål + hårfin delelinje ned mot svaret */
.faq-q[aria-expanded="true"] {
  color: var(--pine);
  border-bottom: 1.5px solid var(--line);
}
.faq-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--pine-soft); color: var(--pine);
  border: 1.5px solid var(--ink-stamp);
  transition: transform .28s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.faq-icon svg { width: 22px; height: 22px; }
/* Chevron peker ned når lukket, roterer opp når åpen */
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); background: var(--pine); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.faq-a__inner { padding: 1.25rem 1.6rem 1.5rem; }
.faq-a__inner p { color: var(--muted); font-size: 1.15rem; line-height: 1.7; }

/* -------------------------------------------------------------------------
   18b) MIDTSTILLING — tre seksjoner (#to-typer, #naar-ikke, #faq)
   Symmetrisk, sentrert innhold. Scoped per seksjon så resten av siden
   (venstrestilt prose, andre .define/.narrow) ikke påvirkes.
   ------------------------------------------------------------------------- */

/* Brødtekst-kolonner: sentrert blokk + sentrert tekst, behagelig lesebredde */
#to-typer .narrow {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
/* #naar-ikke: rolig, VENSTRESTILT lesekolonne (ikke sentrert lenger) */
#naar-ikke .narrow { max-width: 820px; margin-inline: auto; }

/* Seksjon 1 — «Kort forklart»-kortene: sentrert, symmetrisk rad + sentrert korttekst.
   Brass-aksenten flyttes fra venstre til topp så et sentrert kort blir symmetrisk. */
#to-typer .define-strip {
  max-width: 1040px;
  margin-inline: auto;
  justify-content: center;
}
#to-typer .define {
  text-align: center;
  border-left: 1.5px solid var(--ink-stamp);
  border-top: 5px solid var(--brass);
}

/* Seksjon 2 — nummerert 1–5-liste: ren, venstrestilt kortliste.
   Tydelig tallmerke til venstre, spørsmålet som fet mini-overskrift,
   svaret på egen linje under. Boks-håndverk (ramme + hard offset) beholdt. */
#naar-ikke .drawback-list { max-width: 820px; margin-inline: auto; gap: 1.1rem; }
#naar-ikke .drawback-list li {
  padding: 1.5rem 1.7rem 1.5rem 5.2rem;
  text-align: left;
  font-size: 1.08rem; line-height: 1.6;
}
#naar-ikke .drawback-list li::before {
  top: 1.5rem; left: 1.5rem; transform: none;
  width: 46px; height: 46px; font-size: 1.2rem;
  background: var(--pine); color: #FDF7EC;
  box-shadow: 2px 2px 0 0 var(--brass);
}
#naar-ikke .drawback-list li b {
  display: block; margin-bottom: .4rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.16rem; color: var(--pine); line-height: 1.3;
}
@media (max-width: 480px) {
  #naar-ikke .drawback-list li { padding: 1.35rem 1.35rem 1.35rem 1.35rem; }
  #naar-ikke .drawback-list li::before { position: static; margin-bottom: .9rem; }
}

/* Seksjon 3 — FAQ: blokken står som en sentrert kolonne på siden, men
   innholdet inni boksene er VENSTRESTILT (naturlig accordion: spørsmål til
   venstre, chevron til høyre; svar venstrestilt og lett å lese). */
#faq .faq { margin-inline: auto; }

/* -------------------------------------------------------------------------
   19) STOR CTA-BÅND (solid pine, uten foto)
   ------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  /* Nederste laget fader til footer-fargen så båndet smelter sømløst inn i footeren */
  background:
    linear-gradient(to bottom, transparent 50%, var(--pine-deep) 100%),
    radial-gradient(120% 130% at 100% 0%, #256B4D 0%, transparent 52%),
    radial-gradient(120% 130% at 0% 100%, #2A7856 0%, transparent 48%),
    var(--pine-deep);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--weave-dark);
  /* fader mot kantene så teksten i midten alltid har ren, kontrastrik bunn */
  -webkit-mask-image: radial-gradient(120% 120% at 50% 45%, #000 42%, transparent 80%);
          mask-image: radial-gradient(120% 120% at 50% 45%, #000 42%, transparent 80%);
  pointer-events: none;
}
.cta-band .section-title { color: #fff; }
.cta-band .eyebrow { color: #6D4712; background: var(--brass-soft); box-shadow: 2px 2px 0 0 var(--brass); margin-bottom: 1.25rem; }
.cta-band .section-intro { color: #E7EFE7; }
.cta-phone-big {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #fff; text-decoration: none;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.28);
  padding: .8rem 1.6rem;
  border-radius: var(--pill);
  min-height: 56px;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.cta-phone-big:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.cta-phone-big svg { width: 1.1em; height: 1.1em; color: #FFD98A; }

/* -------------------------------------------------------------------------
   20) FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--pine-deep);
  color: #C7D3C6;
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(1.75rem, 3vw, 3rem);
}
.footer-brand .brand { margin-bottom: 1.1rem; }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__name b { color: #FFD98A; }
.footer-brand p { font-size: 1rem; line-height: 1.6; color: #B7C5B6; }
.footer-brand .tekst-lenke { color: #fff; text-decoration-color: #FFD98A; }
.footer-authorities { display: flex; flex-wrap: nowrap; gap: .1rem .75rem; margin-top: 1rem; }
.footer-authorities a { display: inline-flex; align-items: center; min-height: 40px; color: #9FB29E; font-size: .85rem; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 520px) { .footer-authorities { flex-wrap: wrap; } .footer-authorities a { font-size: .9rem; } }
.footer-authorities a:hover { color: #fff; }

.footer-nav h4, .footer-contact-col h4 {
  color: #fff; font-size: 1.05rem; margin-bottom: 1rem;
  font-family: var(--font-display); font-weight: 800;
}
.footer-list { list-style: none; padding: 0; display: grid; gap: .2rem; }
.footer-list a { display: inline-flex; align-items: center; min-height: 40px; color: #C7D3C6; text-decoration: none; font-size: 1rem; }
.footer-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer-contact { display: grid; gap: .6rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-weight: 700; text-decoration: none; font-family: var(--font-display); min-height: 44px; }
.footer-contact svg { width: 20px; height: 20px; color: #FFD98A; flex: none; }
.footer-contact-col p { font-size: .95rem; color: #B7C5B6; line-height: 1.6; }

.footer-fineprint {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .88rem; color: #9FB29E; line-height: 1.55;
}
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-top: 1.25rem;
}
.footer-bottom p { font-size: .92rem; color: #9FB29E; }
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff;
}
.footer-social a:hover { background: rgba(255,255,255,.18); }
.footer-social svg { width: 20px; height: 20px; }

/* -------------------------------------------------------------------------
   21) REVEAL-ANIMASJONER
   ------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: .09s; }
.reveal--delay-2 { transition-delay: .18s; }
.reveal--delay-3 { transition-delay: .27s; }

/* -------------------------------------------------------------------------
   22) RESPONSIV
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-card .lead { max-width: 52ch; }
  .assurance-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .guarantee { grid-template-columns: 1fr; }
  .guarantee__seal-card { max-width: 560px; margin-inline: auto; width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  /* Mobil-meny */
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2);
    padding: 1rem var(--pad) 1.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: max-height .3s var(--ease), opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .main-nav.open {
    max-height: 460px; opacity: 1; visibility: visible; transform: none;
  }
  .main-nav > a:not(.btn) { font-size: 1.15rem; padding: 1rem .9rem; }
  .nav-cta { margin-left: 0; margin-top: .5rem; width: 100%; }
  .phone-num { display: none; }
  .phone-cta { padding: 0; }
}

@media (max-width: 760px) {
  .explain { grid-template-columns: 1fr; }
  .calc-panel { grid-template-columns: 1fr; }
  .pro-con { grid-template-columns: 1fr; }
  .soknad-grid { grid-template-columns: 1fr; }
  .advisor { grid-template-columns: 1fr; text-align: center; }
  .advisor__quote, .advisor__creds li { text-align: left; }
  .advisor__creds { max-width: 460px; margin-inline: auto; }
  .advisor__contact { justify-content: center; }
  /* Stablet: fotoet får et fast, fyldig format og full bredde – ingen tomrom */
  .advisor__figure { max-width: 360px; margin-inline: auto; }
  .advisor__portrait--photo { aspect-ratio: 4 / 5; min-height: 0; }
  .advisor__photo { min-height: 0; }
}

@media (max-width: 560px) {
  .assurance-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }

  /* Mildere offset-skygger på små skjermer (samme prinsipp som .card-editorial) */
  .assurance, .step, .pc-col, .define, .faq-item, .drawback-list li,
  .info-panel, .trust-row, .table-wrap { box-shadow: 4px 4px 0 0 var(--ink-stamp); }
  .calc-panel, .soknad-form, .advisor { box-shadow: 5px 5px 0 0 var(--ink-stamp); }
  .guarantee__seal-card { box-shadow: 5px 5px 0 0 var(--brass); }
  .hero-est__controls { grid-template-columns: 1fr; gap: .4rem; }
  .define-strip { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Kompakt mobil-hero: hold primær-CTA innen rekkevidde. */
  .hero-card { padding: 1.25rem 1.1rem 1.35rem; }
  .hero-lockup { gap: 1.2rem; }
  .hero-card .lead { margin-top: .55rem; }
  .hero-facts { margin-top: .9rem; gap: .5rem; }
  .hero-est { margin-top: 0; padding: 1.45rem .95rem .95rem; }
  .hero-est__result { margin-top: .55rem; padding-top: .6rem; }
  .hero-est__bar { margin-top: .5rem; }
  .hero-søk { margin-top: .85rem; min-height: 58px; }
}

@media (max-width: 400px) {
  /* Hold søk-knappens tekst på én linje på de smaleste skjermene. */
  .hero-søk { font-size: 1.06rem; gap: .45rem; padding-inline: 1rem; }
  .hero-søk svg { width: 1.05em; height: 1.05em; }
}

/* -------------------------------------------------------------------------
   23) REDUCED MOTION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   24) UNDERSIDER  (om-oss, kontakt, guider, personvern, retningslinjer)
   Additiv — samme redaksjonelle boks-håndverk (hårfin ramme + hard offset-
   skygge + skarpe kanter) som forsiden, moderne font og ren varm palett.
   Rører ikke forside-stiler.
   ========================================================================= */

/* Sticky-header (~76px) skal ikke dekke overskrifter man hopper til.
   Gjelder alle ankre/id-er på tvers av sidene, inkl. forsiden. */
[id] { scroll-margin-top: 96px; }

/* ---------- Brødsmulesti (tilbake til forsiden) ---------- */
.breadcrumb { margin-bottom: clamp(1.4rem, 3vw, 2.1rem); }
.breadcrumb a {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem;
  color: var(--pine); text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--brass); text-decoration-thickness: 2px;
}
.breadcrumb svg { width: 20px; height: 20px; flex: none; }

/* ---------- Sidehode (kicker + H1 + ingress) — midtstilt ---------- */
.subpage-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.subpage-head h1 {
  margin-top: 1.1rem;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.1rem);
  line-height: 1.06;
}
.subpage-head .lead {
  margin-top: 1.15rem;
  max-width: 60ch;
  margin-inline: auto;
  font-size: clamp(1.15rem, 0.5vw + 1.05rem, 1.3rem);
  color: var(--muted);
  line-height: 1.6;
  text-wrap: balance;   /* jevn ragging, ingen enslige orphan-ord */
}

/* Synlig byline / kvalitetssikret-linje (E-E-A-T) */
.byline {
  margin-top: 1.15rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--muted);
}
.byline a {
  color: var(--pine);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
}
.byline a:hover { text-decoration-color: var(--pine); }

/* Redaksjonell kicker-chip (matcher .hero-eyebrow) */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-weight: 800; font-size: .92rem;
  letter-spacing: .01em;
  color: #6D4712;
  background: var(--brass-soft);
  padding: .42rem .8rem .42rem .68rem;
  border: 1.5px solid var(--ink-stamp);
  border-radius: 3px;
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
}
.kicker::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 3px rgba(169,110,31,.22);
}

/* ---------- Redaksjonell prose (dokumenttekst, ~65ch) ---------- */
.prose { max-width: 65ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose > h2 {
  font-size: clamp(1.4rem, 1rem + 1.5vw, 1.9rem);
  line-height: 1.16;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1.5px solid var(--line);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.24rem; margin-top: 1.75rem; }
.prose p { font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.prose p strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.35rem; display: grid; gap: .55rem; }
.prose li { font-size: 1.1rem; line-height: 1.6; color: var(--ink); }
.prose li::marker { color: var(--brass); }
.prose .pullquote {
  margin: 1.75rem auto;
  text-align: center;
  padding-left: 0;
  border-left: 0;
  max-width: 34ch;
}
.prose .pullquote::before {
  content: "";
  display: block;
  width: 46px; height: 3px;
  margin: 0 auto .85rem;
  border-radius: 3px;
  background: var(--brass);
}
.prose .sources { margin-top: 1.75rem; }

/* ---------- Callout-boks (redaksjonell, brass-aksent) ---------- */
.callout {
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-left: 5px solid var(--brass);
  border-radius: 5px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 6px 6px 0 0 var(--ink-stamp);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.callout > * + * { margin-top: 1rem; }
.callout h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: 1.35rem; }
.callout p { font-size: 1.08rem; line-height: 1.65; color: var(--ink); }

/* ---------- Kontakt-kort ---------- */
.contact-cards {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
}
.contact-card {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  padding: clamp(1.5rem, 2.5vw, 1.9rem);
  box-shadow: 5px 5px 0 0 var(--ink-stamp);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
/* Handlingskort (ring/e-post): hele kortet klikkbart + pil-affordance */
.contact-card--action { cursor: pointer; }
.contact-card--action:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 0 var(--brass); }
.contact-card--action .contact-card__value::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.contact-card__arrow {
  position: absolute; z-index: 2;
  top: clamp(1.5rem, 2.5vw, 1.9rem); right: clamp(1.5rem, 2.5vw, 1.9rem);
  display: inline-flex; color: var(--brass); opacity: .5;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.contact-card__arrow svg { width: 22px; height: 22px; }
.contact-card--action:hover .contact-card__arrow { transform: translate(3px, -3px); opacity: 1; }
.contact-card--primary { border-top: 6px solid var(--pine); }
.contact-card__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 4px;
  background: var(--pine-soft); color: var(--pine);
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
  margin-bottom: 1rem;
}
.contact-card__ic svg { width: 28px; height: 28px; }
.contact-card__label {
  font-family: var(--font-display);
  font-weight: 800; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brass);
}
.contact-card__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.24rem;
  color: var(--ink);
  margin: .35rem 0 .55rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
a.contact-card__value {
  color: var(--pine); text-decoration: none;
  min-height: 44px; display: flex; align-items: center;
}
a.contact-card__value:hover {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--brass); text-decoration-thickness: 2px;
}
.contact-card p:not(.contact-card__label):not(.contact-card__value) {
  color: var(--muted); font-size: 1rem; line-height: 1.5;
}

/* ---------- Guide-kort ---------- */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.guide-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  padding: clamp(1.5rem, 2.5vw, 1.9rem);
  box-shadow: 5px 5px 0 0 var(--ink-stamp);
  text-decoration: none; color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.guide-card:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 0 var(--brass); }
.guide-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 4px;
  background: var(--pine); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 3px 3px 0 0 var(--brass);
  margin-bottom: 1.1rem;
}
.guide-card__title { font-size: 1.24rem; line-height: 1.2; margin-bottom: .5rem; color: var(--ink); }
.guide-card__desc { color: var(--muted); font-size: 1.02rem; line-height: 1.55; flex: 1 1 auto; }
.guide-card__go {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.15rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  color: var(--pine);
}
.guide-card__go svg { width: 20px; height: 20px; transition: transform .18s var(--ease); }
.guide-card:hover .guide-card__title { color: var(--pine); }
.guide-card:hover .guide-card__go svg { transform: translateX(4px); }

/* ---------- «Kommer snart»-boks (guider) — sentrert redaksjonell nøkkelboks ---------- */
.coming-soon {
  max-width: 660px;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.coming-soon__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 4px;
  background: var(--pine-soft); color: var(--pine);
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
  margin-bottom: 1.25rem;
}
.coming-soon__ic svg { width: 32px; height: 32px; }
.coming-soon h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.75rem); margin-bottom: .7rem; }
.coming-soon p {
  max-width: 52ch; margin-inline: auto;
  color: var(--muted); font-size: 1.08rem; line-height: 1.65;
}

/* ---------- Definisjonsliste (rettigheter) ---------- */
.detail-list { margin-top: 1.35rem; }
.detail-list dt {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.12rem;
  color: var(--pine);
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1.5px solid var(--line);
}
.detail-list dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.detail-list dd { margin: .4rem 0 0; color: var(--ink); font-size: 1.08rem; line-height: 1.6; }

/* ---------- «Sist oppdatert» + «fylles inn»-merke ---------- */
.page-meta {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1.5px solid var(--line);
  font-size: .98rem; color: var(--muted);
}
.fill-slot {
  display: inline-flex; align-items: center; gap: .35rem;
  vertical-align: baseline;
  background: var(--brass-soft);
  color: #6D4712;
  font-family: var(--font-display);
  font-weight: 700; font-size: .9rem;
  letter-spacing: .005em;
  padding: .12rem .6rem;
  border-radius: var(--pill);
  border: 1px dashed var(--brass);
  line-height: 1.35;
}
.fill-slot::before { content: "✎"; font-size: .9em; }

/* Undersider: mildere offset-skygger på små skjermer (som forsiden) */
@media (max-width: 560px) {
  .callout, .contact-card, .guide-card { box-shadow: 4px 4px 0 0 var(--ink-stamp); }
}

/* =========================================================================
   25) VEVTEKSTUR PÅ STORE LYSE FLATER
   Legger den dempede lin-vevteksturen (--weave-surface) på de STØRSTE, roligste
   lyse panelene → varm materialflate. Kun store flater → aldri travelt.
   Teksturen er så svak at tall, skjema-felt, kalkulator og boks-håndverket
   fortsatt leser knivskarpt.
   NB: må stå etter komponentenes egne `background`-shorthands (som ellers
   nullstiller background-image) – derfor plassert sist i fila.
   ========================================================================= */
.hero-card,
.calc-panel,
.soknad-form,
.advisor {
  background-image: var(--weave-surface);
}
/* Undersider: samme materialfølelse på de store lese-/kontaktflatene */
.callout,
.coming-soon {
  background-image: var(--weave-surface);
}

/* =========================================================================
   SØKNADS-MODAL (soknad-modal.js) — seniorlån-identitet, seniorvennlige felt
   ========================================================================= */
.sm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.1rem;
  background: rgba(20, 40, 30, .55);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.sm-overlay.aktiv { opacity: 1; visibility: visible; }
.sm-modal {
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 14px;
  box-shadow: 7px 7px 0 0 var(--ink-stamp);
  transform: translateY(14px) scale(.98);
  transition: transform .24s var(--ease);
}
.sm-overlay.aktiv .sm-modal { transform: none; }

.sm-topp {
  position: relative;
  padding: 1.5rem 1.4rem 1.3rem;
  text-align: center;
  color: #FAF5EA;
  background:
    radial-gradient(120% 130% at 0% 100%, #2A7856 0%, transparent 55%),
    var(--pine-deep);
  border-radius: 12px 12px 0 0;
}
.sm-lukk {
  position: absolute; top: .85rem; right: .85rem;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #FAF5EA;
  border: 1.5px solid rgba(255,255,255,.25); border-radius: 50%;
  cursor: pointer; transition: background .15s var(--ease);
}
.sm-lukk:hover, .sm-lukk:focus-visible { background: rgba(255,255,255,.24); }
.sm-lukk svg { width: 20px; height: 20px; }
.sm-logo-rad { display: inline-flex; align-items: center; gap: .5rem; }
.sm-logo-navn { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; }
.sm-logo-navn b { color: #FFD98A; font-weight: 800; }
.sm-tittel { margin: .7rem 0 .9rem; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff; }
.sm-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.sm-badge {
  font-size: .85rem; font-weight: 700; color: #EAF3EC;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  padding: .32rem .7rem; border-radius: var(--pill);
}

.sm-kropp { padding: 1.5rem 1.4rem 1.4rem; }
.sm-kropp.skjult { display: none; }
.sm-felt-grid { display: grid; gap: 1rem; }
.sm-felt { display: flex; flex-direction: column; gap: .4rem; text-align: left; }
.sm-label { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.sm-input {
  width: 100%; min-height: 54px;
  padding: .8rem 1rem;
  font-family: var(--font-body); font-size: 1.06rem; color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--ink-stamp); border-radius: 8px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.sm-input:focus-visible {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(30,77,58,.18);
}
.sm-input.sm-feil { border-color: #B0281F; box-shadow: 0 0 0 3px rgba(176,40,31,.15); }
.sm-send {
  width: 100%; margin-top: 1.25rem; min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  color: #fff; background: var(--pine);
  border: 2px solid var(--ink-stamp); border-radius: 8px;
  box-shadow: 4px 4px 0 0 var(--ink-stamp);
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.sm-send:hover:not(:disabled), .sm-send:focus-visible { transform: translateY(-2px); box-shadow: 6px 6px 0 0 var(--brass); }
.sm-send:disabled { opacity: .7; cursor: default; }
.sm-send svg { width: 20px; height: 20px; }
.sm-legal { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); text-align: center; }

.sm-suksess { display: none; padding: 2.4rem 1.6rem; text-align: center; }
.sm-suksess.synlig { display: block; }
.sm-suksess-ikon {
  width: 66px; height: 66px; margin: 0 auto 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pine-soft); color: var(--pine);
  border: 1.5px solid var(--ink-stamp); border-radius: 50%;
  box-shadow: 3px 3px 0 0 var(--ink-stamp);
}
.sm-suksess-ikon svg { width: 32px; height: 32px; }
.sm-suksess h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--pine); margin: 0 0 .6rem; }
.sm-suksess p { color: var(--ink); font-size: 1.06rem; line-height: 1.55; max-width: 34ch; margin: 0 auto 1.5rem; }
.sm-suksess-lukk {
  min-height: 50px; padding: .7rem 2rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--pine); background: #fff;
  border: 1.5px solid var(--ink-stamp); border-radius: 8px;
  box-shadow: 3px 3px 0 0 var(--ink-stamp); cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.sm-suksess-lukk:hover, .sm-suksess-lukk:focus-visible { transform: translateY(-2px); box-shadow: 5px 5px 0 0 var(--brass); }

@media (max-width: 420px) {
  .sm-tittel { font-size: 1.3rem; }
  .sm-modal { border-radius: 12px; }
}

/* =========================================================================
   KALKULATORSIDE (/seniorlan-kalkulator/) — additive regler.
   Gjenbruker hero-est-widgeten (samme id-er/JS), men presenterer den
   større og mer prominent i et sentrert «stage». Egen palett/box-craft.
   ========================================================================= */
.calc-stage {
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
}
.calc-stage__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.calc-stage__intro {
  margin: .7rem auto 0;
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}

/* Prominent utgave av anslags-widgeten: tyngre ramme + hardere offset-skygge,
   større resultattall. Innholdet leses venstrejustert (lettere for øyet). */
.calc-widget {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  text-align: left;
  border-width: 2px;
  box-shadow: 6px 6px 0 0 var(--ink-stamp);
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.15rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.4vw, 1.7rem);
}
.calc-widget .hero-est__amount {
  font-size: clamp(2.6rem, 1.2rem + 4vw, 3.6rem);
}
.calc-widget .hero-est__label {
  font-size: 1.05rem;
}
/* CTA + trust + telefon under widgeten holdes i samme stage-bredde. */
.calc-cta {
  margin-top: clamp(1.3rem, 2.6vw, 1.7rem);
}

@media (max-width: 560px) {
  .calc-widget { padding: 1.5rem 1rem 1.15rem; box-shadow: 5px 5px 0 0 var(--ink-stamp); }
}

/* -------- Avsluttende CTA-bånd (furugrønt) -------- */
.cta-slutt__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.cta-slutt__inner h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.4rem);
  line-height: 1.1;
  margin: 0;
  color: #FFFDF9;
}
.cta-slutt__inner p {
  margin: 1rem auto 0;
  max-width: 52ch;
  font-size: clamp(1.08rem, 0.4vw + 1rem, 1.22rem);
  line-height: 1.6;
  color: #E4EDE6;
  text-wrap: balance;
}

/* =========================================================================
   GUIDE-OVERSIKT (/guider/) — kort-rutenett
   ========================================================================= */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.guide-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.5vw, 1.85rem);
  text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.guide-card:hover, .guide-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 7px 9px 0 0 var(--brass);
}
.guide-card__tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 800; font-size: .72rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: #6D4712; background: var(--brass-soft);
  border: 1.5px solid var(--ink-stamp); border-radius: 3px;
  box-shadow: 2px 2px 0 0 var(--ink-stamp);
  padding: .3rem .6rem; margin-bottom: .95rem;
}
.guide-card__tag--tool { color: #14432E; background: var(--pine-soft); }
.guide-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.22rem, 1rem + .6vw, 1.42rem);
  color: var(--pine);
  margin: 0 0 .55rem; line-height: 1.18;
}
.guide-card__desc {
  color: var(--muted);
  font-size: 1.02rem; line-height: 1.5;
  margin: 0 0 1.15rem; flex: 1 1 auto;
}
.guide-card__more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 800; font-size: .96rem;
  color: var(--pine);
}
.guide-card__more svg { width: 18px; height: 18px; transition: transform .15s var(--ease); }
.guide-card:hover .guide-card__more svg { transform: translateX(3px); }

/* Kalkulator-feature — full bredde øverst i guide-oversikten */
.guide-feature {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.guide-feature:hover, .guide-feature:focus-visible {
  transform: translateY(-3px);
  box-shadow: 8px 10px 0 0 var(--brass);
}
.guide-feature__body { display: flex; flex-direction: column; align-items: flex-start; }
.guide-feature__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.15rem);
  color: var(--pine); line-height: 1.12; margin: 0 0 .6rem;
}
.guide-feature__desc {
  color: var(--muted); font-size: clamp(1.02rem, .98rem + .3vw, 1.14rem);
  line-height: 1.55; margin: 0 0 1.25rem; max-width: 46ch;
}
.guide-feature .guide-card__more { font-size: 1.05rem; }
.guide-feature__art {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.3rem, 2.8vw, 2rem);
  background: var(--pine-soft);
  border: 1.5px solid var(--ink-stamp); border-radius: 6px;
  box-shadow: inset 3px 3px 0 0 rgba(30,77,58,.09);
}
.gf-ill { width: 100%; max-width: 300px; height: auto; display: block; }
.gf-ln { fill: none; stroke: var(--pine); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.gf-coin { fill: var(--brass); stroke: var(--ink-stamp); stroke-width: 2.5; }
.gf-coin-ring { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.6; }
.gf-kr { fill: #fff; font-family: var(--font-display); font-weight: 800; font-size: 26px; }
.gf-bar { fill: var(--pine); }
.gf-bar--tall { fill: var(--brass); stroke: var(--ink-stamp); stroke-width: 2.5; }
@media (max-width: 720px) {
  .guide-feature { grid-template-columns: 1fr; }
  .gf-ill { max-width: 220px; }
}
.guide-card__tag--analyse { color: #fff; background: var(--brass); }
.guide-card__tag--historie { color: #fff; background: var(--pine); }

/* =========================================================================
   KUNDEHISTORIER — anonymiserte eksempelprofiler
   Redaksjonelle kort med monogram-avatar (ingen falske foto), messing-sitat
   og liten formåls-chip. Samme boks-håndverk som resten av domenet
   (1.5px ink-ramme + hard offset-skygge). Brukes både på egen side og som
   komprimert seksjon på forsiden.
   ========================================================================= */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.story {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 6px;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  box-shadow: 5px 5px 0 0 var(--ink-stamp);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.story:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 0 var(--brass); }
.story__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.05rem; }
.story__mono {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  color: #fff; background: var(--pine);
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 2px 2px 0 0 var(--brass);
}
.story__mono--brass { background: var(--brass); }
.story__who { display: flex; flex-direction: column; gap: .1rem; }
.story__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.12rem; color: var(--ink); line-height: 1.18;
}
.story__meta { font-size: .92rem; color: var(--muted); }
.story__tag {
  align-self: flex-start;
  font-family: var(--font-display); font-weight: 800;
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brass); background: var(--brass-soft);
  border: 1px solid var(--brass); border-radius: 100px;
  padding: .28rem .7rem; margin-bottom: .9rem;
}
.story__body { color: var(--ink); font-size: 1.03rem; line-height: 1.6; margin: 0 0 1.1rem; }
.story__quote {
  margin: auto 0 0; padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--brass);
  font-style: italic; color: var(--pine);
  font-size: 1.05rem; line-height: 1.5;
}
.story__amount {
  display: inline-flex; align-items: baseline; gap: .4rem;
  margin-top: 1.05rem;
  font-size: .92rem; color: var(--muted);
  border-top: 1px dashed var(--line); padding-top: .85rem;
}
.story__amount b { font-family: var(--font-display); color: var(--pine); font-size: 1.02rem; }

/* Ærlig informasjons-boks (metode/forbehold) for historiene */
.stories-note {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--pine-soft);
  border: 1.5px solid var(--ink-stamp); border-radius: 6px;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  box-shadow: 4px 4px 0 0 rgba(30,77,58,.12);
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
}
.stories-note svg { flex: none; width: 26px; height: 26px; color: var(--pine); margin-top: .1rem; }
.stories-note p { margin: 0; color: var(--ink); font-size: .99rem; line-height: 1.6; }
.stories-note b { color: var(--pine); }

/* =========================================================================
   OM OSS — verdikort / prinsipper  (egen signatur for om-oss-siden)
   Redaksjonelle kort med messing-topplinje og venstrestilt tekst. Bruker
   domenets egne tokens (pine/brass/pine-soft/ink-stamp) og samme boks-
   håndverk (1.5px ramme + hard offset-skygge) som resten av seniorlån, men
   med et annet uttrykk enn de midtstilte trygghetskortene lenger ned.
   ========================================================================= */
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  grid-auto-rows: 1fr;              /* like høye kort også ved wrap */
  gap: clamp(1rem, 2vw, 1.5rem);
}
.principle {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1.5px solid var(--ink-stamp);
  border-top: 5px solid var(--brass);
  border-radius: 5px;
  padding: clamp(1.6rem, 2.6vw, 2.15rem);
  box-shadow: 5px 5px 0 0 var(--ink-stamp);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.principle:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 0 var(--brass); }
.principle__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border-radius: 4px;
  background: var(--pine-soft);
  color: var(--pine);
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 3px 3px 0 0 var(--brass);
  margin-bottom: 1.25rem;
}
.principle__ic svg { width: 28px; height: 28px; }
.principle__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 800; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .3rem;
}
.principle h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.26rem; line-height: 1.22;
  margin-bottom: .55rem;
}
.principle p { color: var(--muted); font-size: 1.04rem; line-height: 1.6; }

/* Kildelinje sentrert under et midtstilt kort-rutenett (om-oss trust-seksjon) */
.sources--center {
  text-align: center;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

/* Selskapsfakta som ren triptyk på om-oss ("Hvem vi er"): tre like felt på
   brede skjermer, stablet til én kolonne på nettbrett og mobil. */
.define-strip--trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .define-strip--trio { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   OM-OSS — rytme og variasjon (bryter opp raden med nesten like hvite kort)
   To rolige boks-varianter i samme håndverk (1.5px ramme + hard offset-skygge),
   så siden får veksling uten å forlate identiteten.
   ------------------------------------------------------------------------- */

/* Grønn definisjonsboks — «den store fordelen». Lys furugrønn tint + furugrønn
   venstrekant, så fordel/bakside-paret leser som to ulike toner (grønn vs hvit)
   i stedet for to like hvite kort ved siden av hverandre. */
.define--pine {
  background: var(--pine-soft);
  border-left-color: var(--pine);
}
.define--pine .define__term { color: var(--pine); }

/* Fremhevet furugrønn åpenhets-boks — «Slik tjener vi penger». Et mørkt,
   redaksjonelt tyngdepunkt midt på siden som bryter opp de lyse kortene og
   gir siden et roligere driv nedover. Beholder messing-venstrekant. */
.callout--pine {
  background: var(--pine);
  color: #F3EEE4;
  box-shadow: 7px 7px 0 0 var(--ink-stamp);
}
.callout--pine h2 { color: #fff; }
.callout--pine p { color: #E7EFE7; }
.callout--pine .tekst-lenke { color: #FFE9C2; text-decoration-color: #FFD98A; }
.callout--pine .tekst-lenke:hover { text-decoration-color: #fff; }

/* =========================================================================
   KONTAKT — egen signatur for kontakt-siden
   To store handlingskort (ring / e-post) som tyngdepunkt på siden. Bygger på
   domenets boks-håndverk (1.5px ink-stamp-ramme + hard offset-skygge) og
   samme pine/brass-uttrykk. Skiller seg fra de smale kontakt-kortene ved å
   være bredere, roligere og med brass-skygge under ikonet (som verdikortene
   på om-oss), slik at siden får varme uten å ligne noe på de andre domenene.
   ========================================================================= */
.contact-cards--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-inline: auto;
}
.contact-cards--duo .contact-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 3vw, 2.35rem);
}
.contact-cards--duo .contact-card__ic {
  width: 62px; height: 62px;
  box-shadow: 3px 3px 0 0 var(--brass);
}
.contact-cards--duo .contact-card__ic svg { width: 32px; height: 32px; }
.contact-cards--duo .contact-card__value {
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.55rem);
}
/* Beskrivelsen fyller resten, så begge kort blir like høye ved wrap */
.contact-cards--duo .contact-card p:not(.contact-card__label):not(.contact-card__value) {
  margin-top: auto;
  font-size: 1.04rem;
  line-height: 1.55;
}
@media (max-width: 620px) {
  .contact-cards--duo { grid-template-columns: 1fr; }
}

/* =========================================================================
   «PÅ DENNE SIDEN» — diskré innholdsfortegnelse for lange dokumentsider
   (personvern, retningslinjer). En rolig aside i domenets boks-håndverk:
   varm sand-tint + hårfin ink-ramme + myk offset-skygge. Bevisst lettere
   enn innholdskortene, så den hjelper med navigering uten å stjele fokus
   fra brødteksten. Seniorvennlige tap-mål (≥44px) og AAA-kontrast.
   ========================================================================= */
.toc {
  max-width: 65ch;                       /* følger .prose-bredden, venstrestilt i .narrow */
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.35rem, 2.5vw, 1.75rem);
  background: var(--bg-soft);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  box-shadow: 4px 4px 0 0 var(--rule-soft);
}
.toc__title {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 .85rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6D4712;                        /* brass-blekk, AAA på sand-tint */
}
.toc__title::before {
  content: "";
  width: 9px; height: 9px; flex: none;
  background: var(--brass);
  border-radius: 2px;
  transform: rotate(45deg);
}
/* To balanserte spalter som leses RETT NEDOVER (som en bok-TOC), ikke rad for
   rad. Multi-column balanserer selv høyden uansett antall punkter (9 på
   personvern, 7 på retningslinjer), så en tittel som brytes til to linjer
   forskyver aldri nabospalten — hver spalte blir en egen, rolig ruled liste.
   Hårfin skillelinje per rad gir jevn vertikal rytme og et ryddig register-
   uttrykk. break-inside:avoid hindrer at en topunkts-tittel deles over spalter. */
.toc__list {
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: toc;
  column-count: 2;
  column-gap: clamp(1.75rem, 4vw, 3rem);
}
.toc__list li {
  counter-increment: toc;
  break-inside: avoid;
  border-bottom: 1px solid var(--line-soft);
}
.toc__list a {
  display: flex; align-items: baseline; gap: .7rem;
  min-height: 44px;
  padding: .62rem .25rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--pine);
  text-decoration: none;
}
.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  min-width: 2em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  color: var(--brass);
}
.toc__list a:hover,
.toc__list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
}
@media (max-width: 560px) {
  .toc { box-shadow: 3px 3px 0 0 var(--rule-soft); }
  .toc__list { column-count: 1; }
}

/* Anker-hopp fra innholdsfortegnelsen: la overskriften klarne den faste
   headeren (≈84px) i stedet for å havne delvis skjult bak den. */
.prose > h2[id] { scroll-margin-top: 100px; }

/* =========================================================================
   UNDERSIDER: symmetri — midtstill seksjonstitler + svarsetning + define-kort
   (som forsiden). Forsiden bruker ikke .prose, så den er urørt.
   ========================================================================= */
.prose > h2 { text-align: center; }
/* Svarsetningen (fet førstesetning rett under H2) midtstilles som forsidens intro.
   Kun når avsnittet starter med <strong> — så vanlige avsnitt på om-oss/juridiske
   sider (uten fet innledning) forblir venstrestilt. */
.prose > h2 + p:has(> strong:first-child) {
  text-align: center;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.1rem);
  max-width: 54ch;
  /* Egen «ingress/deck»-stil så svarsetningen skiller seg tydelig fra den
     venstrestilte brødteksten: display-fonten, brannfarge, litt større og
     luftigere. Leser som en redaksjonell ingress, ikke bare fet brødtekst. */
  font-family: var(--font-display);
  color: var(--pine);
  font-size: clamp(1.14rem, 1rem + .55vw, 1.3rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
}
.prose > h2 + p:has(> strong:first-child) > strong {
  font-weight: 700;   /* display-fonten trenger ikke 800 her */
  color: inherit;
}
/* Define-kortene på undersidene midtstilles som #to-typer på forsiden */
.narrow .define-strip .define { text-align: center; }

/* =========================================================================
   EKSPERT-SITAT (Edmund) — attribuert fagsitat inne i artiklene.
   Skiller seg fra .pullquote (uthevet poeng uten avsender) ved bilde + navn.
   ========================================================================= */
.expert-quote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1.2rem;
  align-items: start;
  max-width: 62ch;
  margin: clamp(2rem, 4vw, 3rem) auto;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.4rem, 2.8vw, 2.1rem);
  background: var(--pine-soft);
  border: 1.5px solid var(--ink-stamp);
  border-radius: 5px;
  box-shadow: 5px 5px 0 0 var(--brass);
}
.expert-quote__avatar {
  grid-row: 1 / span 2;
  width: 60px; height: 60px; flex: none;
  border-radius: 50%;
  object-fit: cover; object-position: 50% 20%;
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 2px 2px 0 0 var(--brass);
}
.expert-quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.26rem);
  line-height: 1.46;
  letter-spacing: -0.01em;
  color: var(--pine);
}
.expert-quote__cite {
  font-style: normal;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--muted);
}
.expert-quote__cite strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  font-size: 1rem;
}
@media (max-width: 520px) {
  .expert-quote { grid-template-columns: 1fr; }
  .expert-quote__avatar { grid-row: auto; }
}

/* =========================================================================
   UNDERSIDER: livligere hero-bakgrunn (toppseksjonen med .subpage-head).
   Forsiden har ikke .subpage-head, så den er urørt.
   ========================================================================= */
section:has(.subpage-head) {
  background-color: var(--pine-soft);
  background-image:
    var(--weave-surface),
    radial-gradient(90% 85% at 100% 0%, var(--brass-soft) 0%, transparent 58%),
    radial-gradient(80% 90% at 0% 0%, #DBEAE0 0%, transparent 55%),
    linear-gradient(to bottom, transparent 0%, transparent 74%, var(--bg) 100%);
  /* Dra hele hero-flaten opp BAK den gjennomsiktige headeren (som forsiden),
     og skyv innholdet tilsvarende ned. Da flyter ÉN sammenhengende bakgrunn
     bak headeren → ingen skjøt/hakk i overgangen. */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--sect));
  overflow: hidden;
}
/* Headeren er gjennomsiktig på undersider også, så hero-bakgrunnen vises bak
   den. (Ingen egen pine-soft-bunn lenger — det var den som ga hakket.) */

/* =========================================================================
   FORFATTER-BYLINE (artikler/guider) — Edmund + publisert/oppdatert-dato
   ========================================================================= */
.article-byline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin: 1.15rem auto 0;
}
.article-byline__avatar {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1.5px solid var(--ink-stamp);
  box-shadow: 2px 2px 0 0 var(--brass);
}
.article-byline__lines {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.3;
}
.article-byline__by {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.article-byline__by a {
  color: var(--pine);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 2px;
}
.article-byline__dates {
  font-size: .86rem;
  color: var(--muted);
}

/* Byline: sekundær «kvalitetssikret av»-linje under forfatteren */
.article-byline__by--review { font-weight: 600; font-size: .92rem; color: var(--muted); }

/* =========================================================================
   REDAKSJONELT SKILLE mellom hero og brødtekst (alle undersider, CSS-only).
   Ett messing-medaljong-emblem med et nøkkelhull (hus + nøkkel-motivet:
   nøkkelen frigjør verdien i hjemmet) flankert av to hårfine streker som
   toner ut mot kantene. Harde offset-skygger og ink-ramme som resten av
   den redaksjonelle stilen. Ligger i normalflyten under .subpage-head, så
   den slår inn på HVER underside automatisk — med eller uten byline — og
   rører verken hero-tinten, «header bak hero»-fiksen eller overflow-regelen
   på section:has(.subpage-head). Nøkkelhullets medaljong er opak (krem) og
   bryter hårstreken rent i midten. */
.subpage-head::after {
  content: "";
  display: block;
  width: min(440px, 84%);
  height: 48px;
  margin: clamp(2.4rem, 4.5vw, 3.4rem) auto 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 48'%3E%3Crect x='9' y='8' width='36' height='36' rx='11' fill='%23A96E1F'/%3E%3Crect x='6' y='5' width='36' height='36' rx='11' fill='%23FCFBF8' stroke='%2324201A' stroke-width='1.6'/%3E%3Ccircle cx='24' cy='19' r='4.2' fill='%231E4D3A'/%3E%3Cpolygon points='21.8,20 26.2,20 28,31 20,31' fill='%231E4D3A'/%3E%3C/svg%3E"),
    linear-gradient(90deg,
      transparent 0,
      color-mix(in srgb, var(--ink-stamp) 15%, transparent) 18%,
      color-mix(in srgb, var(--ink-stamp) 15%, transparent) 82%,
      transparent 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 50px 48px, 100% 1.6px;
}

/* ====================================================================
   VÅRE TALL — data-seksjon (aggregerte tall fra egne søknader, 60+)
   ==================================================================== */
.dstat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(228px, 1fr));
  gap:clamp(1rem, 2.4vw, 1.6rem);
  margin-top:clamp(1.8rem, 4vw, 2.6rem);
}
.dstat-card{
  background:var(--card);
  border:1.6px solid var(--ink-stamp);
  border-radius:var(--r);
  padding:clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.3rem, 2.4vw, 1.7rem);
  box-shadow:6px 6px 0 -1px var(--ink-stamp);
  display:flex; flex-direction:column; gap:.5rem;
}
.dstat-card--accent{ background:var(--pine); border-color:var(--pine-deep); box-shadow:6px 6px 0 -1px var(--pine-deep); }
.dstat-card--brass{ background:var(--brass-soft); }
.dstat-num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.5rem, 6vw, 3.4rem);
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--pine);
}
.dstat-card--accent .dstat-num{ color:#F6ECD8; }
.dstat-card--brass .dstat-num{ color:var(--brass); }
.dstat-lab{
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.06rem;
  line-height:1.3;
  color:var(--ink);
}
.dstat-card--accent .dstat-lab{ color:#fff; }
.dstat-sub{
  font-size:.95rem;
  line-height:1.45;
  color:var(--muted);
  margin-top:.15rem;
}
.dstat-card--accent .dstat-sub{ color:rgba(255,253,249,.82); }
/* Forside-stat (4 bokser): reserver plass til to talllinjer og bunnstill tallet,
   slik at etikettene under starter på samme høyde i alle fire kortene = symmetrisk.
   Scopet med :not(--tre) så analyse-siden ikke berøres. */
.dstat-grid:not(.dstat-grid--tre) .dstat-num{
  min-height:1.96em;              /* to linjer i display-fonten (line-height .98) */
  display:flex;
  align-items:flex-end;           /* bunnstill, så enlinjes og tolinjes tall flukter nederst */
}
.dmethod{
  margin-top:clamp(1.6rem, 3.4vw, 2.4rem);
  border-left:4px solid var(--brass);
  background:var(--bg-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.7rem);
}
.dmethod__label{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:.5rem;
}
.dmethod p{ font-size:1rem; line-height:1.62; color:var(--muted); margin:0; }
.dmethod p + p{ margin-top:.7rem; }
@media (max-width:600px){
  .dstat-card{ box-shadow:5px 5px 0 -1px var(--ink-stamp); }
  .dstat-card--accent{ box-shadow:5px 5px 0 -1px var(--pine-deep); }
}
.hero-est__source{
  margin:1rem 0 0;
  font-size:.9rem;
  line-height:1.5;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:.85rem;
}
/* Segmentert valg (én/to eiere) i kalkulatorene */
.hero-est__seglabel{
  display:block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink);
  margin-bottom:.5rem;
}
.calc-seg{ display:flex; gap:.5rem; }
.calc-seg__opt{
  flex:1 1 0;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  color:var(--muted);
  background:#fff;
  border:1.7px solid var(--line);
  border-radius:var(--r-sm);
  padding:.7rem .8rem;
  cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.calc-seg__opt:hover{ border-color:var(--pine); }
.calc-seg__opt.is-active{ background:var(--pine-soft); border-color:var(--pine); color:var(--pine-deep); }
.calc-seg__opt:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; }

/* -------------------------------------------------------------------------
   LEAD-AVSNITT (midtstilt, matcher ingress-stilen)
   Lagt HELT til slutt så element+class (p.lead-center, spesifisitet 0-1-1)
   vinner over .prose p og .narrow > p (samme spesifisitet, men tidligere i kilden).
   Brukes på frittstående lead-/ramme-avsnitt under en midtstilt overskrift, så
   avsnittet henger visuelt sammen med ingressen. */
p.lead-center{
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: clamp(1.15rem, 0.5vw + 1.05rem, 1.3rem);
  color: var(--muted);
  line-height: 1.6;
  text-wrap: balance;
}