:root{
  --bg:#17171A;--bg-elev:#1E1E21;--card:#2A2A30;
  --gold:#C8A45D;--gold-soft:#E0C896;
  --text:#E8E8E8;--muted:#A0A0A0;--line:rgba(255,255,255,0.08);
  --maxw:920px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:720px}

/* NAV */
nav.top{position:sticky;top:0;z-index:20;background:rgba(23,23,26,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;height:62px;max-width:var(--maxw);margin:0 auto;padding:0 22px}
nav.top .brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;font-size:15px}
nav.top .brand img{height:34px;width:34px;border-radius:50%}
nav.top .menu a{color:var(--muted);font-size:14px;font-weight:600;margin-left:18px}
nav.top .menu a:hover{color:var(--gold);text-decoration:none}
.menu-btn{display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer}
@media(max-width:760px){
  nav.top .menu{position:absolute;top:62px;left:0;right:0;background:var(--bg-elev);border-bottom:1px solid var(--line);
    flex-direction:column;padding:10px 22px 18px;display:none}
  nav.top .menu.open{display:flex}
  nav.top .menu a{margin:8px 0;font-size:16px}
  .menu-btn{display:block}
}

/* HERO */
.hero{text-align:center;padding:70px 22px 56px;border-bottom:1px solid var(--line);
  background:linear-gradient(rgba(23,23,26,.72),rgba(23,23,26,.95)),url('/assets/img/bg.jpg');background-size:cover;background-position:center}
.hero .emblem{width:104px;height:104px;border-radius:50%;margin:0 auto 20px;display:block}
.hero h1{font-size:34px;font-weight:800;letter-spacing:-.5px;margin-bottom:14px;line-height:1.2}
.hero p{color:var(--muted);font-size:19px;max-width:600px;margin:0 auto}
@media(max-width:600px){.hero h1{font-size:27px}}

/* BUTTONS */
.btn{display:inline-block;margin-top:8px;padding:13px 28px;border-radius:999px;background:var(--gold);color:#141414;font-weight:800;font-size:15px;border:none;cursor:pointer}
.btn:hover{background:var(--gold-soft);text-decoration:none}
.btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn.block{display:block;text-align:center}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}

/* SECTIONS */
main section{padding:46px 0;border-bottom:1px solid var(--line)}
.eyebrow{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
h2{font-size:25px;font-weight:800;letter-spacing:-.3px;margin-bottom:14px;line-height:1.25}
h3{font-size:19px;font-weight:700;margin:24px 0 8px}
p{color:var(--muted);margin-bottom:14px}
.lead{color:var(--text);font-size:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){.grid,.grid3{grid-template-columns:1fr}}
ul.feat{list-style:none}ul.feat li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line);color:var(--text)}
ul.feat li:last-child{border-bottom:none}ul.feat li::before{content:"›";position:absolute;left:4px;color:var(--gold);font-weight:800}

/* SCREENSHOTS */
.shots{display:flex;gap:16px;overflow-x:auto;padding:6px 0 12px}
.shots img{height:500px;border-radius:22px;border:1px solid var(--line);flex:0 0 auto}
@media(max-width:600px){.shots img{height:400px}}

/* ARTICLE */
article .meta{color:var(--muted);font-size:13px;margin-bottom:22px}
article h2{margin-top:34px}
article p,article li{color:var(--text)}
article ul,article ol{margin:0 0 16px 22px}article li{margin-bottom:8px}
.toc{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:22px 0}
.toc strong{display:block;color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.toc a{color:var(--text);font-size:15px}
.box{border-radius:12px;padding:18px 20px;margin:22px 0;border:1px solid var(--line)}
.box .t{font-weight:800;margin-bottom:6px;font-size:14px;text-transform:uppercase;letter-spacing:.5px}
.box.fact{background:var(--bg-elev);border-left:3px solid var(--gold)}.box.fact .t{color:var(--gold)}
.box.warn{background:#241c17;border-left:3px solid #D89A2B}.box.warn .t{color:#E7B24C}
.box.tip{background:#1a2420;border-left:3px solid #4E9C75}.box.tip .t{color:#6FBF95}
.sources{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:26px 0}
.sources strong{color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:1px}
.sources ul{margin:10px 0 0 20px}.sources li{color:var(--muted);font-size:14px}
.author-box{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:26px 0}
.author-box img{width:56px;height:56px;border-radius:50%}
.author-box .n{font-weight:700;color:var(--text)}.author-box .r{color:var(--muted);font-size:14px}
.cta{background:linear-gradient(135deg,#211d16,#2A2A30);border:1px solid var(--gold);border-radius:16px;padding:24px;margin:26px 0;text-align:center}
.cta h3{margin-top:0;color:var(--text)}
.crumb{font-size:13px;color:var(--muted);padding:16px 0}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--gold)}

/* CATEGORY / ARTICLE CARDS */
.klist{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.klist{grid-template-columns:1fr}}
.kcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.kcard:hover{border-color:var(--gold);text-decoration:none}
.kcard .k{color:var(--gold);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.kcard h3{margin:6px 0;color:var(--text);font-size:18px}
.kcard p{color:var(--muted);font-size:14px;margin:0}

.pdf-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:26px;align-items:center}
@media(max-width:700px){.pdf-hero{grid-template-columns:1fr}}
.pdf-hero img{border-radius:12px;border:1px solid var(--line)}

.disclaimer{border-left:3px solid var(--gold);background:var(--bg-elev);border-radius:10px;padding:18px 20px;margin-top:18px;color:var(--text)}
.tag{display:inline-block;padding:6px 14px;border:1px solid var(--gold);border-radius:999px;color:var(--gold);font-size:13px;font-weight:700;margin-top:14px}

/* FOOTER */
footer{background:var(--bg-elev);padding:40px 22px 56px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
footer .fgrid{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
footer .fcol h4{color:var(--text);font-size:14px;margin-bottom:10px}
footer .fcol a{display:block;color:var(--muted);margin-bottom:6px;font-size:14px}
footer .fcol a:hover{color:var(--gold);text-decoration:none}
footer .fine{max-width:var(--maxw);margin:26px auto 0;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ===== Produksjonsoppgradering ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#141414;padding:10px 16px;border-radius:0 0 8px 0;z-index:100;font-weight:700}
.skip:focus{left:0}
nav.top .menu a.active{color:var(--gold)}
nav.top .navcta{margin-left:18px;padding:8px 18px;border-radius:999px;background:var(--gold);color:#141414!important;font-weight:800;font-size:14px}
nav.top .navcta:hover{background:var(--gold-soft);text-decoration:none}
@media(max-width:760px){nav.top .navcta{margin:8px 0;display:inline-block}}

/* Hero med telefon */
.hero2{padding:64px 22px 48px;border-bottom:1px solid var(--line);
  background:linear-gradient(rgba(23,23,26,.80),rgba(23,23,26,.96)),url('/assets/img/bg.webp');background-size:cover;background-position:center}
.hero2 .inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:820px){.hero2 .inner{grid-template-columns:1fr;text-align:center}.hero2 .phone{margin:0 auto}}
.hero2 h1{font-size:38px;font-weight:800;letter-spacing:-.6px;line-height:1.12;margin:10px 0 14px}
.hero2 p.ing{color:var(--muted);font-size:18px;max-width:520px}
@media(max-width:820px){.hero2 p.ing{margin:0 auto}}
.hero2 h1{font-size:32px}
.trust{margin-top:18px;color:var(--text);font-size:14px;font-weight:600}
.trust span{color:var(--gold)}

/* Telefon-ramme (CSS) */
.phone{width:270px;background:#0c0c0e;border:2px solid #2f2f36;border-radius:38px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.phone .scr{border-radius:28px;overflow:hidden;display:block;width:100%;aspect-ratio:420/909;background:#111}
.phone .scr img{width:100%;height:100%;object-fit:cover;display:block}
.phone.small{width:220px}
.phones{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}

.prelaunch{display:inline-block;margin-top:16px;padding:8px 16px;border:1px solid var(--gold);border-radius:999px;color:var(--gold);font-size:13px;font-weight:700}

/* Steg */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.step .num{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#141414;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:10px}

/* Sammenligningstabell */
table.cmp{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
table.cmp th,table.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
table.cmp th{color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
table.cmp td.c{text-align:center}
table.cmp .yes{color:var(--gold);font-weight:800}
table.cmp .no{color:var(--muted)}

/* Avatar-initial (ingen portrett) */
.avatar-init{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#2A2A30,#3a3a42);border:1px solid var(--gold);color:var(--gold);font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}

/* Prisboks */
.price{display:flex;align-items:baseline;gap:10px;margin:8px 0 4px}
.price .big{font-size:38px;font-weight:800;color:var(--text)}
.price .cur{color:var(--muted);font-weight:700}

/* App Store-merke (prelaunch tekstknapp) */
.appstore-soon{display:inline-flex;align-items:center;gap:10px;background:#1b1b1f;border:1px solid var(--line);border-radius:12px;padding:12px 18px;color:var(--text);font-weight:600}
.appstore-soon .g{color:var(--gold);font-weight:800}

/* Forfatterportrett */
.author-portrait{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);flex:0 0 auto}
.bio-hero{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
@media(max-width:640px){.bio-hero{grid-template-columns:1fr;justify-items:center;text-align:center}}
.bio-hero img{width:200px;height:266px;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.bio-hero .quote{border-left:3px solid var(--gold);padding-left:16px;color:var(--text);font-style:italic;margin-top:10px}

/* Mobil: sentrer knapper/pris der teksten allerede er sentrert (kun i hero/produktblokker) */
@media(max-width:820px){
  .hero2 .btnrow{justify-content:center !important}
  .hero2 .trust{text-align:center}
  .hero2 .price{justify-content:center}
  .hero2 .appstore-soon{margin:0 auto}
  .hero2 .inner > div > p{margin-left:auto;margin-right:auto}
}
@media(max-width:700px){
  .pdf-hero{text-align:center}
  .pdf-hero .btnrow{justify-content:center !important}
  .pdf-hero .price{justify-content:center}
  .pdf-hero img{margin:0 auto;display:block}
  .pdf-hero .appstore-soon{margin:0 auto}
  .pdf-hero ul.feat{text-align:left}
}

/* ============ TRAFIKK-MOTIV ============
   Signatur: den gule midtlinjen. Norske veier har gul midtlinje –
   umiddelbart gjenkjennelig. Brukes som sidens ryggrad. */
:root{ --road:#E3B23C; --l-red:#D42A2A; }

/* Midtlinje – stiplet veistripe */
.roadline{
  height:4px;width:100%;
  background-image:linear-gradient(90deg,var(--road) 0 46px,transparent 46px 92px);
  background-size:92px 4px;background-repeat:repeat-x;
  opacity:.5;
}
.roadline.sub{opacity:.28;height:3px;background-size:74px 3px;
  background-image:linear-gradient(90deg,var(--road) 0 36px,transparent 36px 74px)}
/* Statisk linje – ingen animasjon (bevisst fjernet for et roligere uttrykk) */
.roadline.drive{animation:none}

/* L-skilt: rød L på hvit bakgrunn (som på bilen) */
.lplate{display:inline-flex;align-items:center;gap:11px;margin-bottom:14px}
.lplate .plate{
  width:30px;height:30px;background:#fff;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:21px;line-height:1;
  color:var(--l-red);box-shadow:0 2px 10px rgba(0,0,0,.45);flex:0 0 auto;
  padding-bottom:2px;
}
.lplate .txt{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.4px}
@media(max-width:820px){.lplate{justify-content:center}}

/* Stegene som en kjøretur: midtlinje binder dem sammen */
.steps{position:relative}
.steps::before{
  content:"";position:absolute;top:39px;left:12%;right:12%;height:3px;z-index:0;
  background-image:linear-gradient(90deg,var(--road) 0 26px,transparent 26px 52px);
  background-size:52px 3px;background-repeat:repeat-x;opacity:.32;
}
.step{position:relative;z-index:1}
@media(max-width:700px){.steps::before{display:none}}

/* L-skilt i faktaboks (der innholdet faktisk handler om skiltet) */
.lfact{display:flex;align-items:center;gap:14px}
.lfact .plate{width:44px;height:44px;background:#fff;border-radius:5px;display:flex;
  align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:700;
  font-size:30px;color:var(--l-red);flex:0 0 auto;padding-bottom:3px}

/* Den bevegelige midtlinjen avslutter heroen – erstatter hårstreken */
.hero2{border-bottom:none}
.hero2 .roadline.drive{margin-top:52px;margin-bottom:-48px;position:relative}

/* ============ BREDERE PC-VISNING ============
   Struktur og kort får mer plass. Løpende tekst holdes på behagelig
   lesebredde (~70 tegn) – lange linjer er tunge å lese uansett skjerm. */
:root{ --maxw:1180px; }

/* Løpende tekst i seksjoner: behold lesbar linjelengde */
main section > p,
main section > .lead{max-width:72ch}
main section > ul.feat{max-width:80ch}

/* Kunnskapsbank: tre kort i bredden på store skjermer */
.klist{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* Hero: mer luft mellom tekst og telefon når det er plass */
@media(min-width:1000px){
  .hero2 .inner{gap:64px}
  .hero2 p.ing{max-width:560px}
  .phone{width:290px}
}

/* Artikler beholder smal lesekolonne */
.narrow{max-width:760px}

/* ============ SIKKERHETSKONTROLL ============ */
.sk-cat{margin:34px 0 0}
.sk-cat > .h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.sk-cat > .h h2{margin:0}
.sk-cat > .h .count{color:var(--muted);font-size:13px;font-weight:600}
.sk-cat > .lead{color:var(--muted);margin-bottom:16px}

details.sk{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
details.sk[open]{border-color:rgba(200,164,93,.45)}
details.sk > summary{
  list-style:none;cursor:pointer;padding:18px 20px;
  display:flex;align-items:center;gap:12px;font-weight:700;font-size:17px;color:var(--text)}
details.sk > summary::-webkit-details-marker{display:none}
details.sk > summary::after{
  content:"+";margin-left:auto;color:var(--gold);font-size:22px;font-weight:400;line-height:1;flex:none}
details.sk[open] > summary::after{content:"–"}
details.sk > summary:hover{color:var(--gold-soft)}
details.sk .body{padding:0 20px 20px;border-top:1px solid var(--line);padding-top:16px}
details.sk .body dl{margin:0}
details.sk .body dt{
  color:var(--gold);font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:1px;margin-top:14px}
details.sk .body dt:first-child{margin-top:0}
details.sk .body dd{margin:4px 0 0;color:var(--text);font-size:15.5px;line-height:1.65}
details.sk .say{
  background:var(--bg-elev);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  padding:12px 16px;margin-top:14px;font-style:italic;color:var(--text);font-size:15px}
details.sk .say b{display:block;font-style:normal;color:var(--gold);font-size:11px;
  text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
details.sk .rule{
  margin-top:12px;display:inline-block;background:rgba(200,164,93,.12);
  border:1px solid rgba(200,164,93,.35);border-radius:999px;
  padding:6px 14px;font-size:13.5px;font-weight:700;color:var(--gold-soft)}

.sk-check{background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:26px 0}
.sk-check ul{list-style:none;margin:12px 0 0;padding:0}
.sk-check li{padding:9px 0 9px 30px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px}
.sk-check li:last-child{border-bottom:none}
.sk-check li::before{content:"";position:absolute;left:0;top:15px;width:16px;height:16px;
  border:2px solid var(--gold);border-radius:4px}

@media(max-width:600px){
  details.sk > summary{font-size:15.5px;padding:15px 16px}
  details.sk .body{padding:0 16px 16px;padding-top:14px}
}

/* ============ GJENNOMGÅENDE BAKGRUNN ============
   Bildet ligger fast bak hele siden. Bruker et fixed pseudo-element
   i stedet for background-attachment:fixed, som er ustabilt på iOS. */
body{background:#111114}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:url('/assets/img/bg.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* Mørkt slør slik at teksten alltid er godt lesbar */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(rgba(17,17,20,.52),rgba(17,17,20,.74));
}

/* La bakgrunnen skinne gjennom flatene – lett gjennomsiktighet */
.card,.kcard,.step,.author-box,details.sk{background:rgba(38,38,44,.86);backdrop-filter:blur(6px)}
.toc,.sources,.disclaimer,.box.fact,.sk-check{background:rgba(28,28,32,.86);backdrop-filter:blur(6px)}
footer{background:rgba(24,24,28,.90);backdrop-filter:blur(6px)}
nav.top{background:rgba(17,17,20,.90)}
main section{border-bottom-color:rgba(255,255,255,.07)}

/* Hero: bildet ligger allerede bak – bare et mykt slør her */
.hero,.hero2{background:linear-gradient(rgba(17,17,20,.10),rgba(17,17,20,.45))}

@media(max-width:760px){
  /* Litt mer slør på mobil, der teksten står tettere */
  body::after{background:linear-gradient(rgba(17,17,20,.66),rgba(17,17,20,.84))}
}