/* Hallmark · macrostructure: 05 Workbench + selgende hero · genre: editorial
 * theme: locked-brand (klarning) · nav: N1a minimal · footer: Ft5 statement
 * pre-emit critique: P4 H5 E5 S5 R4 V4
 *
 * OVERRIDE 1 · gate 38a: Old Standard TT Italic på SIFRE — brukerens låste
 *   merkevareskrift (ios/Klarning/hjem.ts `hero`). Alle overskrifter er rette.
 * OVERRIDE 2 · Workbench-spec sier «heading: small — workbench pages don't
 *   shout». Overstyrt: sida må selge en app til folk som ikke vet at den finnes.
 * OVERRIDE 3 · Bevisst konvensjonell app-hero (løfte + produktbilde + knapp i
 *   folden). Hallmark unngår formen som AI-default; her er den riktig fordi
 *   INNHOLDET er uvanlig nok.
 *
 * gate 47: ekte simulatoropptak, ingen tegnet telefonramme/notch/knapper.
 * gate 46: ingen oppdiktede tall — alt er bakt fra /api/klarning + /verification.
 *
 * kilder: farger ios/Klarning/Pigment.swift · roller docs/DESIGN.md:68
 *         hjørner målt i appen (Capsule 9× · r12 8×) · fjærer Motion.swift
 * NB: src/klarning/v11/theme.ts er STALE etter bolk 3 — ikke bruk den.
 */

/* ── fonter · selvhostet, appens egne snitt ────────────────────────────── */
@font-face { font-family: Erode; src: url(fonter/erode-400.woff2) format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Erode; src: url(fonter/erode-500.woff2) format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(fonter/generalsans-400.woff2) format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(fonter/generalsans-500.woff2) format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonter/plexmono-400.woff2) format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonter/plexmono-500.woff2) format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url(fonter/oldstandard-400i.woff2) format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --papir: #f1efeb; --papir-varm: #efe8db; --papir-mork: #222a3c; --papir-dyp: #1d2433;
  --blekk: #222a3c; --dempet: #5a6171; --svak: #8a91a1;
  --lys: #eeeae0; --lys-2: #c7ccd6; --lys-svak: #7f8799;
  --kall: #d7826c;          /* sienna — KUN dommen og kallet */
  --treff: #7c9885;         /* grønn — KUN regnskapets blink */
  --treff-lys: #6fb57e;
  --bom: #bb6a37;
  --kjolig: #86a3c1;
  --aksent: #4e6b82;        /* KUN lenker/interaktivt */
  --hair: rgba(34, 42, 60, 0.14);
  --hair-lys: rgba(238, 234, 224, 0.16);

  --serif: Erode, Georgia, serif;
  --sans: "General Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --tallfont: "Old Standard TT", Georgia, serif;

  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --r-1: 6px; --r-2: 12px; --r-pill: 999px; --r-skjerm: 34px;

  /* appens egne fjærer, oversatt fra Motion.swift */
  --dur: 0.75s;
  --fjaer: linear(0, 0.0577, 0.1866, 0.3398, 0.4899, 0.6228, 0.7326, 0.8187, 0.8833,
                  0.9297, 0.9617, 0.9826, 0.9955, 1.0028, 1.0064, 1.0077, 1.0075,
                  1.0066, 1.0055, 1.0043, 1.0032, 1.0023, 1.0016, 1.0011, 1.0006);
  --dur-kvikk: 0.5s;
  --kvikk: linear(0, 0.0597, 0.1924, 0.3489, 0.5011, 0.6346, 0.7439, 0.8287, 0.8917,
                  0.9363, 0.9665, 0.986, 0.9977, 1.004, 1.007, 1.0077, 1.0073, 1.0063,
                  1.0051, 1.0039, 1.0029, 1.002, 1.0013, 1.0009, 1.0005);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }            /* aldri hidden — gate 34 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* PAPIRTEKSTUREN — appens egen vev (design/tekstur_transp.png), som eget lag
   så styrken kan stilles. Lagt rett på body med multiply ble veven ~2 px tett
   og leste som et rutemønster; her er den nesten under bevisstheten, slik den
   er i appen. Ligger over de mørke flatene også, så papiret er ett materiale
   gjennom hele sida. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: url(papir.png);
  background-size: 300px;
  opacity: 0.16;
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 2; }   /* innholdet over kornet */

body {
  margin: 0;
  background-color: var(--papir);
  color: var(--blekk);
  font-family: var(--sans);                  /* SANS er brødskriften — DESIGN.md:68 */
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* display er ALLTID rett; kursiv kun på sifre */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; font-style: normal;
             letter-spacing: -0.015em; overflow-wrap: anywhere; min-width: 0; margin: 0; }
h1 { font-size: clamp(2rem, 7.2vw, 3.4rem); line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 5.2vw, 2.3rem); line-height: 1.12; }
h3 { font-size: 1.05rem; line-height: 1.25; }
p { margin: 0; }

a { color: var(--aksent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.ark { max-width: 64rem; margin: 0 auto; padding: 0 var(--s-5); }
.smal { max-width: 38rem; }

.merke { font-family: var(--mono); font-weight: 500; font-size: 10.5px;
         letter-spacing: 0.14em; text-transform: uppercase; color: var(--dempet); }

/* Old Standard TT er RESERVERT appens høy/lav-tall (↑22° ↓9°) og INGENTING
   annet. Brukes den til regnskapstall eller nedbørstall, utvannes det ene
   stedet den betyr noe. Samme regel som for sienna. */
.hoy-lav-rad { display: flex; align-items: baseline; gap: var(--s-4);
               margin-bottom: var(--s-2); }
.hoy-lav { font-family: var(--tallfont); font-style: italic; line-height: 1;
           font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
           font-size: clamp(2.4rem, 9vw, 3.2rem); }
.hoy-lav.hoy { color: var(--kall); }
.hoy-lav.lav { color: var(--kjolig); font-size: clamp(1.3rem, 5vw, 1.7rem); }

section { padding: var(--s-8) 0; }
section .merke { display: block; margin-bottom: var(--s-3); }
section h2 { margin-bottom: var(--s-4); }
.mork { background-color: var(--papir-mork); color: var(--lys); }
.mork .merke { color: var(--lys-svak); }
.mork a { color: #92acc1; }
/* KONTRAST: --dempet er mørk grå og forsvinner på mørkt papir (gate 40–41).
   All dempet tekst må løftes til det lyse registeret inne i .mork. */
.mork .brod, .mork .dekning, .mork .blokk-under { color: var(--lys-2); }
.mork .krav, .mork .graf-tekst, .mork .blokk-merke { color: var(--lys-svak); }
.varm { background-color: var(--papir-varm); }

/* ── knapp ────────────────────────────────────────────────────────────── */
.knapp { display: inline-block; font-family: var(--sans); font-weight: 500;
         font-size: 1rem; text-decoration: none; white-space: nowrap;
         background: var(--blekk); color: var(--papir);
         border: 1px solid var(--blekk); border-radius: var(--r-2);
         padding: var(--s-3) var(--s-6);
         transition: background var(--dur-kvikk) var(--kvikk),
                     color var(--dur-kvikk) var(--kvikk),
                     transform var(--dur-kvikk) var(--kvikk); }
.knapp:hover { background: transparent; color: var(--blekk); text-decoration: none; }
.knapp:active { transform: translateY(1px) scale(0.985); }
.knapp:focus-visible { outline: 2px solid var(--aksent); outline-offset: 3px; }
.mork .knapp { background: var(--lys); color: var(--papir-mork); border-color: var(--lys); }
.mork .knapp:hover { background: transparent; color: var(--lys); }

/* ── App Store-merket ─────────────────────────────────────────────────────
   Apples offisielle artwork, uendret. Apples retningslinjer: merket skal ikke
   omtegnes, omfarges, roteres eller strekkes — kun skaleres proporsjonalt, og
   det skal ha fritt rom rundt seg på minst 1/4 av høyden. Derfor ingen
   bakgrunn, ingen ramme, ingen hover-farge — bare en lett opasitet.
   Sort merke på lyst papir; .mork bytter til det hvite. */
.merket { display: inline-block; line-height: 0; padding: 0; border: 0;
          text-decoration: none; border-radius: 8px;
          transition: opacity var(--dur-kvikk) var(--kvikk); }
.merket img { display: block; width: 140px; height: auto; }
.merket:hover { opacity: 0.82; text-decoration: none; }
.merket:focus-visible { outline: 2px solid var(--aksent); outline-offset: 4px; }

/* FØR LANSERING: merket vises, men er ikke klikkbart — appen finnes ikke ennå.
   Dempet så det leser som «kommer», ikke som en knapp som ikke virker. */
.merket.venter { opacity: 0.42; cursor: default; }
.merket.venter:hover { opacity: 0.42; }

/* ── 1 · hero ─────────────────────────────────────────────────────────── */
.topplinje { display: flex; align-items: baseline; justify-content: space-between;
             padding: var(--s-5) 0 0; }
.navn { font-family: var(--sans); font-weight: 500; font-size: 12px;
        letter-spacing: 0.15em; text-transform: uppercase; }
.hero { padding: var(--s-7) 0 var(--s-8); }
.eyebrow { font-family: var(--mono); font-weight: 500; font-size: 10.5px;
           letter-spacing: 0.14em; text-transform: uppercase; color: var(--kall);
           margin-bottom: var(--s-5); }
.hero h1 { max-width: 15ch; margin-bottom: var(--s-5); }
.hero h1 .andre { color: var(--kall); display: block; }
.brod { font-size: 1rem; line-height: 1.55; color: var(--dempet);
        max-width: 42ch; margin-bottom: var(--s-6); }
.cta { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
       margin-bottom: var(--s-5); }
.krav { font-size: 0.86rem; color: var(--svak); }

/* beviset — sanntid i sin rette rolle: under påstanden, ikke som overskrift */
.bevis { border-top: 1px solid var(--hair); padding-top: var(--s-4); max-width: 34rem; }
.bevis-rad { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
             margin-top: var(--s-2); }
.bevis-ord { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--treff); }
.bevis-detalj { font-size: 0.84rem; color: var(--dempet); min-width: 0; }
/* heroen viser RESULTATET (ordet + én linje). Dom-skalaen forklarer SYSTEMET og
   hører hjemme i regnskapsseksjonen — ellers blir beviset tyngre enn løftet. */
.bevis .graf, .bevis .graf-tekst { display: none; }
.bevis .blokk-verdi { font-size: 1.5rem; }
.bevis .blokk-under { margin-top: var(--s-2); }

/* skjermbildet — ekte opptak, skjermens egen radius. ingen tegnet ramme. */
.skjerm { margin: var(--s-7) auto 0; max-width: 280px;
          animation: legg-seg var(--dur) var(--fjaer) both; }
.skjerm img, .flate img { display: block; width: 100%; height: auto; border: none;
                          border-radius: var(--r-skjerm); }
.skjerm img { box-shadow: 0 1px 2px rgba(34,42,60,0.06), 0 8px 24px rgba(34,42,60,0.10),
                          0 24px 60px rgba(34,42,60,0.10); }
@keyframes legg-seg { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── 2 · regnskapet (mørkt papir = appens analyseflate) ───────────────── */
.fasit { margin-top: var(--s-7); }
.fasit-rad { display: flex; gap: var(--s-7); flex-wrap: wrap; margin: var(--s-4) 0 var(--s-6); }
.fasit-tall { display: flex; flex-direction: column; gap: var(--s-2); }
/* General Sans, ikke Old Standard — samme valg som appen tar for sine
   baselinje-tall (docs/DESIGN.md:79). Old Standard er høy/lav-tallenes alene. */
.fasit-n { font-family: var(--sans); font-weight: 400; font-size: clamp(2.6rem, 12vw, 4rem);
           line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
           color: var(--lys); }
.fasit-n.treff-blink { color: var(--treff-lys); }
.fasit-n.treff-bom { color: var(--kall); }
.fasit-ord { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
             text-transform: uppercase; color: var(--lys-svak); }
.fasit-bom { border-top: 1px solid var(--hair-lys); padding-top: var(--s-4);
             font-size: 0.9rem; color: var(--lys-2); max-width: 42rem; }
.fasit-bom-merke { display: block; font-family: var(--mono); font-size: 10px;
                   letter-spacing: 0.13em; text-transform: uppercase;
                   color: var(--lys-svak); margin-bottom: var(--s-2); }

/* ── 3 · sjekk ditt sted ──────────────────────────────────────────────────
   Var tre løsrevne komponenter uten forklaring. Nå en nummerert 1-2-3 der
   velgeren driver alle tre panelene samtidig, og leseren velger selv
   hvilket som står fram. */
.velger-rad { display: flex; align-items: center; gap: var(--s-3);
              flex-wrap: wrap; margin: var(--s-5) 0 var(--s-7); }

/* VEKSLEREN — én stor, to små. Tre like store bokser etter hverandre er
   statisk uansett om de er nummerert; her velger leseren hva som står fram,
   og de to andre venter som små kort. Radioknapper + søskenselektorer, så det
   virker uten JS. */
.veksler { margin-top: var(--s-6); }

.scene { min-height: 12rem; }
.panel { display: none; }
#v-1:checked ~ .scene [data-panel="1"],
#v-2:checked ~ .scene [data-panel="2"],
#v-3:checked ~ .scene [data-panel="3"] {
  display: block;
  animation: bytt var(--dur-kvikk) var(--kvikk) both;   /* appens egen fjær */
}
.panel-hva { font-size: 0.9rem; color: var(--dempet); max-width: 40ch;
             margin-bottom: var(--s-5); }

/* de to som ikke er valgt — små, ventende, klikkbare */
/* MOBIL: én kolonne, tittel og verdi på samme linje. Tre kolonner på 375 px
   ga ~100 px per kort, og da brakk «samstemte» midt i ordet. */
.valg { display: grid; grid-template-columns: 1fr;
        gap: var(--s-3); margin-top: var(--s-7); }
.valg label { display: flex; align-items: baseline; justify-content: space-between;
              gap: var(--s-4); cursor: pointer; padding: var(--s-3) var(--s-4);
              border: 1px solid var(--hair); border-radius: var(--r-2);
              background: transparent;
              transition: border-color var(--dur-kvikk) var(--kvikk),
                          background var(--dur-kvikk) var(--kvikk),
                          transform var(--dur-kvikk) var(--kvikk); }
.valg label:hover { border-color: var(--dempet); }
.valg label:active { transform: translateY(1px); }
.valg-tittel { display: block; font-weight: 500; font-size: 0.82rem; line-height: 1.2;
               color: var(--dempet); }
/* den faktiske verdien — det er DEN som gjør kortet til innhold og ikke en fane */
/* ÉN teksttype nedover høyre kolonne. Tidligere sto høy/lav i Old Standard,
   «samstemte» i Erode og reserven i sans — tre snitt i samme stolpe ble uroligt.
   Old Standard er dermed også tilbake til å gjelde KUN det store høy/lav-tallet
   i panelet, ikke miniatyren.
   Ingen overflow-wrap: anywhere — verdiene er korte ord som skal stå hele. */
.valg-verdi, .valg-hint {
  display: block; font-family: var(--serif); font-style: normal;
  font-size: 1.05rem; line-height: 1.15; text-align: right; min-width: 0;
}
.valg-verdi { color: var(--blekk); }
.valg-hint { color: var(--svak); }          /* reserven: samme snitt, lavere valør */
.valg-verdi:empty { display: none; }
.valg-verdi:not(:empty) + .valg-hint { display: none; }

/* den valgte merkes tydelig — blekk-fylt, som appens aktive chip */
#v-1:checked ~ .valg label[for="v-1"],
#v-2:checked ~ .valg label[for="v-2"],
#v-3:checked ~ .valg label[for="v-3"] {
  background: var(--blekk); border-color: var(--blekk); cursor: default;
}
#v-1:checked ~ .valg label[for="v-1"] .valg-verdi,
#v-2:checked ~ .valg label[for="v-2"] .valg-verdi,
#v-3:checked ~ .valg label[for="v-3"] .valg-verdi { color: var(--papir); }
#v-1:checked ~ .valg label[for="v-1"] .valg-tittel,
#v-2:checked ~ .valg label[for="v-2"] .valg-tittel,
#v-3:checked ~ .valg label[for="v-3"] .valg-tittel,
#v-1:checked ~ .valg label[for="v-1"] .valg-hint,
#v-2:checked ~ .valg label[for="v-2"] .valg-hint,
#v-3:checked ~ .valg label[for="v-3"] .valg-hint { color: rgba(241, 239, 235, 0.62); }

/* tastatur: radioknappen er skjult, så fokusringen må vises på etiketten */
#v-1:focus-visible ~ .valg label[for="v-1"],
#v-2:focus-visible ~ .valg label[for="v-2"],
#v-3:focus-visible ~ .valg label[for="v-3"] {
  outline: 2px solid var(--aksent); outline-offset: 2px;
}

/* bytte av sted skal FØLES — appens egen fjær, ikke en fade */
.blokk-bakt { animation: bytt var(--dur-kvikk) var(--kvikk) both; }
@keyframes bytt { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sted-velg { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
             color: var(--blekk); background: transparent; border: 1px solid var(--hair);
             border-radius: var(--r-1); padding: var(--s-2) 28px var(--s-2) var(--s-3);
             cursor: pointer; appearance: none; -webkit-appearance: none;
             text-transform: uppercase;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%235a6171'/%3E%3C/svg%3E");
             background-repeat: no-repeat; background-position: right 10px center; }
.sted-velg:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }

.blokker { display: grid; gap: var(--s-7); }
.blokk-merke { font-family: var(--mono); font-weight: 500; font-size: 10px;
               letter-spacing: 0.13em; text-transform: uppercase;
               color: var(--svak); margin-bottom: var(--s-2); }
.blokk-verdi { font-family: var(--serif); font-size: clamp(1.7rem, 6vw, 2.3rem);
               line-height: 1.1; letter-spacing: -0.02em; }
.blokk-verdi.kall { color: var(--kall); }
.treff-blink { color: var(--treff); }
.treff-bom { color: var(--bom); }
.blokk-under { font-size: 0.85rem; line-height: 1.5; color: var(--dempet); margin-top: var(--s-3); }
.blokk-fallback { font-family: var(--serif); font-size: 1.05rem; color: var(--dempet); }
.blokk:has(.blokk-bakt) .blokk-fallback { display: none; }
.graf { display: block; width: 100%; height: auto; margin-top: var(--s-4); }
.graf-puls { height: 30px; }
.graf-mnd { height: 68px; }
.graf-tekst { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.11em;
              text-transform: uppercase; color: var(--svak); margin-top: var(--s-2); }
.dekning { font-size: 0.86rem; color: var(--dempet); margin-top: var(--s-7); }

/* ── 4 · hva du får ───────────────────────────────────────────────────── */
.varsler { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.varsel { border-top: 1px solid var(--hair); padding-top: var(--s-4); }
.varsel p { font-size: 0.9rem; color: var(--dempet); margin-top: var(--s-2); }

/* ── 5 · tre flater ───────────────────────────────────────────────────── */
.flater { display: grid; gap: var(--s-6); justify-items: center; margin-top: var(--s-6); }
.flate { max-width: 200px; }
.flate img { box-shadow: 0 1px 2px rgba(34,42,60,0.05), 0 6px 18px rgba(34,42,60,0.07); }
.flate h3 { margin: var(--s-4) 0 var(--s-2); }
.flate p { font-size: 0.84rem; line-height: 1.45; color: var(--dempet); }

/* ── 6 · personvern + kilder · lav prominens, tett ────────────────────── */
.fin { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
.fin h3 { font-family: var(--sans); font-weight: 500; font-size: 0.95rem;
          letter-spacing: 0; margin-bottom: var(--s-2); }
.fin p { font-size: 0.88rem; color: var(--dempet); }

/* ── 7 · avslutning ───────────────────────────────────────────────────── */
.slutt { text-align: center; }
.slutt h2 { margin-bottom: var(--s-4); }
.slutt .brod { margin: 0 auto var(--s-6); }
.slutt .cta { justify-content: center; }

/* ── bunnen ───────────────────────────────────────────────────────────── */
footer { background-color: var(--papir-dyp); color: var(--lys-2);
         padding: var(--s-8) 0 var(--s-7); font-size: 0.88rem; }
footer a { color: #92acc1; }
footer p + p { margin-top: var(--s-3); }
.bakt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
        text-transform: uppercase; color: var(--lys-svak); margin-top: var(--s-6); }
.bakt:empty { display: none; }

/* MÅ FYLLES før publisering — skal skrike */
.fyll-inn { background: rgba(215,130,108,0.2); color: var(--bom); font-family: var(--mono);
            font-size: 0.82em; padding: 1px 4px; border-radius: 3px; }
footer .fyll-inn, .mork .fyll-inn { color: #f0a288; }

.kunlyd { position: absolute; width: 1px; height: 1px; overflow: hidden;
          clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 46rem) {
  body { font-size: 17.5px; }
  section { padding: var(--s-9) 0; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
          gap: var(--s-9); align-items: center; }
  .hero-tekst { grid-column: 1; }
  .skjerm { grid-column: 2; grid-row: 1; margin: 0; max-width: none; }
  .blokker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  /* fra tablet: tre kort ved siden av hverandre, tittel over verdi */
  .valg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .valg label { display: block; }
  .valg-verdi { text-align: left; margin-top: var(--s-2); }
  .flater, .varsler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .varsler { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skjerm { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

.slutt-note { margin-top: var(--s-4); }