/* Felles tokens og komponenter for mercatur.no. Se DESIGN.md. */
:root {
  --papir: #ffffff;
  --flate: #f3f4f2;
  --blekk: #16181a;
  --gra: #6a6f73;
  --linje: #e2e4e1;
  --gran: #1f5a43;
  --antatt: #a8741a;
  --maks: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--papir);
  color: var(--blekk);
  font: 400 17px/1.6 "Schibsted Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(30px, 4vw, 44px); }
h2 .gra, h3 .gra, p.gra { color: var(--gra); }
.innhold { max-width: var(--maks); margin: 0 auto; padding: 0 32px; }
:focus-visible { outline: 2px solid var(--gran); outline-offset: 3px; }

/* Navigasjon */
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav .merke { font-weight: 700; font-size: 21px; letter-spacing: -0.03em; text-decoration: none; }
.nav nav { display: flex; gap: 32px; font-size: 15px; }
.nav nav a { text-decoration: none; }
.knapp {
  display: inline-block; background: var(--gran); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 13px 20px; border-radius: 6px; border: 0; cursor: pointer;
}
.lenke { font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* Tale: det som blir sagt settes i Newsreader */
.tale, blockquote {
  font-family: "Newsreader", Georgia, serif; font-size: 1.12em; line-height: 1.45; font-weight: 400;
}
blockquote { margin: 14px 0; padding-left: 16px; border-left: 2px solid var(--linje); }

/* Opplæringsdemoen */
[data-valg] { display: flex; flex-wrap: wrap; gap: 8px; }
[data-valg] button {
  font: 500 14px "Schibsted Grotesk", sans-serif; color: var(--blekk); background: var(--papir);
  border: 1px solid var(--linje); border-radius: 6px; padding: 8px 12px; cursor: pointer;
}
[data-valg] button[aria-pressed="true"] { border-color: var(--blekk); }

.sjekk { list-style: none; }
.sjekk li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--linje); color: var(--gra); transition: color .3s; }
.sjekk li:last-child { border-bottom: 1px solid var(--linje); }
.sjekk li b { display: block; font-weight: 600; color: inherit; }
.sjekk li small { display: block; font-size: 14px; }
.sjekk .hake { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.sjekk .hake circle { fill: none; stroke: var(--linje); stroke-width: 1.5; }
.sjekk .hake path { fill: none; stroke: var(--gran); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .45s ease; }
.sjekk li.lært { color: var(--blekk); }
.sjekk li.lært .hake path { stroke-dashoffset: 0; }

.svarkort { border: 1px solid var(--linje); border-radius: 10px; background: var(--papir); padding: 24px; }
.svarkort .spm { font-weight: 600; font-size: 17px; padding-bottom: 16px; border-bottom: 1px solid var(--linje); }
.svarkort [data-svar] { padding: 16px 0; min-height: 150px; }
.svarkort [data-svar] p + p { margin-top: 10px; }
.svarkort .bunn { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
[data-kilder] { display: flex; flex-wrap: wrap; gap: 6px; }
[data-kilder] span { font-size: 12.5px; color: var(--gra); background: var(--flate); border-radius: 4px; padding: 3px 8px; }
[data-status] { font-size: 13px; font-weight: 600; }
[data-status][data-tilstand="bekreftet"] { color: var(--gran); }

/* Beviset */
.bevis { border-top: 1px solid var(--blekk); }
.bevis div { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--linje); font-size: 19px; }
.bevis div b { font-weight: 600; }
.bevis div.best b { color: var(--gran); }

/* Produktvisning (plassholder til ekte skjermbilder finnes) */
.ramme { background: var(--flate); border-radius: 10px; padding: 28px; }
.ark { background: var(--papir); border: 1px solid var(--linje); border-radius: 8px; padding: 20px; font-size: 14.5px; }
.ark h4 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.ark .post { padding: 9px 0; border-top: 1px solid var(--linje); display: flex; justify-content: space-between; gap: 12px; }
.ark .post em { font-style: normal; font-size: 12.5px; color: var(--gra); white-space: nowrap; }
.ark .post em.ok { color: var(--gran); font-weight: 600; }
.ark .post em.an { color: var(--antatt); font-weight: 600; }
.plassholder { font-size: 12.5px; color: var(--gra); margin-top: 10px; }

/* Tillit */
.tillit p { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; padding: 22px 0; border-top: 1px solid var(--linje); }
.tillit p span { color: var(--gra); font-weight: 500; }

footer { border-top: 1px solid var(--linje); padding: 28px 0 40px; font-size: 14px; color: var(--gra); }
footer .innhold { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

@media (max-width: 860px) {
  .innhold { padding: 0 16px; }
  .nav nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ── Runde 3 ─────────────────────────────────────────────── */

/* Sammenligningen */
.svar { border-radius: 10px; padding: 26px 28px; background: var(--papir); border: 1px solid var(--linje); }
.svar .etikett { display: block; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.svar.uten { color: var(--gra); }
.svar.uten .etikett { color: var(--gra); }
.svar.uten [data-uten] { font-size: 19px; line-height: 1.5; }
.svar.med .etikett { color: var(--gran); }
.svar.med [data-med] { font-size: 19px; line-height: 1.75; }
.svar.med [data-etter] { margin-top: 14px; color: var(--gra); }
.svar .bekreftet { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--gran); }
.spm-linje { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.spm-linje:before { content: "«"; } .spm-linje:after { content: "»"; }

/* Hver opplysning merket med kilden */
mark { background: none; color: inherit; border-bottom: 2px solid #c9dcd2; padding-bottom: 1px; transition: background .2s; }
mark sup { font-size: 10.5px; font-weight: 600; color: var(--gran); margin-left: 3px; vertical-align: super; letter-spacing: 0; white-space: nowrap; }
.vis-prosess mark[data-type="prosess"], .vis-system mark[data-type="system"],
.vis-dokument mark[data-type="dokument"], .vis-mote mark[data-type="mote"] { background: #e3eee8; }

/* Forklaringen: hvor kunnskapen kommer fra */
[data-forklaring] { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--gra); }
[data-forklaring] li { display: flex; align-items: center; gap: 8px; cursor: default; }
[data-forklaring] li i { width: 14px; height: 0; border-bottom: 2px solid #c9dcd2; }
[data-forklaring] li:hover { color: var(--blekk); }

/* Systemer som AI-en leste fra */
[data-systemer] { display: flex; gap: 6px; flex-wrap: wrap; }
[data-systemer] span { font-size: 12.5px; color: var(--gra); background: var(--flate); border-radius: 4px; padding: 3px 8px; }

/* Resten av siden */
.fortelling { padding-top: 120px; padding-bottom: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.fortelling h2 { max-width: 14ch; }
.fortelling .tekst p { font-size: 19px; }
.fortelling .tekst p + p { margin-top: 16px; }
.fortelling .tekst p.gra { color: var(--gra); }
.seksjon { padding-top: 96px; padding-bottom: 96px; border-top: 1px solid var(--linje); }
.bevis-sek { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; }
.gra-tekst { color: var(--gra); margin-top: 16px; max-width: 38ch; }
.produkter { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.produkt h3 { font-size: 34px; }
.produkt > p { margin-top: 12px; max-width: 42ch; }
.produkt .ramme { margin-top: 28px; }
.tale-linjer p { padding: 8px 0; border-top: 1px solid var(--linje); font-size: 16px; }
.tale-linjer small { display: block; font: 500 12px "Schibsted Grotesk"; color: var(--gra); }
.slutt { display: grid; grid-template-columns: 160px 1fr auto; gap: 40px; align-items: center; padding-top: 72px; padding-bottom: 96px; border-top: 1px solid var(--linje); }
.slutt img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; }
.slutt h2 { font-size: clamp(26px, 3vw, 36px); max-width: 22ch; }
.slutt p { color: var(--gra); margin-top: 8px; }
.slutt .handling { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* Felles hero-tekst for runde 3 */
.topp { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; padding-top: 72px; padding-bottom: 48px; }
.topp h1 { font-size: clamp(52px, 8.5vw, 124px); letter-spacing: -0.04em; line-height: .98; }
.topp .side p { font-size: 20px; max-width: 30ch; }
.topp .handling { display: flex; gap: 24px; align-items: center; margin-top: 28px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .fortelling, .bevis-sek, .produkter, .slutt, .topp { grid-template-columns: 1fr; gap: 28px; }
  .topp { padding-top: 32px; }
}

/* ── Runde 4: systemer og karakterer ─────────────────────── */
.logo { display: inline-block; object-fit: contain; vertical-align: middle; flex: none; }
.hf-merke { display: inline-grid; place-items: center; background: var(--blekk); color: #fff; border-radius: 5px; font-weight: 700; vertical-align: middle; flex: none; }
.brikke { display: inline-flex; align-items: center; gap: 8px; background: var(--papir); border: 1px solid var(--linje); border-radius: 8px; padding: 7px 11px 7px 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.brikke.av { opacity: .35; filter: grayscale(1); }
mark.kilde { background: none; border-bottom: 2px solid #c9dcd2; padding-bottom: 1px; }
mark.kilde .kildelogo { display: inline-block; margin-left: 5px; vertical-align: 1px; }
mark.kilde .kildelogo .logo, mark.kilde .kildelogo .hf-merke { vertical-align: -2px; }

/* Karakterene: ansatt og AI */
.figur { width: 52px; height: 52px; flex: none; }
.figur circle, .figur path, .figur rect { fill: none; stroke: var(--blekk); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.figur .fyll { fill: var(--flate); }
.figur text { font: 700 14px "Schibsted Grotesk", sans-serif; fill: var(--blekk); stroke: none; }
.klar .figur circle, .klar .figur path, .klar .figur rect { stroke: var(--gran); }
.klar .figur text { fill: var(--gran); }

/* ── Runde 5: den AI-en kunden allerede bruker ───────────── */
.chat { background: var(--papir); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(22,24,26,.45); display: flex; flex-direction: column; }
.chat .list { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--linje); font-size: 14px; font-weight: 600; }
.chat .list .hoyre { margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--gra); font-size: 13px; }
.chat .kropp { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.chat .du { align-self: flex-end; background: var(--flate); border-radius: 14px 14px 4px 14px; padding: 12px 16px; max-width: 85%; font-size: 15px; }
.chat .ai { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.65; }
.chat .ai .etter { margin-top: 8px; color: var(--gra); }
.chat .ai.tom p { color: var(--gra); }
.verktoy { border: 1px solid var(--linje); border-radius: 8px; font-size: 13px; margin-bottom: 10px; }
.verktoy summary { list-style: none; cursor: pointer; padding: 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--gra); }
.verktoy summary::-webkit-details-marker { display: none; }
.verktoy summary .logoer { display: flex; gap: 4px; margin-left: auto; }
.verktoy ul { list-style: none; border-top: 1px solid var(--linje); padding: 6px 10px; }
.verktoy li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 5px 0; color: var(--gra); }
.verktoy li b { color: var(--blekk); font-weight: 500; }
.bryter { display: inline-flex; align-items: center; gap: 8px; font: 500 13px "Schibsted Grotesk", sans-serif; cursor: pointer; border: 0; background: none; color: var(--blekk); }
.bryter i { width: 36px; height: 20px; border-radius: 10px; background: var(--linje); position: relative; transition: background .2s; flex: none; }
.bryter i:after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.bryter[aria-pressed="true"] i { background: var(--gran); }
.bryter[aria-pressed="true"] i:after { transform: translateX(16px); }
.ai-velger { display: inline-flex; border: 1px solid var(--linje); border-radius: 8px; padding: 3px; gap: 2px; }
.ai-velger button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; }
.ai-velger button[aria-pressed="true"] { background: var(--flate); }
.virker-med { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--gra); margin-top: 22px; }

/* ── Runde 6: bruksområdene ─────────────────────────────── */
/* Kompakt hero: teksten er liten, demoen er hovedsaken */
.hero6 { display: grid; grid-template-columns: minmax(280px, .78fr) 1.5fr; gap: 40px; align-items: center; padding-top: 24px; padding-bottom: 48px; }
.hero6 h1 { font-size: clamp(36px, 4.2vw, 58px); letter-spacing: -0.035em; line-height: 1.02; }
.hero6 .tekst p { font-size: 18px; margin-top: 16px; color: var(--gra); max-width: 34ch; }
.hero6 .handling { display: flex; gap: 20px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.scene6 { border-radius: 12px; padding: 28px; background: url("https://images.unsplash.com/photo-1759065455427-869fb12bae4a?w=2000&q=80") center 30% / cover no-repeat; }

/* Demospilleren */
.demo { min-height: 500px; container-type: inline-size; }
.demo .list .hoyre { font-size: 12px; font-weight: 600; color: var(--gran); }
.demo .kropp { gap: 16px; }
.logg { list-style: none; border: 1px solid var(--linje); border-radius: 10px; padding: 8px 16px; font-size: 13px; }
.logg .tittel { display: flex; align-items: center; gap: 8px; color: var(--gra); padding: 8px 0; border-bottom: 1px solid var(--linje); }
.logg .rad { display: grid; grid-template-columns: 18px 1fr 14px; gap: 10px; align-items: center; padding: 8px 0; color: var(--gra); opacity: .2; transition: opacity .25s; }
.logg .rad b { color: var(--blekk); font-weight: 500; }
.logg .rad.vis { opacity: 1; }
.logg .rad i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--linje); }
.logg .rad.jobber i { border-color: var(--gran); border-right-color: transparent; animation: snurr .7s linear infinite; }
.logg .rad.ferdig i { border: 0; background: var(--gran); }
@keyframes snurr { to { transform: rotate(360deg); } }
.bygg { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.bygg.vis { opacity: 1; transform: none; }
.resultat { font-size: 14.5px; line-height: 1.55; }
.r-tittel { font-weight: 600; margin: 4px 0 8px; }
.r-liste { padding-left: 20px; display: grid; gap: 6px; }
.r-liste.punkt { list-style: disc; }
.r-liste li .kildelogo { margin-left: 6px; }
.r-merknad { color: var(--gra); font-size: 13px; margin-top: 10px; }
.r-sort { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.r-sort div { border: 1px solid var(--linje); border-radius: 10px; padding: 14px 16px; }
.r-sort b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.r-sort span { font-weight: 600; font-size: 13px; }
.r-sort small { display: block; color: var(--gra); font-size: 12px; margin-top: 4px; line-height: 1.35; }
.r-sort .slett b { color: #9aa0a4; } .r-sort .svar { border-color: var(--gran); } .r-sort .svar b { color: var(--gran); }
.r-dok { border: 1px solid var(--linje); border-radius: 8px; padding: 12px 14px; }
.r-fil { display: flex; align-items: center; gap: 8px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--linje); margin-bottom: 8px; }
.r-dok ul { list-style: none; display: grid; gap: 4px; margin-bottom: 8px; }
.r-dok li:before { content: "✓ "; color: var(--gran); font-weight: 700; }
.r-dok .ok { color: var(--gran); font-weight: 600; font-size: 13.5px; }
.r-dok .obs { color: var(--antatt); font-size: 13.5px; }
.r-tab { width: 100%; border-collapse: collapse; }
.r-tab td { padding: 6px 0; border-bottom: 1px solid var(--linje); vertical-align: middle; }
.r-tab td:nth-child(2) { text-align: right; padding-right: 10px; white-space: nowrap; }
.r-tab td:last-child { width: 22px; text-align: right; }
.r-tab tr.sum td { font-weight: 600; border-bottom: 0; }
.r-utkast { border-left: 2px solid var(--linje); padding-left: 12px; }
.r-stolper { display: flex; align-items: stretch; gap: 3px; height: 110px; margin-bottom: 10px; border-bottom: 1px solid var(--linje); position: relative; }
.r-stolper i { flex: 1; position: relative; }
.r-stolper i:after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--b); height: var(--h); background: #9fc2b1; border-radius: 2px; }
.r-stolper i.neg:after { background: #d9a36a; }

/* Faner og kort for bruksområdene */
.faner { display: flex; flex-wrap: wrap; gap: 8px; }
.faner button { all: unset; cursor: pointer; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--linje); background: var(--papir); display: inline-flex; gap: 8px; align-items: center; }
.faner button small { color: var(--gra); font-weight: 500; font-size: 12px; }
.faner button[aria-pressed="true"] { border-color: var(--blekk); }
.faner button:focus-visible { outline: 2px solid var(--gran); outline-offset: 2px; }

/* Slik virker det, kompakt */
.slik { padding-top: 120px; padding-bottom: 0; }
.lag-rad { display: grid; grid-template-columns: 1.4fr auto 1fr auto .9fr; gap: 16px; align-items: center; margin-top: 32px; }
.lag-rad small { display: block; font-size: 13px; color: var(--gra); margin-bottom: 8px; }
.lag-rad .brikker { display: flex; flex-wrap: wrap; gap: 6px; }
.lag-rad .midt { background: #e3eee8; border-radius: 10px; padding: 16px; }
.lag-rad .midt b { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.lag-rad .midt p { font-size: 14px; color: var(--gra); margin-top: 4px; }
.lag-rad .pil { font-size: 22px; color: var(--gra); }
.bevis-rad { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; margin-top: 120px; padding-top: 64px; padding-bottom: 0; border-top: 1px solid var(--linje); align-items: center; }
.bevis-rad p.gra { color: var(--gra); margin-top: 8px; }
.stolpe-bevis div { display: grid; grid-template-columns: 120px 1fr 90px; gap: 12px; align-items: center; padding: 8px 0; }
.stolpe-bevis i { height: 10px; background: var(--flate); border-radius: 5px; position: relative; overflow: hidden; }
.stolpe-bevis i:after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #c3ccc7; border-radius: 5px; }
.stolpe-bevis .best i:after { background: var(--gran); }
.stolpe-bevis b { text-align: right; font-weight: 600; }
.stolpe-bevis .best b { color: var(--gran); }

@media (max-width: 960px) {
  .hero6, .lag-rad, .bevis-rad { grid-template-columns: 1fr; }
  .lag-rad .pil { transform: rotate(90deg); justify-self: center; }
  .r-sort { grid-template-columns: 1fr 1fr; }
  .scene6 { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .bygg { transition: none; } }

/* ═══ Nettsiden ═══════════════════════════════════════════ */
html { scroll-padding-top: 84px; }
.toppmeny { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; }
.toppmeny .nav { height: 68px; }
.toppmeny .lenker { display: flex; gap: 28px; font-size: 15px; }
.toppmeny .lenker a { text-decoration: none; }
.toppmeny .lenker a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-hoyre { display: flex; align-items: center; gap: 10px; }
.meny-knapp { display: none; width: 42px; height: 42px; border: 1px solid var(--linje); border-radius: 8px; background: var(--papir); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.meny-knapp i { width: 18px; height: 2px; background: var(--blekk); border-radius: 1px; transition: transform .2s; }
.meny-apen .meny-knapp i:first-child { transform: translateY(4px) rotate(45deg); }
.meny-apen .meny-knapp i:last-child { transform: translateY(-4px) rotate(-45deg); }
.knapp.stor { padding: 16px 26px; font-size: 16px; }
.knapp:hover { background: #184a37; }
.seksjonstittel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.seksjonstittel h2 { max-width: 22ch; }
.seksjonstittel p { color: var(--gra); max-width: 56ch; font-size: 18px; }

/* Hero med faner */
.hero-s { padding-top: 72px; padding-bottom: 40px; display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.hero-s h1 { font-size: clamp(38px, 4.6vw, 60px); letter-spacing: -0.035em; line-height: 1.02; }
.hero-s p { color: var(--gra); font-size: 18px; max-width: 48ch; margin-top: 20px; }
.hero-s .handling { display: flex; gap: 20px; align-items: center; }
.scene-s { margin: 0 32px; border-radius: 14px; padding: 32px 4vw 48px; background: url("https://images.unsplash.com/photo-1770562424778-619b80b27fac?w=2400&q=80") center / cover no-repeat; }
.fane-topp { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.fane-topp .hint { background: var(--blekk); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; }
.fane-topp .hint i { width: 8px; height: 8px; border-radius: 50%; background: #7fd1a8; animation: puls 1.4s ease-in-out infinite; }
.fane-topp .hint.manuell i { animation: none; background: #fff; }
.fane-topp .gjenoppta { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.95); padding: 6px 12px; border-radius: 99px; display: none; }
.fane-topp .gjenoppta:focus-visible { outline: 2px solid var(--gran); }
.fane-topp.manuell .gjenoppta { display: inline-block; }
@keyframes puls { 50% { opacity: .35; } }
.faner-s { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.faner-s button { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; background: rgba(255,255,255,.95); border: 1.5px solid rgba(255,255,255,.95); border-radius: 10px; padding: 11px 16px 13px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 16px -10px rgba(22,24,26,.5); transition: transform .15s, border-color .15s; }
.faner-s button:hover { transform: translateY(-2px); border-color: var(--blekk); }
.faner-s button:focus-visible { outline: 2px solid var(--gran); outline-offset: 2px; }
.faner-s button .ikon { display: inline-flex; gap: 2px; }
.faner-s button[aria-selected="true"] { background: var(--blekk); color: #fff; border-color: var(--blekk); }
.faner-s button .fremdrift { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #7fd1a8; }
.faner-s button[aria-selected="true"] .fremdrift.gaar { animation: fyll var(--varighet, 8s) linear forwards; }
@keyframes fyll { to { width: 100%; } }
.scene-s .demo { max-width: 880px; margin: 0 auto; }

/* Svarer, gjør, bygger med like høye bokser */
.nivaer { padding-top: 120px; padding-bottom: 0; }
.tre-like { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; align-items: stretch; }
.tre-like article { display: flex; flex-direction: column; border-top: 2px solid var(--blekk); padding-top: 20px; }
.tre-like h3 { font-size: 26px; }
.tre-like article > p { color: var(--gra); margin: 8px 0 20px; font-size: 15px; min-height: 2.8em; }
.tre-like .demo { flex: 1; min-height: 0; box-shadow: none; border: 1px solid var(--linje); display: flex; flex-direction: column; }
.tre-like .demo .kropp { flex: 1; }
.tre-like .hent { display: none; }
.tre-like .r-sort { grid-template-columns: 1fr 1fr; }
.tre-like .fra { margin-top: auto; padding: 14px 24px; border-top: 1px solid var(--linje); display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--gra); }

/* En vanlig dag */
.dag-sek { padding-top: 120px; padding-bottom: 0; }
.dagsreise { position: relative; margin-top: 48px; }
.dagsreise:before { content: ""; position: absolute; left: calc(33% - 1px); top: 20px; bottom: 120px; width: 2px; background: linear-gradient(var(--linje), var(--linje)); }
.steg-dag { display: grid; grid-template-columns: 33% 1fr; gap: 56px; align-items: start; padding: 36px 0; }
.steg-tekst { position: sticky; top: 110px; padding-right: 40px; }
.steg-tekst:after { content: ""; position: absolute; right: -8px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--gran); box-shadow: 0 0 0 5px var(--papir); }
.steg-tekst .kl { font-weight: 600; font-size: 15px; color: var(--gran); font-variant-numeric: tabular-nums; }
.steg-tekst h3 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 4px; }
.steg-tekst p { color: var(--gra); margin-top: 10px; }
.steg-vis .demo { min-height: 0; }
.steg-vis .chat { box-shadow: 0 18px 40px -28px rgba(22,24,26,.45); border: 1px solid var(--linje); }

.forslag { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linje); font-size: 15px; }
.forslag:last-child { border-bottom: 0; }
.forslag .f-ferdig { display: none; color: var(--gran); font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.forslag .f-knapper { display: flex; gap: 6px; }
.forslag button { font: 600 13px "Schibsted Grotesk"; border-radius: 6px; padding: 7px 10px; cursor: pointer; border: 1px solid var(--linje); background: var(--papir); color: var(--blekk); white-space: nowrap; }
.forslag button.ja { background: var(--gran); color: #fff; border-color: var(--gran); }
.forslag.gjort .f-ferdig { display: block; }
.forslag.gjort .f-knapper, .forslag.utsatt .f-knapper { display: none; }
.forslag.utsatt { opacity: .45; }

.mote-scene { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: start; }
.telefon-rute, .referat-rute { background: var(--papir); border: 1px solid var(--linje); border-radius: 16px; padding: 16px; box-shadow: 0 18px 40px -28px rgba(22,24,26,.45); }
.t-hode { display: flex; align-items: center; gap: 8px; font-size: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linje); }
.t-hode b { font-weight: 600; }
.opptak { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #b3261e; font-weight: 600; font-size: 12.5px; }
.opptak i { width: 8px; height: 8px; border-radius: 50%; background: #d93025; animation: puls 1s infinite; }
.opptak em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--gra); }
.bolge { display: flex; align-items: center; gap: 3px; height: 34px; margin: 10px 0 4px; }
.bolge b { flex: 1; background: var(--gran); border-radius: 2px; height: 30%; animation: bolge 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); }
@keyframes bolge { 0%, 100% { height: 18%; } 50% { height: 95%; } }
.transkript .tale { padding: 8px 0; border-top: 1px solid var(--linje); font-size: 15.5px; }
.transkript .tale small { display: block; font: 500 11.5px "Schibsted Grotesk"; color: var(--gra); }

.kunnskap { display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center; }
.k-kilde { display: flex; gap: 10px; align-items: center; background: var(--papir); border: 1px solid var(--linje); border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 14px; }
.k-kilde small { font-weight: 400; color: var(--gra); }
.k-pil { font-size: 24px; color: var(--gra); }
.k-ark { background: var(--papir); border: 1px solid var(--linje); border-radius: 12px; padding: 16px; box-shadow: 0 18px 40px -28px rgba(22,24,26,.45); }
.k-hode { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--linje); flex-wrap: wrap; }
.k-hode b { font-weight: 600; }
.k-hode small { margin-left: auto; color: var(--gra); font-size: 12.5px; }
.k-post { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linje); font-size: 14.5px; }
.k-post.ny { background: linear-gradient(90deg, #fff8d6, transparent 70%); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.k-post.bekreftet { background: linear-gradient(90deg, #e3eee8, transparent 70%); }
.tilstand { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--antatt); white-space: nowrap; }
.tilstand.ok { color: var(--gran); }
.k-fot { color: var(--gra); font-size: 13.5px; margin-top: 10px; }

.steg-slutt { padding: 48px 0 0; }
.slutt-bilde { border-radius: 14px; min-height: 72vh; display: flex; align-items: flex-end; padding: 48px; background: url("https://images.unsplash.com/photo-1609625743823-f4960243e496?w=2400&q=80") center 60% / cover no-repeat; }
.slutt-tekst { background: var(--papir); border-radius: 12px; padding: 28px; max-width: 460px; }
.slutt-tekst .kl { font-weight: 600; color: var(--gran); }
.slutt-tekst h3 { font-size: clamp(28px, 3.2vw, 40px); margin: 4px 0 8px; }
.slutt-tekst p { color: var(--gra); margin-bottom: 20px; }

/* Kunder */
.kunder-sek { padding-top: 120px; padding-bottom: 0; }
.kunde-vegg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.kunde-vegg span { border: 1px solid var(--linje); border-radius: 99px; padding: 12px 22px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: #3b3f43; }

/* Tillit og kom i gang */
.tillit-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 120px; padding-bottom: 0; }
.tillit-rad div { background: var(--flate); border-radius: 12px; padding: 32px; }
.tillit-rad b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.tillit-rad p { color: var(--gra); margin-top: 10px; font-size: 15px; }
.gang { padding-top: 120px; padding-bottom: 120px; }
.gang ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; counter-reset: s; }
.gang li { border-top: 2px solid var(--blekk); padding-top: 20px; counter-increment: s; }
.gang li:before { content: counter(s); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gran); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.gang li b { display: block; font-size: 20px; font-weight: 600; }
.gang li p { color: var(--gra); margin-top: 8px; }
.gang > .knapp { margin-top: 48px; }

/* Kontakt */
.kontakt { background: var(--flate); padding: 96px 0; }
.kontakt-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.kontakt-tekst h2 { font-size: clamp(32px, 4vw, 48px); }
.kontakt-tekst > p { color: var(--gra); margin-top: 12px; font-size: 18px; max-width: 38ch; }
.person { display: flex; gap: 14px; align-items: center; margin-top: 28px; }
.person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.person b { display: block; font-weight: 600; }
.person span { color: var(--gra); font-size: 14px; }
.direkte { list-style: none; margin-top: 18px; display: grid; gap: 6px; font-size: 18px; font-weight: 600; }
.skjema { background: var(--papir); border-radius: 14px; padding: 28px; display: grid; gap: 16px; }
.skjema label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.skjema input:not([type="checkbox"]) { font: 400 16px "Schibsted Grotesk"; padding: 12px 14px; border: 1px solid var(--linje); border-radius: 8px; background: var(--papir); }
.skjema input:focus { outline: 2px solid var(--gran); outline-offset: 1px; border-color: transparent; }
.skjema fieldset { border: 0; }
.skjema legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.valg-rad { display: flex; flex-wrap: wrap; gap: 8px; }
.valg-rad label { display: inline-flex; font-weight: 500; cursor: pointer; }
.valg-rad input { position: absolute; opacity: 0; pointer-events: none; }
.valg-rad span { border: 1px solid var(--linje); border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.valg-rad input:checked + span { border-color: var(--gran); background: #e3eee8; color: var(--gran); }
.valg-rad input:focus-visible + span { outline: 2px solid var(--gran); outline-offset: 2px; }
.skjema .liten { font-size: 13px; color: var(--gra); }

/* Bunntekst */
.bunn { padding: 56px 0 32px; border-top: 1px solid var(--linje); font-size: 15px; }
.bunn-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.bunn-grid > div { display: grid; gap: 8px; align-content: start; }
.bunn-grid a { text-decoration: none; color: var(--gra); }
.bunn-grid a:hover { color: var(--blekk); }
.bunn-grid b { font-weight: 600; }
.bunn-grid p, .bunn-grid span { color: var(--gra); }
.bunn-linje { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linje); font-size: 13px; color: var(--gra); }

/* Om oss */
.om-topp { padding-top: 56px; padding-bottom: 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.om-topp h1 { font-size: clamp(40px, 5vw, 68px); letter-spacing: -0.035em; line-height: 1.02; }
.om-topp p { color: var(--gra); font-size: 19px; }
.om-bilde { margin: 0 32px; height: 56vh; min-height: 320px; border-radius: 14px; background: url("https://images.unsplash.com/photo-1586469498775-a6bf8f65da84?w=2400&q=80") center 55% / cover no-repeat; }
.historie { padding-top: 96px; padding-bottom: 32px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; }
.historie .tekst p { font-size: 18px; }
.historie .tekst p + p { margin-top: 14px; }
.historie .tekst p.gra { color: var(--gra); }
.tallrad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 72px; padding-bottom: 32px; }
.tallrad div { border-top: 2px solid var(--blekk); padding-top: 14px; }
.tallrad b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.tallrad span { color: var(--gra); font-size: 14px; }
.team { padding-top: 96px; padding-bottom: 32px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.team-grid article { background: var(--flate); border-radius: 14px; padding: 24px; }
.team-grid .portrett { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #d7ddd9; color: var(--gran); font-weight: 700; font-size: 28px; }
.team-grid h3 { font-size: 22px; margin-top: 16px; }
.team-grid .rolle { color: var(--gran); font-weight: 600; font-size: 14px; }
.team-grid p { color: var(--gra); margin-top: 10px; font-size: 15px; }
.verdier { padding-top: 96px; padding-bottom: 96px; }
.verdier .rad { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--linje); }
.verdier .rad b { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.verdier .rad p { color: var(--gra); font-size: 17px; }

/* ═══ Mobil ═══════════════════════════════════════════════ */
@media (max-width: 960px) {
  .toppmeny .lenker { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--papir); flex-direction: column; gap: 0; border-bottom: 1px solid var(--linje); padding: 8px 16px 16px; }
  .meny-apen .toppmeny .lenker { display: flex; }
  .toppmeny .lenker a { padding: 12px 0; border-bottom: 1px solid var(--linje); font-size: 17px; }
  .meny-knapp { display: inline-flex; }
  .scene-s { margin: 0 12px; padding: 14px 10px 18px; }
  .faner-s { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -10px 12px; padding-left: 10px; -webkit-overflow-scrolling: touch; }
  .faner-s button { scroll-snap-align: start; flex: none; font-size: 14px; }
  .tre-like, .tillit-rad, .gang ol, .team-grid, .kontakt-grid, .historie, .om-topp { grid-template-columns: 1fr; }
  .dagsreise:before { left: 7px; bottom: 60px; }
  .steg-dag, .steg-dag.snu { grid-template-columns: 1fr; gap: 16px; padding: 24px 0 24px 28px; }
  .steg-tekst { position: static; text-align: left; padding-right: 0; }
  .steg-tekst:after { left: -28px; right: auto; top: 4px; }
  .mote-scene, .kunnskap { grid-template-columns: 1fr; }
  .k-pil { transform: rotate(90deg); justify-self: start; }
  .slutt-bilde { min-height: 60vh; padding: 16px; }
  .tallrad { grid-template-columns: 1fr 1fr; }
  .bunn-grid { grid-template-columns: 1fr 1fr; }
  .verdier .rad { grid-template-columns: 1fr; gap: 6px; }
  .om-bilde { margin: 0 12px; }
}
@media (max-width: 600px) {
  .hero-s { padding-top: 40px; padding-bottom: 28px; }
  .nivaer, .produkter-sek, .slik, .dag-sek, .kunder-sek, .tillit-rad, .faq, .gang { padding-top: 72px; }
  .gang { padding-bottom: 72px; }
  .bevis-rad { margin-top: 72px; padding-top: 48px; }
  .hero-s .handling { width: 100%; }
  .forslag { grid-template-columns: 22px 1fr; }
  .forslag .f-knapper { grid-column: 2; }
  .demo .kropp { padding: 20px 18px 22px; }
  .chat .list { padding: 12px 18px; }
  .chat .ai { grid-template-columns: 22px 1fr; gap: 8px; }
  .r-sort { grid-template-columns: 1fr 1fr; }
  .kunde-vegg { gap: 8px; }
  .kunde-vegg span { font-size: 14px; padding: 9px 16px; }
  .kontakt { padding: 64px 0; }
  .skjema { padding: 18px; }
  .bunn-grid { grid-template-columns: 1fr; }
  .lag-rad .brikker .brikke { font-size: 13px; }
}
.tallrad-setning { padding-top: 80px; padding-bottom: 16px; }
.tallrad-setning p { font-size: clamp(24px, 3vw, 36px); line-height: 1.35; letter-spacing: -0.02em; color: var(--gra); max-width: 32ch; border-top: 1px solid var(--blekk); padding-top: 28px; }
.tallrad-setning b { color: var(--blekk); font-weight: 600; }
.steg-slutt { position: relative; z-index: 1; background: var(--papir); }
.bunn-grid a.merke { color: var(--blekk); font-size: 19px; }

/* «Planlegg og gjør»: punktene gjøres ett for ett */
.u-liste { list-style: none; display: grid; gap: 2px; }
.u-rad { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 8px; transition: background .3s; }
.u-rad b { font-weight: 500; display: block; }
.u-rad small { display: block; font-size: 12.5px; color: var(--gra); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s, opacity .3s; }
.u-status { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linje); display: grid; place-items: center; }
.u-rad.jobber { background: var(--flate); }
.u-rad.jobber .u-status { border-color: var(--gran); border-right-color: transparent; animation: snurr .7s linear infinite; }
.u-rad.klar .u-status { border: 0; background: var(--gran) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/12px no-repeat; }
.u-rad.selv .u-status { border-color: #b9bec2; border-style: dashed; }
.u-rad.klar small, .u-rad.selv small { max-height: 40px; opacity: 1; }
.u-rad.klar small { color: var(--gran); font-weight: 500; }
.u-be { display: flex; justify-content: flex-end; margin: 10px 0 6px; }
.u-be span { background: var(--blekk); color: #fff; border-radius: 14px 14px 4px 14px; padding: 8px 14px; font-size: 14.5px; }
.u-slutt { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #e3eee8; color: var(--gran); font-weight: 600; font-size: 14px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.u-slutt.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .u-rad, .u-rad small, .u-slutt { transition: none; } }
.to-felt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.valgfri { font-weight: 400; color: var(--gra); }
.skjema textarea { font: 400 16px "Schibsted Grotesk"; padding: 12px 14px; border: 1px solid var(--linje); border-radius: 8px; resize: vertical; }
.skjema textarea:focus { outline: 2px solid var(--gran); outline-offset: 1px; border-color: transparent; }
.skjema .felle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skjema button[disabled] { opacity: .6; cursor: progress; }
.skjema .liten.feil { color: #b3261e; }
.takk { padding: 24px 8px; }
.takk b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--gran); }
.takk p { color: var(--gra); margin-top: 8px; font-size: 17px; }
@media (max-width: 600px) { .to-felt { grid-template-columns: 1fr; } }

/* Produktene */
.produkter-sek { padding-top: 120px; padding-bottom: 0; }
.produkt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.produkt-kort { border: 1px solid var(--linje); border-radius: 16px; padding: 24px 24px 36px; display: flex; flex-direction: column; }
.pk-vis { background: url("https://images.unsplash.com/photo-1586469498775-a6bf8f65da84?w=1400&q=70") center / cover no-repeat; border-radius: 12px; padding: 28px 22px; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.produkt-kort:last-child .pk-vis { background-image: url("https://images.unsplash.com/photo-1612476292832-ea50f0b97c87?w=1400&q=70"); }
.pk-vis .telefon-rute, .pk-vis .chat { width: min(380px, 100%); }
.pk-linje { padding: 8px 0; border-top: 1px solid var(--linje); font-size: 15px; }
.pk-linje small { display: block; font: 500 11.5px "Schibsted Grotesk"; color: var(--gra); }
.pk-resultat { margin-top: 8px; background: #e3eee8; color: var(--gran); font-weight: 600; font-size: 13.5px; border-radius: 8px; padding: 8px 10px; }
.pk-chat .kropp { padding: 20px 22px; gap: 14px; }
.pk-chat .du { font-size: 14px; }
.pk-chat .ai { font-size: 14.5px; }
.pk-hentet { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gra); border: 1px solid var(--linje); border-radius: 6px; padding: 5px 8px; margin-bottom: 8px; }
.produkt-kort h3 { font-size: 28px; margin-top: 28px; display: flex; align-items: center; gap: 10px; }
.pk-ingress { font-size: 17px; margin-top: 6px; }
.pk-punkter { list-style: none; margin-top: 14px; display: grid; gap: 0; }
.pk-punkter li { padding: 9px 0 9px 26px; border-top: 1px solid var(--linje); position: relative; font-size: 15.5px; }
.pk-punkter li:before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2px solid var(--gran); border-bottom: 2px solid var(--gran); transform: rotate(-45deg); }

/* Spørsmål */
.faq { padding-top: 120px; padding-bottom: 0; }
.faq-liste { margin-top: 28px; border-top: 1px solid var(--blekk); }
.faq details { border-bottom: 1px solid var(--linje); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 26px; font-weight: 400; color: var(--gran); transition: transform .2s; }
.faq details[open] summary:after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--gran); outline-offset: 2px; }
.faq details p { color: var(--gra); padding: 0 0 20px; max-width: 70ch; font-size: 17px; }
@media (max-width: 960px) { .produkt-grid { grid-template-columns: 1fr; } .pk-vis { min-height: 0; padding: 18px 12px; } }
.leverer { padding-top: 96px; padding-bottom: 16px; }
.leverer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 28px; border-top: 1px solid var(--blekk); }
.leverer-grid div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--linje); }
.leverer-grid b { display: block; font-size: 19px; font-weight: 600; }
.leverer-grid p { color: var(--gra); margin-top: 4px; font-size: 15.5px; }
.selskapet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 96px; }
.selskapet div { background: var(--flate); border-radius: 12px; padding: 18px 20px; }
.selskapet b { display: block; font-weight: 600; }
.selskapet span { color: var(--gra); font-size: 15px; }
@media (max-width: 960px) { .leverer-grid, .selskapet { grid-template-columns: 1fr; } }

/* Systemvinduet i demoen: det AI-en leser i akkurat nå, slik kunden kjenner det igjen */
.hent { display: grid; gap: 16px; margin-bottom: 18px; }
.skjerm { border: 1px solid var(--linje); border-radius: 10px; background: var(--flate); overflow: hidden; height: 214px; display: flex; flex-direction: column; font-size: 13px; }
.sk-hode { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--papir); border-bottom: 1px solid var(--linje); font-weight: 600; }
.sk-hode b { font-weight: 600; flex: none; }
.sk-hode span { color: var(--gra); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-liste.fri .sk-rad { white-space: normal; }
.sk-hode small { margin-left: auto; color: var(--gra); font-weight: 500; white-space: nowrap; }
.sk-kropp { flex: 1; overflow: hidden; position: relative; }
.sk-liste { position: absolute; inset: 10px 12px auto; }
.sk-rad { display: flex; gap: 12px; padding: 7px 12px; border-radius: 6px; background: var(--papir); margin-bottom: 5px; white-space: nowrap; overflow: hidden; border: 1.5px solid transparent; }
.sk-rad b { font-weight: 600; flex: none; }
.sk-rad span { color: var(--gra); overflow: hidden; text-overflow: ellipsis; }
.sk-rad.treff { border-color: var(--gran); }
.sk-fot { padding: 10px 16px; background: var(--papir); border-top: 1px solid var(--linje); color: var(--gran); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-liste { animation: sk-inn .35s ease; }
.sk-liste.rull { animation: sk-inn .35s ease, sk-rull 2.2s .3s ease-in-out forwards; }
@keyframes sk-inn { from { opacity: 0; transform: translateY(6px); } }
@keyframes sk-rull { to { transform: translateY(-150px); } }
/* Bredt: loggen til venstre, systemet til høyre. Smalt: bare systemvinduet, det sier det samme */
@container (min-width: 620px) { .hent { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .skjerm { height: auto; min-height: 214px; } }
@container (max-width: 619px) { .hent .logg { display: none; } }
@media (prefers-reduced-motion: reduce) { .sk-liste, .sk-liste.rull { animation: none; } }