:root {
  --navy: #254075;     /* figurens streg */
  --blue: #92B8F6;     /* figurens krop */
  --coral: #EE6A48;    /* knapper */
  --coral-soft: #FADBCD;
  --bg: #FFF6F0;
  --ink: #1C2333;
  --muted: #56607A;
}
/* Fraunces med ejerens indstillinger */
.display {
  font-family: "Fraunces", Georgia, serif; font-weight: 800;
  font-variation-settings: "SOFT" 100, "WONK" 1; font-optical-sizing: auto;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.5;
}
main { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }

/* Toppen: logo til venstre, menu til højre */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: clamp(63px, 18vw, 84px); height: auto; }
.wordmark { font-size: clamp(36px, 10vw, 46px); letter-spacing: -0.5px; color: var(--navy); }

h1 {
  font-size: clamp(36px, 10.2vw, 64px);
  line-height: 1.12; letter-spacing: -0.5px;
  margin: 0 0 12px; color: var(--navy);
}
/* Buet, håndtegnet streg under et ord i overskriften */
.swoosh { position: relative; white-space: nowrap; }
.swoosh::after {
  content: ""; position: absolute; left: -3%; right: -3%; bottom: -0.2em; height: 0.26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16 C 50 4, 130 2, 196 12' fill='none' stroke='%23EE6A48' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  z-index: -1;
}
.hero h1 { position: relative; z-index: 0; font-weight: 500; }
.hero h1 .swoosh { font-weight: 800; }
.lead { font-size: 18px; color: var(--muted); margin: 0; }
.hero { margin-bottom: 28px; }

.card {
  background: #fff; border-radius: 24px; padding: 28px 24px;
  border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--navy);
}
.steps-label { font-size: 15px; color: var(--muted); margin: 0; }
.steps-value {
  font-size: 56px; line-height: 1; color: var(--navy);
  margin: 6px 0 4px; font-variant-numeric: tabular-nums;
}
.steps-value small { font-family: "DM Sans", sans-serif; font-size: 18px; font-weight: 500; color: var(--muted); }
.meta { color: var(--muted); margin: 0 0 20px; }

input[type=range] {
  width: 100%; appearance: none; height: 8px; border-radius: 99px;
  background: linear-gradient(to right, var(--navy) var(--fill, 30%), var(--coral-soft) var(--fill, 30%));
  outline-offset: 6px;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 4px solid var(--navy); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 4px solid var(--navy); cursor: pointer;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip {
  font: inherit; font-size: 15px; font-weight: 700;
  border: 2px solid var(--coral-soft); background: var(--bg); color: var(--ink);
  border-radius: 99px; padding: 6px 14px; cursor: pointer;
}
.chip[aria-pressed=true] { background: var(--navy); border-color: var(--navy); color: #fff; }

.go {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; margin-top: 28px; padding: 22px 24px;
  font-size: clamp(18px, 5.2vw, 22px); white-space: nowrap;
  color: #fff; background: var(--coral);
  border: 3px solid var(--navy); border-radius: 20px; cursor: pointer;
  box-shadow: 0 6px 0 var(--navy);
  transition: transform .08s, box-shadow .08s, background .2s;
}
.go:hover { background: #F07A5B; }
.go:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--navy); }
.go:disabled { opacity: .7; cursor: wait; }
.go svg { width: 26px; height: 26px; flex: none; }
#go { font-size: clamp(24px, 7vw, 30px); gap: 8px; }
#go .chevron { width: .62em; height: .8em; transform: translateY(.1em); transition: transform .15s; }
#go:hover .chevron { transform: translate(3px, .1em); }

[hidden] { display: none !important; }

/* Tændstikmanden, der går, mens ruten bliver lavet */
.walker { margin-top: 20px; }
.stick { display: block; width: 100%; max-width: 140px; height: auto; margin: 0 auto; overflow: visible; }
.stick line, .stick circle { stroke: var(--navy); stroke-width: 6; stroke-linecap: round; fill: #fff; }
.stick .ground { stroke: var(--coral); stroke-width: 4; stroke-dasharray: 12 12; animation: ground .5s linear infinite; }
.stick .man { animation: bob .5s ease-in-out infinite; }
.stick .leg { transform-origin: 100px 70px; animation: leg 1s ease-in-out infinite; }
.stick .shin { transform-origin: 100px 91px; animation: shin 1s ease-in-out infinite; }
.stick .arm { transform-origin: 100px 40px; animation: arm 1s ease-in-out infinite; }
.stick .b, .stick .b .shin { animation-delay: -.5s; }
@keyframes ground { to { stroke-dashoffset: 24; } }
@keyframes bob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-2px); } }
@keyframes leg { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(28deg); } }
@keyframes shin { 0%, 50%, 100% { transform: rotate(0deg); } 75% { transform: rotate(50deg); } }
@keyframes arm { 0%, 100% { transform: rotate(30deg); } 50% { transform: rotate(-30deg); } }
@media (prefers-reduced-motion: reduce) { .stick * { animation: none !important; } }

/* Spørgsmålet om placering står i stedet for skyder og hurtigvalg, så knappen ikke flytter sig */
.card.asking #slider, .card.asking .chips { display: none; }
.loc-ask { display: flex; flex-direction: column; justify-content: center; gap: 6px; margin-top: 8px; }
.loc-row { display: flex; align-items: center; gap: 10px; margin: 0; }
.loc-pin svg { width: 34px; height: 34px; display: block; flex: none; }
.loc-title { font-size: 24px; line-height: 1.15; color: var(--navy); }
.loc-text { color: var(--muted); margin: 0; font-size: 15px; }
.loc-hint {
  align-self: flex-start; padding: 4px 10px; border-radius: 12px; background: var(--coral-soft);
  color: var(--navy); font-size: 15px; animation: hint 1.6s ease-in-out infinite;
}
@keyframes hint { 50% { transform: translateY(-3px); } }
.loc-address { display: block; margin: 14px auto 0; }
/* Den længere tekst "Brug min placering" får en mindre skrift, så den ikke virker klemt */
.card.asking #go { font-size: clamp(20px, 5.6vw, 24px); }

/* Hvis placeringen er blokeret */
.loc-box { margin-top: 22px; text-align: center; }
.loc-box .loc-pin svg { width: 48px; height: 48px; margin: 0 auto 8px; }
.loc-box .loc-title { display: block; font-size: 24px; margin: 0 0 6px; }
.loc-box .loc-text { margin: 0 auto; max-width: 36ch; }

/* Besked over knappen, når man skal trykke igen */
.loc-note {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 12px 14px;
  border-radius: 14px; background: var(--coral-soft); color: var(--navy); font-size: 15px;
}
.loc-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 700;
}
.loc-note + .go { margin-top: 14px; }
.go.nudge { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 6px 0 var(--navy), 0 0 0 0 rgba(238,106,72,.45); } 50% { box-shadow: 0 6px 0 var(--navy), 0 0 0 10px rgba(238,106,72,0); } }
@media (prefers-reduced-motion: reduce) { .loc-hint, .go.nudge { animation: none; } }

/* Knappen til Google Maps, når ruten er klar */
.choice { margin-top: 24px; text-align: center; }
.choice-title { font-size: 30px; line-height: 1.1; color: var(--navy); margin: 0; }
.choice-text { color: var(--muted); margin: 4px 0 16px; }
.choice-buttons { display: grid; gap: 14px; }
.map-btn {
  display: flex; align-items: center; justify-content: center; padding: 18px 8px;
  font-size: clamp(17px, 4.8vw, 21px); white-space: nowrap; text-decoration: none; color: #fff;
  background: var(--coral); border: 3px solid var(--navy); border-radius: 18px; box-shadow: 0 6px 0 var(--navy);
  transition: transform .08s, box-shadow .08s;
}
.map-btn { gap: 10px; }
/* Googles officielle Google Maps-ikon, uændret, i en hvid cirkel */
.gm-icon { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: #fff;
           border: 2px solid var(--navy); display: grid; place-items: center; }
.gm-icon svg { height: 62%; width: auto; display: block; }
.map-btn:hover { background: #F07A5B; }
.map-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--navy); }
.again {
  margin-top: 20px; font: inherit; font-weight: 700; color: var(--navy); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.status { margin: 14px 0 0; font-size: 15px; color: var(--muted); text-align: center; }
.status:empty { display: none; }
.status.error { color: #A33A2B; }

.address { display: none; margin-top: 16px; gap: 8px; }
.address.show { display: flex; }
.address input {
  flex: 1; min-width: 0; font: inherit; padding: 12px 14px;
  border: 2px solid var(--navy); border-radius: 12px; background: #fff;
}
.address button {
  font: inherit; font-weight: 700; padding: 0 18px; border: 2px solid var(--navy); border-radius: 12px;
  background: var(--coral); color: #fff; cursor: pointer;
}

.how { margin-top: 48px; }
.how h2 { font-size: 26px; color: var(--navy); margin: 0 0 16px; }
.how ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.how li { display: flex; gap: 14px; align-items: flex-start; }
.how li span {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--coral-soft); color: var(--navy);
}
.note { margin-top: 28px; font-size: 14px; color: var(--muted); }
footer { margin-top: 40px; font-size: 13px; color: var(--muted); text-align: center; }

/* Menu */
.menu { position: relative; margin-right: 12px; }
.menu summary {
  list-style: none; cursor: pointer; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; background: #fff; color: var(--navy);
  border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.menu summary svg { width: 24px; height: 24px; }
.menu .icon-close { display: none; }
.menu[open] .icon-open { display: none; }
.menu[open] .icon-close { display: block; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 10; width: max-content; min-width: 230px;
  background: #fff; border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--navy); border-radius: 20px;
  padding: 8px; display: grid;
}
.menu-panel a {
  color: var(--navy); text-decoration: none; font-size: 21px; padding: 10px 14px; border-radius: 12px;
}
.menu-panel a:hover { background: var(--coral-soft); }
.menu-panel a[aria-current=page] { background: var(--navy); color: #fff; }

/* Undersider */
.page h1 { font-weight: 500; font-size: clamp(34px, 9vw, 54px); }
.page h1 .swoosh { font-weight: 800; }
.page h1 { position: relative; z-index: 0; }
.prose { font-size: 17px; }
.prose h2 { font-size: 26px; line-height: 1.15; color: var(--navy); margin: 40px 0 10px; }
.prose p { margin: 0 0 14px; }
.facts { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.facts li {
  background: #fff; border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy);
  border-radius: 18px; padding: 14px 16px;
}
.facts li b { display: block; color: var(--navy); font-size: 19px; margin-bottom: 2px; }
.big-number {
  background: var(--coral); color: #fff; border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--navy);
  border-radius: 24px; padding: 22px 20px; margin: 18px 0 22px;
}
.big-number strong { display: block; font-size: clamp(40px, 12vw, 60px); line-height: 1; margin-bottom: 6px; }
.cta { text-decoration: none; margin-top: 36px; }
.sources { margin-top: 36px; font-size: 14px; color: var(--muted); }
.sources a { color: var(--navy); }
.sources ul { padding-left: 18px; margin: 6px 0 0; }

/* Mobil: strammere forside, så "Find min rute" er synlig uden at rulle (logoet beholder sin størrelse) */
@media (max-width: 600px) {
  .site-header { margin-bottom: 28px; }
  .hero { margin-bottom: 26px; }
  .lead { font-size: 17px; }
  .card { padding: 20px 20px 24px; }
  .steps-value { font-size: 48px; }
  .meta { margin-bottom: 14px; }
  .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
  .chip { padding: 6px 0; text-align: center; }
  .go { margin-top: 20px; }
}

/* Bogsiden */
.book {
  background: var(--navy); color: #fff; border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--coral);
  border-radius: 24px; padding: 22px 20px; margin: 28px 0 8px; position: relative;
}
/* Bogens forside i øverste højre hjørne, så den stikker lidt ud over boksen */
.book-cover {
  position: absolute; top: -30px; right: 16px; width: clamp(84px, 24vw, 120px); height: auto;
  border: 3px solid var(--navy); border-radius: 6px; box-shadow: 0 6px 0 var(--coral);
}
.book-title, .book-sub { padding-right: clamp(100px, 30vw, 140px); }
.book-title { font-size: clamp(34px, 10vw, 48px); line-height: 1; margin: 0; }
.book-sub { margin: 6px 0 16px; color: var(--coral-soft); font-size: 18px; }
.book-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 16px; }
.book-facts dt { color: var(--blue); }
.book-facts dd { margin: 0; }
.book-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 12px 18px;
  color: var(--navy); background: var(--blue); text-decoration: none; font-size: 19px;
  border: 3px solid var(--navy); border-radius: 16px; box-shadow: 0 4px 0 var(--navy);
}
.book-link:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.author img {
  display: block; width: 100%; height: auto; border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--navy);
}
.author { margin: 8px 0 18px; text-align: center; }
.author img { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; margin: 0 auto; }
.author figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* ============================================================
   Desktop-landingpage (fra 900 px). Mobil er uændret: de nye
   dele herunder er skjult på smalle skærme.
   ============================================================ */
.top-nav, .perks, .why, .book-band { display: none; }

@media (min-width: 900px) {
  main { max-width: 1160px; padding: 28px 40px 72px; }
  /* Undersider: toppen i fuld bredde, teksten i en behagelig læsebredde */
  .page > :not(.site-header) { max-width: 760px; margin-left: auto; margin-right: auto; }
  .page .book { margin-top: 36px; }

  /* Toppen: menupunkter i stedet for menuknappen */
  .menu { display: none; }
  .site-header { margin-bottom: 24px; }
  .top-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); margin-right: 24px; }
  .top-nav a { white-space: nowrap; color: var(--navy); text-decoration: none; font-size: clamp(16px, 1.6vw, 19px); padding: 6px 0; border-bottom: 3px solid transparent; }
  .top-nav a:hover, .top-nav a[aria-current=page] { border-bottom-color: var(--coral); }
  .top-nav .top-cta {
    color: #fff; background: var(--coral); padding: 10px clamp(14px, 1.6vw, 20px); border: 3px solid var(--navy);
    border-radius: 14px; box-shadow: 0 4px 0 var(--navy);
  }
  .top-nav .top-cta:hover { border-bottom-color: var(--navy); background: #F07A5B; }
  .top-nav .top-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }

  /* Hero: tekst til venstre, rutefinderen til højre */
  .hero-grid {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); align-items: start;
    padding: 56px 0 72px;
  }
  .hero-grid::before {
    content: ""; position: absolute; z-index: -1; right: -24px; top: 2%; width: 52%; aspect-ratio: 1;
    border-radius: 50%; background: var(--coral-soft); opacity: .6;
  }
  .hero { margin: 0; }
  .hero h1 { font-size: clamp(56px, 5.6vw, 76px); line-height: 1.06; margin-bottom: 20px; }
  .lead { font-size: 21px; max-width: 30ch; }
  .perks { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 28px 0 0; }
  .perks li {
    display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy);
    background: #fff; border: 2px solid var(--navy); border-radius: 99px; padding: 8px 16px 8px 12px;
  }
  .perks li::before {
    content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--coral)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  }
  .hero-grid .card { padding: 32px 30px; }

  /* Sådan virker det: tre kort på række */
  .how { margin-top: 40px; }
  .how h2, .why h2 { font-size: 40px; text-align: center; margin-bottom: 32px; }
  .how ol { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .how li {
    flex-direction: column; gap: 14px; font-size: 18px; background: #fff; border: 3px solid var(--navy);
    box-shadow: 0 6px 0 var(--navy); border-radius: 24px; padding: 26px 24px;
  }
  .how li span { width: 44px; height: 44px; font-size: 20px; background: var(--coral); color: #fff; }
  .note { text-align: center; max-width: 62ch; margin: 28px auto 0; }

  /* Små skridt, stor forskel */
  .why { display: block; margin-top: 96px; }
  .why h2 { position: relative; z-index: 0; color: var(--navy); }
  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .stat {
    display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink);
    background: var(--navy); color: #fff; border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--coral);
    border-radius: 24px; padding: 28px 26px; transition: transform .12s;
  }
  a.stat:hover { transform: translateY(-3px); }
  .stat strong { font-size: 56px; line-height: 1; color: var(--coral-soft); }
  .stat span { font-size: 17px; line-height: 1.45; flex: 1; }
  .stat em { font-style: normal; font-weight: 700; color: var(--blue); }
  a.stat em::after { content: " ›"; }

  /* Gå-bogen-båndet */
  .book-band {
    display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: center; margin-top: 96px;
    background: var(--coral-soft); border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--navy);
    border-radius: 32px; padding: 40px 56px;
  }
  .book-band img { width: 100%; height: auto; border: 3px solid var(--navy); border-radius: 6px; box-shadow: 0 6px 0 var(--navy); }
  .band-kicker { margin: 0 0 6px; font-weight: 700; color: var(--coral); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
  .book-band h2 { font-size: 38px; line-height: 1.1; color: var(--navy); margin: 0 0 12px; }
  .book-band p { font-size: 18px; max-width: 46ch; margin: 0 0 20px; }

  footer { margin-top: 72px; font-size: 15px; }
}

/* ============================================================
   Undersider på desktop (fra 900 px): kolonner, ikoner og bånd.
   Ikoner og ekstra tal er skjult på mobil, så mobil er uændret.
   ============================================================ */
.ico, .mini-stat { display: none; }

@media (min-width: 900px) {
  .page > :not(.site-header) { max-width: 1060px; }
  .page .hero { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; padding: 24px 0 8px; }
  .page .hero .lead { margin: 0 auto; max-width: 52ch; }
  .page .prose p { max-width: 64ch; }
  .page .sources { max-width: 760px; }
  .page .cta { max-width: 380px; }

  .blk { margin-top: 72px; }
  .page .prose h2 { font-size: 32px; }
  .blk > h2 { margin-top: 0; }

  /* Ikoner i rund koral cirkel */
  .ico { display: block; width: 56px; height: 56px; margin-bottom: 12px; flex: none; }
  .ico svg { width: 100%; height: 100%; fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .ico svg .acc { stroke: var(--coral); }

  /* Kort ved siden af hinanden, ikon øverst */
  .blk-cards > h2, .blk-cards > p { text-align: center; margin-left: auto; margin-right: auto; }
  .blk-cards .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 28px; }
  .blk-cards .facts li { flex: 0 1 calc((100% - 44px) / 3); padding: 24px 22px; font-size: 16px; }
  .blk-four .facts li { flex-basis: calc((100% - 66px) / 4); }
  .blk-cards .facts li b, .blk-rec .facts li b { font-size: 24px; line-height: 1.15; margin-bottom: 8px; }

  /* To kort pr. række med ikonet til venstre */
  .blk-two .facts li { flex-basis: calc((100% - 22px) / 2); display: grid; grid-template-columns: auto 1fr; column-gap: 18px; }
  .blk-two .facts li .ico { grid-row: span 2; margin: 0; }
  .blk-two .facts li b { align-self: end; }

  /* Tekst til venstre, stor boks til højre */
  .blk-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 56px; align-items: center; }
  .blk-split > :not(.big-number):not(.mini-stat) { grid-column: 1; }
  .blk-split > .big-number, .blk-split > .mini-stat { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .blk-split .big-number { transform: rotate(-1.5deg); }

  /* Anbefalingen: stor boks til venstre, tre punkter til højre */
  .blk-rec { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 40px; align-items: start; }
  .blk-rec > h2 { grid-column: 1 / -1; text-align: center; margin-bottom: 28px; }
  .blk-rec > .big-number { margin: 0; padding: 36px 32px; font-size: 18px; display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
  .blk-rec .facts { margin: 0; }
  .blk-rec .facts li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
  .blk-rec .facts li .ico { grid-row: span 2; margin: 0; width: 48px; height: 48px; }

  /* Lille tal-boks ved "Hvad betyder det i skridt?" */
  .mini-stat { display: block; background: #fff; border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--coral);
               border-radius: 24px; padding: 28px; text-align: center; font-size: 18px; color: var(--muted); }
  .mini-stat strong { display: block; font-size: 64px; line-height: 1; color: var(--coral); margin-bottom: 8px; }

  /* Bånd med ikon til venstre */
  .blk-band { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: start;
              background: var(--coral-soft); border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--navy);
              border-radius: 28px; padding: 36px 40px; }
  .blk-band > :not(.band-ico) { grid-column: 2; }
  .blk-band > .band-ico { grid-row: 1 / span 4; width: 72px; height: 72px; margin: 0; }
  .blk-band p:last-child { margin-bottom: 0; }
  .blk-center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .blk-center > :not(.band-ico) { grid-column: 1; }
  .blk-center > .band-ico { grid-row: auto; margin-bottom: 14px; }
  .blk-center p { margin-left: auto; margin-right: auto; }

  /* Gå-bogen: bogkortet og introen side om side */
  .book-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; margin-top: 48px; }
  .book-intro .book { margin: 0; order: 2; }
  .book-intro .intro-text h2 { margin-top: 0; }

  /* Om forfatteren: alt centreret oven på hinanden med god luft */
  .blk-author { text-align: center; margin-top: 104px; margin-bottom: 104px; }
  .blk-author > h2 { margin-bottom: 24px; }
  .blk-author > .author { margin: 0 auto 24px; }
  .blk-author .author img { width: 200px; height: 200px; }
  .blk-author > p { margin-left: auto; margin-right: auto; max-width: 58ch; }
}