/* Forsiden (forside.html). Egen fil så appens utseende ikke påvirkes.
   Samme uttrykk som appen: rette kort, tynne linjer, plomme brukt sparsomt.
   Fargene er de samme som i app.css; endres de der, endres de også her. */
:root{
  box-sizing:border-box; color-scheme:light;
  --bg:#F8F7FA; --panel:#FFFFFF; --ink:#1F1A2B; --muted:#6B6577; --line:#ECE9F1; --field-line:#D9D4E2;
  --accent:#5B2D8E; --accent-hover:#4A2375; --accent-ink:#FFFFFF; --accent-soft:#F3EEFA; --accent-text:#5B2D8E;
  --logo-bg:#5B2D8E; --logo-fg:#F2C14E;
  --ok:#17603F; --ok-bg:#EAF6EF; --ok-mark:#1F8A5B; --soft:#F4F2F7;
  --shadow:0 1px 2px rgba(31,26,43,.04);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#141219; --panel:#1C1923; --ink:#EDEAF2; --muted:#A39DAF; --line:#2B2733; --field-line:#3A3544;
    --accent:#B58AE6; --accent-hover:#C7A4EE; --accent-ink:#1F1A2B; --accent-soft:#2A2236; --accent-text:#C7A4EE;
    --ok:#6FCF9E; --ok-bg:#15261D; --ok-mark:#4FBF86; --soft:#221F2A;
    --shadow:none;
  }
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:84px; scroll-behavior:smooth; scrollbar-gutter:stable}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding-inline:16px}
@media(min-width:720px){.wrap{padding-inline:24px}}
h1,h2,h3{line-height:1.15; text-wrap:balance; margin:0; letter-spacing:-0.02em}
p{margin:0}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.ph{background:var(--accent-soft); border-bottom:2px dashed var(--accent); padding:0 .2em; border-radius:2px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
.fine{font-size:.88rem; color:var(--muted); margin-top:14px}

/* Topp */
.nav{position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:10px}
/* Samme topp som appen (app.css .top-inner): logoen står på nøyaktig samme sted på alle sider. */
@media(min-width:1200px){.nav .wrap{max-width:1240px}}
.logo{display:flex; align-items:center; min-height:44px; gap:10px; font-weight:700; font-size:1.15rem; letter-spacing:-0.02em; text-decoration:none}
.logo svg{width:30px; height:30px; flex:none}
.nav-links{display:flex; align-items:center; gap:8px; font-size:.95rem}
.nav-links a{text-decoration:none; color:var(--muted); font-weight:500; padding:7px 12px; border-radius:8px}
.nav-links a:hover{color:var(--ink); background:var(--soft)}
.nav-links a.btn{margin-left:8px}
.nav-links a.btn-primary{color:var(--accent-ink)}
.nav-links a.btn-primary:hover{background:var(--accent-hover)}
.nav-links a.btn-ghost{color:var(--ink)}
.nav-links a.btn-ghost:hover{background:var(--panel); border-color:var(--ink)}
@media(max-width:720px){.nav-links .hide-sm{display:none}}

.btn{display:inline-flex; align-items:center; justify-content:center; font:inherit; font-weight:650; font-size:1rem; padding:13px 22px; border-radius:12px; border:1.5px solid transparent; text-decoration:none; transition:background .15s, border-color .15s}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--field-line); color:var(--ink); background:var(--panel)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:8px 14px !important; font-size:.92rem; border-radius:10px}
.btn-block{display:flex; width:100%}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* Seksjoner: samme bredde og samme topp overalt. Annenhver har hvit bakgrunn. */
section{padding-block:clamp(48px,7vw,80px)}
section.band{background:var(--panel); border-block:1px solid var(--line)}
section.band .card{background:var(--bg)}
.sec-head{max-width:640px; margin-bottom:32px}
.sec-head h2{font-size:clamp(1.6rem,3vw,2rem); font-weight:750}
.sec-head p{color:var(--muted); margin-top:8px}

/* Toppfelt */
.hero{padding-block:clamp(40px,7vw,80px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px}}
.label{color:var(--accent-text); font-weight:650; font-size:.95rem; margin-bottom:12px}
.hero h1{font-size:clamp(2rem,4.6vw,3.1rem); font-weight:750; letter-spacing:-0.03em}
.lede{font-size:1.12rem; color:var(--muted); max-width:52ch; margin-top:18px}
.trust-points{margin-top:28px; font-size:.95rem; color:var(--muted)}
.trust-points svg{color:var(--ok-mark)}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}

/* Eksempelet til høyre: samme oppsummering som i appen */
.preview{padding:22px}
.preview-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px}
.preview-head strong{display:block; font-size:1.08rem}
.preview-head span:not(.badge){color:var(--muted); font-size:.92rem}
.badge{display:inline-block; font-size:.78rem; font-weight:650; border-radius:99px; padding:3px 11px; white-space:nowrap}
.badge.ok{background:var(--ok-bg); color:var(--ok)}
.badge.accent{background:var(--accent); color:var(--accent-ink)}
.receipt{margin:0; border:1px solid var(--line); border-radius:12px; background:var(--soft); padding:6px 16px; font-variant-numeric:tabular-nums; font-size:.95rem}
.receipt div{display:flex; justify-content:space-between; gap:12px; padding:7px 0}
.receipt dt{min-width:0} .receipt dd{margin:0; white-space:nowrap}
.receipt .muted{color:var(--muted)}
.receipt .total{border-top:1px solid var(--field-line); font-weight:700; font-size:1.05rem; padding-top:10px}
.checklist{list-style:none; margin:16px 0 18px; padding:0; display:grid; gap:6px; font-size:.92rem}
.checklist li,.list li{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start}
.checklist svg,.list svg{width:20px; height:20px; margin-top:2px}
.checklist svg{color:var(--ok-mark)}

/* Trygt og riktig */
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:32px 40px}
.grid3>div{border-top:2px solid var(--accent-soft); padding-top:16px}
.grid3 h3{font-size:1.05rem; margin-bottom:6px}
.grid3 p{color:var(--muted); font-size:.98rem}

/* Hva du får */
.features{grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px 40px}
.features svg{color:var(--ok-mark)}
.features span{color:var(--muted)}
.features strong{color:var(--ink); font-weight:600}

/* Steg */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.steps li{padding:22px}
.steps h3{font-size:1.1rem; margin:14px 0 6px}
.steps p{color:var(--muted)}
.step{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text); font-weight:700; font-size:.92rem}

/* Passer det for deg */
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.two .card{padding:24px}
.two h3{font-size:1.1rem; margin-bottom:14px}
.list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.fit-yes .list svg{color:var(--ok-mark)}
/* Ett kort over hele bredden: punktene i to kolonner på bred skjerm. */
@media(min-width:720px){.two.solo .list{grid-template-columns:1fr 1fr; column-gap:32px}}

/* Pris */
.packs{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.pack{position:relative; padding:22px 18px 18px; display:flex; flex-direction:column}
.pack.featured{border:2px solid var(--accent); padding:21px 17px 17px}
.pack .badge{position:absolute; top:-11px; left:16px}
.pack h3{font-size:.95rem; font-weight:600; color:var(--muted); margin-bottom:10px}
.price{font-size:1.9rem; font-weight:750; letter-spacing:-0.02em; line-height:1.1}
.pack p{color:var(--muted); font-size:.88rem; margin:6px 0 14px}
.pack .pack-btn{margin-top:auto}

/* Spørsmål */
.faq{max-width:780px; padding:0 22px}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:none}
.faq summary{cursor:pointer; list-style:none; padding:18px 36px 18px 0; font-weight:600; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:2px; top:14px; font-size:1.4rem; font-weight:400; color:var(--accent-text)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 18px; color:var(--muted); max-width:65ch}

/* Avslutning og bunn */
.final-box{text-align:center}
.final-box h2{font-size:clamp(1.5rem,3vw,1.9rem); font-weight:750}
.final-box p{color:var(--muted); margin:8px 0 22px}
footer{border-top:1px solid var(--line); background:var(--panel); padding-block:28px calc(36px + env(safe-area-inset-bottom,0px)); font-size:.9rem; color:var(--muted)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px}
footer nav{display:flex; flex-wrap:wrap; gap:18px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.faq details ul,.faq details ol{margin:-8px 0 18px; padding-left:22px; color:var(--muted); max-width:65ch}
.faq details li{margin:4px 0}
.faq details li strong{color:var(--ink); font-weight:600}
.faq details p+p{margin-top:-8px}

/* Personvern, vilkår og kontakt */
.doc{padding-block:clamp(40px,6vw,64px)}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(1.9rem,4vw,2.4rem); font-weight:750; letter-spacing:-0.03em}
.doc .lead{font-size:1.1rem; color:var(--muted); margin-top:10px}
.doc h2{font-size:1.15rem; font-weight:700; margin:36px 0 10px}
.doc p,.doc li{color:var(--muted)}
.doc strong{color:var(--ink); font-weight:600}
.doc ul{margin:0 0 12px; padding-left:22px}
.doc li{margin:6px 0}
.doc p+p,.doc ul+p{margin-top:12px}
.doc a{color:var(--accent-text)}
.doc a.btn-primary{color:var(--accent-ink)}
.doc a.btn-ghost{color:var(--ink)}
.contact{margin-top:28px; padding:8px 22px}
.contact>div{display:grid; grid-template-columns:110px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line)}
.contact>div:first-child{border-top:none}
.contact .k{color:var(--muted); font-size:.92rem}

/* Til toppen: liten rund knapp nede til høyre, vises etter én skjermhøyde. Ligger over innholdet, tar ingen plass. */
.to-top{position:fixed; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:20;
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--panel); color:var(--accent-text); border:1px solid var(--field-line); box-shadow:0 4px 14px rgba(31,26,43,.12); text-decoration:none}
.to-top:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.to-top[hidden]{display:none}

/* Logo B: papirfly og ordlogo i streker, farge fra --accent-text (følger mørk modus). */
.logo .logo-mark{display:block; height:30px; width:auto; color:var(--accent-text)}
@media(max-width:420px){.logo .logo-mark{height:22px}}
@media(max-width:400px){.logo .logo-mark{height:19px}}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* «Logg inn» eller «Gå til appen» (innlogget.js setter html.innlogget før siden tegnes). Begge tekstene ligger i samme rute,
   så knappen har samme bredde i begge tilstander og ingenting i toppen flytter seg. */
.nav-login{display:inline-grid}
.nav-login > span{grid-area:1 / 1; text-align:center}
.nav-login .l-in, html.innlogget .nav-login .l-out{visibility:hidden}
html.innlogget .nav-login .l-in{visibility:visible}