/* Ladeandel – forsiden paa ladeandel.no. Varmt papir, dyp groenn, kobber til energien. */
:root {
  --blekk: #1b1a17;
  --papir: #f7f5f1;
  --papir-2: #efece5;
  --groenn: #1f3d33;
  --groenn-moerk: #17302a;
  --kobber: #a75a1e;
  --kobber-lys: #d98b46;
  --kobber-flate: #fbf1e6;
  --kobber-tekst: #7c4316;
  --kant: #e2ded5;
  --kant-sterk: #c9c3b6;
  --dempet: #6f6a60;
  --tekst-2: #5c5750;
  --hvit: #ffffff;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --tekst: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --marg: clamp(20px, 4.5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papir); color: var(--blekk); font-family: var(--tekst); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.06; letter-spacing: -0.036em; text-wrap: balance; }
h1 { font-size: clamp(46px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-size: clamp(34px, 3.9vw, 56px); }
h3 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
.dempet { color: var(--dempet); }
.ingress { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--tekst-2); max-width: 58ch; }
.overlinje { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kobber); margin-bottom: 22px; }
.strek { display: none; }
.hero .overlinje { margin-bottom: 0; }

.knapp { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 999px; background: var(--groenn); color: var(--papir); font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap; }
.knapp.lett { background: transparent; color: var(--blekk); border: 1px solid var(--kant-sterk); }
.knapp:hover { background: var(--groenn-moerk); }
.knapp.lett:hover { background: var(--hvit); border-color: var(--blekk); }
.handlinger { display: flex; flex-wrap: wrap; gap: 16px; }
:focus-visible { outline: 3px solid var(--kobber-lys); outline-offset: 3px; }

/* ---------- Topplinje ---------- */
.topp { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--marg); border-bottom: 1px solid var(--kant); }
.merke { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; text-decoration: none; }
.toppmeny { display: flex; align-items: center; gap: 30px; font-size: 14.5px; color: var(--tekst-2); }
.toppmeny a { text-decoration: none; }
.toppmeny a:not(.knapp):hover { color: var(--blekk); text-decoration: underline; text-underline-offset: 4px; }
.toppmeny .logginn { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blekk); }
.toppmeny .knapp { min-height: 44px; padding: 0 20px; font-size: 14px; }
/* Menyen paa en telefon: en bryter uten skript. Avkrysningsboksen ligger usynlig, etiketten
   er knappen, og lenkene faar en egen rad under toppen naar den er krysset av. Paa en skjerm
   bred nok er lenkene bare lenker (display: contents), akkurat som foer. */
.meny-bryter { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.meny-knapp { display: none; }
.meny-lenker { display: contents; }
.bare-telefon { display: none; }
@media (max-width: 899px) {
  .topp { position: relative; }
  .toppmeny { gap: 18px; }
  .toppmeny .knapp { display: none; }
  .meny-knapp { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--kant-sterk); border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blekk); cursor: pointer; }
  .meny-bryter:checked + .meny-knapp { background: var(--blekk); color: var(--papir); border-color: var(--blekk); }
  .meny-bryter:focus-visible + .meny-knapp { outline: 3px solid var(--kobber-lys); outline-offset: 3px; }
  .meny-lenker { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 10; background: var(--papir); border-bottom: 1px solid var(--kant); padding: 4px var(--marg) 18px; flex-direction: column; }
  .meny-bryter:checked ~ .meny-lenker { display: flex; }
  .meny-lenker a { display: block; padding: 13px 0; border-top: 1px solid var(--kant); font-size: 16.5px; color: var(--blekk); }
  .meny-lenker a:first-child { border-top: 0; }
  .meny-lenker a.bare-telefon { display: block; margin-top: 10px; padding: 0; border-top: 0; font-weight: 500; color: var(--kobber-tekst); }
}

/* ---------- Hero, sentrert og rolig ---------- */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(64px, 7.5vw, 104px) var(--marg) clamp(40px, 5vw, 72px); }
.hero-tekst { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.hero-tekst h1 { max-width: 1000px; }
.hero-tekst .ingress { max-width: 680px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }
.hero-tekst .handlinger { justify-content: center; padding-top: 8px; }
.hero-side { margin-top: 30px; font-size: 14.5px; color: var(--dempet); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-side-tittel { display: none; }
.hero-side .dempet { display: none; }
.andel { display: flex; gap: 2px; }
.andel.liten { height: 8px; width: 180px; }
.andel.stor { height: 22px; width: 100%; }
.andel-maalt { width: 71%; background: var(--kobber); }
.andel-felles { width: 29%; background: var(--groenn); }

/* Heroen kommer inn i fire trinn, én gang. */
.inn { opacity: 0; animation: komme-inn 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.inn-2 { animation-delay: 0.1s; }
.inn-3 { animation-delay: 0.2s; }
.inn-4 { animation-delay: 0.3s; }
@keyframes komme-inn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Telefonen i et varmt felt ---------- */
.telefonfelt { margin: 0 var(--marg); background: linear-gradient(180deg, #f1e4d4 0%, var(--papir-2) 100%); padding: clamp(56px, 6vw, 84px) var(--marg) clamp(48px, 5vw, 72px); display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.telefonfelt::before { content: ""; position: absolute; z-index: -1; left: 62%; top: 55%; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 139, 70, 0.32) 0%, rgba(217, 139, 70, 0.1) 45%, rgba(217, 139, 70, 0) 70%); transform: translate(-50%, -40%); animation: drive 18s ease-in-out infinite; }
@keyframes drive { 0%, 100% { transform: translate(-50%, -40%) scale(1); } 50% { transform: translate(-56%, -32%) scale(1.12); } }
.telefonfelt h2 { font-size: clamp(32px, 3.6vw, 48px); }
.telefonfelt .ingress { max-width: 460px; margin-top: 22px; }
.steg-prikker { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tekst-2); }
.steg-prikker li { display: flex; align-items: center; gap: 12px; }
.prikk { width: 8px; height: 8px; border-radius: 50%; background: #d6cfc2; flex: none; animation: prikke 16s linear infinite; }
.prikk-2 { animation-delay: 5.33s; }
.prikk-3 { animation-delay: 10.66s; }
@keyframes prikke { 0%, 2% { background: var(--kobber); } 31%, 100% { background: #d6cfc2; } }
.telefon-ramme { display: flex; justify-content: center; }
.telefon { width: 330px; height: 680px; background: var(--blekk); border-radius: 46px; padding: 11px; box-shadow: 0 50px 90px -40px rgba(27, 26, 23, 0.55); }
.svev { animation: sveve 7s ease-in-out infinite; }
@keyframes sveve { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.skjerm { width: 308px; height: 658px; border-radius: 36px; overflow: hidden; background: var(--papir); display: flex; flex-direction: column; }
@media (max-width: 899px) {
  .telefonfelt { grid-template-columns: 1fr; gap: 40px; margin: 0; }
}
@media (max-width: 400px) {
  .telefon { width: 300px; height: 620px; padding: 10px; border-radius: 40px; }
  .skjerm { width: 280px; height: 600px; border-radius: 32px; }
  .vindu, .rute { height: 494px; }
  .strimmel { --rute: 494px; }
}

.app-topp { height: 46px; flex: none; background: var(--groenn); color: var(--papir); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.app-merke { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 14px; }
.app-enhet { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 245, 241, 0.75); }
.vindu { height: 552px; flex: none; overflow: hidden; }
.strimmel { --rute: 552px; display: flex; flex-direction: column; animation: bla 16s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes bla {
  0%, 24%   { transform: translateY(0); }
  31%, 57%  { transform: translateY(calc(var(--rute) * -1)); }
  64%, 92%  { transform: translateY(calc(var(--rute) * -2)); }
  100%      { transform: translateY(calc(var(--rute) * -3)); }
}
.rute { height: 552px; flex: none; padding: 20px 14px; display: flex; flex-direction: column; gap: 13px; font-size: 13.5px; }
.rute.midt { align-items: center; justify-content: center; text-align: center; gap: 18px; }
.hei { font-family: var(--display); font-size: 25px; font-weight: 500; letter-spacing: -0.028em; line-height: 1.1; }
.varsel { background: var(--kobber-flate); border-left: 3px solid var(--kobber); color: var(--kobber-tekst); padding: 14px 15px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.45; }
.app-knapp { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; background: var(--groenn); color: var(--papir); font-weight: 500; font-size: 15px; }
.app-kort { background: var(--hvit); border: 1px solid var(--kant); padding: 15px; display: flex; flex-direction: column; gap: 8px; }
.app-etikett { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dempet); }
.app-tall { font-family: var(--display); font-size: 38px; font-weight: 500; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.app-tall small { font-size: 15px; font-weight: 500; color: var(--dempet); margin-left: 6px; }
.app-tall.blek, .app-tall.blek small { color: #d6cfc2; }
.app-fotnote { font-size: 13px; line-height: 1.5; color: var(--dempet); }
.hake-ring { width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--groenn); display: flex; align-items: center; justify-content: center; animation: slaa-inn 16s ease-out infinite; }
.hake-ring svg { stroke: var(--groenn); }
@keyframes slaa-inn { 0%, 31% { transform: scale(0.6); opacity: 0; } 38%, 100% { transform: scale(1); opacity: 1; } }
.app-kortnr { border: 1px solid var(--kant); background: var(--hvit); padding: 10px 15px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.rute.midt .app-fotnote { color: var(--tekst-2); font-size: 14.5px; max-width: 240px; }
.app-rad { display: flex; align-items: center; justify-content: space-between; }
.app-merke-betalt { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #2f6b4f; }
.app-merke-betalt::before { content: ""; display: inline-block; width: 6px; height: 6px; background: #2f6b4f; margin-right: 6px; vertical-align: 1px; }
.app-kwh { font-size: 14px; font-weight: 500; color: var(--kobber); font-variant-numeric: tabular-nums; }
.soyler { display: flex; align-items: flex-end; gap: 2px; height: 62px; }
.soyler i { flex: 1 1 0; height: var(--h); background: #e3c4a6; transform-origin: bottom; animation: vokse 16s ease-out infinite; }
.soyler i.tom { background: var(--papir-2); }
.soyler i.topp { background: var(--kobber); }
@keyframes vokse { 0%, 64% { transform: scaleY(0); } 78%, 100% { transform: scaleY(1); } }
.app-linjer { margin: 2px 0 0; }
.app-linjer div { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--papir-2); }
.app-linjer dt { color: var(--tekst-2); }
.app-linjer dd { margin: 0; font-variant-numeric: tabular-nums; }
.app-linjer .sum { border-top: 2px solid var(--blekk); padding: 9px 0 0; font-weight: 600; }
.app-linjer .sum dt { color: var(--blekk); }
.app-faner { height: 60px; flex: none; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--hvit); border-top: 1px solid var(--kant); }
.app-faner span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dempet); }
.app-faner .aktiv { color: var(--groenn); }

/* ---------- Avsnitt ---------- */
.avsnitt { padding: clamp(72px, 8.5vw, 128px) var(--marg); }
.avsnitt + .avsnitt, #rettferdig { border-top: 1px solid var(--kant); }
#rettferdig { margin-top: clamp(56px, 7vw, 104px); background: var(--hvit); }
#tilpasses { background: var(--hvit); }
.avsnitt.delt, .delt { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.delt.bunnjustert { align-items: end; }
.delt.midtjustert { align-items: center; }
.delt .ingress { margin-top: 22px; }
.delt.bunnjustert > .ingress { margin-top: 0; padding-bottom: 6px; max-width: 560px; }
.avsnitt h2::before { content: attr(data-overlinje); }
@media (max-width: 899px) {
  .avsnitt.delt, .delt { grid-template-columns: 1fr; }
}

.deling { display: flex; flex-direction: column; gap: 18px; padding-top: 12px; }
.deling-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dempet); }
.deling-topp strong { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; text-transform: none; color: var(--blekk); font-variant-numeric: tabular-nums; }
.andel.stor .andel-maalt { animation: dele-maalt 9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.andel.stor .andel-felles { animation: dele-felles 9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes dele-maalt { 0%, 12% { width: 100%; } 42%, 88% { width: 71%; } 100% { width: 100%; } }
@keyframes dele-felles { 0%, 12% { width: 0%; } 42%, 88% { width: 29%; } 100% { width: 0%; } }
.deling-kolonner { display: grid; grid-template-columns: 71fr 29fr; gap: 2px; margin-top: 8px; }
.deling-kolonner div { display: flex; flex-direction: column; gap: 8px; padding-right: 36px; }
.deling-kolonner p { font-size: 15px; line-height: 1.55; color: var(--tekst-2); }
.fotnote { font-size: 15px; line-height: 1.55; color: var(--tekst-2); padding-top: 18px; border-top: 1px solid var(--papir-2); }
@media (max-width: 899px) {
  .deling { padding-top: 0; }
  .deling-kolonner { grid-template-columns: 1fr; gap: 20px; }
  .deling-kolonner div { padding-right: 0; }
}

.steg { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #ddd8cd; border: 1px solid #ddd8cd; }
.steg li { background: var(--papir); padding: 34px 30px; display: flex; flex-direction: column; gap: 13px; }
.steg li:last-child { background: var(--hvit); }
.steg p { font-size: 15.5px; line-height: 1.6; color: var(--tekst-2); }
.steg-nr { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kobber); }
.steg-nr::before { content: "0"; }
.steg-merke { display: flex; align-items: center; min-height: 17px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--groenn); }
.steg-merke svg { display: none; }
.steg-merke::after { content: "Automatisk"; }
@media (max-width: 899px) {
  .steg { grid-template-columns: 1fr; }
}

.forvalter { margin-top: 56px; background: var(--hvit); border: 1px solid var(--kant); box-shadow: 0 40px 90px -50px rgba(27, 26, 23, 0.4); }
.forvalter-topp { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--papir-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--dempet); }
.forvalter-steg { list-style: none; margin: 30px 34px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--kant); border: 1px solid var(--kant); }
.forvalter-steg li { background: var(--hvit); padding: 16px 18px; display: grid; grid-template-columns: 17px 1fr; column-gap: 11px; row-gap: 3px; align-items: center; font-size: 14px; }
.forvalter-steg li:last-child { background: #faf7f2; }
.forvalter-steg b { font-weight: 600; }
.forvalter-steg small { grid-column: 2; font-size: 12.5px; color: var(--dempet); font-variant-numeric: tabular-nums; }
.forvalter-steg .ok { width: 17px; height: 17px; background: no-repeat center / 17px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232f6b4f" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>'); }
.forvalter-steg .tom { width: 17px; height: 17px; border: 1.5px solid var(--kobber); }
.forvalter-steg li:last-child small { color: var(--kobber); }
.forvalter-bunn { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 34px 34px; font-size: 14.5px; color: var(--tekst-2); }
.forvalter-bunn b { color: var(--blekk); font-weight: 600; font-variant-numeric: tabular-nums; }
.forvalter-bunn .knapp { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
@media (max-width: 899px) {
  .forvalter-steg { grid-template-columns: 1fr 1fr; margin: 20px 20px 0; }
  .forvalter-bunn { flex-direction: column; align-items: flex-start; padding: 20px; }
}

.tabell-ramme { margin-top: 48px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--kant); background: var(--hvit); }
.tilpasning { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 640px; }
.tilpasning th, .tilpasning td { padding: 16px 26px; text-align: center; }
.tilpasning thead th { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--dempet); background: #faf7f2; border-bottom: 1px solid var(--blekk); }
.tilpasning th[scope="row"], .tilpasning thead th:first-child { text-align: left; font-weight: 400; }
.tilpasning tbody tr { border-bottom: 1px solid var(--papir-2); }
.tilpasning tbody tr:last-child { border-bottom: 0; }
.tilpasning tr.dekkes { background: #faf7f2; }
.tilpasning .tall { color: var(--kobber); font-weight: 500; font-variant-numeric: tabular-nums; }
.tilpasning .tall.dempet { color: var(--kant-sterk); }
.tilpasning .hake { display: inline-block; width: 17px; height: 17px; background: no-repeat center / 17px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f3d33" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>'); }
.tilpasning .tom { display: inline-block; width: 12px; height: 2px; background: var(--kant-sterk); vertical-align: middle; }

.avsnitt.moerk { background: var(--groenn); color: var(--papir); }
.avsnitt.moerk .ingress { color: rgba(247, 245, 241, 0.72); }
.avsnitt.moerk h2::before { color: var(--kobber-lys); }
.trygt-punkter { list-style: none; margin: 0; padding: 12px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 44px; }
.trygt-punkter li { display: flex; flex-direction: column; gap: 12px; }
.trygt-punkter h3 { font-size: 20px; }
.trygt-punkter p { font-size: 15.5px; line-height: 1.6; color: rgba(247, 245, 241, 0.72); }
@media (max-width: 899px) {
  .trygt-punkter { grid-template-columns: 1fr; gap: 24px; padding-top: 0; }
}

.prisboks { background: var(--hvit); border: 1px solid var(--kant); padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 18px; }
.pris { font-family: var(--display); font-size: clamp(32px, 3.6vw, 52px); font-weight: 400; letter-spacing: -0.036em; line-height: 1.05; }
.pris-under { font-size: 17px; color: var(--tekst-2); }

/* Overlinjer over avsnittene, i stedet for de gule strekene. */
.avsnitt h2::before { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kobber); margin-bottom: 22px; }

/* ---------- Bunn ---------- */
.bunn { background: var(--papir-2); border-top: 1px solid var(--kant); padding: 40px var(--marg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.bunn .merke { font-size: 15px; }
.bunn .merke .dempet { font-family: var(--tekst); font-weight: 400; font-size: 14px; letter-spacing: 0; margin-left: 8px; }
.bunn nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 14px; color: var(--tekst-2); }
.bunn nav a { text-decoration: none; }
.bunn nav a:hover { color: var(--blekk); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .inn, .svev, .prikk, .strimmel, .soyler i, .hake-ring, .andel.stor .andel-maalt, .andel.stor .andel-felles, .telefonfelt::before { animation: none; }
  .inn { opacity: 1; }
  .strimmel { transform: translateY(calc(var(--rute) * -2)); }
  .soyler i, .hake-ring { transform: none; opacity: 1; }
}

/* ---------- Uavhengig, og det som skiller oss ---------- */
.uavhengig, .punkter { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 1px; background: #ddd8cd; border: 1px solid #ddd8cd; }
.uavhengig { grid-template-columns: repeat(4, 1fr); }
.punkter { grid-template-columns: repeat(3, 1fr); }
.uavhengig li, .punkter li { background: var(--papir); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; }
#uavhengig, #hvorfor { background: var(--hvit); }
#uavhengig .uavhengig li, #hvorfor .punkter li { background: var(--hvit); }
#hvorfor { background: var(--papir); }
#hvorfor .punkter li { background: var(--papir); }
.uavhengig p, .punkter p { font-size: 15.5px; line-height: 1.6; color: var(--tekst-2); }
.faktorer { margin-top: 64px; }
.faktorer h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: -0.03em; }
.faktorer > p { font-size: 15.5px; line-height: 1.6; color: var(--tekst-2); max-width: 560px; }
#uavhengig .tabell-ramme { margin-top: 28px; }
#uavhengig .tilpasning th[scope="row"] { font-weight: 400; }
#uavhengig .tilpasning thead th:first-child { text-transform: none; letter-spacing: 0; font-family: var(--tekst); font-size: 14.5px; font-weight: 600; color: var(--blekk); }
@media (max-width: 899px) {
  .uavhengig, .punkter { grid-template-columns: 1fr; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .uavhengig { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Undersider: vilkaar, personvern, kontakt ---------- */
.dokument { max-width: 760px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--marg) clamp(72px, 8vw, 120px); display: flex; flex-direction: column; gap: 28px; }
.dokument h1 { font-size: clamp(38px, 4.6vw, 60px); }
.dokument h2 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 20px; }
.dokument h2::before { display: none; }
.dokument p, .dokument li { font-size: 16.5px; line-height: 1.65; color: var(--tekst-2); }
.dokument ul, .dokument ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.dokument .ingress { color: var(--tekst-2); }
.dokument .utkast { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kobber); background: var(--kobber-flate); border-left: 3px solid var(--kobber); padding: 10px 14px; }
.dokument .sist { font-size: 14px; color: var(--dempet); }
.dokument dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; }
.dokument dt { font-weight: 600; color: var(--blekk); }
.dokument dd { margin: 0; color: var(--tekst-2); }
.kontaktkort { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #ddd8cd; border: 1px solid #ddd8cd; margin-top: 8px; }
.kontaktkort > div { background: var(--hvit); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.kontaktkort h2 { margin: 0; font-size: 22px; }
.kontaktkort .knapp { align-self: flex-start; }
@media (max-width: 720px) {
  .dokument dl { grid-template-columns: 1fr; gap: 4px 0; }
  .dokument dd { margin-bottom: 8px; }
  .kontaktkort { grid-template-columns: 1fr; }
}

/* Spørsmål og svar: en liste av details, hårlinje mellom, pluss som blir til minus. */
.sporsmal { display: flex; flex-direction: column; border-top: 1px solid var(--kant); }
.sporsmal details { border-bottom: 1px solid var(--kant); }
.sporsmal summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.3; color: var(--blekk); }
.sporsmal summary::-webkit-details-marker { display: none; }
.sporsmal summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--kant-sterk); border-radius: 999px; font-family: var(--mono); font-size: 16px; color: var(--kobber); transition: transform .25s ease; }
.sporsmal details[open] summary::after { content: "–"; }
.sporsmal summary:hover::after { border-color: var(--kobber); }
.sporsmal summary:focus-visible { outline: 2px solid var(--kobber); outline-offset: 4px; }
.sporsmal p { margin: 0 0 22px; max-width: 60ch; font-size: 15.5px; line-height: 1.65; color: var(--tekst-2); }
@media (prefers-reduced-motion: reduce) { .sporsmal summary::after { transition: none; } }

/* Tilpasningstabellen paa en telefon: hver boenhet blir et kort med de fire hakene under seg.
   Kolonnenavnet hentes fra data-k, saa ingenting maa rulles sidelengs. */
@media (max-width: 640px) {
  .tabell-ramme { overflow: visible; border: 0; background: transparent; }
  .tilpasning { min-width: 0; display: block; }
  .tilpasning thead, .tilpasning thead tr { display: block; }
  .tilpasning thead th { display: none; }
  .tilpasning thead th:first-child { display: block; padding: 0 0 12px; background: transparent; border: 0; font-family: var(--tekst); font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--blekk); }
  .tilpasning tbody { display: grid; gap: 12px; }
  .tilpasning tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 18px 18px 16px; border: 1px solid var(--kant); background: var(--hvit); }
  .tilpasning tr.dekkes { background: #faf7f2; }
  .tilpasning th[scope="row"] { grid-column: 1 / -1; padding: 0 0 6px; border-bottom: 1px solid var(--kant); font-size: 16px; }
  .tilpasning td { padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font-size: 14px; }
  .tilpasning td::before { content: attr(data-k); font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dempet); }
  .tilpasning td.tall, .tilpasning td .tall { white-space: nowrap; }
  .tilpasning td:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* Sammenligningen: tekst i cellene, ikke haker. Ladeandel-kolonnen i kobber, som tallene ellers. */
.sammenlign th, .sammenlign td { text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.45; }
.sammenlign thead th { text-align: left; }
.sammenlign th[scope="row"] { font-weight: 500; color: var(--blekk); white-space: normal; }
.sammenlign td.tall { color: var(--kobber-tekst); font-weight: 500; }
.sammenlign sup { font-size: 10px; color: var(--dempet); }
.fotnote { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--dempet); max-width: 70ch; }
@media (max-width: 640px) {
  .sammenlign thead { display: none; }
  .sammenlign tbody tr { grid-template-columns: 1fr; gap: 8px; }
  /* Blokk, ikke flex: da blir fotnotetegnet staaende i setningen i stedet for paa egen linje. */
  .sammenlign td { display: block; }
  .sammenlign td::before { display: block; margin-bottom: 3px; }
  .sammenlign td.tall { white-space: normal; }
}