/* ============================================================
   NETTSJEKK — designsystem v1
   Gjenbrukbart grunnlag for kundesider.
   Kopieres inn i kundens side og tilpasses via :root-variablene.
   Kun variablene under "KUNDETILPASNING" skal endres per kunde.
   ============================================================ */

/* ---------- KUNDETILPASNING — Roger Strand, 20.09.2026 ---------- */
/* Retning: «Han selger rekkefølge.» Papir og mørke bånd i veksling.
   Paletten er alvorlighetsskalaen fra funnkatalogen — fargebruken er
   et argument, ikke pynt.
   Kontrast målt 20.09, ikke antatt:
     brødtekst   #15211D på #FBFAF7 .... 15,88:1
     dempet      #4A5A55 på #FBFAF7 ....  6,97:1
     lenke       #0E7490 på #FBFAF7 ....  5,13:1
     grønn tekst #15803D på #FBFAF7 ....  4,81:1
     lys tekst   #EDF2EF på #14201C .... 14,80:1
     dempet lys  #9FB3AC på #14201C ....  7,60:1
     grønn       #4ADE80 på #14201C ....  9,62:1
     knapp       #14201C på #16A34A ....  5,08:1
     A kritisk   #B42318 på #FBFAF7 ....  6,30:1
     B bør rettes#B54708 på #FBFAF7 ....  5,20:1
     C verdt     #475467 på #FBFAF7 ....  7,36:1 */
:root{
  --bg:        #FBFAF7;
  --surface:   #F3F1EA;
  --surface-2: #EAE7DD;
  --line:      #DED9CC;

  --text:      #15211D;
  --text-dim:  #4A5A55;
  --text-mute: #4A5A55;   /* var #6E7C77 — 4,18:1 på papir, 3,53:1 på #EAE7DD. Falt. */

  --accent:    #16A34A;
  --accent-2:  #0E7490;
  --accent-ink:#14201C;
  --accent-tx: #14763A;   /* D-05 26.09.2026: var #15803D — 4,44:1 på #F3F1EA. Nå 5,46 / 5,05 / 4,61:1 på bg / surface / surface-2 */

  --dark:      #14201C;
  --dark-2:    #1B2A25;
  --dark-line: #2C403A;
  --on-dark:   #EDF2EF;
  --on-dark-dim:#9FB3AC;
  --on-dark-ac:#4ADE80;
  --on-dark-lk:#5FD0E2;

  --sev-a:     #B42318;
  --sev-b:     #B54708;
  --sev-c:     #475467;

  --ok:        #15803D;
  --warn:      #B54708;

  --font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r:   10px;
  --gut: 24px;
  --max: 1320px;   /* var 1160. Hevet 22.09.2026 da .par kom til:
                      paa 1920 px gikk innholdet fra 57 % til 66 % av skjermen. */
}
/* ---------- KUNDETILPASNING v2 — Roger Strand, 03.10.2026 ----------
   Undersidene får forsidens uttrykk (forside.css 02.10): lime, skog, mint,
   Bricolage Grotesque + Figtree. Bare variabler endres, markup er lik.
   Kontrast målt 03.10:
     tekst    #0F2200 på #9FE870 ... 11,41:1   på #E2F6D5 ... 16,9:1
     dempet   #3D5530 på #9FE870 ...  5,61:1   på #E2F6D5 ...  7,23:1
     grønn tx #2A5418 på #9FE870 ...  5,99:1   på #E2F6D5 ...  7,72:1
     knapp    #9FE870 på #163300 ...  9,45:1
     lys      #E2F6D5 på #163300 ... 12,19:1   dempet lys #B8D6A6 ... 8,76:1
     A #C62D12 · B #8A5A00 · C #4B5E52 på hvit/mint ... 4,85–6,08:1 */
@font-face{font-family:"Bricolage Grotesque";src:url("fonter/bricolage-grotesque-wdth.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonter/figtree-wght.woff2") format("woff2");font-weight:300 900;font-display:swap}
:root{
  --bg:#9FE870; --surface:#E2F6D5; --surface-2:#C8F5A6; --line:#8FCB66;
  --text:#0F2200; --text-dim:#3D5530; --text-mute:#3D5530;
  --accent:#163300; --accent-2:#1F4410; --accent-ink:#9FE870; --accent-tx:#2A5418;
  --dark:#163300; --dark-2:#1F4410; --dark-line:#2A5418;
  --on-dark:#E2F6D5; --on-dark-dim:#B8D6A6; --on-dark-ac:#9FE870; --on-dark-lk:#C8F5A6;
  --sev-a:#C62D12; --sev-b:#8A5A00; --sev-c:#4B5E52;
  --ok:#2A5418; --warn:#8A5A00;
  --font-head:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px;
}


/* ---------- GRUNNLAG ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 var(--gut)}
.section{padding:96px 0}
.section--tight{padding:64px 0}
.section--alt{background:var(--surface)}
.grid{display:grid; gap:24px}
@media(min-width:760px){ .grid-2{grid-template-columns:1fr 1fr} }
@media(min-width:760px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

/* ---------- TYPOGRAFI ---------- */
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; letter-spacing:-.022em; margin:0}
h1{font-size:clamp(34px,6vw,60px); line-height:1.04}
h2{font-size:clamp(26px,3.6vw,38px); line-height:1.12; margin-bottom:16px}
h3{font-size:20px; line-height:1.25; margin-bottom:8px}
p{margin:0 0 16px}
.lead{font-size:clamp(17px,2vw,21px); line-height:1.55; color:var(--text-dim)}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px; font-weight:500;
}
.dim{color:var(--text-dim)}
.mute{color:var(--text-mute); font-size:14px}

/* Ubekreftet opplysning — samme konvensjon som spillsnooker.no */
.uncertain{
  color:var(--warn);
  border-bottom:1px dotted currentColor;
  cursor:help;
}

/* ---------- KNAPPER ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-size:16px; font-weight:600;
  padding:14px 26px; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:#ffc66d}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--text-dim)}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}

/* ---------- KORT ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:32px;
}
.card--hover{transition:border-color .2s ease, transform .2s ease}
.card--hover:hover{border-color:var(--text-mute); transform:translateY(-2px)}

/* Faktaboks — brukes på referanser. Tabellform, monospace, lett å skanne. */
.facts{
  font-family:var(--font-mono); font-size:13px; line-height:1.8;
  border-top:1px solid var(--line); margin-top:20px; padding-top:16px;
}
.facts div{display:flex; gap:12px}
.facts dt,.facts .k{color:var(--text-mute); min-width:96px; flex:none}
.facts dd,.facts .v{margin:0; color:var(--text)}

/* ---------- LISTER ---------- */
.ticks{list-style:none; padding:0; margin:20px 0 0}
.ticks li{position:relative; padding-left:28px; margin-bottom:12px; color:var(--text-dim)}
.ticks li::before{
  content:""; position:absolute; left:6px; top:11px;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}

/* ---------- MERKELAPPER ---------- */
.tag{
  display:inline-block; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.07em; text-transform:uppercase;
  padding:5px 10px; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);
}
.tag-row{display:flex; flex-wrap:wrap; gap:8px}

/* Tilgjengelighetspille — grønt punkt som pulserer svakt */
.avail{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; color:var(--text-dim);
  background:rgba(74,222,128,.07); border:1px solid rgba(74,222,128,.25);
  padding:8px 16px; border-radius:99px;
}
.avail::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 0 rgba(74,222,128,.6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}
  70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
@media(prefers-reduced-motion:reduce){ .avail::before{animation:none} }

/* ---------- SKJEMA ---------- */
.field{margin-bottom:18px}
.field label{
  display:block; font-size:13px; font-family:var(--font-mono);
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); margin-bottom:7px;
}
.field input,.field textarea,.field select{
  width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--line); border-radius:8px;
  padding:13px 15px; font-family:var(--font-body); font-size:16px;
}
.field input:focus,.field textarea:focus{border-color:var(--accent); outline:none}
.field textarea{min-height:120px; resize:vertical}

/* ---------- TOPPLINJE ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,18,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:20px; height:68px}
.brand{font-family:var(--font-head); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--text)}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.navlinks{margin-left:auto; display:flex; gap:26px; align-items:center}
.navlinks a{color:var(--text-dim); font-size:15px; font-weight:500}
.navlinks a:hover{color:var(--text); text-decoration:none}
@media(max-width:820px){ .navlinks{display:none} }

/* ---------- BUNN ---------- */
.foot{border-top:1px solid var(--line); background:var(--surface); padding:56px 0 40px}
.foot a{color:var(--text-dim)}
.foot a:hover{color:var(--text)}

/* ---------- HJELPERE ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.rule{height:1px; background:var(--line); border:0; margin:0}
@media(min-width:760px){ :root{ --gut:32px } }

/* ============================================================
   SPRÅKVELGER — gjenbrukbar komponent
   Krever markup: .lang > .lang-btn + .lang-menu, og et lite
   JS-oppsett med data-i18n-nøkler. Se referanseimplementasjon i
   Kunder/InCoDesign/bygg/demo/index.html.
   MERK: på en ferdig side skal hvert språk ha sin egen URL
   (/sv/, /no/, /en/) med hreflang. Ren JS-veksling gjør at bare
   ett språk blir indeksert.
   ============================================================ */
.lang{position:relative;flex:none}
.lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--text-dim);
  border:1px solid var(--line); border-radius:99px; padding:8px 14px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em;
  cursor:pointer; transition:border-color .15s, color .15s;
}
.lang-btn:hover{border-color:var(--text-mute); color:var(--text)}
.lang-btn .car{transition:transform .2s}
.lang[data-open="true"] .lang-btn{border-color:var(--accent); color:var(--text)}
.lang[data-open="true"] .car{transform:rotate(180deg)}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:190px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:6px; list-style:none; margin:0;
  box-shadow:0 18px 40px rgba(0,0,0,.55); display:none; z-index:60;
}
.lang[data-open="true"] .lang-menu{display:block}
.lang-menu button{
  width:100%; display:flex; align-items:center; gap:12px;
  background:transparent; border:0; color:var(--text-dim);
  font-family:var(--font-body); font-size:15px; padding:11px 13px;
  border-radius:7px; cursor:pointer; text-align:left;
}
.lang-menu button:hover{background:var(--surface-2); color:var(--text)}
.lang-menu button[aria-current="true"]{color:var(--accent)}
.lang-menu .code{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:var(--text-mute); margin-left:auto}
.lang-menu button[aria-current="true"] .code{color:var(--accent)}

/* Språklenker i bunnteksten — alltid med, også når JS er av */
.foot-lang{display:flex; gap:8px; margin-top:16px}
.foot-lang a{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em;
  padding:5px 11px; border:1px solid var(--line); border-radius:99px; color:var(--text-mute);
}
.foot-lang a:hover{color:var(--text); border-color:var(--text-mute); text-decoration:none}
.foot-lang a[aria-current="true"]{color:var(--accent); border-color:rgba(255,181,71,.45)}

/* ============================================================
   TILLEGG — Roger Strand. Komponenter designsystemet ikke har.
   ============================================================ */
.topbar{background:rgba(255,255,255,.88)}
.brand img{height:34px;width:auto}
@media(max-width:520px){.brand img{height:28px}}
.topbar .wrap{height:80px}
.foot-merke{height:44px;width:auto;margin-bottom:22px}
.btn-primary{background:var(--accent); color:var(--accent-ink); font-weight:700}
.btn-primary:hover{background:#13BD55}
.eyebrow{color:var(--accent-tx);font-family:var(--font-body);font-size:14px;
  font-weight:700;letter-spacing:.02em;text-transform:none}
.ticks li::before{background:var(--accent)}

/* Flyten: sju steg og tre porter */
.flyt{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:28px 0 8px;padding:0;list-style:none}
.flyt li{flex:1 1 128px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 14px 16px}
.flyt li b{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--text-mute);margin-bottom:6px}
.flyt li span{font-size:15px;line-height:1.35;display:block;color:var(--text)}
.flyt li.port{background:#FFFFFF;border-color:var(--accent);flex:0 1 128px}
.flyt li.port b{color:var(--accent-tx)}
.flyt li.port span{font-weight:600}

/* Talltavle */
.tall{display:grid;gap:20px;margin:0;padding:0}
@media(min-width:680px){.tall{grid-template-columns:repeat(3,1fr)}}
.tall div{border-left:3px solid var(--accent);padding:4px 0 4px 18px}
.tall dt{font-family:var(--font-head);font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.tall dd{margin:6px 0 0;color:var(--text-dim);font-size:15px;line-height:1.4}

/* Pris */
.pris{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff}
.pris.hoved{border-color:var(--accent);border-width:2px}
.pris .tall-stor{font-family:var(--font-head);font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.pris .tall-stor small{font-size:16px;font-weight:600;color:var(--text-dim);letter-spacing:0}

/* «Ikke»-lista */
.ikke{list-style:none;padding:0;margin:20px 0 0}
.ikke li{position:relative;padding-left:28px;margin-bottom:10px;color:var(--text-dim)}
.ikke li::before{content:"×";position:absolute;left:6px;top:-1px;color:var(--text-mute);font-size:19px;line-height:1.4}

.foot{background:var(--surface)}

/* ============================================================
   RETNING A — «Han selger rekkefølge»
   Papir med rutenett, mørke bånd som brudd, alvorlighetsskalaen
   som palett. Ingen bilder, ingen tredjeparter.
   ============================================================ */

/* --- Papirflate med svakt planleggingsrutenett --- */
body{background-color:var(--bg)}

/* --- Mørkt bånd i full bredde --- */
.section--dark{
  background:var(--dark);
  color:var(--on-dark);
  border-top:1px solid var(--dark-line);
  border-bottom:1px solid var(--dark-line);
}
.section--dark h2,.section--dark h3{color:var(--on-dark)}
.section--dark .lead,.section--dark .dim,.section--dark p{color:var(--on-dark-dim)}
.section--dark strong{color:var(--on-dark)}
.section--dark .eyebrow{color:var(--on-dark-ac)}
.section--dark a{color:var(--on-dark-lk)}
.section--dark .mute{color:#7E918B}
.section--dark .card{background:var(--dark-2);border-color:var(--dark-line)}
.section--dark .ticks li{color:var(--on-dark-dim)}
.section--dark .ticks li::before{background:var(--on-dark-ac)}
.section--dark .facts dt,.section--dark .facts .k{color:#7E918B}
.section--dark .facts dd,.section--dark .facts .v{color:var(--on-dark)}
.section--dark .btn-ghost{color:var(--on-dark);border-color:var(--dark-line)}
.section--dark .btn-ghost:hover{border-color:var(--on-dark-dim)}

/* --- Topplinje og merke --- */
.topbar{background:rgba(251,250,247,.90);border-bottom:1px solid var(--line)}
.topbar .wrap{height:80px}
/* Bruksanvisningen: minste bredde for ordmerket med undertekst er 220 px.
   Under det slutter underteksten å være lesbar — da brukes ikonet i stedet. */
.brand img{width:236px;height:auto;display:block}
.brand .ikon{display:none;width:42px}
@media(max-width:620px){
  .brand img.merke{display:none}
  .brand .ikon{display:block}
  .topbar .wrap{height:68px}
}
.foot-merke{width:252px;height:auto;margin-bottom:24px}
@media(max-width:620px){.foot-merke{width:220px}}

/* --- Knapper --- */
.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:700}
.btn-primary:hover{background:#13BD55}
.eyebrow{color:var(--accent-tx)}
.ticks li::before{background:var(--accent)}

/* --- Datastripe under tittelen --- */
.datastripe{
  display:flex;flex-wrap:wrap;gap:0;margin:34px 0 0;padding:0;list-style:none;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
}
.datastripe li{flex:1 1 150px;padding:16px 18px;border-right:1px solid var(--line)}
.datastripe li:last-child{border-right:0}
.datastripe b{display:block;font-size:13.5px;font-weight:600;color:var(--text-mute);
  margin-bottom:5px}
.datastripe span{font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:-.02em}
@media(max-width:620px){.datastripe li{flex:1 1 50%;border-bottom:1px solid var(--line)}}

/* --- Flyten: sju steg og tre porter --- */
.flyt{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:28px 0 0;padding:0;list-style:none}
@media(max-width:900px){.flyt{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.flyt{grid-template-columns:repeat(2,1fr)}}
.flyt li{background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:13px 14px 15px}
.flyt li b{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--text-mute);margin-bottom:5px}
.flyt li span{font-size:14.5px;line-height:1.35;display:block;color:var(--text)}
.flyt li.port{background:var(--dark);border-color:var(--dark)}
.flyt li.port b{color:var(--on-dark-ac)}
.flyt li.port span{color:var(--on-dark);font-weight:600}

/* --- Talltavle --- */
.tall{display:grid;gap:22px;margin:0;padding:0}
@media(min-width:680px){.tall{grid-template-columns:repeat(3,1fr)}}
.tall div{border-left:3px solid var(--accent);padding:2px 0 2px 18px}
.tall dt{font-family:var(--font-head);font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1}
.tall dd{margin:8px 0 0;color:var(--text-dim);font-size:15px;line-height:1.45}
.section--dark .tall div{border-left-color:var(--on-dark-ac)}
.section--dark .tall dt{color:var(--on-dark)}
.section--dark .tall dd{color:var(--on-dark-dim)}

/* --- Alvorlighetsgrad: skalaen som palett --- */
.sev{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.09em;font-weight:700;text-transform:uppercase}
.sev::before{content:"";width:10px;height:10px;border-radius:2px;flex:none}
.sev-a{color:var(--sev-a)} .sev-a::before{background:var(--sev-a)}
.sev-b{color:var(--sev-b)} .sev-b::before{background:var(--sev-b)}
.sev-c{color:var(--sev-c)} .sev-c::before{background:var(--sev-c)}

/* --- Rapportutdrag: prøve på selve produktet --- */
.rapport{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.rapport-topp{background:var(--surface);border-bottom:1px solid var(--line);
  padding:13px 20px;font-size:13.5px;font-weight:600;color:var(--text-mute)}
.rapport-rad{padding:20px;border-bottom:1px solid var(--line)}
.rapport-rad:last-child{border-bottom:0}
.rapport-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:9px}
.rapport-id{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--text-mute)}
.rapport-tid{font-family:var(--font-mono);font-size:12.5px;color:var(--text-mute);margin-left:auto}
.rapport-rad h4{font-size:16.5px;margin:0 0 6px}
.rapport-rad p{margin:0;color:var(--text-dim);font-size:15px}

/* --- Pris --- */
.pris{border:1px solid var(--line);border-radius:var(--r);padding:30px;background:#fff;height:100%}
.pris.hoved{border-color:var(--accent);border-width:2px}
.pris .tall-stor{font-family:var(--font-head);font-size:46px;font-weight:800;
  letter-spacing:-.035em;line-height:1.05;margin:6px 0 20px}
.pris .tall-stor small{font-size:16px;font-weight:600;color:var(--text-dim);letter-spacing:0}

/* --- «Ikke»-lista --- */
.ikke{list-style:none;padding:0;margin:22px 0 0}
.ikke li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--text-dim)}
/* #4A5A55 gir 2,30:1 på mørkt bånd og faller. #C6D6D0 gir 11,12:1. */
.section--dark .ikke li{color:#C6D6D0}
.ikke li::before{content:"";position:absolute;left:6px;top:11px;width:12px;height:2px;
  background:var(--sev-a);border-radius:2px}
.section--dark .ikke li::before{background:#F87171}

.foot{background:var(--dark);color:var(--on-dark-dim);border-top:0}
.foot p{color:var(--on-dark-dim)}
.foot strong{color:var(--on-dark)}
.foot a{color:var(--on-dark-lk)}
.foot a:hover{color:var(--on-dark)}
.foot .mute{color:#7E918B}

/* --- Hopp til innhold --- */
.hopp{position:absolute;left:-9999px;top:0;z-index:100;background:var(--dark);color:var(--on-dark);
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:600}
.hopp:focus{left:0;text-decoration:none}

/* --- 01/02/03 med tyngdepunkt --- */
.steg{list-style:none;padding:0;margin:0;display:grid;gap:20px}
@media(min-width:860px){.steg{grid-template-columns:1fr 1.25fr 1fr;align-items:start}}
.steg li{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);padding:26px 24px}
.steg li b{display:block;font-size:14px;font-weight:700;color:var(--on-dark-dim);margin-bottom:12px}
.steg li.tung{background:#213A31;border-color:var(--on-dark-ac);padding:32px 28px}
.steg li.tung b{color:var(--on-dark-ac)}
.steg li.tung h3{font-size:24px}
.steg li h3{margin-bottom:10px}
.steg .uthev{color:var(--on-dark);font-weight:600;margin-top:14px}

/* --- Rammer: avgrensningen, kompakt --- */
.rammer{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--sev-c);
  border-radius:var(--r);padding:30px 32px;max-width:860px}
.rammer h3{margin-bottom:6px}
.rammer .ikke{margin-top:18px;columns:2;column-gap:36px}
.rammer .ikke li{break-inside:avoid;font-size:15px}
@media(max-width:760px){.rammer .ikke{columns:1}}

/* --- Pris: hovedprodukt bredere --- */
.prisrad{display:grid;gap:24px;margin-top:38px;align-items:start}
@media(min-width:860px){.prisrad{grid-template-columns:1.3fr 1fr}}
.pris .tall-stor.liten{font-size:34px}


/* --- Etikett uten monospace, til «Start her» o.l. --- */
.merkelapp{display:inline-block;font-size:13.5px;font-weight:700;color:var(--accent-tx);
  background:#FFFFFF;border:1px solid #BFE3CB;border-radius:99px;padding:4px 12px}
.merkelapp.ro{color:var(--text-dim);background:#FFFFFF;border-color:var(--line)}


/* Faktalista skal ikke være maskinskrevet heller */
.facts dt,.facts .k{font-family:var(--font-body);font-weight:600;min-width:74px}
.facts dd,.facts .v{font-family:var(--font-body)}
.facts{gap:2px}
.utdragfot{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--dark-line)}
.utdragfot .facts{display:flex;flex-wrap:wrap;gap:6px 30px;margin:0}


/* ============================================================
   RETTELSER etter ChatGPTs designvurdering runde 2, 20.09.
   Alle kontrastverdier etterprøvd — 18 av 18 stemte.
   ============================================================ */

/* Ankere havnet under den klebrige topplinja */
:root{scroll-padding-top:96px}

/* Menylenkene forsvant helt under 820 px. To beholdes. */
@media(max-width:820px){
  .navlinks{display:flex;margin-left:auto;gap:18px}
  .navlinks a{display:none;font-size:14.5px}
  .navlinks a[href="#pris"],.navlinks a[href="#kontakt"]{display:inline;padding:8px 2px}
}

/* 96 + 64 px seksjonsluft ble 160 px mellom bolker på mobil */
@media(max-width:620px){
  .section{padding:60px 0}
  .section--tight{padding:44px 0}
  .rammer{padding:24px 22px}
}

.skille{margin:16px 0 0;padding:14px 18px;background:var(--surface);
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0;font-size:15.5px}
.skille span{font-weight:700;color:var(--text)}
.flyt+.skille+.flyt{margin-top:16px}



/* --- Skjermbilder, flatt. Ingen nettleserramme. --- */
.bilde{margin:0}
.bilde img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--dark-line);background:#0E1613}
.bilde figcaption{margin-top:12px;font-size:14.5px;color:var(--on-dark-dim);line-height:1.45}
.bilde.stor{margin-top:38px}
.bildepar{display:grid;gap:26px;margin-top:38px;align-items:start}
@media(min-width:860px){.bildepar{grid-template-columns:1.55fr 1fr}}

/* Mobilbildet skal LESES som mobil — bredden er hele poenget */
.bilde.smal img{max-width:300px;margin:0 auto}
.bilde.smal figcaption{max-width:300px;margin-left:auto;margin-right:auto}
@media(min-width:860px){.bildepar{grid-template-columns:1fr 340px;gap:34px}}


/* ============================================================
   SNITT — nettstedet vist som lag, ikke som bilde. Lagt til 22.09.2026.
   Retning: «Jeg selger systematikk, ikke utseende.»
   Ingen bilder, ingen tredjeparter. Ren CSS-transform.
   Rotasjonen slås av under 700 px — perspektiv på liten skjerm
   gjør bare figuren mindre lesbar.
   ============================================================ */
.snitt{perspective:1700px;perspective-origin:50% 45%;height:520px;margin-top:34px;
  display:flex;align-items:center;justify-content:center}
.snitt-stabel{position:relative;transform-style:preserve-3d;
  transform:rotateX(58deg) rotateZ(-40deg);width:min(500px,84%);aspect-ratio:400/240}
.snitt-lag{position:absolute;inset:0;transform-style:preserve-3d}
.snitt-lag:nth-child(1){transform:translate3d(0,0,0)}
.snitt-lag:nth-child(2){transform:translate3d(0,-62px,84px)}
.snitt-lag:nth-child(3){transform:translate3d(0,-124px,168px)}
.snitt-lag svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.62))}
.snitt-nokkel{display:grid;gap:16px;margin-top:40px}
@media(min-width:760px){.snitt-nokkel{grid-template-columns:repeat(3,1fr);gap:26px}}
.snitt-nokkel div{padding-left:15px;border-left:2px solid var(--on-dark-ac)}
.snitt-nokkel b{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:var(--on-dark-ac);margin-bottom:7px}
.snitt-nokkel p{margin:0;font-size:15.5px;line-height:1.5}
@media(max-width:700px){
  .snitt{height:auto;display:block;margin-top:28px}
  .snitt-stabel{transform:none;width:100%;aspect-ratio:auto}
  /* nth-child-reglene over har hoyere spesifisitet enn .snitt-lag alene,
     saa de maa navngis her for at rotasjonen faktisk skal slaa av. */
  .snitt-lag,
  .snitt-lag:nth-child(1),
  .snitt-lag:nth-child(2),
  .snitt-lag:nth-child(3){position:static;inset:auto;transform:none;margin-bottom:18px}
}


/* ============================================================
   PAR — asymmetrisk rutenett: tekst i ett spor, figur i det andre.
   Lagt til 22.09.2026 sammen med at --max gikk fra 1160 til 1320.
   Sporene bytter side annenhver seksjon (.par--vend), ellers blir
   en side med flere figurer like ensformig som en uten.
   Under 1000 px blir det én kolonne, figuren sist.
   ============================================================ */
.par{display:grid;gap:40px;align-items:center;margin-top:40px}
@media(min-width:1000px){
  .par{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:60px}
  .par--vend{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
  .par--vend > .fig{order:-1}
}
.par--topp{align-items:start}
.fig{min-width:0}
.fig svg{display:block;width:100%;height:auto}

/* Kundetilpasning av --max gjorde loepeteksten for bred.
   Ingressene holdes paa lesbart maal uavhengig av sporbredden. */
.par .lead{max-width:62ch}

/* ============================================================
   BOLKER og FORDELING — tall som HTML, ikke som SVG.
   Lagt til 22.09.2026. Foerste utkast var SVG; da skalerte
   teksten med figuren og ble 7 px paa 390 px skjerm.
   Tekst som skal leses, bygges i HTML. SVG er for tegninger.
   ============================================================ */
.bolker{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.bolker{grid-template-columns:repeat(3,1fr)}}
.bolker > div{border:1px solid var(--line);border-radius:8px;padding:14px 16px;background:#fff}
.bolker .bok{font-family:var(--font-mono);font-size:12.5px;font-weight:700;
  color:var(--accent-tx);letter-spacing:.09em}
.bolker .nv{display:block;font-size:13px;line-height:1.35;color:var(--text-dim);margin-top:3px}
.bolker .ta{font-family:var(--font-head);font-size:28px;font-weight:800;
  letter-spacing:-.03em;line-height:1;margin-top:12px}
.bolker .sp{height:6px;border-radius:3px;background:var(--surface-2);margin-top:12px;overflow:hidden}
.bolker .sp i{display:block;height:100%;background:var(--accent);border-radius:3px}
.bolker .tung{border-color:var(--accent);background:var(--surface)}

.fordeling{display:flex;gap:6px}
.fordeling .bar{height:34px;border-radius:4px}
.sev-bg-a{background:var(--sev-a)}
.sev-bg-b{background:var(--sev-b)}
.sev-bg-c{background:var(--sev-c)}
.grader{list-style:none;margin:22px 0 0;padding:0}
.grader li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:14px 0;border-top:1px solid var(--line)}
.grader li:last-child{border-bottom:1px solid var(--line)}
.grader .n{font-family:var(--font-head);font-size:25px;font-weight:800;line-height:1.05;
  letter-spacing:-.025em;min-width:2.4ch;text-align:right}
.grader p{margin:7px 0 0;font-size:15px;line-height:1.45;color:var(--text-dim)}

/* ============================================================
   UKE, LOVNADER, PORTER og INV — lagt til 22.09.2026.
   Heroen viser gjennomgangen som fire steg; #bygging viser
   hva som skjer hvis svaret blir "bygg nytt". Tidslinja er
   samme form begge steder, med vilje.
   Portene er tegnet som hule ringer, fordi de er noe annet
   enn stegene: der stopper alt til kunden svarer.
   ============================================================ */
.uke{border:1px solid var(--line);border-radius:12px;background:#fff;padding:24px 22px}
.section--dark .uke{background:var(--dark-2);border-color:var(--dark-line)}
.uke ol{list-style:none;margin:0;padding:0}
.uke li{position:relative;padding:0 0 22px 34px}
.uke li:last-child{padding-bottom:0}
.uke li::before{content:"";position:absolute;left:8px;top:6px;width:11px;height:11px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff}
.section--dark .uke li::before{background:var(--on-dark-ac);box-shadow:0 0 0 3px var(--dark-2)}
.uke li::after{content:"";position:absolute;left:13px;top:17px;bottom:-2px;width:1px;background:var(--line)}
.section--dark .uke li::after{background:var(--dark-line)}
.uke li:last-child::after{display:none}
.uke li.port::before{background:#fff;border:3px solid var(--accent);width:13px;height:13px;left:7px}
.section--dark .uke li.port::before{background:var(--dark);border-color:var(--on-dark-ac)}
.uke .dag{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:3px}
.section--dark .uke .dag{color:#7E918B}
.uke li.port .dag{color:var(--accent-tx)}
.section--dark .uke li.port .dag{color:var(--on-dark-ac)}
.uke .hva{font-weight:700;font-size:16.5px}
.uke .om{display:block;color:var(--text-dim);font-size:15px;line-height:1.45;margin-top:3px}
.section--dark .uke .om{color:var(--on-dark-dim)}
.uke-fot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.section--dark .uke-fot{border-top-color:var(--dark-line)}
/* Ikke .pris her: den klassen er priskortet i designsystemet, med
   ramme og polstring. Kollisjonen ga en boks rundt beloepet. */
.uke-fot .beloep{font-family:var(--font-head);font-size:30px;font-weight:800;letter-spacing:-.03em}

/* Fire lovnader i stedet for fire tall. Tallene sier hvor grundig
   jeg er - det hoerer hjemme i metoden-seksjonen, ikke som
   foerste inntrykk. */
.lovnader{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;padding:0;list-style:none}
.lovnader li{flex:1 1 220px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px 18px}
.lovnader b{display:block;font-size:15.5px;font-weight:700}
.lovnader span{display:block;font-size:14.5px;line-height:1.45;color:var(--text-dim);margin-top:4px}

.porter{display:grid;gap:16px;margin-top:36px}
@media(min-width:680px){.porter{grid-template-columns:1fr 1fr}}
.porter > div{border:1px solid var(--line);border-radius:12px;background:#fff;padding:22px 20px}
.section--dark .porter > div{background:var(--dark-2);border-color:var(--dark-line)}
.porter .nr{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-tx);margin-bottom:8px}
.section--dark .porter .nr{color:var(--on-dark-ac)}
.porter h3{margin-bottom:8px}
.porter p{margin:0;font-size:15.5px;color:var(--text-dim)}
.section--dark .porter p{color:var(--on-dark-dim)}
.section--dark .skille{background:var(--dark-2);border-left-color:var(--on-dark-ac);color:var(--on-dark-dim)}
.section--dark .skille span{color:var(--on-dark)}

.inv{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.section--dark .inv{background:var(--dark-2);border-color:var(--dark-line)}
.inv-topp{background:var(--surface);border-bottom:1px solid var(--line);padding:13px 20px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.section--dark .inv-topp{background:var(--dark);border-bottom-color:var(--dark-line);color:#7E918B}
.inv ul{list-style:none;margin:0;padding:8px 20px 16px}
.inv li{position:relative;padding:9px 0 9px 30px;font-size:15.5px;line-height:1.45;
  border-bottom:1px solid var(--line)}
.section--dark .inv li{border-bottom-color:var(--dark-line);color:var(--on-dark-dim)}
.inv li:last-child{border-bottom:0}
.inv li::before{content:"";position:absolute;left:4px;top:15px;width:9px;height:9px;
  border-radius:2px;background:var(--accent)}
.section--dark .inv li::before{background:var(--on-dark-ac)}
.inv li b{color:var(--text)}
.section--dark .inv li b{color:var(--on-dark)}
.inv-fot{border-top:1px solid var(--line);padding:14px 20px;background:var(--surface);
  font-size:14.5px;color:var(--text-dim)}
.section--dark .inv-fot{background:var(--dark);border-top-color:var(--dark-line);color:var(--on-dark-dim)}

/* ============================================================
   GRENSE - lagt til 22.09.2026.
   Avgrensningen er ikke lenger en liste over hva jeg ikke gjoer,
   men en tabell: grensa til venstre, ordrett som foer fordi den
   er juridisk beskyttelse, og hva jeg faktisk ser paa den grensa
   til hoeyre. Hver linje til hoeyre er sporbar til et punkt i
   sjekklista - staar den ikke der, skal den ut av tabellen.
   ============================================================ */
.grense{width:100%;border-collapse:collapse;margin-top:32px}
.grense th{text-align:left;padding:0 20px 12px 0;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute);
  border-bottom:1px solid var(--line);font-weight:500}
.grense td{padding:17px 20px 17px 0;border-bottom:1px solid var(--line);
  vertical-align:top;font-size:15.5px;line-height:1.5}
.grense td:first-child{width:38%;color:var(--text);font-weight:600;position:relative;padding-left:28px}
.grense td:first-child::before{content:"";position:absolute;left:0;top:24px;
  width:12px;height:2px;background:var(--sev-a)}
.grense td:last-child{color:var(--text-dim)}
.grense tr:last-child td{border-bottom:0}
@media(max-width:820px){
  /* Tabellen brekkes opp til kort. thead forsvinner, saa grensa
     og svaret maa staa tett nok til at de leses som ett par. */
  .grense,.grense tbody,.grense tr,.grense td{display:block;width:100%}
  .grense thead{display:none}
  .grense tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .grense td{border-bottom:0;padding:3px 0}
  .grense td:first-child{width:auto;padding-left:28px}
  .grense td:first-child::before{top:12px}
  .grense td:last-child{margin-top:4px}
}

/* --- FELT: de tre feltene i et funn. Lagt til 22.09.2026 fordi
   hoeyre spalte i "Slik ser et funn ut" var 177 px mot en figur
   paa 535 px - 358 px dodt felt (D-06 paa min egen side). --- */
.felt{margin:26px 0 0}
.felt > div{display:grid;grid-template-columns:62px 1fr;gap:16px;
  padding:11px 0;border-top:1px solid var(--line);align-items:baseline}
.felt > div:last-child{border-bottom:1px solid var(--line)}
.felt dt{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-mute);margin:0}
.felt dd{margin:0;font-size:15px;line-height:1.45;color:var(--text-dim)}
.felt dd b{color:var(--text);font-family:var(--font-mono);font-size:13.5px}
@media(max-width:560px){
  .felt > div{grid-template-columns:1fr;gap:3px}
}

/* --- DOERER: to innganger til bygging. Lagt til 22.09.2026.
   Siden var bygget som en trakt med en inngang: gjennomgang foerst,
   ny side som folge av den. Den som allerede vet han vil bygge, og
   den som ikke har en side i det hele tatt, hadde ingen plass.
   Samme form som .porter, men lettere - dette er et veivalg, ikke
   et stopp. --- */
.doerer{display:grid;gap:16px;margin-top:34px}
@media(min-width:680px){.doerer{grid-template-columns:1fr 1fr}}
.doerer > div{border:1px solid var(--dark-line);border-radius:12px;
  padding:20px 20px 18px;background:transparent}
.doerer .nr{display:block;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-ac);margin-bottom:9px}
.doerer p{margin:0;font-size:15.5px;line-height:1.5;color:var(--on-dark-dim)}
.doerer strong{color:var(--on-dark)}
/* Utenfor moerk seksjon, om komponenten gjenbrukes hos en kunde */
.section:not(.section--dark) .doerer > div{border-color:var(--line)}
.section:not(.section--dark) .doerer .nr{color:var(--accent-tx)}
.section:not(.section--dark) .doerer p{color:var(--text-dim)}
.section:not(.section--dark) .doerer strong{color:var(--text)}


/* ============================================================
   S14 24.09 — etter analysen av rogerstrand.no
   ============================================================ */
/* I-10: tilbudet rett over knappen */
.tilbud{margin:22px 0 0;font-size:18px;color:var(--text)}
.tilbud strong{font-weight:800}
/* D-09: navnet synlig på mobil, ved siden av ikonet */
.brand{display:flex;align-items:center;gap:10px}
.brand .navn{display:none;font-family:var(--font-head);font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
@media(max-width:620px){.brand .navn{display:inline}.brand .ikon{width:36px}}
/* Mobilmenyen: klasse i stedet for href, så undersider også får den */
@media(max-width:820px){.navlinks a.mob{display:inline;padding:8px 2px}}
/* Knapp i mørk seksjon arvet lenkefargen (cyan på grønt) */
.section--dark a.btn-primary,.section--dark a.btn-primary:hover{color:var(--accent-ink)}
/* I-05: skjermbilder på /ny-nettside/ — to bilder, ikke galleri (beslutning 24.09) */
.skjermer{display:grid;gap:22px;margin-top:34px;align-items:start}
@media(min-width:760px){.skjermer{grid-template-columns:2fr 1fr}}
.skjermer figure{margin:0}
.skjermer img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.skjermer figcaption{margin-top:10px;font-size:15px;line-height:1.5;color:var(--text-dim)}
/* D-02 (25.09.2026): brødtekst minst 16 px — løpende tekst, ikke etiketter */
p.mute,.skille,.snitt-nokkel p,.porter p,.doerer p,.rapport-rad p,.felt dd,.inv li,.rammer .ikke li,.grense td{font-size:16px}
/* Forsidetoppen (25.09.2026): mindre luft over, mindre overskrift, luft mellom overskrift og ingress */
.section--hero{padding-top:48px}
@media(min-width:760px){.section--hero{padding-top:64px}}
.section--hero .par{margin-top:0}
.section--hero h1{font-size:clamp(32px,4.4vw,48px);line-height:1.1;margin-top:10px;max-width:20ch}
.section--hero h1 + .lead{margin-top:20px}
/* Veivalget i forsidetoppen (25.09.2026): én kolonne, siden venstre spalte er smal */
.section--hero .doerer{grid-template-columns:1fr;gap:12px}
.section--hero .doerer > div{padding:16px 18px 15px}

/* D-11 26.09.2026: lenker i løpende tekst skal ikke skilles bare med farge
   (#0E7490 mot teksten = 1,35:1, krav 3:1). Understrek i avsnitt og lister.
   Knapper, meny og logo er ikke i p/li og berøres ikke. */
main p a:not(.btn), main li a:not(.btn), .foot p a{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
main p a:not(.btn):hover, main li a:not(.btn):hover, .foot p a:hover{text-decoration-thickness:2px}

/* Leveransen: rapportark + tre punkter (26.09.2026, NS-003 forslag 1).
   Eksempelet viser produktet før forklaringen, også på mobil. */
.leveranse{display:grid;gap:28px;margin-top:38px;align-items:start}
@media(min-width:860px){.leveranse{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px}}
.ark{margin:0}
.ark .rapport{color:var(--text);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.ark .rapport-topp{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between}
.ark-merke{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.rapport-ok{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;background:#E9F5EE;border-bottom:1px solid var(--line)}
.rapport-ok b{display:block;font-size:16px;margin-bottom:2px}
.rapport-ok p{margin:0;font-size:15px;color:var(--text-dim)}
.rapport-rek{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 20px;background:var(--surface);border-top:1px solid var(--line)}
.rek{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:#fff;padding:5px 9px;border-radius:5px}
.rek-a{background:var(--sev-a)}.rek-b{background:var(--sev-b)}.rek-c{background:var(--sev-c)}
.rapport-rad p.rapport-tittel{font-size:16.5px;font-weight:700;color:var(--text);margin:0 0 6px}
.pin{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font:700 12.5px/1 var(--font-mono)}
.pin--tom{background:transparent;color:var(--on-dark-dim);box-shadow:inset 0 0 0 1.5px var(--on-dark-dim)}
.ark-tekst{margin-top:14px;font-size:14px;color:var(--on-dark-dim)}
@media(min-width:860px){.steg.steg--liste{grid-template-columns:1fr}}
.steg--liste li{padding:20px 22px}
.steg--liste li.tung{padding:24px}
.steg--liste li b{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--on-dark);margin-bottom:8px}
.steg--liste li.tung b{color:var(--on-dark)}
.steg--liste li p{margin:0}
.steg--liste li p + p{margin-top:10px}

/* Portrett i Kontakt (26.09.2026, T-02). Eget foto, 480 px WebP, vises som sirkel. */
.person{display:flex;gap:22px;align-items:center}
.person img{width:112px;height:112px;border-radius:50%;object-fit:cover;flex:none;background:var(--surface-2)}
.person p{margin:0}
.person-navn{display:block;color:var(--text);font-size:17px;margin-bottom:2px}
@media(max-width:480px){.person{gap:16px;align-items:flex-start}.person img{width:88px;height:88px}}



/* ============================================================
   REFERANSE InCoDesign i «Arbeid jeg har gjort», 29.09.2026
   ============================================================ */
.case-par{display:grid;gap:18px;margin-top:32px}
@media(min-width:760px){.case-par{grid-template-columns:1fr 1fr}}
.case-par figure{margin:0}
.case-par img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--dark-line);background:var(--dark-2)}
.case-par figcaption{margin-top:8px;font-size:14px;color:var(--on-dark-dim)}
.case-tall{margin-top:36px}
.section--dark .case-tall div{border-left-color:var(--on-dark-ac)}
.section--dark .case-tall dt{color:var(--on-dark)}
.section--dark .case-tall dd{color:var(--on-dark-dim)}
.case-skille{border:0;border-top:1px solid var(--dark-line);margin:72px 0 56px}

/* Rutene i heroen forsvant i bakgrunnen, 29.09.2026 (Roger): hvitt på
   #FBFAF7 er 1,04:1, altså usynlig. Veivalgene får papirflate og
   aksentstrek, løftene og kortene får skygge. Tekstkontrast kontrollert:
   --text-dim 6,44:1 og --accent-tx 5,05:1 på --surface. */
.section--hero .doerer > div{background:var(--surface);border-color:var(--line);
  border-left:3px solid var(--accent)}
.lovnader li,.uke{box-shadow:0 1px 2px rgba(21,33,29,.06),0 6px 18px rgba(21,33,29,.06)}
.lovnader li{border-top:3px solid var(--accent)}

/* Prisseksjonen med tre tjenester og synlige tillegg, 29.09.2026 (Roger). */
@media(min-width:1000px){.prisrad--tre{grid-template-columns:1.1fr 1fr 1fr}}
@media(min-width:860px) and (max-width:999px){.prisrad--tre{grid-template-columns:1fr 1fr}
  .prisrad--tre > .hoved{grid-column:1 / -1}}
.prisrad--tre{align-items:stretch}
.prislinjer{margin:14px 0 0;padding:0}
.prislinjer div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.prislinjer div:last-child{border-bottom:0}
.prislinjer dt{color:var(--text-dim);font-size:15px}
.prislinjer dd{margin:0;font-weight:700;white-space:nowrap;font-size:15px}
.tillegg-tittel{margin-top:44px;font-size:20px}
.tillegg{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
@media(min-width:680px){.tillegg{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tillegg{grid-template-columns:repeat(4,1fr)}}
.tillegg li{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:10px;padding:16px 18px}
.tillegg b{display:block;font-size:15.5px}
.tillegg .kr{display:block;font-family:var(--font-head);font-weight:800;font-size:19px;margin:4px 0 6px}
.tillegg span:last-child{display:block;font-size:14.5px;line-height:1.45;color:var(--text-dim)}

/* Alternativ 1 etter NS-020, 29.09.2026 (Rogers valg): kortet «Fra et
   oppdrag» er tatt ut av toppen, og veivalgene står i egen rad under
   begge kolonnene. Referansen står fortsatt i #arbeid. */
.section--hero .doerer.doerer--rad{margin-top:40px;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.section--hero .doerer.doerer--rad{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.section--hero .doerer.doerer--rad{grid-template-columns:repeat(3,1fr)}}

/* FAQ 02.10.2026 (R02.18): spørsmål som kan besvares uten Roger. <details> virker uten JavaScript. */
.faq{margin-top:24px; border-top:1px solid var(--line)}
.faq-q{border-bottom:1px solid var(--line)}
.faq-q summary{cursor:pointer; list-style:none; padding:18px 36px 18px 0; position:relative; font-weight:600; font-size:18px; line-height:1.4}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+"; position:absolute; right:4px; top:15px; font-size:24px; line-height:1; color:var(--text-dim)}
.faq-q[open] summary::after{content:"\2212"}
.faq-q summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.faq-q p{margin:0 0 18px; max-width:62ch}



/* ---------- Forsidens uttrykk på undersidene (03.10.2026) ----------
   Overstyrer de få hardkodede fargene i v1 og gir overskriftene
   forsidens display-snitt. Fjernes hvis undersidene bygges om helt. */
h1,h2{font-variation-settings:"wdth" 75;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
h1{font-size:clamp(40px,6vw,84px)}
h2{font-size:clamp(32px,4.6vw,60px)}
.btn{border-radius:999px}
.btn-primary:hover{background:#1F4410}
.btn-ghost{border-color:#163300;color:#163300}
.section--dark .mute,.section--dark .facts dt,.section--dark .facts .k,.foot .mute,.section--dark .uke .dag,.section--dark .inv-topp{color:var(--on-dark-dim)}
.steg li.tung{background:var(--dark-2)}
.rapport-ok{background:var(--surface)}
.topbar{background:rgba(159,232,112,.92)}