:root{
  --rod:#AB2138; --rod-dyp:#8C1B2F; --rod-lys:#FDF6F7;
  --blekk:#2B313A; --graa:#5A6470; --dis:#707985;
  --duk:#F2F0EE; --kort:#FFFFFF; --kant:#DDD9D4; --kant-sterk:#C9C3BC; --felt:#FAF9F8;
  --feil:#C62828; --feil-lys:#FDEDED;
  --radius:8px;
  --sans:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:ui-monospace,Consolas,"Cascadia Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--duk);color:var(--blekk);font-family:var(--sans);font-size:16px;line-height:1.5}
[hidden]{display:none !important}

.topp{position:sticky;top:0;z-index:10;background:var(--kort);border-bottom:1px solid var(--kant)}
.topp-indre{max-width:680px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px}
.topp-tittel{font-size:14px;font-weight:600;flex:1}
.chip{font-family:var(--mono);font-size:12.5px;padding:2px 9px;border-radius:999px;border:1px solid var(--kant-sterk);background:var(--felt);color:var(--graa)}
.fremdrift{height:4px;background:var(--kant)}
.fremdrift-fyll{height:100%;width:0;background:var(--rod);transition:width .3s}

.ramme{max-width:680px;margin:0 auto;padding:12px 16px 96px}
.testmerke{font-size:12.5px;color:var(--graa);background:#FFF8E1;border:1px solid #EAD9A0;border-radius:6px;padding:6px 10px;margin-bottom:12px}

.intro{background:var(--kort);border:1px solid var(--kant);border-radius:var(--radius);padding:20px 18px}
.avsender{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--graa);margin-bottom:8px}
.intro h1{font-size:22px;line-height:1.25;text-wrap:balance;margin-bottom:12px}
.intro p{margin-bottom:10px}
.info{border-left:3px solid var(--rod);background:var(--felt);padding:12px 14px;margin:16px 0;border-radius:0 6px 6px 0;font-size:14.5px}
.info h2{font-size:15px;margin-bottom:6px}
.info p{margin-bottom:8px}
mark{background:#FFF1B8;padding:0 3px;border-radius:3px}

.sidehode{margin:8px 0 14px}
.sidehode .steg{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--rod);font-weight:700}
.sidehode h2{font-size:20px;line-height:1.3;margin:2px 0 6px}
.sidehode p{font-size:14.5px;color:var(--graa)}
.sidehode p.viktig{background:var(--kort);border:1px solid var(--kant);border-left:3px solid var(--rod);border-radius:0 8px 8px 0;padding:10px 12px;color:var(--blekk)}

fieldset.kort{border:1px solid var(--kant);background:var(--kort);border-radius:var(--radius);padding:14px 16px 16px;margin-bottom:12px;min-width:0}
fieldset.kort.feil{border-color:var(--feil);box-shadow:0 0 0 1px var(--feil)}
fieldset.kort.port{border-color:var(--rod)}
legend.sp{float:left;width:100%;padding:0;display:flex;gap:8px;align-items:baseline;font-size:16px;font-weight:600;line-height:1.4}
legend.sp + *{clear:both}
.sp-nr{font-family:var(--mono);font-size:12.5px;color:var(--rod);font-weight:700;min-width:28px}
.krav{color:var(--rod)}
.sp-hjelp{font-size:13.5px;color:var(--graa);margin-top:4px}
.feilmelding{font-size:13.5px;color:var(--feil);margin-top:8px;font-weight:600}

.valg{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.gruppe{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--dis);margin-top:8px}
.alt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--kant);border-radius:6px;background:var(--felt);cursor:pointer;font-size:15px;line-height:1.35}
.alt:hover{border-color:var(--kant-sterk)}
.alt input{margin-top:2px;accent-color:var(--rod);flex:0 0 auto;width:18px;height:18px}
.alt:has(input:checked){border-color:var(--rod);background:var(--rod-lys)}
.alt.ekskl{border-style:dashed}

.under{margin:4px 0 6px 28px;padding:8px 10px;border-left:3px solid var(--kant-sterk);background:#fff;border-radius:0 6px 6px 0}
.under .hint{font-size:12.5px;color:var(--graa);margin-bottom:6px}
.brikker{display:flex;flex-wrap:wrap;gap:6px}
.brikke{display:flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--kant);border-radius:999px;background:var(--felt);font-size:13.5px;cursor:pointer}
.brikke input{accent-color:var(--rod);width:15px;height:15px}
.brikke:has(input:checked){border-color:var(--rod);background:var(--rod-lys);font-weight:600}

input[type=text],input[type=email],input[type=tel],textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--blekk);background:var(--felt);border:1px solid var(--kant-sterk);border-radius:6px;padding:10px 11px}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--rod);outline-offset:1px;background:#fff}
textarea{min-height:84px;resize:vertical}
.felt{margin-top:10px}
.felt label{display:block;font-size:13.5px;color:var(--graa);margin-bottom:4px}

.matrise{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.mrad{border:1px solid var(--kant);border-radius:6px;background:var(--felt);padding:10px 12px}
.mrad.feil{border-color:var(--feil);background:var(--feil-lys)}
.mtittel{font-size:14.5px;font-weight:600;margin-bottom:8px}
.avlast{margin-top:10px}

.knapper{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.knapp{font-family:var(--sans);font-size:16px;font-weight:600;padding:12px 20px;border-radius:6px;border:1px solid var(--rod);cursor:pointer}
.knapp.primar{background:var(--rod);color:#fff}
.knapp.primar:hover{background:var(--rod-dyp)}
.knapp.sekundar{background:#fff;color:var(--rod)}
.knapp:focus-visible{outline:3px solid var(--rod);outline-offset:2px}

.navigasjon{position:fixed;left:0;right:0;bottom:0;background:var(--kort);border-top:1px solid var(--kant);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.navigasjon{display:flex;justify-content:space-between;gap:10px}
@media (min-width:712px){.navigasjon{padding-left:calc(50% - 324px);padding-right:calc(50% - 324px)}}

.sendestatus{margin-top:12px;padding:10px 12px;border:1px solid var(--feil);background:var(--feil-lys);color:var(--feil);border-radius:6px;font-size:14.5px;font-weight:600}
.turnstile{margin-top:4px}
.knapp:disabled{opacity:.6;cursor:wait}

#testdata{margin-top:14px;font-size:13.5px}
#testdata .tall{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
#testdata .tall div{background:var(--felt);border:1px solid var(--kant);border-radius:6px;padding:8px 12px}
#testdata .tall b{display:block;font-family:var(--mono);font-size:20px}
#testdata pre{font-family:var(--mono);font-size:12px;background:var(--felt);border:1px solid var(--kant);border-radius:6px;padding:10px;overflow:auto;max-height:420px;white-space:pre-wrap;word-break:break-word}
.samtykke{font-size:14px;color:var(--graa);margin:14px 0 0}
.info details{margin-top:4px}
.info summary{cursor:pointer;font-weight:600;color:var(--rod);padding:4px 0}
.info details[open] summary{margin-bottom:6px}