/* sydvest.app — felles stilark (19. aug 2026)
   «Svart på lyst» — samme regler som appen (se CLAUDE.md):
   1. Lys grunn. Ingen mørk topp, ingen farget hero, ingen gradient, ingen skygge.
   2. Kull er eneste aksent. Knapper er svarte piller, lenker er kull med understrek.
      Teal lever bare i logo-prikken.
   3. Kulør bare som prikk, ord eller strek. Korall kun som tekst ved hast.
   4. Hårfine linjer i stedet for fylte kort. Kort er hvite med 1 px kant.
   5. Familjen Grotesk 600 på overskrifter, IBM Plex Sans ellers, IBM Plex Mono
      i versaler som etikett over tittelen.
   6. Ikonene store og nakne (96–160 px), ett per seksjon. Aldri små ikoner i brikker.
   7. Vei-språket: stiplet = veien videre, heltrukket = gått, prikk = milepæl.
   Sidene: index.html, guide/** (generert av nettside/gen-guider.mjs), diagnoser/,
   kilder/, personvern/, vilkar/. Hver side legger til sin egen <style> for det som
   bare finnes der. */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#16181C;--ink-2:#2A2E35;--slate:#5A5F66;--slate-2:#6C7178;--slate-3:#868C93;--fog:#B4BAC1;
  --paper:#FCFCFD;--paper-2:#F6F6F7;--foam:#F2F3F5;--linje:#D5D9DE;
  --teal:#0B7C74;
  --coral-text:#B03A38;
  --nav-etat:#00807A;--kommune:#454E5F;--skole:#2E6FE0;--helse:#8250E8;
  --r:16px;--r-lg:22px;--r-xl:26px;
  --font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-head:"Familjen Grotesk","IBM Plex Sans",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:600;letter-spacing:-.02em;line-height:1.1;font-feature-settings:"ss01"}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.wrap{max-width:1160px;margin:0 auto;padding-inline:40px}
.wrap-s{max-width:760px;margin:0 auto;padding-inline:40px}
.mono{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{color:var(--slate-3)}
/* Vern: en eyebrow skal ALDRI arve størrelse fra seksjonsregler som «.hvem p».
   .mono.eyebrow (0,2,0) slår enhver «.seksjon p» (0,1,1). */
.mono.eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;line-height:1.6;text-transform:uppercase}
.strek{border-top:1px solid var(--linje)}
.lenke{color:var(--ink);font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:1px;display:inline-block}
.lenke:hover{border-bottom-color:transparent}
.tall{font-variant-numeric:tabular-nums}

/* knapper: svart pille og tynn pille — ingen skygge, ingen sprett */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:999px;font-weight:500;font-size:16px;line-height:1.2;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:opacity .15s,border-color .15s,background .15s}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{opacity:.86}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--linje)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-s{padding:10px 17px;font-size:14px}
.btn svg{width:16px;height:16px;flex:none}

/* seksjonshode: eyebrow i mono, én stor tittel, en setning */
.section{padding-block:88px}
.section-head{max-width:680px;margin-bottom:48px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .eyebrow{display:block;margin-bottom:16px}
.section-head h2{font-size:clamp(30px,3.6vw,42px);margin-bottom:14px}
.section-head p{font-size:18px;color:var(--slate);line-height:1.55}

/* store nakne ikoner — ett per seksjon, ingen brikke bak */
.ikon-stor{display:block;stroke:var(--ink);fill:none;stroke-width:.62;stroke-linecap:round;stroke-linejoin:round;width:120px;height:120px;flex:none}
.ikon-stor.s96{width:96px;height:96px;stroke-width:.7}
.ikon-stor [fill="currentColor"]{fill:var(--ink)}

/* hårfine rader — listen er standardformen for alt som er flere ting */
.rader{list-style:none;border-top:1px solid var(--linje)}
.rader>li,.rader>a{display:block;border-bottom:1px solid var(--linje)}

/* butikk-merker */
.stores{display:flex;gap:10px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--linje);background:#fff;border-radius:999px;padding:10px 18px;font-weight:500;font-size:14px;color:var(--ink)}
.store svg{width:17px;height:17px;color:var(--ink);flex:none}
.store small{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-3);font-weight:500;line-height:1}
.store b{display:block;font-weight:500;line-height:1.15}

/* ── MENY ── */
/* padding-block, ikke «padding:24px 0» — kortformen nuller ut sidepaddingen
   fra .wrap, og da faller logoen ut til kanten på hver eneste side. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:24px}
.nav .logo img{height:28px;width:auto}
.nav .links{display:flex;gap:28px;align-items:center;font-size:15px;color:var(--slate)}
.nav .links a:hover{color:var(--ink)}
/* «Last ned»-pillen i menyen skal ikke arve lenke-hoveren — ellers blir
   teksten kull på kull flate. */
.nav .links a.btn-primary,.nav .links a.btn-primary:hover{color:var(--paper)}
.nav .links a[aria-current]{color:var(--ink);border-bottom:1px solid var(--ink)}
.nav .snart{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:#fff;border:1px solid var(--linje);padding:7px 13px;border-radius:999px;white-space:nowrap}
.nav .meny{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--linje);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.nav .meny svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round}
.mobilmeny{display:none}
.mobilmeny[open]{display:block;border-top:1px solid var(--linje);border-bottom:1px solid var(--linje)}
.mobilmeny a{display:block;padding:15px 0;border-bottom:1px solid var(--linje);font-size:17px}
.mobilmeny a:last-child{border-bottom:0}

/* ── TELEFONRAMME (til ekte skjermbilder) ──
   <figure class="tlf"><div class="ramme"><img src="/bilder/app-saker.png"></div><figcaption>…</figcaption></figure>
   Skjermbildet skal være selve skjermen (ingen ramme, ingen hjørner) i 9:19,5 —
   f.eks. 1179×2556 fra iPhone. Rammen tegnes her. */
.tlf{text-align:center}
/* Ingen fast aspect-ratio: bildet styrer høyden, så ingenting beskjæres.
   Skjermbildet skal være hele skjermen (inkl. statuslinje) — f.eks. 1206×2622. */
.tlf .ramme{width:100%;max-width:300px;margin:0 auto;border-radius:44px;background:var(--ink);padding:9px;position:relative}
.tlf .ramme img{width:100%;height:auto;border-radius:36px;background:var(--paper-2)}
.tlf .ramme::after{content:"";position:absolute;left:50%;top:17px;transform:translateX(-50%);width:78px;height:22px;border-radius:14px;background:var(--ink)}
.tlf h3{font-size:20px;margin:26px 0 6px}
.tlf p{font-size:16px;color:var(--slate);line-height:1.5;max-width:30ch;margin-inline:auto}

/* ── BUNN ── */
.footer{border-top:1px solid var(--linje);padding:64px 0 44px;margin-top:40px}
.footer .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer .logo img{height:25px;width:auto}
.footer .blurb{font-size:14px;color:var(--slate);max-width:34ch;margin-top:16px;line-height:1.6}
.footer h4{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-3);margin-bottom:16px}
.footer li{list-style:none;margin-bottom:9px}
.footer li a{font-size:14px;color:var(--slate)}
.footer li a:hover{color:var(--ink)}
.footer .bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--linje);font-size:13px;color:var(--slate-3)}
.footer .bottom .mono a{color:var(--slate-3)}
.footer .bottom .mono a:hover{color:var(--ink)}

@media(max-width:900px){
  .wrap,.wrap-s{padding-inline:22px}
  .nav{padding-block:18px}
  .nav .links{display:none}
  .nav .meny{display:flex}
  .section{padding-block:64px}
  .section-head{margin-bottom:36px}
  .footer .top{grid-template-columns:1fr 1fr}
  .footer .top>div:first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}