/* klinikksiden.no — forsiden.
 *
 * Nøktern med vilje. Publikummet er leger og pasienter, og begge to gjennomskuer
 * salgsspråk raskere enn de leser det. Fargene er hentet fra logoen (marineblå
 * og rødt) i stedet for fra en palett ingen andre steder i tjenesten bruker.
 *
 * Ingen eksterne kall: ingen webfonter, ingen CDN, ingen sporing. Siden skal
 * kunne lastes uten at noen andre får vite at den ble lastet.
 */

:root{
  --marine:#1d3557;
  --marine-lys:#2c4f7c;
  --roed:#b5373f;
  --blekk:#26313c;
  --damp:#5a6773;
  --strek:#dfe5ea;
  --graa:#f5f8fa;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--blekk);
  background:#fff;
}

.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.wrap.smal{max-width:720px}

/* ── toppen ──────────────────────────────────────────────────────────────── */
.topp{
  background:linear-gradient(150deg,var(--marine),var(--marine-lys));
  color:#fff;
  padding:44px 0 52px;
}
.merke{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.merke img{width:46px;height:auto;display:block;background:#fff;border-radius:10px;padding:4px}
.merke span{font-size:19px;font-weight:600;letter-spacing:-.01em}
.merke .tld{opacity:.62;font-weight:400}

.topp h1{
  margin:0 0 14px;
  font-size:clamp(28px,4.6vw,42px);
  line-height:1.18;
  font-weight:650;
  letter-spacing:-.02em;
  max-width:19ch;
}
.ingress{margin:0;font-size:clamp(16px,2vw,19px);line-height:1.6;max-width:56ch;color:#e3ebf4}
.ingress code{
  background:rgba(255,255,255,.15);
  border-radius:5px;
  padding:1px 6px;
  font-size:.92em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;
}

/* ── merknaden om at dette ikke er et legekontor ─────────────────────────── */
/* Står høyt og alene. Den som er kommet feil, skal se det med én gang og
   slippe å lese resten. */
.merk{background:#fdf6e8;border-bottom:1px solid #f0e2c4}
.merk p{margin:0;padding:17px 0;font-size:15px;line-height:1.6;color:#6b5320}

/* ── seksjoner ───────────────────────────────────────────────────────────── */
section{padding:52px 0}
.grabunn{background:var(--graa);border-top:1px solid var(--strek);border-bottom:1px solid var(--strek)}

h2{
  margin:0 0 12px;
  font-size:clamp(22px,3vw,29px);
  line-height:1.25;
  font-weight:650;
  letter-spacing:-.015em;
  color:var(--marine);
}
.stor{margin:0 0 28px;font-size:17px;line-height:1.65;color:var(--damp);max-width:62ch}

/* ── bilder ──────────────────────────────────────────────────────────────── */
figure{margin:0 0 22px}
figure img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--strek);
  border-radius:11px;
  background:#fff;
}
figcaption{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--damp)}

.toko{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
/* Mobilbildet er høyt og smalt. Uten en egen bredde spriker de to kolonnene
   voldsomt, og skjermbildet av telefonen blir større enn den ekte telefonen. */
.mobilfig img{max-width:300px;margin:0 auto}

/* ── kom i gang ──────────────────────────────────────────────────────────── */
.steg{margin:0 0 18px;padding-left:22px;font-size:16.5px;line-height:1.7}
.steg li{margin-bottom:9px}
.fotn{margin:0;font-size:14px;color:var(--damp)}
code{
  background:#eef2f6;
  border-radius:5px;
  padding:1px 6px;
  font-size:.92em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;
}

/* ── hvem driver dette ───────────────────────────────────────────────────── */
.fakta{
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:9px 26px;
  font-size:15.5px;
  border-top:1px solid var(--strek);
  padding-top:18px;
}
.fakta dt{color:var(--damp)}
.fakta dd{margin:0;font-weight:550}

a{color:var(--roed);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:#8d2a30}
.topp a{color:#fff}

/* ── bunnen ──────────────────────────────────────────────────────────────── */
footer{background:var(--marine);color:#c9d6e4;padding:30px 0 36px;font-size:14px}
footer p{margin:0 0 7px}
footer a{color:#fff}
footer .liten{font-size:12.5px;color:#8ea5bd;max-width:62ch}

@media (max-width:720px){
  section{padding:38px 0}
  .topp{padding:32px 0 38px}
  .toko{grid-template-columns:1fr;gap:20px}
  .fakta{grid-template-columns:1fr;gap:3px 0}
  .fakta dd{margin-bottom:10px}
}

/* ── det siden henter selv ───────────────────────────────────────────────── */
/* Definisjonsliste og ikke punktliste: hvert punkt har et navn og en setning
   som sier hva det faktisk betyr. «Pollenvarsel» alene forklarer ingenting. */
.levliste{margin:26px 0 0;border-top:1px solid var(--strek)}
.levliste dt{margin-top:19px;font-weight:600;font-size:16px;color:var(--marine)}
.levliste dd{margin:3px 0 0;font-size:15.5px;line-height:1.6;color:var(--damp);max-width:62ch}