/* klapp.css — felles stilark for klapp.as (forside, /musikere/, /byraaer/).
   Brand-verdier fra ../brand-klapp/SPESIFIKASJON.md. Endre tallene der, ikke her. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonter/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────── */
/* Tre tilstander: systemvalg (media query), og eksplisitt valg via
   data-theme på <html> (bryteren i toppen, lagret i localStorage). */
:root {
  color-scheme: light dark;
  --petrol:#0E7C99; --petrol-moerk:#0B637A; --petrol-lys:#54A6BB; --blekk:#07161c; --hvit:#FDFDFD;

  --grunn:#F4F7F8;                 /* sidegrunn */
  --kort:#FFFFFF;                  /* kortflate */
  --tekst:#07161c;
  --dus:#51646B;
  --linje:rgba(7,22,28,.12);
  --aksent-tekst:#0E7C99;          /* eyebrow, lenker i kort */
  --scene:#07161c;                 /* den mørke seksjonen */
  --scene-tekst:#FDFDFD;
  --scene-dus:rgba(253,253,253,.78);
  --scene-linje:rgba(253,253,253,.12);
  --hake:#54a6bb;
  --tlf-flate:rgba(14,124,153,.10);  /* bak telefonen i reisekortene (mobil) */
  /* Mangler: rødt ikon (Alizarin, som --danger-solid i appen) og mørkere
     rød tekst, så teksten holder kontrasten på hvitt. */
  --rod:#E74C3C;
  --rod-tekst:#B03A2E;

  --disp:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grunn:#0A1418;
    --kort:#182A32;
    --tekst:#FDFDFD;
    --dus:rgba(253,253,253,.68);
    --linje:rgba(253,253,253,.14);
    --aksent-tekst:#54A6BB;        /* petrol ren gir 3,8 mot blekk — for lavt til liten tekst */
    --scene:#07161c;
    --scene-tekst:#FDFDFD;
    --scene-dus:rgba(253,253,253,.78);
    --scene-linje:rgba(253,253,253,.12);
    --tlf-flate:rgba(84,166,187,.16);  /* grunnen er like mørk som telefonrammen */
    --rod:#E74C3C;
    --rod-tekst:#F5A59B;
  }
}
:root[data-theme="dark"] {
  --grunn:#0A1418;
  --kort:#182A32;
  --tekst:#FDFDFD;
  --dus:rgba(253,253,253,.68);
  --linje:rgba(253,253,253,.14);
  --aksent-tekst:#54A6BB;
  --scene:#07161c;
  --scene-tekst:#FDFDFD;
  --scene-dus:rgba(253,253,253,.78);
  --scene-linje:rgba(253,253,253,.12);
  --tlf-flate:rgba(84,166,187,.16);
  --rod:#E74C3C;
  --rod-tekst:#F5A59B;
}

/* ── Grunnlag ───────────────────────────────────────────────────────── */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* Brede vinduer: Jonathans skjerm er 2854 CSS-px bred. Med 16 px rot ble
   rammen på 1280 px et smalt bånd midt på. Alt er satt i rem, så rot-fonten
   skalerer hele siden — ikke bare teksten. */
@media (min-width:1800px) { html { font-size:18px; } }
@media (min-width:2300px) { html { font-size:21px; } }
@media (min-width:2700px) { html { font-size:24px; } }
body { margin:0; background:var(--grunn); color:var(--tekst); font-family:var(--sans);
       font-weight:400; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
strong { font-weight:600; }
/* Én ramme for alle sider — undersidene lå på 66rem og logoen hoppet mellom
   sidene. Bare sidepaddingen settes her: `padding:0 2rem` nullet en gang ut
   menyens topp og bunn (Jonathan, 2026-09-07). */
.ramme { max-width:80rem; margin:0 auto; padding-left:2rem; padding-right:2rem; }
@media (max-width:40rem) { .ramme { padding-left:1.4rem; padding-right:1.4rem; } }

/* ── Gult ───────────────────────────────────────────────────────────── */
/* Sunflower, som i appen, men bare som DETALJ: understreken under
   overtitlene og under aktiv side, hjertet i bunnen — og «Kom i gang»-knappen,
   den eneste gule flata. Aldri gul tekst på lys flate, aldri gule flater bak
   titler, aldri revne eller buede kanter (2026-09-29). */
:root {
  --gul:#F1C40F;
}

/* ── Topp ───────────────────────────────────────────────────────────── */
/* Lys topp på lys side. Aktiv side har samme rette gule understrek som overtitlene. */
header { position:sticky; top:0; z-index:20; background:var(--grunn); color:var(--tekst);
         border-bottom:1px solid var(--linje); }
.topp { display:flex; align-items:center; gap:1.2rem 2rem;
        padding-top:.8rem; padding-bottom:.8rem; min-height:4.2rem; }
.topp .merke { display:block; color:var(--tekst); flex:none; }
.topp .merke svg { height:2.1rem; width:auto; display:block; }
/* Ordmerket i SVG-en har hardkodet blekk-fyll. Fyll via CSS følger tekstfargen,
   så ordet blir hvitt i mørk modus uten at SVG-fila røres. Merket (rect) er petrol i begge. */
.topp .merke svg path { fill:currentColor; }
.hovedmeny { display:flex; align-items:center; gap:.3rem; margin-right:auto; }
.hovedmeny a, .topp .logg-inn { position:relative; white-space:nowrap; color:var(--dus);
  text-decoration:none; font-weight:500; font-size:.97rem; padding:.45rem .7rem; transition:color .15s; }
.hovedmeny a:hover, .topp .logg-inn:hover { color:var(--tekst); }
.hovedmeny a { text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:3px;
  text-underline-offset:.45em; text-decoration-skip-ink:none; transition:color .15s, text-decoration-color .15s; }
.hovedmeny a:hover { text-decoration-color:rgba(241,196,15,.5); }
.hovedmeny a[aria-current="page"] { color:var(--tekst); text-decoration-color:var(--gul); }
.topp-hoyre { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.topp .topp-knapp { border-radius:999px; padding:.55rem 1.15rem; font-size:.95rem; }
.tema { width:36px; height:36px; border-radius:999px; border:1px solid var(--linje); background:transparent;
  color:var(--tekst); display:grid; place-items:center; cursor:pointer; padding:0; }
.tema:hover { border-color:var(--aksent-tekst); color:var(--aksent-tekst); }
.tema svg { width:18px; height:18px; }
.tema .sol { display:none; }
:root[data-theme="dark"] .tema .sol { display:block; }
:root[data-theme="dark"] .tema .maane { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema .sol { display:block; }
  :root:not([data-theme="light"]) .tema .maane { display:none; }
}
:focus-visible { outline:2px solid var(--petrol-lys); outline-offset:3px; }

/* ── Setlista (menyen på smale skjermer) ───────────────────────────── */
/* Et ark med sidene i store bokstaver, «Logg inn» som ekstranummer.
   Erstatter lenkestripa under toppen, som ga to menyer i høyden.
   <details> virker uten skript. */
.meny { display:none; }
.meny summary { list-style:none; cursor:pointer; user-select:none; min-height:44px; display:grid; place-items:center;
  padding:0 1rem; border-radius:999px; border:1px solid var(--linje); font-weight:600; font-size:.95rem; color:var(--tekst); }
.meny summary::-webkit-details-marker { display:none; }
.meny summary:hover { border-color:var(--aksent-tekst); }
.meny .lukk, .meny[open] .aapne { display:none; }
.meny[open] .lukk { display:inline; }
.setliste-flate { position:fixed; inset:0; z-index:-1; background:var(--grunn); overflow-y:auto;
  padding:calc(4.2rem + 1.6rem) 1.4rem 2.4rem; display:grid; align-content:start; justify-items:center; }
.setliste-ark { position:relative; width:min(100%,24rem); background:var(--kort); color:var(--tekst);
  border:1px solid var(--linje); border-radius:4px;
  padding:1.8rem 1.6rem 1.6rem; transform:rotate(-1deg); box-shadow:0 14px 34px rgba(7,22,28,.14);
  display:flex; flex-direction:column; animation:ark-inn .38s cubic-bezier(.4,0,.3,1) both; }
.setliste-ark a { color:inherit; text-decoration:none; font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem,8.4vw,2.3rem); letter-spacing:-.02em; line-height:1.05; padding:.42rem 0;
  border-bottom:1.5px solid var(--linje); }
/* Siden du står på: samme gule understrek som overtitlene. */
.setliste-ark a[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--gul); text-decoration-thickness:4px;
  text-underline-offset:.2em; text-decoration-skip-ink:none; }
.setliste-ark .ekstra { margin:1.3rem 0 .1rem; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dus); }
.setliste-ark .ekstra + a { border-bottom:0; color:var(--aksent-tekst); }
@keyframes ark-inn { from { opacity:0; transform:translateY(-14px) rotate(-2.5deg); } }
body:has(.meny[open]) { overflow:hidden; }

@media (max-width:56rem) {
  .hovedmeny, .topp .logg-inn { display:none; }
  /* Mens heltens «Kom i gang» er på skjermen, står ikke den samme knappen i
     toppen også. Klassen settes av skriptet nederst på sider med en slik helt;
     uten skript står toppknappen alltid. */
  .topp .topp-knapp { transition:opacity .2s, visibility .2s; }
  .helt-knapp-synlig .topp .topp-knapp { opacity:0; visibility:hidden; }
  .meny { display:block; }
  .topp { gap:.6rem; }
}
@media (max-width:40rem) {
  .topp .merke svg { height:28px; }
  .topp .topp-knapp { padding:.5rem .95rem; font-size:.92rem; }
  .topp-hoyre { gap:.45rem; }
}
/* Smale telefoner: temaknappen viker for «Meny» og hovedknappen; siden følger
   da telefonens lys/mørk-innstilling. */
@media (max-width:26rem) {
  header .tema { display:none; }
  .topp .merke svg { height:24px; }
  .meny summary { padding:0 .8rem; }
}
@media (max-width:22rem) {
  .topp .topp-knapp { padding:.45rem .7rem; font-size:.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .setliste-ark { animation:none; }
  .hovedmeny a { transition:none; }
}

/* Linjeskift: overskrifter balanseres, og brødtekst unngår ett ord alene på
   siste linje (Jonathan 2026-09-30, /musikere). Nettlesere uten støtte
   bryter som før. */
h1, h2, h3 { text-wrap:balance; }
p, li, td, th, dd { text-wrap:pretty; }

/* ── Knapper og lenker ──────────────────────────────────────────────── */
.knapp { display:inline-block; background:var(--petrol); color:var(--hvit);
  font-family:var(--disp); font-weight:600; font-size:1rem; text-decoration:none;
  padding:.65rem 1.4rem; border-radius:10px; transition:background .15s, transform .15s; }
.knapp:hover { background:var(--petrol-moerk); transform:translateY(-1px); }
.knapp.stor { font-size:1.1rem; padding:.85rem 1.8rem; }
.knapp.omvendt { background:var(--hvit); color:var(--petrol); }
.knapp.omvendt:hover { background:#fff; }
.knapp.ramme-knapp { background:transparent; color:var(--aksent-tekst); border:1.5px solid var(--linje); }
.knapp.ramme-knapp:hover { background:var(--kort); border-color:var(--aksent-tekst); }
/* Butikkmerkene (App Store / Google Play): egne, i sidens form — like store,
   pille som «Kom i gang». Mørk flate på lys grunn, glass på fotoet i toppen.
   Ellers står de i bunnens høyre kolonne (.fot-app). */
.butikkmerke { display:inline-flex; align-items:center; gap:.55rem; height:2.6rem;
  padding:0 1rem 0 .8rem; border-radius:999px; text-decoration:none; color:var(--hvit);
  background:var(--blekk); border:1px solid rgba(253,253,253,.16);
  transition:background .15s, border-color .15s, transform .15s; }
.butikkmerke:hover { transform:translateY(-1px); border-color:rgba(253,253,253,.42); }
.butikkmerke:focus-visible { outline:2px solid var(--petrol-lys); outline-offset:3px; }
.butikkmerke .ikon { width:1.2rem; height:1.2rem; flex:none; }
.butikkmerke span { display:flex; flex-direction:column; font-family:var(--disp); font-weight:600;
  font-size:.9rem; line-height:1.05; letter-spacing:-.005em; white-space:nowrap; }
.butikkmerke small { font-size:.6rem; font-weight:500; letter-spacing:.01em; opacity:.72; }
.hero-scene .butikkmerke { background:rgba(7,22,28,.42);
  border-color:rgba(253,253,253,.28); -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4); }
.hero-scene .butikkmerke:hover { background:rgba(7,22,28,.62); border-color:rgba(253,253,253,.5); }
@media (pointer:coarse) { .butikkmerke { min-height:44px; } }
.lenke { color:inherit; font-weight:500; text-underline-offset:4px; }
.lenke:hover { color:var(--aksent-tekst); }

/* Telefonrammen — samme mørke ramme i begge moduser, det er en gjenstand, ikke en flate */
.tlf { width:min(72vw,19rem); border-radius:40px 40px 0 0; border:9px solid #0a1418;
  border-bottom:0; background:#0a1418; overflow:hidden;
  box-shadow:0 24px 60px rgba(4,20,26,.45); }
.tlf.hel { border-radius:40px; border-bottom:9px solid #0a1418;
  box-shadow:0 18px 48px rgba(4,20,26,.28); }
.tlf img { display:block; width:100%; height:auto; }

/* ── Forsiden: et år i Klapp ────────────────────────────────────────
   Hvert kapittel har sin egen grunn, så siden ikke går i ett: konsertfoto
   → lys reise med telefon → studiofoto → lys liste → vinyl → priser. */

/* Scenen: konsertfoto bak, naturlige farger, mørkt bare der teksten står. */
.hero-scene { position:relative; background:var(--blekk); color:var(--hvit); overflow:hidden; isolation:isolate; }
.hero-scene .foto { position:absolute; inset:0; z-index:-2; }
.hero-scene .foto img { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block;
  animation:kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform:scale(1); } to { transform:scale(1.08); } }
.hero-scene::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(7,22,28,.9) 0%, rgba(7,22,28,.7) 38%, rgba(7,22,28,.2) 68%, rgba(7,22,28,.35) 100%),
             linear-gradient(0deg, rgba(7,22,28,.85) 0%, transparent 40%); }
.hero-scene-indre { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3rem; align-items:center;
  padding-top:5rem; padding-bottom:7.5rem; min-height:min(88vh,760px); }
@media (max-width:52rem) { .hero-scene-indre { grid-template-columns:1fr; padding-top:3rem; padding-bottom:5.5rem; min-height:0; } }
/* På mobil ligger teksten over hele bildet, og «stemmer» i petrol-lys gikk i
   ett med lysstrålene. Dekket er jevnt mørkt der, bildet blir bakgrunn. */
@media (max-width:52rem) {
  .hero-scene::before { background:linear-gradient(180deg, rgba(7,22,28,.84) 0%, rgba(7,22,28,.74) 50%, rgba(7,22,28,.9) 100%); }
  .hero-scene h1 em { color:#7CC3D6; }
}
/* Appen i hero: kvitteringsløkka i en telefon, svakt vippet, svever. */
/* Telefonen skalerer i rem som resten (en px-grense ga en liten telefon
   langt ute til høyre på en bred skjerm) og står midt i sin kolonne. */
.hero-tlf { justify-self:center; align-self:center; perspective:1400px; }
.hero-tlf .tlf { width:min(30vw,22rem); transform:rotate(-4deg); animation:sveve 7s ease-in-out infinite;
  box-shadow:0 40px 90px rgba(4,20,26,.6); }
@keyframes sveve { 0%,100% { transform:rotate(-4deg) translateY(0); } 50% { transform:rotate(-4deg) translateY(-10px); } }
/* Mobil: løkka står under teksten og knappene, rett og uten sveving, så
   «Kom i gang» fortsatt er det første man ser. */
@media (max-width:52rem) {
  .hero-tlf { margin-top:.5rem; }
  .hero-tlf .tlf { width:min(68vw,17rem); transform:none; animation:none; border-width:7px; border-radius:32px;
    box-shadow:0 24px 60px rgba(4,20,26,.55); }
}
/* Undersidene: samme scene, lavere, uten telefon. */
.hero-scene.liten .hero-scene-indre { grid-template-columns:minmax(0,1fr); min-height:min(62vh,560px); padding-top:4.5rem; padding-bottom:5rem; }
.hero-scene.liten h1 { font-size:clamp(2.4rem,5.4vw,4.4rem); max-width:16ch; }
/* Fokuspunkt per foto: musikeren står midt i scenebildet, øvingslokalet er
   jevnt, miksepulten har målerne øverst. */
body.forside .hero-scene .foto img { object-position:center 40%; }
.hero-scene.trompet .foto img { object-position:center 45%; }
.hero-scene.miks .foto img { object-position:center 35%; }
.hero-scene.publikum .foto img { object-position:center 40%; }
.hero-scene h1 { font-family:var(--disp); font-weight:600; letter-spacing:-.035em;
  font-size:clamp(3rem,7.2vw,6rem); line-height:.95; margin:0 0 1.3rem; text-wrap:balance; max-width:12ch; }
.hero-scene h1 em { font-style:normal; color:var(--petrol-lys); }
.hero-scene p.ing { font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:30rem; margin:0 0 1.8rem; color:rgba(253,253,253,.85); line-height:1.5; }
.hero-scene .cta { display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; margin-bottom:1.4rem; }
.hero-scene .cta .lenke { color:var(--hvit); }
.hero-scene .cta .lenke:hover { color:var(--petrol-lys); }
.hero-scene .tillit { font-size:.92rem; font-weight:500; color:rgba(253,253,253,.66); margin:0; }
.hero-scene .knapp.omvendt { background:var(--hvit); color:var(--blekk); }
.hero-scene .knapp.omvendt:hover { background:#fff; }
.bla { position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:1;
  font-size:.88rem; font-weight:500; color:rgba(253,253,253,.66);
  display:grid; justify-items:center; gap:.4rem; text-decoration:none; }
.bla svg { width:16px; height:16px; animation:dupp 1.8s ease-in-out infinite; }
@keyframes dupp { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }

/* Reisen: stegene til venstre, telefonen står stille til høyre og bytter skjerm.
   På mobil er det ingen plass til en telefon som står stille ved siden av
   teksten: den lå over stegene, så man så enten telefonen (og bare første
   skjerm) eller teksten. Der blir stegene en karusell av kort, hvert med sin
   egen skjerm, og setlista under er knappene (Jonathan, 2026-09-17). */
.reise { padding:5.5rem 0 5rem; }
.reise-hode { max-width:44rem; margin-bottom:3.5rem; }
.reise-hode .ingress { margin-bottom:0; }
.reise-indre { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:4rem; align-items:start; }
.steg { display:grid; gap:0; position:relative; }
.steg-rad { display:grid; grid-template-columns:6.8rem minmax(0,1fr); gap:1.4rem; align-items:start;
  padding:2.2rem 0; border-top:1px solid var(--linje); min-height:min(40vh,340px); opacity:.55;
  transition:opacity .4s ease; }
.steg-rad.aktiv { opacity:1; }
/* Desktop: et steg kan trykkes på, så telefonen viser det (skriptet på forsiden). */
@media (min-width:52.01rem) { .steg-rad:not(.aktiv) { cursor:pointer; } .steg-rad:not(.aktiv):hover { opacity:.8; } }
/* nowrap + bredere kolonne: «02 · BOOKING» brøt over to linjer mens
   «01 · ØVING» sto på én. */
.steg-rad .mnd { font-family:var(--disp); font-weight:600; font-size:.8rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; text-transform:uppercase; color:var(--aksent-tekst); padding-top:.5rem; white-space:nowrap; }
.steg-rad h3 { font-size:clamp(1.5rem,3vw,2.3rem); letter-spacing:-.025em; line-height:1.05; margin:0 0 .6rem; }
.steg-rad p { color:var(--dus); margin:0; max-width:30rem; font-size:1.05rem; }
.steg-rad .lenke { display:inline-block; margin-top:.8rem; font-size:.95rem; }
.steg-skjerm { display:none; }
.kun-smal { display:none; }

.telefon-kolonne { position:sticky; top:5.5rem; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:1.2rem; padding-top:.4rem; }
.reise { background:var(--kort); border-bottom:1px solid var(--linje); }
/* Telefonen og setlista skal stå HELE på skjermen mens den er klistret:
   bredden følger også høyden (skjermbildet er 390×844, ~11rem går til toppen,
   rammen og setlista). Ellers ble bunnen og punktene kuttet på en laptop. */
.tlf.reise-tlf { width:min(64vw,22rem,calc((100svh - 11rem) * .462)); max-width:100%; position:relative; }
.tlf.reise-tlf .skjermer { position:relative; aspect-ratio:390/844; }
.tlf.reise-tlf img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top;
  opacity:0; transition:opacity .55s ease; }
.tlf.reise-tlf img.vises { opacity:1; }
/* Setlista under telefonen: fem staver (merkets motiv) som fylles steg for steg. */
.setliste-kolonne { width:min(64vw,22rem,calc((100svh - 11rem) * .462)); min-width:12rem; max-width:100%; }
/* Stavene er knapper: 44 px trykkflate, men streken er fortsatt 12 px. Den
   negative margen holder avstanden under telefonen som før. */
.setliste { display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; width:100%; margin:-16px 0; }
.setliste button { display:flex; align-items:center; height:44px; padding:0; border:0; background:none; cursor:pointer; }
.setliste button::before { content:""; display:block; width:100%; height:12px; background:var(--linje); border-radius:3px; transition:background .5s ease; }
.setliste button.fylt::before { background:var(--petrol); }
@media (hover:hover) {
  .setliste button:hover::before { background:var(--petrol-lys); }
  .setliste button.fylt:hover::before { background:var(--petrol-moerk); }
}
.setliste-navn { width:100%; font-weight:600; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--aksent-tekst); margin-top:.55rem; text-align:center; }
.setliste-navn span { display:none; }
.setliste-navn span.aktiv { display:block; }

@media (max-width:52rem) {
  .kun-bred { display:none; }
  .kun-smal { display:inline; }
  .reise-hode { margin-bottom:2rem; }
  .reise-indre { display:block; }
  .steg { display:flex; gap:.8rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    scrollbar-width:none; margin:0 -2rem; padding:0 2rem .4rem; scroll-padding-inline:2rem; }
  .steg::-webkit-scrollbar { display:none; }
  .steg-rad { flex:0 0 min(86%,22rem); display:flex; flex-direction:column; gap:0; padding:0; min-height:0;
    border:1px solid var(--linje); border-radius:22px; overflow:hidden; background:var(--grunn);
    scroll-snap-align:start; opacity:1; transform:none; }
  /* Telefonen stikker opp av kortet og kuttes rett av streken, så bildet og
     teksten får plass på skjermen samtidig. Toppen av skjermbildet er der
     innholdet står. */
  .steg-skjerm { display:flex; justify-content:center; height:18.5rem; padding:1.4rem 1rem 0; overflow:hidden;
    border-bottom:1px solid var(--linje); background:var(--tlf-flate); }
  .steg-skjerm .tlf { width:78%; border-width:7px; border-radius:30px 30px 0 0; box-shadow:0 10px 30px rgba(4,20,26,.22); }
  .steg-rad .mnd { padding:1.1rem 1.25rem 0; }
  .steg-rad > div:last-child { padding:.35rem 1.25rem 1.3rem; }
  .steg-rad h3 { font-size:1.4rem; }
  .steg-rad p { font-size:.97rem; line-height:1.55; }
  .telefon-kolonne { position:static; padding-top:1.2rem; gap:0; }
  .reise-tlf, .setliste-navn { display:none; }
}
@media (max-width:40rem) {
  .steg { margin:0 -1.4rem; padding-left:1.4rem; padding-right:1.4rem; scroll-padding-inline:1.4rem; }
}

/* Kapittel med foto: studio (opptakt), stage door (bak scenen) og vinyl (gullplata). */
.kapittel { position:relative; color:var(--hvit); overflow:hidden; isolation:isolate; background:var(--blekk); }
.kapittel .foto { position:absolute; inset:0; z-index:-2; }
.kapittel .foto img { width:100%; height:100%; object-fit:cover; display:block; }
.kapittel::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(7,22,28,.92) 0%, rgba(7,22,28,.55) 55%, rgba(7,22,28,.25) 100%); }
/* Bare topp og bunn: `padding:6.5rem 0 6rem` nullet rammas sidepadding, og
   på mobil lå «Bak scenen» og gullplata helt inntil venstre kant. */
.kapittel-indre { padding-top:6.5rem; padding-bottom:6rem; display:grid; gap:2.2rem; }
.kapittel { border-top:1px solid rgba(253,253,253,.08); border-bottom:1px solid rgba(253,253,253,.08); }
.kapittel.opptakt .kapittel-indre { padding-top:7rem; padding-bottom:6rem; }
.kapittel.bakscenen .foto img { object-position:center 45%; }
.kapittel.bakscenen::before { background:linear-gradient(90deg, rgba(7,22,28,.9) 0%, rgba(7,22,28,.7) 50%, rgba(7,22,28,.45) 100%); }
@media (max-width:52rem) { .kapittel.bakscenen::before { background:rgba(7,22,28,.86); } .kapittel.bakscenen .foto img { object-position:80% 45%; } }
.kapittel.bakscenen .tre-ord p { color:rgba(253,253,253,.8); }
.kapittel.opptakt::before { background:linear-gradient(90deg, rgba(7,22,28,.88) 0%, rgba(7,22,28,.6) 55%, rgba(7,22,28,.3) 100%); }
/* Resten av regnskapet: tonet bånd mellom reisen og lista, så flatene ikke går i ett */
.resten { background:var(--grunn); border-bottom:1px solid var(--linje); }
.resten h2 { max-width:22ch; }
.resten .tre-ord { margin-top:1.8rem; }
.resten .tre-ord div { border-top:1px solid var(--linje); }
.resten .tre-ord p { color:var(--dus); font-size:.98rem; margin:0; }
.kapittel h2 { color:var(--hvit); font-size:clamp(2rem,5vw,3.6rem); letter-spacing:-.03em; line-height:1; max-width:22ch; }
/* :not(.eyebrow) på avsnittsreglene i kapitler og bånd: `.kapittel p` og
   `.veksel p` har høyere spesifisitet enn `.eyebrow`, så overtitlene der ble
   1.08rem og grå mens de andre er .72rem petrol — «BAK SCENEN» og «01 ·
   SPILLEJOBBER» så ut som en annen type tekst (designgjennomgangen 2026-09-22). */
.kapittel p:not(.eyebrow) { color:rgba(253,253,253,.82); max-width:34rem; margin:0; font-size:1.08rem; }
.tre-ord { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; margin-top:.6rem; }
@media (max-width:52rem) { .tre-ord { grid-template-columns:1fr; } }
.tre-ord div { border-top:1px solid rgba(253,253,253,.25); padding-top:1rem; }
.tre-ord b { font-family:var(--disp); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.02em; display:block; margin-bottom:.35rem; }
.tre-ord p { font-size:.98rem; }
.kapittel.vinyl .kapittel-indre { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
@media (max-width:52rem) { .kapittel.vinyl .kapittel-indre { grid-template-columns:1fr; } }
.kapittel.vinyl::before { background:linear-gradient(90deg, rgba(7,22,28,.85) 0%, rgba(7,22,28,.45) 60%, rgba(7,22,28,.2) 100%); }
/* Gullplata: en ekte gullplate — gull med spor, og en etikett med året.
   Snurrer sakte inn når kapitlet kommer i bildet. */
.plate { width:min(50vw,15rem); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; justify-self:center;
  position:relative; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,228,150,.25);
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.18) 0 1px, transparent 1px 5px),
    conic-gradient(from 210deg, #b8891c, #f3d67a 18%, #a87c14 36%, #f7e3a1 52%, #b28a25 70%, #f1d27a 86%, #b8891c);
  transform:rotate(-40deg) scale(.96); opacity:.85; transition:transform 1.2s cubic-bezier(.4,0,.3,1), opacity .8s ease; }
.inn .plate { transform:rotate(0) scale(1); opacity:1; }
.plate::after { content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(255,255,255,.08) 35% 36%, transparent 37%),
             linear-gradient(135deg, rgba(255,255,255,.28), transparent 45%, rgba(0,0,0,.18)); pointer-events:none; }
.plate .etikett { width:44%; aspect-ratio:1; border-radius:50%; background:var(--blekk); color:var(--hvit);
  display:grid; place-items:center; text-align:center; padding:12%; box-sizing:border-box; overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,228,150,.6); z-index:1; }
.plate .etikett b { font-family:var(--disp); font-weight:600; font-size:clamp(1rem,1.5vw,1.4rem); letter-spacing:-.02em; line-height:1; display:block; }
.plate .etikett span { font-family:var(--mono); font-size:.42rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(253,253,253,.7); display:block; margin-top:.3rem; line-height:1.3; }

/* Hva Klapp gjør: studiofoto til venstre, typografiske rader til høyre. */
.liste-indre { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:3.5rem; align-items:start; }
@media (max-width:52rem) { .liste-indre { grid-template-columns:1fr; gap:2rem; } }
.liste-foto { position:sticky; top:6rem; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(4,20,26,.28); }
.liste-foto img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 50%; }
@media (max-width:52rem) { .liste-foto { position:static; } .liste-foto img { aspect-ratio:3/2; } }
.liste { border-top:1px solid var(--linje); }
.liste-rad { display:grid; grid-template-columns:52px minmax(0,1.1fr) minmax(0,1.4fr); gap:1.4rem; align-items:baseline;
  padding:1.5rem 0; border-bottom:1px solid var(--linje); }
/* Mobil: ikon og tittel på én linje, teksten rett under, tett. Radgapet på
   1,4 rem fra desktop lå også vertikalt og skjøv teksten et halvt skjermbilde ned. */
@media (max-width:46rem) {
  .liste-rad { grid-template-columns:40px 1fr; gap:.35rem .9rem; align-items:center; padding:1.15rem 0; }
  .liste-rad .ikon { width:40px; height:40px; border-radius:10px; }
  .liste-rad h3 { font-size:1.35rem; }
  .liste-rad p { grid-column:2; margin:0; font-size:.98rem; line-height:1.5; }
}
.liste-rad .ikon { width:44px; height:44px; border-radius:11px; background:var(--kort); border:1px solid var(--linje);
  color:var(--aksent-tekst); display:grid; place-items:center; align-self:center; }
.liste-rad .ikon svg { width:100%; height:100%; }
.liste-rad h3 { font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.02em; line-height:1.05; margin:0; }
.liste-rad p { color:var(--dus); margin:0; font-size:1rem; max-width:34rem; }
.liste-rad:hover .ikon { border-color:var(--aksent-tekst); }
/* Ikonene er appens egne menyikoner (kunde-nav.tsx: receipt, invoice, banknote,
   calendar). Alle fire får samme lille løft når raden kommer i bildet, og på hover. */
.liste-rad .ikon svg { width:22px; height:22px; }
.liste-rad.inn .ikon svg, .liste-rad:hover .ikon svg { animation:loeft .7s cubic-bezier(.4,0,.3,1) 1; }
@keyframes loeft { 0% { transform:translateY(0) scale(1); } 40% { transform:translateY(-3px) scale(1.12); } 100% { transform:translateY(0) scale(1); } }

/* Innfading når ting kommer i bildet (IntersectionObserver setter .inn). */
.fade { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.fade.inn { opacity:1; transform:none; }

/* ── Seksjoner og typografi ─────────────────────────────────────────── */
section { padding:4rem 0; }
.eyebrow { display:block; font-family:var(--disp); font-weight:600; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:2; color:var(--tekst); margin:0 0 1rem;
  /* Gult som detalj: en rett understrek, ikke en flate (2026-09-29).
     line-height 2: understreken står .45em under grunnlinjen, så med 1.3 skar
     den gjennom neste linje når overtittelen brytes på mobil. */
  text-decoration:underline; text-decoration-color:var(--gul); text-decoration-thickness:3px; text-underline-offset:.45em;
  text-decoration-skip-ink:none; width:fit-content; max-width:100%; justify-self:start; align-self:flex-start; }
h2 { font-family:var(--disp); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.15; margin:0 0 .6rem; text-wrap:balance; }
h3 { font-family:var(--disp); font-weight:600; }
.ingress { color:var(--dus); max-width:40rem; margin:0 0 2.2rem; }

/* ── Kort ───────────────────────────────────────────────────────────── */
/* Ett gutter for alle kort- og kolonnerutenett på siden: 1.6rem, knekk ved 52rem
   (samme som fremvisningens tre 50/50-seksjoner, Jonathan 2026-09-09). */
.kort-rad { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.kort-rad.tre { grid-template-columns:repeat(3,1fr); }
@media (max-width:52rem) { .kort-rad, .kort-rad.tre { grid-template-columns:repeat(2,1fr); } }
@media (max-width:30rem) { .kort-rad, .kort-rad.tre { grid-template-columns:1fr; } }
.kort { background:var(--kort); border:1px solid var(--linje); border-radius:14px; padding:1.3rem 1.2rem 1.2rem; }
/* Samme ikonboks som lista på forsiden: kontur i petrol på kortflate. Den var
   en fylt petrolfirkant med merkets staver, og tre av seks kort hadde nesten
   samme stolpefigur (designgjennomgangen 2026-09-22). */
.kort .ikon { width:44px; height:44px; border-radius:11px; background:var(--kort); border:1px solid var(--linje);
  color:var(--aksent-tekst); display:grid; place-items:center; margin-bottom:.9rem; padding:10px; }
.kort .ikon svg { width:100%; height:100%; }
.kort h3 { font-size:1.06rem; margin:0 0 .3rem; }
.kort p { font-size:.92rem; color:var(--dus); margin:0; }

/* ── Priser (modellen, ikke tallene) ────────────────────────────────── */
.pris-rad { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; align-items:stretch; }
@media (max-width:52rem) { .pris-rad { grid-template-columns:1fr; } }
/* To kort i stedet for tre. Sto inline i /fremvisning/ til byråsida trengte
   den samme raden — da hører den hjemme her. */
.pris-rad.to-like { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:52rem) { .pris-rad.to-like { grid-template-columns:1fr; } }
.pris { background:var(--kort); border:1px solid var(--linje); border-radius:16px;
  padding:1.5rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.pris.fremhevet { border-color:var(--petrol); box-shadow:0 0 0 1px var(--petrol) inset; }
.pris .eyebrow { margin:0; }
.pris h3 { font-size:1.35rem; margin:0; letter-spacing:-.01em; }
.pris .lead { color:var(--dus); margin:0; font-size:.98rem; }
/* align-content:start: lista er et rutenett som strekkes (flex:1) så knappene
   står på linje i bunnen. Uten den fordelte rutenettet høyden på RADENE, og
   kortet med færrest punkter fikk størst luft mellom dem. */
.pris ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; flex:1; align-content:start; }
.pris li { display:flex; gap:.6rem; align-items:baseline; font-size:.95rem; }
.pris li svg { width:13px; height:13px; flex:none; transform:translateY(1px); }
.pris .knapp { align-self:flex-start; margin-top:.4rem; }
.pris-fot { display:flex; gap:1rem 1.6rem; align-items:center; flex-wrap:wrap; margin-top:1.6rem;
  color:var(--dus); font-size:.95rem; }

/* ── Priser (tallene) ──────────────────────────────────────────────── */
/* Tabulærsifre: kolonnen i kalkulatoren rykker ellers sidelengs for hvert
   tastetrykk, og en sum som hopper ser ut som om den regner feil. */
.pris-tall { margin:.2rem 0 0; font-family:var(--disp); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.pris-tall b { font-size:2.6rem; font-weight:700; line-height:1; }
.pris-tall span { font-size:1rem; color:var(--dus); font-weight:500; }
/* Mva-merkingen står i fotnoten under prisene, ikke på hvert tall — samme
   sted som Fiken, Tripletex, Conta og Systima setter sin. En merkelapp per
   kort ble støy på tre kort som uansett viser samme pris. */
.pris-detalj { margin:.35rem 0 0; font-size:.9rem; color:var(--dus); }
.pris.fremhevet .pris-tall span, .pris.fremhevet .pris-detalj { color:rgba(253,253,253,.82); }

.kalk { margin-top:1.8rem; display:grid; grid-template-columns:1.1fr 1fr; gap:1.6rem;
  background:var(--kort); border:1px solid var(--linje); border-radius:16px; padding:1.5rem 1.4rem; }
@media (max-width:52rem) { .kalk { grid-template-columns:1fr; } }
.kalk h3 { font-size:1.15rem; margin:0 0 1rem; letter-spacing:-.01em; }
.kalk-felt { display:grid; gap:.3rem; margin-bottom:.8rem; }
.kalk-felt label { font-size:.9rem; color:var(--dus); }
.kalk select, .kalk input[type=number] { font:inherit; font-size:.98rem; color:var(--tekst);
  background:var(--grunn); border:1px solid var(--linje); border-radius:9px; padding:.5rem .65rem;
  width:100%; font-variant-numeric:tabular-nums; }
.kalk select:focus-visible, .kalk input:focus-visible { outline:2px solid var(--petrol); outline-offset:1px; }
.kalk-hake { display:flex; flex-direction:row; align-items:center; gap:.55rem; margin-top:1rem; }
.kalk-hake input { width:1.05rem; height:1.05rem; accent-color:var(--petrol); }
.kalk-hake label { color:var(--tekst); font-size:.98rem; }
.kalk-ut { border-left:1px solid var(--linje); padding-left:1.6rem; display:flex; flex-direction:column; }
@media (max-width:52rem) { .kalk-ut { border-left:0; border-top:1px solid var(--linje); padding:1.2rem 0 0; } }
.kalk-sum { margin:0; font-family:var(--disp); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kalk-sum b { font-size:3rem; font-weight:700; line-height:1; color:var(--aksent-tekst); }
.kalk-sum span { font-size:1rem; color:var(--dus); font-weight:500; }
.kalk-linjer { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.4rem; align-content:start;
  font-size:.93rem; font-variant-numeric:tabular-nums; }
.kalk-linjer li { display:flex; justify-content:space-between; gap:1rem; color:var(--dus); }
.kalk-linjer b { color:var(--tekst); font-weight:600; }
.kalk-note { margin:1rem 0 0; font-size:.88rem; color:var(--dus); line-height:1.45; }
.kalk-note b { color:var(--tekst); }

.pris-info { margin:1.6rem 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
  font-size:.93rem; color:var(--dus); line-height:1.5; }
@media (max-width:52rem) { .pris-info { grid-template-columns:1fr; } }
.pris-info-kol { background:var(--kort); border:1px solid var(--linje); border-radius:16px; padding:1.2rem 1.3rem; }
.pris-info-kol { display:flex; flex-direction:column; }
.pris-info-bred { grid-column:1 / -1; }
.pris-info-bred .pris-hake { grid-template-columns:repeat(3,1fr); gap:.6rem 1.6rem; }
@media (max-width:64rem) { .pris-info-bred .pris-hake { grid-template-columns:repeat(2,1fr); } }
@media (max-width:40rem) { .pris-info-bred .pris-hake { grid-template-columns:1fr; } }
/* Merknaden står i bunnen så tabellene starter og slutter på samme høyde. */
.pris-merk { margin-top:auto !important; padding-top:.8rem; font-size:.88rem; }
.pris-info h3 { font-size:1.05rem; margin:0 0 .7rem; color:var(--tekst); letter-spacing:-.01em; }
.pris-info p { margin:0 0 .55rem; }
.pris-info p:last-child { margin-bottom:0; }
.pris-info b { color:var(--tekst); font-weight:600; }
.pris-tabell { width:100%; border-collapse:collapse; }
.pris-tabell td { padding:.45rem 0; border-bottom:1px solid var(--linje); vertical-align:baseline; }
.pris-tabell tr:last-child td { border-bottom:0; }
.pris-tabell td:last-child { text-align:right; padding-left:1rem; color:var(--tekst); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.pris-hake { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.pris-hake li { position:relative; padding-left:1.3rem; }
.pris-hake li::before { content:""; position:absolute; left:0; top:.42em; width:.75rem; height:.4rem;
  border-left:2.5px solid var(--hake); border-bottom:2.5px solid var(--hake); transform:rotate(-45deg); }

/* ── Scene (mørk seksjon) ───────────────────────────────────────────── */
.scene { background:var(--scene); color:var(--scene-tekst); }
.scene h2 { color:var(--scene-tekst); }
.scene .ingress { color:var(--scene-dus); }
.scene-indre { display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center;
  padding-top:4.2rem; padding-bottom:4.2rem; }
@media (max-width:52rem) { .scene-indre { grid-template-columns:1fr; } }
.scene ul { margin:0 0 1.8rem; padding:0; list-style:none; display:grid; gap:.65rem; }
.scene li { display:flex; gap:.7rem; align-items:baseline; color:rgba(253,253,253,.88); }
.scene li svg { width:14px; height:14px; flex:none; transform:translateY(1px); }
.scene-tlf { display:flex; gap:1.2rem; align-items:flex-start; }
.scene-tlf .tlf { width:min(38vw,14rem); }
.scene-tlf .tlf:last-child { margin-top:2.6rem; }
@media (max-width:52rem) { .scene-tlf { justify-content:center; } }
.scene .knapp.omvendt { background:var(--hvit); color:var(--blekk); }

/* ── Veksel (undersidene) ───────────────────────────────────────────
   Hvert bånd har sin egen grunn (grunn/kort om hverandre) så sidene ikke
   går i ett, og teksten er stor nok til å leses fra en armlengde. */
.baand { border-bottom:1px solid var(--linje); }
.baand:nth-of-type(even) { background:var(--kort); }
.veksel { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3rem; align-items:center;
  padding-top:3.4rem; padding-bottom:3.4rem; }
.baand:nth-of-type(even) .veksel > .tekst { order:2; }
@media (max-width:52rem) { .veksel { grid-template-columns:1fr; gap:1.6rem; padding-top:2.4rem; padding-bottom:2.4rem; }
  .baand:nth-of-type(even) .veksel > .tekst { order:0; } }
.veksel .tlf { width:min(56vw,19rem); justify-self:center; }

.veksel h2 { font-size:clamp(1.7rem,3.2vw,2.6rem); letter-spacing:-.025em; line-height:1.05; }
.veksel p:not(.eyebrow) { color:var(--dus); max-width:32rem; font-size:1.08rem; }
/* Punktliste i vekselen: de konkrete tingene, kort. */
.veksel ul.punkter { list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.5rem; max-width:32rem; }
.veksel ul.punkter li { position:relative; padding-left:1.1rem; font-size:.98rem; color:var(--tekst); line-height:1.45; }
.veksel ul.punkter li::before { content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--petrol); }
/* Faktabånd uten telefon: tre eller fire korte kolonner, som «tre ord» på forsiden. */
.fakta { padding-top:3.4rem; padding-bottom:3.4rem; }
.fakta .hode { max-width:44rem; margin-bottom:1.8rem; }
.fakta .hode p:not(.eyebrow) { color:var(--dus); font-size:1.08rem; margin:0; }
.fakta-rad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; }
.fakta-rad.fire { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:52rem) { .fakta-rad, .fakta-rad.fire { grid-template-columns:1fr 1fr; } }
@media (max-width:34rem) { .fakta-rad, .fakta-rad.fire { grid-template-columns:1fr; } }
.fakta-rad > div { border-top:1px solid var(--linje); padding-top:1rem; }
.fakta-rad .konto { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; color:var(--aksent-tekst); display:block; margin-bottom:.4rem; }
.fakta-rad b { font-family:var(--disp); font-weight:600; font-size:1.15rem; letter-spacing:-.01em; line-height:1.2; display:block; margin-bottom:.35rem; }
.fakta-rad p { color:var(--dus); margin:0; font-size:.96rem; }
/* Personlighetslaget på mørk scene: samme tre-ord-rutenett, dempet brødtekst. */
.scene .tre-ord { margin-top:1.8rem; }
.scene .tre-ord p { color:var(--scene-dus); }
.scene .tre-ord b { font-size:clamp(1.1rem,1.8vw,1.35rem); }
.scene-indre.med-tlf { grid-template-columns:minmax(0,1fr) auto; gap:3rem; }
@media (max-width:52rem) { .scene-indre.med-tlf { grid-template-columns:1fr; } }

/* ── Navnet ─────────────────────────────────────────────────────────── */
.navn { background:var(--petrol); color:var(--hvit); }
.navn-indre { display:grid; grid-template-columns:auto 1fr; gap:2.4rem; align-items:center;
  padding-top:3.6rem; padding-bottom:3.6rem; }
@media (max-width:46rem) { .navn-indre { grid-template-columns:1fr; gap:1.4rem; } }
.navn svg.m { width:120px; height:auto; color:var(--hvit); }
.navn h2 { color:var(--hvit); }
.navn p:not(.eyebrow) { color:rgba(253,253,253,.82); max-width:38rem; margin:.4rem 0 0; }

/* ── Merkeformer ────────────────────────────────────────────────────
   De to skrå stavene fra merket i stor skala, beskåret i kanten av flata.
   Ett grafisk språk hentet fra merket selv, ikke pynt: samme vinkel, samme
   proporsjon (44 × 9,7 i 100-boksen), bare størrelsen er ny. `en` viser
   én stav, `to` begge. Teksten ligger alltid over. */
.merkeform { position:absolute; pointer-events:none; color:var(--petrol); z-index:0; }
.merkeform.en rect:last-child { display:none; }
.har-merkeform { position:relative; overflow:hidden; isolation:isolate; }
.har-merkeform > :not(.merkeform) { position:relative; z-index:1; }
/* Stavene i NEDRE høyre hjørne, der kortet ikke har tekst. De sto øverst til
   høyre, 24rem store, og la seg over tittelen i midtkortet og over
   «BYRÅER» i etiketten på mobil (designgjennomgangen 2026-09-22). */
.pris .merkeform { width:11rem; height:11rem; right:-4.2rem; bottom:-4.2rem; top:auto; opacity:.18; }
.pris.fremhevet .merkeform { opacity:.3; }
.pris .merkeform.en { width:13rem; height:13rem; right:-5.4rem; bottom:-5.4rem; }
/* På petrol-flata: hvite staver, svakt, nede til venstre. */
.cta-slutt .merkeform { color:var(--hvit); opacity:.14; width:44rem; height:44rem; left:-14rem; bottom:-22rem; }
@media (max-width:52rem) { .pris .merkeform { width:9rem; height:9rem; right:-3.6rem; bottom:-3.6rem; top:auto; } .cta-slutt .merkeform { width:22rem; height:22rem; left:-8rem; bottom:-10rem; } }

/* ── Pille-knapp ────────────────────────────────────────────────────
   Knapp med pil i en sirkel i enden. Sirkelen tar motsatt farge av
   knappen, så den leses som en handling og ikke som pynt. */
.knapp.pille { display:inline-flex; align-items:center; gap:1rem; border-radius:999px; padding:.4rem .4rem .4rem 1.45rem; }
.knapp.pille.stor { padding:.5rem .5rem .5rem 1.7rem; }
.knapp.pille .pil { width:2.3rem; height:2.3rem; border-radius:999px; display:grid; place-items:center; flex:none;
  background:var(--hvit); color:var(--petrol); transition:transform .18s ease; }
.knapp.pille.stor .pil { width:2.6rem; height:2.6rem; }
.knapp.pille .pil svg { width:1.05rem; height:1.05rem; }
.knapp.pille:hover .pil { transform:translateX(3px); }
.knapp.pille.omvendt .pil, .cta-slutt .knapp.pille .pil, .hero-scene .knapp.pille .pil { background:var(--blekk); color:var(--hvit); }
.knapp.pille.ramme-knapp .pil { background:var(--aksent-tekst); color:var(--hvit); }

/* ── Kom i gang ─────────────────────────────────────────────────────
   60/30/10: lys flate dominerer, petrol og blekk støtter, Sunflower er
   aksenten. Aksenten går på ÉN handling — «Kom i gang» — og er derfor gul
   overalt, også der flata rundt (scene, pris, slutt-CTA) ellers gjør knappen
   hvit. Alle «Kom i gang» lenker til registreringen, så href-en er velgeren;
   !important fordi flatevariantene over har høyere spesifisitet.
   En side med en annen hovedhandling (fremvisningen: «Si hva du tenker»)
   merker den med .aksent. */
.knapp[href*="registrer-foretak"], .knapp.aksent { background:var(--gul) !important; color:var(--blekk) !important; }
.knapp[href*="registrer-foretak"]:hover, .knapp.aksent:hover { background:#E2B70C !important; }
.knapp.pille[href*="registrer-foretak"] .pil, .knapp.pille.aksent .pil { background:var(--blekk) !important; color:var(--hvit) !important; }
/* Hero: stavene bak telefonen, over fotoet. Fotoet gir stemning, stavene merket. */
/* Stavene ligger i bakgrunnen: mye større enn flata, svakt, så de leses som lys, ikke som en figur. */
.hero-scene .merkeform.hero-staver { width:min(140vw,110rem); height:min(140vw,110rem); right:-40vw; top:50%; transform:translateY(-52%); opacity:.16; z-index:0; }
.hero-scene-indre { position:relative; z-index:1; }
@media (max-width:52rem) { .hero-scene .merkeform.hero-staver { width:150vw; height:150vw; right:-55vw; top:50%; transform:translateY(-50%); opacity:.18; } }
.hero-scene.liten .merkeform.hero-staver { width:min(110vw,80rem); height:min(110vw,80rem); right:-30vw; opacity:.14; }
/* Stegetikettene: reisens setliste som små piller under knappene. */
/* Stegene som én stille linje. De var fem pille-knapper som alle lenket til
   samme anker og så ut som filtre man kunne velge (designgjennomgangen
   2026-09-22). «Følg en spillejobb» nederst i heroen er lenken. */
.steg-etiketter { font-weight:500; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(253,253,253,.7); margin:0 0 1.4rem; line-height:1.9; }
/* Priskortene: det fremhevede på petrol, de andre på kortflate, alle med staver. */
/* Det fremhevede kortet: petrol flate, men detaljene i BLEKK — eyebrow,
   tittel, haker og pilen — så det skiller seg fra de to ved siden av på
   mer enn fargen på flata (Jonathan, 2026-09-09: «mer sort skrift/detaljer»). */
.pris.fremhevet { background:var(--petrol); color:var(--hvit); border-color:transparent; box-shadow:none; }
.pris.fremhevet h3 { color:var(--hvit); }
.pris.fremhevet .lead { color:rgba(253,253,253,.88); }
.pris.fremhevet li svg { color:var(--blekk); }
.pris.fremhevet .merkeform { color:var(--hvit); }
.pris.fremhevet .knapp.omvendt { background:var(--blekk); color:var(--hvit); }
.pris.fremhevet .knapp.omvendt:hover { background:#0f2229; }
.pris.fremhevet .knapp.omvendt .pil { background:var(--hvit); color:var(--blekk); }
.pris .knapp.omvendt { background:var(--hvit); color:var(--petrol); }

/* ── Slutt-CTA og footer ────────────────────────────────────────────── */
/* Avslutningen på egen flate — petrol — så den ikke går i ett med prisene over. */
.cta-slutt { text-align:center; padding:5rem 0 5.4rem; background:var(--petrol); color:var(--hvit); }
.cta-slutt h2 { margin-bottom:1.4rem; color:var(--hvit); }
.cta-slutt .knapp { background:var(--hvit); color:var(--blekk); }
.cta-slutt .knapp:hover { background:#fff; }
.cta-slutt .lenke { color:var(--hvit); }
.cta-slutt .lenke:hover { color:rgba(253,253,253,.8); }
/* Undersidenes avslutning har en ingress — grå (--dus) på petrol var uleselig. */
.cta-slutt .ingress { color:rgba(253,253,253,.85); }
.cta-slutt .ingress .lenke { color:var(--hvit); }
footer { border-top:0; }
.cta-slutt .cta { display:flex; gap:1.1rem; justify-content:center; align-items:center; flex-wrap:wrap; }
/* Bunnen: lys som toppen, lenkene i tre kolonner + «Appen» (butikkmerkene og PC). */
footer { border-top:1px solid var(--linje); background:var(--grunn); color:var(--dus); padding:3rem 0 2.2rem; font-size:.95rem; }
.fot-kolonner { display:grid; grid-template-columns:repeat(3,minmax(0,13rem)); gap:2rem 3rem; }
.fot nav { display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; }
.fot nav b { color:var(--tekst); font-weight:600; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.5rem; }
footer a { color:inherit; text-decoration:none; padding:.3rem 0; }
footer a:hover { color:var(--aksent-tekst); text-decoration:underline; text-underline-offset:4px; }
.applaus { font-family:var(--disp); font-weight:600; letter-spacing:-.02em; color:var(--tekst);
  font-size:1.35rem; margin:2.6rem 0 .3rem; }
.applaus span { color:var(--gul); }
.fot-org { margin:0; font-size:.85rem; color:var(--dus); }
.fot-kolonner:has(.fot-app) { grid-template-columns:repeat(4,minmax(0,13rem)); }
.fot-app { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.fot-app b { color:var(--tekst); font-weight:600; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.35rem; }
footer a.butikkmerke { color:var(--hvit); padding:0 1rem 0 .8rem; min-width:9.4rem; }
footer a.butikkmerke:hover { color:var(--hvit); text-decoration:none; }
@media (max-width:40rem) {
  .fot-kolonner { grid-template-columns:1fr 1fr; }
  .fot a { min-height:44px; display:flex; align-items:center; padding:0; }
  .fot-kolonner:has(.fot-app) { grid-template-columns:1fr 1fr; }
  .fot-app { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .fot-app b { width:100%; }
  .fot a.butikkmerke { display:inline-flex; padding:0 1rem 0 .8rem; }
}

/* ── Bevegelse — «hel i ro, myk i bevegelse» ────────────────────────── */
.heleA { transform-box:fill-box; transform-origin:100% 50%;
         animation:heleA 7s cubic-bezier(.4,0,.3,1) infinite; }
.heleB { transform-box:fill-box; transform-origin:0% 50%;
         animation:heleB 7s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes heleA {
  0%,7% { transform:translateX(-11px) rotate(0); } 16% { transform:translateX(1.6px) rotate(0); }
  22%,34% { transform:translateX(0) rotate(0); } 44% { transform:translateX(0) rotate(24deg); }
  50% { transform:translateX(0) rotate(22deg); } 56% { transform:translateX(0) rotate(-4deg); }
  61% { transform:translateX(0) rotate(2deg); } 66%,84% { transform:translateX(0) rotate(0); }
  95%,100% { transform:translateX(-11px) rotate(0); } }
@keyframes heleB {
  0%,7% { transform:translateX(11px) rotate(0); } 16% { transform:translateX(-1.6px) rotate(0); }
  22%,34% { transform:translateX(0) rotate(0); } 44% { transform:translateX(0) rotate(24deg); }
  50% { transform:translateX(0) rotate(22deg); } 56% { transform:translateX(0) rotate(-4deg); }
  61% { transform:translateX(0) rotate(2deg); } 66%,84% { transform:translateX(0) rotate(0); }
  95%,100% { transform:translateX(11px) rotate(0); } }
.eq { transform-box:fill-box; transform-origin:center; animation:eqp 1.9s ease-in-out infinite; }
.eq1{animation-delay:0s}.eq2{animation-delay:.14s}.eq3{animation-delay:.28s}
.eq4{animation-delay:.42s}.eq5{animation-delay:.56s}
@keyframes eqp { 0%,100% { transform:scaleY(.6); } 30% { transform:scaleY(1.12); }
                 55% { transform:scaleY(.8); } 75% { transform:scaleY(1); } }

@media (max-width:46rem) {
  section { padding:2.8rem 0; }
  .scene-indre { padding-top:2.8rem; padding-bottom:2.8rem; gap:2rem; }
  .veksel { padding-top:2.2rem; padding-bottom:2.2rem; }
  .navn-indre { padding-top:2.6rem; padding-bottom:2.6rem; }
  .navn svg.m { width:84px; }
  .cta-slutt { padding:3.2rem 0 3.8rem; }
}
@media (prefers-reduced-motion: reduce) { .heleA,.heleB,.eq,.bla svg,.hero-scene .foto img,.liste-rad .ikon svg { animation:none !important; } .plate { transform:none; opacity:1; transition:none; } .fade { opacity:1; transform:none; transition:none; } .steg-rad { opacity:1; transform:none; } }

/* Mobil: telefonen kuttes rett av som i karusellen på forsiden — toppen av
   skjermen er der innholdet står. Hele telefoner i åtte bånd gjorde siden
   9 900 px lang på 390 px (designgjennomgangen 2026-09-22). */
@media (max-width:52rem) {
  .veksel .tlf.hel { max-height:22rem; border-bottom:0; border-radius:34px 34px 0 0; box-shadow:0 10px 30px rgba(4,20,26,.22); }
  .baand .veksel { padding-bottom:0; }
  .veksel .tlf.hel { margin-bottom:0; }
}

/* ── Friskere forside (2026-09-29) ─────────────────────────────────── */
/* Tittelen som plakat: større, tettere. Småtekstene rundt er vanlig tekst,
   ikke skrivemaskin-etiketter. */
body.forside .hero-scene h1 { font-size:clamp(3rem,6.3vw,6.2rem); line-height:.92; letter-spacing:-.05em; font-weight:700; }
.hero-scene .steg-etiketter { font-family:var(--sans); font-size:.92rem; font-weight:500; letter-spacing:0; text-transform:none; color:rgba(253,253,253,.66); }
/* Overtitlene er sorte på lyst og hvite på mørkt og petrol (2026-09-29). */
.hero-scene .eyebrow, .kapittel .eyebrow, .scene .eyebrow, .navn .eyebrow, .pris.fremhevet .eyebrow, .sml-hero .eyebrow { color:var(--hvit); }

/* ── I dag / I Klapp (forsiden og /fremvisning/) ───────────────────── */
/* Samme kolonner og knekk som de andre 50/50-seksjonene (1.6rem, 52rem).
   «I Klapp» skal se ut som svaret, ikke som et kort til. */
.foer-etter { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem; margin-top:2rem; }
@media (max-width:52rem) { .foer-etter { grid-template-columns:1fr; } }
.foer-etter > div { background:var(--kort); border:1px solid var(--linje); border-radius:16px; padding:1.5rem 1.4rem; }
.foer-etter .eyebrow { margin-bottom:.9rem; }
.foer-etter ul { margin:0; padding:0; list-style:none; display:grid; gap:.55rem; }
.foer-etter li { position:relative; padding-left:1.1rem; font-size:1rem; }
.foer-etter li::before { content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--linje); }
.foer-etter .etter li::before { background:var(--petrol); }
.foer-etter .foer { background:transparent; border-style:dashed; }
.foer-etter .foer li { color:var(--dus); }
.foer-etter .etter { border-color:var(--petrol); box-shadow:0 0 0 1px var(--petrol) inset; }

/* ── Sammenligningen ved prisene (generert, se scripts/klapp-site.ts) ─ */
.sml-forside { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:1.4rem 2.4rem; align-items:center;
  margin:1.6rem 0 0; background:var(--blekk); color:var(--hvit); border-radius:16px; padding:1.6rem 1.7rem; }
.sml-forside .stor { font-family:var(--disp); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:600; letter-spacing:-.03em; line-height:1; margin:0 0 .6rem; }
.sml-forside .stor small { font-size:.42em; font-weight:500; letter-spacing:0; color:rgba(253,253,253,.75); }
.sml-forside-tekst p:not(.stor) { color:rgba(253,253,253,.75); font-size:.95rem; margin:0 0 .9rem; }
.sml-forside .lenke { color:var(--hvit); }
.sml-forside .lenke:hover { color:var(--petrol-lys); }
.sml-forside-rader { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.6rem; }
.sml-forside-rader li { font-size:.92rem; color:rgba(253,253,253,.85); }
.sml-forside-rader li b { display:block; color:var(--hvit); font-weight:600; margin-bottom:.3rem; }
.sml-forside .duell { display:grid; gap:.35rem; }
.sml-forside .duell div { display:grid; grid-template-columns:5.8rem minmax(0,1fr) auto; gap:.6rem; align-items:center; }
.sml-forside .duell i { display:block; height:8px; border-radius:99px; background:rgba(253,253,253,.35); }
.sml-forside .duell .klapp i { background:var(--petrol-lys); }
.sml-forside .duell .tall { font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:52rem) { .sml-forside { grid-template-columns:1fr; } }
@media (max-width:30rem) { .sml-forside-rader { grid-template-columns:1fr; } .sml-forside { padding:1.3rem 1.2rem; } }

/* ── Trommebildet bak «Klar når du er» ─────────────────────────────── */
.cta-slutt.med-foto { position:relative; isolation:isolate; overflow:hidden; padding:7rem 0 7.4rem; }
@media (max-width:40rem) { .cta-slutt.med-foto { padding:4.4rem 0 4.8rem; } }
/* Utsnittet viser trommene, ikke ansiktet (Jonathan 2026-09-29). Smale
   skjermer får nesten hele bildet med «cover», så der zoomes det inn mot
   trommene nede til venstre. */
@media (max-width:52rem) { .cta-slutt.med-foto .foto img { transform:scale(1.9); transform-origin:22% 96%; } }
.cta-slutt.med-foto .foto { position:absolute; inset:0; z-index:-2; }
.cta-slutt.med-foto .foto img { width:100%; height:100%; object-fit:cover; object-position:center 88%; display:block; }
.cta-slutt.med-foto::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(11,99,122,.64); }

/* ── Heltetelefonen: kvitteringsløkka ────────────────────────────────
   Én historie på ti sekunder: foto av kvitteringen, Klapp leser den,
   «Ser riktig ut», og resultatet på Hjem går ned med kostnaden (1 000 kr
   eks. mva). Alt skaleres med telefonbredden (cqw). Grunnen er skjermbildet
   av Hjem; lagene over er skjult til skriptet setter data-steg, så uten
   skript eller med redusert bevegelse er telefonen som før. */
/* cqw i .lokke selv måles mot VIEWPORTEN (den er ikke sin egen container),
   så grunnstørrelsen settes på lagene under. */
.lokke { position:relative; container-type:inline-size; line-height:1.3;
  font-family:system-ui,-apple-system,sans-serif; color:#0b1a20; overflow:hidden; }
.lokke > img { display:block; width:100%; height:auto; }
.lokke .lag { position:absolute; inset:0; font-size:3.5cqw; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s; }
.lokke[data-steg="kamera"] .kamera-lag, .lokke[data-steg="funnet"] .kamera-lag, .lokke[data-steg="blits"] .kamera-lag,
.lokke[data-steg="leser"] .bilag-lag, .lokke[data-steg="fylt"] .bilag-lag,
.lokke[data-steg="trykk"] .bilag-lag, .lokke[data-steg="bokfort"] .bilag-lag,
.lokke:is([data-steg="start"],[data-steg="tapp"],[data-steg="kamera"],[data-steg="hjem"],[data-steg="oppdatert"]) .hjem-lag { opacity:1; visibility:visible; }
/* Hjem står under kameraet til det dekker skjermen (kamera-laget ligger over
   i DOM-en), så skjermbildet under aldri skinner gjennom i overgangen. */

/* Kamera */
/* Kameraet: en rendret kvittering på et trebord (foto/kvittering-bord-2.webp — nytt navn ved hver endring, /foto/* caches i 7 dager;
   kilden er scripts/kvittering-bord/render.html). Den skyves litt inn, som
   når telefonen finner fokus. */
.kamera-lag { background:#2a1d13; overflow:hidden; }
.kamera-lag::before { content:""; position:absolute; inset:0; background:url(/foto/kvittering-bord-2.webp) center/cover;
  transform:scale(1.1); transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.lokke:is([data-steg="kamera"],[data-steg="funnet"],[data-steg="blits"]) .kamera-lag::before { transform:scale(1); }
.kamera-lag::after { content:""; position:absolute; inset:0 0 auto; height:16%; background:linear-gradient(rgba(0,0,0,.55),transparent); }
.kamera-hint { position:absolute; top:6%; left:0; right:0; text-align:center; color:#fff; font-size:.95em; z-index:1; }
/* Søkeren finner kvitteringen, som dokumentskanneren i appen: hjørnene
   står løst, så smekker de inn på papirets hjørner og flata fylles. Hjørnene
   er målt i scripts/kvittering-bord/render.html (DOM-punkter i .kv etter
   transformen) — endres renderen, mål dem på nytt. */
.funn { position:absolute; inset:0; z-index:1; background:rgba(241,196,15,.2); opacity:0;
  clip-path:polygon(3% 6%, 97% 6%, 97% 76%, 3% 76%); transition:clip-path .55s cubic-bezier(.3,1.25,.4,1), opacity .3s; }
.funn-kant { position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:0; transition:opacity .25s; }
.funn-kant polygon { fill:none; stroke:#F1C40F; stroke-width:2.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.hj { position:absolute; z-index:2; width:1.15em; height:1.15em; margin:-.575em 0 0 -.575em; border-radius:50%; background:#fff;
  border:.22em solid #F1C40F; box-shadow:0 .2em .5em rgba(0,0,0,.35); opacity:0;
  transition:left .55s cubic-bezier(.3,1.25,.4,1), top .55s cubic-bezier(.3,1.25,.4,1), opacity .3s; }
.h1 { left:3%; top:6%; } .h2 { left:97%; top:6%; } .h3 { left:97%; top:76%; } .h4 { left:3%; top:76%; }
.lokke:is([data-steg="kamera"],[data-steg="funnet"],[data-steg="blits"]) .hj { opacity:1; }
.lokke:is([data-steg="funnet"],[data-steg="blits"]) .funn { opacity:1; clip-path:polygon(8.84% 13.01%, 79.83% 10.28%, 93.91% 65.8%, 16.11% 69.08%); }
.lokke:is([data-steg="funnet"],[data-steg="blits"]) .funn-kant { opacity:1; transition-delay:.45s; }
.lokke:is([data-steg="funnet"],[data-steg="blits"]) .h1 { left:8.84%; top:13.01%; }
.lokke:is([data-steg="funnet"],[data-steg="blits"]) .h2 { left:79.83%; top:10.28%; }
.lokke:is([data-steg="funnet"],[data-steg="blits"]) .h3 { left:93.91%; top:65.8%; }
.lokke:is([data-steg="funnet"],[data-steg="blits"]) .h4 { left:16.11%; top:69.08%; }
.utloser { position:absolute; z-index:1; bottom:5%; left:50%; width:17%; aspect-ratio:1; margin-left:-8.5%; border-radius:50%;
  border:.35em solid #fff; background:rgba(255,255,255,.25); box-shadow:inset 0 0 0 .3em rgba(0,0,0,.55); transition:transform .15s; }
.lokke[data-steg="blits"] .utloser { transform:scale(.88); background:#fff; }
.blits { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity .35s ease-out; }
.lokke[data-steg="blits"] .blits { opacity:.9; transition:opacity .08s; }

/* Bilaget */
.bilag-lag { background:#f4f5f5; display:flex; flex-direction:column; }
.app-topp { display:flex; align-items:center; gap:.7em; padding:1.3em 1.1em .9em; background:#eceeee; border-bottom:1px solid #dcdfe0; }
.app-topp .tilbake { font-size:1.9em; line-height:1; color:#0b1a20; }
.app-topp b { display:block; font-family:var(--disp); font-size:1.35em; line-height:1.1; }
.app-topp small { color:#5c6b70; font-size:.9em; }
.lese-kort { display:flex; gap:.9em; align-items:center; margin:1.2em 1em .5em; padding:.9em; background:#fff; border:1px solid #e2e5e6; border-radius:1em; }
.mini-kvittering { position:relative; width:3.2em; height:4.2em; flex:none; background:#fbfaf6; border:1px solid #ddd; padding:.45em .4em;
  display:flex; flex-direction:column; gap:.32em; overflow:hidden; transform:rotate(-3deg); }
.mini-kvittering i { display:block; height:.22em; background:#c9c6be; border-radius:1px; }
.mini-kvittering i.kort { width:55%; margin-left:auto; background:#8a877f; }
.skann { position:absolute; left:0; right:0; height:.25em; top:-10%; background:#0E7C99; box-shadow:0 0 .8em .25em rgba(14,124,153,.55); opacity:0; }
.lokke[data-steg="leser"] .skann { opacity:1; animation:skann 1.1s ease-in-out infinite alternate; }
@keyframes skann { from { top:-5%; } to { top:100%; } }
.lese-status { font-size:.85em; color:#5c6b70; position:relative; height:1.3em; }
.lese-status span { position:absolute; left:0; transition:opacity .3s; }
.lese-status .lest { opacity:0; color:#0E7C99; letter-spacing:.08em; text-transform:uppercase; font-size:.85em; top:.15em; }
.lese-total { font-family:Georgia,serif; font-weight:700; font-size:1.2em; opacity:0; transform:translateY(.3em); transition:opacity .4s, transform .4s; }
.lokke:not([data-steg="leser"]) .lese-status .leser { opacity:0; }
.lokke:not([data-steg="leser"]) .lese-status .lest { opacity:1; }
.lokke:not([data-steg="leser"]) .lese-total { opacity:1; transform:none; }
.skjema { margin:.5em 1em 0; padding:1.1em .95em; font-size:1.08em; background:#fff; border:1px solid #e2e5e6; border-radius:1em; display:flex; flex-direction:column; gap:1.05em; }
.skjema .to { display:grid; grid-template-columns:1fr 1fr; gap:.6em; }
.felt label { display:flex; justify-content:space-between; font-size:.82em; color:#3f4d52; margin-bottom:.3em; }
.felt label em { font-style:normal; color:#0E7C99; letter-spacing:.08em; text-transform:uppercase; font-size:.85em; opacity:0; transition:opacity .3s; }
.felt .boks { border:1px solid #d7dcdd; border-radius:.7em; padding:.55em .7em; min-height:2.35em; background:#fff; color:transparent;
  display:flex; align-items:center; justify-content:space-between; transition:background .35s, border-color .35s, color .35s; }
.felt .boks.hoyre { justify-content:flex-end; }
.felt .kto { color:inherit; opacity:.6; font-size:.9em; }
.lokke:is([data-steg="fylt"],[data-steg="trykk"],[data-steg="bokfort"]) .felt .boks { background:#dff0f4; border-color:#8cc4d3; color:#0b1a20; }
.lokke:is([data-steg="fylt"],[data-steg="trykk"],[data-steg="bokfort"]) .felt em { opacity:1; }
.lokke[data-steg="fylt"] .f2 .boks, .lokke[data-steg="fylt"] .f2 em { transition-delay:.2s; }
.lokke[data-steg="fylt"] .f3 .boks, .lokke[data-steg="fylt"] .f3 em { transition-delay:.4s; }
.lokke[data-steg="fylt"] .f4 .boks, .lokke[data-steg="fylt"] .f4 em { transition-delay:.7s; }
.lokke[data-steg="fylt"] .f5 .boks, .lokke[data-steg="fylt"] .f5 em { transition-delay:.9s; }
.bekreft { position:relative; overflow:hidden; margin:auto 1em 1.4em; padding:.85em; border-radius:999px; background:#0E7C99; color:#fff;
  text-align:center; font-family:var(--disp); font-weight:600; font-size:1.05em; opacity:.35; transition:opacity .3s, background .3s, transform .15s; }
.bekreft span:not(.trykk) { display:inline-block; transition:opacity .25s; }
.bekreft .tekst-b { position:absolute; left:0; right:0; opacity:0; }
.lokke:is([data-steg="trykk"],[data-steg="bokfort"]) .bekreft, .lokke[data-steg="fylt"] .bekreft { opacity:1; transition-delay:1.1s; }
.lokke[data-steg="trykk"] .bekreft { transform:scale(.96); transition-delay:0s; }
.lokke[data-steg="bokfort"] .bekreft { background:#0B637A; transition-delay:0s; }
.lokke[data-steg="bokfort"] .tekst-a { opacity:0; }
.lokke[data-steg="bokfort"] .tekst-b { opacity:1; }
.trykk { position:absolute; left:50%; top:50%; width:3em; height:3em; margin:-1.5em; border-radius:50%; background:rgba(255,255,255,.45); transform:scale(0); opacity:0; }
.lokke[data-steg="trykk"] .trykk { animation:trykk .5s ease-out forwards; }
@keyframes trykk { from { transform:scale(0); opacity:1; } to { transform:scale(6); opacity:0; } }

/* Hjem: lagt over kortet og raden i skjermbildet, i samme mål. */
.hjem-lag { transition-duration:.3s; }
.res-kort { position:absolute; left:4.1%; top:17.65%; width:91.8%; height:22.75%; border-radius:2.1cqw; background:#157A99; color:#fff; overflow:hidden; }
.res-kort > div { position:absolute; left:5.1cqw; }
.res-tittel { top:5.6cqw; font-family:var(--mono); font-size:2.45cqw; letter-spacing:.32em; text-transform:uppercase; opacity:.9; }
.res-tall { top:13.6cqw; font-family:var(--disp); font-weight:700; font-size:9.6cqw; line-height:1; height:1em; width:60cqw; letter-spacing:-.01em; }
.res-pille { top:26.5cqw; height:5.8cqw; width:48.5cqw; background:#35d06b; color:#062a14; font-weight:600; font-size:3.1cqw; border-radius:999px; }
.res-linje { right:5.1cqw; top:36.6cqw; border-top:1px solid rgba(255,255,255,.3); padding-top:3.4cqw; font-size:3.25cqw; }
.res-linje b { position:relative; display:inline-block; min-width:2.4em; height:1.2em; vertical-align:bottom; }
.res-stav { position:absolute; width:13cqw; height:34cqw; background:rgba(255,255,255,.13); transform:rotate(45deg); }
.res-stav.a { right:10cqw; top:-9cqw; } .res-stav.b { right:14cqw; top:3cqw; height:40cqw; }
.hjem-lag .gml, .hjem-lag .ny { position:absolute; left:0; top:0; white-space:nowrap; transition:opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1); }
.res-pille .gml, .res-pille .ny { left:2.6cqw; top:1.1cqw; }
.hjem-lag .ny { opacity:0; transform:translateY(60%); }
.lokke.etter .hjem-lag .gml { opacity:0; transform:translateY(-60%); transition-delay:.5s; }
.lokke.etter .hjem-lag .ny { opacity:1; transform:none; transition-delay:.5s; }
/* Trykket på «Foto» i menylinja (68 % × 95 % i skjermbildet av Hjem). */
.tapp-ring { position:absolute; left:68.3%; top:94.6%; width:13cqw; height:13cqw; margin:-6.5cqw 0 0 -6.5cqw; border-radius:50%;
  background:rgba(255,255,255,.55); box-shadow:0 0 0 .25em rgba(255,255,255,.9); opacity:0; transform:scale(.4); }
.lokke[data-steg="tapp"] .tapp-ring { animation:tapp-ring .6s ease-out forwards; }
@keyframes tapp-ring { 0% { opacity:0; transform:scale(.4); } 25% { opacity:1; transform:scale(.8); } 100% { opacity:0; transform:scale(1.5); } }
.venter-rad { position:absolute; left:4.1%; top:83.2%; width:91.8%; height:6.2%; background:#fff; border:1px solid #e3e6e7; border-bottom:0;
  border-radius:2.1cqw 2.1cqw 0 0; display:flex; align-items:center; gap:3.5cqw; padding:0 4.3cqw; box-sizing:border-box; font-size:3.75cqw; }
.venter-rad > span:nth-child(2) { position:relative; flex:1; height:1.3em; }
.venter-ikon { width:8.2cqw; height:8.2cqw; border-radius:2cqw; background:#fdf3cf; color:#c9a20a; display:grid; place-items:center; font-weight:700; flex:none; }
.venter-pil { font-size:5cqw; color:#333; }
.toast { position:absolute; left:50%; top:1.5%; transform:translate(-50%,-160%); background:#07161c; color:#fff; padding:.65em 1.1em; border-radius:999px;
  font-size:.95em; font-weight:600; white-space:nowrap; box-shadow:0 .6em 1.6em rgba(0,0,0,.3); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.toast .hake { color:#F1C40F; margin-right:.3em; }
.lokke[data-steg="oppdatert"] .toast { transform:translate(-50%,0); transition-delay:.1s; }
.hero-scene .tillit .lenke { color:inherit; }

/* ── /musikere: «Hva teller mot 50 000-grensen?» ─────────────────────
   Mva og kontoplan i én tabell (erstattet to faktaseksjoner 2026-09-30). */
.steg-punkter { list-style:none; margin:.7rem 0 0; padding:0; display:grid; gap:.35rem; max-width:30rem; }
.steg-punkter li { position:relative; padding-left:1rem; color:var(--dus); font-size:.95rem; }
.steg-punkter li::before { content:""; position:absolute; left:0; top:.6em; width:.4rem; height:.4rem; border-radius:50%; background:var(--petrol-lys); }
.teller { padding:4.5rem 0; background:var(--grunn); border-bottom:1px solid var(--linje); }
/* Bred skjerm: teksten til venstre, tabellen til høyre (bruker bredden). */
.teller-indre { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:1.5rem 3.5rem; align-items:start; }
@media (max-width:60rem) { .teller-indre { grid-template-columns:1fr; } }
.teller .hode { max-width:44rem; }
.teller .hode h2 { font-size:clamp(1.7rem,3.2vw,2.5rem); letter-spacing:-.025em; line-height:1.08; }
.teller .hode p:not(.eyebrow) { color:var(--dus); font-size:1.05rem; margin:0; }
.teller-ramme { background:var(--kort); border:1px solid var(--linje); border-radius:16px; overflow:hidden; }
.teller-tabell { width:100%; border-collapse:collapse; }
.teller-tabell th, .teller-tabell td { padding:.85rem 1.1rem; border-bottom:1px solid var(--linje); text-align:left; vertical-align:top; }
.teller-tabell tbody tr:last-child > * { border-bottom:0; }
.teller-tabell thead th { font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dus); }
.teller-tabell th[scope="row"] { font-weight:600; }
.teller-tabell td small { display:block; font-size:.8rem; color:var(--dus); margin-top:.15rem; }
.teller-tabell th small { display:block; font-family:var(--mono); font-weight:400; font-size:.78rem; color:var(--aksent-tekst); margin-top:.15rem; }
.teller-tabell td.nei { color:var(--dus); }
.teller-tabell td.ja-teller { font-weight:600; white-space:nowrap; }
.teller-tabell td.ja-teller::before { content:""; display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:var(--gul); margin-right:.45rem; }
.teller .hode p.teller-fot { color:var(--dus); font-size:.95rem; margin:1.2rem 0 0; padding-top:1.2rem; border-top:1px solid var(--linje); }
@media (max-width:40rem) {
  .teller-tabell th, .teller-tabell td { padding:.75rem .8rem; font-size:.92rem; }
  .teller-tabell thead th { font-size:.7rem; letter-spacing:.02em; }
}