/* B-208a: Forsiden efter Taste-, Emil Kowalski- og Impeccable-principperne.
   Prototype: docs/design/forside-v2-prototype.html. Filen indlæses efter forsidens <style> i <head>,
   men delfilerne har egne <style>-blokke længere nede i dokumentet. Derfor er komponentreglerne
   afgrænset med #indhold, så de vinder uden !important.
   Én accentfarve (orange) på primære knapper, én hjørneradius (12-14 px), lyst tema med
   demo-sektionen som sidens eneste mørke flade. */


:root{
  --canvas:#f6f7f9;--ink:#0f1a2e;--ink-2:#3b4760;--muted:#58657b;--muted-on-tint:#4c5a72;--line:#dfe3ea;--line-2:#c9d0dc;
  --navy:#123278;--deep:#0a1f52;--sky:#eaf0fb;--ok:#0f7a55;
  --r:14px;--r-ctl:12px;--ease-out:cubic-bezier(.23,1,.32,1);
  --shadow:0 1px 2px rgb(18 50 120 / .08),0 20px 44px -18px rgb(18 50 120 / .28);
}
body{font-size:1.0625rem;line-height:1.6}
::selection{background:#fde2ae;color:#0f1a2e}
.wrap{width:min(1180px,100% - 2*clamp(16px,4vw,40px))}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.i{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Knapper: én radius, tryk giver efter, hover kun på pegeredskaber. */
#indhold .button{min-height:50px;gap:10px;padding:0 22px;border-radius:var(--r-ctl);font-weight:600;line-height:1;border:1px solid transparent;transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease}
#indhold .button:active{transform:scale(.97)}
#indhold .button.primary{background:var(--orange);color:#2e1f00;box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 8px 18px -10px rgb(180 105 0 / .7)}
#indhold .button.secondary{background:#fff;color:var(--navy);border-color:var(--line-2)}
#indhold .button .i{width:18px;height:18px;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  #indhold .button.primary:hover{background:#f7a826}
  #indhold .button.secondary:hover{border-color:var(--navy)}
  #indhold .button:hover .i{transform:translateX(3px)}
}

/* Sektioner: overskrift og tekst stablet. */
#indhold .section{padding:clamp(72px,9vw,120px) 0}
#indhold .section[id]{scroll-margin-top:84px}
#indhold .heading{max-width:44rem}
#indhold .heading h2{font-weight:700;letter-spacing:-.032em;line-height:1.05;font-size:clamp(1.9rem,3.6vw,3rem)}
#indhold .heading p{color:var(--ink-2);font-size:1.125rem;max-width:62ch;margin-top:16px}
#indhold .fine{color:var(--muted);font-size:.875rem}

/* Toppen: lys flade, overskrift i fuld bredde, rigtige skærmbilleder. */
#indhold .hero{overflow:hidden;background:none;color:var(--ink);padding-top:clamp(40px,6vw,88px)}
#indhold .hero::after{display:none}
#indhold .hero h1{max-width:21em;margin:0;font-weight:700;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.05;letter-spacing:-.032em}
#indhold .hero-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);margin-top:clamp(24px,3vw,36px);align-items:start}
#indhold .hero .lead{margin:0;max-width:30ch;color:var(--ink-2);font-size:clamp(1.1rem,1.4vw,1.25rem)}
#indhold .hero .actions{margin-top:28px}
#indhold .hero-stage{position:relative;height:clamp(300px,34vw,440px)}
#indhold .hero-screen{position:absolute;margin:0;overflow:hidden;background:#fff;box-shadow:var(--shadow),0 0 0 1px rgb(18 50 120 / .08)}
#indhold .hero-screen img{display:block;width:100%;height:auto}
#indhold .hero-screen.desk{inset:0 -22% 0 0;border-radius:var(--r) var(--r) 0 0}
#indhold .hero-screen.phone{width:30%;right:4%;top:18%;border-radius:24px;border:5px solid #0e1830}
@media (prefers-reduced-motion:no-preference){
  #indhold .hero-screen{animation:hero-rise 900ms var(--ease-out) both}
  #indhold .hero-screen.phone{animation-delay:120ms}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(20px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:820px){
  #indhold .hero-row{grid-template-columns:1fr}
  #indhold .hero-stage{height:320px;margin-top:8px}
  #indhold .hero-screen.desk{right:-40%}
  #indhold .hero-screen.phone{width:44%}
}
@media (max-width:460px){#indhold .hero .actions .button{width:100%}}

/* Til hvem: asymmetrisk, privatpersoner fremhævet. */
#indhold .aud-pick{grid-template-columns:1.25fr 1fr 1fr;gap:16px}
#indhold .aud-pick a{gap:14px;padding:28px;border:0;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);transition:box-shadow 200ms ease,transform 200ms var(--ease-out)}
#indhold .aud-pick li:first-child a{background:var(--sky);box-shadow:none}
#indhold .aud-pick a:active{transform:scale(.99)}
#indhold .aud-icon{width:44px;height:44px;border-radius:var(--r-ctl);background:var(--sky)}
#indhold .aud-pick li:first-child .aud-icon{background:#fff}
#indhold .aud-pick b{margin-top:0;font-size:1.5rem;letter-spacing:-.03em;line-height:1.1}
#indhold .aud-pick span{color:var(--ink-2)}
#indhold .aud-pick .aud-more{display:flex;align-items:center;gap:8px;color:var(--navy);font-weight:600}
#indhold .aud-pick .aud-more .i{width:18px;height:18px;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  #indhold .aud-pick a:hover{box-shadow:0 0 0 1px var(--navy)}
  #indhold .aud-pick a:hover .aud-more .i{transform:translateX(4px)}
}
@media (max-width:900px){#indhold .aud-pick{grid-template-columns:1fr}}
#indhold .aud-map{background:#fff;border:0;box-shadow:0 0 0 1px var(--line);border-radius:var(--r)}
#indhold .aud-node{border-color:var(--line);border-radius:var(--r-ctl)}
#indhold .aud-node.core{border-color:var(--navy)}
#indhold .aud-link .i{width:22px;height:22px}
#indhold .aud-link .v{display:none}
@media (max-width:900px){#indhold .aud-link .h{display:none}#indhold .aud-link .v{display:block}}

/* Målgruppesektioner: grupper med én hårlinje i stedet for bokse. */
#indhold .aud{background:transparent}
#indhold .aud.alt{background:#fff}
#indhold .aud-grid{gap:40px 64px}
#indhold .aud-list{background:none;border:0;border-radius:0;padding:0}
#indhold .aud-list h3{margin:0 0 4px;padding-bottom:12px;border-bottom:1px solid var(--line-2);font-size:.95rem;font-weight:600;color:var(--muted)}
#indhold .aud-list li{padding:16px 0 0;border-top:0}
#indhold .aud-list li b{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
#indhold .aud-list li span{color:var(--ink-2);font-size:1rem}
#indhold .aud-badge{border-radius:6px;background:var(--sky);border-color:#c7d5f2;color:var(--navy)}
#indhold .aud-actions{margin-top:48px}
@media (max-width:460px){#indhold .aud-actions .button{width:100%}}

/* Demo: sidens primære handling og eneste mørke flade. */
#indhold .try{position:relative;overflow:hidden;background:var(--deep);color:#eaf0ff}
#indhold .try::before{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,rgb(31 75 176 / .35),transparent);pointer-events:none}
#indhold .try .wrap{position:relative}
#indhold .try .heading h2{color:#fff}
#indhold .try .heading p{color:#c3cfeb}
#indhold .try-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:20px 0 0;padding:0;list-style:none;color:#d5def3;font-size:.975rem}
#indhold .try-facts li{display:flex;align-items:center;gap:8px}
#indhold .try-facts .i{width:18px;height:18px;color:#6ee7b7}
#indhold .try-grid{gap:20px;margin-top:clamp(32px,4vw,48px)}
#indhold .try-card{gap:14px;padding:clamp(24px,3vw,36px);border:0;border-radius:20px;color:var(--ink);box-shadow:0 30px 60px -30px rgb(0 0 0 / .5)}
#indhold .try-head{display:flex;align-items:center;gap:14px}
#indhold .try-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-ctl);background:var(--sky);color:var(--navy)}
#indhold .try-card h3{margin:0;font-size:1.6rem;letter-spacing:-.03em}
#indhold .try-card p{color:var(--ink-2)}
#indhold .try-card ul{display:grid;gap:8px;margin:4px 0 8px;padding:0;list-style:none;color:var(--ink-2);line-height:1.5}
#indhold .try-card li{display:flex;gap:10px;align-items:flex-start}
#indhold .try-card li .i{width:18px;height:18px;margin-top:3px;color:var(--ok)}
#indhold .try-card select{max-width:360px;min-height:48px;border-radius:var(--r-ctl);border-color:var(--line-2)}
#indhold .try-card button{margin-top:16px}
#indhold .try-signup{margin:28px 0 0;color:#d5def3}
#indhold .try-signup a{color:#fff}
#indhold .try-steps{color:#c3cfeb}
#indhold .try-error{color:#fecaca}

/* Forløb: overskrift over tekst, trin med samme radius. */
#indhold .strip{background:transparent}
#indhold .process-head{display:block}
#indhold .process-head p{max-width:62ch;margin-top:16px;color:var(--ink-2);font-size:1.125rem}
#indhold .flowx-steps a{border-radius:var(--r-ctl);border-color:var(--line)}
#indhold .flowx-num{border-radius:10px}
#indhold .flowx-label{border-radius:6px;background:var(--sky);color:var(--navy);border-color:#c7d5f2}

/* Tavlebyggeren: Tabler-ikoner i stedet for tegn, samme radius. */
#indhold .pb .pb-minus{display:grid;place-items:center;border-radius:10px}
#indhold .pb .pb-minus .i{width:16px;height:16px;stroke-width:2.2}
#indhold .pb .pb-plus{display:inline-flex;align-items:center;gap:6px;border-radius:10px}
#indhold .pb .pb-plus .i{width:14px;height:14px;stroke-width:2.2}
#indhold .interval-symbol{border-radius:10px}
#indhold .interval-symbol .i{width:20px;height:20px}
#indhold .pb-plan li{border-radius:var(--r-ctl)}

/* Funktioner, tekniske anlæg, tidlig adgang og statistik. */
#indhold .fm-col,#indhold .technical-card{border-radius:var(--r);border-color:var(--line)}
#indhold .fm-col h3{font-weight:600}
#indhold .technical-side{background:#fff;color:var(--ink)}
#indhold .technical-side p{color:var(--muted)}
#indhold .launch-card{border-radius:20px;border-color:var(--line);background:#fff;box-shadow:none}
#indhold .launch-card::after{display:none}
#indhold .launch-card h2{font-weight:700;letter-spacing:-.032em}
#indhold .safety-stat{border-color:var(--line)}
#indhold .safety-number{font-weight:700;letter-spacing:-.04em}

/* Headeren er fælles, men forsidens skrift er lidt bredere end systemskriften. Strammes lidt op lige over mobilmenuen. */
@media (max-width:1100px){.site-top .site-nav{gap:16px}.site-nav .site-actions{gap:6px}.site-nav .site-actions a{padding:0 12px}.site-nav .site-menu summary,.site-nav .site-menu>li>a{padding:0 10px}}
#indhold .flowx-more a{color:var(--navy)}
.launch strong{white-space:nowrap}