/* ============================================================================
   Jamii website
   ----------------------------------------------------------------------------
   Ingen cookies, ingen webfonts udefra, og kun to små scripts: ventelisten
   til Android (android/besked.js) og det levende tal under hero (tal.js).
   Begge er forbedringer af noget, der virker uden dem. Privatlivspolitikken
   lover det, så siden holder sig til systemets skrift og ren CSS.
   Bevægelse er CSS-load-animationer plus scroll-drevne animationer
   (animation-timeline), begge slået fra ved prefers-reduced-motion.

   Paletter vælges med data-palette på <html>: "blaek", "skumring" eller "mos".
   Hver palette har lys og mørk tilstand. Uden attributten bruges blaek.

   Hjørneradius er ét system:
     - kapsler (chips, status) = fuld radius
     - flader og celler        = var(--r-card)
     - telefonrammer           = var(--r-device), som følger iPhone-geometrien
   ========================================================================== */

/* ── Palette 1: Blæk & papir ────────────────────────────────────────────────
   Næsten monokrom. Al farve på siden kommer fra appens egne skærmbilleder og
   fra typemærkaterne, så produktet er det eneste kulørte element. */
:root,
[data-palette="blaek"] {
  --paper:      #F6F4EF;
  --paper-2:    #EBE8E0;
  --ink:        #16150F;
  --ink-2:      #5C584E;
  --accent:     #16150F;
  --accent-ink: #F6F4EF;
  --line:       rgba(22, 21, 15, 0.14);
  --line-soft:  rgba(22, 21, 15, 0.08);
  --bezel:      #23221C;
  --shadow-1:   rgba(22, 21, 15, 0.10);
  --shadow-2:   rgba(22, 21, 15, 0.30);
}

@media (prefers-color-scheme: dark) {
  :root,
  [data-palette="blaek"] {
    --paper:      #121211;
    --paper-2:    #1C1C19;
    --ink:        #F1EFE8;
    --ink-2:      #A09C92;
    --accent:     #F1EFE8;
    --accent-ink: #121211;
    --line:       rgba(241, 239, 232, 0.16);
    --line-soft:  rgba(241, 239, 232, 0.09);
    --bezel:      #2B2A26;
    --shadow-1:   rgba(0, 0, 0, 0.40);
    --shadow-2:   rgba(0, 0, 0, 0.62);
  }
}

/* ── Palette 2: Skumring ────────────────────────────────────────────────────
   Lys tilstand er daggry, mørk tilstand er aften. Samme dobbelthed som appens
   to splash-skærme (sol/morgenhimmel og måne/oplyste vinduer). */
[data-palette="skumring"] {
  --paper:      #FBF1E6;
  --paper-2:    #F3E2D2;
  --ink:        #2A1D28;
  --ink-2:      #6D5B67;
  --accent:     #E07A45;
  --accent-ink: #2A1D28;
  --line:       rgba(42, 29, 40, 0.14);
  --line-soft:  rgba(42, 29, 40, 0.08);
  --bezel:      #33253A;
  --shadow-1:   rgba(42, 29, 40, 0.10);
  --shadow-2:   rgba(42, 29, 40, 0.30);
}

@media (prefers-color-scheme: dark) {
  [data-palette="skumring"] {
    --paper:      #17131E;
    --paper-2:    #211A2B;
    --ink:        #EDE3D2;
    --ink-2:      #A99BA9;
    --accent:     #F0A272;
    --accent-ink: #1C1424;
    --line:       rgba(237, 227, 210, 0.16);
    --line-soft:  rgba(237, 227, 210, 0.09);
    --bezel:      #2E2439;
    --shadow-1:   rgba(0, 0, 0, 0.44);
    --shadow-2:   rgba(0, 0, 0, 0.66);
  }
}

/* ── Palette 3: Mos & kobber ────────────────────────────────────────────────
   Dyb mos med kobber. Mørkere og mere afdæmpet end appens grønne Tilbud-tone,
   så de to ikke støder sammen. */
[data-palette="mos"] {
  --paper:      #F1F0E7;
  --paper-2:    #E3E5D8;
  --ink:        #1B2620;
  --ink-2:      #58655A;
  --accent:     #A85A26;
  --accent-ink: #FFF9F0;
  --line:       rgba(27, 38, 32, 0.14);
  --line-soft:  rgba(27, 38, 32, 0.08);
  --bezel:      #22302A;
  --shadow-1:   rgba(27, 38, 32, 0.10);
  --shadow-2:   rgba(27, 38, 32, 0.32);
}

@media (prefers-color-scheme: dark) {
  [data-palette="mos"] {
    --paper:      #16201A;
    --paper-2:    #1E2A23;
    --ink:        #EFEBDF;
    --ink-2:      #9BA89C;
    --accent:     #D2823F;
    --accent-ink: #141D17;
    --line:       rgba(239, 235, 223, 0.16);
    --line-soft:  rgba(239, 235, 223, 0.09);
    --bezel:      #27352E;
    --shadow-1:   rgba(0, 0, 0, 0.42);
    --shadow-2:   rgba(0, 0, 0, 0.64);
  }
}

/* ── Appens faste typefarver ────────────────────────────────────────────────
   Samme system som app og delelinks (Event lilla, Fællesskab orange, Tilbud
   grøn). Mærkaterne bruger en tonet flade med den mørke variant som tekst, så
   de består WCAG AA. Appen selv sætter hvid tekst på fuld kulør, men det
   klarer kontrastkravet på web. */
:root {
  --t-event:      #AF52DE;
  --t-event-ink:  #6C2BB4;
  --t-gather:     #FF9500;
  --t-gather-ink: #7F4206;
  --t-offer:      #34C759;
  --t-offer-ink:  #0A5D2B;
  --bad:          #B3261E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --t-event-ink:  #C77BF0;
    --t-gather-ink: #FFB340;
    --t-offer-ink:  #4BD877;
    --bad:          #F28B82;
  }
}

/* ── Fælles mål ─────────────────────────────────────────────────────────── */
:root {
  --nav-h:    4.25rem;
  --r-card:   1.25rem;
  --r-device: 2.35rem;
  --gutter:   clamp(1.25rem, 4vw, 2.5rem);
  --section:  clamp(4.5rem, 11vw, 9rem);
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --font:     -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
              Roboto, Helvetica, Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

h1, h2, h3 {
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:where(a):focus-visible,
:where(summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 0 0 var(--r-card) 0;
  text-decoration: none;
  font-weight: 600;
}

.skip:focus { left: 0; }

/* ── Sidehoved: én linje, højde under 80 px ─────────────────────────────── */
header.site {
  position: sticky;
  top: 0;
  z-index: 5;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}

@supports not (backdrop-filter: blur(1px)) {
  header.site { background: var(--paper); }
}

@media (prefers-reduced-transparency: reduce) {
  header.site {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: var(--line-soft);
  }
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

header.site img {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 24%;
}

header.site a.brand {
  font-weight: 640;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

header.site nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
}

header.site nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.94rem;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

header.site nav a:hover { color: var(--ink); }

/* Sidehovedets ene handling: "Opret opslag" som en lille kapsel i accenten,
   samme form som App Store-knappen, så den kan ses uden at råbe. Resten
   bliver stående som tekst. */
header.site nav a.nav-cta {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

header.site nav a.nav-cta:hover {
  color: var(--accent-ink);
  opacity: 0.88;
  transform: translateY(-1px);
}

/* På en telefon er der kun plads til vejen ind til Mit Jamii. Support og
   Privatliv står stadig i sidefoden. */
@media (max-width: 40rem) {
  header.site nav a.nav-quiet { display: none; }
}

/* ── Tekstlinks ─────────────────────────────────────────────────────────── */
.textlink {
  color: var(--ink);
  text-decoration: none;
  font-weight: 560;
  font-size: 1rem;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--accent);
  transition: opacity 0.2s var(--ease);
}

.textlink:hover { opacity: 0.62; }

/* ── Statuskapsel ───────────────────────────────────────────────────────── */
.pill {
  display: inline-block;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.pill--status {
  padding: 0.72rem 1.25rem;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 2px var(--shadow-1), 0 10px 24px -14px var(--shadow-2);
}

/* Som link til App Store: samme kapsel, der løfter sig en anelse. */
a.pill--status {
  text-decoration: none;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

a.pill--status:hover { opacity: 0.88; transform: translateY(-1px); }

/* Som knap (formularen på ventelisten): samme kapsel, ingen browser-kant. */
button.pill {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

button.pill:hover { opacity: 0.88; transform: translateY(-1px); }

button.pill:disabled { opacity: 0.5; cursor: default; transform: none; }

button.pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Google Play: kommer snart ──────────────────────────────────────────────
   Samme kapsel som App Store-knappen, men hul og dæmpet: appen findes ikke
   endnu, og kapslen må ikke love noget, den ikke kan holde. To linjer, så
   "kommer snart" står dér, hvor man kigger, og ikke i en fodnote. Linket går
   til /android/; med JavaScript åbner det ventelisten som dialog i stedet. */
.pill--soon {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.36rem 1.1rem 0.36rem 0.9rem;
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
  text-align: left;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.pill--soon .play {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  opacity: 0.45;
  transition: opacity 0.2s var(--ease);
}

.pill--soon > span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.pill--soon small {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.85;
}

.pill--soon:hover {
  border-color: var(--ink-2);
  color: var(--ink);
  transform: translateY(-1px);
}

.pill--soon:hover .play { opacity: 0.85; }

/* ── Telefonramme om rigtige skærmbilleder ──────────────────────────────── */
.device {
  margin: 0;
  padding: 0.45rem;
  border-radius: var(--r-device);
  background: var(--bezel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 6px var(--shadow-1),
    0 30px 60px -28px var(--shadow-2);
  transition: transform 0.5s var(--ease);
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-device) - 0.45rem);
}

@media (prefers-reduced-motion: no-preference) {
  .device:hover { transform: translateY(-6px); }
}

/* ── 1. Hero ────────────────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(2rem, 5vh, 4.5rem) var(--section);
  overflow: clip;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  min-height: calc(100dvh - var(--nav-h) - 8rem);
}

.hero h1 {
  font-size: clamp(2.5rem, 6.8vw, 5.15rem);
  font-weight: 680;
  letter-spacing: -0.04em;
}

.hero .lede {
  margin-top: 1.5rem;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-2);
  line-height: 1.5;
}

.hero__actions {
  margin-top: 2.4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  container-type: inline-size;
}

/* Når rækken er for smal til begge butikskapsler ved siden af hinanden (på en
   telefon), står de under hinanden - og så skal "Sådan virker det" ikke
   klemme sig ind ved siden af den nederste, men have sin egen linje. Måles
   på selve rækken, ikke på skærmen, så det holder uanset kolonnebredde. */
@container (max-width: 28rem) {
  .hero__actions .textlink { flex-basis: 100%; }
}

.device--hero {
  width: clamp(212px, 23vw, 278px);
  justify-self: end;
}

/* Kendt fra: ordet og DR's to logoer på én linje under knapperne, midt for
   hinanden og venstrestillet med dem. Logoerne er DR's egne farvede
   firkanter og må ikke farves om. */
.press {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.press span { margin-right: 0.25rem; }

.press a {
  display: block;
  line-height: 0;
  transition: opacity 0.2s var(--ease);
}

.press a:hover { opacity: 0.75; }

.press img {
  width: 2.25rem;
  height: 2.25rem;
  /* DR-bjælken nederst er sort og forsvinder ellers i mørk tilstand. */
  box-shadow: 0 0 0 1px var(--line-soft);
}

/* ── 1b. Tal ────────────────────────────────────────────────────────────────
   Tre tal i blæk med en hårstreg over, samme greb som .facts i tidsbåndet,
   bare større. Ingen kort, ingen farve: det skal læses som en fodnote til
   hero'en, ikke som et salgsbånd. */
.tal {
  margin-top: calc(var(--section) * -0.45);
  padding-bottom: calc(var(--section) * 0.75);
}

.tal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 4vw, 3rem);
}

.tal__list li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.tal__num {
  display: block;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 660;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.tal__num small {
  font-size: 0.42em;
  font-weight: 560;
  letter-spacing: 0;
  color: var(--ink-2);
}

.tal__list span {
  display: block;
  margin-top: 0.55rem;
  max-width: 26ch;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ── 2. Typer: forskudte rækker ─────────────────────────────────────────── */
.section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 660;
  max-width: 20ch;
}

.types { padding-block: var(--section); }

.typelist {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2.2rem, 5vw, 3.4rem);
}

.typelist__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  max-width: 52rem;
}

/* Forskydningen giver rytme uden at bryde læseretningen. */
.typelist__row:nth-child(2) { margin-left: clamp(0rem, 7vw, 6rem); }
.typelist__row:nth-child(3) { margin-left: clamp(0rem, 14vw, 12rem); }

.typelist__row p {
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  color: var(--ink-2);
  line-height: 1.5;
}

.chip {
  justify-self: start;
  display: inline-block;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--event {
  background: color-mix(in srgb, var(--t-event) 22%, var(--paper));
  color: var(--t-event-ink);
}

.chip--gathering {
  background: color-mix(in srgb, var(--t-gather) 24%, var(--paper));
  color: var(--t-gather-ink);
}

.chip--offer {
  background: color-mix(in srgb, var(--t-offer) 24%, var(--paper));
  color: var(--t-offer-ink);
}

/* ── 3. Tidsbånd ────────────────────────────────────────────────────────── */
.band {
  background: var(--paper-2);
  padding-block: var(--section);
}

.band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.band__title {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 660;
}

.band__lede {
  margin-top: 1.2rem;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--ink-2);
}

.device--band {
  width: clamp(230px, 27vw, 296px);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.facts {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  width: 100%;
  max-width: 58rem;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.05fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  text-align: left;
}

.facts li {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.45;
}

.facts strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── 4. Dage og filtre ──────────────────────────────────────────────────────
   Ingen skærmbillede: striben er tegnet i CSS, og filtrene står som tekst. Det
   er appens egne ord, og der er flere af dem, end et skærmbillede kan vise. */
.filters { padding-block: var(--section); }

.filters__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* Filtrene er længere end teksten: teksten bliver stående, mens de ruller forbi. */
@media (min-width: 60.01rem) {
  .filters__copy {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }
}

.filters__copy p {
  margin-top: 1.4rem;
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--ink-2);
  line-height: 1.55;
}

/* Fjorten søjler med ugedagens bogstav under. Den valgte weekend står i
   blæk, resten i en skygge af den - samme greb som appens stribe, uden
   appens blå, så farven stadig kun kommer fra skærmbillederne. */
.strip {
  margin: 2rem 0 0;
  max-width: 24rem;
  height: 7.5rem;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 0.35rem;
  align-items: end;
}

.strip span {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
}

.strip i {
  width: 100%;
  height: calc(var(--h) * 5.5rem);
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

.strip .is-on { color: var(--ink); }
.strip .is-on i { background: var(--ink); }

.facets {
  margin: 0;
  display: grid;
  gap: 1.35rem;
}

.facets div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.facets dt {
  font-weight: 600;
  font-size: 0.95rem;
}

.facets dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.facets dd span {
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ── 6. Privatlivsudsagn ────────────────────────────────────────────────── */
.statement { padding-block: var(--section); }

.statement h2 {
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  font-weight: 660;
  max-width: 17ch;
}

.statement p {
  margin-top: 1.6rem;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--ink-2);
  line-height: 1.55;
}

.statement p + p { margin-top: 1.8rem; }

/* Stjernen i overskriften peger herned. Lille og stille, men til stede. */
.statement h2 sup {
  font-size: 0.45em;
  font-weight: 560;
  vertical-align: super;
  line-height: 0;
  color: var(--ink-2);
}

.statement p.statement__note {
  margin-top: 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (min-width: 60rem) {
  .statement .wrap > * { margin-left: clamp(0rem, 12vw, 9rem); }
}

/* ── 5. Bento ───────────────────────────────────────────────────────────── */
.bento-section {
  background: var(--paper-2);
  padding-block: var(--section);
}

.bento {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: 1.05fr 1.3fr 0.92fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

.bento__b {
  align-self: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-card);
}

.tinted {
  background: var(--paper);
  border: 1px solid var(--line-soft);
}

.bento__b h3 {
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  font-weight: 640;
}

.bento__b p {
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Den sidste telefon falder ned, så rækken ikke bliver en lineal. */
.bento__c { margin-top: clamp(1.5rem, 6vw, 4.5rem); }

/* ── 7. Til steder og foreninger ────────────────────────────────────────── */
.hosts {
  background: var(--paper-2);
  padding-block: var(--section);
}

.hosts__grid {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.hosts__grid li {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-card);
}

.hosts__grid h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 640;
}

.hosts__grid p {
  margin-top: 0.9rem;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Linket står nederst, så de tre celler flugter, selv om teksten ikke gør. */
.hosts__grid p:has(.textlink) {
  margin-top: auto;
  padding-top: 1.4rem;
}

/* ── 8. Opret selv: tre trin ────────────────────────────────────────────────
   Typografisk som Typer og Filtre: et stort tal og en streg over hvert trin,
   og én knap til sidst. Vejen ind for dem, der kommer fra et delt link og
   aldrig har set appen. Tallene er CSS-tællere, så markup'en kun er listen. */
.howto { padding-block: var(--section); }

.howto__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.howto__lede {
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--ink-2);
  line-height: 1.55;
}

.steps {
  list-style: none;
  counter-reset: step;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 4vw, 3rem);
}

.steps li {
  counter-increment: step;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.steps li::before {
  content: "0" counter(step);
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 680;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.steps h3 {
  margin-top: 1.1rem;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 640;
}

.steps p {
  margin-top: 0.7rem;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.5;
}

.howto__actions {
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
}

/* ── 9. Afslutning ──────────────────────────────────────────────────────── */
.closing { padding-block: var(--section); }

.closing__inner {
  max-width: 44rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 660;
}

.closing p {
  margin-top: 1.3rem;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
}

.closing__action {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.2rem;
}

.closing__note {
  margin-top: 1.1rem;
  font-size: 0.92rem;
}

/* ── Tekstsider: /privatliv/, /support/, 404 ────────────────────────────── */
main.page {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section);
  max-width: 46rem;
}

main.page h1 {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 660;
  margin-bottom: 0.4rem;
}

main.page p.updated {
  color: var(--ink-2);
  font-size: 0.9rem;
}

main.page h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 640;
  margin: 2.6rem 0 0.6rem;
}

main.page h3 {
  font-size: 1.02rem;
  font-weight: 620;
  margin: 1.6rem 0 0.35rem;
}

main.page p,
main.page li { color: var(--ink-2); }

main.page p { margin: 0.8rem 0; }

main.page a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

main.page ul { padding-left: 1.15rem; }

main.page li { margin: 0.35rem 0; }

.summary {
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: 1.25rem 1.4rem;
  margin: 1.8rem 0;
}

.summary ul { margin: 0.4rem 0 0; }

details {
  border-bottom: 1px solid var(--line-soft);
  padding: 1rem 0;
}

/* Et link til ét spørgsmål (/support/#slet-konto) skal ikke lande med
   spørgsmålet gemt under den klæbende topbjælke. */
details[id] { scroll-margin-top: var(--nav-h); }

details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

details summary::-webkit-details-marker { display: none; }

details summary::after {
  content: "+";
  float: right;
  color: var(--ink-2);
  font-weight: 400;
}

details[open] summary::after { content: "\2212"; }

details p { color: var(--ink-2); }

/* ── Sidefod ────────────────────────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--line-soft);
  padding-block: 2rem 3rem;
  color: var(--ink-2);
  font-size: 0.9rem;
}

footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

footer.site a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

footer.site a:hover { color: var(--ink); }

/* ── Bevægelse ──────────────────────────────────────────────────────────────
   To slags, begge motiverede:
   1. Hero-indlæsning bygger hierarki op, så øjet lander på overskriften først.
   2. Scroll-afsløring lader indholdet ankomme i takt med læsningen.
   Ingen uendelige løkker, ingen parallakse. Alt kollapser til statisk ved
   prefers-reduced-motion, og skjul-tilstanden sættes kun, hvis browseren
   faktisk kan animere den væk igen. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > *,
  .device--hero {
    animation: rise 0.85s var(--ease) both;
  }

  .hero h1        { animation-delay: 0.05s; }
  .hero .lede     { animation-delay: 0.16s; }
  .hero__actions  { animation-delay: 0.27s; }
  .hero .press    { animation-delay: 0.38s; }
  .device--hero   { animation-delay: 0.20s; animation-duration: 1.1s; }

  @supports (animation-timeline: view()) {
    .reveal,
    .typelist__row,
    .facts li,
    .tal__list li,
    .facets div,
    .hosts__grid li,
    .steps li,
    .statement h2 {
      animation: rise 1ms linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 30%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ── Responsivt ─────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .bento {
    grid-template-columns: 1fr 1fr;
  }

  .bento__b {
    grid-column: 1 / -1;
    order: -1;
  }

  .bento__c { margin-top: clamp(1.25rem, 5vw, 3rem); }

  .facts { grid-template-columns: 1fr 1fr; }

  .facts li:last-child { grid-column: 1 / -1; }

  .filters__grid { grid-template-columns: 1fr; }

  .howto__head { grid-template-columns: 1fr; }

  .hosts__grid { grid-template-columns: 1fr 1fr; }

  .hosts__grid li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(2.5rem, 9vw, 3.5rem);
  }

  .hero h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); }

  .hero .lede { max-width: 36ch; }

  .device--hero {
    width: min(66vw, 250px);
    justify-self: center;
  }

  .press { margin-top: 1.75rem; }

  .typelist__row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-left: 0 !important;
  }

  .facts { grid-template-columns: 1fr; }

  .tal__list { grid-template-columns: 1fr; gap: 1.4rem; }

  .facts li:last-child { grid-column: auto; }

  .facets div { grid-template-columns: 1fr; }

  .hosts__grid { grid-template-columns: 1fr; }

  .hosts__grid li:last-child { grid-column: auto; }

  .steps { grid-template-columns: 1fr; }

  .bento { grid-template-columns: 1fr; }

  .bento__a,
  .bento__c {
    width: min(72vw, 260px);
    margin-inline: auto;
  }

  .bento__c { margin-top: 0; }

  .device--band { width: min(72vw, 260px); }

  .statement .wrap > * { margin-left: 0; }
}

/* ── Presse ─────────────────────────────────────────────────────────────────
   De færdige beskrivelser skal se ud som noget, der er lagt frem til at blive
   kopieret, ikke som brødtekst. En streg i venstre side er nok. */
.presse-tekst {
  border-left: 3px solid var(--line-soft);
  padding-left: 1.1rem;
}

/* Kontaktblokken på /presse/ med portrættet ved siden af. */
.presse-kontakt {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.presse-kontakt img {
  flex: none;
  width: 104px;
  /* height="853" i markup'en er et præsentationstip og vinder over
     aspect-ratio, hvis ikke højden nulstilles her. Samme grund som .device img. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.85rem;
}

@media (max-width: 32rem) {
  .presse-kontakt { gap: 1rem; }
  .presse-kontakt img { width: 78px; }
}

/* ── Ventelisten til Android ────────────────────────────────────────────────
   Ét stykke indhold to steder: som dialog på forsiden (<dialog class="soon">)
   og som sin egen side på /android/ (main.besked--side). Formular og tak-blok
   ligger side om side i .besked; scriptet bytter dem med hidden. Uden script
   lander formularen på /android/#tak eller #fejl, og :target gør det samme. */
dialog.soon {
  width: min(100% - 2rem, 27rem);
  max-height: min(100% - 2rem, 90dvh);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 6px var(--shadow-1), 0 40px 80px -30px var(--shadow-2);
}

dialog.soon::backdrop {
  background: rgba(22, 21, 15, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: no-preference) {
  dialog.soon[open] { animation: rise 0.5s var(--ease) both; }
}

/* Luften sidder på .besked, ikke på <dialog>: så er et klik, der rammer selve
   dialogen, et klik på sløret - og det lukker. */
dialog.soon .besked {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
}

.besked__luk {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.besked__luk:hover { color: var(--ink); }

.besked__luk:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.besked__luk svg { width: 1rem; height: 1rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-2);
}

.eyebrow .play { width: 1rem; height: 1rem; opacity: 0.55; }

.besked h1,
.besked h2 {
  margin-top: 0.75rem;
  font-size: clamp(1.7rem, 3.2vw, 2.1rem);
  font-weight: 660;
  max-width: 16ch;
}

.besked__lede {
  margin-top: 0.9rem;
  color: var(--ink-2);
  font-size: 1.04rem;
  line-height: 1.5;
}

.besked__form { margin-top: 1.6rem; }

.besked__form label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.besked__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.besked__row input {
  flex: 1 1 11rem;
  min-width: 0;
  padding: 0.68rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
}

.besked__row input::placeholder { color: var(--ink-2); opacity: 0.6; }

.besked__row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.besked__fine {
  margin-top: 1rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.besked__fine a,
.besked__fejl a {
  color: inherit;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.besked__fejl {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--bad);
}

.besked__tak h2,
.besked__tak h3 {
  margin-top: 0.75rem;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 660;
}

.besked__tak p {
  margin-top: 0.9rem;
  color: var(--ink-2);
  font-size: 1.04rem;
}

/* Siden: sidelayoutet (main.page) sætter sin egen luft om afsnit. */
main.besked--side { max-width: 40rem; }

main.besked--side p { margin: 0; }

main.besked--side .besked__lede { margin-top: 1rem; }

main.besked--side .besked__fine { margin-top: 1rem; }

main.besked--side .besked__tak p { margin-top: 0.9rem; }

/* Uden JavaScript: funktionen sender én tilbage til /android/#tak eller
   #fejl, og :target viser den rigtige blok. */
#tak:target,
#fejl:target { display: block; }

.besked:has(#tak:target) .besked__form,
.besked:has(#tak:target) .besked__titel,
.besked:has(#tak:target) .besked__lede { display: none; }

/* ── App Store-knappen med æblet ────────────────────────────────────────────
   Samme kapsel som før, nu med Apples mærke foran, så den og Google Play-
   kapslen er to af samme slags: et mærke og en tekst. */
a.pill--store {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.05rem;
}

a.pill--store .apple {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin-top: -0.1em;
}