/* SPOR 2030 · fælles grundlag for hjemmesidens undersider (fase 2).
   Samme farver, skrift, knapper, menu og sidefod som den godkendte konceptside (/koncept/, koncept.css);
   sidernes egne afsnit bygges af de få dele nedenfor. Skrift: Instrument Serif (SIL OFL 1.1) og Geist, lokalt. */
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --paper:#f5f3f0; --stone:#eee9e2; --ink:#1f221a; --red:#d63a24; --red-press:#bf3220; --white:#ffffff;
  --ink-2:#4a4d44; --on-ink:#f5f3f0; --on-ink-2:#c9c6be; --hair:rgba(31,34,26,.12); --hair-ink:rgba(245,243,240,.14);
  --disp:"Instrument Serif", Georgia, "Times New Roman", serif;
  --text:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* margen: følger skærmen, men indholdet bliver aldrig bredere end 1520px; fladerne går stadig helt ud */
  --m:max(clamp(20px,5.8vw,84px),calc(50vw - 760px));
  --ease:cubic-bezier(.22,1,.36,1);
  --d1:clamp(52px,7vw,104px); --d2:clamp(40px,5vw,76px); --d3:clamp(28px,2.6vw,40px);
  --lead:clamp(18px,1.4vw,21px);
  --lift:0 1px 2px rgba(31,34,26,.06),16px 30px 60px -26px rgba(31,34,26,.3);
  --sec:clamp(96px,10vw,152px);
  color-scheme:light;
}
*{box-sizing:border-box}
/* «hidden» skjuler altid, også når en komponent har sin egen display-værdi (scripts styrer synlighed med hidden) */
[hidden]{display:none!important}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0;font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--ink);color:var(--paper)}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:60;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none}
.skip:focus{top:12px}
main:focus{outline:none}
.d1,.d2{font-family:var(--disp);font-weight:400;letter-spacing:-.012em;text-wrap:balance}
.d1{font-size:var(--d1);line-height:.96}
.d2{font-size:var(--d2);line-height:1}
.d3{font-family:var(--disp);font-weight:400;font-size:var(--d3);line-height:1.06;text-wrap:balance}
.lead{font-size:var(--lead);line-height:1.5;max-width:46ch}
.dot{display:inline-block;width:.15em;height:.15em;border-radius:50%;background:var(--red);margin-left:.05em;vertical-align:baseline}
.eye{display:block;font:500 12.5px/1.3 var(--text);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2)}
.wrap{padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
.sec{padding-block:var(--sec)}
.stone{background:var(--stone)}
.ink{background:var(--ink);color:var(--on-ink)}
.ink .eye{color:var(--on-ink-2)}
.note{font-size:14px;line-height:1.5;color:var(--ink-2)}
.ink .note{color:var(--on-ink-2)}
.fine{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:60ch}

/* knapper: én form (helt runde), rød kun til den primære handling */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;font:500 16px/1 var(--text);text-decoration:none;border:0;cursor:pointer;
}
.btn-red{background:var(--red);color:#fff}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.7;cursor:progress}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-size:16px;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1px no-repeat}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

/* menu: følger med ned; når siden er scrollet, får den en lys flade */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:32px;height:96px;transition:height .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.nav.solid{height:68px;background:rgba(245,243,240,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--hair)}
.brand{display:inline-flex;align-items:center;gap:12px;font:600 17px/1 var(--text);text-decoration:none;margin-right:auto}
.brand svg{color:var(--red)}
.nav .links{display:flex;gap:28px}
.nav .links a{font-size:15px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}





[id]{scroll-margin-top:84px}
.nav .btn{min-height:46px;padding:0 22px;font-size:15px}
@media (max-width:1120px){.nav .links{display:none}}
@media (max-width:980px){.nav{height:76px}.nav.solid{height:64px}}
@media (max-width:560px){.nav{gap:12px}.nav .btn{padding:0 14px;font-size:14px;white-space:nowrap}.brand{white-space:nowrap;gap:10px}.brand svg{width:24px}}
/* smalle telefoner: knappen «Tag gratis AI-tjek» og «Menu» skal kunne stå ved siden af navnet */
@media (max-width:380px){.nav{gap:8px}.nav .btn{padding:0 11px;font-size:13px}.brand{font-size:15px;gap:8px}}
@media (max-width:340px){.brand{font-size:0;gap:0}}

/* ---------- sidens første skærm ---------- */
.top{padding-top:calc(96px + clamp(40px,6vw,88px));padding-bottom:var(--sec);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px clamp(40px,6vw,96px);align-items:end}
.top .copy{display:grid;gap:26px;align-content:end}
.top.solo{grid-template-columns:minmax(0,1fr)}
.top.start{align-items:start}
.top > figure{width:100%;max-width:min(440px,100%);justify-self:end}
@media (max-width:900px){.top > figure{justify-self:start;max-width:420px}}
.top.solo .copy{max-width:980px}
@media (max-width:900px){.top{grid-template-columns:minmax(0,1fr);padding-top:calc(76px + 48px)}}

/* et foto som et fysisk aftryk: lyset kommer fra øverste venstre hjørne */
.print{position:relative;border-radius:18px;overflow:hidden;background:var(--stone);box-shadow:var(--lift)}
.print img{width:100%;height:100%;object-fit:cover}
.print.tall{aspect-ratio:4/5}
.print.wide{aspect-ratio:16/9}
.split > .print.tall{width:100%;max-width:440px;justify-self:end}
@media (max-width:900px){.split > .print.tall{justify-self:start;max-width:420px}}
.cap{margin-top:14px}
.who{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center;font-size:15px;color:var(--ink-2)}
.who img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.who b{display:block;color:var(--ink);font-weight:500}

/* ---------- afsnit ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,6vw,104px);align-items:start}
.split > .head{display:grid;gap:22px;align-content:start}
.prose{display:grid;gap:1em;font-size:18px;line-height:1.6;max-width:64ch}
.prose a{text-underline-offset:3px}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.prose{font-size:17px}}

/* liste med røde prikker */
.dots{list-style:none;display:grid;gap:12px}
.dots li{position:relative;padding-left:22px;line-height:1.5}
.dots li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.dots.ring li::before{background:transparent;box-shadow:inset 0 0 0 1.4px var(--ink-2)}
.dots b{font-weight:500}

/* tre spalter */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.col{display:grid;gap:18px;align-content:start;padding:28px 30px 32px;border-radius:20px;background:var(--white);box-shadow:0 1px 2px rgba(31,34,26,.06)}
.col h3{font:400 28px/1.05 var(--disp)}
.col .dots{font-size:16px}
@media (max-width:980px){.cols{grid-template-columns:minmax(0,1fr)}}

/* mørkt kort med rækker */
.card-ink{background:var(--ink);color:var(--on-ink);border-radius:20px;padding:34px 34px 30px;box-shadow:var(--lift)}
.card-ink h3{font:400 30px/1.05 var(--disp);margin-bottom:18px}
.rows{list-style:none;display:grid}
.rows li{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--hair-ink);font-size:16px;line-height:1.5;color:var(--on-ink-2)}
.rows li b{color:var(--on-ink);font-weight:500}
@media (max-width:560px){.card-ink{padding:26px 22px 22px}}

/* nummererede principper */
.nums{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px;margin-top:56px}
.nums li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 18px;padding-top:24px;border-top:1px solid var(--hair)}
.nums .n{grid-row:span 2;font:400 34px/1 var(--disp);color:var(--red-press)}
.nums h3{font:500 20px/1.3 var(--text)}
.nums p{color:var(--ink-2);line-height:1.55;max-width:46ch}
@media (max-width:900px){.nums{grid-template-columns:minmax(0,1fr);gap:28px}}

/* trin på en lodret rød tråd (som «Sådan kommer I i gang» på konceptsiden) */
.path{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:26px}
.path::before{content:"";position:absolute;left:5.2px;top:9px;bottom:9px;width:1.6px;background:var(--red)}
.path li{position:relative;font-size:17px;line-height:1.5}
.path li::before{content:"";position:absolute;left:-34px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.6px var(--red)}
.stone .path li::before{background:var(--stone)}
.path li:last-child::before{background:var(--red)}
.path li b{display:block;font-weight:500}
.path li span{color:var(--ink-2)}

/* trin på en vandret rød tråd */
.flow{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-top:34px;margin-top:56px}
.flow::before{content:"";position:absolute;left:6px;right:0;top:5px;height:1.6px;background:var(--red)}
.flow li{position:relative;display:grid;gap:10px;align-content:start}
.flow li::before{content:"";position:absolute;left:0;top:-34px;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.6px var(--red)}
.stone .flow li::before{background:var(--stone)}
.flow li:last-child::before{background:var(--red)}
.flow b{font:400 28px/1.08 var(--disp)}
.flow p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:36ch}
@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr);gap:28px;padding:0 0 0 30px}.flow::before{left:5.2px;right:auto;top:6px;bottom:6px;width:1.6px;height:auto}.flow li::before{left:-30px;top:8px}}

/* links til artikler */
.reads{list-style:none;display:grid;border-top:1px solid var(--hair)}
.reads a{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding:16px 0;border-bottom:1px solid var(--hair);font:400 clamp(20px,1.7vw,24px)/1.3 var(--disp);text-decoration:none}
.reads a svg{flex:none;color:var(--red);transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){.reads a:hover svg{transform:translateX(4px)}}

/* spørgsmål: ét bånd pr. spørgsmål, alle svar synlige (som på konceptsiden) */
.faq-head{padding-block:var(--sec) 48px}
.band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;padding-block:56px}
.band:nth-child(odd){background:var(--stone)}
.band h3{font:500 clamp(22px,1.9vw,28px)/1.25 var(--text);max-width:24ch}
.band p{font-size:18px;line-height:1.55;max-width:60ch}
.band a{text-underline-offset:3px}
@media (max-width:900px){.band{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:36px}.band h3{font-size:21px}.band p{font-size:17px}}

/* faner: eksempler, der skiftes med knapper */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1.4px var(--hair);font:500 15px/1 var(--text);color:var(--ink);cursor:pointer;transition:background-color .24s var(--ease),color .24s var(--ease)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
[role="tabpanel"][hidden]{display:none}

/* før og efter, bundet af tråden */
.pair{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:28px}
.pair::before{content:"";position:absolute;left:calc(50% - 28px);right:calc(50% - 28px);top:50%;height:1.6px;background:var(--red)}
.pair > div{position:relative;display:grid;gap:12px;align-content:start;min-height:260px;padding:28px 28px 30px;border-radius:20px}
.pair .now{background:transparent;box-shadow:inset 0 0 0 1.4px var(--hair)}
.pair .built{background:var(--white);box-shadow:var(--lift)}
.pair .k{display:flex;align-items:center;gap:10px;font:500 13px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pair .built .k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.pair .slip{padding:10px 14px;border-radius:10px;background:var(--white);box-shadow:0 1px 2px rgba(31,34,26,.08);font-size:15px}
.pair .slip small{display:block;color:var(--ink-2);font-size:13.5px}
.pair .q{font:400 24px/1.2 var(--disp)}
.pair .a{font-size:16px;line-height:1.5}
.pair .a small{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.pair .step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:16px;line-height:1.45}
.pair .step::before{content:"";width:10px;height:10px;margin-top:6px;border-radius:50%;box-shadow:inset 0 0 0 1.6px var(--red)}
@media (max-width:760px){.pair{grid-template-columns:minmax(0,1fr);gap:28px}.pair::before{display:none}.pair .built::after{content:"";position:absolute;left:32px;top:-28px;width:1.6px;height:28px;background:var(--red)}.pair > div{min-height:0}}

/* formular */
.form-card{display:grid;gap:18px;padding:34px 34px 30px;border-radius:20px;background:var(--white);box-shadow:var(--lift)}
.form-card h2{font:400 32px/1.05 var(--disp)}
.form-card form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label{font:500 15px/1.3 var(--text)}
.field label small{font-weight:400;color:var(--ink-2)}
.field input,.field textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid rgba(31,34,26,.22);border-radius:12px;background:var(--paper);font:400 17px/1.4 var(--text);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.status:empty{display:none}
.status{font-size:15px;line-height:1.5}
.status[role="alert"]{color:var(--red-press)}
.facts{list-style:none;display:grid;gap:6px;font-size:18px}
.facts a{text-underline-offset:3px}
.copy-btn{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:500 15px/1 var(--text);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:560px){.form-card{padding:26px 20px 22px}}

/* ---------- slutningen + sidefod ---------- */
.end{padding-block:clamp(110px,11vw,150px) clamp(84px,8vw,110px)}
.end .final{font:400 clamp(44px,6vw,96px)/1.02 var(--disp);letter-spacing:-.012em;max-width:18ch;text-wrap:balance}
.end .acts{margin-top:40px}
.end .acts .lnk{color:var(--on-ink)}
.end .after{margin-top:24px;font-size:17px;color:var(--on-ink-2);max-width:60ch}
.end .after a{color:var(--on-ink);white-space:nowrap;text-underline-offset:3px}
.end .path{margin-top:48px;max-width:760px}
.end .path::before{background:var(--red)}
.end .path li::before{background:var(--ink)}
.end .path li:last-child::before{background:var(--red)}
.end .path li span{color:var(--on-ink-2)}
.foot{border-top:1px solid var(--hair-ink);padding-block:64px 40px;font-size:15px;color:var(--on-ink-2)}
.foot.first{border-top:0}
.f-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px 32px}
.f-brand .brand{color:var(--on-ink)}
.f-brand p{margin-top:18px;max-width:30ch;line-height:1.5}
.f-col{display:grid;gap:10px;align-content:start}
.f-h{font:500 12px/1.3 var(--text);letter-spacing:.17em;text-transform:uppercase;color:var(--on-ink-2);margin-bottom:6px}
.f-col a,.f-col .f-link{color:var(--on-ink);text-decoration:none;text-align:left}
.f-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:56px;padding-top:24px;border-top:1px solid var(--hair-ink)}
.f-bot a{color:var(--on-ink)}
.f-link{background:none;border:0;padding:0;font:inherit;color:var(--on-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.consent-note{display:block;margin-top:6px;font-size:14px;color:var(--on-ink-2)}
@media (max-width:900px){.f-top{grid-template-columns:repeat(2,minmax(0,1fr))}.f-brand{grid-column:1/-1}}
@media (max-width:360px){.f-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.end .acts .btn{width:max-content}}

/* indgange: overskrift, tekst og billede glider stille op, én gang; uden JavaScript står alt fremme */
.js [data-in]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js [data-in].in{opacity:1;transform:none}


/* ================= sidernes egne fortællinger (fase 2, kvalitetsrunde) ================= */
/* overskrift, der rejser sig ord for ord (kun hvor spor-motion.js er indlæst) */
.wd{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wd > span{display:inline-block}

/* Om mig: tråden fra portrættet gennem erfaringen til SPOR */
.me-top{padding-top:calc(96px + clamp(40px,6vw,88px));display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px clamp(40px,6vw,96px);align-items:end}
.me-top .copy{display:grid;gap:26px;padding-bottom:clamp(8px,3vw,40px)}
.me-top .portrait{position:relative;justify-self:end;width:min(460px,100%)}
.me-top .portrait .print{aspect-ratio:4/5}
.me-top .portrait figcaption{margin-top:14px}
.story{position:relative;display:grid;gap:clamp(110px,14vw,200px);padding-block:clamp(120px,14vw,200px) var(--sec)}
.story-thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.story-thread path{fill:none;stroke-width:1.6;stroke-linecap:round}
.story-thread .ghost{stroke:var(--hair)}
.story-thread .live{stroke:var(--red)}
.station{position:relative;width:min(600px,100%);display:grid;gap:20px}
.station.l{justify-self:start;margin-left:clamp(36px,9vw,140px)}
.station.r{justify-self:end;margin-right:clamp(0px,4vw,60px)}
.knot{position:absolute;left:-40px;top:.55em;width:14px;height:14px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.8px var(--red);transition:background-color .4s var(--ease),transform .4s var(--ease)}
.knot.on{background:var(--red);transform:scale(1.15)}
.no-motion .knot{background:var(--red)}
.station .pull{font:400 clamp(34px,4.2vw,64px)/1.04 var(--disp);letter-spacing:-.01em;text-wrap:balance;margin:0}
.station .big{font:400 clamp(24px,2.3vw,34px)/1.2 var(--disp);text-wrap:pretty}
.station p{font-size:18px;line-height:1.6;max-width:56ch}
.station .card-ink{margin-top:8px}
.station.spor{width:min(680px,100%)}
@media (max-width:900px){.me-top{grid-template-columns:minmax(0,1fr);padding-top:calc(76px + 40px)}.me-top .portrait{justify-self:start;width:min(380px,100%)}
  .story{gap:88px;padding-block:96px}.station.l,.station.r{justify-self:stretch;margin:0 0 0 36px;width:auto}.knot{left:-36px}.station p{font-size:17px}}

/* fagligheder og principper som rolig, redaktionel liste (ingen kort) */
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);margin-top:56px;border-top:1px solid var(--hair)}
.ledger > div{display:grid;gap:16px;align-content:start;padding-top:28px}
.ledger h3{font:400 clamp(30px,2.6vw,40px)/1 var(--disp)}
.ledger .dots{font-size:16px;color:var(--ink-2)}
.creed{list-style:none;margin-top:48px;border-top:1px solid var(--hair)}
.creed li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 56px;padding:34px 0;border-bottom:1px solid var(--hair)}
.creed h3{font:400 clamp(28px,2.6vw,40px)/1.05 var(--disp)}
.creed p{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.bleed{margin-top:0}
.bleed img{width:100%;aspect-ratio:21/9;object-fit:cover}
@media (max-width:900px){.ledger{grid-template-columns:minmax(0,1fr)}.ledger > div{padding-block:24px;border-bottom:1px solid var(--hair)}.creed li{grid-template-columns:minmax(0,1fr)}.bleed img{aspect-ratio:4/3}}

/* Rådgivning: fra rod til fungerende løsning */
.tx-top{padding-top:calc(96px + clamp(40px,6vw,88px));padding-bottom:clamp(56px,6vw,88px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px clamp(40px,6vw,96px);align-items:end}
.tx-top .copy{display:grid;gap:24px}
.tx-top .who{margin-top:4px}
@media (max-width:900px){.tx-top{grid-template-columns:minmax(0,1fr);padding-top:calc(76px + 40px)}}
.tx-stage{padding-block:clamp(48px,5vw,72px) var(--sec)}
.tx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.tx{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:stretch;margin-top:28px;min-height:420px}
.tx-now,.tx-built{position:relative;display:grid;gap:12px;align-content:start;padding:30px 30px 32px;border-radius:20px}
.tx-now{box-shadow:inset 0 0 0 1.4px var(--hair)}
.tx-built{background:var(--white);box-shadow:var(--lift)}
.tx .k{display:flex;align-items:center;gap:10px;font:500 13px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.tx-built .k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.tx .slip{position:relative;padding:12px 16px;border-radius:10px;background:var(--white);box-shadow:0 1px 2px rgba(31,34,26,.08),6px 10px 24px -14px rgba(31,34,26,.35);font-size:15px;will-change:transform}
.tx .slip small{display:block;color:var(--ink-2);font-size:13.5px}
.tx-now .slip{justify-self:start;max-width:100%}
.tx.settled .tx-now .slip{box-shadow:0 1px 2px rgba(31,34,26,.08)}
.tx-link{position:relative;align-self:center;height:1.6px;margin:0 -2px;background:var(--red);transform-origin:left}
.tx-link::after{content:"";position:absolute;right:-5px;top:-5.2px;width:12px;height:12px;border-radius:50%;background:var(--red)}
.tx .q{font:400 clamp(24px,2vw,30px)/1.15 var(--disp)}
.tx .a{font-size:16.5px;line-height:1.55}
.tx .a small{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.tx .step{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:17px;line-height:1.45;padding:10px 0;border-top:1px solid var(--hair)}
.tx .step:first-of-type{border-top:0}
.tx .step::before{content:"";width:12px;height:12px;margin-top:5px;border-radius:50%;background:var(--red)}
.replay[hidden],.copy-btn[hidden]{display:none}
.replay{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;font:500 15px/1 var(--text);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:860px){.tx{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 64px auto;min-height:0}.tx-link{justify-self:start;margin:0 0 0 34px;width:1.6px;height:100%;transform-origin:top}.tx-link::after{right:auto;left:-5.2px;top:auto;bottom:-5px}}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px}
.offers > div{display:grid;gap:14px;align-content:start;padding:8px clamp(20px,3vw,44px) 8px 0}
.offers > div + div{padding-left:clamp(20px,3vw,44px);border-left:1px solid var(--hair)}
.offers h3{font:400 clamp(28px,2.4vw,36px)/1.05 var(--disp)}
.offers p{color:var(--ink-2);line-height:1.55}
.offers .price{font:500 15px/1.3 var(--text);color:var(--ink)}
.not{margin-top:40px;font-size:16px;color:var(--ink-2)}
.not b{font-weight:500;color:var(--ink)}
@media (max-width:900px){.offers{grid-template-columns:minmax(0,1fr)}.offers > div,.offers > div + div{padding:24px 0;border-left:0;border-top:1px solid var(--hair)}}
.flow-line{position:absolute;left:6px;right:0;top:5px;height:1.6px;background:var(--red);transform-origin:left}
.flow.drawn::before{background:var(--hair)}
@media (max-width:900px){.flow-line{left:5.2px;right:auto;top:6px;bottom:6px;width:1.6px;height:auto;transform-origin:top}}
.flow.drawn li:last-child::before{background:var(--paper)}
.stone .flow.drawn li:last-child::before{background:var(--stone)}
.flow li.on::before,.flow.drawn li.on:last-child::before{background:var(--red)}
.bridge{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:end}
.bridge .d3{max-width:22ch}
@media (max-width:900px){.bridge{grid-template-columns:minmax(0,1fr)}}

/* Kontakt: én skærm; tråden langs formularen viser, hvor langt man er, og leder mod «Send» */
.ct{padding-top:calc(96px + clamp(36px,5vw,72px));padding-bottom:clamp(72px,8vw,120px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px clamp(40px,6vw,104px);align-items:start}
.ct .copy{display:grid;gap:24px;grid-column:1;grid-row:1}
.ct .form-card{grid-column:2;grid-row:1 / span 2}
.ct > .mini{grid-column:1;grid-row:2;align-self:start}
.ct .facts{font-size:19px}
.ct .mini{list-style:none;display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--hair);font-size:16px;color:var(--ink-2)}
.ct .mini b{color:var(--ink);font-weight:500}
@media (max-width:900px){.ct{grid-template-columns:minmax(0,1fr);padding-top:calc(76px + 36px)}.ct .copy,.ct .form-card,.ct > .mini{grid-column:1;grid-row:auto}}
.tform{position:relative;display:grid;gap:22px;padding-left:40px}
.tform .rail{position:absolute;left:6px;top:14px;bottom:30px;width:1.6px;background:var(--hair)}
.tform .rail i{position:absolute;inset:0;background:var(--red);transform:scaleY(var(--p,0));transform-origin:top;transition:transform .5s var(--ease)}
.tform .field,.tform .send{position:relative}
.tform .field::before,.tform .send::before{content:"";position:absolute;left:-40px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 1.8px var(--hair);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.tform .field.ok::before{background:var(--red);box-shadow:none}
.tform .field.req::before{box-shadow:inset 0 0 0 1.8px var(--red)}
.tform .send::before{top:19px}
.tform.ready .send::before{background:var(--red);box-shadow:0 0 0 6px rgba(214,58,36,.14)}
.tform .send{display:grid;gap:12px;justify-items:start}
.tform .hint{font-size:14px;color:var(--ink-2)}
.form-card .done{display:grid;gap:14px}
.form-card .done[hidden]{display:none}
.calm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(28px,4vw,64px);padding-block:clamp(72px,8vw,112px);border-top:1px solid var(--hair)}
.calm h2{font:400 clamp(26px,2.2vw,32px)/1.1 var(--disp);margin-bottom:14px}
.calm p,.calm li{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
@media (max-width:900px){.calm{grid-template-columns:minmax(0,1fr)}}

/* mørke flader, der bryder de lyse (som på konceptsiden) */
.ink .creed{border-color:var(--hair-ink)}
.ink .creed li{border-color:var(--hair-ink)}
.ink .creed p{color:var(--on-ink-2)}
.ink .tab{color:var(--on-ink);box-shadow:inset 0 0 0 1.4px var(--hair-ink)}
.ink .tab[aria-selected="true"]{background:var(--paper);color:var(--ink)}
.ink .tx-now{box-shadow:inset 0 0 0 1.4px var(--hair-ink)}
.ink .tx-now .k{color:var(--on-ink-2)}
.ink .tx .slip{color:var(--ink)}
.ink .replay{color:var(--on-ink-2)}
.tx-stage.ink{padding-block:clamp(56px,6vw,88px)}
.ink .tx-built{color:var(--ink)}
.ink .tx-built .k,.ink .tx-built small{color:var(--ink-2)}
.ink .flow li::before,.ink .flow.drawn li:last-child::before{background:var(--ink)}
.ink .flow li:last-child::before{background:var(--red)}
.ink .flow.drawn li:last-child:not(.on)::before{background:var(--ink)}
.ink .flow li.on::before,.ink .flow.drawn li.on:last-child::before{background:var(--red)}
.ink .flow.drawn::before{background:var(--hair-ink)}
.ink .flow p{color:var(--on-ink-2)}

/* fotoet med tråden bærer ét budskab på den lyse væg */
.bleed{position:relative}
.bleed-msg{position:absolute;left:0;right:0;top:clamp(40px,6.5vw,104px);pointer-events:none}
.bleed-msg p{font:400 clamp(34px,4.3vw,66px)/1.02 var(--disp);letter-spacing:-.012em;max-width:17ch;color:var(--ink);text-wrap:balance}
@media (max-width:900px){.bleed{display:flex;flex-direction:column-reverse}.bleed-msg{position:static;padding-block:0 28px}.bleed-msg p{font-size:clamp(30px,8vw,44px)}}

/* ================= SPOR-siden: beslutningsgrundlaget for at vælge og købe ================= */
.pd-top{padding-top:calc(96px + clamp(40px,6vw,88px));padding-bottom:clamp(64px,7vw,104px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px clamp(40px,6vw,96px);align-items:end}
.pd-top .copy{display:grid;gap:26px}
.pd-card{border-radius:22px;padding:34px 34px 30px;display:grid;gap:10px;box-shadow:var(--lift)}
.pd-price,.pd-big{font:400 clamp(56px,6vw,88px)/.9 var(--disp);letter-spacing:-.01em}
.pd-per{color:var(--on-ink-2);font-size:16px}
.pd-card .dots{font-size:16px;gap:10px;margin:14px 0 6px}
@media (max-width:900px){.pd-top{grid-template-columns:minmax(0,1fr);padding-top:calc(76px + 40px)}}

/* undermenuen følger med og viser, hvor man er på siden */
.pd-sub{position:sticky;top:68px;z-index:30;background:rgba(245,243,240,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair),0 -1px 0 var(--hair)}
.pd-sub .wrap{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.pd-sub .wrap::-webkit-scrollbar{display:none}
.pd-sub a{flex:none;display:inline-flex;align-items:center;min-height:52px;font-size:15px;text-decoration:none;color:var(--ink-2);background:linear-gradient(var(--red),var(--red)) 0 calc(100% - 1px)/0 2px no-repeat;transition:background-size .45s var(--ease),color .2s}
.pd-sub a.on{color:var(--ink);background-size:100% 2px}
@media (max-width:980px){.pd-sub{top:64px}}
.pd-sub ~ section,.pd-sub ~ section [id]{scroll-margin-top:128px}

/* rejsen: en lodret tråd følger scrollen gennem de syv trin */
.jr{padding-block:var(--sec)}
.jr-head{display:grid;gap:22px;max-width:1040px}
.jr-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(32px,5vw,80px);margin-top:72px;align-items:start}
.jr-index{position:sticky;top:150px}
.jr-index ol{list-style:none;display:grid;gap:2px;padding-left:34px}
.jr-rail{position:absolute;left:5.2px;top:20px;bottom:20px;width:1.6px;background:var(--hair)}
.jr-rail i{position:absolute;inset:0;background:var(--red);transform-origin:top;transform:scaleY(var(--p,1))}
.jr-index a{position:relative;display:flex;gap:12px;align-items:baseline;min-height:44px;padding:9px 0;text-decoration:none;font:400 clamp(20px,1.6vw,24px)/1.15 var(--disp);color:var(--ink-2);transition:color .3s var(--ease)}
.jr-index a::before{content:"";position:absolute;left:-34px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.6px var(--red);transition:background-color .3s var(--ease)}
.jr-index a.on{color:var(--ink)}
.jr-index a.on::before,.jr-index a.done::before{background:var(--red)}
.jr-index .n{font:500 12px/1 var(--text);color:var(--ink-2);min-width:14px}
.jr-steps{display:grid;gap:clamp(72px,9vw,128px)}
.jr-step{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(28px,4vw,56px);align-items:start;padding-top:40px;border-top:1px solid var(--hair);scroll-margin-top:150px}
.jr-text{display:grid;gap:18px}
.jr-q{font:400 clamp(24px,2.1vw,30px)/1.2 var(--disp);text-wrap:pretty}
.jr-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.jr-cols h4,.jr-v b{display:block;font:500 12.5px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px}
.jr-cols > div:last-child h4::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}
.jr-cols p,.jr-v{font-size:16.5px;line-height:1.55}
.jr-v{padding-top:16px;border-top:1px solid var(--hair)}
.jr-note{margin-top:56px}
@media (max-width:900px){.jr-grid{grid-template-columns:minmax(0,1fr);margin-top:48px}.jr-index{display:none}.jr-step{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.jr-cols{grid-template-columns:minmax(0,1fr)}}

/* små skærmudsnit fra SPOR */
.ui{border-radius:16px;background:var(--white);box-shadow:var(--lift);overflow:hidden;font-size:14.5px}
.ui-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--hair);background:var(--paper)}
.ui-bar i{width:8px;height:8px;border-radius:50%;background:rgba(31,34,26,.16)}
.ui-bar span{margin-left:10px;font-size:13px;font-weight:500;color:var(--ink-2)}
.ui-body{display:grid;padding:4px 18px 10px}
.ui-row{display:grid;gap:2px;padding:11px 0;border-top:1px solid var(--hair);line-height:1.4}
.ui-row:first-child{border-top:0}
.ui-row b{font-weight:500}
.ui-row em{font-style:normal;font-size:13.5px;color:var(--ink-2)}
.ui-row em.st-m{color:var(--red-press)}
.ui-row.ok b::before,.ui-row.no b::before{display:inline-block;width:18px;font-weight:600}
.ui-row.ok b::before{content:"✓";color:var(--ink)}
.ui-row.no b::before{content:"✕";color:var(--red-press)}
.ui-note{display:grid;gap:4px;padding:14px 0;line-height:1.45}
.ui-note b{font-weight:500}
.ui-act{padding:0 18px 18px}
.ui-act span{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;background:var(--red);color:#fff;font-size:13.5px;font-weight:500}

/* funktioner: rolig liste, og det SPOR ikke gør */
.feat{list-style:none;border-top:1px solid var(--hair)}
.feat li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px 32px;padding:22px 0;border-bottom:1px solid var(--hair)}
.feat h3{font:400 clamp(22px,1.9vw,28px)/1.15 var(--disp)}
.feat p{color:var(--ink-2);line-height:1.55}
.not-box{margin-top:40px;padding:26px 28px;border-radius:18px;box-shadow:inset 0 0 0 1.4px var(--hair);display:grid;gap:14px}
.not-box h3{font:500 17px/1.3 var(--text)}
@media (max-width:700px){.feat li{grid-template-columns:minmax(0,1fr)}}
.big-rows li{font-size:17px}
.big-rows b{font:400 clamp(24px,2vw,30px)/1.15 var(--disp)}

/* pris: mørk flade med prisen, lys flade med opstarten */
.pd-pris{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pd-plan,.pd-way{padding-block:clamp(96px,10vw,140px);display:grid;gap:14px;align-content:start}
.pd-plan{padding-right:clamp(32px,5vw,72px)}
.pd-way{padding-left:clamp(32px,5vw,72px);gap:32px}
.pd-plan .pd-big{font-size:clamp(84px,10vw,152px);margin-top:24px}
.pd-plan .dots{margin:18px 0 20px;font-size:17px}
.pd-plan .note a{text-underline-offset:3px}
@media (max-width:900px){.pd-pris{grid-template-columns:minmax(0,1fr)}.pd-plan,.pd-way{padding-block:96px;padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}.pd-plan .pd-big{font-size:24vw}}
.card-ink .note{color:var(--on-ink-2)}
@media (max-width:560px){.pd-sub .wrap{gap:18px}.pd-sub a{font-size:14px}}

/* SPOR-siden: servicen i praksis og forskellen på et system, man selv skal passe */
.vs{display:grid;margin-top:clamp(64px,7vw,104px);border-top:1px solid var(--hair)}
.vs-h,.vs-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--hair)}
.vs-h{font:500 12.5px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.vs-r span:first-child{color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(31,34,26,.28)}
.vs-r span:last-child{position:relative;padding-left:22px;font:400 clamp(20px,1.6vw,24px)/1.25 var(--disp)}
.vs-r span:last-child::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;background:var(--red)}
/* Det gør SPOR: eksemplet som beskeder og det arbejde, SPOR gør imellem dem, under de tre spørgsmål (23. okt. 2026; flyttet fra forsiden) */
.exf{position:relative;display:grid;gap:14px;max-width:820px;list-style:none;margin:clamp(48px,5vw,72px) 0 0;padding:0 0 0 34px}
.exf::before{content:"";position:absolute;left:5.2px;top:12px;bottom:12px;width:1.6px;background:var(--red)}
.exf>li{position:relative}
.exf>li::before{content:"";position:absolute;left:-34px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--stone);box-shadow:inset 0 0 0 1.6px var(--red)}
.exf>li.w::before{background:var(--red)}
.exf .fr{font:500 12.5px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.exf .m{max-width:620px;padding:16px 20px;border-radius:16px;background:var(--white);box-shadow:0 1px 2px rgba(31,34,26,.06)}
.exf .m>p:not(.fr){font-size:18px;line-height:1.45}
.exf .m.s{background:var(--ink);color:var(--on-ink)}
.exf .m.s .fr{color:var(--on-ink-2)}
.exf .m.d{box-shadow:inset 0 0 0 1.6px var(--red)}
.exf .w{padding:8px 0 8px 2px}
.exf .w .fr{display:flex;align-items:center;gap:10px;color:var(--ink)}
.exf .w .fr::before{content:"";width:14px;height:1.6px;background:var(--red)}
.exf .w ul{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.exf .w ul li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.5}
.exf .w ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1.6px;background:var(--red)}
/* spørgsmålet, eksemplet er nået til: tal i den røde tråd og spørgsmålet i stor skrift */
.exf>li.q{display:flex;align-items:center;gap:14px;margin:26px 0 4px -34px;font:400 clamp(28px,2.6vw,38px)/1.1 var(--disp)}
.exf>li.q:first-child{margin-top:0}
.exf>li.q::before{display:none}
.exf>li.q span{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;margin-left:-11px;border-radius:50%;background:var(--red);color:var(--white);font:500 15px/1 var(--text)}
/* kravene: hvem kravet gælder, og hvad der kun er anbefalet */
.exf .w ul.rq{gap:10px;margin:2px 0 10px}
.exf .w ul.rq li{display:grid;gap:2px;padding:12px 16px 12px 18px;border-radius:12px;background:rgba(255,255,255,.62)}
.exf .w ul.rq li::before{display:none}
.exf .rq b{font:500 12.5px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--red-press)}
.exf .rq li:last-child b{color:var(--ink-2)}
.exf .rq small{font-size:14px;color:var(--ink-2)}
.exf .nx{position:relative;padding-left:20px;font-size:16.5px;line-height:1.5}
.exf .nx::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1.6px;background:var(--red)}
.exf-end{display:grid;gap:6px;max-width:820px;margin-top:28px;padding:22px 24px;border-radius:16px;background:var(--ink);color:var(--on-ink);font-size:17px;line-height:1.5}
.exf-end b{font:400 clamp(24px,2vw,30px)/1.1 var(--disp)}
#saadan .note{margin-top:18px;max-width:72ch}
#saadan .not-box{margin-top:clamp(40px,5vw,64px);max-width:760px}
.pd-pre{margin-top:10px;font:500 12.5px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-2)}
.pd-pre+.pd-price,.pd-pre+.pd-big{margin-top:8px}
/* Det gør SPOR, første skærm (Martin 23. okt. 2026): værdiløftet i to linjer, den anden rød som på forsiden; signaturen under knappen */
.pd-h1{font-size:clamp(46px,5.6vw,86px);line-height:.98}
.pd-h1 .red{color:var(--red)}
.pd-sig{display:flex;align-items:center;gap:12px;font:400 clamp(21px,1.7vw,26px)/1.2 var(--disp)}
.pd-sig::before{content:"";flex:none;width:22px;height:1.6px;background:var(--red)}
@media (max-width:560px){.pd-top .d1.pd-h1{font-size:38px}.pd-sig{font-size:20px}}
.pd-who{display:flex;align-items:center;gap:14px;max-width:46ch;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.pd-who img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}
.pd-who a{color:var(--ink)}
/* Hvad og hvorfor: Martins egen erfaring på første skærm og kilderne under hvert udsagn (23. okt. 2026) */
/* Hvad og hvorfor i bevægelse: de tre forandringer på én rød tråd (motion.js); rejsens trin samlet under de tre spørgsmål, visionen mærket */
.ledger{position:relative}
.ledger::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1.6px;background:var(--red);transform-origin:left;transition:transform 1.4s var(--ease-io)}
.ledger>div{position:relative}
.ledger>div::before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--red);transition:transform .4s var(--ease-out)}
.ledger>div>*{transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.ledger>div:nth-child(2)::before,.ledger>div:nth-child(2)>*{transition-delay:.45s}
.ledger>div:nth-child(3)::before,.ledger>div:nth-child(3)>*{transition-delay:.9s}
.ledger.m-live:not(:has(.on))::before{transform:scaleX(0)}
.ledger.m-live>div:not(.on)::before{transform:scale(0)}
.ledger.m-live>div:not(.on)>*{opacity:0;transform:translateY(12px)}
@media (max-width:900px){.ledger::before{display:none}.ledger>div::before{top:-6px}}
.jr-index li[data-q]::before{content:attr(data-q);display:block;margin:18px 0 2px -34px;font:500 11.5px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--red-press)}
.jr-index li[data-q]:first-child::before{margin-top:0}
.jr-index li.pl a::after{content:"Planlagt";align-self:center;margin-left:4px;padding:3px 7px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair);font:500 10.5px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.jr-index li.pl a::before{box-shadow:inset 0 0 0 1.6px rgba(214,58,36,.5)}
.jr-index li.pl a.on::before,.jr-index li.pl a.done::before{background:rgba(214,58,36,.45)}
.hw-me{display:grid;gap:14px;align-content:start}
.hw-me img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.hw-q{font:400 clamp(24px,2.1vw,30px)/1.2 var(--disp);color:var(--on-ink)}
.hw-p{font-size:17px;line-height:1.5;color:var(--on-ink)}
.ledger .hw-src{font-size:14px;line-height:1.45;color:var(--ink-2)}
.ledger p{font-size:17px;line-height:1.55}
.hw-end{display:grid;gap:22px;align-content:start}
.hw-end .note a{color:var(--ink)}
@media (max-width:560px){.exf{padding-left:30px}.exf>li::before{left:-30px}.exf>li.q{margin-left:-30px}.exf .m{padding:14px 16px}.exf .m>p:not(.fr){font-size:17px}}

/* ---------- Det gør SPOR i bevægelse (fælles motion-DNA, Martin 23. okt. 2026) ----------
   Tråden og knuderne styres af motion.js ([data-thread] får --p og m-live, [data-knot] får on). Uden m-live står alt færdigt. */

/* Det arbejde, I slipper for: jeres opgave streges ud, en rød streg fører over til SPOR, og SPORs del lander */
.vs-r span:first-child{position:relative}
.vs.m-live .vs-r span:first-child{text-decoration:none;color:var(--ink)}
.vs.m-live .vs-r s{text-decoration:none;background:linear-gradient(rgba(31,34,26,.5),rgba(31,34,26,.5)) 0 56%/0 1.4px no-repeat;transition:background-size .7s var(--ease-io),color .7s var(--ease-out)}
.vs.m-live .vs-r.on span:first-child{color:var(--ink-2)}
.vs.m-live .vs-r.on s{background-size:100% 1.4px}
.vs-r span:first-child::after{content:"";position:absolute;left:100%;top:11px;width:24px;height:2px;background:var(--red);transform-origin:left;transition:transform .35s var(--ease-out) .45s}
.vs.m-live .vs-r:not(.on) span:first-child::after{transform:scaleX(0)}
.vs.m-live .vs-r span:last-child{transition:opacity .6s var(--ease-out) .6s,transform .8s var(--ease-out) .6s}
.vs.m-live .vs-r:not(.on) span:last-child{opacity:0;transform:translateX(-14px)}
@media (max-width:560px){.vs-r span:first-child::after{display:none}}
/* Til sidst det, der bliver hos jer: rækken streges ikke ud, og tråden ender her */
.vs-r.vs-you{border-bottom-color:var(--red)}
.vs-r.vs-you span:first-child{color:var(--ink);font-weight:500;text-decoration:none}
.vs-r.vs-you span:first-child::after{display:none}
.vs-r.vs-you span:last-child{font-family:var(--text);font-size:17px;line-height:1.45;color:var(--ink-2)}
.vs-r.vs-you span:last-child::before{background:var(--paper);box-shadow:inset 0 0 0 1.6px var(--red)}
.vs.m-live .vs-r.vs-you span:first-child{color:var(--ink)}

/* Eksemplet: beskederne ligger spredt, til tråden når dem; så falder de på plads, og SPORs arbejde krydses af */
.exf::after{content:"";position:absolute;left:5.2px;top:12px;bottom:12px;width:1.6px;background:var(--red);transform-origin:top;transform:scaleY(var(--p,1))}
.exf.m-live::before{background:rgba(31,34,26,.14)}
.exf>li{transition:opacity .7s var(--ease-out),transform 1s var(--ease-out)}
.exf>li.m{--sx:28px;--sr:1.4deg}
.exf>li.m:nth-child(4n+2){--sx:-22px;--sr:-1.6deg}
.exf>li.m.s{--sx:44px;--sr:-1deg}
.exf>li.m.d{--sx:-12px;--sr:.8deg;transition:opacity .7s var(--ease-out),transform 1s var(--ease-out),box-shadow .6s var(--ease-out) .45s}
.exf>li.w{--sx:0;--sy:12px;--sr:0deg}
.exf>li.q{--sx:-16px;--sy:0;--sr:0deg}
.exf.m-live>li:not(.on){opacity:0;transform:translate(var(--sx,0),var(--sy,18px)) rotate(var(--sr,0deg))}
/* beskederne, der venter, ligger som tomme, spredte kort; teksten kommer først, når kortet er faldet på plads (ingen svag tekst undervejs) */
.exf.m-live>li.m:not(.on){opacity:.6}
.exf>li.m>*{transition:opacity .5s var(--ease-out) .3s}
.exf.m-live>li.m:not(.on)>*{opacity:0;transition-delay:0s}
.exf.m-live>li.m.d:not(.on){box-shadow:inset 0 0 0 1.6px transparent}
.exf.m-live>li::before{transition:transform .4s var(--ease-out),background-color .4s var(--ease-out)}
.exf.m-live>li:not(.on)::before{transform:scale(.3)}
.exf>li.q span{transition:transform .5s var(--ease-out) .1s}
.exf.m-live>li.q:not(.on) span{transform:scale(.4)}
/* SPORs arbejde: hvert punkt får et flueben, der tegnes, når tråden er nået frem */
.exf .w ul:not(.rq) li::before,.exf .nx::before{top:.42em;width:11px;height:6px;background:none;border-left:1.6px solid var(--red);border-bottom:1.6px solid var(--red);transform:rotate(-45deg);clip-path:inset(0);transition:clip-path .45s var(--ease-out) calc(.35s + var(--k,0) * .2s)}
.exf .w ul li:nth-child(2){--k:1}.exf .w ul li:nth-child(3){--k:2}.exf .nx{--k:3}
.exf.m-live .w:not(.on) ul:not(.rq) li::before,.exf.m-live .w:not(.on) .nx::before{clip-path:inset(0 100% 0 0)}
/* kravene stemples på plads ét ad gangen */
.exf .rq li{transition:opacity .5s var(--ease-out) calc(.3s + var(--k,0) * .18s),transform .6s var(--ease-out) calc(.3s + var(--k,0) * .18s)}
.exf.m-live .w:not(.on) .rq li{opacity:0;transform:translateY(8px) scale(1.02)}

/* Arbejdsdelingen tælles op ved siden af eksemplet (kun på store skærme; samme indhold står i forløbet) */
.exf-wrap{display:grid;grid-template-columns:minmax(0,820px) minmax(240px,1fr);gap:clamp(40px,5vw,88px);align-items:start;margin-top:clamp(48px,5vw,72px)}
.exf-wrap .exf{margin-top:0}
.exf-tally{position:sticky;top:150px;display:grid;gap:12px;max-width:360px}
.exf-tally>div{padding:20px 22px 22px;border-radius:18px}
.tl-s{background:var(--ink);color:var(--on-ink)}
.tl-i{background:var(--white);box-shadow:0 1px 2px rgba(31,34,26,.06)}
.tl-h{font:400 26px/1.1 var(--disp);margin-bottom:12px}
.exf-tally ul{list-style:none;display:grid;gap:9px}
.exf-tally li{position:relative;padding-left:26px;font-size:15px;line-height:1.4;transition:color .4s var(--ease-out),opacity .4s var(--ease-out)}
.exf-tally li::before{content:"";position:absolute;left:1px;top:.3em;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:inset 0 0 0 1.6px var(--red);transition:background-color .4s var(--ease-out),transform .4s var(--ease-out)}
.m-thread .tl-s li:not(.on){color:var(--on-ink-2)}
.m-thread .tl-i li:not(.on){color:var(--ink-2)}
.m-thread .tl-s li:not(.on)::before{background:var(--ink);transform:scale(.8)}
.m-thread .tl-i li:not(.on)::before{background:var(--white);transform:scale(.8)}
@media (max-width:1100px){.exf-wrap{grid-template-columns:minmax(0,1fr)}.exf-tally{display:none}}
/* Telefon og tablet: arbejdsdelingen i to linjer, der står under undermenuen, mens eksemplet læses; prikkerne fyldes med eksemplet */
.exf-mini{display:none}
@media (max-width:1100px){
  .exf-mini{display:grid;gap:8px;position:sticky;top:117px;z-index:5;margin:0 0 16px;padding:10px 14px;border-radius:14px;background:var(--ink);color:var(--on-ink);box-shadow:0 10px 24px -16px rgba(31,34,26,.5)}
  .exf-mini p{display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:5px;font-size:13px;line-height:1.3}
  .exf-mini b{grid-column:1;grid-row:1}.exf-mini .mi-d{grid-column:1;grid-row:2;align-self:start}.exf-mini .mi-t{grid-column:2;grid-row:1/3;align-self:center}
  .exf-mini p+p{padding-top:8px;border-top:1px solid var(--hair-ink)}
  .exf-mini b{font-weight:500}
  .mi-d{display:flex;gap:3px}
  .mi-d i{width:7px;height:7px;border-radius:50%;background:var(--red);transition:background-color .4s var(--ease-out),transform .4s var(--ease-out)}
  .mi-i .mi-d i{background:var(--on-ink)}
  .m-thread .exf-mini i:not(.on){background:transparent;box-shadow:inset 0 0 0 1.4px var(--red);transform:scale(.85)}
  .m-thread .exf-mini .mi-i i:not(.on){box-shadow:inset 0 0 0 1.4px var(--on-ink-2)}
  .mi-t{color:var(--on-ink-2)}
}
/* Telefon: eksemplet strammet, så resultatet nås hurtigere (samme indhold) */
@media (max-width:560px){
  .exf{gap:10px}
  .exf>li.q{margin:14px 0 0 -30px;font-size:25px}
  .exf .fr{font-size:11.5px;margin-bottom:3px}
  .exf .m{padding:11px 14px;border-radius:14px}
  .exf .m>p:not(.fr){font-size:16px;line-height:1.42}
  .exf .w{padding:4px 0 4px 2px}
  .exf .w ul li,.exf .nx{font-size:15px;line-height:1.45}
  .exf .w ul.rq{gap:8px;margin:2px 0 8px}
  .exf .w ul.rq li{padding:10px 12px}
  .exf .rq li{font-size:15px}
  .exf-end{margin-top:20px;padding:18px 18px;font-size:16px}
  #saadan .not-box{padding:20px}
}
/* de spredte beskeder må aldrig give sidelæns scroll; på telefon ligger de kun lidt skævt */
#saadan{overflow-x:clip}
@media (max-width:560px){.exf>li.m,.exf>li.m.s,.exf>li.m.d,.exf>li.m:nth-child(4n+2){--sx:0px}}
.pd-adm{max-width:46ch;font-size:15.5px;line-height:1.55;color:var(--on-ink-2)}
@media (max-width:560px){
  /* telefon: overskrift, kort forklaring og knap skal kunne ses over samtykkebjælken */
  .pd-top{padding-top:calc(76px + 20px)}.pd-top .copy{gap:16px}.pd-top .d1{font-size:40px;line-height:1}.pd-top .lead{font-size:17px}}
.pd-svc{margin-top:16px;max-width:42ch;font-size:17px;line-height:1.5;color:var(--on-ink)}
@media (max-width:560px){.vs-h{display:none}.vs-r{grid-template-columns:minmax(0,1fr);gap:6px}}

.nw{white-space:nowrap}

/* Få besked: kort forklaring ved siden af formularen */
.fb-top{padding-top:calc(96px + clamp(36px,5vw,72px));padding-bottom:var(--sec);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px clamp(40px,6vw,104px);align-items:start}
.fb-top .copy{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.fb-status{display:inline-flex;align-items:center;gap:10px;justify-self:start;max-width:100%;padding:8px 14px;border-radius:999px;background:var(--stone);font-size:14.5px;font-weight:500}
.fb-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.fb-top .note a{text-underline-offset:3px}
.fb-form{display:grid;gap:22px}
.fb-f{display:grid;gap:6px}
.fb-f label{font:500 15px/1.3 var(--text)}
.fb-h{font-size:14px;line-height:1.45;color:var(--ink-2)}
.fb-f input,.fb-f textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid rgba(31,34,26,.22);border-radius:12px;background:var(--paper);font:400 17px/1.4 var(--text);color:var(--ink)}
.fb-f textarea{min-height:130px;resize:vertical}
.fb-f input:focus-visible,.fb-f textarea:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.fb-c{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 12px;align-items:start}
.fb-c input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--red)}
.fb-c .fb-h{grid-column:2}
.fb-c label{font-size:16px;line-height:1.45;cursor:pointer}
.fb-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.fb-err{padding:12px 16px;border-radius:12px;background:rgba(214,58,36,.08);color:var(--red-press);font-weight:500}
.fb-who{font-size:14px;line-height:1.55;color:var(--ink-2)}
.fb-form .pill{justify-self:start}
@media (max-width:900px){.fb-top{grid-template-columns:minmax(0,1fr);padding-top:calc(76px + 36px)}}
.fb-form .btn{justify-self:start}

/* Kontaktformularen: skjult felt til robotter; Turnstile vises kun, hvis Cloudflare beder om et klik */
.tform .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.tform .ts:empty{display:none}
.tform .ts{max-width:100%;overflow:hidden}
.tform .chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;cursor:pointer}
.tform .chk input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--red)}

/* Lister i juridiske tekster (fx oversigten på Handelsbetingelser og Databehandleraftale): punkterne inden for tekstkolonnen */
.legal ul{margin:0 0 18px;padding-left:1.25em}
.legal li{margin:0 0 6px}

/* Kontakt: feltet, man skriver i, markeres på tråden; et udfyldt felt får sin prik (fælles motion-DNA, Martin 23. okt. 2026) */
.tform .field::before,.tform .send::before{transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
.tform .field:focus-within::before{box-shadow:inset 0 0 0 1.8px var(--red),0 0 0 6px rgba(214,58,36,.14)}
.tform .field.ok::before{animation:aq-knot .4s var(--ease-out)}
@keyframes aq-knot{40%{transform:scale(1.35)}}
.field input,.field textarea{transition:border-color var(--t-micro) var(--ease-out),background-color var(--t-micro) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.field input:hover,.field textarea:hover{border-color:rgba(31,34,26,.4)}}
/* Om mig: portrættet åbner sig roligt (billedet er synligt fra start, så indlæsningen ikke venter) */
[data-thread-start] .print{animation:m-print 1.1s var(--ease-out) both}
[data-thread-start] .print img{animation:m-portrait 1.8s var(--ease-out) both}
@keyframes m-print{from{clip-path:inset(5% 5% 5% 5% round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}}
@keyframes m-portrait{from{transform:scale(1.07)}}