@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   underside.css — undersidene på forsidens mal.

   Lastes sist på alle undersider, etter hjemmeside.css, sider.css og
   sidens egen fil, og etter forside.css (som gir tokens, nav, meny og
   footer). Innholdet på sidene er det gamle; det som står her gjør at
   det leser som samme nettsted som forsiden: samme skrift over alt,
   hvite sidetopper med stor overskrift i stedet for mørke glassflater,
   hårstrek i stedet for skygge, og samme bredde.
   ═══════════════════════════════════════════════════════════ */

/* ── Skrift: Geist over alt, unntatt menyen (Bricolage). ──
   :where holder spesifisiteten lav, så nav-reglene i forside.css
   vinner der de skal. */
body.kd-side,
body.kd-side :where(*:not(.kd-nav):not(.kd-nav *):not(.mobile-menu):not(.mobile-menu *):not(.splash-word)) {
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* De to som setter skriften med !important i det gamle systemet. */
body.kd-side .ph-ghost, body.kd-side .svc-price.is-text {
  font-family: 'Geist', system-ui, sans-serif !important;
}
/* ── Størrelser: forsidens, én til én ──
   h1 = forsidens h1, h2 = .kd-h2, h3 = radene i «Hva endrer seg»,
   brødtekst 17 px / 1,6, ingress = .kd-hero-sub, etikett = .kd-lab. */
body.kd-side { font-size: 17px; line-height: 1.6; }
body.kd-side h1, body.kd-side .ph-title {
  font-size: clamp(2.05rem, 3.9vw, 3.25rem) !important;
  line-height: 1.18; letter-spacing: -.02em; font-weight: 400;
  text-transform: none; text-wrap: balance;
}
body.kd-side h2, body.kd-side .pf-head, body.kd-side .dm-head {
  font-size: clamp(1.7rem, 3.2vw, 2.65rem) !important;
  line-height: 1.22; letter-spacing: -.02em; font-weight: 400;
  text-transform: none; text-wrap: balance;
}
body.kd-side h3, body.kd-side .svc-name {
  font-size: clamp(1.25rem, 2.1vw, 1.8rem) !important;
  line-height: 1.25; letter-spacing: -.024em; font-weight: 400;
  text-transform: none; text-wrap: balance;
}
body.kd-side h4 { font-size: 1.1rem; font-weight: 500; letter-spacing: -.016em; }
/* Artikkelkortene i bloggoversikten er h2 (sidens hovedpunkter, rett
   under h1), men skal se ut som kort, ikke som seksjonsoverskrifter.
   Samme mål som h3-regelen over, som de hadde før. */
body.kd-side .bl-body h2 {
  font-size: clamp(1.25rem, 2.1vw, 1.8rem) !important;
  line-height: 1.25; letter-spacing: -.024em; font-weight: 400;
}
/* Vanlig brødtekst og lister uten egen klasse: samme som forsiden.
   Etiketter og småtekst med klasse beholder sin størrelse. */
body.kd-side main p:not([class]), body.kd-side main li:not([class]),
body.kd-side .pf-aside p, body.kd-side .svc-desc, body.kd-side .post-body p, body.kd-side .legal-body p {
  font-size: 17px; line-height: 1.6; color: var(--blekk-2);
}
body.kd-side .ph-lead, body.kd-side .lead {
  font-size: clamp(1rem, 1.25vw, 1.1rem) !important; line-height: 1.62; color: var(--blekk-2);
}

/* ── Mørke paneler: teksten må være lys ──
   Regelen rett over maler all p og li uten egen klasse med --blekk-2,
   som er ment for hvit bakgrunn. Den vant også inne i de mørke
   panelene, der teksten da havnet på 2,8:1 mot bakgrunnen — under
   AA-kravet på 4,5:1, og i praksis nesten uleselig. Panelene setter
   riktig farge selv, men med lavere spesifisitet enn regelen over.
   De mørke variantene er merket med egen klasse (is-dark, ag-dark,
   ph-dark) eller er alltid mørke (prisrutene, footeren, menyen).
   Lager du et nytt mørkt panel, må det inn i denne lista. */
body.kd-side :is(
  .in-price, .bd-price, .kd-foot, .kd-foot-panel, .mobile-menu, .kd-morkhero,
  .ag-card.ag-dark, .lv-card.is-dark, .legal-card.is-dark,
  .ph-card.ph-dark, .proc-card.is-dark
) :is(p, li):not([class]) {
  color: rgba(255,255,255,.72);
}

/* ── Lime kort: teksten skal være sort ──
   Samme årsak som over, motsatt vei. Kortene setter sort tekst selv,
   men den brede regelen malte avsnittene lysmodus-grå. På limegrønt
   ble grå tekst stående og flyte, mens tittelen ved siden av var
   sort. Her arver avsnittet kortets egen farge igjen. */
body.kd-side :is(.ag-card.ag-lime, .ph-card.ph-lime, .proc-card.is-lime) :is(p, li):not([class]) {
  color: inherit;
}

/* Unntak: telefonscenen ligger inne i den mørke heroen, men boblene
   der har sine egne farger. Regelen over gjorde teksten i den HVITE
   svarboblen hvit, så bare emojien var synlig. Samme spesifisitet,
   men senere i fila — derfor vinner den. */
body.kd-side .kd-morkhero .ua-phone .ua-sms p { color: #fff; }
body.kd-side .kd-morkhero .ua-phone .ua-svar p { color: #fff; }   /* grå boble i mørk modus, som Meldinger */

/* ── Sidetoppen: hvit, stor overskrift, som demo-siden ──
   Den gamle var en mørk eller blå glassflate med avrundede hjørner
   og 10 px marg rundt. Nå: hvit, kant til kant, hårstrek under. */
body.kd-side .page-hero {
  margin: 0;
  border-radius: 0;
  background: var(--ark) !important;
  color: var(--blekk);
  padding: 150px var(--kant) clamp(40px, 5vw, 64px) !important;
  /* Sto som «overflow: visible», så figurer som skal henge nedenfor
     toppen (nettsidemockupen, polaroiden) fikk gjøre det. Men da
     slapp også det som skal klippes i sidekanten ut — kjeksen på
     cookies-siden gjorde siden 430 px bred på en 390 px skjerm.
     clip på x, visible på y: begge deler virker. */
  overflow-x: clip;
  overflow-y: visible;
  /* Figurene som henger nedenfor toppen (nettsidemockupen, polaroiden)
     har z-index 3 og la seg dermed OPPÅ seksjonen under — mockupen
     dekket overskriften «Alt dette er med». Egen stablingskontekst på
     toppen holder dem inne, så de glir under neste seksjon i stedet.
     Trygt først nå som nav-baren ligger utenfor heroen; lå den inne,
     ville menyen blitt fanget i den samme konteksten. */
  isolation: isolate;
  z-index: 0;
}
body.kd-side .page-hero::before, body.kd-side .page-hero::after { display: none; }
body.kd-side .ph-field { display: none; }
/* Tilbakelenken på artiklene og det store ordet bak tittelen var satt
   i hvitt for den gamle mørke toppen. På hvit topp forsvant begge:
   «← Alle artikler» var usynlig, og spøkelsesordet tegnet ingenting. */
body.kd-side .bg-back { color: var(--blekk-2); }
body.kd-side .bg-back:hover { color: var(--blekk); }
body.kd-side .ph-ord .ph-ghost { color: rgba(12,13,14,.055); }
@media (max-width: 760px) {
  /* Lå forankret til høyre med negativ kant, så første bokstav
     («I» i Innsikt, «K» i Kontakt) ble klippet av venstre kant. */
  body.kd-side .ph-ord .ph-ghost { left: var(--kant); right: auto; font-size: 22vw; bottom: -.12em; letter-spacing: -.05em; }
}
body.kd-side .ph-kicker {
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blekk-3);
  margin-bottom: 14px;
}
body.kd-side .ph-title { color: var(--blekk); }
body.kd-side .ph-title .ph-lime { color: var(--blekk); }
body.kd-side .ph-lead { max-width: 52ch; }
body.kd-side .ph-link {
  background: var(--blekk); color: #fff;
  font-size: .95rem; font-weight: 600;
  padding: 14px 24px;
}
body.kd-side .ph-link:hover { background: #26282b; color: #fff; }
body.kd-side .ph-note, body.kd-side .hero-tagline { color: var(--blekk-3); }
/* Om meg og andre sider som satte lys tekst på mørk topp */
body.kd-side .page-hero p, body.kd-side .page-hero li { color: var(--blekk-2); }
body.kd-side .page-hero h1, body.kd-side .page-hero h2, body.kd-side .page-hero strong { color: var(--blekk); }
/* Indeksen til høyre på tjenestesiden og lignende lister i toppen */
body.kd-side .ph-index a, body.kd-side .pi-head { color: var(--blekk); border-color: rgba(12,13,14,.14); }
body.kd-side .pi-price, body.kd-side .pi-n { color: var(--blekk-3); }

/* ── Seksjonsoverskrifter og etiketter ── */
body.kd-side .pf-head { color: var(--blekk); }
body.kd-side .pf-grey { color: var(--blekk-3); }
body.kd-side .pf-eyebrow, body.kd-side .section-label, body.kd-side .eyebrow {
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blekk-3);
}
body.kd-side .pf-sq { display: none; }
body.kd-side .pf-aside p { color: var(--blekk-2); }
body.kd-side .pf-link { border-bottom-color: var(--lime); }

/* ── Bredde: samme spalte som forsiden ── */
body.kd-side .platform-top, body.kd-side .container,
body.kd-side .cb-pris, body.kd-side .ag-price, body.kd-side .lv-grid,
body.kd-side .kf-list, body.kd-side .rc-grid {
  max-width: var(--bredde);
}

/* ── Flater: hårstrek, ikke skygge. Samme radius som forsiden. ── */
body.kd-side .lv-card, body.kd-side .ag-card, body.kd-side .svc-row, body.kd-side .bl-card,
body.kd-side .rc-form-card, body.kd-side .komp-row, body.kd-side .pk-card, body.kd-side .cb-pris-rad,
body.kd-side .wy-card, body.kd-side .sv-card {
  box-shadow: none;
  border-radius: 16px;
}
body.kd-side [data-tilt] { transform: none !important; }

/* Knapper i det gamle systemet får forsidens form. */
body.kd-side .btn-circle {
  border-radius: 999px;
  background: var(--blekk); color: #fff;
  font-weight: 600; letter-spacing: 0; text-transform: none;
}
body.kd-side .btn-circle .bc-circle { background: var(--lime); color: var(--blekk); }
/* Sirkelen var gjennomsiktig i det gamle systemet, så pilen inni var
   lime og synlig. Da sirkelen ble fylt med lime, ble pilen lime på
   lime — sirkelen så tom ut på alle CTA-knappene. */
body.kd-side .btn-circle .bc-circle svg { stroke: var(--blekk); }
/* Hover: knappen var svart, og fyllet som vokser fra sirkelen var også
   svart, så ingenting skjedde bortsett fra at teksten byttet farge.
   Nå vokser lime fra sirkelen over hele knappen, og teksten blir svart.
   Tynn lys kant så den svarte knappen synes på mørke flater og bilder. */
body.kd-side .btn-circle { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
body.kd-side .btn-circle::before { background: var(--lime); }
body.kd-side .btn-circle:hover > span:not(.bc-circle) { color: var(--blekk); }
/* Når sveipet er ferdig, fylles også kanten rundt, så hele knappen er lime. */
body.kd-side .btn-circle:hover { background: var(--lime); transition: background .15s .3s, transform .14s; }
body.kd-side .nav-btn-lime, body.kd-side .btn-lime { background: var(--lime); color: var(--blekk); }

/* Chatbot-boblen og cookie-banneret: samme skrift som resten. */
body.kd-side .smt, body.kd-side .smt-t,
body.kd-side #cw-bubble, body.kd-side #cw-window, body.kd-side #cw-window * {
  font-family: 'Geist', system-ui, sans-serif;
}

@media (max-width: 760px) {
  body.kd-side .page-hero { padding-top: 120px !important; }
}

/* ── Mobilmenyen: forsidens, én til én ──
   sider.css har den gamle hvite menyen med sort tekst og olivengrønn
   glød. forside.css gjør flaten mørk, men setter ikke fargene på nytt,
   så sort tekst på mørkt ble stående på alle undersidene. */
body.kd-side .mobile-menu-nav a {
  color: var(--blekk);
  text-shadow: none;
  /* Forsidens radhøyde: sider.css setter clamp() på både størrelse og
     polstring, så radene ble høyere her enn på forsiden. */
  font-size: 1.45rem; font-weight: 600; letter-spacing: -.03em;
  line-height: 1.3; padding: 14px 0;
}
body.kd-side .mobile-menu-nav a:hover,
body.kd-side .mobile-menu-nav a:active { color: var(--blekk-2); transform: none; }
body.kd-side .mobile-menu-nav a.mm-cta { color: var(--blekk); background: var(--lime); text-shadow: none; }
body.kd-side .mobile-menu-nav a.mm-cta:hover,
body.kd-side .mobile-menu-nav a.mm-cta:active { color: var(--blekk); }
body.kd-side .mobile-menu-foot { border-top: 0; }
body.kd-side .mobile-menu-foot a {
  font-family: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  font-size: 1.06rem; letter-spacing: 0;
  color: var(--blekk); text-shadow: none;
}
body.kd-side .mobile-menu-foot a:hover { color: var(--blekk-2); text-shadow: none; }
body.kd-side .mm-foot-label {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: .74rem; letter-spacing: .1em;
  color: var(--blekk-3);
}

/* ── Mørk sidetopp: chatbot- og telefonsvarersiden ──
   Samme flate som forsidens hero og kundecase (.kd-bak: fotoet uskarpt
   under slør og korn), hvit tekst, og animasjonen (chatvinduet /
   telefonen) rett på flaten. Gløden, prikkmønsteret og gradientene
   fra det gamle systemet er ute. */
body.kd-side .page-hero.kd-morkhero {
  background: #07090f !important;
  color: #fff;
  overflow: hidden;
  border-bottom: 0;
  isolation: isolate;
  min-height: 0;
}
body.kd-side .kd-morkhero > .kd-bak { z-index: 0; }
body.kd-side .kd-morkhero .kd-bak-slor {
  background: linear-gradient(100deg, rgba(7,9,15,.86) 0%, rgba(7,9,15,.66) 55%, rgba(7,9,15,.42) 100%);
}
/* Nav-baren er unntatt: den er fixed og skal aldri dras inn i flyten. */
body.kd-side .kd-morkhero > *:not(.kd-bak):not(.kd-nav) { position: relative; z-index: 1; }
body.kd-side .kd-morkhero .ph-kicker { color: rgba(255,255,255,.62); }
body.kd-side .kd-morkhero h1, body.kd-side .kd-morkhero .ph-title,
body.kd-side .kd-morkhero .page-hero strong { color: #fff; }
body.kd-side .kd-morkhero .ph-title .ua-lime, body.kd-side .kd-morkhero .ph-title .ph-lime { color: var(--lime); }
body.kd-side .kd-morkhero p, body.kd-side .kd-morkhero .ph-lead { color: rgba(255,255,255,.8); }
/* Regelen over gir hele den mørke heroen lys tekst — også kundens
   lime boble i chatvinduet, som skal ha sort tekst. Lys på lime var
   uleselig. Én klasse mer i kjeden, så bobla vinner. */
body.kd-side .kd-morkhero .cb-win .cb-msg-user { color: #0a0a0a; }
body.kd-side .kd-morkhero .ph-link { background: var(--lime); color: var(--blekk); }
body.kd-side .kd-morkhero .ph-link:hover { background: #c8f52e; color: var(--blekk); }
body.kd-side .kd-morkhero .ph-note { color: rgba(255,255,255,.55); }

/* Chatvinduet: glass på mørkt, som kortene ellers. */
body.kd-side .kd-morkhero .cb-win {
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.16);
}
/* Telefonen står klistret i bunnkanten og stikker litt under den
   (margin-bottom i svarer.css); heroen klipper, så den reiser seg fra
   bunnen. Derfor ingen bunnpolstring på denne heroen — teksten får
   den i stedet, så den ikke går helt ned i kanten. */
body.kd-side .page-hero.kd-morkhero.ua-hero { padding-bottom: 0 !important; }
body.kd-side .kd-morkhero .ua-body { align-items: end; padding-bottom: 0; }
body.kd-side .kd-morkhero .ua-text { padding-bottom: clamp(48px, 6vw, 80px); }
body.kd-side .kd-morkhero .ag-split { padding-bottom: 0; }

@media (max-width: 980px) {
  body.kd-side .kd-morkhero .ag-split { padding: 0; gap: 36px; }
  body.kd-side .kd-morkhero .ua-text { padding-bottom: 0; }
}
@media (max-width: 760px) {
  body.kd-side .page-hero.kd-morkhero { padding: 120px var(--kant) 40px !important; }
  body.kd-side .page-hero.kd-morkhero.ua-hero { padding-bottom: 0 !important; }
  body.kd-side .kd-morkhero .ua-phone { width: min(280px, 100%); }
}
/* Chatvinduet skal være med på telefonen også: under teksten, full
   bredde. Det gamle systemet skjulte det under 900 px. */
@media (max-width: 980px) {
  body.kd-side .kd-morkhero .cb-win {
    display: block !important;
    position: static !important;
    width: 100%; max-width: 440px;
    margin: 0 auto;
    order: 2;
  }
}

/* ═══════════════════════════════════════════════════════════
   MINDRE MAL (okt. 2026)
   Grepene som får en side til å se generert ut, skrudd av her for
   alle undersidene samtidig. Spøkelsesordene (.ph-ghost) beholdes:
   de er en del av uttrykket.
   ═══════════════════════════════════════════════════════════ */

/* Etiketter over hver seksjon («SLIK FUNGERER DET») er borte;
   overskriften under sier det samme. */
body.kd-side .pf-eyebrow { display: none; }
/* Linja over sideoverskriften blir vanlig tekst, ikke versaler
   med sperring. */
body.kd-side .ph-kicker {
  font-family: inherit; font-size: 1rem; font-weight: 500;
  letter-spacing: -.005em; text-transform: none; color: var(--blekk-3);
}
body.kd-side .kd-morkhero .ph-kicker { color: rgba(255,255,255,.7); }

/* Siste ord i overskriften i lime eller grått: samme farge som resten. */
body.kd-side .pf-grey, body.kd-side .ph-lime, body.kd-side .ua-lime, body.kd-side .dm-lime { color: inherit !important; }

/* Nummerering (01, 02 …) foran tjenester og i lista i toppen. */
body.kd-side .pi-n, body.kd-side .svc-i { display: none; }
body.kd-side .ph-index a { grid-template-columns: minmax(0, 1fr) 22px; }
body.kd-side .pi-name, body.kd-side .pi-price { grid-column: 1; }
body.kd-side .pi-arrow { grid-column: 2; }
body.kd-side .pi-head {
  font-family: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none;
  color: var(--blekk-3);
}
body.kd-side .pi-head span:first-child { display: none; }

/* Merkelapper som «TILGJENGELIG NÅ» og «AI-CHATBOT»: vanlig liten
   tekst med tynn kant, ikke lime piller i mono-versaler. */
body.kd-side .snart, body.kd-side .lv-tag {
  font-family: inherit; font-size: .82rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
body.kd-side .snart-na { background: transparent; border-color: rgba(12,13,14,.22); color: var(--blekk); }
body.kd-side .snart-na::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: #12b76a; vertical-align: 1px;
}

/* Lime haker i lister: en kort strek, som lista på forsiden. */
body.kd-side .lv-check, body.kd-side .dm-check, body.kd-side .rc-check, body.kd-side .in-check {
  font-size: 0; width: 12px; height: 1.5px; min-width: 12px; padding: 0; border: 0; border-radius: 0;
  background: currentColor; opacity: .45; box-shadow: none;
  align-self: center; display: inline-block; margin-right: 12px; vertical-align: middle;
}

/* Forsidens lime avslutningsboks brukt på undersidene. */
body.kd-side .kd-cta-h { color: var(--blekk); }
body.kd-side main p.kd-cta-p { color: rgba(12,13,14,.78); }

/* Trekort med store tall (01, 02, 03) i grått, lime og svart: samme
   lyse flate på alle, og «Steg 1» som liten tekst. */
body.kd-side .proc-card, body.kd-side .mk-steg-kort, body.kd-side .mk-tre-kort { background: var(--ark-2); color: var(--blekk); }
body.kd-side .proc-n, body.kd-side .mk-steg-n {
  font-family: inherit; font-size: .95rem; font-weight: 500; letter-spacing: 0; line-height: 1.4;
  color: var(--blekk-3); opacity: 1;
}

/* Tjenesteradene uten nummerkolonne. */
@media (min-width: 1001px) {
  body.kd-side .svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 190px; }
}

/* Små etiketter i versaler med sperring («FAST PRIS FØR OPPSTART»,
   «VIDEOANIMASJON», kategorien på bloggkortene): vanlig liten tekst. */
body.kd-side .svc-per, body.kd-side .mk-tre-lab, body.kd-side .cb-pris-lab,
body.kd-side .ag-price-label, body.kd-side .bd-price-label, body.kd-side .in-price-label,
body.kd-side .bl-tag, body.kd-side .bg-next-tag, body.kd-side .ua-call-lab,
body.kd-side .ua-sms-lab, body.kd-side .ua-beskjed-lab, body.kd-side .mk-merke {
  font-family: inherit; letter-spacing: 0; text-transform: none;
}
body.kd-side .svc-per, body.kd-side .mk-tre-lab, body.kd-side .bl-tag, body.kd-side .bg-next-tag { font-size: .82rem; }

/* Lime runde prikker i lister på mørk bunn: en kort strek. */
body.kd-side .mk-pris-liste li::before { width: 12px; height: 1.5px; margin-top: 12px; border-radius: 0; background: currentColor; opacity: .5; }

/* Chatten øverst på Chatbot-siden: ingen boks rundt, bare hvite
   snakkebobler rett på bildet. Samme samtale og samme animasjon. */
body.kd-side .kd-morkhero .cb-win {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
}
body.kd-side .kd-morkhero .cb-win .cb-head { display: none; }
body.kd-side .kd-morkhero .cb-win .cb-log { height: 290px; padding: 0; gap: 10px; }
body.kd-side .kd-morkhero .cb-win .cb-msg,
body.kd-side .kd-morkhero .cb-win .cb-typing {
  background: #fff; color: var(--blekk);
  font-size: 15px; padding: 11px 16px; border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
body.kd-side .kd-morkhero .cb-win .cb-msg-bot, body.kd-side .kd-morkhero .cb-win .cb-typing { border-bottom-left-radius: 5px; }
body.kd-side .kd-morkhero .cb-win .cb-msg-user { border-bottom-right-radius: 5px; color: var(--blekk); }
body.kd-side .kd-morkhero .cb-win .cb-typing i { background: rgba(12,13,14,.45); }