/* ============================================================
   FORSIDEN — landing.css
   Kun til index.html. Bygger videre på designtokens og komponenter
   i css/style.css (samme palette, samme skrifter, samme skarpe
   "prøvehæfte"-kanter) — her er alene de sektionslayouts, som
   salgssiden har brug for.

   Layoutfamilier med vilje forskellige fra sektion til sektion:
   delt forside → talstribe på linjer → bento-gitter → centreret
   demopanel → nummereret trin-stige → to-spaltet med figur →
   prisgitter → harmonika → afsluttende bånd.
   ============================================================ */

.lp {
  --ease: cubic-bezier(.16, 1, .3, 1);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.lp section { scroll-margin-top: 70px; }

/* Blød indtoning, når en sektion ruller ind i billedet (js/landing.js).
   Kun transform + opacity, så der aldrig genberegnes layout. */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rv.inde { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* Sektionsoverskrift: sitets egen § -stribe, blot i forside-skala */
.lp .sec-h { margin: 58px 0 4px; }
.lp .sec-h h2 { font-size: clamp(21px, 2.5vw, 30px); letter-spacing: -.01em; }
.lp-intro { color: var(--note); max-width: 62ch; margin: 12px 0 0; font-size: 16.5px; }

/* ---------- 1 · Forside (delt: tekst | levende smagsprøve) ---------- */
.lp-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
  padding: 54px 0 46px;
}
.lp-hero-tekst { min-width: 0; }
.lp-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--note); display: block; }
.lp-h1 {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1; letter-spacing: -.025em; text-transform: uppercase;
  margin: 16px 0 0;
  text-wrap: balance;   /* undgår et enkelt efterladt ord på sidste linje */
}
.lp-h1 span { display: block; }
.lp-h1 .rod { color: var(--rod); }
.lp-lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--note); max-width: 44ch; margin: 18px 0 0; line-height: 1.5; }
.lp-knapper { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 0; }
.btn.stor { font-size: 15px; padding: 13px 24px; }
.lp-micro { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--note); margin: 18px 0 0; max-width: 52ch; }
.lp-micro b { color: var(--blaek); font-weight: 600; }

/* ============================================================
   HJULET I HERO'EN
   Seks miniaturer af trænerens egne flader kredser om midten.
   Opbygning — tre lag, fordi hver bevægelse skal kunne styres
   uafhængigt uden at overskrive de andres transform:
     .lp-hjul-rotor  drejer hele kredsen rundt (én animation)
     .lp-hjul-plads  placerer kortet på cirklen (statisk) og
                     løfter det frem i stakken, når det er forrest
     .lp-hjul-kort   drejer LIGE SÅ MEGET TILBAGE, så kortet står
                     opret hele vejen rundt, og skalerer + fader,
                     så bagsiden af kredsen læses som "længere væk"
     .lp-hjul-flade  et lille, fast skævt hæng, så rækken ikke
                     virker maskinstemplet
   Alle seks kort deler samme omløbstid; --f er kortets plads i
   omløbet og bruges som negativ forsinkelse, så skalering og
   dybde altid følger positionen på cirklen.
   ============================================================ */
.lp-hjul-boks { display: grid; justify-items: center; overflow: hidden; }
.lp-hjul {
  --T: 54s;
  --d: clamp(340px, 33vw, 470px);
  --kb: calc(var(--d) * .43);        /* kortets bredde */
  --kh: calc(var(--d) * .275);       /* kortets højde  */
  --r: calc(var(--d) * .305);        /* kredsens radius */
  position: relative; width: var(--d); height: var(--d); flex: 0 0 auto;
}
.lp-hjul-rotor { position: absolute; inset: 0; animation: hjul-drej var(--T) linear infinite; }
.lp-hjul-plads {
  position: absolute; left: 50%; top: 50%;
  width: var(--kb); height: var(--kh);
  margin-left: calc(var(--kb) / -2); margin-top: calc(var(--kh) / -2);
  transform: rotate(var(--v)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--v)));
  animation: hjul-stak var(--T) linear infinite;
  animation-delay: calc(var(--f) * var(--T) * -1);
}
/* Moddrejningen skal følge rotoren PRÆCIST og må derfor ikke forskydes —
   ellers ville hvert kort hænge skævt med sin egen faste vinkel. Kun
   dybden (skala + gennemsigtighed) forskydes med kortets plads i omløbet. */
.lp-hjul-kort {
  position: absolute; inset: 0;
  animation: hjul-moddrej var(--T) linear infinite;
  will-change: transform;
}
.lp-hjul-flade {
  position: absolute; inset: 0; transform: rotate(var(--tilt));
  animation: hjul-dybde var(--T) linear infinite;
  animation-delay: calc(var(--f) * var(--T) * -1);
  will-change: transform, opacity;
  border: 1.5px solid var(--blaek); border-radius: 5px; background: var(--felt);
  box-shadow: 0 1px 0 rgba(34,36,43,.06), 0 14px 28px -20px rgba(34,36,43,.55);
  padding: calc(var(--d) * .026) calc(var(--d) * .032);
  display: flex; flex-direction: column; gap: calc(var(--d) * .014);
  overflow: hidden;
  font-size: calc(var(--d) * .0255);
  line-height: 1.3;
}

@keyframes hjul-drej { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hjul-moddrej { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
/* 0 % = bagerst (øverst på kredsen) · 50 % = forrest (nederst) */
@keyframes hjul-dybde {
  0%   { transform: rotate(var(--tilt)) scale(.80);  opacity: .38; }
  25%  { transform: rotate(var(--tilt)) scale(.93);  opacity: .72; }
  50%  { transform: rotate(var(--tilt)) scale(1.06); opacity: 1; }
  75%  { transform: rotate(var(--tilt)) scale(.93);  opacity: .72; }
  100% { transform: rotate(var(--tilt)) scale(.80);  opacity: .38; }
}
@keyframes hjul-stak {
  0%   { z-index: 1; }
  50%  { z-index: 6; }
  100% { z-index: 1; }
}

/* Uden bevægelse: hjulet står stille som en pæn vifte af kort. */
@media (prefers-reduced-motion: reduce) {
  .lp-hjul-rotor, .lp-hjul-plads, .lp-hjul-kort, .lp-hjul-flade { animation: none; }
  .lp-hjul-flade { opacity: 1; transform: rotate(var(--tilt)) scale(.93); }
}

/* --- Indholdet i miniaturene (småt, men rigtigt) --- */
.lp-hjul-flade .hk-eyebrow { font-family: var(--mono); font-size: .74em; letter-spacing: .12em; text-transform: uppercase; color: var(--note); }
.lp-hjul-flade .hk-top { display: flex; align-items: center; gap: .5em; }
.lp-hjul-flade .hk-nr { font-family: var(--mono); font-weight: 600; border: 1.5px solid var(--blaek); padding: 0 .45em; background: var(--papir); font-size: .86em; }
.lp-hjul-flade .hk-chip { font-family: var(--mono); font-size: .72em; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--linje); border-radius: 999px; padding: .1em .6em; color: var(--note); }
.lp-hjul-flade .hk-sp { font-weight: 600; font-size: 1.02em; margin-top: .1em; }
.lp-hjul-flade .hk-valg { display: flex; align-items: center; gap: .5em; border: 1px solid var(--linje); border-radius: 3px; padding: .28em .5em; font-size: .92em; }
.lp-hjul-flade .hk-valg.valgt { border-color: var(--blaek); border-width: 1.5px; background: var(--papir); }
.lp-hjul-flade .hk-boks { width: 1em; height: 1em; border: 1.5px solid var(--blaek); border-radius: 1px; flex: 0 0 auto; }
.lp-hjul-flade .hk-valg.valgt .hk-boks { background: var(--blaek); }
.lp-hjul-flade .hk-stempel {
  align-self: flex-start; font-family: var(--mono); font-weight: 700; font-size: 1.35em;
  letter-spacing: .12em; border: 2.5px double var(--groen); color: var(--groen);
  padding: .12em .5em; border-radius: 3px; transform: rotate(-5deg); margin: .25em 0 .1em .35em;
}
.lp-hjul-flade .hk-score { font-family: var(--mono); font-weight: 600; font-size: 1.5em; line-height: 1; }
.lp-hjul-flade .hk-score small { font-size: .55em; color: var(--note); }
.lp-hjul-flade .hk-ikon { width: 2.6em; height: 2.6em; color: var(--rod); align-self: center; }
.lp-hjul-flade .hk-ikon svg { display: block; width: 100%; height: 100%; }
.lp-hjul-flade .hk-kort-front { font-family: var(--disp); font-weight: 700; font-size: 1.1em; text-align: center; }
.lp-hjul-flade .hk-ur { font-family: var(--mono); font-weight: 600; font-size: 1.75em; letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-hjul-flade .hk-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .22em; margin-top: auto; width: 58%; }
.lp-hjul-flade .hk-grid i { aspect-ratio: 1; border: 1px solid var(--linje); border-radius: 1px; }
.lp-hjul-flade .hk-grid i.fyldt { background: var(--blaek); border-color: var(--blaek); }
.lp-hjul-flade .hk-linje { display: flex; justify-content: space-between; gap: .5em; font-size: .92em; }
.lp-hjul-flade .hk-linje b { font-family: var(--mono); font-weight: 600; }
.lp-hjul-flade .hk-linje b.svag { color: var(--rod); }
.lp-hjul-flade .hk-linje b.god { color: var(--groen); }
.lp-hjul-flade .hk-bar { height: .42em; background: var(--papir); border: 1px solid var(--linje); border-radius: 99px; overflow: hidden; margin-top: -.15em; }
.lp-hjul-flade .hk-bar i { display: block; height: 100%; background: var(--blaek); }
.lp-hjul-flade .hk-bar i.svag { background: var(--rod); }
.lp-hjul-flade .hk-bar i.god { background: var(--groen); }
.lp-hjul-flade .hk-raek { display: flex; justify-content: space-between; gap: .5em; align-items: center; border-bottom: 1px solid var(--linje); padding-bottom: .28em; font-size: .92em; }
.lp-hjul-flade .hk-raek:last-child { border-bottom: 0; }
.lp-hjul-flade .hk-raek b { font-family: var(--mono); font-weight: 600; }
.lp-hjul-flade .hk-raek .fri { font-family: var(--mono); font-size: .82em; color: var(--groen); }

/* Kun for skærmlæsere: beskrivelsen af hjulet */
.sr-kun { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Smagsprøve-panelet (rigtige spørgsmål, rigtige knapper) ---------- */
.lp-demo-midt { max-width: 620px; }
.lp-demo {
  border: 2px solid var(--blaek); background: var(--felt);
  box-shadow: var(--skygge); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 372px;
}
.lp-demo-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 2px solid var(--blaek); background: var(--papir);
}
.lp-demo-mrk { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--rod); border-radius: 999px; padding: 3px 9px; }
.lp-demo-kilde { font-family: var(--mono); font-size: 11.5px; color: var(--note); }
.lp-demo-nr { font-family: var(--mono); font-size: 11.5px; color: var(--note); margin-left: auto; font-variant-numeric: tabular-nums; }
.lp-demo-krop { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.lp-demo .sp-top { margin-bottom: 0; }
.lp-demo-sp { font-size: 17.5px; font-weight: 600; line-height: 1.42; margin: 12px 0 16px; }
.lp-demo .valg { gap: 8px; }
.lp-demo .valg-knap { font-size: 15.5px; padding: 10px 13px; }
.lp-demo .valg-knap .boks { width: 22px; height: 22px; font-size: 14px; }
/* Browserens egen »disabled«-gråtone ville også slukke det rigtige svar,
   så farverne sættes eksplicit: de fravalgte dæmpes, facit står skarpt. */
.lp-demo .valg-knap[disabled] { cursor: default; color: var(--note); opacity: 1; }
.lp-demo .valg-knap.korrekt[disabled], .lp-demo .valg-knap.forkert[disabled] { color: var(--blaek); }
.lp-demo .valg-knap.korrekt { border-color: var(--groen); background: var(--groen-lys); border-width: 2px; padding: 9px 12px; }
.lp-demo .valg-knap.korrekt .boks { border-color: var(--groen); color: var(--groen); }
.lp-demo .valg-knap.korrekt .boks::before { content: "✓"; }
.lp-demo .valg-knap.forkert { border-color: var(--rod); background: var(--rod-lys); border-width: 2px; padding: 9px 12px; }
.lp-demo .valg-knap.forkert .boks { border-color: var(--rod); color: var(--rod); }
.lp-demo .valg-knap.forkert .boks::before { content: "✕"; }
.lp-demo-svar { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-demo-dom { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.lp-demo-dom.ja { color: var(--groen); }
.lp-demo-dom.nej { color: var(--rod); }
.lp-demo-hint { font-family: var(--mono); font-size: 12px; color: var(--note); }
.lp-demo-svar .btn { margin-left: auto; }

/* Slutskærm i smagsprøven */
.lp-demo-slut { display: grid; gap: 12px; justify-items: start; align-content: center; flex: 1; }
.lp-demo-score { font-family: var(--mono); font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1; margin: 0; }
.lp-demo-slut p { margin: 0; color: var(--note); font-size: 15px; }
.lp-demo-slut .rk { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 940px) {
  .lp-hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 34px; }
  .lp-lead, .lp-micro { max-width: none; }
}

/* ---------- 2 · Talstribe (linjer, ikke kort) ---------- */
.lp-tal {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--blaek); border-bottom: 1.5px solid var(--linje);
}
.lp-tal div { padding: 20px 20px 22px; border-right: 1px solid var(--linje); }
.lp-tal div:last-child { border-right: 0; }
.lp-tal b { display: block; font-family: var(--mono); font-weight: 600; font-size: clamp(26px, 3.2vw, 38px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lp-tal span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--note); line-height: 1.45; }
@media (max-width: 780px) {
  .lp-tal { grid-template-columns: 1fr 1fr; }
  .lp-tal div:nth-child(2n) { border-right: 0; }
  .lp-tal div:nth-child(-n+2) { border-bottom: 1px solid var(--linje); }
}

/* ---------- 3 · Bento: de fire trænere ---------- */
/* Bento: bred + smal på første række, smal + bred på anden. Fire kort i
   seks celler uden en eneste tom celle — og DOM-rækkefølgen er den samme
   som læserækkefølgen, så tastatur og skærmlæser følger med. */
.lp-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-kort {
  border: 1px solid var(--blaek); background: var(--felt); box-shadow: var(--skygge);
  padding: 22px 24px 18px;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 9px;
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.lp-kort:hover { transform: translateY(-3px); border-color: var(--rod); }
.lp-kort.bred { grid-column: span 2; }
.lp-kort h3 { font-family: var(--disp); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.lp-kort p { margin: 0; font-size: 15px; color: var(--note); line-height: 1.5; }
.lp-kort-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-kort-bund { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--linje); padding-top: 11px; margin-top: 4px; }
.lp-kort .lp-meta { font-family: var(--mono); font-size: 12px; color: var(--rod); letter-spacing: .03em; }
.lp-kort .lp-gaa { font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--blaek); white-space: nowrap; }
.lp-kort:hover .lp-gaa { color: var(--rod); }
.lp-badge { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gul); border: 1px solid var(--gul); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lp-kort-ikon { width: 40px; height: 40px; color: var(--rod); flex: 0 0 auto; }
.lp-kort-ikon svg { display: block; width: 100%; height: 100%; }
@media (max-width: 860px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-kort.bred { grid-column: auto; }
}

/* ---------- 4 · Flashcard-demo (centreret panel) ---------- */
.lp-fc { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; align-items: start; }
.lp-fc-emner { display: grid; gap: 8px; align-content: start; }
.lp-fc-chip {
  font: inherit; text-align: left; font-size: 14.5px;
  border: 1.5px solid var(--linje); background: var(--felt); color: var(--blaek);
  border-radius: var(--radius); padding: 11px 14px; line-height: 1.35;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.lp-fc-chip small { display: block; font-family: var(--mono); font-size: 11px; color: var(--note); margin-top: 3px; }
.lp-fc-chip:hover { border-color: var(--blaek); }
.lp-fc-chip.aktiv { border-color: var(--rod); border-width: 2px; padding: 10px 13px; background: var(--rod-lys); }

.lp-scene { perspective: 1500px; max-width: 560px; margin: 0 auto; }
.lp-flip {
  position: relative; width: 100%; min-height: 318px;
  border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; display: block;
  transform-style: preserve-3d; transition: transform .5s var(--ease); cursor: pointer;
}
.lp-flip.vendt { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .lp-flip { transition: none; } }
.lp-flip-side {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 2px solid var(--blaek); border-radius: var(--radius); background: var(--felt); box-shadow: var(--skygge);
  padding: 26px 28px; display: grid; align-content: center; justify-items: center; gap: 14px; overflow: auto;
}
.lp-flip-side.bag { transform: rotateY(180deg); align-content: start; justify-items: stretch; gap: 12px; }
.lp-flip-ikon { width: 84px; height: 84px; color: var(--rod); }
.lp-flip-ikon svg { display: block; width: 100%; height: 100%; }
.lp-flip-front { font-family: var(--disp); font-weight: 700; font-size: clamp(19px, 2.4vw, 25px); text-align: center; line-height: 1.2; margin: 0; }
.lp-flip-hint { font-family: var(--mono); font-size: 11.5px; color: var(--note); letter-spacing: .08em; text-transform: uppercase; }
.lp-flip-hoved { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--blaek); padding-bottom: 9px; }
.lp-flip-hoved .lp-flip-ikon { width: 38px; height: 38px; flex: 0 0 auto; }
.lp-flip-hoved h3 { font-family: var(--disp); font-size: 16px; margin: 0; text-transform: uppercase; letter-spacing: .02em; }
.lp-flip-punkter { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.45; }
.lp-flip-punkter li::marker { color: var(--rod); }
.lp-flip-kilde { font-size: 12px; color: var(--note); border-top: 1px dashed var(--linje); padding-top: 8px; margin: 2px 0 0; }
.lp-flip-hint.bag-hint { text-align: center; margin-top: -2px; }
.lp-fc-under { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px auto 0; max-width: 560px; }
@media (max-width: 780px) {
  .lp-fc { grid-template-columns: 1fr; gap: 20px; }
  .lp-fc-emner { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ---------- 5 · Trin-stige ---------- */
.lp-trin { list-style: none; counter-reset: trin; margin: 0; padding: 0; display: grid; gap: 0; max-width: 74ch; }
.lp-trin li { counter-increment: trin; position: relative; padding: 0 0 30px 62px; border-left: 2px solid var(--linje); margin-left: 20px; }
.lp-trin li:last-child { border-left-color: transparent; padding-bottom: 0; }
.lp-trin li::before {
  content: counter(trin);
  position: absolute; left: -21px; top: -2px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--blaek); background: var(--felt);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 15px;
}
.lp-trin h3 { font-family: var(--disp); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .01em; margin: 6px 0 6px; }
.lp-trin p { margin: 0; color: var(--note); font-size: 15.5px; line-height: 1.55; }

/* ---------- 6 · Resultatanalyse (to spalter med rigtig figur) ---------- */
.lp-split { display: grid; grid-template-columns: 1fr .92fr; gap: 44px; align-items: center; }
.lp-punkter { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; max-width: 56ch; }
.lp-punkter li { padding-left: 26px; position: relative; font-size: 15.5px; line-height: 1.5; color: var(--note); }
.lp-punkter li::before { content: "✓"; position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 700; color: var(--groen); }
.lp-punkter b { color: var(--blaek); }
.lp-figur { border: 1px solid var(--blaek); background: var(--felt); box-shadow: var(--skygge); padding: 22px 24px; }
.lp-figur-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--note); margin: 0 0 14px; }
.lp-figur h4 { font-family: var(--disp); font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 9px; }
.lp-figur .slots { gap: 6px; }
.lp-figur .slot { width: 26px; height: 26px; font-size: 13px; }
.lp-figur .fork { font-size: 13px; color: var(--note); margin: 10px 0 0; }
.lp-figur .fork b { color: var(--rod); }
.lp-figur-emner { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linje); }
@media (max-width: 900px) { .lp-split { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- 7 · Priser ---------- */
.lp-pris { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.lp-plan {
  border: 1px solid var(--blaek); background: var(--felt); box-shadow: var(--skygge);
  padding: 22px 22px 20px; display: grid; align-content: start; gap: 8px; position: relative;
}
.lp-plan.frem { border: 2px solid var(--rod); padding: 21px 21px 19px; }
.lp-plan-niveau { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--note); }
.lp-plan.pro .lp-plan-niveau { color: var(--gul); }
.lp-plan h3 { font-family: var(--disp); font-weight: 700; font-size: 17px; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
.lp-plan .belob { font-family: var(--mono); font-weight: 600; font-size: 25px; letter-spacing: -.02em; margin: 2px 0 0; }
.lp-plan p { margin: 0; font-size: 14px; color: var(--note); line-height: 1.5; }
.lp-plan .btn { margin-top: 12px; width: 100%; text-align: center; }
.lp-spar { position: absolute; top: -11px; right: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--rod); color: #fff; border-radius: 999px; padding: 3px 10px; }
.lp-pris-note { font-size: 14px; color: var(--note); margin: 16px 0 0; max-width: 74ch; line-height: 1.6; }
@media (max-width: 940px) { .lp-pris { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lp-pris { grid-template-columns: 1fr; } }

/* Prøveperiode-båndet over priserne */
.lp-trial {
  border: 2px solid var(--rod); background: var(--rod-lys); border-radius: var(--radius);
  padding: 20px 24px; margin: 0 0 20px;
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
}
.lp-trial h3 { font-family: var(--disp); font-weight: 700; font-size: 19px; text-transform: uppercase; margin: 8px 0 6px; }
.lp-trial p { margin: 0; font-size: 14.5px; line-height: 1.55; max-width: 72ch; }
@media (max-width: 700px) { .lp-trial { grid-template-columns: 1fr; } }

/* ---------- 8 · Tillid ---------- */
/* Fem punkter går ikke op i et gitter, så der er ingen vandrette linjer
   at få til at flugte — hvert punkt får i stedet sin egen lodrette streg. */
.lp-tillid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px 26px; }
.lp-tillid p {
  margin: 0; padding: 2px 0 2px 16px; font-size: 15px; line-height: 1.55; color: var(--note);
  border-left: 2px solid var(--linje);
}
.lp-tillid p b { color: var(--blaek); }

/* ---------- 9 · FAQ-harmonika ---------- */
.lp-faq-mere { display: inline-block; margin-top: 12px; font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--rod); text-decoration: none; border-bottom: 2px solid var(--rod); padding-bottom: 2px; }

/* ---------- 10 · Afsluttende bånd ---------- */
.lp-slut {
  border: 2px solid var(--blaek); background: var(--felt); box-shadow: var(--skygge);
  border-left: 8px solid var(--rod);
  padding: 34px 36px; margin: 56px 0 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
}
.lp-slut h2 { font-family: var(--disp); font-weight: 800; font-size: clamp(24px, 3.2vw, 36px); text-transform: uppercase; letter-spacing: -.015em; margin: 0 0 8px; line-height: 1.05; }
.lp-slut p { margin: 0; color: var(--note); max-width: 56ch; }
.lp-slut .rk { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 820px) { .lp-slut { grid-template-columns: 1fr; padding: 26px 24px; } }