/* Self-hostede fonts — serveres fra jeres egen server (fonts/). Ingen kald til Google. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/opensans-400.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:'Open Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/opensans-400i.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:'Open Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/opensans-500.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:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/opensans-600.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:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/opensans-700.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:'Open Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/opensans-800.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrainsmono-400.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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrainsmono-500.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:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrainsmono-600.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}
:root{
  --mint:#afddd9; --mint-100:#eef7f5; --mint-200:#d8efeb; --mint-300:#c4e7e1;
  --navy:#274a68; --navy-900:#16304a; --navy-700:#1f3d57;
  --white:#ffffff; --verify:#147e6c; --flag:#c07f27; --flag-text:#9c661a;
  --text:#28404e; --muted:#56697c;
  /* Lys tekst paa moerk bund. Fandtes foer som 8 haardkodede hex-vaerdier spredt
     over filen, hvoraf to par var utilsigtede dubletter (#aac4cb/#a8c4cc og
     #e8f1f3/#eaf4f5 adskilte sig med 2 i én kanal). Nu én ramme, staerkest foerst. */
  --on-dark-100:#eaf4f5;  /* fremhaevet tekst paa moerk bund */
  --on-dark-200:#cfe3e6;  /* broedtekst og lede paa navy */
  --on-dark-300:#bcd6da;  /* daempet: kortbroedtekst, stat-labels */
  --on-dark-400:#aac4cb;  /* footer broedtekst og links, noter */
  --on-dark-500:#8fb0b9;  /* footer-blurb */
  --on-dark-600:#7fa6b0;  /* svagest: footer-bund, brand-tag */
  --bg:#ffffff; --bg-alt:#f3faf8;
  --line:rgba(39,74,104,.14); --line-strong:rgba(39,74,104,.28);
  --shadow-sm:0 1px 2px rgba(22,48,74,.06), 0 2px 8px rgba(22,48,74,.06);
  --shadow-md:0 10px 30px -12px rgba(22,48,74,.28);
  --shadow-lg:0 30px 60px -24px rgba(22,48,74,.40);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --wrap:1180px;
  /* "Furniture"-radier: ikoner, ikon-fliser, ticks, smaa dekorative elementer.
     DESIGN.md's Shapes-afsnit siger allerede at disse "skalerer til deres eget
     format" i stedet for at foelge de fire overflade-trin ovenfor — det er en
     bevidst afvigelse, ikke drift. Tokens goer vaerdierne navngivne og
     genanvendelige i stedet for spredte magiske tal. */
  --r-2:2px; --r-3:3px; --r-4:4px; --r-5:5px; --r-6:6px;
  --r-7:7px; --r-8:8px; --r-9:9px; --r-12:12px; --r-14:14px;
  --font-body:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Typografisk skala. DESIGN.md's syv ROLLER (display/headline/title/lede/
     body/label/metric) beskriver HVORFOR en stoerrelse bruges; denne skala er
     HVILKE praecise trin der faktisk forekommer i implementeringen — samme
     princip som Open Props' --font-size-N: et fortloebende, navngivet
     nummereret trin, ikke en opdigtet "formaals"-etiket for hver af de i
     forvejen dokumenterede genbrugte roller. Naerliggende vaerdier under 0,02rem
     (~0,3px, umaerkeligt) er lagt sammen — se kommentaren ved hvert trin, der
     har flere kilder. Titel-stoerrelserne (1,1–1,22rem) er IKKE lagt sammen:
     DESIGN.md's Title-raekke dokumenterer udtrykkeligt, at de varierer bevidst
     pr. komponent ("token is the ceiling, not a fixed value"). */
  --fs-1:.52rem; --fs-2:.54rem; --fs-3:.56rem;
  --fs-4:.6rem;   /* + .58rem, .62rem lagt sammen (maks 0,02rem forskel) */
  --fs-5:.64rem;  /* + .66rem */
  --fs-6:.7rem; --fs-7:.72rem; --fs-8:.74rem;
  --fs-9:.78rem;  /* + .8rem */
  --fs-10:.84rem; /* + .82rem, .85rem */
  --fs-11:.86rem; --fs-12:.88rem; --fs-13:.9rem;
  --fs-14:.92rem; /* + .93rem */
  --fs-15:.95rem; /* + .94rem */
  --fs-16:.97rem; /* + .96rem */
  --fs-17:.98rem;
  --fs-18:1rem;   /* + 1.02rem */
  --fs-19:1.05rem;
  --fs-20:1.1rem; /* + 1.08rem */
  --fs-21:1.12rem;
  --fs-22:1.14rem; /* + 1.15rem */
  --fs-23:1.18rem; --fs-24:1.2rem; --fs-25:1.22rem; --fs-26:1.25rem;
  --fs-27:1.4rem; --fs-28:1.55rem; --fs-29:2.6rem;
  /* Roden: body defineret i px (ikke rem) fordi den ER 1rem's basis — cirkulaert
     at udtrykke den i rem af sig selv. Navngivet alligevel for konsistens. */
  --fs-root:17px; --fs-root-sm:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg);font-size:var(--fs-root);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{color:var(--navy);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--navy);text-decoration:none}
/* height:auto er noedvendig sammen med max-width:100% — uden den bliver et
   billede med width/height-attributter forvraenget, naar CSS skalerer bredden. */
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--verify);outline-offset:2px;border-radius:var(--r-6)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:var(--fs-7);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--verify)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--verify);display:inline-block}
.eyebrow.on-dark{color:var(--mint)} .eyebrow.on-dark::before{background:var(--mint)}
.lede{font-size:var(--fs-21);color:var(--muted);max-width:62ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:var(--fs-17);letter-spacing:-.01em;padding:.85rem 1.4rem;border-radius:999px;border:1.5px solid transparent;transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-900);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-mint{background:var(--mint);color:var(--navy)}
.btn-mint:hover{background:var(--mint-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--navy);background:var(--mint-100)}
.btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-lg{padding:1rem 1.7rem;font-size:var(--fs-19)}
.section{padding:clamp(64px,9vw,118px) 0}
.section-alt{background:var(--bg-alt)}
.section-navy{background:var(--navy);color:var(--on-dark-100)}
.section-navy h2,.section-navy h3{color:#fff}
.section-navy .lede{color:var(--on-dark-200)}
.section-navy .svc h3{color:var(--navy)}
.center{text-align:center}
.head-block{max-width:680px;margin:0 auto 56px}
.head-block.center .lede{margin-left:auto;margin-right:auto}
.head-block h2{margin:.5rem 0 .8rem}
.ruled{position:relative}
.ruled::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:linear-gradient(var(--mint),var(--verify));border-radius:var(--r-3)}
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.header.scrolled{box-shadow:0 6px 24px -16px rgba(22,48,74,.5)}
.nav{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:38px;height:38px;border-radius:var(--r-9);box-shadow:var(--shadow-sm)}
.brand b{font-size:var(--fs-21);color:var(--navy);font-weight:800;letter-spacing:-.02em;line-height:1}
.brand .tag{display:block;font-family:var(--font-mono);font-size:var(--fs-6);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;gap:4px;margin-left:18px}
.nav-links a{font-weight:600;font-size:var(--fs-15);color:var(--navy);padding:.5rem .8rem;border-radius:var(--r-8);position:relative;transition:background .18s}
.nav-links a:hover{background:var(--mint-100)}
.nav-links a.active{color:var(--verify)}
.nav-links a.active::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.18rem;height:2px;background:var(--verify);border-radius:var(--r-2)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang-toggle{display:inline-flex;border:1.5px solid var(--line-strong);border-radius:999px;overflow:hidden;font-family:var(--font-mono)}
.lang-toggle a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;background:transparent;border:0;padding:.5rem .9rem;font-size:var(--fs-8);font-weight:600;letter-spacing:.05em;color:var(--muted)}
.lang-toggle a.on{background:var(--navy);color:#fff}
.link-login{font-weight:700;font-size:var(--fs-15);color:var(--navy);padding:.5rem .6rem;background:transparent;border:0}
.link-login:hover{color:var(--verify)}
.burger{display:none;flex-direction:column;gap:5px;background:transparent;border:0;padding:8px;margin-left:4px}
.burger span{width:24px;height:2.5px;background:var(--navy);border-radius:var(--r-2);transition:transform .25s,opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:74px 0 0;background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateX(100%);transition:transform .32s var(--ease);z-index:90;padding:28px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu>a{font-size:var(--fs-26);font-weight:700;color:var(--navy);padding:.7rem 0;border-bottom:1px solid var(--line)}
/* Aktuel side i mobilmenuen. Manglede helt: linket havde class="active" og
   aria-current="page" i markup, men saa ud som de fire andre, saa desktops
   du-er-her-signal blev droppet paa telefon. Streg i venstre side frem for
   understregning, saa den ikke forveksles med den groenne fokusring. */
.mobile-menu>a.active{color:var(--verify);padding-left:.7rem;box-shadow:inset 3px 0 0 var(--verify)}
.mobile-menu .mm-cta{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.mobile-menu .mm-cta .btn{width:100%}
.page{display:none}
.page.active{display:block;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,92px) 0 clamp(60px,8vw,104px);background:radial-gradient(120% 90% at 88% -10%,var(--mint-100) 0%,transparent 55%),linear-gradient(180deg,#fff,#fbfdfd)}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;opacity:.5;mask-image:radial-gradient(110% 80% at 70% 0%,#000,transparent 70%);-webkit-mask-image:radial-gradient(110% 80% at 70% 0%,#000,transparent 70%);pointer-events:none}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;position:relative}
.hero-copy h1{margin:.8rem 0 1.1rem}
.hero-copy h1 em{font-style:normal;color:var(--verify);white-space:nowrap}
.hero-copy .lede{margin-bottom:1.8rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.hero-chip{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-10);font-weight:600;color:var(--navy)}
.hero-chip svg{width:18px;height:18px;color:var(--verify)}
/* ANIMATE (2026-08-17): heltens enheds-mockup havde altid sin egen koreografi
   (flueben der fyldes, fremgangslinje, PDF der glider op via startDevice()),
   men tekst-siden poppede ind uden entré — de to halvdele fortalte historien
   usamtidigt. Nu glider teksten ind i laesefoelge, tidsstyret saa det sidste
   led (tjekpunkterne) begynder lige som enhedens foerste flueben starter
   (500ms i site.js) — helten bliver ét sammenhaengende aabningstraek.
   Genbruger --ease og keyframe 'fade' (allerede defineret) for konsistens
   med resten af sitet i stedet for en ny kurve. */
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .lede,.hero-copy .hero-cta,.hero-copy .hero-chips{
  opacity:0;animation:fade .5s var(--ease) forwards
}
.hero-copy .eyebrow{animation-delay:0s}
.hero-copy h1{animation-delay:.09s}
.hero-copy .lede{animation-delay:.27s}
.hero-copy .hero-cta{animation-delay:.36s}
.hero-copy .hero-chips{animation-delay:.45s}
/* "med ét klik" holder brødtekstens farve indtil resten af overskriften er
   landet, og skifter saa til Godkendt-Groen — kravet dramatiserer sit eget
   bevis-farve-princip i stedet for at vaere en generisk fremhaevning. */
.hero-copy h1 em{color:var(--text);animation:em-resolve .5s var(--ease) .18s forwards}
@keyframes em-resolve{to{color:var(--verify)}}
.device{position:relative;perspective:1400px}
.app-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:18px;max-width:380px;margin-left:auto;position:relative;z-index:2}
.app-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)}
.app-tmpl{display:flex;align-items:center;gap:9px}
.app-dot{width:30px;height:30px;border-radius:var(--r-8);background:var(--navy);display:grid;place-items:center;color:var(--mint);font-weight:800;font-family:var(--font-mono);font-size:var(--fs-10)}
.app-tmpl b{font-size:var(--fs-13);color:var(--navy);display:block;line-height:1.1}
.app-tmpl small{font-family:var(--font-mono);font-size:var(--fs-4);color:var(--muted);letter-spacing:.04em}
.app-ttl{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.app-sector{font-family:var(--font-mono);font-size:var(--fs-2);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--verify);background:var(--mint-100);border:1px solid var(--mint-300);padding:.14rem .42rem;border-radius:999px;line-height:1}
.sync{font-family:var(--font-mono);font-size:var(--fs-4);letter-spacing:.06em;padding:.25rem .5rem;border-radius:999px;background:var(--mint-100);color:var(--verify);display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.sync .pip{width:7px;height:7px;border-radius:50%;background:var(--verify);animation:pulse 1.3s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.checks{margin:14px 0 6px}
.check-row{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px dashed var(--line)}
.check-row:last-child{border-bottom:0}
.tick{width:22px;height:22px;border-radius:var(--r-7);border:2px solid var(--line-strong);flex-shrink:0;display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease)}
.tick svg{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.4);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.check-row.done .tick{background:var(--verify);border-color:var(--verify)}
.check-row.done .tick svg{opacity:1;transform:scale(1)}
.check-row .lbl{font-size:var(--fs-12);font-weight:600;color:var(--navy)}
.check-row .meta{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-4);color:var(--muted)}
.check-row.flag .tick{background:var(--flag);border-color:var(--flag)}
.check-row.flag .tick svg{opacity:1;transform:scale(1);width:16px;height:16px;stroke-width:3.4}
.check-row.flag .meta{color:var(--flag-text);font-weight:700}
.photos{display:flex;gap:8px;margin:12px 4px}
.photos .ph{width:46px;height:46px;border-radius:var(--r-9);background:linear-gradient(135deg,var(--mint-300),var(--mint));position:relative;overflow:hidden;border:1px solid var(--line)}
.photos .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),transparent 60%)}
.photos .ph.add{background:var(--mint-100);display:grid;place-items:center;color:var(--verify);font-weight:800;font-family:var(--font-mono)}
.progress{height:7px;border-radius:999px;background:var(--mint-100);overflow:hidden;margin:10px 4px}
/* transform i stedet for width: samme fyldeanimation, men transform er billig at
   animere (compositor), mens width tvinger layout om paa hvert billede. */
.progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--verify),var(--mint));transition:transform 2.4s var(--ease)}
.gen-btn{margin:14px 4px 2px;width:calc(100% - 8px)}
.report-card{position:absolute;right:-26px;bottom:-42px;width:210px;background:#fff;border:1px solid var(--line);border-radius:var(--r-14);box-shadow:var(--shadow-md);padding:14px;z-index:3;opacity:0;transform:translateY(20px) rotate(4deg) scale(.96);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.report-card.show{opacity:1;transform:translateY(0) rotate(4deg) scale(1)}
.report-card .rc-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.report-card .pdf{width:30px;height:36px;border-radius:var(--r-5);background:var(--navy);color:var(--mint);font-family:var(--font-mono);font-size:var(--fs-1);font-weight:700;display:grid;place-items:center}
.report-card b{font-size:var(--fs-9);color:var(--navy)}
.report-card small{font-family:var(--font-mono);font-size:var(--fs-3);color:var(--muted);display:block}
.rc-line{height:6px;border-radius:var(--r-4);background:var(--mint-100);margin:6px 0}
.rc-line.s{width:60%}
.rc-stamp{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-mono);font-size:var(--fs-3);color:var(--verify);font-weight:600;margin-top:8px;letter-spacing:.04em}
.trust{background:var(--navy);color:var(--on-dark-200);padding:26px 0}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:14px 40px;flex-wrap:wrap;text-align:center}
.trust-inner .tlabel{font-family:var(--font-mono);font-size:var(--fs-7);letter-spacing:.14em;text-transform:uppercase;color:var(--mint);width:100%}
.trust-stat{display:flex;align-items:center;gap:.6rem}
.trust-stat b{font-size:var(--fs-28);color:#fff;font-weight:800;letter-spacing:-.02em}
.trust-stat span{font-size:var(--fs-10);color:var(--on-dark-300);max-width:13ch;text-align:left;line-height:1.2}
.trust-sep{width:1px;height:34px;background:rgba(255,255,255,.18)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.benefit{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);position:relative;overflow:hidden}
.benefit:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--mint-300)}
.benefit .ico{width:52px;height:52px;border-radius:var(--r-14);background:var(--mint-100);display:grid;place-items:center;color:var(--navy);margin-bottom:18px}
.benefit .ico svg{width:26px;height:26px}
.benefit h3{margin-bottom:.5rem}
.benefit p{color:var(--muted);margin:0;font-size:var(--fs-16)}
/* Var --mint-300 paa hvid = 1,32:1. Ordenstallene fandtes i markup men ikke paa
   skaermen. --muted giver 5,66:1: laesbart, men stadig stille. */
.benefit .num{position:absolute;top:18px;right:22px;font-family:var(--font-mono);font-size:var(--fs-7);color:var(--muted);font-weight:600}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.svc{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.svc:hover{box-shadow:var(--shadow-md);border-color:var(--mint-300);transform:translateY(-4px)}
.svc .ico{width:46px;height:46px;flex-shrink:0;border-radius:var(--r-12);background:var(--navy);color:var(--mint);display:grid;place-items:center}
.svc .ico svg{width:24px;height:24px}
.svc h3{margin-bottom:.4rem;font-size:var(--fs-24)}
.svc p{margin:0;color:var(--muted);font-size:var(--fs-15)}
.svc.extra{display:none}
.svc-grid.svc-open .svc.extra{display:flex}
.svc-more-wrap{text-align:center;margin-top:30px}
.svc-more{gap:.55rem}
.svc-more .svc-more-hide{display:none}
.svc-more.svc-open .svc-more-show{display:none}
.svc-more.svc-open .svc-more-hide{display:inline}
.svc-more-ic{width:18px;height:18px;transition:transform .3s var(--ease)}
.svc-more.svc-open .svc-more-ic{transform:rotate(180deg)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.step{position:relative;padding-top:8px}
.step .sn{font-family:var(--font-mono);font-size:var(--fs-9);font-weight:600;color:var(--verify);letter-spacing:.08em}
.step .sbar{height:3px;background:var(--mint);border-radius:var(--r-3);margin:12px 0 18px;position:relative;overflow:hidden}
/* Fremdriftsindikator pr. trin. Den stod foer paa 34% paa ALLE tre trin, saa den
   lignede en bar der var gaaet i staa (Jesper, 2026-08-19: "den kommer ikke
   videre"). Nu fyldes den en tredjedel mere for hvert trin, saa trin 03 er helt
   fuld: stregen SIGER noget i stedet for at pynte. */
.step .sbar::after{content:"";position:absolute;inset:0;width:33%;background:var(--verify);border-radius:var(--r-3)}
.steps .step:nth-child(2) .sbar::after{width:67%}
.steps .step:nth-child(3) .sbar::after{width:100%}
.step h3{margin-bottom:.5rem}
.step p{color:var(--muted);font-size:var(--fs-16);margin:0}

/* ---- Appskaerme: aegte skaermbilleder fra QReport (/ydelser/) ----
   Kilderne ligger ubeskaarne i arbejdsfiler/skaermbilleder/ (IMG_0966, IMG_0979,
   IMG_0985) i 1170x2532 — iPhone 3x, altsaa native pixels, ingen opskalering.
   Alle tre er beskaaret til det SAMME udsnit y=140..2268, hvilket giver 1170x2128:
     y=140  = underkanten af iOS-statuslinjen. Appens egen header starter praecis
              her (titlen "Demo DK" er centreret i 140..272), saa snittet fjerner
              klokke og batteri uden at efterlade en tom navy strimmel.
     y=2268 = skillelinjen over appens bundmenu — en aegte UI-kant, ikke et
              vilkaarligt snit. Paa "godkendt"-skaermen ligger den groenne
              vurderingsbjaelke 2114..2260, altsaa lige inden for rammen.
   Skiftes et skaermbillede ud, skal det have samme 1170x2128-udsnit, ellers
   skalerer rammen de tre forskelligt. */
/* Uden balance braekker den danske overskrift med "hånden" alene paa linje 2 —
   en enkeltordsrest er en typografisk defekt, og engelsk rammer det samme ved en
   anden bredde. balance fordeler linjerne i stedet for at fylde den foerste helt. */
.shots-head h2{text-wrap:balance}
.appshots{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* [hidden] saetter display:none i browserens EGEN stilart, som taber til enhver
   forfatter-display. Uden denne regel ville .appshots{display:grid} vinde, og
   begge visninger stod fremme samtidig. Samme faelde som .calc-rows li[hidden].
   Gaelder ogsaa .webshot, saa reglen ikke afhaenger af, om et panel tilfaeldigvis
   har en display-erklaering i dag. */
.appshots[hidden],.webshot[hidden]{display:none}
.appshot{margin:0}
/* Flad ramme set lige forfra. DESIGN.md afviser udtrykkeligt "floating 3D device
   renders", saa ingen perspektiv, ingen glans, ingen hoejttalerslids-pynt — kun
   en navy kant, der giver skaermbilledet en skarp afgraensning mod den lyse bund
   og laeser umiskendeligt som en telefon. */
.appshot-frame{background:var(--navy);border-radius:var(--r-lg);padding:8px;box-shadow:var(--shadow-lg);overflow:hidden}
/* 24px ramme minus 8px kant = 16px indvendigt, saa de to radier er koncentriske. */
.appshot-frame img{display:block;width:100%;height:auto;border-radius:var(--r-md);background:var(--mint-100)}
/* 32px, ikke 18px: etiketten og broedteksten under den er én gruppe (~9px
   imellem), saa afstanden OP til telefonen skal vaere markant stoerre, ellers
   laeser etiketten som en del af rammen. 32px er desuden lidt mere end
   gitterets 28px vandrette mellemrum — telefonens moerke navy underkant er en
   tung kant, og tung kant faar tilstoedende luft til at virke mindre end den er. */
.appshot-cap{margin-top:32px}
/* Navy, ikke groen: groen betyder VERIFICERET i dette system, og en billedtekst
   er ikke en verifikation. Etiketten skal fremhaeves, ikke betyde noget — derfor
   navy, jf. "Meaning-Not-Decoration"-reglen i DESIGN.md. */
.appshot-cap .al{display:block;font-family:var(--font-mono);font-size:var(--fs-7);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:.55rem}
.appshot-cap p{margin:0;color:var(--muted);font-size:var(--fs-16)}
/* Forsinkelsen ER sekvensen: de tre skaerme er kronologiske, saa de lander i
   raekkefoelge fremfor samtidigt. Under reduced-motion tvinger den globale regel
   .reveal synlig med ~0 varighed, saa forsinkelsen bliver uskadelig. */
.appshots .appshot:nth-child(2){transition-delay:.09s}
.appshots .appshot:nth-child(3){transition-delay:.18s}
/* ---- Enhedsvaelger: telefon <-> computer ----
   Samme pille-par som .lang-toggle i headeren, saa den laeser som "samme slags
   kontrol" et andet sted paa sitet. Knapper, ikke links: der navigeres ikke. */
.shots-switch{display:flex;width:fit-content;margin:0 auto 40px;border:1.5px solid var(--line-strong);border-radius:999px;overflow:hidden;font-family:var(--font-mono)}
.shots-switch button{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;background:transparent;border:0;padding:.5rem 1.1rem;font-family:inherit;font-size:var(--fs-8);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.shots-switch button svg{width:15px;height:15px}
.shots-switch button:hover{background:var(--mint-100);color:var(--navy)}
.shots-switch button[aria-pressed="true"]{background:var(--navy);color:#fff}
.shots-switch button[aria-pressed="true"]:hover{background:var(--navy-900);color:#fff}

/* ---- Webvisning: én laptop man bladrer i ----
   Kilderne er 2559x1212 browservinduer, hvor appen kun fylder de midterste
   ~1408px; resten er tom margen. Derfor er de beskaaret til 1408x880 = 16:10,
   altsaa et aegte laptop-format, og skalaen i rammen bliver ~0,71 i stedet for
   0,44. Se crop-kommentaren ved .appshots for samme princip paa telefonerne. */
.webshot{max-width:1040px;margin:0 auto}
/* Flad, set lige forfra, navy som telefonrammen. Jespers referencebillede var en
   soelvgraa laptop, men DESIGN.md har ingen graa toner, og de to enhedsrammer
   skal laese som én familie — derfor navy. */
.laptop{position:relative}
.laptop-lid{background:var(--navy);border-radius:var(--r-14) var(--r-14) var(--r-4) var(--r-4);padding:12px 12px 16px;box-shadow:var(--shadow-lg)}
.laptop-screen{position:relative;aspect-ratio:1408/880;border-radius:var(--r-6);overflow:hidden;background:var(--mint-100)}
.laptop-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.laptop-screen img.on{opacity:1}
/* Foden: bredere end skaermen, med en antydet aabningsrille. Ingen perspektiv,
   ingen glans — DESIGN.md afviser "floating 3D device renders". */
.laptop-foot{width:114%;margin-left:-7%;height:11px;background:var(--navy-900);border-radius:0 0 var(--r-12) var(--r-12);position:relative}
.laptop-foot::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:92px;height:4px;background:rgba(255,255,255,.16);border-radius:0 0 var(--r-4) var(--r-4)}

.webshot-cap{max-width:620px;margin:32px auto 0;text-align:center}
.webshot-cap .al{display:block;font-family:var(--font-mono);font-size:var(--fs-7);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:.55rem}
.webshot-cap p{margin:0;color:var(--muted);font-size:var(--fs-16)}

.webshot-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.webshot-nav button{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border:1.5px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--navy);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.webshot-nav button svg{width:17px;height:17px}
.webshot-nav button:hover{border-color:var(--verify);background:var(--mint-100)}
.webshot-nav button:active{transform:translateY(1px)}
.webshot-dots{display:flex;align-items:center;gap:9px}
/* Prikkerne er knapper med 40px traefflade, men en 10px synlig prik — ellers
   ville de bryde reglen om 40px minimum for noget man skal kunne ramme. */
.webshot-dots button{width:40px;height:40px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.webshot-dots button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--line-strong);transition:background .2s var(--ease),transform .2s var(--ease)}
.webshot-dots button:hover::before{background:var(--navy)}
.webshot-dots button[aria-current="true"]::before{background:var(--verify);transform:scale(1.3)}

@media(max-width:980px){
  /* Baandet vises IKKE under 980px (Jesper, 2026-08-19: "behoeves ikke paa
     mobil"). 980px er sidens eget mobilbrud — det er her menuen bliver burger.
     Graensen ligger her og ikke ved 620px, fordi mellemrummet var det daarligste
     af begge verdener: i to kolonner blev hver telefon 272-452px, altsaa SMALLERE
     end desktops 343px, saa appens tekst blev mindre laeselig paa tablet end paa
     computer. Et skaermbillede man ikke kan laese modbeviser sit eget formaal.
     display:none frem for at fjerne blokken: indholdet bliver i DOM'en og er
     stadig laesbart for soegemaskiner, og fordi billederne har loading="lazy",
     hentes de 200 KB slet ikke paa mobil. */
  .appshots-band{display:none}
}
.section-navy .step p{color:var(--on-dark-300)}
.section-navy .step .sbar{background:rgba(255,255,255,.18)}
/* TRIN-nummer og fremgangs-streg: --verify (mørk grøn) har for lav kontrast på navy — brug mint som .eyebrow.on-dark */
.section-navy .step .sn{color:var(--mint)}
.section-navy .step .sbar::after{background:var(--mint)}
.tcols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;position:relative;margin:0}
.quote .mark{font-family:var(--font-mono);font-size:var(--fs-29);line-height:.6;color:var(--mint);height:24px}
.quote p{font-size:var(--fs-18);color:var(--navy);font-weight:500;flex:1}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.quote .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--verify));color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.quote .who b{display:block;font-size:var(--fs-14);color:var(--navy)}
.quote .who small{font-size:var(--fs-9);color:var(--muted)}
/* ===== Dashboard section ===== */
.dash-visual{position:relative;min-width:0}
.dash-visual::before{content:"";position:absolute;top:26px;left:28px;right:-16px;bottom:-16px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--mint-200),var(--mint-100));border:1px solid var(--mint-300);transform:rotate(1.6deg);z-index:1}
.dash-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;position:relative;z-index:2}
.dash-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(180deg,#fff,var(--bg-alt));border-bottom:1px solid var(--line)}
.dash-bar .dtitle{display:flex;align-items:center;gap:8px;font-size:var(--fs-13);font-weight:700;color:var(--navy);letter-spacing:-.01em;min-width:0}
.dash-bar .dtitle svg{width:16px;height:16px;color:var(--verify);flex-shrink:0}
.dash-bar .dtitle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-bar .dpill{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:var(--fs-4);font-weight:600;letter-spacing:.04em;color:var(--verify);background:var(--mint-100);border:1px solid var(--mint-300);border-radius:999px;padding:.32rem .62rem;white-space:nowrap;flex-shrink:0}
.dash-bar .dpill svg{width:11px;height:11px}
.dash-bar .dgear{width:26px;height:26px;flex-shrink:0;border-radius:var(--r-8);display:grid;place-items:center;color:var(--muted);background:var(--bg-alt);border:1px solid var(--line)}
.dash-bar .dgear svg{width:14px;height:14px}
.dash-body{padding:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;background:var(--bg-alt)}
.dchart{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}
.dchart h3{margin:0;font-size:var(--fs-7);font-weight:700;color:var(--navy);text-align:center;line-height:1.3;letter-spacing:-.01em;min-height:2.6em;display:flex;align-items:center}
.pie{width:104px;height:104px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(22,48,74,.06),var(--shadow-sm)}
.dbars{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:104px;padding:16px 0 2px}
/* Havde tidligere en height-transition: ingen kode saetter nogensinde en anden
   hoejde end den der staar i HTML'ens inline style — den animerede aldrig
   noget og var doed kode. Fjernet. */
.dbars .bar{width:24px;border-radius:var(--r-7) var(--r-7) var(--r-3) var(--r-3);position:relative}
.dbars .bar .bval{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--fs-5);font-weight:600;color:var(--navy)}
.dlegend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;font-size:var(--fs-5);font-weight:600;color:var(--muted)}
.dlegend span{display:inline-flex;align-items:center;gap:.35rem}
.dlegend i{width:9px;height:9px;border-radius:var(--r-3);display:inline-block;flex-shrink:0}
.dash-note{display:flex;align-items:flex-start;gap:9px;margin-top:1.4rem;padding:12px 15px;background:var(--mint-100);border:1px solid var(--mint-300);border-radius:var(--r-sm);font-size:var(--fs-11);color:var(--navy)}
.dash-note svg{width:18px;height:18px;color:var(--navy);flex-shrink:0;margin-top:2px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split-media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--mint-100)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media .badge{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:var(--r-14);padding:12px 16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px}
.split-media .badge .b-ico{width:36px;height:36px;border-radius:10px;background:var(--verify);color:#fff;display:grid;place-items:center}
.split-media .badge b{font-size:var(--fs-13);color:var(--navy)} .split-media .badge small{font-size:var(--fs-7);color:var(--muted);display:block}
.feature-list{margin-top:1.2rem;display:grid;gap:12px}
.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-17)}
.feature-list li svg{width:22px;height:22px;color:var(--verify);flex-shrink:0;margin-top:2px}
.feature-list li b{color:var(--navy)}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* border-top:3px paa en afrundet boks blander to kantbredder (3px top, 1px
   sider) omkring samme hjoerne-kurve — browseren tegner det som en synlig
   soem i hjoernet. .td-panel loeser samme opgave rigtigt andetsteds i filen:
   en flad bjaelke klippet af overflow:hidden foelger kurven perfekt uden soem. */
.value{padding:26px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.value::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mint)}
.value .ico{width:44px;height:44px;border-radius:var(--r-12);background:var(--mint-100);color:var(--navy);display:grid;place-items:center;margin-bottom:16px}
.value .ico svg{width:22px;height:22px}
.value h3{font-size:var(--fs-20);margin-bottom:.4rem}
.value p{color:var(--muted);font-size:var(--fs-14);margin:0}
.cta-band{background:linear-gradient(135deg,var(--navy),var(--navy-900));border-radius:var(--r-xl);padding:clamp(40px,6vw,72px);position:relative;overflow:hidden;text-align:center}
/* Kuglerne er ren atmosfaere. De var malet i --verify, altsaa verifikations-
   farven brugt paa dekoration — og groen paa navy er desuden for lav kontrast.
   Mint er den rigtige accent paa moerk bund (Dark-Surface Swap-reglen). */
.cta-band::before{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--mint),transparent 70%);opacity:.30}
.cta-band::after{content:"";position:absolute;left:-40px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--mint),transparent 70%);opacity:.22}
.cta-band h2{color:#fff;position:relative;max-width:20ch;margin:0 auto .8rem}
.cta-band p{color:var(--on-dark-200);position:relative;max-width:48ch;margin:0 auto 1.8rem}
.cta-band .hero-cta{justify-content:center;position:relative}
.page-head{background:radial-gradient(100% 120% at 90% -20%,var(--mint-100),transparent 60%),var(--bg);padding:clamp(54px,7vw,96px) 0 clamp(36px,4vw,56px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-head .hero-grid-bg{opacity:.4}
.page-head h1{margin:.6rem 0 1rem;max-width:18ch}
.page-head .lede{max-width:58ch}
.breadcrumb{font-family:var(--font-mono);font-size:var(--fs-7);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{color:var(--verify)}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:42px}
.filter{display:inline-flex;align-items:center;min-height:40px;font-family:var(--font-mono);font-size:var(--fs-9);font-weight:500;letter-spacing:.04em;padding:.6rem 1.1rem;border-radius:999px;border:1.5px solid var(--line-strong);background:#fff;color:var(--navy);transition:border-color .2s,background .2s,color .2s}
.filter:hover{border-color:var(--verify)}
.filter.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--mint-300)}
.card .media{display:block;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--mint-100)}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .media img{transform:scale(1.06)}
.card .play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(22,48,74,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#fff;display:grid;place-items:center;transition:background .25s var(--ease),transform .25s var(--ease);pointer-events:none}
.card .play-badge svg{width:20px;height:20px;margin-left:2px}
.card:hover .play-badge{background:var(--verify);transform:translate(-50%,-50%) scale(1.08)}
.card .tag{position:absolute;top:14px;left:14px;font-family:var(--font-mono);font-size:var(--fs-5);font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--verify);padding:.35rem .65rem;border-radius:999px}
.card .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.card .body h3{margin-bottom:.5rem;font-size:var(--fs-25)}
.card .body p{color:var(--muted);font-size:var(--fs-15);flex:1}
.card .clink{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--verify);font-size:var(--fs-14);margin-top:.6rem}
.card .clink svg{width:16px;height:16px;transition:transform .2s}
.card:hover .clink svg{transform:translateX(4px)}
.card.feature{background:radial-gradient(130% 120% at 100% 0%,var(--navy-700),transparent 55%),linear-gradient(155deg,var(--navy),var(--navy-900));border-color:var(--navy-900);padding:34px 30px;justify-content:center;position:relative}
.card.feature::before{content:"";position:absolute;right:-52px;top:-52px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,var(--mint),transparent 70%);opacity:.28;pointer-events:none}
.card.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--mint)}
.card.feature .fico{width:52px;height:52px;border-radius:var(--r-14);background:rgba(175,221,217,.16);color:var(--mint);display:grid;place-items:center;margin-bottom:18px;position:relative}
.card.feature .fico svg{width:26px;height:26px}
.card.feature h3{color:#fff;position:relative}
.card.feature p{color:var(--on-dark-300);position:relative;font-size:var(--fs-15);margin:.5rem 0 0}
.card.feature .clink{color:var(--mint);margin-top:1.1rem;position:relative}
.no-result{display:none;text-align:center;color:var(--muted);padding:40px}
.audit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.audit{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;display:flex;flex-direction:column;transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
.audit:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--mint-300)}
.audit .ico{width:64px;height:64px;border-radius:50%;background:var(--mint);color:var(--navy);display:grid;place-items:center;margin-bottom:20px;box-shadow:0 8px 20px -12px rgba(39,74,104,.5)}
.audit .ico svg{width:32px;height:32px}
.audit h3{margin-bottom:.5rem;font-size:var(--fs-22)}
.audit p{color:var(--muted);font-size:var(--fs-15);margin:0}
.audit-note{margin-top:36px;background:radial-gradient(120% 170% at 0% 0%,var(--mint-200),transparent 62%),var(--mint-100);border:1px solid var(--mint-300);border-radius:var(--r-lg);padding:clamp(26px,4vw,38px);display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.audit-note .an-body{flex:1;min-width:260px}
.audit-note h3{font-size:var(--fs-23);margin-bottom:.5rem}
.audit-note p{color:var(--text);margin:0;font-size:var(--fs-16);max-width:66ch}
.audit-note .btn{flex-shrink:0}
.faq{max-width:780px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:14px;overflow:hidden;background:#fff}
.faq-q{width:100%;text-align:left;background:transparent;border:0;padding:20px 24px;font-size:var(--fs-19);font-weight:700;color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-q .pm{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--mint-100);color:var(--verify);display:grid;place-items:center;transition:transform .25s,background .25s,color .25s;font-size:var(--fs-24);line-height:1}
.faq-item.open .faq-q .pm{transform:rotate(45deg);background:var(--verify);color:#fff}
/* grid-template-rows 0fr->1fr i stedet for max-height: samme luk/aabn-fornemmelse
   for indhold af ukendt hoejde, men uden at tvinge layout om paa hvert billede.
   Paddingen ligger paa en INDRE wrapper, ikke paa selve grid-cellen (<p>) —
   en grid-celles egen padding taeller altid med i dens mindstemaal, uanset
   min-height:0, saa med paddingen paa <p> stod raekken fast paa 22px lukket
   i stedet for 0. Wrapperen har ingen padding og kan aeldso klemmes helt fladt. */
.faq-a{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{min-height:0;overflow:hidden}
.faq-a p{padding:0 24px 22px;margin:0;color:var(--muted);font-size:var(--fs-17)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow-md)}
.field{margin-bottom:18px}
.field label{display:block;font-size:var(--fs-10);font-weight:700;color:var(--navy);margin-bottom:6px}
.field label .req{color:var(--verify)}
.field input,.field textarea,.field select{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);font-family:inherit;font-size:var(--fs-18);color:var(--text);background:#fff;transition:.18s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--verify);box-shadow:0 0 0 4px var(--mint-100)}
.field textarea{resize:vertical;min-height:120px}
/* Emne-dropdown: samme border/padding/font som øvrige felter, men med brand-farver (mint border, navy tekst) + custom navy chevron */
.field select{appearance:none;-webkit-appearance:none;border-color:var(--mint);color:var(--navy);cursor:pointer;padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23274a68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:16px}
.field select:invalid{color:var(--muted)}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#d7544c;box-shadow:0 0 0 4px rgba(215,84,76,.12)}
.field .err{display:none;color:#c4403a;font-size:var(--fs-9);margin-top:5px;font-weight:600}
.field.invalid .err{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-10);color:var(--muted);margin-bottom:20px}
.consent input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--verify)}
.consent .req{color:var(--verify);font-weight:700}
.consent a{color:var(--navy);font-weight:600;text-decoration:underline}
.form-ok{display:none;text-align:center;padding:20px;background:var(--mint-100);border:1px solid var(--mint-300);border-radius:var(--r-md);color:var(--navy)}
.form-ok.show{display:block;animation:fade .4s}
.form-ok .ok-ico{width:54px;height:54px;border-radius:50%;background:var(--verify);color:#fff;display:grid;place-items:center;margin:0 auto 14px}
.contact-info .ci{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.contact-info .ci:last-of-type{border-bottom:0}
.contact-info .ci .ico{width:46px;height:46px;flex-shrink:0;border-radius:var(--r-12);background:var(--mint-100);color:var(--navy);display:grid;place-items:center}
.contact-info .ci .ico svg{width:22px;height:22px}
.contact-info .ci small{font-family:var(--font-mono);font-size:var(--fs-5);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact-info .ci b{display:block;font-size:var(--fs-19);color:var(--navy);font-weight:700;margin-top:2px}
.contact-info .ci a{color:var(--navy)} .contact-info .ci a:hover{color:var(--verify)}
.map{margin-top:20px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.map iframe{display:block;width:100%;height:240px;border:0;filter:grayscale(.15)}
.map-link{display:inline-block;margin-top:10px;font-weight:700;font-size:var(--fs-10);color:var(--verify)}
.map-link:hover{text-decoration:underline}
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{width:44px;height:44px;border-radius:var(--r-12);background:var(--mint-100);color:var(--navy);display:grid;place-items:center;transition:background .2s,color .2s,transform .2s}
.socials a:hover{background:var(--navy);color:#fff;transform:translateY(-3px)}
.socials a svg{width:20px;height:20px}
.legal{max-width:760px;margin:0 auto}
.legal h2{margin:2rem 0 .6rem;font-size:var(--fs-27)}
.legal h3{margin:1.4rem 0 .4rem;font-size:var(--fs-20)}
.legal p,.legal li{color:var(--text);font-size:var(--fs-18)}
.legal ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem}
.legal li{margin-bottom:.4rem}
.legal .note{background:var(--mint-100);border-left:3px solid var(--verify);padding:14px 18px;border-radius:0 10px 10px 0;font-size:var(--fs-12);color:var(--navy);margin-bottom:1.4rem}
.footer{background:var(--navy-900);color:var(--on-dark-400);padding:64px 0 30px;font-size:var(--fs-14)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer .brand b{color:#fff} .footer .brand .tag{color:var(--on-dark-600)}
/* h3, ikke h4: kolonneoverskrifterne fulgte direkte efter sidens h2 og sprang
   dermed et niveau over, hvilket efterlader et hul i skaermlaeserens indholds-
   fortegnelse (WCAG 1.3.1). Specificiteten er uaendret (.klasse + type), saa
   font-size og letter-spacing herunder vinder stadig over den globale h3-regel
   — udseendet er praecis som foer. */
.footer-col h3{color:#fff;font-size:var(--fs-9);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.footer-col a{color:var(--on-dark-400);display:block;padding:5px 0;transition:color .18s}
.footer-col a:hover{color:var(--mint)}
.footer-blurb{margin:16px 0 0;max-width:34ch;color:var(--on-dark-500)}
.footer .socials{margin-top:18px}
.footer .socials a{background:rgba(255,255,255,.08);color:var(--on-dark-200)}
.footer .socials a:hover{background:var(--mint);color:var(--navy)}
.footer-ci{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;color:var(--on-dark-400)}
.footer-ci svg{width:18px;height:18px;color:var(--mint);flex-shrink:0;margin-top:2px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:var(--fs-10);color:var(--on-dark-600)}
.footer-bottom .fb-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-bottom a{color:var(--on-dark-400)} .footer-bottom a:hover{color:var(--mint)}
.modal-overlay{position:fixed;inset:0;background:rgba(22,48,74,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex;animation:fade .25s}
.modal{background:#fff;border-radius:var(--r-lg);max-width:420px;width:100%;padding:34px;box-shadow:var(--shadow-lg);position:relative}
.modal .close{position:absolute;top:16px;right:16px;background:var(--mint-100);border:0;width:36px;height:36px;border-radius:50%;color:var(--navy);font-size:var(--fs-24);display:grid;place-items:center}
.modal .close:hover{background:var(--navy);color:#fff}
.modal .m-logo{width:48px;height:48px;border-radius:var(--r-12);margin-bottom:14px;box-shadow:var(--shadow-sm)}
.modal h3{font-size:var(--fs-27);margin-bottom:.4rem}
.modal .m-sub{color:var(--muted);font-size:var(--fs-14);margin-bottom:22px}
.modal .field{margin-bottom:14px}
.modal .btn{width:100%;margin-top:6px}
.modal .m-switch{text-align:center;margin-top:18px;font-size:var(--fs-12);color:var(--muted)}
.modal .m-switch button{background:0;border:0;color:var(--verify);font-weight:700;font-size:var(--fs-12);padding:0;text-decoration:underline}
.modal .m-note{font-size:var(--fs-8);color:var(--muted);text-align:center;margin-top:14px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:42px}
  .device{max-width:420px;margin:0 auto} .app-card{margin:0 auto}
  .benefits,.steps,.tcols,.values,.cards,.audit-grid{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:1fr}
  .split,.contact-grid{grid-template-columns:1fr;gap:36px}
  .footer-top{grid-template-columns:1fr 1fr}
  .nav-links{display:none} .burger{display:flex} .link-login{display:none}
  .nav-right .btn-primary{display:none}
}
@media(max-width:620px){
  body{font-size:var(--fs-root-sm)}
  .benefits,.steps,.tcols,.values,.cards,.audit-grid,.field-row,.footer-top{grid-template-columns:1fr}
  .trust-sep{display:none} .trust-inner{gap:18px 28px}
  .hero-cta .btn{flex:1}
  .report-card{right:0;bottom:-30px;width:180px}
  .dash-body{grid-template-columns:1fr}
  .dash-bar .dpill,.dash-bar .dgear{display:none}
  .dash-visual::before{display:none}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .lang-toggle{order:-1}
  .header .brand .tag{display:none}
  .header .brand b{font-size:var(--fs-18)}
  .nav{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  /* animation-delay skal ogsaa noedstoppes her — uden den ville et forsinket
     element (fx .hero-chips ved .45s) staa usynligt i 450ms foer det springer
     frem, selv naar selve varigheden er 0. */
  *{animation-duration:.001ms !important;animation-delay:0s !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
/* ---- Produktvideo (selv-hostet, ingen tredjepart) ---- */
.video-wrap{max-width:760px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);background:#000}
.video-wrap video{display:block;width:100%;aspect-ratio:16/9;background:#000}
/* ---- Tilda (Tilsyn dagtilbud) ---- */
.td-intro{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.td-intro>div p{color:var(--muted)}
.td-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:26px;position:relative;overflow:hidden}
.td-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--mint),var(--verify))}
.tp-top{display:flex;align-items:center;gap:12px;padding:6px 0 16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.tp-logo{width:46px;height:46px;border-radius:var(--r-12);background:var(--navy);color:var(--mint);display:grid;place-items:center;font-family:var(--font-mono);font-weight:800;font-size:var(--fs-22);flex-shrink:0;box-shadow:var(--shadow-sm)}
.tp-top b{font-size:var(--fs-20);color:var(--navy);display:block;line-height:1.15;letter-spacing:-.02em}
.tp-top small{font-family:var(--font-mono);font-size:var(--fs-4);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tp-fact{display:flex;gap:13px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line)}
.tp-fact:last-child{border-bottom:0}
.tp-fact .ico{width:36px;height:36px;flex-shrink:0;border-radius:10px;background:var(--mint-100);color:var(--navy);display:grid;place-items:center}
.tp-fact .ico svg{width:19px;height:19px}
.tp-fact .k{font-family:var(--font-mono);font-size:var(--fs-4);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:1px}
.tp-fact .v{font-size:var(--fs-15);font-weight:700;color:var(--navy);line-height:1.25}
.td-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:13px;margin-top:8px}
.td-area{display:flex;align-items:center;gap:11px;min-height:66px;background:rgba(175,221,217,.07);border:1px solid rgba(175,221,217,.24);border-radius:var(--r-sm);padding:12px 15px;font-size:var(--fs-14);font-weight:600;color:var(--on-dark-100);line-height:1.25;transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.td-area:hover{background:rgba(175,221,217,.13);border-color:rgba(175,221,217,.45);transform:translateY(-2px)}
.td-area svg{width:17px;height:17px;color:var(--mint);flex-shrink:0}
.td-more-wrap{display:flex;justify-content:center;margin-top:14px}
.td-more{display:inline-flex;align-items:center;gap:9px;min-height:44px;background:rgba(175,221,217,.05);border:1px dashed rgba(175,221,217,.42);border-radius:999px;padding:10px 24px;font-size:var(--fs-13);font-weight:700;color:var(--mint);letter-spacing:.01em}
.td-src{margin:34px 0 0;display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;text-align:center;font-size:var(--fs-13);color:var(--on-dark-200)}
.td-src svg{width:18px;height:18px;color:var(--mint);flex-shrink:0}
@media(max-width:980px){.td-intro{grid-template-columns:1fr;gap:38px}.td-panel{max-width:520px;margin:0 auto;width:100%}}
/* Sprogafhaengigt indhold: data-only="da" vises kun paa dansk, data-only="en" kun paa engelsk */
html[lang="en"] [data-only="da"]{display:none!important}
html[lang="da"] [data-only="en"]{display:none!important}

/* Kontekstuelle links i broedtekst: tydelige og tilgaengelige */
.inlink{color:var(--verify);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .18s}
.inlink:hover{color:var(--navy)}
.inlink:focus-visible{outline:2px solid var(--verify);outline-offset:2px;border-radius:var(--r-2)}

/* Ikon til Om os -> Vores forretning-soejlerne */
.purpose-ico{width:56px;height:56px;border-radius:var(--r-14);background:var(--mint-100);color:var(--navy);display:grid;place-items:center;margin-bottom:14px}
.purpose-ico svg{width:28px;height:28px}

/* =========================================================================
   POLISH (2026-08-12)
   1) Grain/tekstur paa store moerke flader
   2) Dybde: kort loeftes fra baggrunden i stedet for kun at have en haarlinje
   3) Rigere gradient i underside-headere
   ========================================================================= */

/* --- 1) Grain -----------------------------------------------------------
   Rene navy-flader ser "flade og digitale" ud. Et naesten usynligt stoej-
   lag (5,5 % sort/hvid stoej) giver dybde uden at aendre farven maerkbart.
   SVG'en er indlejret som data-URI, saa den koster ingen ekstra hentning. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
}
.section-navy{background-image:var(--grain)}
.trust{background-image:var(--grain)}
.footer{background-image:var(--grain)}
.cta-band{background-image:var(--grain),linear-gradient(135deg,var(--navy),var(--navy-900))}
.card.feature{background-image:var(--grain),radial-gradient(130% 120% at 100% 0%,var(--navy-700),transparent 55%),linear-gradient(155deg,var(--navy),var(--navy-900))}

/* --- 2) Dybde ----------------------------------------------------------
   Foer laa alle kort i samme plan: hvid flade + 1px haarlinje. Nu har de en
   let skygge i hviletilstand (niveau "elevated"), og paa toned baggrund
   (.section-alt) skjules kanten, saa kortet tydeligt svaever over fladen.
   border-color:transparent i stedet for border:0 -> ingen ombrydning. */
.benefit,.svc,.audit,.value,.card,.quote,.faq-item,.form-card{box-shadow:var(--shadow-sm)}
.section-alt .benefit,.section-alt .svc,.section-alt .audit,
.section-alt .value,.section-alt .card,.section-alt .quote{border-color:transparent}
.section-alt .benefit:hover,.section-alt .svc:hover,.section-alt .audit:hover,
.section-alt .card:hover{border-color:var(--mint-300)}

/* --- 3) Underside-headere ---------------------------------------------
   Var naesten helt hvide med et enkelt mint-skaer. Nu tre lag radiale
   gradienter, saa siderne har lidt mere at staa paa. */
.page-head{
  background:
    radial-gradient(90% 130% at 92% -25%,var(--mint-200) 0%,transparent 58%),
    radial-gradient(60% 90% at 0% 15%,rgba(20,126,108,.055) 0%,transparent 62%),
    linear-gradient(180deg,#fff 0%,var(--bg-alt) 100%);
}

/* =========================================================================
   BESPARELSESBEREGNER (2026-08-12)
   Tre tal ind, kr./aar ud. Ingen backend — alt regnes i browseren.
   Venstre halvdel = input paa hvid flade, hoejre = resultat paa navy.
   ========================================================================= */
.calc{
  display:grid;grid-template-columns:1.05fr .95fr;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);overflow:hidden;max-width:940px;margin:0 auto
}
.calc-in{padding:clamp(24px,3.2vw,38px)}
.calc-in .field:last-of-type{margin-bottom:0}
.calc-in .field input{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-19)}
.calc-hint{display:block;font-size:var(--fs-9);color:var(--muted);margin-top:5px;font-weight:400}
/* "valgfrit"-markoer paa prisfeltet — skal ikke se ud som en del af labelen */
.calc-opt{font-family:var(--font-mono);font-size:var(--fs-4);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;padding:.14rem .45rem;margin-left:.4rem;vertical-align:1px}
.calc-out{
  padding:clamp(24px,3.2vw,38px);color:var(--on-dark-200);
  display:flex;flex-direction:column;justify-content:center;
  background-image:var(--grain),radial-gradient(120% 130% at 100% 0%,var(--navy-700),transparent 58%),linear-gradient(155deg,var(--navy),var(--navy-900))
}
.calc-kr{
  display:block;font-size:clamp(2.1rem,4.4vw,2.9rem);font-weight:800;color:#fff;
  letter-spacing:-.03em;line-height:1.05;margin:.7rem 0 .1rem;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere
}
.calc-per{font-family:var(--font-mono);font-size:var(--fs-7);letter-spacing:.13em;text-transform:uppercase;color:var(--mint)}
.calc-rows{margin:1.5rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:.6rem}
.calc-rows li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:var(--fs-14)}
/* [hidden] taber til .calc-rows li's display:flex — skal siges eksplicit */
.calc-rows li[hidden]{display:none}
/* Loftet / nettolinjen: den saetning der svarer paa "hvad med hvad QReport koster?" */
.calc-break{
  margin:1.2rem 0 0;padding:12px 15px;border-radius:var(--r-sm);
  background:rgba(175,221,217,.1);border:1px solid rgba(175,221,217,.26);
  font-size:var(--fs-11);line-height:1.5;color:var(--on-dark-100)
}
.calc-break b{color:#fff;font-family:var(--font-mono);font-weight:600;white-space:nowrap}
.calc-rows b{color:#fff;font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-note{margin:1.3rem 0 0;font-size:var(--fs-9);line-height:1.55;color:var(--on-dark-400)}
/* Foldet forklaring: "Saadan er tallene beregnet". Bruger <details>, saa den
   virker med klik, tastatur og skaermlaeser helt uden JavaScript. Bevidst IKKE
   hover — det findes ikke paa touch. */
/* Forbeholdet bliver staaende synligt — det er dét, der goer klart, at beloebet
   ikke er et tilsagn. Kun selve formlen foldes vaek. */
.calc-disc{margin:1.2rem 0 0;font-size:var(--fs-9);line-height:1.5;color:var(--on-dark-400)}
.calc-info{margin-top:.5rem}   /* taet paa forbeholdet ovenover, saa de laeses som eet */
.calc-info>summary{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font-size:var(--fs-9);font-weight:600;color:var(--on-dark-300);
  padding:.35rem .1rem;border-radius:var(--r-6);list-style:none;
  transition:color .18s var(--ease)
}
.calc-info>summary::-webkit-details-marker{display:none}   /* Safari's egen trekant */
.calc-info>summary::marker{content:""}
.calc-info>summary:hover{color:#fff}
.calc-info>summary:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.calc-info>summary svg{width:15px;height:15px;flex-shrink:0}
.calc-info .calc-info-ic{transition:transform .25s var(--ease)}
.calc-info[open]>summary .calc-info-ic{transform:rotate(180deg)}
.calc-info[open]>summary{color:#fff}
.calc-info .calc-note{margin-top:.5rem}

.calc-cta{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.16)}
.calc-cta .btn{width:100%}
/* Anker-hop maa ikke lande under den klaebende header (74px + luft).
   #main gjaldt det ogsaa for: "Spring til indhold" er springlinket for
   tastaturbrugere, og uden dette laa toppen af indholdet skjult bag headeren. */
#contactForm,#main,#saadan-virker-det{scroll-margin-top:96px}
/* Regneeksempel-teaser paa forsiden: stille indgang til /beregner/. Bevidst en
   hvid flade og ikke en fyldt knap — den skal ikke konkurrere med "Se alle
   ydelser" lige ovenover, men invitere. .ct-sum farver kun beloebet groent;
   tallene selv er almindelig tekst i HTML'en. */
.calc-teaser{
  display:flex;align-items:center;gap:16px;
  max-width:620px;margin:28px auto 0;padding:18px 22px;
  background:#fff;border:1px solid transparent;border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)
}
.calc-teaser:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--mint-300)}
.calc-teaser:active{transform:translateY(-1px)}
.calc-teaser .ct-ico{
  width:44px;height:44px;flex-shrink:0;border-radius:var(--r-12);
  background:var(--mint-100);color:var(--navy);display:grid;place-items:center
}
.calc-teaser .ct-ico svg{width:22px;height:22px}
.calc-teaser .ct-text{min-width:0}
.calc-teaser .ct-label{
  display:block;font-family:var(--font-mono);font-size:var(--fs-4);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px
}
.calc-teaser b{display:block;font-size:var(--fs-18);color:var(--navy);letter-spacing:-.01em;line-height:1.35}
/* Et sparet beloeb er ikke et verificeret resultat — det er et regneeksempel.
   Navy baerer det uden at laane troevaerdighed fra fluebenets farve. */
.calc-teaser .ct-sum{color:var(--navy)}
.calc-teaser .ct-go{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:6px;
  font-size:var(--fs-12);font-weight:700;color:var(--verify)
}
.calc-teaser .ct-go svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.calc-teaser:hover .ct-go svg{transform:translateX(4px)}
@media(max-width:620px){
  .calc-teaser{padding:16px 18px;gap:13px}
  .calc-teaser b{font-size:var(--fs-15)}
}

/* Kildeangivelse under beregneren. Standardtallene er ikke vores gaet — de kommer
   fra en kundes egen offentliggjorte businesscase, og det er hele pointen. */
.calc-source{
  max-width:940px;margin:1.1rem auto 0;text-align:center;
  font-size:var(--fs-10);line-height:1.6;color:var(--muted)
}
@media(max-width:820px){
  .calc{grid-template-columns:1fr}
  .calc-out{order:-1}          /* resultatet skal staa oeverst paa mobil, ikke nederst */
  .calc-source{text-align:left}
}

/* =========================================================================
   ADAPT (2026-08-17)
   1) Headeren loeb ud over skaermen paa alle telefoner under ca. 390px
   2) Trykflader i footeren var for lave paa touch
   ========================================================================= */

/* --- 1) Headeren -------------------------------------------------------
   Aarsag: .brand havde flex-shrink:0, saa logoblokken naegtede at give sig.
   Resultatet var et fast mindstemaal paa ca. 380px — under det blev burger-
   knappen skubbet uden for skaermen (helt usynlig ved 320px, hvor menuen
   dermed ikke kunne aabnes). body har overflow-x:hidden, saa de pixels var
   ikke bare uden for syne, de var uopnaaelige.

   Lag 1: giv headeren lov til at give sig. Ingen synlig aendring naar der er
   plads, men den kan nu ikke loebe over paa NOGEN bredde. Ellipsen er en
   sikkerhedsnet, ikke normaltilstanden — lag 2 sikrer at den ikke bruges. */
@media(max-width:980px){
  .nav{min-width:0}
  .brand{flex-shrink:1;min-width:0}
  .brand>span{min-width:0;overflow:hidden}
  .brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-right{flex-shrink:0}
  /* Burgeren er den primaere navigation paa mobil og skal have fuld trykflade */
  .burger{width:44px;height:44px;padding:0;align-items:center;justify-content:center}
}

/* Lag 2: komprimer under 400px, saa alt faktisk kan vaere der.
   Maalt behov ved 320px: 288px indvendigt mod 332px indhold = 44px for meget.
   Her hentes de: 16px paa gutter, 24px paa sprogskifteren, resten paa
   logo og ordmaerke. Sprogskifteren beholder 32x40px pr. knap — over
   WCAG 2.2 AA's krav paa 24x24. */
@media(max-width:400px){
  .header .wrap{padding:0 16px}
  .nav{gap:8px}
  .brand{gap:8px}
  .brand img{width:34px;height:34px}
  .header .brand b{font-size:var(--fs-15)}
  .lang-toggle a{padding:.5rem .6rem;font-size:var(--fs-7)}
}

/* Under 360px: skru logo og sprogskifter en tand ned, saa ordmaerket ikke
   behoever at blive forkortet med ellipse. Sprogknapperne bliver 30x42px —
   fortsat over WCAG 2.2 AA's 24x24. */
@media(max-width:360px){
  .brand img{width:30px;height:30px}
  .lang-toggle a{padding:.5rem .5rem}
}
/* Under 340px raekker pladsen stadig ikke til ordmaerket ved .95rem, og
   "Miracle Q-Ins..." er ikke et firmanavn. En tand mindre skrift er et
   mindre tab end en afskaaret virksomhed. */
@media(max-width:340px){
  .header .brand b{font-size:var(--fs-10)}
}

/* --- 1b) Lange knaptekster --------------------------------------------
   .btn har white-space:nowrap (bevidst — knapper skal ikke ombryde paa
   desktop). Men i en gridspalte bliver knappens fulde tekstbredde spaltens
   MINDSTEbredde: "Kontakt os om dashboards til jer" kraevede 330px og trak
   hele dashboard-sektionen 34px ud over en 320px skaerm. Paa smalle skaerme
   vejer laesbarhed tungere end en enkelt linje.
   min-width:0 hindrer samme moenster i at opstaa igen fra andet indhold. */
@media(max-width:620px){
  .btn{white-space:normal;text-align:center}
  /* REGRESSION-RETTELSE (2026-08-17, samme dag): white-space:normal ovenfor gjorde
     knapper ombrydelige — men .hero-cta .btn havde flex:1, saa to knapper delte
     raekken og blev ~116px brede. Med tekst paa 2-3 linjer og border-radius:999px
     blev "Book en demo" i CTA-baandet en 116x89px KLAT. Maalt og fotograferet.
     Loesningen er ikke at fjerne ombrydningen (den forhindrer vandret overloeb ved
     320px) men at give knapperne fuld bredde: saa er der plads til teksten paa
     én linje, og en bred knap kan ikke blive rund. */
  .hero-cta{flex-direction:column;flex-wrap:nowrap}
  .hero-cta .btn{flex:none;width:100%}
}
@media(max-width:980px){
  .split>*,.contact-grid>*,.cards>*,.benefits>*,.audit-grid>*,
  .tcols>*,.values>*,.svc-grid>*,.steps>*,.td-intro>*{min-width:0}
}

/* --- 3) Trust-striben paa mobil ----------------------------------------
   Var en centreret ombrydende flexbox: hver raekke centrerede sig selv, saa de
   fire tal landede paa fire forskellige venstrekanter (maalt ved 320px: 60, 72,
   74 og 90px). Naerheden grupperede forkert — "100%" og "EU" delte raekke med
   400px imellem — og det foerste trovaerdighedselement efter helten laeste som
   en gengivelsesfejl.

   Nu én to-kolonne-tabel: display:contents paa .trust-stat loefter tal og label
   op som direkte grid-boern, saa ALLE fire par deler de samme to kolonner.
   align-items:baseline saetter det store tals grundlinje paa labelens foerste
   linje. Kun ét sted at aendre, og intet kan raage. */
@media(max-width:620px){
  .trust-inner{
    display:grid;grid-template-columns:auto 1fr;
    /* Tal og label taet sammen (.7rem), stoerre luft mellem parrene (12px + de
       store tals egen hoejde) — saa parrene laeses som fire enheder, ikke otte. */
    align-items:baseline;column-gap:.7rem;row-gap:12px;
    text-align:left;max-width:22rem;margin-inline:auto
  }
  /* Ingen max-width her: mono med .14em spatiering er bred, og en ch-graense
     pressede labelen fra 2 til 3 linjer. text-wrap:balance alene fordeler
     linjerne jaevnt og hindrer at "REGIONER" staar alene. */
  .trust-inner .tlabel{grid-column:1/-1;text-align:center;text-wrap:balance}
  .trust-stat{display:contents}
  .trust-stat span{max-width:none}
}

/* --- 2) Trykflader paa touch ------------------------------------------
   Footerens juridiske links var 22px hoeje — og det er praecis dem, der SKAL
   kunne rammes. Kun paa touch-enheder (pointer:coarse), saa desktop-footeren
   ikke bliver hoejere uden grund. */
@media(pointer:coarse){
  .footer-bottom .fb-links a{display:inline-block;padding:11px 0}
  .footer-col a{padding:10px 0}
  /* Telefon og e-mail er de vigtigste handlinger i footeren paa en telefon —
     de skal have fuld trykflade, ikke bare vaere over minimumsgraensen. */
  .contact-info .ci a,.footer-ci a{display:inline-block;padding:10px 0}
}