/* Forta Pay · den offentlige flade (G73/G74 bølge B2, spor pay-redesign-b2): forside, priser, udviklere.
 *
 * Et LILLE sidelag oven på B0's to filer (fp-tokens.css + fp-komponenter.css, linket før denne). Kun tokens: ingen hex,
 * ingen rgb()-tal — tests/test_prisside_uden_db.py `test_stilarket_bruger_kun_tokens` tæller dem. Lys og mørk følger
 * derfor tokens (`prefers-color-scheme` på :root) uden en eneste regel her.
 * Klasser her hedder `o-…` og står under `.fp` (B0's `.fp p { margin: 0 }` er 0,1,1 og ville ellers æde hver margin); alt der allerede findes som komponent, bruges som `fp-…` direkte i HTML'en.
 * CSP: ingen @import. Én url-henvisning: Inter-delsættet herunder (spor pay-lcp3), samme oprindelse.
 */

/* Inter-delsættet (spor pay-lcp3, scripts/inter_offentlig_byg.py): SAMME skrift med kun de tegn de offentlige sider
   bruger — 52 KB mod 73 KB. Står EFTER fp-komponenter.css' fulde Inter, så browseren vælger denne for tegnene i
   unicode-range; et tegn uden for den henter den fulde, der tegner samme glyf. Rangen er delsættets egne tegn
   (app/offentlig/static/inter-offentlig.json); tests/test_offentlig_lcp_uden_db.py holder dem ens. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-offentlig.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0020-007E,U+00A0,U+00A7,U+00A9,U+00AB,U+00AE,U+00B0-00B1,U+00B7,U+00BB,U+00BD,U+00C4-00C6,U+00C9,U+00D6-00D8,U+00DC,U+00DF,U+00E4-00E7,U+00E9,U+00F1,U+00F6,U+00F8,U+00FC,U+2009,U+2013-2014,U+2018-2019,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2212;
}

/* ── Skal ─────────────────────────────────────────────────────────── */
/* `hidden` skal vinde over komponenternes display (fx .fp-banner er flex): beregneren viser/skjuler med attributten. */
.fp [hidden] { display: none !important; }
/* `.fp a` (0,1,1) slår `.fp-knap` (0,1,0) på farven — en <a> som knap fik linkfarven, altså lilla tekst på lilla. */
.fp a.fp-knap { color: rgb(var(--k-fg)); text-decoration: none; }
.o-krop { min-height: 100vh; display: flex; flex-direction: column; }
.o-krop > main, .o-krop > .o-dok { flex: 1 0 auto; }
.fp .o-ramme { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.fp .o-spring { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: 0.5rem 1rem; border-radius: var(--fp-radius-md);
            background: rgb(var(--fp-primaer)); color: rgb(var(--fp-paa-primaer)); font-weight: 600; }
.fp a.o-spring { color: rgb(var(--fp-paa-primaer)); }
.fp .o-spring:focus { top: 0.75rem; }
.fp .o-top { position: sticky; top: 0; z-index: 20; background: rgb(var(--fp-bg) / 0.92); border-bottom: 1px solid rgb(var(--fp-kant)); }
@supports (backdrop-filter: blur(8px)) { .fp .o-top { backdrop-filter: blur(8px); } }
.fp .o-top-indre { display: flex; align-items: center; gap: 0.75rem 1.5rem; flex-wrap: wrap; padding-top: 0.75rem; padding-bottom: 0.75rem; }
/* Mærket er ét <picture> (spor pay-lcp3: kun temaets fil hentes). Blok med blok-<img> = samme 31×28-flexelement som
   før. Ikke `display: contents` — så blev <source> selv et flexelement, og gap'et skubbede bjælken 8 px (målt). */
.fp .o-maerke picture, .fp .o-maerke picture img { display: block; }
.fp .o-maerke { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: rgb(var(--fp-tekst)); }
.fp a.o-maerke { color: rgb(var(--fp-tekst)); text-decoration: none; }
.fp .o-ordmaerke { font-size: var(--fp-tekst-lg); font-weight: 700; letter-spacing: -0.01em; }
.fp .o-ordmaerke span { font-weight: 500; color: rgb(var(--fp-primaer)); }
.fp .o-nav { display: flex; gap: 0.25rem; order: 3; width: 100%; overflow-x: auto; }
.fp .o-nav-punkt { padding: 0.375rem 0.625rem; border-radius: var(--fp-radius-sm); font-weight: 500; white-space: nowrap; }
.fp a.o-nav-punkt { color: rgb(var(--fp-tekst-2)); text-decoration: none; }
.fp a.o-nav-punkt:hover { color: rgb(var(--fp-tekst)); background: rgb(var(--fp-flade-2)); }
.fp a.o-nav-punkt[aria-current="page"] { color: rgb(var(--fp-primaer)); background: rgb(var(--fp-primaer-flade)); font-weight: 600; }
.fp .o-top-hoejre { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.fp a.o-sprog { color: rgb(var(--fp-tekst-2)); font-weight: 500; font-size: var(--fp-tekst-sm); }
/* Én linje kræver ~1217 px (mærke 118 + menu 776 + knapper 283 + mellemrum, DA med «Log ind»), men rammen gav 1168: fra
 * 900 til 1440 px brød knapperne ned på en ny linje under menuen, og ved 900 px blev det tre linjer (spor pay-designloeft-web,
 * målt 24-10). Nu: under 1280 px står menuen på egen linje under mærke og knapper (som på tablet); fra 1280 px er
 * topbjælkens ramme 1280 px bred, så alt står på én linje. */
@media (min-width: 1280px) { .fp .o-nav { order: 0; width: auto; margin-left: 0.5rem; }
                             .fp .o-ramme.o-top-indre { max-width: 1312px; } }
.fp .o-fod { border-top: 1px solid rgb(var(--fp-kant)); padding: 2rem 0; margin-top: 3rem; color: rgb(var(--fp-tekst-svag));
         font-size: var(--fp-tekst-sm); text-align: center; }
.fp .o-fod p + p, .fp .o-fod nav + p, .fp .o-fod p + nav { margin-top: 0.5rem; }
.fp .o-fod-selskab { font-size: var(--fp-tekst-sm); }
.fp .o-fod-b1 { color: rgb(var(--fp-tekst-2)); font-weight: 500; }

/* ── Fælles tekst ─────────────────────────────────────────────────── */
.fp-sektion > h2 + p.fp-svag { text-align: center; margin-top: 0.5rem; }
.fp .o-midt-tekst { text-align: center; max-width: 70ch; margin: 1rem auto 0; }
.fp .o-note { font-size: var(--fp-tekst-sm); color: rgb(var(--fp-tekst-svag)); }
.fp .o-ingress { max-width: 62ch; font-size: var(--fp-tekst-md); color: rgb(var(--fp-tekst-2)); }
.fp .o-lille-h { font-size: var(--fp-tekst-sm); }
.fp .o-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.fp .o-liste li { display: flex; gap: 0.5rem; align-items: flex-start; }
.fp .o-liste-ja .fp-ikon { color: rgb(var(--fp-primaer)); margin-top: 0.1rem; }
.fp .o-liste-nej li::before { content: '–'; color: rgb(var(--fp-tekst-svag)); }
.fp .o-pris-plus { font-size: var(--fp-tekst-sm); color: rgb(var(--fp-tekst-2)); }
.fp .o-pakke-navn { font-size: var(--fp-tekst-lg); }
/* Forslag D4 (designløft): pakkernes beskrivelse fylder mindst to linjer, så priserne står på samme linje. */
@media (min-width: 900px) { .fp .o-pakker-2 .fp-pakke > .fp-svag { min-height: 2lh; } }

/* ── Prissiden ───────────────────────────────────────────────────── */
/* Spor pay-designloeft-web (24-10): med padding-bottom 0 sluttede hero-gradienten i en hård vandret kant lige under
 * ingressen (Priser, Om, Kontakt, Privatliv). Nu luft under teksten, og gradienten toner ud før kanten. */
.fp .o-hero-lille { padding-bottom: 2.5rem; }
.fp .o-hero-lille::before { bottom: 0; height: auto; -webkit-mask-image: linear-gradient(to bottom, rgb(var(--o-sort)) 55%, transparent);
                            mask-image: linear-gradient(to bottom, rgb(var(--o-sort)) 55%, transparent); }
@media (min-width: 900px) { .fp .o-hero-lille { padding-top: 3.5rem; } }
.fp .o-sektion-taet { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 900px) { .fp .o-pakker-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-left: auto; margin-right: auto; } }
.fp .o-beregner { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.fp .o-beregner > * { min-width: 0; }
@media (min-width: 960px) { .fp .o-beregner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.fp .o-form { display: flex; flex-direction: column; gap: 1rem; }
.fp .o-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fp .o-legend { font-weight: 600; font-size: var(--fp-tekst-sm); padding: 0; margin-bottom: 0.5rem; }
.fp .o-fordeling { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp .o-fordeling .fp-felt label { font-weight: 500; }
.fp .o-fieldset .fp-felt-hjaelp { margin-top: 0.5rem; }
.fp .o-afkryds { display: flex; gap: 0.625rem; align-items: flex-start; font-size: var(--fp-tekst-sm); cursor: pointer; }
.fp .o-afkryds input { width: 1.125rem; height: 1.125rem; margin: 0.1rem 0 0; flex: none; accent-color: rgb(var(--fp-primaer)); }
.fp .o-form .fp-knap { align-self: flex-start; }
.fp .o-resultat { display: flex; flex-direction: column; gap: 1rem; }
.fp .o-res-h { font-size: var(--fp-tekst-sm); font-weight: 600; color: rgb(var(--fp-tekst-2)); }
.fp .o-res-pakker { display: grid; gap: 0.75rem; }
@media (min-width: 560px) { .fp .o-res-pakker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp .o-res-pakke { padding: 1rem; border-radius: var(--fp-radius-md); background: rgb(var(--fp-flade-2)); display: flex; flex-direction: column; gap: 0.25rem; }
.fp .o-res-navn { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; }
.fp .o-res-pris { font-size: var(--fp-tekst-xl); font-variant-numeric: tabular-nums; }
.fp .o-res-pris strong { font-weight: 700; }
.fp .o-res-detalje { font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); font-variant-numeric: tabular-nums; }
.fp .o-samlet { margin-top: 0.75rem; font-size: var(--fp-tekst-md); }
.fp .o-samlet strong { font-variant-numeric: tabular-nums; }
.fp .o-roervaelger { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid rgb(var(--fp-kant)); padding-top: 1rem; }
.fp .o-roerliste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.fp .o-roer { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid rgb(var(--fp-kant)); flex-wrap: wrap; }
.fp .o-roer > span:first-child { flex: 1 1 auto; }
.fp .o-spar { color: rgb(var(--fp-primaer)); }
/* A6 (spor pay-web-a): partnertabellen stables under 640 px. Ved 375 px var tabellen 609 px bred i en 301 px ramme, og
 * «I alt»/«Partnere i alt» lå uden for skærmen uden tegn på at man kunne scrolle (syntese-web U1). Hver række bliver et
 * kort; cellen viser sin kolonne via `data-etiket`. Overskriftsrækken skjules visuelt, ikke for skærmlæsere. */
@media (max-width: 639px) {
  .fp .o-stabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fp .o-stabel, .fp .o-stabel tbody, .fp .o-stabel tfoot, .fp .o-stabel tr, .fp .o-stabel th, .fp .o-stabel td { display: block; width: 100%; }
  .fp .o-stabel tr { padding: 0.5rem 0; border-bottom: 1px solid rgb(var(--fp-kant)); }
  .fp .o-stabel tr[hidden] { display: none; }
  .fp .o-stabel th { position: static; padding: 0.25rem 0; border: 0; font-size: var(--fp-tekst-sm); color: rgb(var(--fp-tekst)); }
  .fp .o-stabel td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.125rem 0; border: 0; }
  .fp .o-stabel td::before { content: attr(data-etiket); color: rgb(var(--fp-tekst-svag)); text-align: left; }
  .fp .o-stabel tfoot tr { border-bottom: 0; }
  .fp .o-stabel tfoot th { display: none; }
}
.fp .o-partnere { margin-top: 1.5rem; }
.fp .o-partnere-en { max-width: 430px; margin-left: auto; margin-right: auto; }
.fp .o-partner { display: flex; flex-direction: column; gap: 0.375rem; }
.fp .o-partner h3 { margin-bottom: 0.25rem; }
.fp .o-detaljer summary { cursor: pointer; color: rgb(var(--fp-link)); font-size: var(--fp-tekst-sm); font-weight: 500; }
.fp .o-detaljer[open] summary { margin-bottom: 0.5rem; }
.fp .o-tabel-smal td { padding: 0.375rem 0.5rem; }
.fp .o-kilde { font-size: var(--fp-tekst-xs); color: rgb(var(--fp-tekst-svag)); margin-top: auto; padding-top: 0.5rem; }
.fp .o-tabel-smal, .fp .o-kilde a { overflow-wrap: anywhere; }

/* ── Forsiden (spor pay-web-b: den GODKENDTE prøveside, Andreas 20-10 «DESIGN GODKENDT · Hero A · Torp IT D») ──────
 * Kilde: origin/spor/pay-designsyntese rapporter/syntese-webdesign/proeveside.html. Prøvesidens egne farver er oversat til
 * B0's tokens; det der SKAL være ens i lys og mørk (hero-fladen, tal-båndet, enhedsrammerne) står som `--o-…`-tokens
 * herunder — tal-tripler, aldrig hex/rgb() i en regel, så tokenvagten (tests/test_prisside_uden_db.py) stadig gælder.
 * Ingen inline `style=` (CSP): zoom-udsnittene er egne filer (scripts/web_billeder.py), ikke CSS-koordinater i HTML'en.
 * Eneste bevægelse: 3 px løft ved hover, slået fra ved prefers-reduced-motion. */
:root {
  --o-hero-1: 29 11 36; --o-hero-2: 59 20 73; --o-hero-3: 93 33 115;
  --o-lilla: 160 63 191; --o-lilla-knap: 126 46 152; --o-lilac: 217 168 255; --o-lilac-lys: 243 217 255;
  --o-paa-lilac: 42 14 53; --o-hvid: 255 255 255; --o-sort: 0 0 0; --o-skyggefarve: 38 16 46;
  --o-hero-tekst: 230 214 238; --o-hero-svag: 216 196 226; --o-pille-tekst: 241 227 247; --o-knap-hover: 243 230 250;
  --o-mynte: 155 231 192; --o-telefon: 21 9 26; --o-telefon-kant: 58 42 66;
  --o-prik-1: 242 107 107; --o-prik-2: 242 193 74; --o-prik-3: 92 200 127;
}

/* Lys/mørk-billeder: begge findes, CSS viser det rigtige (samme regel som mærket, .fp-maerke-lys/-moerk). */
/* !important: `.fp .o-forside img { display: block }` er lige så specifik og ville ellers vise begge. */
.fp .o-m { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) .fp .o-l { display: none !important; }
                                      :root:not([data-tema="lys"]) .fp .o-m { display: block !important; } }
:root[data-tema="moerk"] .fp .o-l { display: none !important; }
:root[data-tema="moerk"] .fp .o-m { display: block !important; }
.fp .o-forside img { display: block; max-width: 100%; height: auto; }

/* Topbjælkens knap og menu: på smalle skærme ligger menuen på egen linje og ruller vandret i sig selv. */
.fp a.o-top-knap { white-space: nowrap; }
/* «Log ind» (spor pay-web-login): tydelig sekundær knap med lås, i samme højde som «Book». Kanten giver kontrast mod
 * topbjælken i begge temaer (primaer-flade alene flyder sammen med baggrunden i mørk). Synlig ved alle bredder. */
.fp .o-top-hoejre .fp-knap { min-height: 2.25rem; padding: 0.375rem 0.75rem; font-size: var(--fp-tekst-sm); }
/* Fra 900 px står menuen på topbjælkens første linje. Med den større «Log ind» manglede DA 14 px ved 1440 px (målt
 * 1182 px indhold mod 1168 px ramme), og knapperne brød ned på en ny linje. Med strammere mellemrum er der ~18 px til overs. */
@media (min-width: 900px) { .fp .o-top-indre { column-gap: 1rem; } .fp .o-top-hoejre { gap: 0.5rem; } }
.fp a.o-log-ind { gap: 0.4rem; white-space: nowrap; border-color: rgb(var(--fp-primaer) / 0.45); }
.fp a.o-log-ind:hover { border-color: rgb(var(--fp-primaer)); }
.fp .o-log-ind svg { width: 1rem; height: 1rem; flex: none; }
.fp .o-allerede { margin-top: 1rem; color: rgb(var(--o-hero-tekst)); font-size: var(--fp-tekst-sm); }
.fp a.o-log-ind-hero { color: rgb(var(--o-hvid)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 559px) { .fp .o-top-knap { display: none; } }
/* Spor pay-forside-ret fund 10: mobilmenuen var en vandret rulleliste skåret af ved «Sk…», og «Book en samtale» manglede.
 * Under 560 px: siderne og «Book» i menulinjen; forsidens afsnits-ankre skjules. */
.fp a.o-nav-book { display: none; }
@media (max-width: 559px) {
  .fp .o-nav-anker { display: none; }
  .fp .o-nav { gap: 0; }
  .fp .o-nav-punkt { padding: 0.375rem 0.5rem; }
  .fp a.o-nav-book { display: block; margin-left: auto; color: rgb(var(--fp-paa-primaer)); background: rgb(var(--fp-primaer)); font-weight: 600; }
  .fp a.o-nav-book:hover { color: rgb(var(--fp-paa-primaer)); background: rgb(var(--fp-primaer)); }
}

/* Fælles sektionstekst */
.fp .o-sek { padding: 4rem 0; }
@media (min-width: 900px) { .fp .o-sek { padding: 6rem 0; } }
.fp .o-sek-uden-top { padding-top: 0; }
.fp .o-sek-partnere { padding-top: 3rem; }   /* partnerkortene lige under heroen (Andreas 24-10 ~15:1x, dirigent valg B) */
.fp .o-overtitel { font-size: var(--fp-tekst-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--fp-primaer)); }
/* Overskrifter brydes balanceret: ingen enlige ord på sidste linje («…passerer / os», «…logger / ind» ved 375 px). */
.fp h1, .fp h2, .fp h3 { text-wrap: balance; }
.fp .o-sek h2 { margin-top: 0.625rem; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 750; max-width: 22ch; }
.fp .o-lead { margin-top: 0.875rem; font-size: var(--fp-tekst-lg); color: rgb(var(--fp-tekst-2)); max-width: 60ch; }
.fp .o-midt { text-align: center; }
.fp .o-midt h2, .fp .o-midt .o-lead { margin-left: auto; margin-right: auto; }
.fp .o-tjek { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fp .o-tjek li { display: flex; gap: 0.625rem; align-items: flex-start; }
.fp .o-tjek svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: rgb(var(--fp-primaer)); }
.fp .o-ikon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
              background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); }
.fp .o-ikon svg { width: 22px; height: 22px; }

/* Enhedsrammer (CSS, ingen tredjepartsbilleder) */
.fp .o-browser { border-radius: 14px; background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); overflow: hidden;
                 box-shadow: 0 24px 60px -16px rgb(var(--o-skyggefarve) / 0.35), var(--fp-skygge-1); }
.fp .o-browser-top { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: rgb(var(--fp-flade-2));
                     border-bottom: 1px solid rgb(var(--fp-kant)); }
.fp .o-prikker { display: flex; gap: 6px; }
.fp .o-prikker i { width: 10px; height: 10px; border-radius: 50%; display: block; background: rgb(var(--o-prik-1)); }
.fp .o-prikker i:nth-child(2) { background: rgb(var(--o-prik-2)); }
.fp .o-prikker i:nth-child(3) { background: rgb(var(--o-prik-3)); }
.fp .o-adresse { flex: 1; min-width: 0; max-width: 340px; margin: 0 auto; height: 20px; border-radius: 6px; background: rgb(var(--fp-flade));
                 border: 1px solid rgb(var(--fp-kant)); font-size: 11px; line-height: 18px; color: rgb(var(--fp-tekst-svag)); text-align: center;
                 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 8px; }
/* Telefonen: skuddet har ingen statuslinje, så en «ø» OVEN PÅ billedet dækkede sidens første linje (sprogvælgeren stod som
 * «glish Deutsch» — spor pay-designloeft-web 24-10). Øen sidder nu i rammens egen top, og skærmen begynder under den. */
.fp .o-telefon { width: 100%; max-width: 260px; border-radius: 40px; padding: 30px 10px 10px; background: rgb(var(--o-telefon)); position: relative;
                 box-shadow: 0 24px 60px -16px rgb(var(--o-skyggefarve) / 0.35), inset 0 0 0 2px rgb(var(--o-telefon-kant)); }
.fp .o-telefon::before { content: ''; position: absolute; top: 9px; left: 50%; width: 64px; height: 14px; margin-left: -32px;
                         border-radius: 8px; background: rgb(var(--o-telefon-kant)); z-index: 2; }
.fp .o-telefon img { border-radius: 10px 10px 30px 30px; width: 100%; }
.fp .o-flueben { width: 30px; height: 30px; border-radius: 50%; background: rgb(var(--fp-ok-flade)); color: rgb(var(--fp-ok));
                 display: grid; place-items: center; flex: none; }

/* ① Hero A: fuld lilla flade, produktet stort og overlappende */
.fp .o-hero-a { position: relative; overflow: hidden; color: rgb(var(--o-hvid)); padding: 3.5rem 0 0;
  background: radial-gradient(1200px 600px at 85% 10%, rgb(var(--o-lilla) / 0.85), transparent 60%),
              radial-gradient(900px 500px at 0% 100%, rgb(var(--o-lilla-knap) / 0.9), transparent 65%),
              linear-gradient(160deg, rgb(var(--o-hero-1)) 0%, rgb(var(--o-hero-2)) 45%, rgb(var(--o-hero-3)) 100%); }
.fp .o-hero-a::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgb(var(--o-hvid) / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--o-hvid) / 0.05) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: linear-gradient(to bottom, rgb(var(--o-sort)), transparent 75%);
  mask-image: linear-gradient(to bottom, rgb(var(--o-sort)), transparent 75%); }
.fp .o-hero-a .o-ramme { position: relative; z-index: 1; }
.fp .o-hero-tekst { max-width: 820px; margin: 0 auto; text-align: center; }
.fp .o-pille { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fp-tekst-sm); font-weight: 500; max-width: 100%;
               background: rgb(var(--o-hvid) / 0.1); border: 1px solid rgb(var(--o-hvid) / 0.2); color: rgb(var(--o-pille-tekst));
               border-radius: 999px; padding: 5px 12px 5px 6px; }
.fp .o-pille b { background: rgb(var(--o-lilac)); color: rgb(var(--o-paa-lilac)); border-radius: 999px; padding: 2px 8px; font-weight: 600; flex: none; }
.fp .o-hero-a h1 { margin-top: 1.375rem; font-size: clamp(2.6rem, 8vw, 5.25rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 850; }
.fp .o-hero-a h1 em { font-style: normal; color: transparent; -webkit-background-clip: text; background-clip: text;
                      background-image: linear-gradient(90deg, rgb(var(--o-lilac-lys)), rgb(var(--o-lilac)) 40%, rgb(var(--o-hvid))); }
.fp .o-hero-a .o-ingress-hero { margin: 1.375rem auto 0; color: rgb(var(--o-hero-tekst)); max-width: 44ch; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.fp .o-cta { margin-top: 1.75rem; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; align-items: center; }
.fp a.o-knap-hvid { background: rgb(var(--o-hvid)); border-color: rgb(var(--o-hvid)); color: rgb(var(--o-hero-2));
                    box-shadow: 0 10px 30px -8px rgb(var(--o-sort) / 0.45); }
.fp a.o-knap-hvid:hover { background: rgb(var(--o-knap-hover)); }
.fp a.o-tekstlink { color: rgb(var(--o-hvid)); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgb(var(--o-hvid) / 0.4); padding-bottom: 2px; }
.fp .o-smaa { margin: 1.125rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
              font-size: var(--fp-tekst-base); color: rgb(var(--o-hero-svag)); }
.fp .o-smaa li { display: inline-flex; gap: 6px; align-items: center; }
.fp .o-smaa svg { width: 16px; height: 16px; color: rgb(var(--o-mynte)); }
.fp .o-scene { position: relative; margin: 3rem auto 0; max-width: 1080px; }
.fp .o-scene .o-browser { box-shadow: 0 40px 100px -20px rgb(var(--o-sort) / 0.6), 0 0 0 1px rgb(var(--o-hvid) / 0.08); border-color: transparent;
                          border-radius: 14px 14px 0 0; }
.fp .o-scene .o-telefon { position: absolute; right: -2%; bottom: -24px; width: 23%; max-width: 250px; min-width: 120px; }
.fp .o-svaev { position: absolute; display: flex; gap: 10px; align-items: center; background: rgb(var(--fp-flade)); color: rgb(var(--fp-tekst));
               border: 1px solid rgb(var(--fp-kant)); border-radius: 12px; padding: 10px 14px; box-shadow: var(--fp-skygge-2); font-size: var(--fp-tekst-base); }
.fp .o-svaev b { display: block; font-variant-numeric: tabular-nums; }
.fp .o-svaev small { display: block; color: rgb(var(--fp-tekst-svag)); font-size: var(--fp-tekst-xs); }
.fp .o-svaev-1 { left: -3%; bottom: 22%; }
/* Forslag D3 (designløft, kræver DESIGN GODKENDT): over opsætningsmenuen, ikke over skuddets sidetitel. */
.fp .o-svaev-2 { left: -4%; top: 41%; }
.fp .o-svaev .o-ikon { width: 34px; height: 34px; }
@media (max-width: 760px) { .fp .o-svaev { display: none; } .fp .o-scene .o-telefon { right: 0; bottom: -16px; width: 34%; } }
@media (min-width: 900px) { .fp .o-hero-a .o-ramme { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* Tillidsbånd under hero'en */
.fp .o-tillid { position: relative; z-index: 2; background: rgb(var(--fp-flade)); border-bottom: 1px solid rgb(var(--fp-kant)); }
.fp .o-tillid .o-ramme { display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: center; align-items: center; padding-top: 22px;
                         padding-bottom: 22px; font-size: var(--fp-tekst-base); color: rgb(var(--fp-tekst-2)); }
.fp .o-tillid b { color: rgb(var(--fp-tekst)); }
.fp .o-tillid > div > span { display: inline-flex; gap: 8px; align-items: center; }
.fp .o-tillid svg { width: 18px; height: 18px; color: rgb(var(--fp-primaer)); flex: none; }

/* Store tal (mørkt bånd) */
.fp .o-tal-baand { background: rgb(var(--fp-sidebar)); color: rgb(var(--o-hvid)); }
.fp .o-tal-baand .o-ramme { padding-top: 3.5rem; padding-bottom: 3.5rem; display: grid; gap: 28px; }
@media (min-width: 760px) { .fp .o-tal-baand .o-ramme { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fp .o-tal-baand .o-ramme { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 4.5rem; padding-bottom: 4.5rem; } }
.fp .o-noegle { border-left: 3px solid rgb(var(--o-lilac)); padding-left: 18px; min-width: 0; }
.fp .o-noegle b { display: block; font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 850; letter-spacing: -0.04em; line-height: 1;
                  font-variant-numeric: tabular-nums; color: transparent; -webkit-background-clip: text; background-clip: text;
                  background-image: linear-gradient(180deg, rgb(var(--o-hvid)), rgb(var(--o-lilac))); }
/* Et ord som nøgletal (e-conomic): mindre, og aldrig brudt ved bindestregen */
.fp .o-noegle span { display: block; margin-top: 10px; font-size: var(--fp-tekst-md); color: rgb(var(--fp-sidebar-tekst)); max-width: 26ch; }

/* ② Sådan virker det */
.fp .o-trin4 { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 16px; counter-reset: t; }
@media (min-width: 760px) { .fp .o-trin4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fp .o-trin4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp .o-trin4 li { background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); border-radius: var(--fp-radius-lg); padding: 22px; min-width: 0; }
.fp .o-trin4 li::before { counter-increment: t; content: counter(t); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
                          background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); font-weight: 700; margin-bottom: 14px; }
.fp .o-trin4 h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.fp .o-trin4 p { margin-top: 6px; color: rgb(var(--fp-tekst-2)); }

/* Flow: faktura → påmindelse → rykker → betalt */
.fp .o-flow { list-style: none; padding: 0; margin: 2.75rem 0 0; display: grid; gap: 0; position: relative; }
@media (min-width: 900px) { .fp .o-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp .o-knude { position: relative; padding: 0 0 28px 64px; min-width: 0; }
@media (min-width: 900px) { .fp .o-knude { padding: 72px 14px 0 0; } }
.fp .o-prik { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
              background: rgb(var(--fp-flade)); border: 2px solid rgb(var(--fp-primaer) / 0.35); color: rgb(var(--fp-primaer)); z-index: 1; }
.fp .o-prik svg { width: 22px; height: 22px; }
.fp .o-knude::before { content: ''; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px;
                       background: repeating-linear-gradient(to bottom, rgb(var(--fp-primaer) / 0.45) 0 6px, transparent 6px 12px); }
@media (min-width: 900px) { .fp .o-knude::before { left: 48px; right: 0; top: 23px; bottom: auto; width: auto; height: 2px;
                            background: repeating-linear-gradient(to right, rgb(var(--fp-primaer) / 0.45) 0 6px, transparent 6px 12px); } }
.fp .o-knude:last-child::before { display: none; }
.fp .o-knude-betalt .o-prik { background: rgb(var(--fp-ok)); border-color: rgb(var(--fp-ok)); color: rgb(var(--fp-flade)); }
.fp .o-knude small { font-size: var(--fp-tekst-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--fp-tekst-svag)); }
.fp .o-knude h3 { font-size: var(--fp-tekst-lg); margin-top: 4px; }
.fp .o-knude p { margin-top: 6px; color: rgb(var(--fp-tekst-2)); max-width: 30ch; }
.fp .o-knude-betalt h3 { color: rgb(var(--fp-ok)); }
.fp .o-flow-note { margin-top: 1.75rem; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--fp-radius-lg);
                   background: rgb(var(--fp-ok-flade)); color: rgb(var(--fp-tekst)); }
.fp .o-flow-note svg { flex: none; width: 22px; height: 22px; color: rgb(var(--fp-ok)); margin-top: 1px; }

/* ③ Fem grunde — det fremhævede kort fylder to kolonner, så 1+2+2 / 2+3 går op uden et hul */
.fp .o-args { margin-top: 2.75rem; display: grid; gap: 14px; }
@media (min-width: 760px) { .fp .o-args { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp .o-arg-frem { grid-column: span 2; } }
@media (min-width: 1100px) { .fp .o-args { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp .o-arg { display: flex; gap: 16px; padding: 22px; background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); border-radius: var(--fp-radius-lg); min-width: 0; }
.fp .o-arg-frem { background: linear-gradient(135deg, rgb(var(--fp-primaer-flade)), rgb(var(--fp-flade)) 70%); border-color: rgb(var(--fp-primaer) / 0.25); }
.fp .o-arg h3 { font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.3; }
.fp .o-arg p { margin-top: 6px; color: rgb(var(--fp-tekst-2)); }
.fp .o-arg .o-fakta { margin-top: 10px; font-size: var(--fp-tekst-sm); color: rgb(var(--fp-tekst-svag)); }

/* ④ Integrationer */
.fp .o-integ { margin-top: 2.5rem; display: grid; gap: 16px; }
@media (min-width: 1000px) { .fp .o-integ { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.fp .o-gruppe { background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); border-radius: var(--fp-radius-lg); padding: 22px; min-width: 0; }
.fp .o-gruppe > p { margin-top: 6px; font-size: var(--fp-tekst-base); color: rgb(var(--fp-tekst-svag)); }
.fp .o-gruppe ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .fp .o-gruppe ul.o-kanaler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp .o-gruppe li { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: rgb(var(--fp-flade-2)); min-width: 0; }
.fp .o-gruppe li span { font-size: var(--fp-tekst-sm); color: rgb(var(--fp-tekst-2)); }

/* ⑤ Store produktbilleder med zoom-udsnit */
.fp .o-stor { margin-top: 4.5rem; }
.fp .o-stor-tekst { display: grid; gap: 12px 48px; align-items: end; }
@media (min-width: 1040px) { .fp .o-stor-tekst { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.fp .o-stor h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; line-height: 1.15; }
.fp .o-stor-tekst p { margin-top: 0.5rem; color: rgb(var(--fp-tekst-2)); }
.fp .o-stor .o-tjek { margin-top: 0; }
.fp .o-billede { position: relative; margin-top: 1.75rem; }
.fp .o-billede .o-browser { transition: transform 0.3s ease; }
.fp .o-billede:hover .o-browser { transform: translateY(-3px); }
/* Zoom-indsatsen (spor pay-designloeft-web, 24-10): udsnittet er sin EGEN fil skåret af et 4×-skud (scripts/web_billeder.py)
 * — før var det et CSS-udsnit af 1440 px-billedet, forstørret til opskaleret raster. Mærket står i sin egen bjælke over
 * udsnittet, så det aldrig dækker indhold (før lå det over kolonneoverskriften «Status»). */
.fp .o-zoom { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: rgb(var(--fp-flade));
              border: 2px solid rgb(var(--o-lilla-knap)); box-shadow: 0 24px 60px -12px rgb(var(--o-skyggefarve) / 0.45); margin-top: 16px; }
.fp .o-zoom img { width: 100%; height: auto; border-top: 1px solid rgb(var(--fp-kant)); }
.fp .o-zoom-maerke { align-self: flex-start; margin: 8px 10px; display: inline-flex; gap: 6px; align-items: center; font-size: var(--fp-tekst-xs);
                     font-weight: 700; color: rgb(var(--o-hvid)); background: rgb(var(--o-lilla-knap)); border-radius: 999px; padding: 4px 10px; }
.fp .o-zoom-maerke svg { width: 14px; height: 14px; }
@media (min-width: 1040px) { .fp .o-zoom { position: absolute; width: 56%; right: -8px; bottom: -48px; margin: 0; z-index: 3; }
                             .fp .o-billede-venstre .o-zoom { right: auto; left: -8px; } .fp .o-billede { margin-bottom: 64px; } }
/* Indsatsen stikker kun 24 px ud når rammen (1168 px) har 24 px fri på hver side; før det er gutteren 16 px, og -24 px gav
   8 px vandret rul mellem 1040 og 1215 px (målt 24-10, tests/e2e/test_e2e_web_overloeb.py). */
@media (min-width: 1216px) { .fp .o-zoom { right: -24px; } .fp .o-billede-venstre .o-zoom { left: -24px; } }
/* Spor pay-forside-ret fund 11: under 640 px er 1440 px-skuddet skaleret ned til ~360 px og teksten ulæselig. Dér står kun
 * zoom-udsnittet (sin egen 4×-fil), som er læseligt; hele skærmen vises fra 640 px. */
@media (max-width: 639px) { .fp .o-billede .o-browser { display: none; } .fp .o-billede .o-zoom { margin-top: 0; } }
.fp .o-mobilpar { margin-top: 2rem; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.fp .o-mobilpar .o-telefon { max-width: 240px; flex: 1 1 140px; }

/* ⑥ Skift-båndet (mørkt) */
.fp .o-moerkt { background: rgb(var(--fp-sidebar)); color: rgb(var(--fp-sidebar-tekst)); border-radius: var(--fp-radius-2xl); padding: 36px 20px; }
@media (min-width: 900px) { .fp .o-moerkt { padding: 56px; } }
.fp .o-moerkt h2 { color: rgb(var(--o-hvid)); }
.fp .o-moerkt .o-overtitel { color: rgb(var(--o-lilac)); }
.fp .o-moerkt .o-lead { color: rgb(var(--fp-sidebar-tekst)); }
.fp .o-skifttrin { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .fp .o-skifttrin { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp .o-skifttrin li { background: rgb(var(--fp-sidebar-flade)); border-radius: var(--fp-radius-lg); padding: 20px; min-width: 0; }
.fp .o-skifttrin b { display: block; color: rgb(var(--o-hvid)); margin-bottom: 6px; }
.fp .o-moerkt a.o-knap-lilac { margin-top: 1.75rem; background: rgb(var(--o-lilac)); border-color: rgb(var(--o-lilac)); color: rgb(var(--o-paa-lilac)); }
.fp .o-sml { margin-top: 1.75rem; width: 100%; border-collapse: collapse; font-size: var(--fp-tekst-base); }
.fp .o-sml th, .fp .o-sml td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgb(var(--o-hvid) / 0.12); vertical-align: top; }
.fp .o-sml th { color: rgb(var(--o-hvid)); font-weight: 600; }
.fp .o-sml td:first-child { color: rgb(var(--o-hvid)); }
@media (max-width: 640px) {
  .fp .o-sml thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fp .o-sml, .fp .o-sml tbody, .fp .o-sml tr, .fp .o-sml td { display: block; width: 100%; }
  .fp .o-sml tr { padding: 10px 0; border-bottom: 1px solid rgb(var(--o-hvid) / 0.12); }
  .fp .o-sml td { border: 0; padding: 2px 0; }
  .fp .o-sml td[data-etiket]::before { content: attr(data-etiket) ': '; color: rgb(var(--o-lilac)); font-weight: 600; }
}
.fp .o-sml-note { margin-top: 10px; font-size: var(--fp-tekst-xs); }

/* ⑦ Partnere (ord, ingen logoer) */
.fp .o-partnerkort { margin-top: 2.25rem; display: grid; gap: 14px; }
@media (min-width: 900px) { .fp .o-partnerkort { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
/* Fem kort (BS, Nets, kort, e-conomic, Vipps): 3 + 2 fra 900 px — en bevidst ombrydning frem for fem smalle søjler. */
@media (min-width: 900px) { .fp .o-partnerkort:has(> div:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
                            .fp .o-partnerkort:has(> div:nth-child(5)) > div { grid-column: span 2; }
                            .fp .o-partnerkort:has(> div:nth-child(5)) > div:nth-child(n+4) { grid-column: span 3; } }
/* Nets part of Nexi (27-10): frizone = logoets højde (x) på alle fire sider. 24 px høj; kortets 18 px polstring + 6 px
   margin = 24 px over og til venstre, 24 px under; kortet er mindst 220 px bredt, så højre side har mere end x. */
.fp img.o-nets-logo { display: block; width: 119px; height: auto; margin: 6px 0 24px 6px; }
/* Vipps-logoet (skal.vipps_logo): frirum 0,5x x-højden efter Vipps' guide; proportioner fra width/height. */
/* img.-vælgeren: `.fp .o-forside img { height: auto }` ovenfor er mere specifik end en ren klasse. 92 px = 24 px høj. */
.fp img.o-vipps-logo { display: block; width: 92px; height: auto; margin-bottom: 8px; }
.fp .o-partnerkort > div { border: 1px dashed rgb(var(--fp-kant)); border-radius: var(--fp-radius-lg); padding: 18px; background: rgb(var(--fp-flade)); min-width: 0; }
.fp .o-partnerkort b { display: block; }
.fp .o-partnerkort span { display: block; margin-top: 4px; font-size: var(--fp-tekst-base); color: rgb(var(--fp-tekst-2)); }
.fp .o-partnertekst { margin-top: 1.25rem; font-size: var(--fp-tekst-base); color: rgb(var(--fp-tekst-svag)); max-width: 80ch; }
/* «Samarbejdspartner med:» (spor pay-partnerlogoer) — INDE i heroen mellem tekst og produktscene (Andreas 24-10 ~15:1x/
 * ~15:2x: «skal ikke gemme sig», «det simple og rene look»). Ét lille label og én række logoer i ens højde, uden kasse:
 * hero'en er mørk i begge temaer, og alle tre mærker har en officiel hvid/negativ udgave. Højden er sat, bredden følger
 * filens forhold (`width: auto` — proportionerne må ikke ændres). Luften mellem logoerne ≥ logoets højde (Nexis frizone
 * «x», den strengeste af de tre). */
.fp .o-partnerbaand { margin: 1.5rem auto 0; text-align: center; }
/* Heroen må højst vokse med båndets egen højde (dirigent 24-10, valg B): luften om båndet tages af scenens 3rem. */
.fp .o-partnerbaand + .o-scene { margin-top: 1.5rem; }
.fp .o-partnerbaand-h { font-size: var(--fp-tekst-sm); font-weight: 600; letter-spacing: 0.01em; color: rgb(var(--o-hero-svag)); }
/* Nets part of Nexi (27-10): frizone = logoets højde x (18/24 px) på alle fire sider. Over: 24 px til labelen; vandret
   og mellem rækker: gap ≥ 24 px; under: scenens 1.5rem. Lagt på listen, ikke på punktet, så rækken forbliver én.
   18 px under 720 px (var 20): «Nets part of Nexi» er bredere end 24-10-logoet, og ved 375 px brød Vipps ellers ned. */
.fp .o-partnerbaand-liste { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap;
                            justify-content: center; align-items: center; gap: 24px 24px; }
.fp .o-partnerbaand-liste li { display: flex; align-items: center; min-width: 0; }
.fp .o-partnernavn { font-size: var(--fp-tekst-base); font-weight: 700; color: rgb(var(--o-hvid)); }
.fp .o-hero-a img.o-partnerlogo { height: 18px; width: auto; max-width: 100%; }
@media (min-width: 720px) {
  .fp .o-partnerbaand-liste { gap: 24px 44px; }
  .fp .o-hero-a img.o-partnerlogo { height: 24px; }
}
/* Betalingsservice i partnerkortet (skal.bs_logo): kun den negative udgave findes, så den står på hero'ens mørke farve. */
.fp .o-partnerkort .o-bs-logo { display: inline-flex; width: max-content; padding: 7px 10px; margin: 0 0 8px; border-radius: 6px; background: rgb(var(--o-hero-2)); }
.fp .o-partnerkort .o-bs-logo img { display: block; height: 20px; width: auto; }

/* ⑧ Priser */
.fp .o-priser { margin-top: 2.5rem; display: grid; gap: 14px; }
@media (min-width: 900px) { .fp .o-priser { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp .o-pris { background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); border-radius: var(--fp-radius-lg); padding: 24px;
              display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fp .o-pris-anb { border: 2px solid rgb(var(--fp-primaer)); }
.fp .o-pris h3 { font-size: var(--fp-tekst-lg); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fp .o-pris-tal { font-size: 2.125rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fp .o-pris-tal small { font-size: var(--fp-tekst-md); font-weight: 500; color: rgb(var(--fp-tekst-svag)); }
.fp .o-pris p:not(.o-pris-tal) { color: rgb(var(--fp-tekst-2)); }
.fp .o-maerkat { font-size: var(--fp-tekst-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgb(var(--fp-primaer-flade));
                 color: rgb(var(--fp-primaer)); border-radius: 999px; padding: 2px 8px; }
.fp .o-prisplus { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; font-weight: 600; color: rgb(var(--fp-tekst)); }
.fp .o-prisplus span { display: inline-flex; gap: 8px; align-items: center; }
.fp .o-prisplus svg { width: 18px; height: 18px; color: rgb(var(--fp-primaer)); }
.fp .o-prisnote { margin-top: 1rem; font-size: var(--fp-tekst-base); color: rgb(var(--fp-tekst-svag)); text-align: center; }

/* Bag Forta Pay (Torp IT D, forslag B) */
.fp .o-bag { display: grid; gap: 24px; align-items: center; background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant));
             border-radius: var(--fp-radius-2xl); padding: 28px 20px; }
@media (min-width: 900px) { .fp .o-bag { grid-template-columns: 260px minmax(0, 1fr); padding: 40px 48px; gap: 48px; } }
.fp .o-bag > * { min-width: 0; }
.fp .o-bag img { width: 220px; }
.fp .o-sek .o-bag h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; max-width: none; }
.fp .o-bag p { margin-top: 10px; color: rgb(var(--fp-tekst-2)); max-width: 62ch; }
.fp .o-bag .o-fakta-linje { margin-top: 14px; font-size: var(--fp-tekst-base); color: rgb(var(--fp-tekst-svag)); }
.fp .o-bag a.o-ud { display: inline-flex; margin-top: 16px; font-weight: 600; }

/* ⑨ Kontakt */
.fp .o-kontakt { display: grid; gap: 28px; background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); border-radius: var(--fp-radius-2xl);
                 padding: 28px 20px; box-shadow: var(--fp-skygge-2); }
@media (min-width: 900px) { .fp .o-kontakt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 40px 48px; gap: 40px; } }
.fp .o-kontakt > * { min-width: 0; }
.fp .o-sek .o-kontakt h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; }
.fp .o-kontakt p { margin-top: 8px; color: rgb(var(--fp-tekst-2)); }
.fp .o-kontakt .o-linjer { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 600; }
.fp .o-knapper { display: flex; flex-direction: column; gap: 10px; }

/* Sidefoden: «Forta Pay er en del af …» (Torp IT D, forslag A) og topbjælkens Om-logo (forslag C) */
.fp .o-fod-ejer { display: flex; justify-content: center; margin-bottom: 1rem; }
.fp a.o-fod-ejer-link { display: inline-flex; align-items: center; gap: 12px; color: rgb(var(--fp-tekst-2)); text-decoration: none; font-weight: 500; }
.fp a.o-fod-ejer-link:hover span { text-decoration: underline; }
.fp .o-fod-ejer img { width: 92px; height: auto; display: block; }
.fp .o-om-ejer { margin-top: 1.5rem; display: inline-grid; place-items: center; gap: 10px; padding: 24px 28px; border-radius: var(--fp-radius-xl);
                 background: rgb(var(--fp-flade)); border: 1px solid rgb(var(--fp-kant)); font-size: var(--fp-tekst-sm); color: rgb(var(--fp-tekst-svag)); }
.fp a.o-om-ejer { color: rgb(var(--fp-tekst-svag)); text-decoration: none; }
.fp .o-om-ejer img { width: 200px; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) { .fp .o-billede .o-browser { transition: none; } .fp .o-billede:hover .o-browser { transform: none; } }

/* ── Udviklere ───────────────────────────────────────────────────── */
/* Forslag D6 (designløft): samme ramme som topbjælken (1312 px), så venstrekanten flugter med logoet. */
.fp .o-dok { display: grid; max-width: 1312px; width: 100%; margin: 0 auto; }
@media (min-width: 1100px) { .fp .o-dok { grid-template-columns: 250px minmax(0, 1fr); } }
.fp .o-dok > * { min-width: 0; }
.fp .o-dok-nav { display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.75rem 1rem; border-bottom: 1px solid rgb(var(--fp-kant)); }
.fp .o-dok-nav a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: var(--fp-radius-sm);
                   color: rgb(var(--fp-tekst-2)); text-decoration: none; font-size: var(--fp-tekst-sm); white-space: nowrap; }
.fp .o-dok-nav a:hover { background: rgb(var(--fp-flade-2)); }
.fp .o-dok-nav a[aria-current] { background: rgb(var(--fp-primaer-flade)); color: rgb(var(--fp-primaer)); font-weight: 600; }
.fp .o-dok-nav-etiket { display: none; }
@media (min-width: 1100px) {
  .fp .o-dok-nav { flex-direction: column; overflow-x: visible; padding: 1.5rem 1rem; border-bottom: 0; border-right: 1px solid rgb(var(--fp-kant));
               position: sticky; top: 4rem; align-self: start; max-height: calc(100vh - 4rem); overflow-y: auto; }
  .fp .o-dok-nav a { white-space: normal; }
  .fp .o-dok-nav-etiket { display: block; margin: 1rem 0.625rem 0.25rem; }
}
.fp .o-dok-indhold { padding: 1.5rem 1rem 3rem; }
@media (min-width: 1100px) { .fp .o-dok-indhold { padding: 2.5rem 2.5rem 4rem; } }
.fp .o-dok-hoved { display: flex; flex-direction: column; gap: 0.625rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgb(var(--fp-kant)); }
.fp .o-dok-knapper { margin-top: 0.5rem; }
.fp .o-dok-afsnit { margin-top: 2rem; }
.fp .o-dok-afsnit > h2 { margin-bottom: 0.5rem; }
.fp .o-ref-gitter { margin-top: 1rem; }
.fp .o-ref-kort h3 { font-size: var(--fp-tekst-md); }
.fp .o-prosa p + p { margin-top: 0.75rem; }
.fp .o-prosa code, .fp .o-op code, .fp .o-dok-afsnit code { overflow-wrap: anywhere; }
.fp .o-toc { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.fp .o-dok-indhold-liste ul { margin: 0.5rem 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--fp-tekst-sm); }
.fp .o-op { display: grid; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid rgb(var(--fp-kant)); scroll-margin-top: 4.5rem; }
@media (min-width: 1240px) { .fp .o-op { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 2rem; align-items: start; } }
.fp .o-op > * { min-width: 0; }
.fp .o-op-tekst h2 { font-size: var(--fp-tekst-xl); line-height: var(--fp-lh-xl); }
.fp .o-op-tekst h3 { margin-top: 1.25rem; font-size: var(--fp-tekst-sm); text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--fp-tekst-svag)); }
.fp .o-op-sti { margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fp .o-op-sti code { overflow-wrap: anywhere; }
.fp .o-op-beskrivelse { margin-top: 0.75rem; color: rgb(var(--fp-tekst-2)); }
.fp .o-op-beskrivelse p + p, .fp .o-param-tekst p + p { margin-top: 0.5rem; }
.fp .o-param-tekst { color: rgb(var(--fp-tekst-svag)); }
@media (max-width: 559px) { .fp .o-op .fp-param, .fp .o-dok-afsnit .fp-param { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1240px) { .fp .o-op-kode { position: sticky; top: 4.5rem; } }
.fp-kodeblok pre:focus-visible { outline: 2px solid rgb(var(--fp-fokus)); outline-offset: -2px; }
.fp .o-dok-afsnit .fp-kodeblok { margin-top: 0.75rem; }
.fp .o-op-tekst h3 code { text-transform: none; letter-spacing: 0; color: rgb(var(--fp-tekst)); }

/* ── Om, Kontakt, Privatliv (spor pay-web-a) ─────────────────────── */
.fp .o-info { max-width: 70ch; }
.fp .o-info.fp-kort { max-width: 42rem; }
/* Spor pay-forside-ret fund 17: infosidernes overskrift er centreret, men teksten og kortene stod til venstre, så højre
 * halvdel af Om-siden var tom. Blokken står nu midt under overskriften; teksten i den er stadig venstrestillet. */
.fp .o-info { margin-left: auto; margin-right: auto; }
.fp .o-privatliv h2 { margin-top: 1.75rem; font-size: var(--fp-tekst-lg); }
.fp .o-privatliv h2:first-child { margin-top: 0; }
.fp .o-info p + p { margin-top: 0.75rem; }