/*
 * Kirkepakka — presentasjon (salgsflaten). main.css
 * ============================================================
 * Bygget RETT fra design/kirkepakka/DESIGN.md v0.2. SALGSMERKET:
 * hvit/kjølig base (default) + petrol-natt dark-mode OPT-IN
 * (html[data-mode="dark"], localStorage). Rav er KUN dekor.
 * Glød (petrol/rav-radialer) = merkets eneste gradientbruk.
 * Fonter self-hostet (WOFF2). Ingen palett-/font-/form-akser —
 * dette er ikke produkttemaets tilpasningssystem.
 * ============================================================ */

/* —— Self-hostede variable fonter (latin + latin-ext) —— */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* ============================================================
   TOKENS — LYS (default). Fra DESIGN.md ## CSS Variables.
   ============================================================ */
:root{
  --color-primary:#1E4453;
  --color-primary-deep:#0E2A34;
  --color-primary-tint:#E4EDF0;
  --color-accent:#D9A441;
  --color-accent-text:#7E5A12;
  --color-surface:#FFFFFF;
  --color-surface-2:#F4F6F7;
  --color-ink:#16232B;
  --color-ink-muted:#4E5C66;
  --color-line:#D9E0E4;
  --color-line-strong:#64747E;
  --color-info:#1E4453;--color-success:#1E5638;--color-warning:#7A5113;--color-danger:#9B3324;
  --glass-tint-1:#7FB2C2;--glass-tint-2:#A9D0DA;--glass-tint-3:#CDE6EC;--glass-tint-4:#5E97A8;

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,sans-serif;
  --text-h1:clamp(2.5rem,5.5vw,3.5rem);
  /* Hero-display, v2 (1.9): heroen leste «litt standard» — toppen manglet
     typografisk tyngde. Loeftet fra clamp(2.6,5.2vw,4.5) til under. Nedre
     ende er bevisst bare 0,15rem stoerre: paa 360 px maa tittelen fortsatt
     brekke pent. Det er OVERKANTEN som gjoer jobben paa desktop. */
  --text-hero:clamp(2.75rem,5.3vw,4.75rem);
  --text-h2:clamp(1.9rem,4vw,2.5rem);
  --text-h3:clamp(1.4rem,2.6vw,1.75rem);

  --space-xs:.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;
  --space-xl:3rem;--space-2xl:5rem;--space-3xl:7.5rem;--space-4xl:10rem;
  --rounded-sm:.5rem;--rounded-lg:1rem;--rounded-full:999px;
  --shadow-sm:0 1px 2px rgba(20,48,60,.06);
  --shadow-md:0 8px 24px rgba(20,48,60,.09);
  --shadow-lg:0 18px 44px rgba(20,48,60,.12);
  --width-content:72rem;
  --arch-radius:999px 999px var(--rounded-lg) var(--rounded-lg);

  /* Pill-knapp (lys side): petrol fyll, hvit tekst */
  --btn-bg:var(--color-primary);--btn-fg:#FFFFFF;--btn-bg-hover:var(--color-primary-deep);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.55s;
}

/* —— DARK opt-in — petrol-natt. Fra DESIGN.md ## Dark Mode —— */
html[data-mode="dark"]{
  --color-surface:#0E1B22;
  --color-surface-2:#13242D;
  --color-ink:#E6EDF1;
  --color-ink-muted:#9FB2BD;
  --color-primary:#6FB0C6;
  --color-primary-deep:#9AC9D9;
  --color-primary-tint:#1B3038;
  --color-accent:#E8B75E;
  --color-accent-text:#E8B75E;
  --color-line:#294049;
  --color-line-strong:#4E6470;
  --glass-tint-1:#6FB0C6;--glass-tint-2:#92C7D8;--glass-tint-3:#BFE3EF;--glass-tint-4:#4E93A8;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 28px rgba(0,0,0,.5);
  --shadow-lg:0 20px 48px rgba(0,0,0,.55);
  /* Dark: bright pill m/ moerk tekst (hvit tekst paa #6FB0C6 stryker AA) */
  --btn-bg:#6FB0C6;--btn-fg:#0E1B22;--btn-bg-hover:#9AC9D9;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-surface);color:var(--color-ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;
  transition:background-color .3s ease,color .3s ease;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration-thickness:.08em;text-underline-offset:.15em}
p a{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.03em;margin:0 0 .4em;color:var(--color-ink)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:3px}
.kpp-section--dark :focus-visible{outline-color:#EAF1F4}

.kpp-skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--color-primary);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--rounded-sm) 0;font-weight:600}
.kpp-skip-link:focus{left:0}

.kpp-wrap{width:100%;max-width:var(--width-content);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}

/* ============================================================
   SEKSJONSRYTME — surface → surface-2 alternering, ett moerkt brudd.
   ============================================================ */
.kpp-section{position:relative;padding-block:clamp(3.25rem,7vw,7.5rem);overflow:clip}
.kpp-section--alt{background:var(--color-surface-2)}
/* Karakter i BEGGE moduser: myk petrol/rav-vask i ett hjørne av alt-seksjoner,
   pluss en hårfin fasett-antydning — flatene skal aldri lese som tomt hvitt. */
.kpp-section--alt::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 60% at 100% 0%, rgba(30,68,83,.10), transparent 62%),
    radial-gradient(30% 46% at 0% 100%, rgba(217,164,65,.10), transparent 60%)}
html[data-mode="dark"] .kpp-section--alt::before{
  background:
    radial-gradient(40% 62% at 100% 0%, rgba(111,176,198,.14), transparent 62%),
    radial-gradient(32% 48% at 0% 100%, rgba(232,183,94,.10), transparent 60%)}
.kpp-section--tint{background:var(--color-primary-tint)}
.kpp-section--dark{
  /* Literal petrol — seksjonen er moerk i BEGGE moduser (dark-tokens flipper til lyse). */
  background:#0E2A34;color:#E6EDF1;
  --btn-bg:#FFFFFF;--btn-fg:#0E2A34;--btn-bg-hover:#E4EDF0;
}
html[data-mode="dark"] .kpp-section--dark{background:#13242D}
.kpp-section--dark h1,.kpp-section--dark h2,.kpp-section--dark h3{color:#FFFFFF}
.kpp-section__inner{position:relative;z-index:2}

/* —— Glød-dybde (radialer i petrol/rav) — merkets eneste gradient ——
   v2: kraftig løftet i LYS modus (hovedanken: bakgrunnene forsvant). Petrol
   holdes dempet der brødtekst ligger; rav får synge i dekor-/bildesonene. */
.kpp-gloed{position:absolute;inset:-25% -12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 52% at 16% 22%, rgba(30,68,83,.17), transparent 68%),
    radial-gradient(42% 48% at 86% 24%, rgba(217,164,65,.30), transparent 70%),
    radial-gradient(52% 56% at 72% 88%, rgba(30,68,83,.14), transparent 72%);
  filter:blur(4px)}
.kpp-section--dark .kpp-gloed{inset:-32% -16%;
  background:
    radial-gradient(48% 54% at 18% 16%, rgba(111,176,198,.38), transparent 70%),
    radial-gradient(44% 50% at 86% 24%, rgba(232,183,94,.30), transparent 72%),
    radial-gradient(64% 64% at 60% 104%, rgba(6,22,29,.72), transparent 70%)}

/* —— Fasettmoenster «fasettfelt med gloed-grenser» (dekor) ——
   v2: løftet metning + synligere fuge-lys så feltet faktisk leses i lys modus. */
.kpp-fasett{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.66;
  -webkit-mask-image:radial-gradient(82% 82% at 80% 20%,#000,transparent 76%);
  mask-image:radial-gradient(82% 82% at 80% 20%,#000,transparent 76%)}
.kpp-fasett svg{width:100%;height:100%}
.kpp-fasett__felt polygon{opacity:.30}
.kpp-fasett__felt polygon:nth-child(1){fill:var(--glass-tint-2)}
.kpp-fasett__felt polygon:nth-child(2){fill:var(--glass-tint-1)}
.kpp-fasett__felt polygon:nth-child(3){fill:var(--glass-tint-3)}
.kpp-fasett__felt polygon:nth-child(4){fill:var(--glass-tint-4)}
.kpp-fasett__felt polygon:nth-child(5){fill:var(--glass-tint-1)}
.kpp-fasett__felt polygon:nth-child(6){fill:var(--glass-tint-2)}
.kpp-fasett__felt polygon:nth-child(7){fill:var(--glass-tint-4)}
.kpp-fasett__lys path{fill:none;stroke:var(--glass-tint-3);stroke-width:3;opacity:.62}
.kpp-section--dark .kpp-fasett{opacity:.8}
.kpp-section--dark .kpp-fasett__lys path{stroke:#BFE3EF;opacity:.4}

/* ============================================================
   TYPO-BYGGEKLOSSER
   ============================================================ */
.kpp-h1{font-size:var(--text-h1);font-weight:800}
/* Strammere tracking og tettere linjeavstand jo stoerre graden blir — en display
   satt paa 5rem taaler (og trenger) mer negativ sperring enn den samme paa 2,75. */
.kpp-hero__tittel{font-size:var(--text-hero);font-weight:800;letter-spacing:-.045em;line-height:.98;margin:0 0 .34em;white-space:pre-line;text-wrap:balance}
.kpp-h2{font-size:var(--text-h2);font-weight:800}
.kpp-h3{font-size:var(--text-h3);font-weight:700}
.kpp-mark{color:var(--color-primary)}
.kpp-section--dark .kpp-mark{color:#E8B75E}
.kpp-kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin:0 0 1rem}
.kpp-kicker::before{content:"";width:1.6rem;height:3px;border-radius:var(--rounded-full);background:var(--color-accent);flex:none}
.kpp-section--dark .kpp-kicker{color:#9AC9D9}
.kpp-lede{font-size:1.25rem;line-height:1.55;color:var(--color-ink-muted);max-width:42ch}
.kpp-section--dark .kpp-lede{color:#B9CCD4}
.kpp-sec-head{max-width:46rem;margin:0 0 clamp(2rem,4vw,3rem)}
.kpp-sec-head--center{margin-inline:auto;text-align:center}
.kpp-sec-head--center .kpp-kicker{justify-content:center}
.kpp-eyebrow-dim{color:var(--color-ink-muted)}

/* ============================================================
   KNAPPER (pill)
   ============================================================ */
.kpp-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:600;font-size:1.0625rem;line-height:1;padding:1rem 1.85rem;border-radius:var(--rounded-full);border:2px solid transparent;cursor:pointer;text-decoration:none;min-height:3rem;transition:background-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),border-color var(--dur)}
.kpp-btn .kpp-icon{transition:transform var(--dur) var(--ease-out)}
.kpp-btn--primar{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.kpp-btn--primar:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}
.kpp-btn--primar:hover .kpp-icon{transform:translateX(3px)}
.kpp-btn--sekundar{background:transparent;color:var(--color-ink);border-color:currentColor}
.kpp-btn--sekundar:hover{background:var(--color-surface-2)}
.kpp-section--dark .kpp-btn--sekundar{color:#EAF1F4;border-color:rgba(234,241,244,.6)}
.kpp-section--dark .kpp-btn--sekundar:hover{background:rgba(255,255,255,.08)}
.kpp-btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.75rem}
.kpp-textlink{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;text-decoration:none}
.kpp-textlink:hover{text-decoration:underline}
.kpp-textlink:hover .kpp-icon{transform:translateX(2px)}
.kpp-textlink .kpp-icon{transition:transform var(--dur) var(--ease-out)}

/* ============================================================
   HEADER + NAV
   ============================================================ */
.kpp-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--color-surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-line)}
.kpp-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:72px}
.kpp-logo{display:inline-flex;align-items:center;flex:none}
.kpp-logo img{height:38px;width:auto}
.kpp-logo__mork{display:none}
html[data-mode="dark"] .kpp-logo__lys{display:none}
html[data-mode="dark"] .kpp-logo__mork{display:block}
.kpp-nav{margin-left:auto}
.kpp-nav__list{display:flex;gap:.35rem;list-style:none;margin:0;padding:0}
.kpp-nav__list a{display:block;padding:.55rem .85rem;border-radius:var(--rounded-sm);color:var(--color-ink);text-decoration:none;font-weight:500;font-size:1rem;transition:background-color .2s,color .2s}
.kpp-nav__list a:hover,.kpp-nav__list .current-menu-item>a{background:var(--color-surface-2);color:var(--color-primary)}
/* «Kom i gang» — flatens staaende neste handling (fase 13). Uthevet som pille,
   saa bestillingsdoera er synlig fra hver eneste side uten en egen CTA-plass i
   headeren. Klassen settes paa menyoppfoeringen av tools/seed-presentasjon.php. */
.kpp-nav__list .kpp-nav__cta{margin-left:.4rem}
.kpp-nav__list .kpp-nav__cta>a{background:var(--btn-bg);color:var(--btn-fg);border-radius:var(--rounded-full);padding:.55rem 1.15rem;font-weight:600}
.kpp-nav__list .kpp-nav__cta>a:hover,.kpp-nav__list .kpp-nav__cta.current-menu-item>a{background:var(--btn-bg-hover);color:var(--btn-fg)}
.kpp-header__actions{display:flex;align-items:center;gap:.5rem}
.kpp-mode-toggle{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--color-line);background:transparent;color:var(--color-ink);border-radius:var(--rounded-full);cursor:pointer;transition:background-color .2s,border-color .2s}
.kpp-mode-toggle:hover{background:var(--color-surface-2);border-color:var(--color-line-strong)}
.kpp-mode-toggle__moon{display:none}
.kpp-mode-toggle__sun{display:inline-flex}
html[data-mode="dark"] .kpp-mode-toggle__sun{display:none}
html[data-mode="dark"] .kpp-mode-toggle__moon{display:inline-flex}

.kpp-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:1px solid var(--color-line);background:transparent;border-radius:var(--rounded-sm);cursor:pointer;padding:0 10px}
.kpp-nav-toggle span{display:block;height:2px;background:var(--color-ink);border-radius:2px;transition:transform .25s,opacity .25s}
.kpp-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.kpp-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.kpp-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.kpp-mobile-menu{border-top:1px solid var(--color-line);background:var(--color-surface)}
.kpp-mobile-menu__list{list-style:none;margin:0;padding:.5rem clamp(1.15rem,4vw,2rem) 1rem}
.kpp-mobile-menu__list a{display:block;padding:.85rem .25rem;border-bottom:1px solid var(--color-line);color:var(--color-ink);text-decoration:none;font-weight:500}
/* Samme uthevede bestillingsdoer paa mobil — pille, uten bunnstreken. */
.kpp-mobile-menu__list .kpp-nav__cta>a{margin-top:.75rem;border-bottom:0;border-radius:var(--rounded-full);background:var(--btn-bg);color:var(--btn-fg);text-align:center;padding:.9rem 1.15rem;font-weight:600}

/* ============================================================
   HERO
   ============================================================ */
.kpp-hero{padding-block:clamp(3.25rem,7vw,6rem)}
/* 1.15/.85 (var 1.02/.98). Maalt paa 1440 px: den stoerre display-graden gaar fra
   6 til 5 linjer i den bredere spalta, OG bevisstripa under CTA-ene faar plass
   paa én linje i stedet for to. Mockupen leser fint paa de ~440 px som blir
   igjen. */
.kpp-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}

/* ============================================================
   HEROENS HOEYREFELT PAA FORSIDEN — duotone-foto + LEVENDE mockup
   (v2, 1.9). Erstattet vifta av tre statiske skjermbilder.
   ============================================================ */
.kpp-hero__scene{position:relative;z-index:2;min-width:0}

/* —— Duotone-fotoet: ekte liv bak mockupen ——————————————————————
   Kilde: assets/img/eksempler/eksempel-07.jpg (1280x860) — allerede i temaet,
   brukt av /eksempler. Ingen ny binaerfil.

   Utsnittet er valgt slik at INGEN tekst fra skjermbildet er med: bare spiret,
   taket, traerne og himmelen (kilde-omraadet ca. x 760–1240, y 260–630).
   background-size er prosent av BOKSEN, saa skalaen foelger boksbredden og det
   vannrette utsnittet holder seg naar heroen krymper.

   Duotone i to lag, ingen filterkjede paa selve <img> (det finnes ingen img):
     1. flaten under er petrol (--color-primary-deep) — skyggetonen
     2. ::before = fotoet i graatone, mix-blend-mode:screen → skyggene faller
        ned i petrolen, hoeylysene loeftes
     3. ::after  = rav i multiply → hoeylysene varmes, og vi er i merkets to
        toner uten en eneste ny fil
   Ingenting lesbart ligger oppaa: mockupen og chipene har egne ugjennomsiktige
   flater. Fotoet er derfor dekor og maaler ikke mot noen kontrastgrense. */
.kpp-levende__flate{position:relative}
.kpp-levende__foto{
  position:absolute;z-index:0;pointer-events:none;overflow:hidden;
  inset:-14% -20% 4% 18%;
  border-radius:var(--rounded-lg);
  background-color:var(--color-primary-deep);
  box-shadow:var(--shadow-md)}
.kpp-levende__foto::before,.kpp-levende__foto::after{content:"";position:absolute;inset:0}
.kpp-levende__foto::before{
  background-image:url(../img/eksempler/eksempel-07.jpg);
  background-size:330% auto;background-position:69% 33%;background-repeat:no-repeat;
  filter:grayscale(1) brightness(1.28) contrast(1.15);
  mix-blend-mode:screen;opacity:.92}
.kpp-levende__foto::after{
  background:var(--color-accent);mix-blend-mode:multiply;opacity:.4}
/* Moerk modus: petrol-natt er allerede moerk, saa fotoet dempes — ellers blir
   det den lyseste flaten i heroen og stjeler mockupen. */
html[data-mode="dark"] .kpp-levende__foto{background-color:#08161C}
html[data-mode="dark"] .kpp-levende__foto::before{opacity:.62}
html[data-mode="dark"] .kpp-levende__foto::after{opacity:.24}

/* —— Selve mockupen ——————————————————————————————————————————— */
.kpp-levende{position:relative;z-index:1;display:grid;gap:1.1rem}
.kpp-levende__ramme{position:relative;z-index:1}

/* Skjermen: ETT sett tokens per tilstand, satt paa .kpp-levende[data-tilstand].
   Alle barn leser --m-*; ingen av dem kjenner en eneste hex-verdi. Bytte av
   tilstand er derfor ÉN attributt-endring, og overgangen er en ren
   fargeovergang paa egenskapene som faktisk kan animeres. */
.kpp-levende__skjerm{
  background:var(--m-bg);color:var(--m-text);
  font-family:var(--m-font,var(--font-body));
  font-size:clamp(.6rem,1.15vw,.8rem);line-height:1.45;
  padding:1.1em 1.15em 1.25em;display:grid;gap:1.1em}
/* Custom properties kan ikke animeres, men egenskapene som LESER dem kan. Derfor
   ligger overgangen paa selve flatene — da blir tilstandsbyttet en rolig
   omfarging i stedet for et hopp. Radius er med: form er en av de fem aksene. */
.kpp-levende__skjerm,.kpp-levende__skjerm *{
  transition:background-color .55s var(--ease-out),color .55s var(--ease-out),
             border-color .55s var(--ease-out),border-radius .55s var(--ease-out),
             box-shadow .55s var(--ease-out)}

/* Topprad: merke, tre menypunkter, én liten knapp. */
.kpp-levende__topp{display:flex;align-items:center;gap:.9em;
  padding-bottom:.85em;border-bottom:1px solid var(--m-line)}
.kpp-levende__merke{display:inline-flex;align-items:center;gap:.45em;flex:none}
.kpp-levende__merke i{width:.62em;height:.62em;border-radius:var(--rounded-full);background:var(--m-signal);flex:none}
.kpp-levende__merke b{font-family:var(--m-font,var(--font-display));font-weight:var(--m-vekt,800);
  letter-spacing:var(--m-track,-.02em);text-transform:var(--m-case,none);font-size:1.02em}
.kpp-levende__meny{display:flex;gap:.85em;color:var(--m-dim);font-size:.88em;margin-left:auto}
.kpp-levende__knapp{display:inline-flex;align-items:center;justify-self:start;
  background:var(--m-signal);color:var(--m-signal-ink);
  border-radius:var(--m-r-knapp);padding:.62em 1.15em;font-weight:600;font-size:.92em;
  box-shadow:var(--m-elev-knapp,none)}
.kpp-levende__knapp--liten{flex:none;padding:.45em .85em;font-size:.8em}

/* Hero-oeya i mockupen — der uttrykket faktisk synes. */
.kpp-levende__hero{background:var(--m-surface);border:1px solid var(--m-line);
  border-radius:var(--m-r-kort);box-shadow:var(--m-elev);
  padding:1.15em 1.2em 1.25em;display:grid;gap:.5em;justify-items:start}
.kpp-levende__kicker{margin:0;font-size:.76em;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--m-signal)}
.kpp-levende__tittel{margin:0;font-family:var(--m-font,var(--font-display));
  font-weight:var(--m-vekt,800);font-size:1.85em;line-height:1.06;
  letter-spacing:var(--m-track,-.03em);text-transform:var(--m-case,none)}
.kpp-levende__lede{margin:0;color:var(--m-dim);font-size:.95em;max-width:26ch}
/* Markoeren: farge i rolig/varm, MARKERINGSBLOKK i markant — samme regel som
   html[data-uttrykk="markant"] .kp-merk i produkttemaet. */
.kpp-levende__merk{background:var(--m-merk-bg,transparent);
  color:var(--m-merk-ink,var(--m-signal));padding:var(--m-merk-pad,0);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Kort-raden: tre smaa kort med én ekte etikett og én tekstlinje som strek. */
.kpp-levende__kort{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.kpp-levende__kortel{background:var(--m-surface-2);border:1px solid var(--m-line);
  border-radius:var(--m-r-kort);padding:.7em .75em;display:grid;gap:.5em;
  font-size:.82em;min-width:0}
.kpp-levende__kortel b{font-weight:700;letter-spacing:-.01em;
  text-transform:var(--m-case,none);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpp-levende__kortel i{display:block;height:.42em;width:82%;border-radius:var(--rounded-full);
  background:var(--m-text);opacity:.22}

/* ---- TILSTANDENE ------------------------------------------------------
   Verdiene er hentet UENDRET fra produkttemaet:
     flatene   → kp_akse_flater() i themes/kirkepakka/inc/akser.php
     aksentene → :root[data-farge="…"] i themes/kirkepakka/assets/css/main.css
     radiene   → html[data-uttrykk][data-form="myk"] samme sted
   Alle tekstpar er regnet ut paa nytt for mockupen (2026-09-01):
   laveste maalte er 6,61:1 (dim paa bg i tilstand 0). Krav 4,5:1.

   Fontpar-aksen gjengis IKKE — se kpp_levende() i inc/helpers.php for hvorfor.
   --m-vekt/--m-case/--m-track baerer kun uttrykkets EGEN typografi-tone. */

/* 0 — Rolig · Fjord · lys. Standarden: myke skygger, god luft. */
.kpp-levende[data-tilstand="0"] .kpp-levende__skjerm{
  --m-bg:#F4F1EA;--m-surface:#FBF9F4;--m-surface-2:#E7E2D6;
  --m-text:#201E24;--m-dim:#56545C;--m-line:rgba(32,30,36,.16);
  --m-signal:#35586A;--m-signal-ink:#FFFFFF;
  --m-r-kort:16px;--m-r-knapp:10px;
  --m-font:var(--font-display);--m-vekt:800;--m-track:-.03em;--m-case:none;
  --m-elev:0 8px 22px rgba(60,50,40,.10)}

/* 1 — Markant · Sol · lys. Fet og grafisk: versaler, harde skygger, flate kort.
   Merk «Sol»-regelen: seeden er for LYS til aa baere tekst paa lys flate, saa
   lys-modus-aksenten er naer-sort (#141414) mens gulen lever i markoeren. */
.kpp-levende[data-tilstand="1"] .kpp-levende__skjerm{
  --m-bg:#FFFFFF;--m-surface:#FFFFFF;--m-surface-2:#FAF7F0;
  --m-text:#141414;--m-dim:#575757;--m-line:rgba(20,20,20,.20);
  --m-signal:#141414;--m-signal-ink:#FFFFFF;
  --m-r-kort:0px;--m-r-knapp:999px;
  --m-font:var(--font-display);--m-vekt:800;--m-track:-.01em;--m-case:uppercase;
  --m-elev:4px 4px 0 #141414;--m-elev-knapp:3px 3px 0 #141414;
  --m-merk-bg:#FFD23F;--m-merk-ink:#141414;--m-merk-pad:0 .12em}

/* 2 — Varm · Tømmer · moerk. Jordnaer og stille: varme flater, rundere form,
   lettere display-vekt (produkttemaet bruker 520; Bricolage er en 700–800-
   variabel her, saa 700 er det lette trinnet vi faktisk kan tegne). */
.kpp-levende[data-tilstand="2"] .kpp-levende__skjerm{
  --m-bg:#1E1B16;--m-surface:#2A251E;--m-surface-2:#38322A;
  --m-text:#F1EBDE;--m-dim:#B9AF9C;--m-line:rgba(241,235,222,.14);
  --m-signal:#D2A07A;--m-signal-ink:#211E18;
  --m-r-kort:22px;--m-r-knapp:14px;
  --m-font:var(--font-display);--m-vekt:700;--m-track:-.005em;--m-case:none;
  --m-elev:0 8px 22px rgba(0,0,0,.32)}

/* 3 — Rolig · Glød · moerk. Samme uttrykk som 0, motsatt modus og varm aksent:
   viser at modus og palett er FRIE akser, ikke en pakke. */
.kpp-levende[data-tilstand="3"] .kpp-levende__skjerm{
  --m-bg:#101014;--m-surface:#1A1B21;--m-surface-2:#22232B;
  --m-text:#F4F2EC;--m-dim:#A8A8B0;--m-line:rgba(244,242,236,.14);
  --m-signal:#FF6B4A;--m-signal-ink:#1A0E08;
  --m-r-kort:16px;--m-r-knapp:10px;
  --m-font:var(--font-display);--m-vekt:800;--m-track:-.03em;--m-case:none;
  --m-elev:0 10px 28px rgba(0,0,0,.5)}

/* —— Velgeren: ledetekst + chips ——————————————————————————————————
   Chipene er ekte knapper (aria-pressed), ikke faner: de bytter ikke innhold,
   de bytter uttrykk paa det samme innholdet. Ugjennomsiktig flate, saa de
   aldri havner oppaa duotone-fotoet. --kpp-chip-kant er egen token fordi
   --color-line-strong stryker 3:1 mot moerk flate (maalt 2,82:1). */
:root{--kpp-chip-kant:var(--color-line-strong)}
html[data-mode="dark"]{--kpp-chip-kant:var(--color-ink-muted)}
.kpp-levende__valg{display:grid;gap:.5rem;justify-items:start}
.kpp-levende__ledetekst{margin:0;font-size:.85rem;font-weight:600;
  letter-spacing:.02em;color:var(--color-ink-muted)}
.kpp-levende__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.kpp-levende__chip{
  font-family:var(--font-body);font-size:.8rem;font-weight:600;line-height:1;
  padding:.58rem .78rem;border-radius:var(--rounded-full);cursor:pointer;
  background:var(--color-surface);color:var(--color-ink);
  border:1px solid var(--kpp-chip-kant);
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out)}
.kpp-levende__chip:hover{background:var(--color-surface-2)}
.kpp-levende__chip[aria-pressed="true"]{
  background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}

/* —— A1: buemotivet som FYLT flate (fase 13, beslutning 2026-08-29) ——
   Geometrien bor i kpp_bue() (inc/helpers.php) og er hentet uendret fra
   symbolet. Her styres KUN utsnitt, skala og farge. Buen er statisk — det
   finnes ingen bevegelse aa slaa av ved prefers-reduced-motion.
   .kpp-section har overflow:clip, saa de negative offsetene beskjaeres av
   seksjonskanten — det ER beskjaeringen. */
.kpp-bue{position:absolute;z-index:1;pointer-events:none;aspect-ratio:34/39;
  right:var(--bue-x,-10%);bottom:var(--bue-y,-14%);width:var(--bue-w,min(34%,440px))}
.kpp-bue svg{display:block;width:100%;height:100%}
.kpp-bue__flate{fill:var(--color-primary-tint);opacity:.85}
.kpp-bue__skaar{opacity:.34}
.kpp-bue__skaar .t2{fill:var(--glass-tint-2)}
.kpp-bue__skaar .t3{fill:var(--glass-tint-3)}
.kpp-bue__skaar .t4{fill:var(--glass-tint-4)}
.kpp-bue__sol{fill:var(--color-accent)}
/* Moerk modus: primary-tint er da en MOERK petrol (#1B3038) mot #0E1B22 —
   flaten maa staa udempet for i det hele tatt aa leses. */
html[data-mode="dark"] .kpp-bue__flate{opacity:1}
/* Ulikt utsnitt og skala per side: samme byggekloss, ny beskjaering, saa
   undersidene leser som samme familie uten aa gjenta seg.
   REGEL (Eirik 31.08): --bue-y maa ALLTID vaere negativ. Buens bunn er en rett
   strek; stopper den innenfor seksjonen leser motivet som et fritt svevende
   objekt i stedet for et utsnitt. Alle variantene skal beskjaeres av
   seksjonskanten, ikke flyte i flaten. */
/* «Hoy» sto med --bue-y:4% — bunnstreken stanset 22–26 px OVER seksjonskanten
   paa 1024/1200/1440, og var i tillegg familiens minste. Nedskyv + litt stoerre
   flate: -9 % beskjaerer ~11 % av hoeyden, saa rav-halvskiva (nederste ~26 %)
   fortsatt leses. */
.kpp-bue--hoy{--bue-x:-8%;--bue-y:-9%;--bue-w:min(34%,470px)}
.kpp-bue--naer{--bue-x:-19%;--bue-y:-30%;--bue-w:min(46%,600px)}
/* «Lav» maa stoppe FOER rav-halvskiva: sola ligger i de nederste ~26 % av
   motivet, og -27% spiste den helt. -15% lar en stripe av den staa igjen. */
.kpp-bue--lav{--bue-x:-3%;--bue-y:-15%;--bue-w:min(40%,520px)}
.kpp-bue--vid{--bue-x:-15%;--bue-y:-7%;--bue-w:min(43%,560px)}

/* —— B: innholdsbaerende hoeyrefelt (fase 13) ——————————————
   Eirik 29.08: «ryddig avstand mellom tekst og visualisering — tenk
   symmetri og en ryddig helhet». Derfor ETT kolonneforhold (1:1) og ETT
   gap, delt av alle B-heroer, og ingen bleed: mockupens .b .kpp-browser
   {width:138%} er bevisst forkastet — den ga ulik luft paa hver side. */
.kpp-hero--media .kpp-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.25rem,4.5vw,3.75rem)}
.kpp-hero__media{position:relative;z-index:2;min-width:0}
.kpp-hero__media>*{width:100%}
/* Sidetitler som ikke skal aere linjeskiftene fra hero-feltet. */
.kpp-hero__tittel--flyt{white-space:normal}

/* —— B-makro: tett utsnitt av ETT skjermbilde (31.08, Eirik) ——————————
   Problemet: /slik-virker-det/ viste HELE dashbordet i heroen, og seksjonen
   rett under viser samme skjermbilde igjen som trinn 1. I tillegg var hele
   flaten presset ned i ~510 px — ingenting kunne leses, saa bildet var
   dekorasjon som lot som det var informasjon.

   Grepet (Linear-moensteret, research 31.08): bytt vidvinkel mot MAKRO.
   Heroen viser ÉN handling tett paa, uten browserramme; omvisningen under
   beholder vidvinkelen. Samme kildebilde i to roller er da et valg, ikke en
   dublett — og teksten i utsnittet er faktisk lesbar (ca. 0,9x av kilden).

   Utsnittet er en ren CSS-maske over HELE bildet — ingen beskaarne filer aa
   vedlikeholde, og bildet kan byttes uten ny eksport. Forskyvningen maa vaere
   translate og ikke top/left: prosentene skal regnes av BILDET, ikke av vinduet.

   REVISJON 1.9 — «daarlig opploesning og ikke pent kuttet» (Eirik 31.08):

   1. KUTTET. Det gamle rektangelet (570x570 fra x396,y92) endte MIDT i
      dropzonen og midt i tittelfeltet — begge sto uten hoeyrekant — og bunnen
      skar ned i «Hvem talte?» og lot et halvt felt henge. Naa foelger utsnittet
      innholdskolonnens EGNE kanter (x 396–1276 = 880 px = --kp-bredde-smal) og
      bunner i det blekkfrie baandet mellom tittelfeltet (slutter y 591) og
      «Hvem talte?» (foerste blekk y 622). Ingen halve felt i noen kant.

   2. OPPLOESNING. Kilden var skutt 1x (1440x1120 px). Utsnittet ble vist naer
      1:1 i CSS-px, altsaa ~2x oppskalert paa en retina-skjerm. Ny kilde er
      skutt 2x av tools/lag-hurtigskjerm-harness.php (2880x2400 px = 1440x1200
      CSS-px), og utsnittet vises nedskalert. `sizes` i section-hero.php er
      regnet om samtidig — de to tallene henger sammen.

   TALLENE UNDER ER CSS-PIKSLER i harnessens koordinatsystem (1440 px bredt
   vindu), ikke fila sine pikselmaal: alt her er forholdstall, saa enhetene
   forkorter bort. Skytes bildet paa nytt i 3x, staar tallene. Endres derimot
   SKJERMEN (nye felt, annen hoeyde), er det disse seks som skal maales opp paa
   nytt — kjoer harnessen, mål i den nye fila, del paa skalafaktoren. */
.kpp-utsnitt{
  --kilde-b:1440;--kilde-h:1200;      /* kildens maal i CSS-px             */
  --u-x:396;--u-y:92;                 /* utsnittets hjoerne i kilden       */
  --u-b:880;--u-h:514;                /* utsnittets stoerrelse i kilden    */
  position:relative;overflow:hidden;aspect-ratio:var(--u-b)/var(--u-h);
  /* Indre ramme (Eirik 1.9): kuttet foelger kolonnekantene eksakt, saa blekket
     traff ytterrammen direkte og opplevdes trangt. En tykk border i flatefargen
     gir pusterom UTEN aa maale opp utsnittet paa nytt — absolutt-posisjonerte
     barn posisjonerer mot padding-boksen, dvs. innenfor borderen, og overflow
     klipper samme sted. Haarlinja bor derfor i box-shadow (0-blur, 1px spread),
     ikke i border. Innervinduet blir ~10 px lavere enn kuttet (borderen skalerer
     ikke med u-b/u-h-forholdet) — det spiser oppover fra bunnen, som ligger i
     det blekkfrie baandet (591–622), saa ingen felt kuttes. */
  border:12px solid var(--color-surface);
  border-radius:var(--rounded-lg);
  box-shadow:var(--shadow-lg),0 0 0 1px var(--color-line);background:var(--color-surface)}
.kpp-utsnitt img{position:absolute;top:0;left:0;display:block;
  height:auto;max-width:none;
  width:calc(100% * var(--kilde-b) / var(--u-b));
  transform:translate(calc(-100% * var(--u-x) / var(--kilde-b)),
                      calc(-100% * var(--u-y) / var(--kilde-h)))}
/* Modus-bytte, men KUN naar det faktisk finnes et par: mork-varianten er et
   valgfritt felt, og en ubetinget `[data-mode=dark] .--lys{display:none}` ville
   ellers gitt et TOMT utsnitt i moerk modus for skjermbilder som bare finnes i
   lys variant (som opplastingsskjemaet). Klassen settes av malen naar begge
   bildene er der. MAA staa etter regelen over. */
.kpp-utsnitt__bilde--mork{display:none}
html[data-mode="dark"] .kpp-utsnitt--par .kpp-utsnitt__bilde--lys{display:none}
html[data-mode="dark"] .kpp-utsnitt--par .kpp-utsnitt__bilde--mork{display:block}
/* Merket: loeftet som EKTE tekst, ikke piksler i skjermbildet — det er den
   eneste delen av visualiseringen som er lesbar uansett skjerm og zoom.
   Ligger halvt utenfor utsnittet, saa de to lagene gir dybde.
   width:auto slaar .kpp-hero__media>*{width:100%}. */
/* 1.9: flyttet fra venstre til HOEYRE hjoerne. Da utsnittet var kvadratisk laa
   det ledig flate nede til venstre; det nye, liggende utsnittet slutter rett
   under tittelfeltet, og der er venstre side full av tekst («Håpet som bærer»)
   mens hoeyre halvdel av feltet er tomt. Merket skal ligge halvt utenfor og gi
   dybde — ikke daekke det ene ordet i utsnittet som beviser at noen har skrevet
   noe. Byttes utsnittet, sjekk hvilket hjoerne som faktisk er tomt. */
.kpp-hero__media .kpp-merke{position:absolute;right:-.7rem;bottom:-1.15rem;z-index:2;
  width:auto;max-width:calc(100% + 1.4rem);margin:0;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.05rem;border-radius:var(--rounded-full);
  background:var(--color-surface);border:1px solid var(--color-line);
  box-shadow:var(--shadow-md);
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  color:var(--color-ink);line-height:1.2}
.kpp-merke .kpp-icon{flex:none;color:var(--color-accent-text)}

/* ============================================================
   PROBLEM / TRYGGHET / GENERISK KORT-GRID
   ============================================================ */
.kpp-grid{display:grid;gap:1.25rem}
.kpp-grid--3{grid-template-columns:repeat(3,1fr)}
.kpp-grid--2{grid-template-columns:repeat(2,1fr)}
.kpp-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-lg);padding:1.75rem;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.kpp-section--alt .kpp-card{background:var(--color-surface)}
.kpp-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpp-card__ikon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:var(--rounded-sm);background:var(--color-primary-tint);color:var(--color-primary);margin-bottom:1.1rem}
.kpp-card h3{font-size:1.2rem;margin:0 0 .5rem}
.kpp-card p{margin:0;color:var(--color-ink-muted)}

/* —— Løsning (bærende utsagn) —— */
.kpp-losning{text-align:center}
.kpp-losning__utsagn{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.14;letter-spacing:-.03em;max-width:22ch;margin:0 auto .8rem}
.kpp-losning__tekst{color:var(--color-ink-muted);font-size:1.15rem;max-width:44ch;margin:0 auto}

/* ============================================================
   MERKELAPP + TILPASS-NOTE (delt)
   Variantene bor i bibliotek.css, som er scopet til de to sidene
   som bruker dem (/eksempler, /seksjoner).
   ============================================================ */
.kpp-tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;padding:.3rem .7rem;border-radius:var(--rounded-full)}
.kpp-tilpass-note{margin-top:2rem;text-align:center;font-size:1.05rem;color:var(--color-ink-muted);display:flex;align-items:center;justify-content:center;gap:.6rem}
.kpp-tilpass-note .kpp-icon{color:var(--color-accent-text)}

/* ============================================================
   MODULENE — grid
   ============================================================ */
.kpp-moduler__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.kpp-modul{position:relative;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-lg);padding:1.3rem 1.35rem;display:flex;gap:.9rem;align-items:flex-start;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur)}
.kpp-modul:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-line))}
.kpp-modul__ikon{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:var(--rounded-sm);background:var(--color-primary-tint);color:var(--color-primary);transition:transform var(--dur) var(--ease-out)}
.kpp-modul:hover .kpp-modul__ikon{transform:scale(1.06)}
.kpp-modul h3{font-size:1.05rem;margin:0 0 .2rem;font-family:var(--font-body);font-weight:700;letter-spacing:0}
.kpp-modul p{margin:0;font-size:.93rem;color:var(--color-ink-muted);line-height:1.4}
.kpp-moduler__foot{margin-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;justify-content:space-between}
.kpp-moduler__count{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--color-ink-muted)}
.kpp-moduler__count b{color:var(--color-primary);font-family:var(--font-display);font-weight:800}

/* ============================================================
   REDAKTØR-TEASER + skjermbilder (mobilramme)
   ============================================================ */
.kpp-redaktor__grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.kpp-liste{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.kpp-liste li{display:flex;gap:.7rem;align-items:flex-start}
.kpp-liste .kpp-icon{color:var(--color-primary);flex:none;margin-top:3px}
.kpp-liste b{color:var(--color-ink)}
.kpp-phone{position:relative;width:clamp(220px,80%,300px);margin-inline:auto;aspect-ratio:9/18.5;border-radius:2.2rem;background:var(--color-primary-deep);padding:12px;box-shadow:var(--shadow-lg)}
.kpp-phone__screen{width:100%;height:100%;border-radius:1.6rem;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line)}
.kpp-phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.kpp-phone__ph{display:grid;place-items:center;height:100%;color:var(--color-primary);gap:.75rem;padding:1.5rem;text-align:center}

/* ============================================================
   PROSESS — nummererte steg
   ============================================================ */
.kpp-prosess__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:steg}
.kpp-steg{position:relative;padding-top:1rem}
.kpp-steg__nr{counter-increment:steg;font-family:var(--font-display);font-weight:800;font-size:2.5rem;color:var(--color-primary);opacity:.35;line-height:1}
.kpp-steg__nr::before{content:counter(steg,decimal-leading-zero)}
.kpp-steg h3{font-size:1.25rem;margin:.6rem 0 .4rem}
.kpp-steg p{margin:0;color:var(--color-ink-muted)}

/* ============================================================
   INFO-BAND (avklaring) + FAQ
   ============================================================ */
.kpp-infoband{display:flex;gap:1.25rem;align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-line);border-left:4px solid var(--color-accent);border-radius:var(--rounded-lg);padding:1.75rem 2rem;box-shadow:var(--shadow-sm)}
.kpp-infoband__ikon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--rounded-sm);background:var(--color-primary-tint);color:var(--color-primary);flex:none}
.kpp-infoband h2{margin:0 0 .35rem;font-size:1.2rem}
.kpp-infoband p{margin:0;color:var(--color-ink-muted)}
.kpp-infoband p.kpp-infoband__lenke{margin:.75rem 0 0}
.kpp-infoband__lenke a{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--color-primary);text-decoration:none}
.kpp-infoband__lenke a .kpp-icon{transition:transform var(--dur) var(--ease-out)}
.kpp-infoband__lenke a:hover,.kpp-infoband__lenke a:focus-visible{text-decoration:underline}
.kpp-infoband__lenke a:hover .kpp-icon{transform:translateX(3px)}

.kpp-faq__list{max-width:48rem;margin-inline:auto;border-top:1px solid var(--color-line)}
.kpp-faq__item{border-bottom:1px solid var(--color-line)}
.kpp-faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;background:transparent;border:0;cursor:pointer;padding:1.25rem .25rem;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--color-ink)}
.kpp-faq__q .kpp-icon{flex:none;color:var(--color-primary);transition:transform .3s}
.kpp-faq__q[aria-expanded="true"] .kpp-ikon-plus{display:none}
.kpp-faq__q[aria-expanded="false"] .kpp-ikon-minus{display:none}
/*
 * LUKKET FAQ-PANEL SKAL OGSAA VAERE UTE AV TABREKKEFOELGEN.
 *
 * Panelet ble skjult med max-height:0 + overflow:hidden alene. Det skjuler
 * innholdet visuelt, men lar det bli staaende i tabrekkefoelgen — og siden
 * FAQ-svarene naa baerer lenker til fagartiklene (#162), kunne du tabbe til en
 * lenke ingen kan se. Det er WCAG 2.4.7 (synlig fokus) i praksis: fokusringen
 * tegnes paa et element som er klippet bort.
 *
 * `visibility:hidden` tar elementet ut av tabrekkefoelgen og ut av
 * tilgjengelighetstreet. Forsinkelsen paa .35s er ikke pynt: uten den ville
 * panelet forsvinne foer sammenklappingen er ferdig, og animasjonen ville
 * hakke. Tallet MAA foelge max-height-transisjonen over — endres den ene, maa
 * den andre endres. Naar panelet aapnes, skal synligheten slaa inn straks
 * (0s), ellers ville innholdet komme til syne ETTER at hoeyden er paa plass.
 *
 * Aapen tilstand kommer fra klassen assets/js/site.js setter sammen med
 * maxHeight — panelet har ingen tilstand i markupen, saa CSS har ingenting
 * annet aa henge paa.
 */
.kpp-faq__a{overflow:hidden;max-height:0;visibility:hidden;transition:max-height .35s ease,visibility 0s linear .35s}
.kpp-faq__a--apen{visibility:visible;transition:max-height .35s ease,visibility 0s linear 0s}
.kpp-faq__a-inner{padding:0 .25rem 1.35rem;color:var(--color-ink-muted);max-width:60ch}

/* ============================================================
   AVSLUTNINGS-CTA (moerk) + 404
   ============================================================ */
.kpp-cta{text-align:center}
.kpp-cta__tittel{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;letter-spacing:-.03em;max-width:20ch;margin:0 auto .6rem}
/* Sto som identisk inline stil på <p class="kpp-lede"> i FEM maler (fiksrunde 1,
   runde 13) — samlet her, samme mønster som .kpp-404 .kpp-lede rett under. */
.kpp-cta .kpp-lede{margin-inline:auto;text-align:center}
.kpp-cta .kpp-btn-row{justify-content:center}
.kpp-404{text-align:center}
.kpp-404__inner{max-width:40rem;margin-inline:auto}
.kpp-404 .kpp-lede{margin-inline:auto;text-align:center}

/* —— Bygget av Nettsmed —— */
.kpp-bygget{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-lg);padding:1.75rem 2rem}
.kpp-bygget__tekst{max-width:52ch}
.kpp-bygget h3{margin:0 0 .3rem}
.kpp-bygget p{margin:0;color:var(--color-ink-muted)}

/* ============================================================
   OMVISNING (redaktør-siden) — trinn m/ skjermbilde
   ============================================================ */
.kpp-omvisning__trinn{display:grid;gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,3rem)}
.kpp-trinn{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.kpp-trinn:nth-child(even) .kpp-trinn__media{order:-1}
.kpp-trinn__nr{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--rounded-full);background:var(--color-primary);color:#fff;font-family:var(--font-display);font-weight:800;margin-bottom:1rem}
html[data-mode="dark"] .kpp-trinn__nr{color:#0E1B22}
.kpp-trinn h3{font-size:1.5rem;margin:0 0 .5rem}
.kpp-trinn p{margin:0;color:var(--color-ink-muted)}
.kpp-trinn__media{border-radius:var(--rounded-lg);overflow:hidden;border:1px solid var(--color-line);box-shadow:var(--shadow-md);background:var(--color-surface)}
.kpp-trinn__media img{width:100%;height:auto;display:block}
.kpp-trinn__media--ph{aspect-ratio:16/10;display:grid;place-items:center;color:var(--color-primary);background:var(--color-primary-tint)}

/* Enhetsramme rundt skjermbildet: .kpp-browser / .kpp-phone baerer selv kant og
   skygge, saa media-boksen maa slippe sin egen — ellers dobbel ramme. */
.kpp-trinn__media--ramme{border:0;box-shadow:none;background:none;border-radius:0;overflow:visible}
/* Telefonrammen paa salgsflaten er ellers fast 9/18.5 med object-fit:cover. Et
   skjermbilde skal ALDRI beskjaeres (bunnmenyen er hele poenget), saa her lar vi
   bildet bestemme hoeyden og rammen vokse etter. */
.kpp-trinn__media--mobil .kpp-phone{aspect-ratio:auto;width:clamp(220px,74%,300px)}
.kpp-trinn__media--mobil .kpp-phone__screen{height:auto}
.kpp-trinn__media--mobil .kpp-phone__screen img{height:auto;object-fit:fill}

/* ============================================================
   PUBLISERINGSFLYT — én handling inn, flere utfall ut
   ============================================================ */
.kpp-flyt{display:grid;gap:clamp(1.25rem,3vw,2rem);align-items:center;margin-top:clamp(1.75rem,4vw,2.75rem);grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr)}
.kpp-flyt__kilde{background:var(--color-primary-tint);border:1px solid var(--color-line);border-radius:var(--rounded-lg);padding:clamp(1.25rem,3vw,1.85rem)}
.kpp-flyt__kilde h3{margin:.75rem 0 .4rem;font-size:var(--text-h3)}
.kpp-flyt__kilde p{margin:0;color:var(--color-ink-muted)}
.kpp-flyt__ikon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--rounded-sm);background:var(--color-surface);border:1px solid var(--color-line);color:var(--color-primary);flex:none}
.kpp-flyt__ikon--sm{width:38px;height:38px;background:var(--color-primary-tint)}
.kpp-flyt__pil{display:grid;place-items:center;color:var(--color-primary);opacity:.8}
.kpp-flyt__ut{list-style:none;margin:0;padding:0 0 0 clamp(1.25rem,3vw,1.75rem);display:grid;gap:.85rem;border-left:2px solid var(--color-line)}
.kpp-flyt__kort{position:relative;display:flex;gap:.9rem;align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-lg);padding:1.1rem 1.25rem;box-shadow:var(--shadow-sm)}
/* Prikk paa skinna — viser at alle tre henger paa samme handling. */
.kpp-flyt__kort::before{content:"";position:absolute;top:1.75rem;left:calc(-1 * clamp(1.25rem,3vw,1.75rem) - 5px);width:8px;height:8px;border-radius:var(--rounded-full);background:var(--color-primary)}
.kpp-flyt__kort h3{margin:0 0 .25rem;font-size:1.1rem}
.kpp-flyt__kort p{margin:0;color:var(--color-ink-muted);font-size:.98rem;line-height:1.5}
.kpp-flyt__note{margin:1.5rem 0 0;display:flex;gap:.6rem;align-items:flex-start;color:var(--color-ink-muted);max-width:62ch}
.kpp-flyt__note .kpp-icon{color:var(--color-accent-text);flex:none;margin-top:.2rem}

/* —— Prosa (fallback-sider) —— */
.kpp-prose{max-width:44rem}
.kpp-prose h2{font-size:var(--text-h2);margin-top:2rem}
.kpp-prose h3{margin-top:1.5rem}
.kpp-prose p,.kpp-prose li{color:var(--color-ink)}
.kpp-prose ul{padding-left:1.25rem}

/* ============================================================
   FOOTER
   ============================================================ */
.kpp-footer{background:var(--color-surface-2);border-top:1px solid var(--color-line);padding-block:clamp(2.5rem,5vw,4rem) 1.5rem}
.kpp-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.5rem,4vw,3rem);padding-bottom:2rem}
.kpp-footer__logo{height:34px;width:auto;margin-bottom:.9rem}
.kpp-footer__logo--mork{display:none}
html[data-mode="dark"] .kpp-footer__logo--lys{display:none}
html[data-mode="dark"] .kpp-footer__logo--mork{display:block}
.kpp-footer__tagline{margin:0;color:var(--color-ink-muted);max-width:32ch}
.kpp-footer__tittel{font-family:var(--font-body);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-muted);margin:0 0 .9rem}
.kpp-footer__lenker{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.kpp-footer__lenker a{color:var(--color-ink);text-decoration:none}
.kpp-footer__lenker a:hover{color:var(--color-primary);text-decoration:underline}
.kpp-footer__bunn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid var(--color-line);padding-top:1.5rem;font-size:.9375rem;color:var(--color-ink-muted)}
.kpp-footer__bunn p{margin:0}
.kpp-footer__meta{display:flex;flex-wrap:wrap;gap:1.25rem}
/* Complianz-tilbakekallingen MAA vaere en <button> (pluginen hekter paa knappen),
   men den staar blant lenkene og skal lese som én av dem. Knappens egen bakgrunn,
   ramme, padding og font nullstilles derfor, og fargen settes til den samme
   `a{color:var(--color-primary)}` sokengene rundt arver. Fokusringen kommer fra den
   globale `:focus-visible` og trenger ingen regel her.
   `flex-wrap:wrap` over: raden hadde tre elementer og faar naa et fjerde, og
   selskapslinja er lang nok til aa sprenge bredden paa mobil uten ombrekking. */
.kpp-footer__samtykke{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;font:inherit;text-align:inherit;color:var(--color-primary);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.15em;cursor:pointer}
.kpp-footer__samtykke:hover{text-decoration-thickness:.12em}

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
/* v2 (1.9): .7s/18px var for tregt. Maalt paa dev 31.08 sto hero-teksten ghostet
   i 4–6 s foer observeren utloeste. To grep:
     1. varigheten ned til .42s og reisen ned til 10px — bevegelsen skal
        antyde at noe kommer inn, ikke ta tid.
     2. .kpp-reveal--straks: alt over folden slaas paa ved LAST (site.js), aldri
        via IntersectionObserver. Ingenting leseren ser med én gang skal vaere
        avhengig av at en observer utloeser. */
.kpp-reveal{opacity:0;transform:translateY(10px);transition:opacity .42s var(--ease-out),transform .42s var(--ease-out)}
.kpp-reveal.is-visible{opacity:1;transform:none}

/* —— DEV-banner —— */
body.is-dev::before{content:"DEV — kp-presentasjon.nettsmed.dev · noindex";position:fixed;bottom:0;left:0;z-index:9999;background:var(--color-warning);color:#fff;font:600 12px/1 var(--font-body);padding:6px 12px;border-radius:0 var(--rounded-sm) 0 0;letter-spacing:.02em}

/* ============================================================
   RESPONSIV
   ============================================================ */
/*
 * Hovedmenyen kollapser til hamburger under 960px. Var 640px da menyen hadde
 * fire oppfoeringer; med «Pris» og «Proev selv» (fase 11) er raden 580px bred,
 * og logo + rad + tema-bryter trenger ~824px innenfor wrap-paddingen. Maalt paa
 * dev: 885px innhold gir ombrukket nav-rad, 700px gir horisontal overflyt
 * (scrollWidth 733 mot clientWidth 700). 960px gir én ren rad med margin.
 */
@media (max-width:960px){
  .kpp-nav{display:none}
  .kpp-nav-toggle{display:flex}
}
@media (max-width:900px){
  .kpp-hero__grid,.kpp-redaktor__grid{grid-template-columns:1fr}
  .kpp-hero__miniatyrer{order:-1;min-height:260px;max-width:420px}
  .kpp-grid--3,.kpp-moduler__grid,.kpp-prosess__grid{grid-template-columns:repeat(2,1fr)}
  .kpp-trinn,.kpp-trinn:nth-child(even) .kpp-trinn__media{grid-template-columns:1fr}
  .kpp-trinn:nth-child(even) .kpp-trinn__media{order:0}
  .kpp-flyt{grid-template-columns:1fr}
  .kpp-flyt__pil{justify-self:start;padding-left:1.1rem;transform:rotate(90deg)}
}
@media (max-width:640px){
  .kpp-grid--3,.kpp-grid--2,.kpp-moduler__grid,.kpp-prosess__grid{grid-template-columns:1fr}
  .kpp-bygget{flex-direction:column;align-items:flex-start}
  .kpp-infoband{flex-direction:column}
}

/* ============================================================
   FAGARTIKLER — arkiv («Artikler») + enkeltartikkel
   (fase 8c; forsidebilder + bildekort fase 9h)
   ============================================================ */

/* —— Skjul kun visuelt (skjermleser-tekst beholdes) —— */
.kpp-visuelt-skjult{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* —— Emne-chip —— */
.kpp-chip{display:inline-block;font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-primary);background:var(--color-primary-tint);border-radius:var(--rounded-full);padding:.28rem .72rem}
.kpp-artkort__emne{margin:0 0 .7rem}

/* —— Bildekort-grid —— */
.kpp-artliste{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
/*
 * Tre kort på én rad: BARE forside-inngangen, og bare når seksjonen faktisk er
 * satt til tre (section-artikkel-inngang.php setter modifikatoren ut fra
 * `antall`). Basisgriden blir stående på to, fordi /artikler/ og «Les også»
 * regner med to spalter. Mellom 641 og 900 px faller den tilbake til to — tre
 * kort blir da 2 + 1, som er bedre enn tre altfor smale kort.
 */
.kpp-artliste--tre{grid-template-columns:repeat(3,1fr)}
.kpp-artkort{display:flex;flex-direction:column;padding:0;overflow:hidden}
.kpp-artkort__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--color-primary-tint);display:block}
.kpp-artkort__bilde{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur) var(--ease-out)}
.kpp-artkort:hover .kpp-artkort__bilde{transform:scale(1.035)}
.kpp-artkort__media--bue{border-radius:var(--arch-radius)}
.kpp-artkort__tom{position:absolute;inset:0;display:grid;place-items:center;color:var(--color-primary);opacity:.5}
.kpp-artkort__tom svg{width:38%;height:auto}
.kpp-artkort__body{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.5rem 1.5rem}
.kpp-artkort__tittel{font-size:1.3rem;line-height:1.2;margin:0 0 .55rem}
.kpp-artkort__tittel a{color:var(--color-ink);text-decoration:none}
.kpp-artkort__tittel a:hover{color:var(--color-primary);text-decoration:underline}
.kpp-artkort__utdrag{color:var(--color-ink-muted);margin:0 0 1rem;font-size:.98rem}
.kpp-artkort__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .55rem;margin:0 0 1rem;font-size:.85rem;color:var(--color-ink-muted)}
.kpp-artkort__lesetid{display:inline-flex;align-items:center;gap:.3rem}
.kpp-artkort__lesetid .kpp-icon{color:var(--color-primary);flex:none}
.kpp-artkort__prikk{color:var(--color-line-strong)}
.kpp-artkort .kpp-textlink{margin-top:auto;color:var(--color-primary)}

/* —— Fremhevet artikkel (nyeste) — 2-kol med buevindu-bilde —— */
.kpp-artfeat{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin:0 0 2.5rem;transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.kpp-artfeat:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.kpp-artfeat__media{position:relative;overflow:hidden;background:var(--color-primary-tint);min-height:300px}
.kpp-artfeat__bilde{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kpp-artfeat__body{padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center}
.kpp-artfeat__badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-text);margin:0 0 .9rem}
.kpp-artfeat__badge::before{content:"";width:1.6rem;height:3px;border-radius:var(--rounded-full);background:var(--color-accent);flex:none}
.kpp-artfeat__tittel{font-size:var(--text-h2);line-height:1.08;letter-spacing:-.02em;margin:0 0 .7rem}
.kpp-artfeat__tittel a{color:var(--color-ink);text-decoration:none}
.kpp-artfeat__tittel a:hover{color:var(--color-primary);text-decoration:underline}
.kpp-artfeat__ingress{font-size:1.1rem;line-height:1.55;color:var(--color-ink-muted);margin:0 0 1.2rem}
.kpp-artfeat .kpp-artkort__meta{font-size:.9rem;margin-bottom:1.4rem}
.kpp-artfeat .kpp-btn{align-self:flex-start}

/* —— Enkeltartikkel-hero —— */
.kpp-arthero{position:relative;overflow:hidden}
.kpp-arthero__inner{position:relative;z-index:2}
.kpp-arthero--tekst{background:var(--color-surface-2);padding-block:clamp(2.5rem,5vw,4rem)}
.kpp-arthero--bilde{min-height:clamp(340px,44vw,520px);display:flex;align-items:flex-end}
.kpp-arthero__bilde{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.kpp-arthero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(9,22,28,.94) 0%,rgba(9,22,28,.78) 26%,rgba(9,22,28,.34) 58%,rgba(9,22,28,.06) 100%)}
.kpp-arthero--bilde .kpp-arthero__inner{padding-block:2.4rem;color:#fff}
/* M12 (prod-audit runde 13): #9AC9D9 mot scrimen (linje over) sitt ca. .70-sjikt
   der kickeren står — over et HVIT bilde i verste fall, det scrimen alene ikke
   dekker — komposittet til rgb(9,22,28) × .70 + hvit × .30 ≈ rgb(83,92,96) og ga
   3,83:1 (WCAG 1.4.3 krever 4,5:1 for 13px/600, som ikke er «stor tekst»).
   #BEDCE7 mot samme rgb(83,92,96) gir 4,76:1 — regnet med relativ luminans
   (samme formel som tools/test-presentasjon-kontrast.mjs, som vokter tallet). */
.kpp-arthero--bilde .kpp-kicker{color:#BEDCE7}
.kpp-arthero--bilde .kpp-artikkel__tittel{color:#fff}
.kpp-arthero--bilde .kpp-artikkel__meta{color:rgba(255,255,255,.92)}
.kpp-arthero--bilde .kpp-artikkel__lesetid .kpp-icon{color:#E8B75E}
.kpp-arthero--bilde .kpp-chip{background:rgba(9,22,28,.55);color:#fff;border:1px solid rgba(255,255,255,.42)}
.kpp-arthero__inner .kpp-artkort__emne{margin:.2rem 0 .85rem}

/* —— Neste-artikkel-peker (diskret) —— */
.kpp-neste{display:flex;align-items:center;gap:.4rem 1rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,2.75rem);padding:1rem 1.25rem;border:1px solid var(--color-line);border-radius:var(--rounded-lg);background:var(--color-surface);text-decoration:none;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.kpp-neste:hover{border-color:var(--color-line-strong);box-shadow:var(--shadow-sm)}
.kpp-neste__label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-muted);flex:none}
.kpp-neste__tittel{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--color-ink);flex:1;min-width:0}
.kpp-neste .kpp-icon{color:var(--color-primary);flex:none;transition:transform var(--dur) var(--ease-out)}
.kpp-neste:hover .kpp-icon{transform:translateX(3px)}

/* —— «Les også» —— */
.kpp-lesogsa{background:var(--color-surface-2);border-top:1px solid var(--color-line);margin-top:clamp(3rem,6vw,5rem);padding-block:clamp(2.5rem,5vw,4rem)}
.kpp-lesogsa__tittel{font-size:var(--text-h3);margin:0 0 1.5rem}
.kpp-lesogsa .kpp-artkort{background:var(--color-surface)}

/* —— Tom arkiv-tilstand —— */
.kpp-arttom{text-align:center;max-width:34rem;margin:clamp(2rem,5vw,3.5rem) auto 0;padding:clamp(2rem,4vw,3rem);border:1px solid var(--color-line);border-radius:var(--rounded-lg);background:var(--color-surface-2)}
.kpp-arttom__symbol{display:block;width:64px;margin:0 auto 1.1rem;color:var(--color-primary);opacity:.65}
.kpp-arttom__symbol svg{width:100%;height:auto}
.kpp-arttom__tekst{margin:0;color:var(--color-ink-muted);font-size:1.05rem}

.kpp-artikkel{padding-block:0 clamp(3rem,6vw,5rem)}
.kpp-artikkel>.kpp-wrap{padding-top:clamp(2rem,4vw,3rem)}
.kpp-artikkel__mal{max-width:65ch}
.kpp-artikkel__tittel{margin-bottom:.35em}
.kpp-artikkel__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.25rem;margin:0;font-size:.9375rem;color:var(--color-ink-muted)}
.kpp-artikkel__lesetid{display:inline-flex;align-items:center;gap:.35rem}
.kpp-artikkel__lesetid .kpp-icon{color:var(--color-primary);flex:none}
.kpp-artikkel__ingress{font-size:1.25rem;line-height:1.55;color:var(--color-ink-muted)}
/*
 * Forklaringsboks rett under ingressen: «hva er dette egentlig?» før artikkelen
 * begynner å skille mellom sektorer. Egen flate og egen farge — IKKE
 * .kpp-artikkel__utro, som står i primærtinten og er avslutningen; to bokser i
 * samme farge ville lest som to avslutninger. Teksten er --color-ink på
 * --color-surface-2 i begge modusene, altså samme kombinasjon som .kpp-toc.
 */
.kpp-artikkel__forklaring{margin:0 0 1.75rem;padding:1.15rem 1.35rem;background:var(--color-surface-2);border-left:3px solid var(--color-primary);border-radius:0 var(--rounded-lg) var(--rounded-lg) 0}
.kpp-artikkel__innhold .kpp-artikkel__forklaring p{margin:0;color:var(--color-ink)}
.kpp-artikkel__innhold h2{font-size:clamp(1.55rem,3vw,1.9rem);margin-top:2.5rem;scroll-margin-top:6rem}
.kpp-artikkel__innhold h3{font-size:1.25rem;margin-top:1.75rem}
.kpp-artikkel__innhold p{margin:0 0 1.1rem}
.kpp-artikkel__innhold ul,.kpp-artikkel__innhold ol{padding-left:1.4rem;margin:0 0 1.1rem}
.kpp-artikkel__innhold li{margin-bottom:.45rem}
.kpp-artikkel__innhold li::marker{color:var(--color-primary)}

.kpp-toc{border:1px solid var(--color-line);border-radius:var(--rounded-lg);background:var(--color-surface-2);padding:1.25rem 1.5rem;margin:0 0 2.25rem}
.kpp-toc__tittel{font-family:var(--font-body);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-muted);margin:0 0 .6rem}
.kpp-toc__list{margin:0;padding-left:1.25rem;display:grid;gap:.35rem}
.kpp-toc__list a{text-decoration:none;font-weight:500}
.kpp-toc__list a:hover{text-decoration:underline}
.kpp-toc__list li::marker{color:var(--color-ink-muted);font-size:.9rem}

.kpp-tabellwrap{overflow-x:auto;margin:0 0 1.25rem;border:1px solid var(--color-line);border-radius:var(--rounded-sm)}
.kpp-artikkel__innhold table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
.kpp-artikkel__innhold th,.kpp-artikkel__innhold td{padding:.7rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-line)}
.kpp-artikkel__innhold th{background:var(--color-surface-2);font-family:var(--font-body);font-weight:700}
.kpp-artikkel__innhold tr:last-child td{border-bottom:0}

.kpp-artikkel__utro{margin:2.5rem 0 0;padding:1.4rem 1.6rem;background:var(--color-primary-tint);border-radius:var(--rounded-lg);font-size:1.05rem}
.kpp-artikkel__utro a{font-weight:600}

.kpp-kilder{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--color-line)}
.kpp-kilder h2{font-family:var(--font-body);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-muted);margin:0 0 .75rem}
.kpp-artikkel__innhold .kpp-kilder h2{font-size:.8125rem;margin-top:0}
.kpp-kilder ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.kpp-artikkel__innhold .kpp-kilder ul{padding-left:0}
.kpp-kilder li{font-size:.875rem;color:var(--color-ink-muted);margin:0}

.kpp-forfatter{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;gap:1.25rem;align-items:flex-start;border:1px solid var(--color-line);border-radius:var(--rounded-lg);background:var(--color-surface-2);padding:1.6rem 1.75rem}
.kpp-forfatter__symbol{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:var(--rounded-full);background:var(--color-primary-tint);color:var(--color-primary);padding:9px}
.kpp-forfatter__symbol svg{width:100%;height:100%;display:block}
.kpp-forfatter__navn{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.kpp-forfatter__bio{margin:.25rem 0 .6rem;color:var(--color-ink-muted);font-size:.98rem}

/* Tre kort blir for smale før 900 px — da er 2 + 1 bedre enn tre knøttsmå. */
@media (max-width:900px){
  .kpp-artliste--tre{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .kpp-artfeat{grid-template-columns:1fr}
  .kpp-artfeat__media{min-height:0;aspect-ratio:16/10}
  .kpp-artfeat__media.kpp-artkort__media--bue{border-radius:var(--rounded-lg) var(--rounded-lg) 0 0}
}
@media (max-width:640px){
  .kpp-artliste{grid-template-columns:1fr}
  .kpp-forfatter{flex-direction:column}
  .kpp-arthero--bilde{min-height:clamp(280px,72vw,400px)}
}

/* —— Redusert bevegelse —— */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .kpp-reveal{opacity:1;transform:none}
}

/* —— Footer-responsiv —— */
@media (max-width:900px){
  .kpp-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .kpp-footer__grid{grid-template-columns:1fr}
  .kpp-footer__bunn{flex-direction:column}
}

/* ============================================================
   FORSIDE v2 — browser-rammer, device-stack, redaktør-hjem,
   modul-punch, mørk statement-øy, stagger. (fase 9c)
   ============================================================ */

/* —— Gjenbrukbar browser-mockup-ramme —— */
.kpp-browser{position:relative;border-radius:14px;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);box-shadow:var(--shadow-lg)}
.kpp-browser__bar{display:flex;align-items:center;gap:.85rem;padding:.6rem .85rem;background:var(--color-surface-2);border-bottom:1px solid var(--color-line)}
.kpp-browser__dots{display:flex;gap:.42rem;flex:none}
.kpp-browser__dots i{width:10px;height:10px;border-radius:50%;background:var(--color-line-strong);opacity:.5}
.kpp-browser__addr{flex:1;min-width:0;height:23px;border-radius:var(--rounded-full);background:var(--color-surface);border:1px solid var(--color-line);display:flex;align-items:center;gap:.4rem;padding:0 .7rem;font-family:var(--font-body);font-size:.72rem;font-weight:500;color:var(--color-ink-muted);white-space:nowrap;overflow:hidden}
.kpp-browser__addr .kpp-icon{flex:none;opacity:.7;width:12px;height:12px}
.kpp-browser__addr span{overflow:hidden;text-overflow:ellipsis}
.kpp-browser__shot{display:block;width:100%;height:auto;background:var(--color-surface-2)}
/* Lys/moerk skjermbilde byttes av CSS (fase 13). data-mode staar paa <html>
   foer paint, saa riktig variant er synlig fra foerste tegning — ingen
   flimring. Reglene MAA staa etter .kpp-browser__shot: samme spesifisitet,
   saa det er kildeorden som avgjoer. */
.kpp-browser__shot--mork{display:none}
html[data-mode="dark"] .kpp-browser__shot--lys{display:none}
html[data-mode="dark"] .kpp-browser__shot--mork{display:block}

/* —— /demo-seksjonen: innramming + «aapne i ny fane» (beslutning 2026-08-28) —— */
.kpp-demo-kort{display:grid;gap:clamp(1.4rem,3vw,2.2rem);align-items:start;grid-template-columns:1fr;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-lg);box-shadow:var(--shadow-lg);padding:clamp(1.5rem,4vw,2.3rem)}
@media (min-width:860px){.kpp-demo-kort{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.kpp-demo-punkter{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.kpp-demo-punkter li{display:flex;gap:.65rem;align-items:flex-start;font-size:1rem;line-height:1.55;color:var(--color-ink-muted)}
.kpp-demo-punkter li .kpp-icon{color:var(--color-primary);flex:none;margin-top:.2rem}
.kpp-demo-punkter li b{color:var(--color-ink);font-weight:600}
.kpp-demo-kort__handling{align-self:center}
.kpp-demo-kort__handling .kpp-btn{width:100%;justify-content:center;text-align:center}
.kpp-demo-kort__vert{margin:.9rem 0 0;font-size:.85rem;line-height:1.5;color:var(--color-ink-muted)}

/* —— Hero: bevisstripa («hva inneholder det») ——————————————————————
   v2 (1.9): var fire ikon-chips med kant, fyll og skygge — fire smaa kort som
   konkurrerte med CTA-raden rett over. Naa ÉN rolig linje. Skillet er en
   ::before-PRIKK uten tekstinnhold: en «·» som tegn ville blitt lest opp av
   skjermlesere mellom hvert punkt. Fortsatt <ul> — det ER en liste. */
.kpp-hero__bevis{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .95rem;
  margin:1.5rem 0 0;padding:0;list-style:none;
  font-size:.93rem;line-height:1.5;color:var(--color-ink-muted)}
.kpp-hero__bevis li{display:inline-flex;align-items:center}
.kpp-hero__bevis li+li::before{content:"";width:4px;height:4px;flex:none;
  margin-right:.95rem;border-radius:var(--rounded-full);
  background:var(--color-accent)}
.kpp-section--dark .kpp-hero__bevis{color:#B9CCD4}

/* —— Redaktør-hjem: ekte Hjem-skjerm gjengitt i browser-ramme (theme-aware) —— */
.kpp-admin{display:grid;grid-template-columns:130px 1fr;background:var(--color-surface);font-family:var(--font-body)}
.kpp-admin__side{background:#0E2A34;color:#CFE0E7;padding:.9rem .55rem;display:grid;gap:.1rem;align-content:start}
html[data-mode="dark"] .kpp-admin__side{background:#0A1D24}
.kpp-admin__brand{display:flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-weight:800;font-size:.82rem;color:#fff;padding:.15rem .45rem .7rem}
.kpp-admin__brand i{width:9px;height:9px;border-radius:50%;background:var(--color-accent);flex:none}
.kpp-admin__nav{display:flex;align-items:center;gap:.5rem;padding:.42rem .55rem;border-radius:7px;font-size:.78rem;font-weight:600;color:#B7CBD3}
.kpp-admin__nav .kpp-icon{width:15px;height:15px;flex:none;opacity:.85}
.kpp-admin__nav--on{background:rgba(255,255,255,.12);color:#fff}
.kpp-admin__main{padding:1.05rem 1.15rem;display:grid;gap:.8rem;min-width:0}
.kpp-admin__hi{margin:0;font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--color-ink);letter-spacing:-.02em}
.kpp-admin__card{border:1px solid var(--color-line);border-radius:10px;padding:.8rem .9rem;background:var(--color-surface)}
.kpp-admin__ctitle{margin:0 0 .55rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-muted)}
.kpp-admin__check{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.kpp-admin__check li{display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:var(--color-ink)}
.kpp-admin__check .kpp-icon{width:16px;height:16px;flex:none}
.kpp-admin__check li[data-done] .kpp-icon{color:var(--color-success)}
.kpp-admin__check li:not([data-done]){color:var(--color-ink-muted)}
.kpp-admin__check li:not([data-done]) .kpp-icon{color:var(--color-line-strong)}
.kpp-admin__log{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.kpp-admin__log li{display:flex;align-items:flex-start;gap:.55rem;font-size:.8rem;color:var(--color-ink-muted)}
.kpp-admin__log .kpp-icon{width:15px;height:15px;flex:none;margin-top:1px;color:var(--color-primary)}
.kpp-admin__log b{color:var(--color-ink);font-weight:600}

/* —— Mørk statement-øy (losning) — bærende utsagn på glød —— */
.kpp-section--dark .kpp-losning__utsagn{color:#fff}
.kpp-section--dark .kpp-losning__tekst{color:#B9CCD4}

/* —— Stagger-reveal (barn animeres i tur) ——————————————————————————
   v2 (1.9): hele trappa er strammet inn. Siste barn startet foer paa .44s og
   brukte .6s — 1,04 s foer raden sto ferdig. Naa: siste start .24s + .38s
   varighet = 620 ms totalt, og selve STAGGEREN (spennet mellom foerste og
   siste start) er 240 ms — innenfor kravet paa ~400 ms. */
.kpp-stagger>*{opacity:0;transform:translateY(10px);transition:opacity .38s var(--ease-out),transform .38s var(--ease-out)}
.kpp-stagger.is-visible>*{opacity:1;transform:none}
.kpp-stagger.is-visible>*:nth-child(2){transition-delay:.04s}
.kpp-stagger.is-visible>*:nth-child(3){transition-delay:.08s}
.kpp-stagger.is-visible>*:nth-child(4){transition-delay:.12s}
.kpp-stagger.is-visible>*:nth-child(5){transition-delay:.16s}
.kpp-stagger.is-visible>*:nth-child(6){transition-delay:.2s}
.kpp-stagger.is-visible>*:nth-child(n+7){transition-delay:.24s}

/* —— Responsiv (v2-komponenter) —— */
@media (max-width:900px){
  .kpp-hero__grid,.kpp-hero--media .kpp-hero__grid{grid-template-columns:1fr}
  .kpp-hero__scene{max-width:540px;margin:1rem auto 0;width:100%}
  .kpp-hero__media{max-width:520px;margin-top:.5rem}
  .kpp-moduler__grid{grid-template-columns:repeat(2,1fr)}
}

/* —— Mobil: heroens hoeyrefelt utgaar HELT (beslutning 2026-08-29) ——————
   Under 768 px staar teksten alene over bakgrunnen (gloed + seksjonsfarge).
   Buen maatte ellers hatt et eget baand under CTA-raden — ren dekor som
   stjeler en skjermhoeyde foer leseren naar innholdet. Og B-beviset ville
   dublert seksjonen rett under: panel-skjermbildet staar i omvisningen
   (inkludert mobil-varianten), priskortet i seksjonen etter heroen. Begge
   deler er sterkere der de allerede er.
   Skjermbildene er loading="lazy", saa en skjult img aldri hentes ned — det
   er nettopp derfor de ikke er eager. */
/* Under 768 px staar teksten alene. Den levende mockupen er unntaket fra
   regelen over: den er ingen tung binaerfil, den ER argumentet paa forsiden,
   og den koster null ekstra forespoersler. Duotone-fotoet BAK den skrus av —
   der er background-image-en, og en skjult boks henter aldri sin bakgrunn. */
@media (max-width:768px){
  .kpp-bue,.kpp-hero__media{display:none}
  .kpp-levende__foto{display:none}
  .kpp-hero__scene{margin-top:1.75rem}
}
@media (max-width:640px){
  .kpp-moduler__grid{grid-template-columns:1fr}
  .kpp-hero__scene{max-width:440px}
  .kpp-levende__meny{display:none}
  /* Stoerre traeffflate paa telefon (WCAG 2.2 SC 2.5.8 er dekket ogsaa uten
     dette, men 30 px er en tynn knapp med tommelen). */
  .kpp-levende__chip{padding:.7rem .95rem;font-size:.85rem}
  .kpp-admin{grid-template-columns:96px 1fr}
  .kpp-admin__nav span{display:none}
  .kpp-admin__brand span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .kpp-stagger>*{opacity:1;transform:none;transition-duration:.001ms!important}
  /* Mockupen staar i ro paa foerste tilstand (site.js starter aldri rotasjonen),
     men chipene skal fortsatt VIRKE — bare uten omfargings-overgangen. */
  .kpp-levende__skjerm,.kpp-levende__skjerm *{transition-duration:.001ms!important}
}

/* —— Mobil: venstrestill avsnitt (runde 13, TSK mobil-venstre, 16.09.2026) ——————
   Nettsmed-regel (nettsmed-shared/CLAUDE.md): brødtekst skal aldri sentreres —
   bare overskrifter og enkeltstående CTA-knapper får lov. Under 640px (samme
   brekkpunkt temaet allerede bruker for .kpp-moduler__grid/.kpp-admin over)
   venstrestilles ingress/note/tekst-avsnittene i de seksjonene som sentrerer
   dem på desktop; h1/h2/h3 og .kpp-btn beholder sentreringen sin uendret.
   .kpp-cta sin ingress sto som identisk inline stil i FEM maler (fiksrunde 1,
   runde 13) — samlet i .kpp-cta .kpp-lede over, så denne blokka kan overstyre
   den som en vanlig regel, uten !important (prosjektregelen: !important er
   forbeholdt hidden-hjelpere, jf. .kpp-visuelt-skjult og [hidden] i kommer.css). */
@media (max-width:640px){
  .kpp-sec-head--center .kpp-lede{text-align:left}
  .kpp-losning__tekst{text-align:left}
  .kpp-tilpass-note{text-align:left;justify-content:flex-start}
  .kpp-404 .kpp-lede{text-align:left}
  .kpp-arttom__tekst{text-align:left}
  .kpp-cta .kpp-lede{text-align:left}
}