/* forta.dk · åbningsdesign (spor webaabning, 24-10-2026) — KUN FORSLAG.
 * Grundlag: partneroplæggets forside (Torpnet/forta dok/partnerpitch-24-10, kilde/grafik.html #forside).
 * Familie med fortapay.dk: samme opbygning som Pays o-*-komponenter (hero med scene, tillidsstrimmel,
 * tal-bånd, skiftende storblokke, kontaktbånd) og samme skala (Inter, radius 10/14/20/28, bløde skygger).
 * Pays lilla er byttet ud med Fortas petrol → teal. Hero og tal-bånd er ens i lys og mørk, ligesom hos Pay. */
:root {
  --navy: #0B2E4F; --navy-2: #184365; --teal: #176F84; /* dybere end oplæggets #1A7E94: hero-tekst #D9F3F6 skal have ≥ 4,5:1 også i gradientens lyse ende (målt 4,06 → 4,97) */ --teal-2: #2BB3B8; --mint: #43E4E4; --cyan-lys: #9FF0F0;
  --hero-tekst: #D9F3F6;
  --bg: #F5F8FA; --flade: #FFFFFF; --flade-2: #EEF4F8; --kant: #D5E3EE;
  --tekst: #0F1F2E; --tekst-2: #44576A; --tekst-svag: #5A6D7E;
  --primaer: #136C82; --primaer-hover: #0E5568; --primaer-flade: #E3F3F6; --paa-primaer: #FFFFFF;
  --skygge-1: 0 1px 2px rgb(6 37 42 / .06), 0 1px 1px rgb(6 37 42 / .04);
  --skygge-2: 0 2px 4px rgb(6 37 42 / .06), 0 8px 24px -6px rgb(6 37 42 / .14);
  --skygge-3: 0 30px 70px -20px rgb(4 20 36 / .55);
  --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px;
  --ramme: 1200px;
  --skrift: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071726; --flade: #0D2235; --flade-2: #122C44; --kant: #1F3B55;
    --tekst: #E8F2F8; --tekst-2: #B2C6D5; --tekst-svag: #93AABB;
    --primaer: #5FD6DC; --primaer-hover: #8AE6EA; --primaer-flade: #0F3445; --paa-primaer: #04212C;
    --skygge-1: 0 1px 2px rgb(0 0 0 / .4); --skygge-2: 0 8px 24px -6px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #071726; --flade: #0D2235; --flade-2: #122C44; --kant: #1F3B55;
  --tekst: #E8F2F8; --tekst-2: #B2C6D5; --tekst-svag: #93AABB;
  --primaer: #5FD6DC; --primaer-hover: #8AE6EA; --primaer-flade: #0F3445; --paa-primaer: #04212C;
  --skygge-1: 0 1px 2px rgb(0 0 0 / .4); --skygge-2: 0 8px 24px -6px rgb(0 0 0 / .5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font-family: var(--skrift); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primaer); }
h1, h2, h3 { text-wrap: balance; margin: 0; font-family: inherit; font-weight: bold; color: inherit; letter-spacing: inherit; line-height: inherit; }
/* webaaben 25-10: font-family … line-height gentager browserens standard. De står her, fordi WordPress' global-styles
 * (theme.json) sætter h1-h6 til Sora, vægt 500, ink-900 og egen linjehøjde — med samme specificitet. På forslaget
 * ændrer de intet; på sitet holder de overskrifterne som i det godkendte design. */
.ramme { max-width: var(--ramme); margin: 0 auto; padding: 0 24px; }
@media (max-width: 559px) { .ramme { padding: 0 16px; } }
.skjul-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spring { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.spring:focus { left: 8px; }
/* webtilgret 31-10-2026 (webtilg3 fund 1): mint alene gav 1,41-1,56:1 mod de lyse flader, kravet er 3:1 (WCAG 1.4.11).
 * --tekst skifter selv med temaet; de flader der er mørke i BEGGE temaer beholder mint. kontrol/fokus.py --ring måler det. */
:focus-visible { outline: 3px solid var(--tekst); outline-offset: 2px; }
:is(.top, .hero, .baand, .kontakt, .partnere) :focus-visible, .spring:focus-visible { outline-color: var(--mint); }

/* ── Knapper ─────────────────────────────────────────── */
.knap { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.375rem;
  border-radius: 999px; font-weight: 650; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s; white-space: nowrap; }
.knap:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .knap:hover, .kort:hover { transform: none; } }
.knap-lys { background: #fff; color: var(--navy); }
.knap-lys:hover { background: var(--cyan-lys); }
.knap-glas { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .35); }
.knap-glas:hover { background: rgb(255 255 255 / .18); }
.knap-primaer { background: var(--primaer); color: var(--paa-primaer); }
.knap-primaer:hover { background: var(--primaer-hover); }
.knap-kant { color: var(--tekst); border-color: var(--kant); background: var(--flade); }

/* ── Topbjælke (ligger oven på heroen) ──────────────── */
.top { position: absolute; inset: 0 0 auto 0; z-index: 10; }
.top-indre { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.top-logo { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.6rem; letter-spacing: -.01em; }
.top-logo img { height: 34px; width: auto; }
.top-nav { display: flex; gap: .25rem; margin-left: 1.5rem; }
.top-nav a { color: var(--hero-tekst); text-decoration: none; padding: .5rem .8rem; border-radius: 999px; font-weight: 550; font-size: .95rem; }
.top-nav a:hover { background: rgb(255 255 255 / .1); color: #fff; }
.top-hoejre { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.top-hoejre .knap { min-height: 42px; padding: .5rem 1rem; font-size: .92rem; }
.menu { display: none; }
@media (max-width: 899px) {
  .top-nav, .top-hoejre .knap-glas { display: none; }
  .top-indre { height: 64px; gap: .75rem; }
  .top-logo { font-size: 1.35rem; } .top-logo img { height: 28px; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    color: #fff; border: 1px solid rgb(255 255 255 / .3); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu svg { width: 22px; height: 22px; }
  .menu-panel { position: absolute; right: 0; top: 52px; width: min(80vw, 300px); background: var(--flade); border: 1px solid var(--kant);
    border-radius: var(--r-lg); box-shadow: var(--skygge-2); padding: .5rem; display: grid; }
  .menu-panel a { color: var(--tekst); text-decoration: none; padding: .75rem .9rem; border-radius: var(--r-md); font-weight: 550; }
  .menu-panel a:hover { background: var(--flade-2); }
}

/* ── Hero ───────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; color: #fff; padding: 150px 0 110px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 45%, var(--teal) 100%); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { left: -220px; top: -280px; width: 900px; height: 900px; background: radial-gradient(circle, rgb(67 228 228 / .22), rgb(67 228 228 / 0) 70%); }
.hero::after { right: -320px; bottom: -460px; width: 1100px; height: 1100px; background: radial-gradient(circle, rgb(43 179 184 / .33), rgb(43 179 184 / 0) 70%); }
.hero-gitter { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; }
.pille { display: inline-flex; gap: .5rem; align-items: center; margin: 0; padding: .35rem .9rem .35rem .4rem; border-radius: 999px;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); font-size: .85rem; color: var(--hero-tekst); }
.pille b { background: var(--mint); color: var(--navy); border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; margin-top: 1.25rem; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--mint), var(--cyan-lys)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ingress { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--hero-tekst); margin: 1.5rem 0 0; max-width: 36ch; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.smaa { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--hero-tekst); font-size: .92rem; }
.smaa li { display: flex; gap: .45rem; align-items: center; }
.smaa svg { width: 18px; height: 18px; color: var(--mint); flex: none; }

.scene { position: relative; min-height: 470px; }
.browser { position: absolute; left: 0; top: 10px; width: 118%; border-radius: var(--r-xl); overflow: hidden; background: #0d2236;
  box-shadow: var(--skygge-3); border: 1px solid rgb(255 255 255 / .18); transform: perspective(1800px) rotateY(-9deg) rotateX(3deg); transform-origin: left center; }
.browser-top { display: flex; align-items: center; gap: .75rem; height: 34px; padding: 0 14px; background: rgb(255 255 255 / .08); }
.prikker { display: flex; gap: 6px; } .prikker i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .3); }
.adresse { font-size: .75rem; color: var(--hero-tekst); background: rgb(0 0 0 / .2); padding: .15rem .8rem; border-radius: 999px; }
.telefon { position: absolute; right: 2%; bottom: -70px; width: 31%; border-radius: 34px; overflow: hidden; border: 7px solid #071a2b;
  box-shadow: 0 30px 70px rgb(0 0 0 / .5); transform: rotate(5deg); background: #071a2b; }
.svaev { position: absolute; display: flex; gap: .65rem; align-items: center; background: rgb(255 255 255 / .96); color: var(--navy);
  border-radius: var(--r-lg); padding: .65rem .9rem; box-shadow: 0 18px 40px -10px rgb(0 0 0 / .45); font-size: .85rem; line-height: 1.3; }
.svaev b { display: block; font-size: .9rem; }
.svaev .ik { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #DDF5F6; color: var(--teal); flex: none; }
.svaev svg { width: 18px; height: 18px; }
.svaev-1 { left: -6%; bottom: 40px; }
.svaev-2 { right: 30%; top: -18px; }
@media (max-width: 899px) {
  .hero { padding: 104px 0 72px; }
  .hero-gitter { grid-template-columns: 1fr; gap: 2.5rem; }
  .scene { min-height: 0; aspect-ratio: 1 / .78; }
  .browser { width: 100%; transform: none; }
  .telefon { width: 34%; bottom: -24px; right: 2%; }
  .svaev-2 { display: none; }
  .svaev-1 { left: 0; bottom: -12px; }
}

/* ── Tillidsstrimmel ────────────────────────────────── */
.tillid { background: var(--flade); border-bottom: 1px solid var(--kant); }
.tillid ul { list-style: none; margin: 0; padding: 1.1rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.25rem;
  color: var(--tekst-2); font-size: .92rem; font-weight: 550; }
.tillid li { display: flex; gap: .5rem; align-items: center; }
.tillid svg { width: 18px; height: 18px; color: var(--primaer); flex: none; }

/* ── Sektioner ──────────────────────────────────────── */
.sek { padding: 5.5rem 0; }
@media (max-width: 899px) { .sek { padding: 3.75rem 0; } }
.overtitel { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primaer); }
.sek h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 780; margin-top: .6rem; max-width: 22ch; }
.lead { font-size: 1.125rem; color: var(--tekst-2); margin: 1rem 0 0; max-width: 60ch; }
.midt { text-align: center; } .midt h2, .midt .lead { margin-left: auto; margin-right: auto; }

/* Fra mange til ét */
.foer-efter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: stretch; margin-top: 3rem; }
.fe { border-radius: var(--r-xl); padding: 2rem; border: 1px solid var(--kant); background: var(--flade); box-shadow: var(--skygge-1); }
.fe h3 { font-size: 1.25rem; letter-spacing: -.01em; margin-top: .4rem; }
.fe-foer .overtitel { color: var(--tekst-svag); }
.fe-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.25rem; }
.fe-chips span { border: 1px dashed var(--kant); border-radius: var(--r-md); padding: .6rem .8rem; color: var(--tekst-2); font-size: .92rem; }
.fe-pil { display: grid; place-items: center; color: var(--primaer); }
.fe-pil svg { width: 40px; height: 40px; }
.fe-efter { background: linear-gradient(160deg, var(--primaer-flade), var(--flade) 70%); border-color: color-mix(in srgb, var(--primaer) 35%, var(--kant)); }
.tjek { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .65rem; }
.tjek li { display: flex; gap: .65rem; align-items: flex-start; }
.tjek svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--primaer); }
@media (max-width: 899px) { .foer-efter { grid-template-columns: 1fr; } .fe-pil svg { transform: rotate(90deg); } }

/* Storblokke, skiftende side (Pays o-stor) */
.stor { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.stor + .stor { margin-top: 6rem; }
.stor-venstre .billede { order: -1; }
.stor h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -.02em; margin-top: .5rem; }
.stor p { color: var(--tekst-2); margin: .9rem 0 0; }
.billede { position: relative; border-radius: var(--r-xl); padding: 18px; background: linear-gradient(135deg, var(--navy), var(--teal)); box-shadow: var(--skygge-2); }
.billede > img { border-radius: var(--r-lg); box-shadow: 0 10px 30px rgb(0 0 0 / .3); }
.billede-to { display: flex; gap: 18px; justify-content: center; padding: 28px 18px; }
.billede-to img { width: 44%; align-self: flex-start; border-radius: 26px; border: 5px solid #071a2b; box-shadow: 0 16px 40px rgb(0 0 0 / .4); }
/* weblasse 28-10: uden align-self strakte flex-raekken det foerste skud til raekkens hoejde (191x451 mod billedets 0,461) — Lighthouse image-aspect-ratio paa /, /forta/ og /forta-app/. */
.billede-to img + img { margin-top: 40px; }
@media (max-width: 899px) { .stor { grid-template-columns: 1fr; gap: 2rem; } .stor + .stor { margin-top: 4rem; } .stor-venstre .billede { order: 0; } }

/* Tal-bånd (ens i lys og mørk, som Pays o-tal-baand) */
.baand { background: linear-gradient(120deg, var(--navy), var(--navy-2) 55%, var(--teal)); color: #fff; }
.baand .ramme { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-top: 3rem; padding-bottom: 3rem; }
.noegle b { display: block; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; line-height: 1.15; }
.noegle span { display: block; margin-top: .35rem; color: var(--hero-tekst); font-size: .95rem; }
@media (max-width: 899px) { .baand .ramme { grid-template-columns: 1fr 1fr; } }

/* Familiekort */
.kortgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.kort { background: var(--flade); border: 1px solid var(--kant); border-radius: var(--r-xl); padding: 1.6rem; box-shadow: var(--skygge-1);
  display: flex; flex-direction: column; gap: .75rem; transition: transform .2s; }
.kort:hover { transform: translateY(-3px); box-shadow: var(--skygge-2); }
.kort-hoved { display: flex; align-items: center; gap: .75rem; }
.kort-ikon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(135deg, var(--navy-2), var(--teal-2)); }
.kort-ikon svg { width: 22px; height: 22px; }
.kort h3 { font-size: 1.2rem; letter-spacing: -.01em; }
.kort p { margin: 0; color: var(--tekst-2); }
.kort ul { margin: 0; padding-left: 1.1rem; color: var(--tekst-2); font-size: .95rem; }
.kort-fod { margin-top: auto; padding-top: .5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .92rem; }
.kort-fod a { font-weight: 650; text-decoration: none; }
.kort-pris { color: var(--tekst-svag); }

/* Tryghed */
.tryg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.tryg > div { background: var(--flade); border: 1px solid var(--kant); border-radius: var(--r-xl); padding: 1.5rem; }
.tryg .kort-ikon { width: 40px; height: 40px; border-radius: 11px; }
.tryg h3 { font-size: 1.05rem; margin-top: .9rem; }
.tryg p { margin: .4rem 0 0; color: var(--tekst-2); font-size: .95rem; }
@media (max-width: 1023px) { .tryg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .tryg { grid-template-columns: 1fr; } }

/* Kontaktbånd */
.kontakt { border-radius: var(--r-2xl); padding: clamp(2rem, 5vw, 3.75rem); color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 50%, var(--teal) 100%); display: grid; grid-template-columns: 1.3fr auto; gap: 2rem; align-items: center; }
.kontakt h2 { color: #fff; }
.kontakt p { color: var(--hero-tekst); margin: .9rem 0 0; max-width: 52ch; }
.kontakt .overtitel { color: var(--cyan-lys); }
.kontakt .cta { margin-top: 0; }
@media (max-width: 899px) { .kontakt { grid-template-columns: 1fr; } }

/* Fod */
.fod { border-top: 1px solid var(--kant); margin-top: 5rem; padding: 3.5rem 0 2.5rem; color: var(--tekst-2); font-size: .95rem; }
.fod-gitter { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.fod h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst); margin-bottom: .8rem; }
.fod ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.fod a { color: var(--tekst-2); text-decoration: none; } .fod a:hover { color: var(--primaer); }
.fod-logo img { height: 34px; width: auto; }
.fod-logo .moerk-logo { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fod-logo .lys-logo { display: none; } :root:not([data-theme="light"]) .fod-logo .moerk-logo { display: block; } }
:root[data-theme="dark"] .fod-logo .lys-logo { display: none; } :root[data-theme="dark"] .fod-logo .moerk-logo { display: block; }
.fod-bund { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--kant); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--tekst-svag); }
@media (max-width: 899px) { .fod-gitter { grid-template-columns: 1fr 1fr; } .fod-gitter > :first-child { grid-column: 1 / -1; } }
/* webundersider 26-10: på en telefon får produktlisten hele bredden. Målt på 393 px efter webrens: i en halv spalte
 * (164 px) brød «Forta Insight – Ejendom» efter tankestregen. Virksomhed og Juridisk står side om side under den. */
@media (max-width: 559px) { .fod-gitter > :nth-child(2) { grid-column: 1 / -1; } }
/* Ni modulkort står 3 × 3 på bred skærm, så der ikke er et enligt kort til sidst. */
@media (min-width: 900px) { #moduler .kortgitter { grid-template-columns: repeat(3, 1fr); } }

/* ── Variant 3 «vis alt» (24-10) ── */
.slogan { margin: 0; font-weight: 650; color: var(--primaer); font-size: .95rem; }
.afventer { display: inline-block; margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 650;
  letter-spacing: .02em; text-transform: uppercase; background: #FFF3C4; color: #5A4300; border: 1px dashed #B58A00; vertical-align: middle; }
.billede-en img { width: 46%; }
@media (min-width: 900px) { #familien .kortgitter[data-antal="9"] { grid-template-columns: repeat(3, 1fr); } }

/* ── Mærket «Illustration med fiktive data» (webskudmaerk 25-10 i variant 3; webaaben 25-10 også variant 2) ──
 * Rammen overtager billedets bredde, så intet flytter sig. Mærket ligger OVEN PÅ skuddets bund og må gå ud over
 * en smal telefon (393 px), fordi det skal stå på én linje. */
.illu-ramme { position: relative; display: block; }
.illu { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 650; line-height: 1.5; letter-spacing: .01em;
  background: rgb(4 20 36 / .86); color: #fff; border: 1px solid rgb(255 255 255 / .35); }
@media (max-width: 559px) { .illu { font-size: .64rem; padding: .1rem .45rem; bottom: 8px; } }
.billede > .illu-ramme > img { border-radius: var(--r-lg); box-shadow: 0 10px 30px rgb(0 0 0 / .3); }
.billede-to > .illu-ramme { width: 44%; align-self: flex-start; }
/* webaaben 25-10: uden align-self strakte flex begge rammer til rækkens højde (stretch). Mærket på det første skud
 * stod derfor 30 px UNDER sit billede (målt 1440 og 393, også i variant 3). Billedet selv flytter sig ikke. */
.billede-en > .illu-ramme { width: 46%; }
.billede-to > .illu-ramme > img { width: 100%; }
.billede-to > .illu-ramme + .illu-ramme { margin-top: 40px; }
/* I heroen sidder svævekortene ved skuddenes bund, så mærket står i toppen: i browseren til venstre (væk fra
 * svæv-2), i telefonen centreret. */
.scene .illu { top: 10px; bottom: auto; }
.browser .illu { left: 12px; transform: none; }
.telefon:has(.illu) { overflow: visible; }
.telefon .illu-ramme > img { border-radius: 27px; }

/* ── Partnere og integrationer (webaaben 25-10, efter fortapay.dk's «Partnere og forbindelser») ──
 * Mørk boks i heroens gradient i BEGGE temaer: hvert mærke står i sin officielle hvide/negative udgave, uændret
 * (billeder/partnere/KILDE.txt). Butiksmærkerne er Apples og Googles egne, 40 px høje (Apples mindstehøjde). */
.partnere { border-radius: var(--r-2xl); padding: clamp(2rem, 5vw, 3.25rem); color: #fff;
  background: linear-gradient(120deg, var(--navy), var(--navy-2) 55%, var(--teal)); box-shadow: var(--skygge-2); }
.partnere h2 { color: #fff; }
.partnere .overtitel { color: var(--cyan-lys); }
.partnerkort { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.75rem; }
.partnerkort > div { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border-radius: var(--r-lg);
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .16); }
.partnerkort img { height: 24px; width: auto; align-self: flex-start; margin-bottom: .5rem; }
/* Nets/Nexi (27-10): frizone = logoets højde hele vejen rundt. Mærket er 28 px højt (PNG'ens synlige del ≈ 25,7 px,
 * alfa-bbox 12-369 af 389), og 26 px margen + den indbyggede kant giver mindst én logohøjde til tekst og kortets kant. */
.partnerkort img.frizone { height: 28px; margin: 26px; }
.partnerkort b { font-size: 1.05rem; }
.partnerkort span { color: var(--hero-tekst); font-size: .92rem; line-height: 1.5; }
.butikker { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.butikker img { height: 40px; margin: 0; }
/* Googles PNG har sin egen margen: mærket fylder 76,8 % af højden (målt: alfa-bbox 29-221 af 250 px). 52 px giver
 * 40 px synligt mærke, samme højde som Apples. */
.butikker .gp { height: 52px; margin: -6px 0; }
/* Vipps 28-10: fem kort. Seks spor, så rækkerne fylder ud (3 + 2) frem for at efterlade et hul i et 4-gitter. */
@media (min-width: 900px) { .partnerkort { grid-template-columns: repeat(6, 1fr); }
  .partnerkort > div { grid-column: span 2; } .partnerkort > div:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 899px) { .partnerkort { grid-template-columns: 1fr 1fr; } }
/* Kun mens gitteret har 2 kolonner: under 560 px ville span 2 skabe et implicit 2. spor (målt 28-10: 31 px overløb ved 390). */
@media (min-width: 560px) and (max-width: 899px) { .partnerkort > div:last-child:nth-child(odd) { grid-column: span 2; } }
@media (max-width: 559px) { .partnerkort { grid-template-columns: 1fr; } }

/* webforsidelinks 26-10-2026: tekstlinks fra forsidens sektioner til de fem undersider (webseo B1 #2).
   Samme vægt og farve som kortenes «Læs mere →»; pilen glider en anelse ved hover. */
.mere { margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-weight: 650; }
.mere.midt { justify-content: center; }
.mere a { text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.mere a:hover { color: var(--primaer-hover); text-decoration: underline; text-underline-offset: 3px; }
.mere a span { transition: transform .15s ease; }
.mere a:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .mere a span { transition: none; } }