/* Kapas — salgssiden for nettsider. Ett sted for farger, typografi og komponenter.

   Retning, endret 11.10.2026 (runde 17), etter eierens to ordrer: demosiden
   ut («ser veldig amatørmessig»), og agenten ut av førsteskjermen og ned i «en
   liten chat boks nede til høyre». Resten bæres av fire ting, i denne
   rekkefølgen:

     1. Førsteskjermen: ren tekst på blekk, med begge handlingene.
     2. Tegnede figurer: oppslaget i agenten, hvor boksen står på kundens egen
        side, prisene skalert mot hverandre, og stegstreken.
     3. Produktet som bevis: chatboksen svarer med motorens egne ord, og
        kontrollene som hører til bygget følger kilden.
     4. Én bevegelse: opacity og translateY når en blokk kommer inn i bildet.
        Den faller helt bort under prefers-reduced-motion.

   Blekk rammer inn papiret: topplinje, førsteskjerm, agentseksjon, kontakt og
   bunntekst. Skriftene ligger i assets/fonts/. Skrevet om 11.10.2026 (runde 14);
   forrige utgave ligger i tmp/r14/bak/. */

@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
}

:root {
  /* Blekket er nesten svart med et grønt drag i seg, ikke en mørk grønnfarge.
     Det er det som skiller papir fra blekk i denne retningen, ikke metning. */
  --ink: #0d1714;
  --ink-2: #17251f;
  --ink-3: #22342c;
  --paper: #f6f5f1;
  --paper-2: #eae8e2;
  --white: #ffffff;
  --muted: #454c48;
  --muted-2: #575f5a;
  --green: #16553d;
  --green-dark: #0f3d2c;
  --green-lift: #8fcaae;
  --green-soft: rgba(22, 85, 61, 0.07);
  --amber: #8a5209;
  /* Hakemerket i en liste på blekk. Fargen står i kontrast.py, og målingen
     krever at den er den samme her. */
  --hake: #7fb79f;
  --line: rgba(13, 23, 20, 0.14);
  --line-2: rgba(13, 23, 20, 0.32);
  --line-inv: rgba(246, 245, 241, 0.18);
  /* Kanten på en knapp eller en brikke er ikke en hårlinje: den skal telle som
     grensesnitt og holde 3:1 mot flaten den står på. 42 % gir 3,8:1 på blekk.
     Målt i kontrast.py. */
  --line-knapp: rgba(246, 245, 241, 0.42);
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 4.25rem;
  --wrap: 1320px;
  --gutter: clamp(1.25rem, 3.6vw, 3rem);
  --luft: clamp(3.5rem, 6vw, 5.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, figcaption { margin: 0; }
button { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: 0.9375rem; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.section--ink :focus-visible, .site-header :focus-visible { outline-color: var(--green-lift); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1.1rem;
  border-radius: 0 0 2px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Topplinjen ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid var(--line-inv);
}
.header-inner {
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem);
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: 0 0 auto; }
.brand-mark {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: var(--green); color: var(--paper);
  border-radius: 4px; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.04em;
}
.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { font-size: 1.0625rem; letter-spacing: -0.02em; }
.brand-text span { font-size: 0.8125rem; color: rgba(246, 245, 241, 0.66); }
.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: clamp(0.9rem, 1.9vw, 1.7rem); }
.nav-list a { text-decoration: none; font-size: 0.9688rem; color: rgba(246, 245, 241, 0.82); white-space: nowrap; }
.nav-list a:hover { color: var(--paper); }
.header-actions { flex: 0 0 auto; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line-knapp);
  color: var(--paper); padding: 0.5rem 0.8rem; border-radius: 2px; font-size: 0.9375rem;
}
@media (max-width: 1119px) {
  .nav-toggle { display: block; }
  .nav { display: none; }
  .nav.is-open { display: block; position: absolute; left: 0; right: 0; top: var(--header-h);
    background: var(--ink-2); border-bottom: 1px solid var(--line-inv); padding: 1.25rem var(--gutter) 1.5rem; }
  .nav.is-open .nav-list { display: grid; gap: 0.9rem; }
  .header-actions { margin-left: 0.75rem; }
}
@media (max-width: 560px) {
  .brand-text span { display: none; }
  .header-actions .btn { padding: 0.6rem 0.85rem; font-size: 0.9375rem; }
}
/* Under 480 px ble topplinjen 47 px bredere enn dokumentet, målt i Chromium
   11.10.2026. Avstanden, merkefirkanten og de to små knappene krymper, slik at
   alt står på én linje. Ingenting skjules. */
@media (max-width: 480px) {
  .header-inner { gap: 0.6rem; }
  .brand { gap: 0.5rem; }
  .brand-mark { width: 1.9rem; height: 1.9rem; font-size: 1.05rem; }
  .nav-toggle { padding: 0.45rem 0.6rem; font-size: 0.875rem; }
  .header-actions .btn { padding: 0.5rem 0.7rem; font-size: 0.875rem; letter-spacing: -0.02em; }
}

/* ---------- Knapper ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.8rem 1.35rem; border-radius: 2px;
  border: 1px solid transparent; font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.015em; text-decoration: none; cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn--sm { min-height: 2.6rem; padding: 0.55rem 1rem; font-size: 0.9688rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--green); border-color: var(--green); color: var(--white); }
.btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(13, 23, 20, 0.04); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Mørke varianter av knappene ----------
   På blekk bytter knappene til papir, fordi grønn mot blekk gir 2,1:1 og da
   forsvinner kanten. Sekundærknappen får papirkant, ikke grønn. */
.site-header .btn--primary, .site-footer .btn--primary, .section--ink .btn--primary,
.hero .btn--primary {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.site-header .btn--primary:hover, .site-footer .btn--primary:hover,
.section--ink .btn--primary:hover, .hero .btn--primary:hover {
  background: var(--white); border-color: var(--white);
}
.site-header .btn--ghost, .site-footer .btn--ghost, .section--ink .btn--ghost,
.hero .btn--ghost {
  color: var(--paper); border-color: var(--line-knapp);
}
.site-header .btn--ghost:hover, .site-footer .btn--ghost:hover,
.section--ink .btn--ghost:hover, .hero .btn--ghost:hover {
  border-color: var(--paper); background: rgba(246, 245, 241, 0.08);
}
/* ---------- Førsteskjermen ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: rgba(246, 245, 241, 0.78);
  padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(2.75rem, 5.5vw, 5rem);
}
/* Runde 17: agenten flyttet ut av førsteskjermen. Da er det ingen andre
   kolonne å fylle, og teksten får hele bredden. h1 bryter i to linjer ved
   1440, 1280, 1024 og 900 px, målt med mal_innhold.py. */
.hero-inner { display: grid; }
.hero-text { min-width: 0; }
.display {
  font-size: clamp(2.05rem, 3.5vw, 3.25rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1.04;
  text-wrap: balance; color: var(--paper); margin-bottom: 1.05rem;
  max-width: 52rem;
}
.display em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -0.01em; color: var(--green-lift);
}
/* .lead setter --muted, og står lenger ned i arket. Uten .hero foran
   tapte denne, og støttelinjen ble mørk grå på blekk. Målt 11.10.2026. */
.hero-lead, .hero .lead { font-size: clamp(1.0313rem, 1.15vw, 1.1875rem);
  color: rgba(246, 245, 241, 0.76); max-width: 52ch; }
.hero-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ---------- Agenten: en liten boks nederst til høyre ----------
   Eierens ord 11.10.2026: «dette skal komme som en liten chat boks nede til
   høyere, ikke stort på selve siden». Med skript ligger boksen fast i hjørnet
   og starter lukket; uten skript står details-elementet åpent, slik at
   utvekslingen er en del av dokumentet i stedet for en tom boks. Panelet er
   360 px bredt og høyst 520 px høyt, og på mobil er det et ark i full bredde.
   Målt med mal_bredder.py, kontrast.py og tmp/r17/maal_chat.py. */
.chat { position: fixed; right: var(--gutter); bottom: 1rem; z-index: 70; }
.chat-knapp {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem;
  list-style: none; cursor: pointer; background: var(--ink-2); color: var(--paper);
  border: 1px solid var(--line-knapp); border-radius: 99px; padding: 0.55rem 1.1rem;
  font-size: 0.9688rem; font-weight: 600;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
}
.chat-knapp::-webkit-details-marker { display: none; }
.chat-knapp:hover { background: var(--ink-3); }
.chat-ikon { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: 0 0 auto; }
.chat-knapp-tekst { white-space: nowrap; }
.chat-panel {
  position: fixed; right: var(--gutter); bottom: calc(1rem + 3.3rem);
  width: min(23rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(32.5rem, 68vh);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.8rem;
  background: var(--ink); border: 1px solid var(--line-knapp); border-radius: 10px;
  padding: 0.95rem; box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 0.95);
}
.chat-topp { font-size: 0.875rem; color: rgba(246, 245, 241, 0.72); margin: 0; }
/* Innmaten i boksen. Reglene sto under konsollen til runde 17. Konsollen er
   borte, men loggen, meldingene, kildeetiketten, feltet og brikkene er de
   samme, og de hører nå til .chat-panel. */
.agent-logg {
  display: grid; gap: 0.6rem; align-content: start;
  min-height: 9rem; max-height: none; overflow-y: auto; min-width: 0;
  padding: 0.85rem; border-radius: 6px; background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line-inv); font-size: 0.9375rem;
}
.agent-melding { margin: 0; padding: 0.6rem 0.75rem; border-radius: 4px; line-height: 1.5; max-width: 46ch; font-size: 0.9375rem; }
.agent-melding--agent { background: rgba(246, 245, 241, 0.08); color: var(--paper); }
.agent-melding--deg { background: var(--green); color: var(--white); justify-self: end; }
.agent-melding--agent.er-usikker { background: rgba(138, 82, 9, 0.16); }
.agent-kilde { display: block; margin-top: 0.35rem; font-size: 0.75rem; color: rgba(246, 245, 241, 0.62); }
.agent-form { display: grid; gap: 0.5rem; }
.agent-form label { font-size: 0.9375rem; font-weight: 600; color: var(--paper); }
.agent-rad { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.agent-rad input {
  flex: 1 1 9rem; min-width: 0; font: inherit; font-size: 1rem; min-height: 2.75rem;
  padding: 0.6rem 0.8rem; border-radius: 4px; border: 1px solid var(--line-knapp);
  background: rgba(246, 245, 241, 0.06); color: var(--paper);
}
.agent-rad input::placeholder { color: rgba(246, 245, 241, 0.5); }
.agent-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  background: transparent; border: 1px solid var(--line-knapp); color: var(--paper);
  border-radius: 99px; padding: 0.35rem 0.7rem; font-size: 0.8125rem; cursor: pointer;
}
.chip:hover { border-color: var(--paper); background: rgba(246, 245, 241, 0.1); }
/* Sammendraget i henvendelsesskjemaet staar pa hvitt kort. Den forrige regelen
   var skrevet for den morke konsollen og ga papirfarge pa hvitt. */
.summary {
  font-family: var(--mono); font-size: 0.8125rem; white-space: pre-wrap; word-break: break-word;
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 4px;
  padding: 0.85rem 0.95rem; color: var(--ink); margin: 0;
}
.agent-note { font-size: 0.8125rem; color: rgba(246, 245, 241, 0.62); margin: 0; }
@media (max-width: 480px) {
  .chat { right: 0.75rem; bottom: 0.75rem; }
  .chat-panel { left: 0; right: 0; width: auto; bottom: 4.1rem; max-height: 74vh;
    border-radius: 10px 10px 0 0; }
}

/* ---------- Seksjonene ---------- */
.section { padding-block: var(--luft); border-top: 1px solid var(--line); }
.section--ink { background: var(--ink); color: rgba(246, 245, 241, 0.78); border-top: 0; }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
}
.section-title { font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: -0.038em; text-wrap: balance; }
.section--ink .section-title, .section--ink h3 { color: var(--paper); }
.lead { font-size: 1.0313rem; color: var(--muted); }
.section--ink .lead { color: rgba(246, 245, 241, 0.76); }
.footnote { font-size: 0.9375rem; color: var(--muted-2); }
.section--ink .footnote { color: rgba(246, 245, 241, 0.72); }

/* ---------- Tegnede figurer ---------- */
.tegning { width: 100%; height: auto; }
.tegning .t-navn { font-size: 19px; font-weight: 600; fill: var(--ink); }
.tegning .t-liten { font-size: 15px; fill: var(--muted-2); }
.tegning .t-tall { font-size: 18px; font-weight: 600; fill: var(--green-dark); }
.tegning .t-spor { fill: var(--line); }
.tegning .t-fyll { fill: var(--green); }
.tegning .t-fyll--valgt { fill: var(--green-dark); }
.tegning .t-boks { fill: none; stroke: var(--line-2); stroke-width: 1; }
.tegning .t-strek { stroke: var(--line-2); stroke-width: 1.6; fill: none; }
.tegning .t-pil { fill: var(--line-2); stroke: none; }
.section--ink .tegning .t-navn { fill: var(--paper); }
.section--ink .tegning .t-liten { fill: rgba(246, 245, 241, 0.72); }
.section--ink .tegning .t-boks { stroke: var(--line-knapp); }
.section--ink .tegning .t-strek { stroke: rgba(246, 245, 241, 0.55); }
.section--ink .tegning .t-pil { fill: rgba(246, 245, 241, 0.55); }
/* De to tegningene har forholdet sitt i viewBoxen. Regelen laaser det
   eksplisitt, saa ingen av dem strekkes om nettleseren ikke leser
   forholdet ut av viewBox, og ingen av dem vokser forbi kolonnen sin. */
.tegning--priser { aspect-ratio: 560 / 158; }
.tegning--oppslag { aspect-ratio: 780 / 300; }
.fig-priser { display: grid; gap: 0.75rem; max-width: 620px; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
/* Tegningen av hvor boksen står. Fyllet er den lyse grønnfargen, ikke den
   mørke: mørk grønn mot blekk er 1,8:1, og da forsvinner boksen. Målt i
   kontrast.py. */
.fig-plassering { display: grid; gap: 0.9rem; max-width: 46rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.tegning--plassering { aspect-ratio: 780 / 240; }
.tegning--plassering .t-fyll { fill: var(--green-lift); }
.tegning--plassering .t-strek-lys { fill: var(--ink); opacity: 0.45; }
.section--ink .tegning .t-spor { fill: rgba(246, 245, 241, 0.16); }
.fig-plassering figcaption { font-size: 0.875rem; color: rgba(246, 245, 241, 0.72); }
.fig-priser figcaption, .fig-oppslag figcaption { font-size: 0.875rem; color: var(--muted-2); }
.section--ink .fig-oppslag figcaption { color: rgba(246, 245, 241, 0.72); }

/* ---------- Pakkene ---------- */
.pkg-note {
  font-size: 0.9375rem; color: var(--muted-2);
  border-top: 2px solid var(--ink); padding-top: 1rem; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}
.pkg-grid { display: grid; gap: 0; border-bottom: 1px solid var(--line); }
.pkg {
  display: grid; gap: 1rem; align-content: start;
  padding: 1.5rem 0 1.9rem; border-top: 1px solid var(--line); min-width: 0;
}
.pkg--pick { background: var(--green-soft); box-shadow: inset 0 3px 0 var(--green); }
@media (min-width: 900px) {
  .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0; }
  .pkg { padding: 1.6rem clamp(1rem, 1.8vw, 1.75rem) 2rem; border-top: 0; border-bottom: 1px solid var(--line); }
  .pkg + .pkg { border-left: 1px solid var(--line); }
}
.card-title { font-size: clamp(1.45rem, 1.9vw, 1.85rem); letter-spacing: -0.035em; }
/* Tittelen og den korte linjen hoerer sammen og skal staa tett. Uten denne
   regelen arvet de mellomrommet til hele pakkekortet. */
.pkg-head { display: grid; gap: 0.35rem; }
.pkg-lead { font-size: 0.9375rem; color: var(--muted); max-width: 26ch; }
.skala { display: grid; gap: 0.5rem; }
.skala-bar { height: 0.4rem; background: var(--line); border-radius: 99px; overflow: hidden; }
.skala-bar span { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.skala--1 .skala-bar span { width: 20%; }
.skala--2 .skala-bar span { width: 53%; }
.skala--3 .skala-bar span { width: 100%; }
.skala-tekst { font-size: 0.9375rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.pkg-price { display: grid; gap: 0.2rem; }
.pris-tall {
  font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 600; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pkg--pick .pris-tall { font-size: clamp(1.75rem, 2.7vw, 2.35rem); }
.pris-mva { font-size: 0.9375rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.pris-note { font-size: 0.875rem; color: var(--muted-2); }
.pkg-cta { margin-top: 0.35rem; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; background: var(--white); border-top: 2px solid var(--ink); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 100%; font-size: 0.9375rem; }
caption {
  text-align: left; padding: 0.9rem 1.1rem; font-size: 0.875rem; color: var(--muted-2);
  border-bottom: 1px solid var(--line);
}
th, td { text-align: left; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 0.9375rem; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody td + td, thead th + th { border-left: 1px solid var(--line); }
td.valgt, th.valgt { background: var(--green-soft); color: var(--ink); font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* ---------- Agenten ---------- */
.agent-grid { display: grid; gap: clamp(1.75rem, 3.2vw, 3rem); }
@media (min-width: 960px) {
  .agent-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); align-items: start; }
}
.fig-oppslag { display: grid; gap: 0.9rem; min-width: 0; }
.agent-side { display: grid; gap: 1.25rem; align-content: start; }
.agent-side h3 { font-size: 1.125rem; }
.agent-side .pkg-price { border-top: 1px solid var(--line-inv); padding-top: 0.9rem; }
.agent-side .pris-tall { font-size: clamp(1.4rem, 1.9vw, 1.75rem); color: var(--paper); }
.agent-side .pris-mva, .agent-side .pris-note { color: rgba(246, 245, 241, 0.72); }
.agent-forbehold {
  margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line-inv);
  font-size: 0.9375rem; color: rgba(246, 245, 241, 0.76); max-width: 84ch;
}
.agent-forbehold strong { color: var(--paper); }
.agent-fallback { margin-top: 1.75rem; border-top: 1px solid var(--line-inv); padding-top: 1.1rem; }
.agent-fallback > p { font-size: 0.9375rem; color: rgba(246, 245, 241, 0.72); max-width: 74ch; }
.agent-fallback details { border-bottom: 1px solid var(--line-inv); }
.agent-fallback summary { cursor: pointer; padding: 0.85rem 0; font-weight: 600; color: var(--paper); }
.agent-fallback p { font-size: 0.9375rem; color: rgba(246, 245, 241, 0.72); margin-bottom: 1rem; }
html.js .agent-fallback { display: none; }

/* ---------- Stegene: fire i én rad, med en tegnet linje gjennom raden ---------- */
.steg-rutenett { position: relative; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steg-linje {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  width: 100%; pointer-events: none;
}
.steg-linje line { stroke: var(--line); stroke-width: 2; }
.steg { display: grid; gap: 0.7rem; align-content: start; padding: 1.5rem 0 1.8rem; border-bottom: 1px solid var(--line); min-width: 0; }
.steg-nr {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center; margin: 0;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--line-2);
  font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums;
}
.steg h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.steg p { font-size: 0.9375rem; color: var(--muted); max-width: 42ch; }
@media (min-width: 900px) {
  .steg-rutenett { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steg { padding: 1.6rem clamp(1rem, 1.8vw, 1.6rem) 1.9rem; border-bottom: 0; }
  .steg:first-child { padding-left: 0; }
  .steg + .steg { border-left: 1px solid var(--line); }
}

/* ---------- Spørsmålene ---------- */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 1.15rem 3rem 1.15rem 0; position: relative;
  font-size: 1.0938rem; font-weight: 600; letter-spacing: -0.022em; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 1.55rem;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2);
  transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--green-dark); }
.faq-body { padding: 0 0 1.25rem; max-width: 78ch; }
.faq-body p { font-size: 1.0313rem; color: var(--muted); }

/* ---------- Kontakten ---------- */
.kontakt-grid { display: grid; gap: clamp(1.75rem, 3.2vw, 3rem); }
@media (min-width: 960px) { .kontakt-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; } }
.kontakt-side { display: grid; gap: 1.2rem; align-content: start; }
.kontakt-side h3 { font-size: 1.1875rem; color: var(--paper); }
.check { display: grid; gap: 0.55rem; }
.check li { position: relative; padding-left: 1.3rem; font-size: 0.9375rem; color: var(--muted); }
.check li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--green);
}
.section--ink .check li { color: rgba(246, 245, 241, 0.76); }
.section--ink .check li::before { background: var(--hake); }
/* Kontaktveien, lagt inn 11.10.2026 da eieren svarte på `epost` og `mottak`.
   Adressen og nummeret står bare i lenkene i markupen, og begge virker uten
   skript. 76 % papir på blekk er det samme paret som kontrast.py måler. */
.kontakt-vei-knapper { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.form { display: grid; gap: 1.3rem; background: var(--white); padding: clamp(1.3rem, 2.6vw, 2rem); border-top: 2px solid var(--ink); }
.section--ink .form { border-top-color: var(--green-lift); }
/* Skjemaet står på papir inne i en mørk seksjon. Fargen må settes her, ellers
   arver etikettene den lyse teksten og blir usynlige. Funnet ved å se på
   skjermbildet 11.10.2026. */
.form { color: var(--ink); }
.form .btn--primary { background: var(--green); border-color: var(--green); color: var(--white); }
.form .btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.form .btn--ghost { color: var(--ink); border-color: var(--line-2); }
.form .btn--ghost:hover { border-color: var(--ink); background: rgba(13, 23, 20, 0.04); }
.form-row { display: grid; gap: 1.3rem; }
@media (min-width: 620px) { .form-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field label { font-size: 0.9375rem; font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; min-height: 3rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--paper);
  color: var(--ink); width: 100%;
}
.field select { cursor: pointer; }
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green);
}
.form .field-hint, .form .form-note { color: var(--muted-2); }
.form-foot { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.form-note { font-size: 0.9375rem; color: var(--muted-2); border-top: 1px solid var(--line); padding-top: 1rem; }
.section--ink .form-note { color: rgba(246, 245, 241, 0.72); border-top-color: var(--line-inv); }
/* Fotnoten inne i skjemaet står på hvitt, også når seksjonen er mørk. */
.section--ink .form .form-note { color: var(--muted-2); border-top: 0; padding-top: 0; }
.form .form-note { border-top: 0; padding-top: 0; }
/* Svartiden er et løfte, ikke en fotnote. Den står rett under knappen. */
.form .form-note.form-svartid { color: var(--ink); font-weight: 600; }

.dok { border-top: 2px solid var(--ink); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.dok > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1rem 2.5rem 1rem 0; font-weight: 600; font-size: 1.0313rem;
}
.dok > summary::-webkit-details-marker { display: none; }
.dok > summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 1.4rem;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2);
  transform: rotate(45deg);
}
.dok[open] > summary::after { transform: rotate(-135deg); }
/* Sammenligningstabellen ligger rett under pakkekortene og skal ikke
   konkurrere med dem: lavere toppmarg og en dempet overskrift. */
.dok .table-wrap { margin-top: 0.5rem; }
.dok--tabell { margin-top: clamp(1.5rem, 2.2vw, 1.9rem); }
.dok--tabell > summary { font-size: 0.9375rem; color: var(--muted); }

/* Rammen har blekkbakgrunn, så billedteksten må være lys. Målt med
   mal_tekstfarger.py 11.10.2026: arvet blekk ga 1,00:1. */

/* ---------- Vilkårene. Dokumentet VILKAR_salg_1011.md v1.1, bygget inn av
   tmp/r17/bygg_vilkar.py mellom markørene i index.html. Teksten er et dokument
   og ikke markedsføring; ordbudsjettet for kundens vei teller den ikke, og
   avsnittet måles i stedet med egne kontroller i sjekk_salg.py. */
.section--vilkar { background: var(--paper-2); border-top: 1px solid var(--line-2);
  padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.section--vilkar h3 { font-size: 1.0938rem; margin-top: clamp(1.5rem, 2.4vw, 2rem); }
/* Hvert nummererte punkt far en harlinje over seg, sa teksten kan
   skannes uten at den blir en vegg. */
.vilkar-punkt { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.section--vilkar p, .section--vilkar li { font-size: 0.9688rem; color: var(--muted); max-width: 78ch; }
.section--vilkar p + p { margin-top: 0.8rem; }
.vilkar-selger {
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--green);
  padding: 1rem 1.2rem; max-width: 78ch; margin-bottom: 1rem;
}
.vilkar-selger p { color: var(--muted); }
.vilkar-liste { display: grid; gap: 0.5rem; margin: 0.6rem 0 0; max-width: 78ch; }
.vilkar-liste li { position: relative; padding-left: 1.2rem; }
.vilkar-liste li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--green);
}
.vilkar-tabell { margin-top: 0.9rem; background: var(--white); }
.vilkar-blind {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Vilkarene star lukket bak en liten knapp nederst, etter eierens ord
   11.10.2026. Knappen er hvit med blekk-kant og blekk-tekst: en harlinje alene
   gir 2,1:1 mot papir-2, og er ikke nok til aa se ut som en knapp. */
.vilkar-skjult { max-width: 78ch; }
.vilkar-knapp {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem;
  list-style: none; cursor: pointer; padding: 0.5rem 1.05rem; border-radius: 99px;
  background: var(--white); color: var(--ink); border: 1px solid var(--ink-2);
  font-size: 0.9375rem; font-weight: 600;
}
.vilkar-knapp::-webkit-details-marker { display: none; }
.vilkar-knapp::after {
  content: ""; width: 0.45rem; height: 0.45rem;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg) translate(-0.1rem, 0.1rem);
}
.vilkar-skjult[open] .vilkar-knapp::after {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
}
.vilkar-knapp:hover { border-color: var(--ink); background: var(--paper); }
.vilkar-dok { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }

/* ---------- Bunnteksten ---------- */
.site-footer {
  background: var(--ink); color: rgba(246, 245, 241, 0.74);
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem) 1.75rem; font-size: 0.9375rem;
}
.footer-inner { display: grid; gap: 2rem; }
@media (min-width: 880px) { .footer-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr); gap: clamp(2rem, 4vw, 4rem); } }
.footer-tekst { margin-top: 1rem; max-width: 42ch; }
.site-footer a { text-decoration-color: rgba(246, 245, 241, 0.35); }
.site-footer .brand-mark { background: var(--paper); color: var(--ink); }
.footer-title { color: var(--paper); font-weight: 600; font-size: 1rem; margin-bottom: 0.8rem; }
.footer-list { display: grid; gap: 0.5rem; }
.footer-bottom {
  margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line-inv);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; font-size: 0.875rem;
  color: rgba(246, 245, 241, 0.64);
}

/* ---------- Bevegelse ----------
   Én gest: opacity og translateY når en blokk kommer inn i bildet. Blokkene
   får klassen av site.js, slik at innhold uten skript står stille og synlig. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
  html.js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Attributtet hidden skal alltid skjule, ogsa for knapper med display satt. */
[hidden] { display: none !important; }

/* ---------- Rutenett som må kunne krympe ----------
   En tabell har et minsteinnhold bredere enn en telefon. Ligger den i et
   rutenettelement uten min-width: 0, tar elementet minsteinnholdet sitt i
   stedet for å krympe, og hele dokumentet får sidelengs rulling. Målt i
   Chromium 11.10.2026. Rettet på rutenettene, ikke på tabellen. */
.malt-grid > *, .agent-grid > *, .kontakt-grid > *, .pkg-grid > *, .steg-rutenett > *,
.footer-inner > *, .section-head > *, .hero-inner > *, .bevis-stripe > * { min-width: 0; }
.table-wrap > table { min-width: 100%; }

@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .header-inner { gap: 0.5rem; }
  .nav-toggle { padding: 0.42rem 0.5rem; }
  .header-actions .btn { padding: 0.45rem 0.6rem; }
}