/* ══════════════════════════════════════════════════════════════════════
   Palet og typografi er NeuroTunes egen, ordret fra appens designTokens.
   Serif bærer titler og alle tal. Én grøn familie — farve bærer betydning.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* ⚠️ IKKE RENT HVIDT — 7. september 2026. Her stod #FFFFFF, og de hvide
     baand fylder mest paa siden (tre paa forsiden). Rent hvidt ved siden af
     en varm creme laeses koldt. #F9F7F1 holder et tydeligt trin over bg
     (8,1 mod 15,1) uden at vaere klinisk. Emilie: "ved ik om jeg er saa
     vild med det helt hvide."
     ⚠️ Mockuppens --a-sur FULGTE MED 7/9: appens `farver.surface` blev
     aendret til samme vaerdi, og mockuppen gengiver appens palet — ellers
     ville den vise en app, der ikke findes.
     ⚠️ Rapportens .rap er stadig RENT hvid: den skal laese som papir paa
     en flade, ikke som appens kort. */
  --bg:#F1EDE4; --surface:#F9F7F1; --sand:#EDE8DC;
  --hair:#E3DED2; --ink:#1E2620; --ink2:#5C645C; --ink3:#686D67;
  --deep:#2E4632; --green:#4F7A4A; --olive:#8AA173; --track:#DCD8CB;
  --paa-deep:#EDE8DC; --paa-deep2:#A9BCA4;
  --loft:0 24px 60px -18px rgba(30,38,32,.32);
  --loft-s:0 2px 12px -3px rgba(30,38,32,.12);
  --maks:70rem; --smal:40rem;
  /* Én blok-afstand. Se noten nederst i filen. */
  --luft:3rem;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--green);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--maks);margin:0 auto;padding:0 1.6rem}
.smal{max-width:var(--smal)}
.stak{display:flex;flex-direction:column;gap:1.2rem}

h1,h2,h3,.serif{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-weight:400;text-wrap:balance}
h1{font-size:clamp(3rem,8.2vw,5.4rem);line-height:.99;letter-spacing:-.028em}
h2{font-size:clamp(1.9rem,4.4vw,3.05rem);line-height:1.08;letter-spacing:-.018em}

.eyebrow{font-weight:600;font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.lead{font-size:clamp(1.1rem,1.7vw,1.28rem);line-height:1.52;color:var(--ink2)}
.fin{font-size:.94rem;line-height:1.55;color:var(--ink2)}

/* ── Bånd ───────────────────────────────────────────────────────────── */
.band{padding:clamp(4rem,9vw,8rem) 0}
.band-hvid{background:var(--surface)}
.band-sand{background:var(--sand)}
.band-dyb{background:var(--deep);color:var(--paa-deep)}
/* ⚠️ IKKE #fff. Baandets egen tekstfarve er --paa-deep (#EDE8DC), og
   kun overskriften stak ud som rent hvid. 8,43:1 paa den moerke flade. */
.band-dyb h2{color:var(--paa-deep)}
.band-dyb .eyebrow{color:var(--paa-deep2)}
.band-dyb p{color:#D6DFD2}

/* ── Sticky header ──────────────────────────────────────────────────── */
.top{
  position:fixed;inset:0 0 auto;z-index:50;
  background:rgba(241,237,228,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  opacity:0;visibility:hidden;transform:translateY(-100%);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.top.vis{opacity:1;visibility:visible;transform:none;border-bottom-color:var(--hair);pointer-events:auto}
.top .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:.8rem;padding-bottom:.8rem;gap:1rem}
.top-nav{display:none;gap:1.7rem;font-size:.87rem}
@media(min-width:56rem){.top-nav{display:flex}}
.top-nav a{color:var(--ink2);text-decoration:none}
.top-nav a:hover{color:var(--green);text-decoration:underline;text-underline-offset:4px}
section[id]{scroll-margin-top:74px}

.anderledes{display:grid;gap:1.7rem;margin-top:var(--luft)}
@media(min-width:52rem){.anderledes{grid-template-columns:repeat(3,1fr);gap:2.1rem}}
.anderledes>div{border-top:2px solid var(--olive);padding-top:1.25rem;
  display:flex;flex-direction:column;gap:.6rem}
.and-titel{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-size:1.24rem;
  line-height:1.24;text-wrap:balance}
.anderledes p:not(.and-titel){font-size:.95rem;line-height:1.56;color:#D6DFD2}

/* Sektionerne rejser sig, når de kommer i syne. Starttilstanden sættes af
   JS (html.rejs) som det sidste, så siden aldrig kan stå usynlig, hvis
   JavaScript mangler eller fejler undervejs. */
html.rejs .band>.wrap{opacity:0;transform:translateY(16px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
html.rejs .band.ind>.wrap{opacity:1;transform:none}

.merke{font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);text-decoration:none}

/* ── Knap ───────────────────────────────────────────────────────────── */
.cta{
  display:inline-block;font-weight:600;font-size:.97rem;text-decoration:none;
  background:var(--deep);color:var(--paa-deep);
  padding:.82rem 1.65rem;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;transition:transform .16s ease,background .16s ease;
}
.cta:hover{background:#24371F;transform:translateY(-1px)}
.cta-lys{background:var(--paa-deep);color:var(--deep)}
.cta-lys:hover{background:var(--surface)}
.cta-sm{font-size:.86rem;padding:.6rem 1.2rem}

/* ── Hero ───────────────────────────────────────────────────────────── */
/* Signalfeltet: kroppens spor, der falder til ro fra venstre mod højre.
   Ligger BAG heroen, meget lavt i kontrast — den skal mærkes, ikke ses. */
.signal-felt{position:relative}
#signal{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.signal-felt>.wrap{position:relative;z-index:1}
.hero{padding-block:clamp(3.2rem,7vw,6rem) clamp(4rem,8vw,7rem);display:grid;gap:clamp(2.6rem,5vw,4.5rem);align-items:center}
@media(min-width:58rem){.hero{grid-template-columns:1.06fr .94fr}}
.navn{font-weight:600;font-size:.79rem;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin-bottom:2.4rem}
.tagline{font-family:Newsreader,Georgia,serif;font-style:italic;font-size:clamp(1.26rem,2.4vw,1.62rem);line-height:1.33;color:var(--ink2);margin-top:1.5rem;max-width:30rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:2.3rem}
.hero-note{font-size:.87rem;color:var(--ink3)}

/* ── Telefon ────────────────────────────────────────────────────────── */
.tlf{width:100%;max-width:310px;margin:0 auto;background:#12160F;border-radius:47px;padding:9px;box-shadow:var(--loft)}
.tlf-sm{max-width:262px}
.skaerm{
  --a-bg:#F1EDE4;--a-sur:#F9F7F1;--a-hair:#E3DED2;--a-ink:#1E2620;
  --a-ink2:#5C645C;--a-ink3:#8E948C;--a-deep:#2E4632;--a-green:#4F7A4A;--a-track:#DCD8CB;
  background:var(--a-bg);border-radius:39px;overflow:hidden;aspect-ratio:9/19.3;
  position:relative;display:flex;flex-direction:column;
  font-size:11px;line-height:1.45;color:var(--a-ink)
}
.notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:88px;height:23px;background:#12160F;border-radius:999px;z-index:3}
.krop{flex:1;overflow:hidden;padding:42px 14px 0;display:flex;flex-direction:column;gap:10px}
.tabbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--a-hair);padding:7px 6px 12px}
.tab{text-align:center;font-size:8px;color:var(--a-ink3)}
.tab.on{color:var(--a-green);font-weight:600}
/* Appens egne faneikoner, tegnet 1:1 fra app/(tabs)/_layout.tsx —
   7. september 2026. Her stod fire ens afrundede firkanter; bundmenuen
   er en af de faa ting i mockuppen, der IKKE er persondata, og den skal
   derfor ligne appens. */
.tab svg{display:block;width:14px;height:14px;margin:0 auto 3px;opacity:.42}
.tab.on svg{opacity:1}
.a-eyebrow{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-ink3);font-weight:600}
.a-serif{font-family:Newsreader,Georgia,serif}
.a-kort{background:var(--a-sur);border-radius:14px;padding:11px;box-shadow:var(--loft-s)}
.a-dyb{background:var(--a-deep);color:#EDE8DC;border-radius:14px;padding:12px}
.a-dyb .a-eyebrow{color:#A9BCA4}
.orb{width:108px;height:108px;border-radius:50%;background:var(--a-green);margin:2px auto 0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-family:Newsreader,Georgia,serif;font-size:11.5px;line-height:1.32;padding:0 12px}
.a-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.a-dato{font-size:9px;color:var(--a-ink2)}
.a-hilsen{font-size:17px;line-height:1.12;margin-top:1px}
.a-avatar{flex:none;width:26px;height:26px;border-radius:50%;background:var(--a-green);
  color:#fff;font-family:Newsreader,Georgia,serif;font-size:12px;
  display:flex;align-items:center;justify-content:center}
.a-dosis{display:flex;align-items:center;gap:7px;border-top:1px solid var(--a-hair);
  margin-top:10px;padding-top:9px}
.a-dosis .ind-glid{flex:1}
.a-flueben{color:var(--a-green);font-size:12px;font-weight:600}
.a-ret{color:var(--a-green);font-weight:600;font-size:9.5px}
.a-raad{background:#E7EFE2;border-radius:14px;padding:12px}
.a-raad p{font-family:Newsreader,Georgia,serif;font-size:11.5px;line-height:1.44;margin-top:6px}
.a-knap{background:var(--a-deep);color:#EDE8DC;border-radius:999px;text-align:center;
  font-weight:600;font-size:10px;padding:9px 10px;margin-top:10px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{background:var(--a-sur);border-radius:10px;padding:8px 7px}
.tile b{display:block;font-family:Newsreader,Georgia,serif;font-weight:400;font-size:17px;line-height:1.1;margin:2px 0 1px}
.tile span{font-size:7.5px;color:var(--a-ink3);display:block}
/* ── Døgnet i heroens telefon ──────────────────────────────────────
   Fem scener, der spiller et døgn igennem: morgen → dosis → check-in →
   dagens billede → mønster. Scene 1 står tegnet med det samme, så
   telefonen aldrig er tom — resten er en demo, ikke tekst der skal læses. */
.scener{position:relative;flex:1;overflow:hidden}
.scene{position:absolute;inset:0;padding:42px 14px 0;display:flex;flex-direction:column;gap:10px;
  opacity:0;transition:opacity .6s ease;pointer-events:none}
.scene.paa{opacity:1}

/* Dosen glider ind */
.ind-glid{opacity:0;transform:translateY(5px);transition:opacity .5s ease .2s,transform .5s ease .2s}
.scene.paa .ind-glid{opacity:1;transform:none}
.prik-ny{background:var(--a-track);transition:background .45s ease .75s}
.scene.paa .prik-ny{background:var(--a-green)}

/* Skyderne fylder op, forskudt */
.skyd{display:flex;flex-direction:column;gap:9px}
.skyd-r{display:flex;align-items:center;gap:8px}
.skyd-navn{font-size:9px;color:var(--a-ink2);width:44px;flex:none}
.spor{flex:1;height:6px;border-radius:999px;background:var(--a-track);overflow:hidden}
.fyld{display:block;height:100%;border-radius:999px;background:var(--a-green);width:0;
  transition:width .9s cubic-bezier(.22,.61,.36,1) .15s}
.fyld.f2{transition-delay:.3s}.fyld.f3{transition-delay:.45s}.fyld.f4{transition-delay:.6s}
.scene.paa .fyld{width:var(--w)}
.skyd-tal{font-family:Newsreader,Georgia,serif;font-size:13px;width:15px;text-align:right;flex:none}

/* Kurven tegner sig selv */
.kurve-linje{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.7s ease .35s}
.scene.paa .kurve-linje{stroke-dashoffset:0}

/* ── FORSIDEN RULLER — 8. september 2026 ─────────────────────────────
   Emilie: "ai kortet er ikke med der med dagens forslag ... forsiden er
   meget mere tom end den er i virkeligheden."

   Hun havde ret, og aarsagen var en opdeling: raadskortet laa i sin EGEN
   scene, selvom det i appen staar som sektion 3 af 8 lige under det hvide
   kort paa samme skaerm. To scener gjorde begge halvdele tyndere, end
   forsiden er. Nu ruller den ene scene i stedet.

   ⚠️ FLYTNINGEN SAETTES I JS, ikke her. Hoejden afhaenger af, hvor meget
   plads teksten faktisk tager, og den aendrer sig med indlaeste skrifter.
   Et hardcodet tal ville enten stoppe for tidligt eller rulle forbi
   bunden — og fejlen ville kun vise sig paa nogens langsomme forbindelse.
   Se `rul()` i side.js. */
.rul{display:flex;flex-direction:column;gap:10px;will-change:transform}

/* ⚠️ TOPPEN SKAL KLIPPES. `.a-status` (klokken og ikonerne) ligger
   `position:absolute;top:0;z-index:2` OVEN PAA scenen, og den har ingen
   egen baggrund. Uden masken gled kortene op BAG klokkeslaettet og kunne
   laeses tvaers igennem det — maalt paa tredje billede i rullet.
   En blød overgang frem for et haardt snit, saa indholdet forsvinder ind
   under statuslinjen i stedet for at blive skaaret over. */
.scene-rul{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 30px,#000 44px);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 30px,#000 44px);
}

/* ⚠️ UDEN BEVAEGELSE SKAL INDHOLDET STADIG KUNNE NAAS. Raadskortet laa
   foer i sin EGEN scene med sin egen prik; nu ligger det under kanten af
   scene 1. Ruller siden ikke, ville det vaere utilgaengeligt for netop de
   brugere, der har slaaet bevaegelse fra — en funktion, der forsvinder,
   findes ikke. Saa faar de rullet i haanden i stedet. */
@media(prefers-reduced-motion:reduce){
  .scene-rul{overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* Cirklen VENTER, den doemmer ikke. Fyldt groen er aftenens facit; det
   her er en aaben ring, fordi svaret ikke findes endnu. */
.orb-vent{background:none;border:2px solid var(--a-green);color:var(--a-deep);font-size:11px}

.a-hjaelp{font-size:8.5px;color:var(--a-ink3);text-align:center;margin-top:5px}

/* Niveauet paa raadskortet. I appen er kickeren en overskrift uden
   niveau, og maerket er det ENESTE sted, forskellen mellem et bekraeftet
   moenster, et pejlemaerke og et forslag findes. */
.a-maerke{display:inline-block;margin-top:6px;padding:3px 7px;border-radius:999px;
  background:var(--a-green);color:#fff;font-size:6.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:600}

.a-knap-r{display:flex;align-items:center;gap:9px;margin-top:9px}
.a-knap-lille{background:var(--a-deep);color:#EDE8DC;border-radius:999px;
  padding:6px 11px;font-size:9px;font-weight:600}
.a-senere{font-size:9px;color:var(--a-ink3)}

/* ── Check-in'et som appens eget ──────────────────────────────────────
   Ankrene stod foer slet ikke; skydeerne var fire noegne bjaelker med en
   billedtekst under, der BESKREV resten. */
.skyd-b{display:flex;flex-direction:column;gap:3px}
.skyd-ankre{display:flex;justify-content:space-between;gap:8px;
  padding-left:52px;font-size:6.5px;color:var(--a-ink3);line-height:1.2}
.skyd-ankre span:last-child{text-align:right}

/* ⚠️ APPETITTENS MIDTPUNKT — laast beslutning 3. Skalaen maaler afvigelse
   fra NORMALT og har et synligt midterpunkt; uden det laeses 5 som en
   daarlig karakter i en raekke, hvor 9 og 10 staar for godt. */
.spor-midt{position:relative}
.spor-midt::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;
  width:1px;background:var(--a-ink3);opacity:.55}
.midt-ord{color:var(--a-green);font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.chip{border:1px solid var(--a-hair);border-radius:999px;padding:4px 8px;
  font-size:8px;color:var(--a-ink2);background:var(--a-sur)}
.chip.paa{background:var(--a-green);border-color:var(--a-green);color:#fff;font-weight:600}
.chip-ingen{border-style:dashed}
.a-note{margin-top:9px;border:1px dashed var(--a-hair);border-radius:10px;
  padding:7px 9px;font-size:8.5px;color:var(--a-ink3)}

/* "6t 48m" er bredere end "9". Uden dette braekker natte-tallene ud af
   deres felt. */
.fire-maalt .ft b{font-size:12px;line-height:1.2}

@media(prefers-reduced-motion:reduce){
  .scene,.ind-glid,.prik-ny,.fyld,.kurve-linje{transition:none!important}
  .kurve-linje{stroke-dashoffset:0}
}

.prikker{display:flex;gap:3.5px;margin-top:3px}
.prikker i{width:7px;height:7px;border-radius:50%;background:var(--a-track)}
.prikker i.f{background:var(--a-green)}
.prikker i.n{background:#BFD2B8}
.tabel{width:100%;border-collapse:collapse}
.tabel th{font-weight:600;color:var(--a-ink3);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;text-align:right;padding:0 0 4px}
.tabel th:first-child{text-align:left}
.tabel td{padding:4px 0;text-align:right;font-family:Newsreader,Georgia,serif;font-size:12px;border-top:1px solid var(--a-hair)}
.tabel td:first-child{text-align:left;font-family:"Public Sans",sans-serif;font-size:9.5px;color:var(--a-ink2)}

/* ── Rundtur: forskudte telefoner ───────────────────────────────────── */
.tur{display:grid;gap:3.4rem;margin-top:var(--luft)}
@media(min-width:54rem){
  .tur{grid-template-columns:repeat(3,1fr);gap:2.2rem;align-items:start}
  .tur figure:nth-child(2){margin-top:3.2rem}
  .tur figure:nth-child(3){margin-top:6.4rem}
}
figure{margin:0;display:flex;flex-direction:column;gap:1.1rem}
figcaption{font-size:.9rem;line-height:1.5;color:var(--ink2);text-align:center;max-width:19rem;margin:0 auto}
figcaption b{display:block;color:var(--ink);font-weight:600;font-size:.97rem;margin-bottom:.2rem}

/* ── Grænsen: sætningsparrene ───────────────────────────────────────── */
.par{display:grid;gap:1.15rem;margin-top:var(--luft)}
@media(min-width:54rem){.par{grid-template-columns:repeat(3,1fr);gap:1.3rem}}
.pars{border:1px solid rgba(237,232,220,.16);background:rgba(237,232,220,.05);border-radius:14px;padding:1.4rem 1.35rem;display:flex;flex-direction:column;gap:1rem;transition:background .2s ease}
.pars:hover{background:rgba(237,232,220,.085)}
.maerke{font-weight:600;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.3rem}
.siger .maerke{color:var(--paa-deep2)}
.aldrig .maerke{color:#7C8A78}
.pars q{font-family:Newsreader,Georgia,serif;font-size:1.05rem;line-height:1.38;quotes:"»" "«";display:block}
.siger q{color:var(--paa-deep)}
.aldrig q{color:#8A9886;text-decoration:line-through;text-decoration-thickness:1px}

/* ── Kilden: DIG / MÅLT ─────────────────────────────────────────────── */
.kilde-rk{display:grid;gap:2.8rem;margin-top:var(--luft);align-items:center}
@media(min-width:56rem){.kilde-rk{grid-template-columns:.8fr 1.2fr;gap:3.6rem}}
.kilder{display:grid;gap:1.8rem}
.to-ting{display:grid;gap:2.2rem;margin-top:var(--luft)}
/* ── Tre situationer ────────────────────────────────────────────────
   ⚠️ KONSTRUEREDE EKSEMPLER, IKKE BRUGERE. Mærkningen står synligt over
   kortene — et portræt med en historie om medicin læses som en udtalelse,
   hvis ikke der står andet. */
.sit{display:grid;gap:2.6rem;margin-top:var(--luft)}
@media(min-width:54rem){.sit{grid-template-columns:repeat(3,1fr);gap:2rem}}
.sit figure{gap:0}
.sit img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;
  box-shadow:var(--loft-s);display:block}
.sit-navn{font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin-top:1.3rem}
.sit-cit{font-family:Newsreader,Georgia,serif;font-size:1.24rem;line-height:1.28;
  letter-spacing:-.01em;margin-top:.5rem;text-wrap:balance}
.sit p.txt{font-size:.94rem;line-height:1.56;color:var(--ink2);margin-top:.85rem}
.historie{margin-top:auto;padding-top:1rem}
.historie>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;font-size:.86rem;letter-spacing:.01em;color:var(--green)}
.historie>summary::-webkit-details-marker{display:none}
.historie>summary::after{content:"→"}
.historie[open]>summary::after{content:"↑"}
.historie>summary:hover{text-decoration:underline;text-underline-offset:3px}
.historie p{font-size:.94rem;line-height:1.56;color:var(--ink2);margin-top:.85rem}
.maerkat{display:inline-block;border:1px solid var(--olive);border-radius:999px;
  padding:.4rem 1rem;font-size:.79rem;font-weight:600;color:var(--green);margin-top:.4rem}

.folk{display:grid;gap:2.2rem;margin-top:var(--luft)}
@media(min-width:44rem){.folk{grid-template-columns:repeat(2,1fr);gap:2.6rem}}
.person{border-top:2px solid var(--olive);padding-top:1.4rem;display:flex;flex-direction:column;gap:.45rem}
/* Portrættet i appens grønne ring — ansigterne er de eneste mennesker på
   siden, og de er ægte. Ingen opdigtede brugere. */
.portraet{width:104px;height:104px;border-radius:50%;object-fit:cover;
  margin-bottom:.55rem;box-shadow:0 0 0 3px var(--surface),0 0 0 4.5px var(--olive)}
.person .serif{font-size:1.2rem;line-height:1.25}
.person .rolle{font-weight:600;font-size:.78rem;letter-spacing:.06em;color:var(--green)}
.person p{font-size:.95rem;line-height:1.5;color:var(--ink2)}

/* Stifterens egne ord. Serif, fordi det er en tekst der læses — ikke en
   etiket der skimmes. Portrættet er en cirkel: appens egen form, og den
   eneste ramme kildebilledet tåler. */
.mellem{max-width:58rem}
/* Cirklen skyder op over fladens kant — appens egen bevægelse, hvor
   statuscirklen ligger ind over det hvide kort. */

@media(min-width:48rem){.to-ting{grid-template-columns:repeat(2,1fr);gap:3rem}}
.fire{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.ft{background:var(--a-sand,#EDE8DC);border-radius:9px;padding:8px 3px;text-align:center}
.ft b{display:block;font-family:Newsreader,Georgia,serif;font-weight:400;font-size:19px;line-height:1.05}
.ft span{font-size:7px;color:var(--a-ink2)}
.kilde{border-top:2px solid var(--olive);padding-top:1.15rem;display:flex;flex-direction:column;gap:.55rem}
.badge{font-weight:600;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}
.kilde p{font-size:.95rem;line-height:1.5;color:var(--ink2)}
.kilde .serif{font-size:1.12rem;line-height:1.32;color:var(--ink)}

/* ── Kurven ─────────────────────────────────────────────────────────── */
.graf{position:relative;background:rgba(237,232,220,.05);border:1px solid rgba(237,232,220,.16);border-radius:16px;padding:1.8rem 1.6rem 1.3rem}
.graf svg{display:block;width:100%;height:auto}
.grafer{display:grid;gap:2rem;margin-top:var(--luft)}
@media(min-width:44rem){.grafer{grid-template-columns:1fr 1fr;gap:1.6rem}}
/* Figur og billedtekst hører sammen. Ligger de i hver sit gitter, stables de
   som figur-figur-tekst-tekst på mobilen, og den første tekst havner under
   den anden figur. */
.grafpar{display:flex;flex-direction:column;gap:1rem}
.grafpar b{font-weight:600;color:#EDE8DC}
.grafpar .fin{margin:0}
.graf-mrk{position:absolute;top:1.05rem;right:1.2rem;font-weight:600;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paa-deep2);
  border:1px solid rgba(237,232,220,.3);border-radius:999px;padding:.3rem .72rem}
.graf-fod{display:flex;justify-content:space-between;font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;color:var(--paa-deep2);margin-top:.8rem}

/* ── Alle tal: tabellen ─────────────────────────────────────────────── */
.visuelt-skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alle{margin-top:var(--luft);background:var(--surface);border-radius:16px;padding:1.6rem 1.4rem 1.3rem;box-shadow:var(--loft-s);overflow-x:auto}
.alle table{width:100%;border-collapse:collapse;min-width:29rem;font-variant-numeric:tabular-nums}
.alle th,.alle td{text-align:right;padding:.62rem .55rem}
.alle thead th{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);font-weight:600;border-bottom:1px solid var(--hair)}
.alle tbody th{text-align:left;font-weight:400;font-size:.93rem;color:var(--ink2);position:relative;padding-left:1.1rem}
.alle tbody th::before{content:"";position:absolute;left:0;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%}
.alle tr.dig th::before{background:var(--green)}
.alle tr.maalt th::before{background:#2a6a7a}
.alle tbody td{font-family:Newsreader,Georgia,serif;font-size:1.08rem;border-top:1px solid var(--hair)}
.alle tbody tr:hover{background:var(--bg)}
.alle-fod{margin-top:1.1rem;font-size:.8rem;line-height:1.5;color:var(--ink3);display:flex;flex-wrap:wrap;align-items:center;gap:.15rem}
.pri{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.3rem;vertical-align:middle}
.pri-dig{background:var(--green)}
.pri-maalt{background:#2a6a7a}

/* ── Status ─────────────────────────────────────────────────────────── */
dl.status{margin-top:1.8rem;display:grid;gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:20px;overflow:hidden}
@media(min-width:44rem){dl.status{grid-template-columns:1fr 1fr}}
dl.status>div{background:var(--surface);padding:1.6rem 1.7rem;display:flex;
  flex-direction:column;gap:.55rem}
dl.status dt{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-weight:400;
  font-size:1.16rem;line-height:1.25}
dl.status dd{color:var(--ink2);font-size:.95rem;line-height:1.55;margin:0}

/* ── Formular ───────────────────────────────────────────────────────── */
form.tilmeld{display:flex;flex-direction:column;gap:.55rem;margin-top:1.4rem;max-width:25rem}
form.tilmeld label{font-weight:600;font-size:.84rem;color:#D6DFD2;margin-top:.5rem}
form.tilmeld label:first-of-type{margin-top:0}

/* ⚠️ ÉN REGEL FOR ALLE FELTTYPER. Her stod `input[type=email]` alene, og da
   formularen fik select og text 11/9, ville de to nye have staaet som
   browserens standardfelter midt i den moerke flade — uden at noget saa
   forkert ud i koden. */
form.tilmeld input[type=email],
form.tilmeld input[type=text],
form.tilmeld select{font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid rgba(237,232,220,.28);
  border-radius:10px;padding:.82rem 1rem;width:100%;
  -webkit-appearance:none;appearance:none}
form.tilmeld input::placeholder{color:var(--ink3)}

/* Pilen forsvandt med appearance:none. Tegnet som baggrund, saa den ikke
   kraever et ekstra element omkring hvert felt. */
form.tilmeld select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235C645C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
  padding-right:2.6rem}
form.tilmeld select:invalid{color:var(--ink3)}

/* ⚠️ MINDST 44px OG HELE LINJEN ER TRYKFLADE. Et 16px afkrydsningsfelt er
   under maalet for beroeringsflader, og det her er det felt, hele
   screeningen hviler paa. */
form.tilmeld label.tjek{display:flex;align-items:center;gap:.7rem;
  min-height:44px;cursor:pointer;font-weight:400;font-size:.95rem;color:#EDE8DC}
form.tilmeld label.tjek input{width:22px;height:22px;flex:none;accent-color:var(--olive);cursor:pointer}

form.tilmeld .valgfri{font-weight:400;color:#A9BCA4;font-size:.78rem}
form.tilmeld .felt-note{font-size:.78rem;line-height:1.5;color:#A9BCA4;margin:-.1rem 0 0}
form.tilmeld button{align-self:start;margin-top:1rem}

form.tilmeld input:focus-visible,
form.tilmeld select:focus-visible{outline:3px solid var(--olive);outline-offset:2px}

footer{background:var(--deep);color:var(--paa-deep2);padding:3rem 0 3.6rem;border-top:1px solid rgba(237,232,220,.14)}
footer p{font-size:.87rem;line-height:1.55}
.fod-navn{font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paa-deep);margin-bottom:1.2rem}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .top,.cta,.pars{transition:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   Undersiderne. Forsiden har heroen; de andre har et sidehoved, der gør
   samme arbejde: siger hvor man er, før man begynder at læse.
   ══════════════════════════════════════════════════════════════════════ */
.sidehoved{background:var(--bg);padding:clamp(4.2rem,9vw,7rem) 0 clamp(2.6rem,5vw,4.2rem)}
/* ⚠️ MAALT 7. september 2026: undersidernes h1 toppede ved 3,9rem (62px),
   mens sektionernes h2 er 3,05rem (49px). Tretten pixels mellem en
   sidetitel og en sektionsoverskrift er ikke et hierarki — det er stoej,
   og det er dét, der laeses som "hvorfor er overskriften lille".
   Nu 4,6rem (74px): et tydeligt trin ned fra forsidens hero (5,4rem),
   og et tydeligt trin op fra h2. */
.sidehoved h1{font-size:clamp(2.4rem,5.9vw,4.1rem);line-height:1.05;letter-spacing:-.023em}
.sidehoved .lead{max-width:38rem}

/* ⚠️ Et linjeskift, der kun gaelder paa bred skaerm. Overskriften er to
   saetninger, og paa desktop skal den anden begynde forfra. Paa mobil skal
   begge flyde naturligt i tekstbredden.

   ⚠️ DET SKAL VAERE ET <span>, IKKE ET <br class="skjul">. WebKit — altsaa
   Safari paa Mac og hele iPhone — ignorerer display:none paa et <br>.
   Maalt: reglen blev leveret, matchMedia sagde false, og computed value stod
   alligevel som "inline". Skiftet ville vaere laast fast paa mobil, og
   fejlen ville ikke kunne ses i en Chrome-test. */
.linje2{display:inline}
@media(min-width:52rem){.linje2{display:block}}

/* ⚠️ KUN Om-siden. De oevrige sidehoveder har ÉN lang overskrift, og et
   bredere maal ville aendre deres ombrydning uden grund — derfor en klasse
   paa netop denne h1 og ikke `.sidehoved h1`.
   Maalt: "Forstaa din medicin bedre." fylder 683px, og faellesmaalet
   --smal er 640px. Saetningen knaekkede derfor efter "din", saa
   overskriften blev tre linjer med et enkelt ord paa den foerste.
   Selektoren skal vaere mindst lige saa specifik som
   `.wrap.smal>h1{max-width:var(--smal)}`, ellers taber den. */
.sidehoved .wrap.smal>h1.to-saetninger{max-width:45rem}

/* Kortene nederst på forsiden — den eneste vej videre til undersiderne. */
.videre{display:grid;gap:1.3rem;margin-top:var(--luft)}
@media(min-width:52rem){.videre{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.videre a{display:flex;flex-direction:column;gap:.55rem;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--hair);border-radius:20px;
  padding:1.6rem 1.7rem;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.videre a:hover{border-color:var(--olive);transform:translateY(-2px);
  box-shadow:0 16px 34px -22px rgba(30,38,32,.4)}
.videre b{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-weight:400;
  font-size:1.26rem;line-height:1.22}
.videre span{font-size:.94rem;line-height:1.56;color:var(--ink2)}
.videre em{font-style:normal;font-weight:600;font-size:.82rem;color:var(--green);margin-top:.35rem}
@media(prefers-reduced-motion:reduce){.videre a:hover{transform:none}}

/* Menuen ved man hvor man står i — også nederst på siden. */
.top-nav a[aria-current="page"]{color:var(--green);font-weight:600}
.fod-nav{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin-bottom:1.4rem}
.fod-nav a{color:var(--paa-deep);font-size:.87rem;text-decoration:none}
.fod-nav a:hover{text-decoration:underline;text-underline-offset:3px}

/* På telefonen er der ikke plads til navigationen på samme linje som logo
   og knap. Den lægger sig i sin egen række under dem frem for at forsvinde
   — en menu, man kun har på computeren, er ikke en menu. */
@media(max-width:56rem){
  .top .wrap{flex-wrap:wrap;row-gap:.45rem}
  .top-nav{display:flex;order:3;width:100%;gap:1.2rem;font-size:.82rem;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .top-nav::-webkit-scrollbar{display:none}
  .top-nav a{white-space:nowrap}
  section[id]{scroll-margin-top:104px}
  /* Topbaren er to rækker høj her; sidehovedet skal begynde under den.
     ⚠️ Og heroen med — 7. september 2026. Da navigationen blev vist fra
     start paa forsiden, arvede heroen problemet: topbaren laa hen over
     kickeren med 61px. Foer var den skjult dér, og reglen var unoedvendig. */
  .sidehoved,.hero{padding-top:8.6rem}
}

/* De tre ventetider. Tre felter frem for én sætning, fordi de er tre
   forskellige tal med hver sin begrundelse — og fordi "efter to uger"
   alene læses som to ugers tomhed. */
/* ⚠️ EN LISTE, IKKE TRE SPALTER — 7. september 2026.
   Her stod et 3-spaltet gitter, og lige nedenunder staar `.tur` med TRE
   telefoner. To tre-spaltede blokke oven paa hinanden laeses som par:
   "Fra dag ét" over "Moenstre", "Efter 14 dage" over "Forloeb". De hoerer
   ikke sammen — den ene handler om HVORNAAR, den anden om HVILKE SKAERME.
   Emilie: "skriften passer ikke til billederne."
   Rimet er brudt ved at give dem hver sin form. */
.naar{display:flex;flex-direction:column;margin-top:var(--luft);
  border-top:1px solid var(--hair)}
.naar>div{display:grid;gap:.3rem 2.4rem;padding:1.3rem 0;
  border-bottom:1px solid var(--hair)}
@media(min-width:46rem){ .naar>div{grid-template-columns:15rem 1fr;align-items:baseline} }
.naar p:not(.naar-hvornaar){font-size:.97rem;line-height:1.6;color:var(--ink2);max-width:38rem}
.naar-hvornaar{font-family:Newsreader,"Iowan Old Style",Georgia,serif;
  font-size:1.16rem;line-height:1.24}

/* Mailadressen i bunden skal kunne ses på den mørke flade. */
footer a{color:var(--paa-deep);text-underline-offset:3px}

/* ── FILMBÅNDET — 8. september 2026 ──────────────────────────────────
   Emilies egen film, direkte under heroen.

   ⚠️ 16:9 PAA ALLE BREDDER, OG object-fit:contain — IKKE cover.
   Filmen baerer en appskaerm, et raad og et maerkekort, og alle tre er
   TEKST. Et beskaaret udsnit ville skaere i netop det, filmen er lavet
   for at vise. `contain` garanterer, at intet klippes, ogsaa hvis en
   fremtidig fil har et andet forhold — saa faar den sorte kanter i
   stedet for at miste indhold.

   ⚠️ DEN LOOPER IKKE OG STARTER IKKE AF SIG SELV. Den slutter paa
   maerkekortet; en loop ville lade logoet dukke op hvert 19. sekund, og
   foerste billede (lysstyrke 0,54) ville stoede mod det sidste (0,24). */
.film{background:#12160F;position:relative;padding:0}
.film-flade{position:relative;width:100%;aspect-ratio:16/9;background:#12160F}

/* ⚠️ ÉT LAG, IKKE TO. Foerste udgave lagde en <video> oven paa et <img>
   og skjulte den med opacity; videoens foerste billede spoegte igennem
   som et dobbeltbillede. Nu baerer videoen selv stillbilledet som
   `poster`, saa der ikke findes to lag at holde synkroniseret. */
.film-flade video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;background:#12160F}

.film-slaer{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,rgba(18,22,15,.90) 0%,rgba(18,22,15,.74) 30%,
             rgba(18,22,15,.34) 55%,rgba(18,22,15,0) 78%)}

/* ⚠️ MOBIL FOERST: TEKSTEN LIGGER UNDER FILMEN, IKKE PAA DEN.
   16:9 paa 390 px er 219 px hoejt. Overskrift, broedtekst og knap kan
   ikke vaere paa den flade — maalt: knappen laa oven i overskriften. */
.film-tekst{padding:1.5rem 1.2rem 1.9rem}
/* ⚠️ IKKE --olive SOM PAA DET MOERKE BAAND. Den groenne har rigelig
   kontrast mod en flad moerk flade, men blev maalt til 2,0:1 mod
   fotografiet. Over billeder skal kickeren vaere lys. */
.film-tekst .eyebrow{color:#E4E9E0}
.film-tekst h2{color:var(--bg);font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.06;margin:.4rem 0 0}
.film-tekst p{color:var(--track);margin-top:.7rem;font-size:1rem}

/* ⚠️ MINDST 44x44. Knappen er sidens eneste vej ind i filmen, og paa en
   telefon rammes den med en tommelfinger. */
.film-knap{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.7rem;background:rgba(241,237,228,.95);
  color:var(--ink);border:0;border-radius:999px;padding:.9rem 1.6rem .9rem 1.25rem;
  min-height:52px;font:600 1rem/1 "Public Sans",system-ui,sans-serif;cursor:pointer;
  box-shadow:0 16px 44px rgba(18,22,15,.45)}
.film-knap:hover{background:#fff}
.film-knap:focus-visible{outline:3px solid #fff;outline-offset:3px}
.film-knap svg{width:22px;height:22px;display:block}
.film-varighed{position:absolute;z-index:2;right:1.2rem;bottom:1.1rem;color:var(--track);
  font-size:.72rem;letter-spacing:.08em}

/* Under 52rem findes slaeret slet ikke — der er ingen tekst at beskytte,
   og et slaer over filmen ville kun goere den moerkere. */
.film-slaer{display:none}
.film-varighed{display:none}
.film.spiller .film-slaer,.film.spiller .film-tekst,
.film.spiller .film-varighed{opacity:0;pointer-events:none}
.film-slaer,.film-tekst,.film-varighed,.film-knap{transition:opacity .3s ease}

@media(min-width:52rem){
  .film-slaer{display:block}
  .film-varighed{display:block}
  .film-tekst{position:absolute;z-index:2;left:0;bottom:0;max-width:34rem;
    padding:0 1.6rem 2.2rem max(1.6rem,calc((100vw - var(--maks)) / 2 + 1.6rem))}
}

/* De fire vilkår for testen. På den mørke flade, lige over formularen —
   det er dér, spørgsmålene opstår, ikke et andet sted på siden. */
.fakta{display:grid;gap:1.2rem;margin:.4rem 0 .6rem}
@media(min-width:38rem){.fakta{grid-template-columns:1fr 1fr;gap:1.3rem 2rem}}
@media(min-width:60rem){.fakta{grid-template-columns:repeat(4,1fr);gap:1.6rem}}
.fakta>div{border-top:1px solid rgba(237,232,220,.26);padding-top:.85rem;
  display:flex;flex-direction:column;gap:.28rem}
.fakta b{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-weight:400;
  font-size:1.14rem;line-height:1.22;color:var(--paa-deep)}
.fakta span{font-size:.88rem;line-height:1.5;color:#A9BCA4}

/* ══════════════════════════════════════════════════════════════════════
   iPhone-pas. Fingerspidser er større end tekstlinjer: de links, der står
   alene, får højde nok til at rammes uden at sigte. Inline-links i brødtekst
   røres ikke — dér ville polstring rive linjeafstanden i stykker.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:56rem){
  .top-nav a{padding:.5rem 0}
  .fod-nav{gap:0 1.5rem}
  .fod-nav a{padding:.5rem 0}
  .historie>summary{padding:.5rem 0}
  /* Telefonerne er sidens indhold her, ikke en illustration ved siden af.
     262 px efterlod 76 px tom luft i en 339 px bred spalte. */
  .tlf-sm{max-width:300px}
  section[id]{scroll-margin-top:124px}
  .sidehoved{padding-top:9.6rem}
}

/* Mærket ved siden af ordmærket. Højden følger tekstens, så de to står på
   samme linje uanset skriftstørrelse — og alt-teksten er tom, fordi
   ordmærket ved siden af allerede siger navnet. */
.merke{display:inline-flex;align-items:center;gap:.5rem}
.merke img{height:1.55em;width:auto;display:block}
.fod-navn{display:flex;align-items:center;gap:.55rem}
.fod-navn img{height:1.9em;width:auto;display:block}

/* Mærket ved siden af ordmærket. Højden følger tekstens, så de to står på
   samme linje uanset skriftstørrelse — og alt-teksten er tom, fordi
   ordmærket lige ved siden af allerede siger navnet. */
.merke{display:inline-flex;align-items:center;gap:.5rem}
.merke img{height:26px;width:auto;display:block}
.fod-navn{display:flex;align-items:center;gap:.6rem}
.fod-navn img{height:30px;width:auto;display:block}

/* ⚠️ ERSTATTER EN UDBRUD-REGEL — 7. september 2026.
   Her stod `.smal .anderledes,.smal .fakta{width:62rem;left:50%;
   transform:translateX(-50%)}`, fordi containeren dengang var 40rem og
   gitrene skulle bryde ud af den. Containeren er nu 70rem for alle, saa
   udbruddet CENTREREDE dem i stedet — og det var med til at faa
   sektionerne til at se skaeve ud.

   Nu: teksten holdes paa laesebredde, komponenterne fylder containeren.
   To spalter paa testvilkaarene, ikke fire smalle. */
@media(min-width:52rem){
  .smal .fakta{grid-template-columns:1fr 1fr;gap:1.8rem 3rem}
}

/* ── Spring til indhold ──────────────────────────────────────────────
   Ude af syne, indtil den faar fokus. Foerste tabstop paa hver side. */
.spring{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--green);color:#fff;padding:.7rem 1.1rem;
  border-radius:0 0 .5rem 0;font-size:.9rem;text-decoration:none}
.spring:focus{left:0}

/* ══════════════════════════════════════════════════════════════════════
   Styring af telefonens demo — 7. september 2026

   Scenerne skiftede af sig selv hvert 2,8-3,6 sekund uden nogen maade at
   standse dem paa. WCAG 2.2.2 kraever, at bevaegelse, der starter af sig
   selv og varer over fem sekunder, kan saettes paa pause.

   ⚠️ PRIKKERNE ER IKKE APPENS FANER. Fanebjaelken NEDE I skaermen er
   appens egen bundmenu og skal blive ved med at vaere et billede af
   appen. Styringen ligger derfor UDEN FOR telefonen — ellers ville
   hjemmesidens knapper ligne noget, brugeren kan trykke paa i appen.

   ⚠️ VED REDUCERET BEVAEGELSE ER DEN ENESTE VEJ IND. Autoplay er slaaet
   fra der, og foer disse prikker stod scene 1 — ventebeskeden — for
   evigt. De fire andre skaermbilleder kunne ikke naas.
   ══════════════════════════════════════════════════════════════════════ */
.tlf-styr{display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:1.1rem}
.tlf-pause{font:inherit;font-size:.8rem;color:var(--ink3);background:none;
  border:1px solid var(--hair);border-radius:999px;padding:.3rem .85rem;
  cursor:pointer;transition:color .16s ease,border-color .16s ease}
.tlf-pause:hover{color:var(--ink2);border-color:var(--ink3)}
.tlf-prikker{display:flex;gap:.45rem}
.tlf-prik{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.tlf-prik::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--track);transition:background .2s ease,transform .2s ease}
.tlf-prik:hover::before{background:var(--olive)}
.tlf-prik[aria-current="true"]::before{background:var(--green);transform:scale(1.25)}
.tlf-pause:focus-visible,.tlf-prik:focus-visible{outline:2px solid var(--green);
  outline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════
   Rapporten — 7. september 2026

   Analysens stoerste indholdsmaessige hul: rapporten er endepunktet i
   NeuroTunes eget formaal ("tage et datagrundlag med til behandleren"),
   men havde ingen selvstaendig plads paa forsiden.

   ⚠️ FLADEN ER RAPPORTENS EGEN, IKKE HJEMMESIDENS. Farverne herunder er
   kopieret fra reports/responseReportHtml.ts (GROEN/INK/MUTED/LINE), saa
   uddraget ligner det dokument, behandleren faktisk faar — ikke en
   hjemmesidesektion i NeuroTune-groen. Derfor bruger den heller ikke
   --ink/--green.
   ══════════════════════════════════════════════════════════════════════ */
/* ⚠️ ARKENE BAG RAPPORTEN — 7. september 2026, fra Emilies mockups.
   Rapporten laa som ét fladt kort. To ark bag den siger "der er flere
   sider, og du kan tage dem med" uden et eneste ord. Rent CSS: to
   pseudo-elementer, ingen filer, ingen markup.
   ⚠️ De ligger BAG (z-index -1) og har ingen tekst — de maa ikke kunne
   forveksles med indhold, en skaermlaeser moeder dem aldrig. */
/* Venstrestillet som alt andet. `auto` centrerede den, og saa laa den
   forskudt i forhold til overskriften lige over. */
.rap-ramme{margin:var(--luft) 0 0;width:min(56rem,100%);position:relative}
/* ⚠️ IKKE z-index:-1. Foerste udgave brugte det, og arkene forsvandt bag
   sektionens egen hvide baggrund — .rap-ramme danner ingen stacking
   context, saa -1 lagde dem under baandet. Nu loeftes rapporten i stedet
   op over dem. Og fladen er #F1EDE4, ikke naesten-hvid: arkene ligger paa
   en HVID sektion og skal kunne ses. */
.rap-ramme::before,.rap-ramme::after{
  content:"";position:absolute;inset:0;
  background:#F1EDE4;border:1px solid #E0DACE;border-radius:6px;
  box-shadow:0 14px 34px -24px rgba(30,38,32,.35)}
.rap{position:relative;z-index:1}
.rap-ramme::before{transform:rotate(-1.6deg) translate(-10px,7px)}
.rap-ramme::after{transform:rotate(1.1deg) translate(11px,12px)}
@media(max-width:34rem){ .rap-ramme::before,.rap-ramme::after{display:none} }
.rap{background:#fff;border:1px solid #DDD8D0;border-radius:6px;
  padding:clamp(1.4rem,3.2vw,2.4rem);box-shadow:0 26px 60px -30px rgba(30,38,32,.4);
  color:#33302A;font-size:.92rem;line-height:1.55}
.rap-h1{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-size:1.35rem;
  margin:0 0 .2rem;color:#33302A}
.rap-meta{color:#7A756C;font-size:.79rem;margin:0 0 1rem}
.rap-disc{border:1px solid #2F6B4A;border-radius:5px;padding:.55rem .8rem;
  font-weight:600;font-size:.83rem;margin:0 0 1.4rem;color:#33302A}
.rap-h2{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-size:1rem;
  color:#2F6B4A;margin:1.5rem 0 .5rem;padding-bottom:.28rem;
  border-bottom:1px solid #DDD8D0}
.rap-h2 span{display:block;font-family:'Public Sans',system-ui,sans-serif;
  font-size:.75rem;font-style:italic;color:#7A756C;margin-top:.15rem}
.rap-t{width:100%;border-collapse:collapse;font-size:.85rem}
.rap-t th{text-align:left;font-weight:600;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:#7A756C;padding:.3rem .5rem .3rem 0;
  border-bottom:1px solid #DDD8D0}
.rap-t td{padding:.38rem .5rem .38rem 0;border-bottom:1px solid #EFEBE4;
  vertical-align:top}
.rap-t .st{font-weight:600;white-space:nowrap}
.rap-t .n{text-align:right;font-family:Newsreader,Georgia,serif;font-size:.9rem;
  white-space:nowrap;padding-right:1.1rem}
.rap-t th.n{font-family:'Public Sans',system-ui,sans-serif;font-size:.68rem}
.rap-t .ac{color:#2F6B4A}
.rap-t .mu{color:#7A756C}
.rap-fod{margin:1.6rem 0 0;padding-top:.8rem;border-top:1px solid #DDD8D0;
  color:#7A756C;font-size:.78rem;line-height:1.6}
.rap-fod b{color:#33302A}
.rap-note{text-align:center;color:var(--ink3);font-size:.78rem;margin:.9rem 0 0}
.rap-efter{margin-top:var(--luft)}

/* Paa smalle skaerme skal tabellen kunne rulle for sig selv frem for at
   presse hele siden vandret. */
@media(max-width:34rem){
  .rap-t{display:block;overflow-x:auto;white-space:nowrap}
  .rap-t .ac,.rap-t .mu{white-space:normal;min-width:11rem;display:inline-block}
}

/* ── Heroens sekundaere handling — 7. september 2026 ──────────────────
   "Se et eksempel" ved siden af tilmeldingen. Nogle besoegende er klar
   til at skrive sig op; andre skal se produktet foerst, og foer havde de
   ingen anden vej end at scrolle paa maa og faa. Den peger paa
   rapportsektionen — det er dér, udbyttet er tydeligst. */
.cta-sek{display:inline-block;font-weight:600;font-size:.97rem;text-decoration:none;
  color:var(--deep);background:none;padding:.8rem 1.45rem;border-radius:999px;
  border:1px solid var(--green);font-family:inherit;
  transition:border-color .16s ease,background .16s ease}
.cta-sek:hover{border-color:var(--deep);background:rgba(255,255,255,.6)}
.cta-sek:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Notelinjen staar nu paa sin egen linje under de to knapper i stedet
   for at klemme sig ind imellem dem. */
.hero-note{margin:1rem 0 0}

/* Kickeren baerer nu en saetning i stedet for ét ord; det taalte den
   brede sperring ikke. */
.navn{letter-spacing:.15em;max-width:26rem;line-height:1.5}
.ubrudt{white-space:nowrap}



/* ── Om-siden: "Hvorfor NeuroTune findes" — 7. september 2026 ─────────
   Afloeser stifterens foerste-persons-fortaelling. Emilies valg: siden
   skal handle om, hvem produktet er til, ikke om hvem der byggede det.
   Hendes portraet stod desuden to gange paa siden — det er vaek med
   sektionen. */
#hvorfor p{font-size:1.06rem;line-height:1.72;color:var(--ink2);max-width:34rem}
/* Mere luft mellem afsnittene end .stak giver: teksten er lang, og
   uden pauser laeses den som én blok. */
#hvorfor>.wrap.smal{gap:1.7rem}
#hvorfor .spoergsmaal{margin-block:.4rem}
#hvorfor h2{margin-top:1.4rem}
#hvorfor .spoergsmaal{font-family:Newsreader,"Iowan Old Style",Georgia,serif;
  font-style:italic;font-size:clamp(1.18rem,2.1vw,1.42rem);line-height:1.42;
  color:var(--ink);border-left:2px solid var(--olive);padding-left:1.1rem;
  max-width:32rem}
#hvorfor .slutlinje{font-family:Newsreader,"Iowan Old Style",Georgia,serif;
  font-style:italic;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.35;
  color:var(--green);border-top:1px solid var(--hair);padding-top:1.3rem;
  margin-top:.6rem}

/* Loesningen staar med produktet ved siden af sig — 7. september 2026.
   Da stifterportraettet forsvandt, mistede Om-siden sit eneste visuelle
   element og blev ren tekst hele vejen til "Holdet". Telefonen kommer
   ind dér, hvor teksten vender fra problem til produkt. */
/* ⚠️ TEKSTEN HAVDE 749px MAALT. Resten af sitet laeser paa 640. En
   spalte, der er bredere end laesebredden ét sted og ikke andre, er
   det Emilie kalder "underlig tekst". Telefonen faar sin fulde bredde,
   saa raekken stadig fylder. */
.loesning{display:grid;gap:2.6rem;margin-top:var(--luft);align-items:center}
.loesning .stak>*{max-width:var(--smal)}
@media(min-width:52rem){
  .loesning{grid-template-columns:1fr 310px;gap:3.6rem}
}
.loesning h2{margin-top:0}
.loesning .tlf{margin-inline:auto;max-width:310px}

/* ── Sektionsikoner — 7. september 2026 ──────────────────────────────
   Spalterne havde kun en olivenstreg over sig. Ikonerne er tegnet i
   appens eget sprog (24x24, stroke 1.8, runde hjoerner), og to af dem ER
   appens: PersonIcon til "Dig" og TrendIcon til "Maalt". De to
   overlappende cirkler er appens CirclesIcon — den betyder praecis "to
   kilder holdt sammen", baade i appen og her.

   ⚠️ De staar UDEN FOR telefonrammerne. Det er sidens egne ikoner, ikke
   et billede af appens UI. */
.ikon{display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--tint);
  color:var(--green);flex:none;margin-bottom:.9rem}
.ikon svg{width:21px;height:21px;display:block}
.ikon-lys{background:rgba(237,232,220,.13);color:var(--paa-deep2)}
.anderledes>div{border-top:none;padding-top:0}

/* ── De tre spoergsmaal som soejler ──────────────────────────────────
   Emilies tre spoergsmaal stod som ét afsnit. Som soejler faar hvert sit
   eget rum, og laeseren moeder dem ét ad gangen. Ordene er uaendrede. */
.spoergsmaal-raekke{display:grid;gap:1.4rem;margin:var(--luft) auto}
@media(min-width:46rem){
  .spoergsmaal-raekke{grid-template-columns:repeat(3,1fr);gap:0}
  .spoergsmaal-raekke p+p{border-left:1px solid var(--hair);padding-left:2rem}
  .spoergsmaal-raekke p{padding-right:2rem}
}
/* ⚠️ #hvorfor I SELEKTOREN ER IKKE PYNT. Uden den taber hele reglen.
   `#hvorfor p` ovenfor er en ID-selektor og slaar `.spoergsmaal-raekke p`,
   uanset at den staar senere i filen. Resultatet var, at spoergsmaalene
   rendrede paa 1,06rem i --ink2 — brødtekstens stoerrelse og farve — mens
   koden her sagde 1,22-1,5rem i --ink. Reglen har altsaa aldrig virket.
   Maalt 8/9: computed font-size 16,96px, ikke de 24px, clampen giver.
   Skriv den ikke om til `.spoergsmaal-raekke p` igen. */
#hvorfor .spoergsmaal-raekke p{font-family:Newsreader,"Iowan Old Style",Georgia,serif;
  font-style:italic;font-size:clamp(1.22rem,2.3vw,1.5rem);line-height:1.32;
  color:var(--ink);max-width:none;text-wrap:balance;margin:0}

/* ── Delte layouts: tekst og foto side om side — 7. september 2026 ────
   Fra Emilies mockups.

   ⚠️ FOERSTE UDGAVE SAA MALPLACERET UD, og maalingen viste hvorfor: paa
   Saadan virker det var billedet 338px hoejt og teksten ved siden af 90px.
   Billedet laa ud for en OVERSKRIFT, ikke ud for indhold. To rettelser:
   markuppen saetter nu billedet ved siden af det, sektionen handler om, og
   fladen straekker sig til raekkens hoejde i stedet for at flyde i sit eget
   sideforhold.

   Billedet faar ogsaa mere plads end teksten (1,12 mod 1). Emilie:
   "billeder skal fylde mere". */
.delt{display:grid;gap:2rem}
@media(min-width:54rem){
  .delt{grid-template-columns:1fr 1.12fr;gap:3rem;align-items:stretch}
  .delt-omvendt{grid-template-columns:1.12fr 1fr}
  .delt>*{align-self:center}
  .delt-foto{align-self:stretch}
}
/* Paa mobil moeder laeseren altid ordene foer motivet — ogsaa i den
   omvendte variant, hvor billedet staar foerst i markuppen. */
@media(max-width:54rem){ .delt-omvendt .delt-foto{order:2} }

.delt-foto{width:100%;height:100%;object-fit:cover;
  min-height:clamp(280px,32vw,440px);
  border-radius:16px;box-shadow:var(--loft-s);display:block}

/* De to kilder stablet, saa de fylder samme hoejde som fladen ved siden af. */
.to-ting-stablet{display:flex;flex-direction:column;gap:1.8rem;margin-top:0}
.to-ting-stablet .kilde{border-top:1px solid var(--hair);padding-top:1.1rem}

/* Fuldbredde-foto: bruges hvor teksten ved siden af ville vaere for kort
   til et delt layout. Kan ikke blive skaevt, og fylder mere. */
.baand-foto{margin:var(--luft) auto}
.baand-foto img{width:100%;height:clamp(240px,30vw,400px);object-fit:cover;
  border-radius:18px;box-shadow:var(--loft-s);display:block}

/* ── Telefonernes statuslinje — 7. september 2026 ────────────────────
   Fra Emilies mockups. En skaerm uden ur og batteri laeses som en
   tegning; med dem laeses den som et skaermbillede. Klokkeslettet er
   20.41 — aften, som resten af mockuppen ("God aften", "Sov godt").

   ⚠️ Den ligger UDEN FOR scenerne, saa den ikke skifter med dem, og
   aria-hidden: en skaermlaeser skal ikke laese et pyntebatteri op. */
.a-status{position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px 0;font-size:9.5px;font-weight:600;
  color:var(--a-ink);letter-spacing:.01em;pointer-events:none}
.a-status-ik{display:flex;align-items:center;gap:3.5px}
.a-status-ik svg{height:8.5px;width:auto;display:block}

/* ── Koncentriske ringe paa de moerke baand — 7. september 2026 ───────
   Fra Emilies mockups: logoets spiral brugt som flade. Rent dekorativt
   og rent CSS — ingen fil at hente, ingen markup at vedligeholde.

   ⚠️ KUN PAA DE TO STORE UDSAGNS-BAAND ("Det, NeuroTune goer anderledes"
   og "Graensen"), ikke paa alle otte moerke sektioner. Et accent, der
   gentages otte gange, er en tapet. */
.ringe{position:relative;overflow:hidden}
.ringe::after{
  content:"";position:absolute;pointer-events:none;
  right:-14rem;top:50%;translate:0 -50%;
  width:46rem;height:46rem;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 21%,rgba(237,232,220,.055) 21% 21.4%,transparent 21.4%),
    radial-gradient(circle,transparent 0 30%,rgba(237,232,220,.05)  30% 30.35%,transparent 30.35%),
    radial-gradient(circle,transparent 0 39%,rgba(237,232,220,.045) 39% 39.3%,transparent 39.3%),
    radial-gradient(circle,transparent 0 48%,rgba(237,232,220,.04)  48% 48.28%,transparent 48.28%);
}
.ringe>.wrap{position:relative;z-index:1}
@media(max-width:60rem){ .ringe::after{display:none} }

/* ══════════════════════════════════════════════════════════════════════
   ÉN VENSTREKANT — 7. september 2026

   Emilie: "der er meget der staar i midten ... det skal vaere visuelt
   flottere."

   Maalt paa Om ved 1600px stod fire blokke med hver sin venstrekant:

     tekst      480     foto        240
     spoergsmaal 336    loesningen  336

   Hver blok var centreret i SIN EGEN bredde, saa intet flugtede. Oejet
   moeder en stak midterstillede ting uden rygrad — det er dét, der
   laeses som "meget staar i midten".

   Rettelsen: containeren er altid 70rem, som alt andet. Kun TEKSTEN
   begraenses til laesebredde, og den er venstrestillet. Én kant hele
   vejen ned; kun hoejre kant varierer.

   ⚠️ Ingen vw-beregning. `50vw` ville tage rullepanelet med og give en
   kant, der ligger 7-8px ved siden af `.wrap`s. Her arver begge samme
   max-width og samme auto-centrering, saa de kan ikke falde fra hinanden.
   ══════════════════════════════════════════════════════════════════════ */
.wrap.smal,.wrap.mellem{max-width:var(--maks)}
/* ⚠️ KUN TEKSTEN. Foerste udgave cappede ALLE boern til 40rem, og saa
   blev .fakta, .folk, .anderledes, .grafer og formularen klemt ned i
   venstre halvdel med et tomt felt til hoejre. Emilie: "det er rykket
   akavet til venstre." Loebende tekst skal have laesebredde; en komponent
   skal fylde sin container. */
.wrap.smal>h1,.wrap.smal>h2,.wrap.smal>h3,.wrap.smal>p{max-width:var(--smal)}

/* Baand-fotoet beskar hovederne vaek: 3:2-kilde i en 2,8:1-ramme klipper
   lige meget af top og bund, og folk staar i den oeverste tredjedel. */
.baand-foto img{height:clamp(300px,36vw,520px);object-position:center 34%}

/* ══════════════════════════════════════════════════════════════════════
   ÉN BLOK-AFSTAND — 7. september 2026

   Emilie: "synes stadig nogle ting er lidt sjove."

   Optalt i stilarket brugte SAMME relation — et indholdsblok efter sin
   indledning — otte forskellige vaerdier:

     2 · 2,3 · 2,4 · 2,6 · 2,8 · 3 · 3,2 · 3,4 rem

   Det er ikke en skala, det er tal valgt paa hver sin dag. Alle 16 er nu
   `var(--luft)`. AEndres rytmen, aendres den ét sted.

   ⚠️ De fine afstande INDE i en komponent (.graf-fod .8rem, .rap-note
   .9rem, .alle-fod 1.1rem) er bevidst ikke roert. De loeser en anden
   opgave — at binde en note til det, den hoerer til — og skal vaere
   mindre end afstanden mellem blokke.
   ══════════════════════════════════════════════════════════════════════ */

/* ⚠️ 195px FOER FOERSTE AFSNIT — 7. september 2026.
   Sidehovedet slutter med 67px bund, og den foerste sektion begyndte med
   sine fulde 128px top. Tilsammen naesten to hundrede pixels tomt foer ét
   kort afsnit, saa det der fulgte efter saa ud som om det laa tilfaeldigt.
   Emilie: "hvorfor der?"
   Sidehovedet har allerede lukket af; sektionen behoever ikke gentage det. */
.sidehoved + .band{padding-top:clamp(2.6rem,5.5vw,4.6rem)}