/*
 * Forsiden.
 *
 * Bygget efter Figma-designet `Csomp1lrZoKKk9ir8ADzus`, node 2:2.
 * Farver, radius og afstande kommer fra `tokens.css`, som er hentet med
 * Figmas variabel-API — ikke aflæst af et skærmbillede.
 *
 * Instrument Serif til display, Montserrat til alt andet. Begge hostes
 * lokalt, se `fonts.css`.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * `display: flex` på et element med `hidden` vinder over browserens egen
 * `[hidden] { display: none }` — den er kun en standardregel og har lavere
 * vægt. Burger-knappen stod synlig, selv om skabelonen skjulte den.
 */
[hidden] {
  display: none !important;
}

html {
  /* Teksten må ikke pustes op i en in-app-browser med stor systemtekst.
     Samme rettelse som playeren fik 25/09 — den fejl er billigere at
     forebygge end at finde. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Forløbets gradient er skærmbred (100vw) og ville ellers give en vandret
     scrollbar på Windows. `clip`, ikke `hidden`: hidden gør html til en
     scrollbeholder, og så holder telefonens `sticky` op med at virke. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.wrap {
  max-inline-size: 1728px;
  margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Topbar                                                              */
/* ------------------------------------------------------------------ */

/*
 * Målt i Figma-designet, ikke skønnet. Tallene er læst ud af selve
 * billedets pixels (node 2:2, 1728 px bred):
 *
 *   barens højde        149px
 *   logocelle           306px, logoblokken starter 74px inde
 *   øvrige celler       170px hver — Why moooce, Shorts, Pricing, ☰, EN
 *   båndet              resten
 *   skillestreger       #849494  (IKKE den lyse --c-border-light)
 *   tekst               #0d3f44
 *   baggrund            #f0f2f0 — også bag båndet
 *
 * Cellerne har faste bredder, fordi det er dét, designet gør. Båndet
 * optager resten, så baren passer i enhver vinduesbredde uden at
 * menupunkterne flytter sig.
 */
.top {
  display: flex;
  align-items: stretch;
  block-size: 149px;
  border-block-end: 1px solid var(--c-border);
  position: sticky;
  inset-block-start: 0;
  z-index: 10;

  /*
   * Sløret baggrund. Baren er sticky, så siden ruller ind under den.
   *
   * Baggrunden er næsten gennemsigtig (0.1) — sløringen og afmætningen gør
   * arbejdet, ikke farven. `saturate(10%)` tager kuløren ud af det, der
   * ruller forbi, så det bliver til en grå tone frem for et farvet billede,
   * og menupunkterne kan læses oven på.
   *
   * Værdierne er dine, valgt i browseren. Hold øje med kontrasten, når der
   * kommer mørke billeder under baren — det er den eneste situation, hvor
   * 0.1 kan blive for lidt.
   *
   * -webkit-backdrop-filter skal med: Safari understøtter den kun med
   * præfiks, og Safari er ikke en lille del af trafikken på et site, der
   * handler om video på telefon.
   */
  background: rgb(240 242 240 / 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(10%);
  backdrop-filter: blur(14px) saturate(10%);
}

/*
 * Understøtter browseren ikke backdrop-filter, bliver baggrunden helt
 * uigennemsigtig i stedet. En halvgennemsigtig bar UDEN slør er ikke et
 * dårligere slør — det er ulæselig tekst oven på et billede.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top {
    background: var(--c-bg);
  }
}

.top-logo {
  position: relative;
  flex: none;
  inline-size: 306px;
  display: flex;
  align-items: center;
  padding-inline-start: 74px;
  text-decoration: none;
  color: inherit;
}

/* 152px er målt i designet: logoblokken går fra x=74 til x=226 i en
   306px celle. Filens eget viewBox er 154×45, altså samme lockup. */
.top-logo img {
  inline-size: 152px;
  block-size: auto;
  flex: none;
}

/*
 * Den lave bar (Figma Main_menubar "scrolled", 331:2187): 80px og kun
 * bomærket, højrestillet i logocellen med 64px luft. top.js sætter
 * `.er-rullet`, så snart siden er scrollet.
 *
 * Barens højde skifter 69px, og de 69px lægges på som margin under den.
 * Uden det ville hele siden hoppe 69px op i samme øjeblik, man begynder at
 * scrolle.
 */
.top {
  transition: block-size 0.35s ease-in-out, margin-block-end 0.35s ease-in-out;
}

.top-logo-fuld,
.top-logo-maerke {
  transition: opacity 0.25s ease-in-out;
}

/* Samme størrelse som mærket i den fulde logo (152px bred, mærket ~68px
   af det) — ikke større. `.top-logo .top-logo-maerke`, fordi `.top-logo img`
   ovenfor ellers vinder og gør det 152px bredt. */
.top-logo .top-logo-maerke {
  position: absolute;
  inset-inline-end: 64px;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 68px;
  block-size: auto;
  opacity: 0;
}

@media (min-width: 901px) {
  .top.er-rullet {
    block-size: 80px;
    margin-block-end: 69px;
  }

  .top.er-rullet .top-logo-fuld { opacity: 0; }
  .top.er-rullet .top-logo-maerke { opacity: 1; }
}

/* Cellerne. Stregen sidder på hver celles venstre kant, så der ikke er
   separate elementer at holde synkroniseret, når et punkt kommer til. */
.top-celle {
  flex: none;
  inline-size: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-inline-start: 1px solid var(--c-border);
  /* Nav_BTN (331:2099): Inter Medium 14/22, spatiering −0,28px. */
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.28px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Nav_BTN "hover" (331:2097). */
a.top-celle:hover {
  background: var(--c-bg-subtle);
}

/* Nav_BTN "active" (331:2096): en 6px streg i bunden, i stregfarven. Som
   indvendig skygge, så cellen ikke bliver højere end de andre. */
a.top-celle[aria-current="page"] {
  box-shadow: inset 0 -6px 0 var(--c-border);
}

.top-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Uden den her strækker <li> sig ikke i højden, og cellerne — med deres
   skillestreger — bliver kun så høje som teksten. */
.top-nav li {
  display: flex;
}

/*
 * Burger-knappen og mobilmenuen: se "Mobilbaren" længere nede. På en bred
 * skærm findes de ikke.
 */
.top-burger,
.mobilmenu,
.top-logo-mobil { display: none }

/*
 * Sprogvælgeren er ÉN celle med det aktuelle sprog, ikke tre links.
 * `<details>` frem for JavaScript: den kan åbnes med tastatur og virker,
 * før noget script er hentet.
 */
.top-sprog {
  position: relative;
  flex: none;
}

.top-sprog > summary {
  list-style: none;
  block-size: 100%;
}

.top-sprog > summary::-webkit-details-marker {
  display: none;
}

/* Klik med musen giver ingen blå ramme; tastaturet får stadig en. */
.top-sprog > summary:focus { outline: none; }
.top-sprog > summary:focus-visible {
  outline: 2px solid var(--c-border-strong);
  outline-offset: -2px;
}

/* Den åbne celle står som en "active" Nav_BTN, mens menuen er fremme. */
.top-sprog[open] > summary {
  background: var(--c-bg-subtle);
}

/*
 * Menuen står LIGE under EN-cellen, i dens fulde bredde (170px), så sprogene
 * står centreret under det aktuelle. Venstre kant på cellens venstre streg.
 */
.top-sprog ul {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-block-start: 0;
}

/* Punkterne er Nav_BTN'er i lille udgave: samme skrift og samme hover. */
.top-sprog a {
  display: block;
  padding-block: 14px;
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.28px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}

.top-sprog a:hover,
.top-sprog a:focus-visible {
  background: var(--c-bg-subtle);
  outline: none;
}

/*
 * Båndet fylder resten. `overflow: clip` frem for hidden: hidden på en
 * flex-vare kan skabe en scroll-kontekst, der stjæler tastaturfokus.
 */
.top-baand {
  flex: 1;
  min-inline-size: 0;
  overflow: clip;
  border-inline-start: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-style: italic;
  font-size: 34px;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}

.top-baand:hover,
.top-baand[aria-current="page"] { background: var(--c-bg-subtle) }

.top-baand[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--c-bg-focus) }

.top-baand > span {
  padding-inline-start: var(--s-600);
  animation: baand 30s linear infinite;
}

@keyframes baand {
  from { transform: translateX(0) }
  to { transform: translateX(-50%) }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

/*
 * HERO-komponenten, node 235:1449 i `Csomp1lrZoKKk9ir8ADzus`. Hentet med
 * Figmas eget MCP, ikke aflæst af et skærmbillede — tallene nedenfor er
 * komponentens egne.
 *
 * TRE spalter i en ramme på 1728px, med 160px luft i begge sider:
 *
 *     160 | tekst 517 | 49 | telefon 402 | 49 | billede 391 | 160
 *
 * Telefonen ligger øverst (`align-items: start` uden topluft); de to andre
 * spalter har 64px top, så de starter lavere. Det er bevidst i designet.
 *
 * `--d` er ÉN designpixel. Rammen er en container, `--d` er en 1728-del af
 * den, og så kan designets tal stå i koden, som de står i Figma:
 * `calc(140 * var(--d))` er de 140px, overskriften er sat i. Det gør det
 * muligt at slå et tal op i komponenten og genfinde det her — og hele
 * hero'en skalerer med vinduet uden en eneste mediaquery.
 *
 * Over 1728px vokser den ikke: containeren er låst dér, så `--d` bliver 1px
 * og designet står i sin egen størrelse.
 */
.hero {
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: 1728px;
  margin-inline: auto;
  --d: calc(100cqw / 1728);

  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(49 * var(--d));
  /*
   * INGEN sidepadding her, og det er ikke en forglemmelse.
   *
   * `container-type: inline-size` måler CONTENT-boxen. Lægger man en padding
   * i `--d` på den container, `--d` selv kommer fra, bider beregningen sig
   * selv i halen: browseren fandt ligevægten ved 0,81 i stedet for 1, og
   * hele hero'en stod 19 % for lille ved designets egen bredde.
   *
   * Luften på 160px i hver side ER bare den centrerede rest:
   * 1728 − (517 + 49 + 402 + 49 + 391) = 320 = 2 × 160. `justify-content`
   * giver den af sig selv, uden at røre `--d`.
   */
  padding-block: calc(69 * var(--d)) calc(120 * var(--d));
}

/* ---- Spalte 1: teksten (517px) ---- */

.hero-tekst {
  inline-size: calc(517 * var(--d));
  flex: none;
  padding-block-start: calc(64 * var(--d));
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--d));
}

/*
 * Overskriften: 140px sats, 120px linjeafstand. Forholdet er 0,857 — en
 * stram display-sats, hvor linjerne næsten rører hinanden.
 *
 * INGEN `text-wrap: balance`. Overskriftens linjeskift er sat i
 * CKEditor-feltet af den, der skrev den — "One video / – Every / channel".
 * Balance ville omfordele dem og ødelægge en bevidst sats.
 */
.hero h1 {
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(140 * var(--d));
  line-height: calc(120 * var(--d));
  color: var(--c-text);
  margin: 0 0 calc(35 * var(--d));

  /*
   * Overskriften RAGER UD over sin spalte, og det er komponentens egen
   * opførsel: tekstblokken hugger sit indhold med spaltebredden som minimum
   * (Figma: `w-[min-content]` + `min-w-full`). "One video" måler 568px ved
   * 140px og kan ikke være i de 517 — i 1:1-renderingen går overskriften da
   * også ud til 596px.
   *
   * Uden de to linjer brydes den i FIRE linjer i stedet for tre, og det var
   * den første ting, der sprang i øjnene mod komponenten.
   */
  inline-size: max-content;
  min-inline-size: 100%;
  max-inline-size: none;
}

.hero h1 em {
  font-style: italic;
}

/*
 * Brødteksten og linket er RYKKET IND under overskriften — 64px i
 * komponenten. Det er ikke en fejl i designet; indrykket er det, der binder
 * de to til overskriften frem for til sidens kant.
 */
.hero-tekst > p {
  font-family: Inter, system-ui, sans-serif;
  font-size: calc(20 * var(--d));
  line-height: calc(28 * var(--d));
  color: var(--c-text-sub);
  inline-size: calc(348 * var(--d));
  margin: 0;
  padding: calc(10 * var(--d)) calc(10 * var(--d)) calc(10 * var(--d)) calc(64 * var(--d));
}

.hero-link {
  align-self: flex-start;
  margin-inline-start: calc(64 * var(--d));
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--d));
  font-family: Inter, system-ui, sans-serif;
  font-size: calc(24 * var(--d));
  line-height: calc(24 * var(--d));
  color: var(--c-text-sub);
  text-decoration: underline;
  text-underline-position: from-font;
}

.hero-link img {
  inline-size: calc(32 * var(--d));
  block-size: calc(32 * var(--d));
  flex: none;
}

.hero-link:hover {
  color: var(--c-border-strong);
}

/* ---- Spalte 3: billedet (391px) ---- */

/*
 * Billedspalten er en SPALTE, ikke et billede bag telefonen. Det var min
 * misforståelse tidligere, og den flyttede både billedet og kortet.
 *
 * `overflow: visible` er nødvendig: kortet stikker ud over spaltens højre
 * kant med vilje (170 + 297 = 467 mod spaltens 391).
 */
.hero-billedspalte {
  inline-size: calc(391 * var(--d));
  flex: none;
  padding-block-start: calc(64 * var(--d));
  position: relative;
}

.hero-billede {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: calc(549 * var(--d));
  object-fit: cover;
  border-radius: calc(24 * var(--d));
}

/*
 * "AI Generated"-mærket i billedets nederste venstre hjørne.
 *
 * Det står FAST i komponenten. Skiftes billedet ud med et fotografi, lyver
 * mærket — så skal det væk her eller gøres til et felt.
 */
/*
 * "AI Generated" — mærket på et AI-genereret billede (feltet aiGenereret i
 * Assets). Sidder nederst til venstre i nærmeste forælder med position.
 */
.ai-maerke {
  position: absolute;
  inset-inline-start: calc(10 * var(--d));
  inset-block-end: calc(12 * var(--d));
  display: grid;
  place-items: center;
  inline-size: calc(29 * var(--d));
  block-size: calc(29 * var(--d));
  background: var(--c-bg-subtle);
  border-radius: var(--r-full);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: calc(12 * var(--d));
  line-height: calc(12 * var(--d));
  color: #000;
}

/* ---- Startkortet: glas oven på billedet ---- */

/*
 * Kortet er GENNEMSIGTIGT med en sløret baggrund — `backdrop-filter`, ikke
 * en lys flade. Det er derfor, billedets farver kan anes igennem det i
 * designet. Uden sløringen bliver kortet en hvid kasse, og hele pointen med
 * at lægge det oven på billedet forsvinder.
 */
.startkort {
  position: absolute;
  z-index: 3;
  inset-inline-start: calc(170 * var(--d));
  inset-block-start: calc(479 * var(--d));
  inline-size: calc(297 * var(--d));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--d));
  padding: calc(32 * var(--d));
  border: 1px solid var(--c-border-light);
  border-radius: calc(24 * var(--d));
  background: rgb(233 237 233 / 0.1);
  -webkit-backdrop-filter: blur(calc(17 * var(--d)));
  backdrop-filter: blur(calc(17 * var(--d)));
  overflow: clip;
}

/* Safari før 18 og ældre Firefox kender ikke backdrop-filter. Dér ville
   kortet stå som et hul i billedet, så de får en lys flade i stedet. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .startkort {
    background: rgb(233 237 233 / 0.82);
  }
}

.startkort p {
  margin: 0;
  inline-size: 100%;
  text-align: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: calc(34 * var(--d));
  line-height: calc(34 * var(--d));
  color: var(--c-text);
}

/* Kortet er smalt (233 indvendigt): pillen må vokse ved hover uden at
   klemme teksten, så mellemrummet giver efter i stedet. */
.startkort .cta {
  inline-size: 100%;
  justify-content: flex-end;
  gap: calc(14 * var(--d));
}

/*
 * Under 1200px holder skaleringen op med at give mening: `--d` ville være
 * 0,69, og brødteksten 13,9px. Designet er tegnet til en bred skærm, og
 * under den bliver de tre spalter til én.
 *
 * Her er `--d` bundet til 1px, og målene er skrevet om til noget, der kan
 * læses på en telefon. Det er ikke komponenten længere — komponenten findes
 * ikke i den bredde.
 */
@media (max-width: 1200px) {
  .hero {
    --d: 1px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1000);
    padding: var(--s-1000) var(--s-600) var(--s-2000);
  }

  .hero-tekst,
  .hero-billedspalte {
    inline-size: 100%;
    padding-block-start: 0;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 11vw, 140px);
    line-height: 0.92;
    margin-block-end: var(--s-600);
  }

  .hero-tekst > p {
    inline-size: auto;
    max-inline-size: 34rem;
    font-size: 17px;
    line-height: 1.6;
    padding: 0;
  }

  .hero-link {
    margin-inline-start: 0;
    font-size: 17px;
    gap: var(--s-300);
  }

  .hero-link img {
    inline-size: 24px;
    block-size: 24px;
  }

  /* Kortet kan ikke stikke ud over en spalte, der fylder hele bredden. */
  .startkort {
    position: static;
    inline-size: 100%;
    margin-block-start: var(--s-600);
  }

  .startkort p { font-size: 28px; line-height: 1.1 }
  .startkort .cta { --d: 0.82px }
}

/* Den lille byline nederst i heroen — designets egen. */
.hero-byline {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--s-600) var(--s-2000);
  font-size: 10px;
  color: var(--c-text-sub);
}

/* ------------------------------------------------------------------ */
/* Forløbet: telefonen står fast, kortene glider ind                   */
/* ------------------------------------------------------------------ */

/*
 * Forsiden, Figma 254:198. Heroen og kortene er ÉT afsnit, fordi telefonen
 * hører til begge: den starter i heroens midterspalte, står midt på skærmen,
 * mens kortene scroller forbi på begge sider, og slipper først efter det
 * sidste kort.
 *
 * Afsnittet fylder hele bredden (gradienten skal ud til kanterne), men
 * indholdet er tegnet i en ramme på 1728px. `--d` er derfor en designpixel,
 * der aldrig bliver større end 1px — over 1728px står designet i sin egen
 * størrelse, centreret.
 */
.fortaelling {
  container-type: inline-size;
  --d: min(1px, calc(100cqw / 1728));
  /*
   * Telefonens egen skala. Den følger `--d` (bredden), men må aldrig blive
   * højere, end skærmen kan rumme under den lave topbar (80px) med luft
   * over og under. På en lav skærm bliver telefonen altså lidt mindre i
   * stedet for at blive klippet af skærmens bund.
   */
  --tlf-luft: 40px;
  --dt: min(var(--d), calc((100svh - 80px - 2 * var(--tlf-luft)) / 874));
  position: relative;
}

/* Heroens midterspalte: en tom plads i telefonens størrelse. */
.telefon-plads {
  flex: none;
  inline-size: calc(402 * var(--d));
  aspect-ratio: var(--spiller-forhold);
}

/*
 * Sporet. I designet står telefonen ved x = 726 i rammen på 1728; centreret
 * i et afsnit, der kan være bredere, er det 50 % − 138 designpixel. Det går
 * fra heroens top (dens 69px luft) til afsnittets bund.
 */
.telefon-spor {
  position: absolute;
  inset-block: calc(69 * var(--d)) 0;
  inset-inline-start: calc(50% - 138 * var(--d));
  inline-size: calc(402 * var(--d));
  z-index: 2;
  pointer-events: none;
}

/* Stregen: telefonens vej. Den starter under prikken og løber til bunden. */
.telefon-spor::before {
  content: '';
  position: absolute;
  inset-block: calc(874 * var(--dt) + (39 + 40) * var(--d)) 0;
  inset-inline-start: 50%;
  inline-size: 1px;
  background: #c2d5d3;
}

/* Prikken under telefonen (40px, pil ned) — den første ting, telefonen
   kører hen over, når man begynder at scrolle. */
.spor-prik {
  position: absolute;
  inset-block-start: calc(874 * var(--dt) + 39 * var(--d));
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-full);
  background: #c1d5d3;
  display: grid;
  place-items: center;
}

/*
 * Telefonen står fast midt på skærmen — under den lave topbar (80px). Den
 * er aldrig højere end skærmen minus luften (`--dt`), så midten betyder
 * altid mindst `--tlf-luft` over og under.
 */
.telefon-holder {
  position: sticky;
  inset-block-start: calc(80px + (100svh - 80px - 874 * var(--dt)) / 2);
  z-index: 1;
  pointer-events: auto;
}

/*
 * Kortene. To spalter à 400px ved x = 295 og x = 1169 i rammen — omkring
 * telefonen, der står ved 726–1128. Spalterne er centreret og skubbet 68px
 * mod højre (designet er ikke symmetrisk om sidens midte, men om telefonen).
 *
 * Venstre spalte starter lavere, så kortene står forskudt som i designet.
 * Gradienten (#f0f2f0 → #d0ded0) ligger bag hele forløbet.
 */
.forloeb {
  display: grid;
  grid-template-columns: repeat(2, calc(400 * var(--d)));
  column-gap: calc(474 * var(--d));
  justify-content: center;
  align-items: start;
  padding-inline-start: calc(136 * var(--d));
  padding-block: calc(345 * var(--d)) calc(260 * var(--d));
  position: relative;
  isolation: isolate;
}

/*
 * Gradienten går HELE bredden, også over 1728px, selv om siden ligger i en
 * `.wrap` på 1728. Den sidder derfor på et lag, der er skærmbredt og
 * centreret om forløbet. `html` har `overflow-x: clip`, så laget ikke giver
 * en vandret scrollbar.
 */
.forloeb::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 100vw;
  translate: -50% 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--c-bg) calc(191 * var(--d)), #d0ded0 100%);
}

.forloeb-kolonne {
  display: flex;
  flex-direction: column;
  gap: calc(200 * var(--d));
}

.forloeb-kolonne--venstre {
  padding-block-start: calc(329 * var(--d));
}

/* ---- Kortet (Figma CARD, 259:829 / 259:848 / 259:866) ---- */

.fk {
  --fk-luft: calc(40 * var(--d));
  position: relative;
  border-radius: var(--r-xlg);
  filter: drop-shadow(0 14px 26.5px rgb(0 0 0 / 0.25));
}

.fk-top {
  padding: calc(52 * var(--d)) var(--fk-luft);
  border-radius: inherit;
}

.fk--lys .fk-top {
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border-light);
  color: var(--c-text);
}

.fk--moerk .fk-top {
  background: linear-gradient(to bottom, #274344, #08282b);
  color: #f7f8f7;
}

/* Delt: lys top med lys kant (ikke i bunden — dér tager den mørke del
   over), mørk bund med listen. */
.fk--delt .fk-top {
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border-light);
  border-block-end: 0;
  color: var(--c-text);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  padding-block-end: calc(16 * var(--d));
}

.fk-bund {
  background: linear-gradient(to bottom, #274344, #08282b);
  color: #f7f8f7;
  padding: calc(32 * var(--d)) var(--fk-luft) calc(52 * var(--d));
  border-end-start-radius: var(--r-xlg);
  border-end-end-radius: var(--r-xlg);
}

.fk-hoved {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-block-end: calc(16 * var(--d));
}

.fk-nr {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 900; /* Inter Black, som i komponenten */
  font-size: max(11px, calc(12 * var(--d)));
  line-height: 1;
}

/* Det lyse korts nummer har kortets mørke gradient som farve. */
.fk--lys .fk-nr {
  background: linear-gradient(to bottom, #274344, #08282b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fk-maerke {
  inline-size: calc(35 * var(--d));
  block-size: auto;
}

.fk h2 {
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(48 * var(--d));
  line-height: 1;
  margin: 0 0 calc(16 * var(--d));
}

.fk p {
  font-family: Inter, system-ui, sans-serif;
  font-size: max(13px, calc(16 * var(--d)));
  line-height: 1.5;
  margin: 0 0 calc(24 * var(--d));
}

.fk-billede-ramme {
  position: relative;
  margin-block-start: calc(8 * var(--d));
}

.fk-billede {
  display: block;
  inline-size: 100%;
  aspect-ratio: 465 / 397;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.fk-bund ul {
  /* Fyldte prikker (list-disc), også når kortet står i en liste — ellers
     giver browseren en indlejret liste hule cirkler. */
  list-style: disc;
  margin: 0 0 calc(24 * var(--d));
  padding-inline-start: calc(24 * var(--d));
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: max(13px, calc(16 * var(--d)));
  line-height: 1.25;
}

.fk-bund li + li {
  margin-block-start: calc(12 * var(--d));
}

.fk-pille {
  display: inline-block;
  background: #ecff00;
  color: var(--c-text);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--r-full);
}

/*
 * Bevægelsen. Kortet glider ind fra SIN side af telefonen — venstre kort fra
 * venstre, højre fra højre — toner frem og retter sig op fra en lille skævhed,
 * og står stille, når det er godt inde i billedet.
 *
 * Bundet til SCROLLEN, ikke til tiden: scroller man langsomt, kommer kortet
 * langsomt; ruller man tilbage, går det tilbage. Det er `animation-timeline:
 * view()` — kortets egen vej gennem skærmen er animationens tidslinje.
 *
 * Browsere uden scroll-drevne animationer får en enklere udgave fra
 * forloeb.js (en overgang, når kortet kommer til syne).
 */
.fk--venstre { --fk-x: calc(-160 * var(--d)); --fk-r: -6deg; }
.fk--hoejre  { --fk-x: calc(160 * var(--d));  --fk-r: 6deg; }

@keyframes fk-ind {
  from {
    opacity: 0;
    transform: translate3d(var(--fk-x), calc(140 * var(--d)), 0) rotate(var(--fk-r)) scale(0.86);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .forloeb .fk {
      animation: fk-ind linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
  }

  .forloeb-js .forloeb .fk {
    opacity: 0;
    transform: translate3d(var(--fk-x), calc(100 * var(--d)), 0) rotate(var(--fk-r)) scale(0.9);
    transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .forloeb-js .forloeb .fk.fk-synlig {
    opacity: 1;
    transform: none;
  }
}

/*
 * Under 1200px er der ikke plads til tre spalter. Telefonen står i flowet
 * efter heroen, og kortene stables i deres egen rækkefølge (nummeret), ikke
 * spalte for spalte.
 */
@media (max-width: 1200px) {
  .fortaelling { --d: 1px; }
  .telefon-plads,
  .spor-prik,
  .telefon-spor::before { display: none; }

  .telefon-spor {
    position: static;
    inline-size: auto;
    padding: 0 var(--s-600) var(--s-1000);
  }

  .telefon-holder { position: static; }

  .forloeb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1000);
    padding: var(--s-1000) var(--s-600) var(--s-2000);
  }

  .forloeb-kolonne { display: contents; }
  .fk { inline-size: min(100%, 28rem); order: var(--nr); }
}

/* ------------------------------------------------------------------ */
/* Hovedknappen (Figma MainCtaBtnGreen, 483:3736)                     */
/* ------------------------------------------------------------------ */

/*
 * Tre stadier, og knappen GLIDER imellem dem i stedet for at skifte:
 *
 *   hvile   cirkel 50 × 50 (#4b5d5e) med Moooce-mærket drejet 90° og
 *           forstørret, så kun midten ses — en gul skive med et hul
 *   hover   cirklen strækkes til en pille på 81 (#104f55), mærket drejer
 *           på plads i sin egen størrelse (61 × 26), og knappen bliver en
 *           tone mørkere
 *   tryk    som hover, men pillen er #274344
 *
 * Mærket er en inline SVG i `currentColor` (_partials/_maerke.twig), så
 * farven sættes her. Pillen har `overflow: hidden` — det er den, der
 * beskærer det forstørrede mærke i hvile.
 *
 * Målene er designets pixels gange `--d`, så knappen skalerer med siden,
 * hvor den står i et afsnit, der sætter `--d`. Andre steder er den 1:1.
 */
.cta {
  --cta-d: var(--d, 1px);
  --cta-bund: var(--c-racing-green);
  --cta-bund-hover: var(--c-racing-green-600);
  --cta-pil: var(--c-racing-green-200);
  --cta-pil-hover: #104f55;   /* button-primary-background */
  --cta-pil-tryk: #274344;    /* graphis/color/primary */
  --cta-maerke: #ecff00;      /* Signal */
  --cta-farve: var(--c-white);
  --cta-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: inline-flex;
  align-items: center;
  gap: calc(22 * var(--cta-d));
  padding: calc(4 * var(--cta-d)) calc(4 * var(--cta-d)) calc(4 * var(--cta-d)) calc(20 * var(--cta-d));
  border-radius: calc(60 * var(--cta-d));
  background: var(--cta-bund);
  color: var(--cta-farve);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(22 * var(--cta-d));
  line-height: calc(38 * var(--cta-d));
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.35s var(--cta-ease);
  -webkit-tap-highlight-color: transparent;
}

/*
 * Teksten brydes ALDRIG på en bred skærm — heller ikke når pillen vokser
 * ved hover og klemmer den (det gjorde heroens "Get started" til to linjer).
 * Kun på en smal skærm må en lang tekst ("Get it on the Shopify App Store")
 * bryde i stedet for at skubbe siden ud til siden.
 */
.cta { max-inline-size: 100% }
.cta-tekst { flex: none }

@media (max-width: 600px) {
  .cta { --cta-d: 0.85px; line-height: 1.35 }
  .cta-tekst { flex: 0 1 auto; min-inline-size: 0; white-space: normal }
}

.cta--signal {
  --cta-bund: var(--c-signal);
  --cta-bund-hover: var(--c-signal-600);
  --cta-pil: var(--c-white);
  --cta-pil-hover: var(--c-white);
  --cta-pil-tryk: var(--c-bg-subtle);
  --cta-maerke: var(--c-racing-green-600);
  --cta-farve: var(--c-racing-green-600);
}

.cta-pil {
  flex: none;
  /* Flex, ikke grid: et gitterspor vokser til mærkets 61 og lægger
     overløbet i højre side; flex centrerer, også når indholdet er bredere
     end cirklen. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  inline-size: calc(50 * var(--cta-d));
  block-size: calc(50 * var(--cta-d));
  border-radius: calc(80 * var(--cta-d));
  background: var(--cta-pil);
  transition:
    inline-size 0.45s var(--cta-ease),
    background-color 0.35s var(--cta-ease);
}

/*
 * Mærket (Figma: Moooce-bomærket i Signal-gul). I hvile er det drejet 90°
 * og forstørret til 118 høj i en cirkel på 50 — kun midten ses. Ved hover
 * drejer det på plads i sin egen størrelse, 61 × 26.
 */
.cta-maerke {
  display: block;
  flex: none;
  inline-size: calc(61 * var(--cta-d));
  block-size: auto;
  color: var(--cta-maerke);
  rotate: 90deg;
  scale: 1.934;
  transition:
    rotate 0.5s var(--cta-ease),
    scale 0.5s var(--cta-ease);
}

/* Hover — og tastaturets fokus, som skal kunne se det samme. */
.cta:hover,
.cta:focus-visible,
.cta:active { background: var(--cta-bund-hover) }

.cta:hover .cta-pil,
.cta:focus-visible .cta-pil,
.cta:active .cta-pil {
  inline-size: calc(81 * var(--cta-d));
  background: var(--cta-pil-hover);
}

.cta:active .cta-pil { background: var(--cta-pil-tryk) }

.cta:hover .cta-maerke,
.cta:focus-visible .cta-maerke,
.cta:active .cta-maerke {
  rotate: 0deg;
  scale: 1;
}

.cta:focus-visible {
  outline: 2px solid var(--c-border-strong);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta-pil,
  .cta-maerke { transition: none }
}

/* ------------------------------------------------------------------ */
/* Platformskortene (Figma Techcard, 334:2525)                         */
/* ------------------------------------------------------------------ */

/*
 * Alle kort har den samme flade — Techcard-komponentens "active" (#e9ede9).
 * Tidligere var en platform, der kom, rosa; det er droppet i designet.
 */
.pk {
  --pk-d: var(--d, 1px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(32 * var(--pk-d));
  padding: calc(52 * var(--pk-d)) calc(40 * var(--pk-d));
  border-radius: var(--r-xlg);
  background: var(--c-bg-subtle);
  filter: drop-shadow(0 14px 26.5px rgb(0 0 0 / 0.25));
}

.pk-maerke {
  inline-size: calc(35 * var(--pk-d));
  block-size: auto;
  margin-block-end: calc(-8 * var(--pk-d)); /* designets 24 til rækken, ikke 32 */
}

.pk-raekke {
  display: flex;
  align-items: flex-start;
  gap: calc(64 * var(--pk-d));
  inline-size: 100%;
}

/* Logoerne har hver sin størrelse i designet (192, 184, 180 bredt) — de
   er lagt op i netop den størrelse, så bredden kommer fra filen. */
.pk-logo {
  flex: none;
  inline-size: calc(var(--w, 190) * var(--pk-d));
  block-size: auto;
}

.pk-raekke p {
  flex: 1 1 0;
  min-inline-size: 0;
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: calc(17 * var(--pk-d));
  line-height: calc(26 * var(--pk-d));
  color: var(--c-text);
}

/* ------------------------------------------------------------------ */
/* Forsidens slutning: platformene og den store overskrift             */
/* ------------------------------------------------------------------ */

/*
 * Forløbets gradient (#f0f2f0 → #d0ded0) slutter 102px inde i kortene,
 * præcis som designets gradientflade gør — derfor et skarpt skift på et
 * skærmbredt lag bag rækken, ikke en ny gradient.
 */
.slut {
  container-type: inline-size;
  --d: min(1px, calc(100cqw / 1728));
  --slut-luft: calc(80 * var(--d)); /* telefonen slutter ved forløbets bund */
  position: relative;
  isolation: isolate;
  padding-block-start: var(--slut-luft);
}

.slut::before {
  content: '';
  position: absolute;
  inset-block: 0 auto;
  block-size: calc(var(--slut-luft) + 102 * var(--d));
  inset-inline-start: 50%;
  inline-size: 100vw;
  translate: -50% 0;
  z-index: -1;
  background: #d0ded0;
}

/*
 * Rækken går fra x = 173 og ud over sidens højre kant: tre kort à 687 er
 * bredere end designets 1728, og det sidste stikker ud og viser, at der er
 * mere. Rækken er skærmbred (ud af `.wrap`) og ruller vandret med snap.
 * Lodret luft (padding + negativ margin), så skyggen ikke klippes af
 * rullefeltet.
 */
.slut-platforme {
  display: flex;
  gap: calc(64 * var(--d));
  margin-inline: calc(50% - 50vw);
  padding: 40px calc(50vw - 50% + 173 * var(--d)) 90px;
  margin-block: -40px -90px;
  scroll-padding-inline: calc(50vw - 50% + 173 * var(--d));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.slut-platforme::-webkit-scrollbar { display: none }

.slut-platforme .pk {
  flex: none;
  inline-size: calc(687 * var(--d));
  scroll-snap-align: start;
}

/* Overskriften og knappen under den (Figma 334:2655): 40 imellem. */
.slut-afslutning {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(40 * var(--d));
  margin: calc(156 * var(--d)) 0 0 calc(405 * var(--d));
  /* 233 fra knappen til footerens streg; footeren selv står for de 80. */
  padding-block-end: calc(153 * var(--d));
  max-inline-size: calc(932 * var(--d));
}

.slut-overskrift {
  margin: 0;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(140 * var(--d));
  line-height: calc(120 * var(--d));
  color: var(--c-text);
}

.slut-overskrift i,
.slut-overskrift em { font-style: italic }

@media (max-width: 1200px) {
  .slut { --d: 1px; --slut-luft: 0px }

  .slut-platforme {
    padding-inline: var(--s-600);
    scroll-padding-inline: var(--s-600);
  }

  .slut-platforme .pk { inline-size: min(687px, 86vw) }

  .slut-afslutning {
    margin: var(--s-2000) var(--s-600) 0;
    padding-block-end: 0;
    max-inline-size: none;
  }

  .slut-overskrift {
    font-size: clamp(56px, 11vw, 140px);
    line-height: 0.86;
  }
}

@media (max-width: 700px) {
  .pk-raekke {
    flex-direction: column;
    gap: var(--s-500);
  }
}

/* ------------------------------------------------------------------ */
/* Platformsiderne (Figma TECH_page, 424:2791)                         */
/* ------------------------------------------------------------------ */

/*
 * Målene er designets pixels gange `--d`, som på forsiden. Kolonnerne i
 * rammen på 1728: overskriften fra x = 160 (826 bred), introen fra x = 1030
 * (538), kortene fra 40 til 1688, telefonen fra 160, teksten fra 736 (821),
 * spørgsmålene fra 456 (824) og slutoverskriften fra 310.
 *
 * Typografien er designsystemets: H1 140/120, H2 68/76, H3 48/48,
 * Tease 20/28, Paragraph 16/24.
 */
.pl {
  container-type: inline-size;
  --d: min(1px, calc(100cqw / 1728));
  --dt: var(--d); /* telefonen: ingen sticky her, så den må have sin fulde størrelse */
  color: var(--c-text);
}

.pl-hero {
  display: grid;
  grid-template-columns: calc(826 * var(--d)) calc(538 * var(--d));
  column-gap: calc(44 * var(--d));
  padding: calc(122 * var(--d)) 0 0 calc(160 * var(--d));
}

.pl-logo {
  display: block;
  inline-size: calc(var(--w, 192) * var(--d));
  block-size: auto;
  margin: 0 0 calc(28 * var(--d)) calc(1 * var(--d));
}

/* H1 medium (120/120), ikke forsidens 140 — "en anelse mindre". */
.pl-hero h1 {
  margin: 0;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(120 * var(--d));
  line-height: calc(120 * var(--d));
}

.pl-hero h1 i,
.pl-hero h1 em { font-style: italic }

.pl-hero-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(40 * var(--d));
  padding-block-start: calc(173 * var(--d));
}

.pl-hero-tekst p {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: max(17px, calc(20 * var(--d)));
  line-height: 1.4;
  color: var(--c-text-sub);
}

/* Trinene: forsidens kort, tre på række næsten kant til kant. */
.pl-trin {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(32 * var(--d));
  align-items: start;
  margin: calc(105 * var(--d)) 0 0;
  padding: 0 calc(40 * var(--d)); /* designet siger 16; 40 giver kortene luft fra kanten */
}

/* Telefonen og brødteksten side om side. */
.pl-indhold {
  display: grid;
  grid-template-columns: calc(402 * var(--d)) calc(821 * var(--d));
  column-gap: calc(174 * var(--d));
  align-items: start;
  margin-block-start: calc(150 * var(--d));
  padding-inline-start: calc(160 * var(--d));
}

.pl-tekst {
  padding-block-start: calc(86 * var(--d));
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.pl-tekst h2 {
  margin: calc(32 * var(--d)) 0 16px;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(48 * var(--d));
  line-height: 1;
}

/* Det første afsnit er sidens hovedpointe og står i H2 (68/76). */
.pl-tekst h2:first-child {
  margin-block-start: 0;
  font-size: calc(68 * var(--d));
  line-height: calc(76 * var(--d));
}

.pl-tekst p { margin: 0 }
.pl-tekst a { color: inherit; text-decoration: underline; text-underline-position: from-font }

/* Tilmelding og spørgsmål: en smal spalte fra x = 456. */
.pl-smal {
  inline-size: calc(824 * var(--d));
  margin-inline-start: calc(456 * var(--d));
  font-family: Inter, system-ui, sans-serif;
}


.pl-faq { margin-block-start: calc(203 * var(--d)) }

.pl-faq > h2 {
  margin: 0 0 calc(55 * var(--d));
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(68 * var(--d));
  line-height: calc(76 * var(--d));
  color: var(--c-text);
}

/* ---- FAQ (Figma FAQ, 425:3120) ---- */

/*
 * Én samlet blok: den lyse flade, en lys kant mellem rækkerne og runde
 * hjørner kun øverst og nederst. Spørgsmålet i Inter Bold 20/28, svaret i
 * Inter 20/28; pilen vender, når rækken er åben. Bevægelsen er faq.js'.
 */
.faq {
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg);
  background: var(--c-bg-subtle);
  overflow: hidden;
}

.faq-punkt + .faq-punkt { border-block-start: 1px solid var(--c-border-light) }

.faq-punkt summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  font-weight: 700;
  font-size: max(17px, calc(20 * var(--d)));
  line-height: 1.4;
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}

.faq-punkt summary::-webkit-details-marker { display: none }

.faq-punkt summary:focus-visible {
  outline: 2px solid var(--c-border-strong);
  outline-offset: -2px;
}

.faq-pil {
  flex: none;
  transition: rotate 0.45s cubic-bezier(0.45, 0, 0.55, 1);
}

.faq-punkt[open]:not(.lukker) .faq-pil { rotate: 180deg }

.faq-svar p {
  max-inline-size: calc(649 * var(--d));
  margin: 0;
  padding: calc(16 * var(--d)) 24px calc(32 * var(--d) + 16px);
  font-size: max(17px, calc(20 * var(--d)));
  line-height: 1.4;
  color: #000;
}

@media (prefers-reduced-motion: reduce) {
  .faq-pil { transition: none }
}

/* ---- Slutningen og de andre platforme ---- */

.pl-slut {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(40 * var(--d));
  margin: calc(146 * var(--d)) 0 0 calc(310 * var(--d));
  max-inline-size: calc(1114 * var(--d));
}

.pl--ikke-klar .pl-slut { margin-block-start: calc(210 * var(--d)) }

.pl-slut h2 {
  margin: 0;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(140 * var(--d));
  line-height: calc(120 * var(--d));
}

.pl-slut h2 i,
.pl-slut h2 em { font-style: italic }

.pl-platforme {
  margin-block-start: calc(200 * var(--d) - 40px);
  padding-inline-start: calc(50vw - 50% + 160 * var(--d));
}

@media (max-width: 1200px) {
  .pl { --d: 1px }

  .pl-hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-600);
    padding: var(--s-1000) var(--s-600) 0;
  }

  .pl-hero h1 { font-size: clamp(52px, 10vw, 104px); line-height: 1 }
  .pl-hero-tekst { padding: 0 }

  .pl-trin {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 34rem;
    margin: var(--s-2000) auto 0;
    padding: 0 var(--s-600);
    gap: var(--s-1000);
  }

  .pl-indhold {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-1000);
    margin-block-start: var(--s-2000);
    padding: 0 var(--s-600);
  }

  .pl-telefon .telefon { inline-size: min(100%, var(--spiller-maks-bredde)) }
  .pl-tekst { padding: 0 }
  .pl-tekst h2 { font-size: 36px }
  .pl-tekst h2:first-child { font-size: 48px; line-height: 1.05 }

  .pl-smal { inline-size: auto; margin-inline: var(--s-600) }

  .pl-tilmeld {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-1000);
    margin-block-start: var(--s-2000);
    padding: 0 var(--s-600);
  }

  .pl-tilmeld-tekst { margin: 0; font-size: 32px }
  .tilmeld { inline-size: auto; padding: 40px 24px }
  .pl-faq { margin-block-start: var(--s-2000) }
  .pl-faq > h2 { font-size: 48px; line-height: 1.05 }

  .pl-slut { margin: var(--s-2000) var(--s-600) 0; max-inline-size: none }
  .pl-slut h2 { font-size: clamp(56px, 11vw, 120px); line-height: 0.86 }

  .pl-platforme { padding-inline-start: var(--s-600) }
}

/* ------------------------------------------------------------------ */
/* Why Moooce (Figma Why_moooce, 426:3459)                             */
/* ------------------------------------------------------------------ */

/*
 * Rammen på 1728: heroens tekst fra x = 160 (832 bred), billedet fra 1024
 * (544 × 724). Blokkene: billede 544 og tekst 687 med 172 imellem, fra
 * x = 164 — og spejlvendt, når billedet står til højre. Udsagnet står fra
 * x = 451 (832). Typografi: H1 medium 120/120, Manchet 28/32, H2 68/76,
 * H3 48/48, Paragraph 16/24.
 */
.why {
  container-type: inline-size;
  --d: min(1px, calc(100cqw / 1728));
  color: var(--c-text);
}

.why-hero {
  display: grid;
  grid-template-columns: calc(832 * var(--d)) calc(544 * var(--d));
  column-gap: calc(32 * var(--d));
  align-items: start;
  padding: calc(105 * var(--d)) 0 0 calc(160 * var(--d));
}

.why-hero h1 {
  margin: 0;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(120 * var(--d));
  line-height: 1;
}

.why-hero h1 i,
.why-hero h1 em,
.why-slut h2 i { font-style: italic }

.why-manchet,
.why-udsagn-tekst {
  font-family: Inter, system-ui, sans-serif;
  font-size: max(20px, calc(28 * var(--d)));
  line-height: 1.143;
}

.why-manchet {
  max-inline-size: calc(686 * var(--d));
  margin: calc(65 * var(--d)) 0 0;
}

.why-afsnit {
  max-inline-size: calc(687 * var(--d));
  margin: calc(32 * var(--d)) 0 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* Billedet — og den grå plads, til der er et. */
.why-billede {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 544 / 504;
}

.why-billede img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  scale: var(--billede-skala, 1);
}

/*
 * Hover: billedet zoomer langsomt ind i sin ramme. `scale`, ikke
 * `transform` — parallaksen nedenfor flytter billedet med `translate`, og de
 * to egenskaber lægges oven i hinanden i stedet for at overskrive hinanden.
 * Kun med en mus (et tryk på en telefon ville efterlade billedet zoomet).
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .why-billede img { transition: scale 1.1s cubic-bezier(0.22, 1, 0.36, 1) }
  .why-billede:hover img { scale: calc(var(--billede-skala, 1) * 1.06) }
}

.why-billede--hero { aspect-ratio: 544 / 724 }
.why-blok--lang .why-billede { aspect-ratio: 544 / 916 }
.why-billede--tom { background: #d9d9d9 }

/* Billede og tekst: billedet til venstre eller højre. */
.why-blok {
  display: grid;
  grid-template-columns: calc(544 * var(--d)) calc(687 * var(--d));
  column-gap: calc(172 * var(--d));
  align-items: start;
  margin-block-start: calc(162 * var(--d));
  padding-inline-start: calc(164 * var(--d));
}

.why-blok--hoejre { grid-template-columns: calc(687 * var(--d)) calc(544 * var(--d)) }
.why-blok--hoejre .why-billede { order: 2 }

.why-blok-tekst {
  padding-block-start: calc(30 * var(--d));
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.why-blok-tekst h2 {
  max-inline-size: calc(544 * var(--d));
  margin: 0 0 calc(40 * var(--d));
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(68 * var(--d));
  line-height: calc(76 * var(--d));
}

.why-blok-tekst h3 {
  max-inline-size: calc(400 * var(--d));
  margin: calc(56 * var(--d)) 0 calc(24 * var(--d));
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(48 * var(--d));
  line-height: 1;
}

.why-blok-tekst h3:first-child { margin-block-start: 0 }
.why-blok-tekst p { margin: 0 0 24px }
.why-blok-tekst p:last-child { margin-block-end: 0 }
.why-blok--lang .why-blok-tekst { padding-block-start: 0 }
.why-blok-tekst ul { margin: 0 0 24px; padding-inline-start: 1.25em; list-style: disc }
.why-blok-tekst ul:last-child { margin-block-end: 0 }
.why-blok-tekst li + li { margin-block-start: 8px }

/* Udsagnet: stort og centreret i sin spalte. */
.why-udsagn {
  inline-size: calc(832 * var(--d));
  margin: calc(166 * var(--d)) 0 0 calc(451 * var(--d));
}

.why-udsagn h2 {
  margin: 0 0 calc(58 * var(--d));
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(120 * var(--d));
  line-height: 1;
}

.why-udsagn-tekst p { margin: 0 0 1.143em }
.why-udsagn-tekst p:last-child { margin: 0 }

.why-udsagn + .why-blok { margin-block-start: calc(218 * var(--d)) }

.why-slut { margin-block-start: calc(200 * var(--d)) }

/* Videoblokken (Figma VIDEO, 430:3702): 1408 × 796 fra x = 160, klik for
   at afspille. Knappen er Moooce-gul med en mørk trekant. */
.why-video {
  inline-size: calc(1408 * var(--d));
  margin: calc(296 * var(--d)) 0 0 calc(160 * var(--d));
}

.video-fasade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #d9d9d9;
  overflow: hidden;
}

.video-fasade img,
.video-fasade iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  object-fit: cover;
}

.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--c-white);
  text-decoration: none;
  background: linear-gradient(to top, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0) 55%);
}

.video-play-ikon {
  display: grid;
  place-items: center;
  inline-size: max(72px, calc(112 * var(--d)));
  block-size: max(72px, calc(112 * var(--d)));
  border-radius: 50%;
  background: var(--c-signal);
  box-shadow: 0 14px 32px rgb(0 0 0 / 0.28);
  transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Trekanten, en anelse til højre for midten, så den ser centreret ud. */
.video-play-ikon::before {
  content: '';
  margin-inline-start: 12%;
  border-block: 0.6em solid transparent;
  border-inline-start: 1em solid var(--c-racing-green-600);
  font-size: max(22px, calc(32 * var(--d)));
}

.video-play-tekst {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.4);
}

.video-play:hover .video-play-ikon,
.video-play:focus-visible .video-play-ikon { scale: 1.08 }

.video-play:focus-visible { outline: 3px solid var(--c-signal); outline-offset: -3px }

.sr-kun {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.why-video + .why-slut { margin-block-start: calc(373 * var(--d)) }

@media (max-width: 1200px) {
  .why { --d: 1px }

  .why-hero,
  .why-blok,
  .why-blok--hoejre {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-1000);
    padding: 0 var(--s-600);
  }

  .why-hero { padding-block-start: var(--s-1000) }
  .why-hero h1 { font-size: clamp(52px, 10vw, 104px) }
  .why-manchet, .why-afsnit { max-inline-size: none }
  .why-blok { margin-block-start: var(--s-2000) }
  .why-blok--hoejre .why-billede { order: 0 }
  .why-blok-tekst { padding: 0 }
  .why-blok-tekst h2 { font-size: 44px; line-height: 1.05; max-inline-size: none }
  .why-blok-tekst h3 { font-size: 34px; max-inline-size: none }
  .why-blok--lang .why-billede { aspect-ratio: 544 / 504 }

  .why-udsagn { inline-size: auto; margin: var(--s-2000) var(--s-600) 0 }
  .why-video { inline-size: auto; margin: var(--s-2000) var(--s-600) 0 }
  .why-udsagn h2 { font-size: clamp(48px, 10vw, 96px) }
}

/* ------------------------------------------------------------------ */
/* Dokumentsider: juridisk og platform (Figma moooce_terms, 202:958)   */
/* ------------------------------------------------------------------ */

/*
 * To spalter i designets mål: overskriften fra x = 160 i en spalte på 576,
 * teksten fra x = 736 i 832. Venstre spalte bliver stående (sticky), mens
 * man læser — et dokument på flere skærmhøjder skal stadig kunne sige,
 * hvad det er.
 *
 * Brødteksten: Inter 16/24 i #031011 (tegningen siger 20/31, men
 * brødtekst er 16 overalt på sitet), overskrifter halvanden gang så store.
 * Designet har en tom linje før hver overskrift og ingen luft mellem
 * afsnit; vi giver afsnittene en halv linje, ellers flyder de sammen.
 */
.dok {
  container-type: inline-size;
  --d: min(1px, calc(100cqw / 1728));
  display: grid;
  grid-template-columns: calc(576 * var(--d)) calc(832 * var(--d));
  align-items: start;
  padding: calc(123 * var(--d)) 0 0 calc(160 * var(--d));
}

.dok-hoved {
  position: sticky;
  inset-block-start: calc(80px + 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(40 * var(--d));
  padding-inline-end: calc(40 * var(--d));
}

.dok-titel {
  margin: 0;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: calc(140 * var(--d));
  line-height: 0.857em; /* 120/140 — i em, så den følger med, når titel.js gør skriften mindre */
  color: var(--c-text);
}

.dok-titel i,
.dok-titel em { font-style: italic }

.dok-under {
  margin: calc(23 * var(--d)) 0 0 calc(13 * var(--d));
  max-inline-size: calc(387 * var(--d));
  font-family: Inter, system-ui, sans-serif;
  font-size: calc(20 * var(--d));
  line-height: calc(28 * var(--d));
  color: var(--c-text-sub);
}

.dok-logo {
  inline-size: calc(var(--w, 190) * var(--d));
  block-size: auto;
}

.dok-tekst {
  padding-block-start: calc(32 * var(--d));
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px; /* designsystemets paragraph: 16/24 — ikke tegningens 20 */
  line-height: 1.5;
  color: var(--c-ink);
}

.dok-tekst > :first-child { margin-block-start: 0 }

.dok-tekst p { margin: 0 0 0.5em }

.dok-tekst h2 {
  margin: 1.55em 0 0.25em;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.03;
}

.dok-tekst h3 {
  margin: 1.2em 0 0.15em;
  font-size: 1em;
  font-weight: 600;
}

.dok-tekst a { color: inherit; text-decoration: underline; text-underline-position: from-font }

.dok-tekst ul,
.dok-tekst ol { margin: 0 0 0.5em; padding-inline-start: 1.3em }

.dok-tekst code { font-size: 0.85em }

/* Tabellerne: fed overskriftsrække, hver anden række på den lyse flade. */
.dok-tekst figure.table { margin: 0.75em 0 1em; overflow-x: auto }

.dok-tekst table {
  inline-size: 100%;
  border-collapse: collapse;
}

.dok-tekst th,
.dok-tekst td {
  padding: 0.35em 30px 0.35em 4px;
  text-align: start;
  vertical-align: top;
}

.dok-tekst th { font-weight: 700 }

.dok-tekst tr:nth-child(even) td { background: var(--c-bg-subtle) }

/* ---- Platformsiderne ---- */

.dok-intro {
  font-size: 1.3em;
  line-height: 1.4;
  color: var(--c-text);
}

/* De tre trin: kort på den lyse flade, nummereret som forsidens kort. */
.dok-tekst .dok-trin {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--d));
  margin: 1.5em 0 0.5em;
  padding: 0;
}

.dok-trin li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: calc(32 * var(--d)) calc(28 * var(--d));
  border-radius: var(--r-xlg);
  background: var(--c-bg-subtle);
  filter: drop-shadow(0 14px 26.5px rgb(0 0 0 / 0.12));
}

.dok-trin-nr {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: var(--c-text);
}

.dok-tekst .dok-trin h2 {
  margin: 0;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-size: max(28px, calc(34 * var(--d)));
  line-height: 1;
  color: var(--c-text);
}

.dok-trin p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text);
}

/* Spørgsmålene: foldes ud ét ad gangen, plus/minus til højre. */
.dok-faq details {
  border-block-end: 1px solid var(--c-border);
}

.dok-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0.7em 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.dok-faq summary::-webkit-details-marker { display: none }

.dok-faq summary::after {
  content: '+';
  font-weight: 400;
  transition: rotate 0.3s var(--cta-ease, ease);
}

.dok-faq details[open] summary::after { rotate: 45deg }

.dok-faq details p { margin: 0 0 1em }

/*
 * Tilmeldingen (Figma TECH_page_not_ready, 426:3121): teksten i H3 til
 * venstre (x = 160, 538 bred, 74 under boksens top), boksen til højre fra
 * x = 878 på den grønne fokusflade #8ab0ac med en dyb skygge. Felterne er
 * designsystemets inputs: 55 høje, lys flade, grå kant, hjørner 4. Knappen
 * er app-knappen (#0d3f44, 345 × 50, hjørner 8).
 */
.pl-tilmeld {
  display: grid;
  grid-template-columns: calc(538 * var(--d)) auto;
  column-gap: calc(180 * var(--d));
  align-items: start;
  margin-block-start: calc(300 * var(--d));
  padding-inline-start: calc(160 * var(--d));
  scroll-margin-top: 120px;
}

.pl-tilmeld-tekst {
  margin: calc(74 * var(--d)) 0 0;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-size: calc(48 * var(--d));
  line-height: 1;
  color: var(--c-text);
}

.tilmeld {
  inline-size: calc(608 * var(--d));
  display: flex;
  flex-direction: column;
  gap: 37px;
  padding: calc(64 * var(--d)) calc(32 * var(--d));
  border-radius: var(--r-lg);
  background: var(--c-bg-focus);
  filter: drop-shadow(0 34px 42px rgb(0 0 0 / 0.26));
  font-family: Inter, system-ui, sans-serif;
  color: var(--c-text);
}

.tilmeld:focus { outline: none }

.tilmeld h2 {
  margin: 0;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: max(32px, calc(48 * var(--d)));
  line-height: 1;
}

.tilmeld form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tilmeld-felt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}

.tilmeld-felt input {
  block-size: 55px;
  padding: 0 16px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-bg);
  font: 400 16px/1 Inter, system-ui, sans-serif;
  color: var(--c-ink);
}

/*
 * Input-komponentens stadier (Figma Input, 426:3433): en stiplet ramme på
 * 2px, 2px uden om feltet, hjørner 4 — gul ved fokus (streger 8, mellemrum 2),
 * rød ved fejl (4 og 4). Værdierne er aflæst i komponenten, ikke skønnet.
 *
 * Fejlen vinder over fokus: rammen er rød, så længe værdien er forkert —
 * også mens man retter. tilmelding.js fjerner fejlen i samme øjeblik, den
 * er rettet, og så bliver rammen gul. Fokus vinder: den, der retter en fejl, skal kunne se, hvor
 * markøren står.
 *
 * En CSS-outline kan ikke styre stregernes længde, så rammen er en SVG på
 * `::after`: et rektangel med `stroke-dasharray`, tegnet på kanten af et
 * felt 4px større end inputtet. Stregen er 4 bred, og den yderste halvdel
 * falder uden for billedet — tilbage står 2px.
 */
.tilmeld-ramme {
  position: relative;
  display: flex;
  flex-direction: column;
}

.tilmeld-ramme::after {
  content: '';
  position: absolute;
  inset: -4px;
  pointer-events: none;
  background: no-repeat 0 0 / 100% 100%;
}

.tilmeld-ramme:has(input:focus)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='4' fill='none' stroke='%23bdcc00' stroke-width='4' stroke-dasharray='8 2'/%3E%3C/svg%3E") }

.tilmeld-ramme:has(input[aria-invalid="true"])::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='4' fill='none' stroke='%23ae241a' stroke-width='4' stroke-dasharray='4 4'/%3E%3C/svg%3E") }

.tilmeld-ramme input:focus { outline: none }

.tilmeld-samtykke {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

.tilmeld-samtykke .tilmeld-ramme { flex: none }

.tilmeld-samtykke input {
  flex: none;
  inline-size: 25px;
  block-size: 25px;
  margin: 0;
  accent-color: var(--c-text);
}

.tilmeld-samtykke a { color: inherit; text-decoration: underline; text-underline-position: from-font }

.tilmeld-fejl {
  margin: -16px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-input-fejl);
}

.tilmeld-fejl:empty { display: none }

.tilmeld-knap {
  align-self: flex-start;
  inline-size: min(345px, 100%);
  block-size: 50px;
  margin-block-start: 13px;
  border: 0;
  border-radius: 8px;
  background: #0d3f44;
  color: #f7f8f7;
  font: 400 20px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.tilmeld-knap:hover { background: var(--c-racing-green-600) }
.tilmeld-knap:disabled { opacity: 0.6; cursor: progress }

.tilmeld-knap:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 3px;
}

.tilmeld-tak {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  .tilmeld-tak--ny { animation: lander 0.7s cubic-bezier(0.22, 1, 0.36, 1) both }
}

/* Kontoboksen på /create-account: tilmeldingens boks i Getting starteds
   højre spalte. */
.konto-boks { inline-size: auto; justify-self: stretch }

/* Honningkrukken: findes for robotter, ikke for mennesker eller skærmlæsere. */
.tilmeld-honning {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* Hovedknappen som <button>: browserens egen knap-stil væk. */
button.cta {
  appearance: none;
  border: 0;
  cursor: pointer;
}

/* Slutningen under en platformside: forsidens, uden gradientens kant. */
.slut--side { padding-block-start: 0 }
.slut--side::before { display: none }

@media (max-width: 1200px) {
  .dok {
    --d: 1px;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-1000) var(--s-600) 0;
  }

  .dok-hoved {
    position: static;
    padding: 0;
  }

  .dok-titel { font-size: clamp(56px, 11vw, 120px); line-height: 0.86 }
  .dok-under { margin-inline-start: 0; max-inline-size: none; font-size: 17px; line-height: 1.5 }
  .dok-tekst { padding-block-start: var(--s-1000) }
}

@media (max-width: 800px) {
  .dok-tekst .dok-trin { grid-template-columns: minmax(0, 1fr) }
}

/* ------------------------------------------------------------------ */
/* Bevægelse: siden lander, afsnit toner frem, blid parallakse         */
/* ------------------------------------------------------------------ */

/*
 * Tre lag, alle rolige, og alle væk med "reducer bevægelse":
 *
 * 1. Siden LANDER. Det øverste på hver side toner frem og glider 18px op,
 *    forskudt efter hinanden (`--i` × 90 ms). `backwards`, ikke `both`: når
 *    animationen er færdig, er den væk igen og blander sig ikke i noget —
 *    fx glaskortets sløring i heroen.
 *
 * 2. Afsnit længere nede TONER FREM, når de kommer ind på skærmen (vis.js
 *    sætter `.vist`). Skjules kun, når `vis-js` er sat i sidehovedet.
 *
 * 3. PARALLAKSE: heroens billede, platformsidens telefon og de store
 *    slutoverskrifter bevæger sig lidt langsommere end siden (±`--drift`).
 *    Bundet til scrollen (`animation-timeline: view()`); browsere uden det
 *    får bare en side, der står stille.
 */
@keyframes lander {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: none; }
}

@keyframes drift {
  from { translate: 0 var(--drift, 32px); }
  to   { translate: 0 calc(-1 * var(--drift, 32px)); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-tekst > *,
  .telefon-holder,
  .hero-billedspalte,
  .pl-hero-titel > *,
  .pl-hero-tekst > *,
  .dok-hoved > *,
  .dok-tekst,
  .side-tekst > *,
  .why-hero-tekst > *,
  .why-billede--hero,
  .platforme {
    animation: lander 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(80ms + var(--i, 0) * 90ms);
  }

  .hero-tekst > :nth-child(2),
  .pl-hero-titel > :nth-child(2),
  .pl-hero-tekst > :nth-child(1),
  .dok-hoved > :nth-child(2),
  .side-tekst > :nth-child(2),
  .why-hero-tekst > :nth-child(2) { --i: 1 }

  .hero-tekst > :nth-child(3),
  .telefon-holder,
  .pl-hero-tekst > :nth-child(2),
  .dok-hoved > :nth-child(3),
  .dok-tekst,
  .why-hero-tekst > :nth-child(3),
  .why-billede--hero,
  .platforme { --i: 2 }

  .hero-tekst > :nth-child(n + 4),
  .hero-billedspalte { --i: 3 }

  /* 2: afsnittene længere nede. */
  .vis-js :is(.pl-trin > li, .pl-indhold, .pl-tilmeld, .pl-smal, .pl-slut, .pl-platforme .pk, .slut .pk, .slut-afslutning, .why-blok, .why-udsagn, .why-video):not(.vist) {
    opacity: 0;
    translate: 0 28px;
  }

  :is(.pl-trin > li, .pl-indhold, .pl-tilmeld, .pl-smal, .pl-slut, .pl-platforme .pk, .slut .pk, .slut-afslutning, .why-blok, .why-udsagn, .why-video) {
    transition:
      opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
      translate 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Kort på række kommer lidt efter hinanden. */
  .pl-trin > li:nth-child(2),
  :is(.slut-platforme) .pk:nth-child(2) { transition-delay: 0.12s }
  .pl-trin > li:nth-child(3),
  :is(.slut-platforme) .pk:nth-child(3) { transition-delay: 0.24s }

  /* 3: parallakse. */
  @supports (animation-timeline: view()) {
    .hero-billede,
    .why-billede img,
    .pl-telefon .telefon,
    .slut-overskrift,
    .pl-slut h2 {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }

    .hero-billede { --drift: 28px }
    .why-billede img { --drift: 24px; --billede-skala: 1.08 } /* lidt større, så kanten aldrig ses, når det glider */
    .pl-telefon .telefon { --drift: 40px }
    .slut-overskrift,
    .pl-slut h2 { --drift: 22px }
  }
}

/* ------------------------------------------------------------------ */
/* Telefonviften                                                       */
/* ------------------------------------------------------------------ */

.vifte {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--s-1000);
  padding: var(--s-2000) var(--s-600);
  overflow: clip;
}

.vifte img {
  inline-size: 17rem;
  border-radius: var(--r-xlg);
}

/* Yderste telefoner vippes, som i designet. */
.vifte img:first-child { transform: rotate(-9deg) translateY(var(--s-1000)) }
.vifte img:last-child  { transform: rotate(9deg) translateY(var(--s-1000)) }

/* ------------------------------------------------------------------ */
/* Sprogskifter                                                        */
/* ------------------------------------------------------------------ */

.sprog {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sprog a,
.sprog span {
  display: flex;
  align-items: center;
  padding: 0 var(--s-500);
  border-inline-start: 1px solid var(--c-border-light);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

.sprog [aria-current] {
  color: var(--c-text-sub);
}

/* ------------------------------------------------------------------ */
/* Smalle skærme                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
  /* Heroen stabler allerede under 1200px — se dens egen mediaquery. */

  /* Viften bliver en vandret rulning frem for tre klemte telefoner. */
  .vifte {
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
  }

  .vifte img {
    flex: none;
    scroll-snap-align: center;
  }

  .vifte img:first-child,
  .vifte img:last-child {
    transform: none;
  }

}

/* ------------------------------------------------------------------ */
/* Mobilbaren (Figma Main_menubar "Mobile", 486:148)                   */
/* ------------------------------------------------------------------ */

/*
 * 66px høj: logoet til venstre (24px luft), burgeren i en celle på 170px
 * med en streg på begge sider. Menupunkterne, sprogvælgeren og båndet er
 * skjult — de står i mobilmenuen. Lidt tættere baggrund og stærkere slør end
 * den brede bar (0.3 / 47px, som i designet).
 */
@media (max-width: 900px) {
  .top {
    block-size: 66px;
    justify-content: space-between;
    background: rgb(240 242 240 / 0.3);
    -webkit-backdrop-filter: blur(47px);
    backdrop-filter: blur(47px);
  }

  .top-nav,
  .top-sprog,
  .top-baand { display: none }

  .top-logo {
    inline-size: auto;
    padding-inline: 24px;
  }

  /* Den fulde logofil er kun visuelt skjult — dens alt-tekst er linkets navn. */
  .top-logo .top-logo-fuld {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .top-logo-mobil {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .top-logo .top-logo-mobil img { inline-size: 69.875px; block-size: auto }

  .top-logo-mobil span {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 10px;
    letter-spacing: -0.66px;
    text-transform: uppercase;
    color: var(--c-text);
    white-space: nowrap;
  }

  .top-burger {
    display: flex;
    flex: none;
    inline-size: min(170px, 42vw);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: 0;
    border-inline: 1px solid var(--c-border);
    color: #182a2b;   /* colors/racing-green-600 */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
  }

  .top-burger:hover { background: var(--c-bg-subtle) }

  .top-burger:focus { outline: none }
  .top-burger:focus-visible { outline: 2px solid var(--c-border-strong); outline-offset: -2px }

  .top-burger span {
    display: block;
    inline-size: 24px;
    block-size: 2px;
    border-radius: 12px;
    background: currentColor;
    transition: translate 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Åben (Figma Main_menubar "Mobile_open", 498:1290): de tre streger
     samles til én — den øverste og nederste glider ind i den midterste
     (2px streg + 4px luft = 6px). */
  .menu-aaben .top-burger span:nth-child(1) { translate: 0 6px }
  .menu-aaben .top-burger span:nth-child(3) { translate: 0 -6px }

  /*
   * Menuen (Figma 498:1091): hele skærmen under baren, i
   * color/background/subtle (#e9ede9) med samme slør som baren.
   * Baggrunden toner frem; punkterne kommer ned oppefra, ét ad gangen.
   * easeInOut hele vejen.
   */
  .mobilmenu {
    display: block;
    position: fixed;
    inset: 66px 0 0;
    z-index: 9;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 80px 30px 48px;
    background: rgb(233 237 233 / 0.88);   /* --c-bg-subtle, lidt gennemsigtig for sløret */
    -webkit-backdrop-filter: blur(47px);
    backdrop-filter: blur(47px);
    color: var(--c-text);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.4s;
  }

  .menu-aaben .mobilmenu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
  }

  /* Siden bagved står stille, mens menuen er åben. */
  html.menu-aaben { overflow: hidden }

  /* Sproget: det aktuelle (Inter Medium 20/30); et tryk viser de andre
     ved siden af. */
  .mobilmenu-sprog {
    display: flex;
    align-items: baseline;
    gap: 20px;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
  }

  .mobilmenu-sprog > summary {
    list-style: none;
    cursor: pointer;
  }

  .mobilmenu-sprog > summary::-webkit-details-marker { display: none }

  .mobilmenu-sprog[open] > summary { text-decoration: underline; text-underline-offset: 6px }

  .mobilmenu-sprog ul {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobilmenu-sprog a { color: inherit; text-decoration: none; opacity: 0.6 }
  .mobilmenu-sprog a:hover { opacity: 1 }

  /* Punkterne: Inter Regular 44/50 med 32px imellem. */
  .mobilmenu-punkter {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 27px 0 0;
    padding: 0;
    list-style: none;
  }

  .mobilmenu-punkter a {
    font-family: Inter, system-ui, sans-serif;
    font-size: 44px;
    line-height: 50px;
    color: inherit;
    text-decoration: none;
  }

  .mobilmenu-punkter a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  /* Ned oppefra, ét ad gangen: sproget først, så punkterne i rækkefølge. */
  .mobilmenu-sprog,
  .mobilmenu-punkter > li {
    opacity: 0;
    translate: 0 -24px;
    transition: opacity 0.25s cubic-bezier(0.65, 0, 0.35, 1), translate 0.25s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .menu-aaben .mobilmenu-sprog,
  .menu-aaben .mobilmenu-punkter > li {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1), translate 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(0.1s + var(--nr, 0) * 0.06s);
  }

  .mobilmenu-punkter > li:nth-child(1) { --nr: 1 }
  .mobilmenu-punkter > li:nth-child(2) { --nr: 2 }
  .mobilmenu-punkter > li:nth-child(3) { --nr: 3 }
  .mobilmenu-punkter > li:nth-child(4) { --nr: 4 }

  /* Uden JavaScript: ingen burger, og menuen er en liste under baren. */
  html:not(.menu-js) .top-burger { display: none }
  html:not(.menu-js) .mobilmenu {
    position: static;
    padding-block: 24px;
    opacity: 1;
    visibility: visible;
    border-block-end: 1px solid var(--c-border);
  }
  html:not(.menu-js) :is(.mobilmenu-sprog, .mobilmenu-punkter > li) { opacity: 1; translate: none }
  html:not(.menu-js) .mobilmenu-punkter a { font-size: 28px; line-height: 36px }
}

@media (prefers-reduced-motion: reduce) {
  .top-baand > span {
    animation: none;
  }

  .mobilmenu,
  .mobilmenu-sprog,
  .mobilmenu-punkter > li,
  .top-burger span { transition: none !important }
}

/* ------------------------------------------------------------------ */
/* Cookiebanneret (samtykke) — intet Figma-design; sitets egne dele     */
/* ------------------------------------------------------------------ */

/*
 * Et kort nederst til venstre (en bund-bjælke på mobil). Det spærrer ikke
 * siden — man kan læse videre uden at vælge; så indlæses Google bare ikke.
 * "Accepter alle" og "Afvis alle" er den SAMME knap, så ingen af dem er
 * lettere at ramme end den anden (Datatilsynets krav).
 */
.samtykke {
  position: fixed;
  z-index: 30;
  inset: auto auto 24px 24px;
  inline-size: min(30rem, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px -12px rgb(3 16 17 / 0.28);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1), translate 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.samtykke.er-vist { opacity: 1; translate: 0 0 }

.samtykke h2 {
  margin: 0;
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
}

.samtykke p { margin: 0 }
.samtykke a { color: inherit; text-underline-offset: 3px }

.samtykke-valg { display: flex; flex-direction: column; gap: 10px; padding-block: 4px }
.samtykke-punkt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer }
.samtykke-punkt input { inline-size: 18px; block-size: 18px; margin: 2px 0 0; accent-color: var(--c-racing-green) }
.samtykke-punkt input:disabled { cursor: default }
.samtykke-punkt b { font-weight: 600; margin-inline-end: 4px }

.samtykke-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }

.samtykke-knap {
  flex: 1 1 0;
  min-inline-size: 8.5rem;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--c-racing-green);
  color: var(--c-white);
  font: 600 14px/1.2 'Open Sans', Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.samtykke-knap:hover { background: var(--c-racing-green-600) }

.samtykke-tilpas {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: inherit;
  font: 500 14px/1.2 Inter, system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.samtykke :is(button, input, a):focus-visible { outline: 2px solid var(--c-border-strong); outline-offset: 2px }

/* Footerens "Cookieindstillinger" ser ud som linkene ved siden af. */
.bund-cookie {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
}

.bund-cookie:hover { color: var(--c-text-sub) }

@media (max-width: 600px) {
  .samtykke {
    inset: auto 0 0 0;
    inline-size: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-inline: 0;
    border-block-end: 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .samtykke { transition: none }
}

/* ------------------------------------------------------------------ */
/* Pricing (intet eget design — platformsidernes og forsidens dele)    */
/* ------------------------------------------------------------------ */

/* Planerne er forsidens delte kort. De står lige høje, så punkterne
   flugter på tværs, og den mørke bund fylder resten af kortet. */
.pris-planer { align-items: stretch }

/* Shopify-logoet og linjen over planerne. */
.pris-platform {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--d));
  margin: calc(105 * var(--d)) 0 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: max(16px, calc(20 * var(--d)));
  color: var(--c-text-sub);
}

.pris-platform img { inline-size: calc(150 * var(--d)); block-size: auto }
.pris-platform p { margin: 0 }
.pris-platform + .pris-planer { margin-block-start: calc(40 * var(--d)) }

/* På en bred skærm i overskriftens spalte (160 fra kanten i begge sider),
   ikke næsten kant til kant som platformsidernes trin. */
@media (min-width: 1201px) {
  .pris-platform,
  .pris-planer { padding-inline: calc(160 * var(--d)) }
}

@media (max-width: 1200px) {
  .pris-platform {
    flex-wrap: wrap;
    max-inline-size: 34rem;
    margin: var(--s-2000) auto 0;
    padding: 0 var(--s-600);
  }
  .pris-platform img { inline-size: 120px }
  .pris-platform + .pris-planer { margin-block-start: var(--s-1000) }
}
.pris-planer > li { display: flex }
.pris-plan { display: flex; flex-direction: column; inline-size: 100% }
.pris-plan .fk-bund { flex: 1 }

.pris-plan .fk-top p:not([class]) { color: var(--c-text-sub); min-block-size: 3em } /* plads til to linjer, så priserne flugter */

.pris-beloeb {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--d));
  margin: calc(8 * var(--d)) 0 calc(4 * var(--d)) !important;
}

.pris-tal {
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-size: calc(64 * var(--d));
  line-height: 1;
}

.pris-periode { font-size: max(14px, calc(16 * var(--d))) }

.pris-gebyr { font-weight: 600 }

/* Den anbefalede plan: en kant i den stærke farve rundt om toppen. */
.pris-plan--fremhaevet .fk-top { border-color: var(--c-border-strong) }

.pris-note {
  margin-block: calc(64 * var(--d)) 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-sub);
}

/* ------------------------------------------------------------------ */
/* Brødkrummen (Figma Breadcrumb, 488:223)                             */
/* ------------------------------------------------------------------ */

/*
 * En bjælke under toppen. Teksten starter ved 304px — under det første
 * menupunkt, ligesom i designet. Toppen er tegnet i faste pixels (ikke
 * `--d`), så brødkrummen er det også.
 *
 * Ingen streg forneden (designet har én): toppen er sticky og skrumper, når
 * man ruller, mens brødkrummen ruller med siden — så lagde dens streg sig
 * lige under toppens og blev til en dobbelt linje.
 */
.broedkrumme {
  padding: 8px 304px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 38px;
  color: #274344;   /* graphis/color/primary */
}

.broedkrumme ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* "/ " foran hvert led — også det første, som i designet. Den tomme
   alternativtekst efter skråstregen holder den ude af skærmlæseren. */
.broedkrumme li::before {
  content: "/" / "";
  margin-inline-end: 0.3em;
}

.broedkrumme li + li { margin-inline-start: 0.3em }

/* Alle led står, som titlen er skrevet. Designet har forælderen med
   småt ("/ get started / Shopify"), men så stod samme side med to stavemåder
   afhængigt af, om man var på den — og med småt på alt blev navnene
   (shopify, woocommerce) og tyske navneord (datenschutz) forkerte. */
.broedkrumme a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.broedkrumme a:hover { text-decoration-thickness: 2px }

@media (max-width: 900px) {
  .broedkrumme { padding-inline: 24px }   /* samme kant som mobilbarens logo */
}

/* ------------------------------------------------------------------ */
/* Getting started                                                     */
/* ------------------------------------------------------------------ */

.side {
  /* Ingen container her: uden en forælder-container måles cqw på vinduet,
     og så er H1 præcis lige så stor som på platformsiderne. Med siden selv
     som container blev den målt 48px smallere (sidens margen). */
  --d: min(1px, calc(100cqw / 1728));
  /* Samme ramme som forsiden og Why Moooce: indholdet fra x = 160 i
     designets 1728 og samme topluft (105) — teksten i en spalte på 720,
     kortene i resten frem til højre margen (160). */
  display: grid;
  grid-template-columns: calc(720 * var(--d)) minmax(0, 1fr);
  column-gap: calc(64 * var(--d));
  align-items: start;
  max-inline-size: 1728px;
  margin-inline: auto;
  padding: calc(105 * var(--d)) calc(160 * var(--d)) var(--s-2000);
}

/* Designsystemets H1 medium (120/120 ved 1728), som platformsiderne og
   Why Moooce — ikke de første regler fra før designet (højst 76px). */
.side h1 {
  font-family: 'Instrument Serif', 'Instrument Serif Reserve', Georgia, serif;
  font-weight: 400;
  font-size: max(52px, calc(120 * var(--d)));
  line-height: 1;
  margin: 0 0 var(--s-600);
  text-wrap: balance;
}

.side h1 em { font-style: italic }

/* Manchetten (designsystemets Tease, 20/28) og brødteksten under den. */
.side-manchet {
  margin: 0;
  max-inline-size: 34rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: max(18px, calc(20 * var(--d)));
  line-height: 1.4;
  color: var(--c-text-sub);
}

.side-broed {
  max-inline-size: 36rem;
  padding-block-start: var(--s-1000);
}

.platforme {
  --d: 0.75px;
  display: grid;
  gap: var(--s-600);
  inline-size: 100%;
}


/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

/*
 * Figma Footer (202:1343), 1728 × 347: en streg over hele bredden, adressen
 * 95 nede og 75 inde, linkrækken 247 nede. Alt i Inter Medium 14/22 med
 * −0,28 spatiering — samme skrift som menuens knapper.
 *
 * Indholdet står i en ramme på 1728 som resten af siden, men stregen går
 * hele vejen ud. Afstandene skalerer med siden (`--d`), skriften gør ikke:
 * 14px er allerede den mindste læselige størrelse.
 */
.bund {
  --d: min(1px, calc(100vw / 1728));
  border-block-start: 1px solid var(--c-border);
  margin-block-start: var(--s-2000);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--c-text);
}

.bund-indre {
  max-inline-size: 1728px;
  margin-inline: auto;
  padding: calc(95 * var(--d)) calc(90 * var(--d)) calc(78 * var(--d)) calc(75 * var(--d));
}

.bund-adresse {
  margin: 0 0 calc(86 * var(--d));
}

.bund-raekke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-600) var(--s-1000);
}

.bund-venstre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-600) calc(63 * var(--d));
}

.bund-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-300) 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bund-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.bund-links a:hover { color: var(--c-text-sub) }

@media (max-width: 1200px) {
  .bund-indre { padding: var(--s-1000) var(--s-600) var(--s-1300) }
  .bund-adresse { margin-block-end: var(--s-1000) }
  .bund-raekke {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1200px) {
  .side {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-1000);
    padding: var(--s-1000) var(--s-600) var(--s-2000);
  }
}

@media (max-width: 900px) {
  .side { grid-template-columns: minmax(0, 1fr) }
}

/* ------------------------------------------------------------------ */
/* Playerens flade i telefonen                                         */
/* ------------------------------------------------------------------ */

/*
 * Fladen ER playerens egen CSS. Reglerne står i `player-flade.css`, som er
 * GENERERET af `scripts/hent-playerflade.py` ud fra
 * `Webplayer/src/components/*.module.css` — de er ikke skrevet af igen her.
 *
 * Her står kun det, en kopi ikke kan arve: scenen, gradienterne og videoen.
 *
 * Ændrer playeren sig, er opdateringen at KØRE scriptet. Den forrige udgave
 * af dette afsnit var playerens mål omregnet til procent i hånden, og den
 * havde allerede én fejl i sig, før den var en dag gammel.
 */

/*
 * Scenen er playerens, ikke designets — både i forhold og i størrelse.
 *
 * Figma tegner telefonen 502 × 1085. Playeren er 402 × 874, og på desktop er
 * den HØJDEstyret: `height: min(calc(100dvh - 56px), 940px)`. Den topper
 * altså ved 940px høj og 432px bred. Designets 502 er bredere, end den
 * player, kunden møder, nogensinde bliver.
 *
 * Begge tal aflæses af `Stage.module.css` og står i `player-flade.css` som
 * `--spiller-forhold` og `--spiller-maks-bredde`. De er ikke skrevet af her,
 * fordi et tal skrevet af er et tal, der driver.
 */
/*
 * Telefonen er 402 × 874 i HERO-komponenten — nøjagtig playerens egen scene,
 * 1:1. Derfor `calc(402 * var(--d))`: den skalerer med resten af hero'en, og
 * ved designets fulde bredde på 1728px står den i sin rigtige størrelse.
 *
 * `--spiller-forhold` kommer fra `Stage.module.css` via den genererede CSS.
 * De to kilder er enige — komponenten ER playerens scene — og skulle
 * playeren en dag ændre sit forhold, er det dét, der gælder her.
 */
.telefon {
  /* Grundlaget for cqw: playerens px er regnet om til procent af TELEFONENS
     bredde. Uden en container falder de tilbage til ingenting. */
  container-type: inline-size;
  position: relative;
  z-index: 2;
  flex: none;
  /* `--dt`, ikke `--d`: telefonen må ikke blive højere end skærmen. Er den
     smallere end sporet, står den midt i det. */
  inline-size: calc(402 * var(--dt, var(--d)));
  margin-inline: auto;
  aspect-ratio: var(--spiller-forhold);
}

/* Stablet layout: telefonen står midt i og må ikke fylde hele bredden. */
@media (max-width: 1200px) {
  .telefon {
    inline-size: min(100%, var(--spiller-maks-bredde));
    margin-inline: auto;
  }
}

.telefon > img,
.telefon-video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--r-xlg);
  display: block;
}

.spiller {
  position: absolute;
  inset: 0;
  border-radius: var(--r-xlg);
  overflow: hidden;
  /* Fladen er en illustration. Kortene nedenfor får klik tilbage. */
  pointer-events: none;
  color: var(--c-white);
  font-family: var(--font-sans);
}

/*
 * Gradienterne holder hvid tekst læsbar oven på et vilkårligt videobillede.
 * De hører til playerens SCENE (`Stage.module.css`), ikke til de fire
 * komponenter, scriptet omskriver — derfor står de her som variabler, hentet
 * samme sted fra.
 *
 * Første udgave gættede `rgb(0 0 0 / 0.42)`. Playeren bruger 0,9, og det gør
 * HERO-komponenten også. Toppen var altså for lys begge steder, hvor jeg
 * havde skrevet af i hånden.
 */
.spiller::before,
.spiller::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}

.spiller::before {
  inset-block-start: 0;
  block-size: var(--spiller-scrim-top-hoejde);
  background: var(--spiller-scrim-top);
}

.spiller::after {
  inset-block-end: 0;
  block-size: var(--spiller-scrim-bund-hoejde);
  background: var(--spiller-scrim-bund);
}

/*
 * Playeren bruger `<button>` til kurv, hjerte, lyd og deling. Her er de
 * `<span>`, fordi der ikke er noget at trykke på — og en span arver ikke
 * knappens nulstilling.
 */
.spiller .p-top-cart,
.spiller .p-rail-action {
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

/*
 * Forløbslinjen står stille. Playeren sætter `width` i JS, hvert billede;
 * her ville en linje, der løber, love en afspiller, der ikke findes.
 */
.spiller .p-bund-fill {
  inline-size: 34%;
}

/*
 * Miniaturen viser et billede; playerens knap får det som `<img>` inde i sig.
 * Uden en regel fylder billedet ikke cirklen.
 */
.spiller .p-rail-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}


/* ------------------------------------------------------------------ */
/* Hero-videoens tidsstyrede chips                                     */
/* ------------------------------------------------------------------ */

/*
 * Chippene ER playerens produktchip — `p-rail-chip` og resten står i
 * `player-flade.css`. Her står kun det, playeren gør i JavaScript: hvilke af
 * dem der er foldet ud.
 *
 * Den forrige udgave var en efterligning med egne klasser (`.videolink*`).
 * Den er væk: to flader, der skal se ens ud, og som vedligeholdes hver for
 * sig, ender med ikke at gøre det.
 */

/*
 * Chippen er et link her, ikke en knap. Playerens `chipText` er en `<button>`
 * og arver dens nulstilling; et `<a>` skal have den udefra.
 */
.spiller a.p-rail-chip {
  text-decoration: none;
}

/*
 * Kortene og cirklerne skal kunne klikkes, selv om fladen omkring dem ikke
 * kan — `.spiller` har `pointer-events: none`.
 */
.spiller .p-rail-item {
  pointer-events: auto;
}

/*
 * Uden JavaScript er alle chips foldet ud. Scriptet sætter `data-styret`, når
 * det har fat i videoen, og først derefter er det tiden, der bestemmer.
 *
 * Rækkefølgen er hele pointen: et link, der kun findes når et script er hentet
 * og kørt, findes ikke for alle. Prisen i den tilstand er kosmetisk — cirklen
 * står ikke i chippens venstre ende, fordi `--chip-shift` kræver et mål.
 */
.p-rail-thumbs:not([data-styret]) .p-rail-chip {
  animation: none;
}