*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#172033;font-family:Inter,system-ui,sans-serif}header{height:70px;background:#fff;border-bottom:1px solid #e5e9f2;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:3}.brand{font-weight:850;font-size:22px;color:#111827;text-decoration:none}nav{display:flex;gap:18px}nav a{color:#4b5563;text-decoration:none}.wrap{max-width:1180px;margin:auto;padding:25px 20px}.hero{background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;border-radius:22px;padding:34px;margin-bottom:20px;display:flex;justify-content:space-between}.hero h1{font-size:40px;margin:8px 0}.hero p{max-width:650px;opacity:.85}.hero-badge{padding:20px;border:1px solid #ffffff35;background:#ffffff14;border-radius:16px}.toolbar,.panel{background:#fff;border:1px solid #e4e8f0;border-radius:18px;padding:20px;margin-bottom:20px;box-shadow:0 5px 18px #17203308}.toolbar,.form{display:flex;gap:15px;flex-wrap:wrap;align-items:end}.toolbar label,.form label{flex:1;min-width:170px}label{display:flex;flex-direction:column;gap:7px;font-weight:650}input,select{padding:12px;border:1px solid #d4dbe7;border-radius:10px;font:inherit;background:#fff}button{border:0;border-radius:10px;background:#2563eb;color:#fff;padding:12px 18px;font-weight:750;cursor:pointer}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.card{background:#fff;border:1px solid #e4e8f0;border-radius:16px;padding:18px}.card small,.card span{color:#687386}.card strong{font-size:27px;display:block;margin:5px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.row,.cheap{display:flex;justify-content:space-between;gap:15px}.big{font-size:38px;font-weight:850;margin:20px 0}table{width:100%;border-collapse:collapse;margin-top:16px}th,td{text-align:left;padding:10px;border-bottom:1px solid #edf0f5}footer{text-align:center;padding:30px;color:#778195}.narrow{max-width:500px;margin:auto}@media(max-width:750px){
/* The original hid the nav entirely below this width with no alternative — on mobile there was
   simply no way to reach Kalkulator, Avtaler, Historikk, Varsler or Min strøm at all. Wraps onto
   a second row and scrolls horizontally instead, keeping every link reachable. */
header{flex-wrap:wrap;height:auto;padding:12px 5%;row-gap:10px}
nav{display:flex;width:100%;overflow-x:auto;gap:14px;-webkit-overflow-scrolling:touch;padding-bottom:2px}
nav a{white-space:nowrap;flex:0 0 auto}
.hero{display:block}.hero h1{font-size:30px}.cards,.grid{grid-template-columns:1fr}.toolbar,.form{display:grid;grid-template-columns:1fr}}
.demo-banner{background:#e8a33d;color:#1a1410;text-align:center;padding:9px 16px;font-size:13px;font-weight:700;letter-spacing:.02em}
.demo-banner span{font-weight:500;opacity:.85}
body{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.tablewrap{overflow-x:auto}
.notice{padding:12px 16px;border-radius:10px;background:#ecfdf3;color:#027a48;margin-bottom:16px;font-weight:600}
.error{color:#b42318;font-weight:700}
.muted{color:#687386}
.small{font-size:13px}
code{background:#eef2f6;color:#175cd3;padding:2px 7px;border-radius:5px;font-size:12.5px}
/* The chart script sets canvas.width = clientWidth*2 (a common trick for crisp rendering on
   retina/high-DPI screens) — but with no CSS width rule to constrain the element separately from
   that attribute, the canvas rendered at its full doubled pixel width instead of being scaled
   back down, forcing the whole page to scroll sideways on mobile. */
canvas{width:100%;display:block}