/*
  Bardun — bardun.dk landingsside
  Design: Kate, Claude Design-runde 2026-09-06/07, retning 1A ("Dokumentarisk").
  Kilde: Stougaard Plan/09_Udvikling/Byggeplads/Design/landing/LANDING_SPEC_2026-09-07.md

  Tokens genbruges fra Design/tokens.css (samme brand som app og mails).
  Bardun bruges IKKE sammen med STPL's egen designprofil (--stpl-*).
  Ingen af disse variabler må ændres uden at opdatere kildefilen tilsvarende.
*/

:root {
  --bp-bg: #FFFFFF;
  --bp-text-primary: #1B2126;
  --bp-text-secondary: #4B5560;

  --bp-accent-critical: #A63A2B;
  --bp-accent-positive: #3F6B46;
  --bp-accent-warning: #96670D;

  --bp-button-secondary-bg: #EEF2F5;
  --bp-button-secondary-text: var(--bp-text-primary);

  --bp-button-primary-bg: #1B2126;
  --bp-button-primary-text: #FFFFFF;

  --bp-border-subtle: rgba(27, 33, 38, 0.12);

  --bp-focus-ring-color: #1B2126;
  --bp-focus-ring-width: 2px;
  --bp-focus-ring-offset: 2px;

  --bp-font-family: Helvetica, Arial, sans-serif;

  --bp-space-1: 4px;
  --bp-space-2: 8px;
  --bp-space-3: 12px;
  --bp-space-4: 16px;
  --bp-space-5: 24px;
  --bp-space-6: 32px;
  --bp-space-7: 48px;
  --bp-space-8: 64px;

  --bp-radius-card: 8px;
  --bp-radius-button: 6px;

  /* Tilføjet lokalt til landingsiden — IKKE en del af tokens.css endnu.
     Neutral, meget lys gråtone til alternerende sektionsbaggrund, samme
     hue som --bp-text-primary ved lav lysstyrke. Ingen ny accentfarve,
     ingen ny tekst/baggrund-kontrast at verificere (al tekst herpå er de
     samme allerede godkendte par mod hvid, som også består mod denne
     lysere baggrund). Flag til Kate ved review. */
  --bp-section-tint: #F5F6F7;
  --bp-section-muted: #EEF2F5;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--bp-font-family);
  color: var(--bp-text-primary);
  background: var(--bp-bg);
  line-height: 1.5;
  font-size: 16px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--bp-space-5);
  padding-right: var(--bp-space-5);
}

.wrap-narrow {
  max-width: 720px;
}

a {
  color: inherit;
}

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

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Synlig fokusring — mindst lige så synlig som browserens native ring */
a:focus-visible,
button:focus-visible {
  outline: var(--bp-focus-ring-width) solid var(--bp-focus-ring-color);
  outline-offset: var(--bp-focus-ring-offset);
  border-radius: var(--bp-radius-button);
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--bp-border-subtle);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--bp-space-5);
  padding-bottom: var(--bp-space-5);
}

.wordmark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--bp-text-primary);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--bp-space-4);
}

.header-login {
  font-size: 16px;
  text-decoration: none;
  color: var(--bp-text-secondary);
  padding: var(--bp-space-2) var(--bp-space-1);
}

.header-login:hover {
  color: var(--bp-text-primary);
  text-decoration: underline;
}

/* ---------- Eyebrow / labels ---------- */

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-text-secondary);
  margin-bottom: var(--bp-space-3);
}

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

.hero {
  padding-top: var(--bp-space-8);
  padding-bottom: var(--bp-space-8);
}

.hero h1 {
  font-size: 44px;
  max-width: 15ch;
  margin-bottom: var(--bp-space-5);
}

.hero-lead {
  font-size: 18px;
  color: var(--bp-text-secondary);
  max-width: 56ch;
  margin-bottom: var(--bp-space-6);
}

.cta-note {
  font-size: 16px;
  color: var(--bp-text-secondary);
  max-width: 56ch;
  margin-top: var(--bp-space-4);
}

.hero-sub {
  font-size: 16px;
  color: var(--bp-text-secondary);
  max-width: 56ch;
  margin-top: var(--bp-space-5);
}

/* ---------- Buttons / CTA row ---------- */

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bp-space-4) var(--bp-space-5);
}

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: var(--bp-space-4) var(--bp-space-5);
  border-radius: var(--bp-radius-button);
  line-height: 1;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--bp-button-primary-bg);
  color: var(--bp-button-primary-text);
}

.btn-primary:hover {
  background: #2B333A;
}

.btn-on-dark {
  background: #FFFFFF;
  color: var(--bp-text-primary);
}

.btn-on-dark:hover {
  background: #E9ECEF;
}

.cta-phone {
  font-size: 16px;
  color: var(--bp-text-secondary);
}

.contact-cta .cta-phone {
  color: #FFFFFF;
  background: var(--bp-text-primary);
}

.cta-phone a {
  text-decoration: underline;
  color: inherit;
}

/* ---------- Generic section ---------- */

.section {
  padding-top: var(--bp-space-8);
  padding-bottom: var(--bp-space-8);
  border-top: 1px solid var(--bp-border-subtle);
}

.section-tint {
  background: var(--bp-section-tint);
}

.section-muted {
  background: var(--bp-section-muted);
}

.section-lead {
  font-size: 18px;
  color: var(--bp-text-secondary);
  max-width: 64ch;
  margin-top: var(--bp-space-4);
  margin-bottom: var(--bp-space-7);
}

.section h2 {
  font-size: 28px;
  max-width: 20ch;
}

/* ---------- Three-column grid ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bp-space-6);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bp-space-6);
}

.card {
  border-top: 2px solid var(--bp-border-subtle);
  padding-top: var(--bp-space-5);
}

.card h3 {
  font-size: 18px;
  margin-bottom: var(--bp-space-3);
}

.card p {
  color: var(--bp-text-secondary);
  font-size: 16px;
}

/* ---------- Steps (Sådan foregår det) ---------- */

.steps {
  display: flex;
  flex-direction: column;
}

.step {
  display: grid;
  grid-template-columns: 64px 1fr 2fr;
  gap: var(--bp-space-5);
  padding-top: var(--bp-space-6);
  padding-bottom: var(--bp-space-6);
  border-top: 1px solid var(--bp-border-subtle);
}

.step:last-child {
  border-bottom: 1px solid var(--bp-border-subtle);
}

.step-nr {
  font-size: 16px;
  color: var(--bp-text-secondary);
  font-variant-numeric: tabular-nums;
}

.step-body h3 {
  font-size: 18px;
  margin-bottom: var(--bp-space-2);
}

.step-body p {
  color: var(--bp-text-secondary);
  grid-column: 2 / -1;
}

.step-body {
  display: contents;
}

/* ---------- Screenshots ---------- */

.screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bp-space-7);
}

.browser-frame {
  border-radius: var(--bp-radius-card);
  overflow: hidden;
  border: 1px solid var(--bp-border-subtle);
  box-shadow: 0 8px 24px rgba(27, 33, 38, 0.08);
  margin-bottom: var(--bp-space-4);
}

.browser-chrome {
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  padding: var(--bp-space-3) var(--bp-space-4);
  background: var(--bp-section-tint);
  border-bottom: 1px solid var(--bp-border-subtle);
}

.browser-chrome .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bp-border-subtle);
  display: inline-block;
}

.browser-url {
  margin-left: var(--bp-space-3);
  font-size: 12px;
  color: var(--bp-text-secondary);
}

.screen figcaption {
  font-size: 16px;
  color: var(--bp-text-secondary);
}

.screen figcaption strong {
  display: block;
  color: var(--bp-text-primary);
  font-size: 18px;
  margin-bottom: var(--bp-space-2);
}

/* ---------- Video placeholder ---------- */

.video-placeholder {
  aspect-ratio: 16 / 9;
  max-width: 800px;
  background: var(--bp-section-muted);
  border-radius: var(--bp-radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bp-space-3);
  color: var(--bp-text-secondary);
}

.play-icon {
  color: var(--bp-text-secondary);
}

.video-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--bp-text-primary);
}

.video-sub {
  font-size: 16px;
  color: var(--bp-text-secondary);
  text-align: center;
  max-width: 40ch;
  padding: 0 var(--bp-space-5);
}

/* ---------- Split sections (hvor idéen kom fra / sekundært tilbud) ---------- */

.split-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--bp-space-7);
  align-items: center;
}

.split-wrap-reverse {
  grid-template-columns: 1fr 1.2fr;
}

.split-wrap-reverse .split-image {
  order: 0;
}

.split-wrap-reverse .split-text {
  order: 1;
}

.split-text h2 {
  font-size: 28px;
  margin-bottom: var(--bp-space-4);
}

.split-text p {
  color: var(--bp-text-secondary);
  font-size: 16px;
  max-width: 48ch;
}

.lead-strong {
  color: var(--bp-text-primary) !important;
  font-weight: 700;
  font-size: 18px !important;
  margin-bottom: var(--bp-space-3) !important;
}

.photo-placeholder {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--bp-border-subtle);
  border-radius: var(--bp-radius-card);
  background: var(--bp-section-tint);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--bp-space-4);
}

.placeholder-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-text-secondary);
}

/* ---------- Kontakt CTA (sekundært anker, mørk flade) ---------- */

.contact-cta {
  background: var(--bp-text-primary);
  color: #FFFFFF;
  padding-top: var(--bp-space-8);
  padding-bottom: var(--bp-space-8);
}

.contact-cta h2 {
  font-size: 44px;
  color: #FFFFFF;
  background: var(--bp-text-primary);
  margin-bottom: var(--bp-space-4);
}

.contact-cta > .wrap > p {
  color: #FFFFFF;
  background: var(--bp-text-primary);
  font-size: 18px;
  max-width: 56ch;
  margin-bottom: var(--bp-space-6);
}

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

.site-footer {
  border-top: 1px solid var(--bp-border-subtle);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-space-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--bp-space-6);
  padding-bottom: var(--bp-space-6);
}

.footer-address {
  font-size: 14px;
  color: var(--bp-text-secondary);
}

.footer-links {
  display: flex;
  gap: var(--bp-space-5);
  font-size: 14px;
}

.footer-links a {
  text-decoration: underline;
  color: var(--bp-text-secondary);
}

.footer-links a:hover {
  color: var(--bp-text-primary);
}

/* ---------- Legal (privatliv.html) ---------- */

.legal h1 {
  font-size: 28px;
  margin-top: var(--bp-space-3);
  margin-bottom: var(--bp-space-6);
}

.legal h2 {
  font-size: 18px;
  margin-top: var(--bp-space-7);
  margin-bottom: var(--bp-space-3);
}

.legal p {
  color: var(--bp-text-secondary);
  margin-bottom: var(--bp-space-4);
}

.legal a {
  text-decoration: underline;
}

/* ---------- Screen-reader-only ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Prisside: sammenligningsmatrix (pris.html, PRIS_SPEC_v2) ---------- */

.price-table-scroll {
  /* Ingen vandret scroll er kravet — denne wrapper findes kun så en evt.
     ekstremt smal visning (< 375px, uden for testmatrixen) ikke låser
     resten af siden, hvis noget alligevel skulle blive bredere end ventet. */
  width: 100%;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--bp-space-6);
}

.price-table th,
.price-table td {
  text-align: left;
  padding: var(--bp-space-4) var(--bp-space-4);
  border-bottom: 1px solid var(--bp-border-subtle);
  vertical-align: top;
}

.price-table thead th {
  border-bottom: 1px solid var(--bp-border-subtle);
  padding-bottom: var(--bp-space-4);
}

.price-table .th-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--bp-text-primary);
  margin-bottom: var(--bp-space-1);
}

.price-table .th-sub {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--bp-text-secondary);
  text-transform: none;
  letter-spacing: normal;
}

.price-table tbody th {
  font-size: 16px;
  font-weight: 400;
  color: var(--bp-text-secondary);
}

.price-table td {
  font-size: 16px;
  color: var(--bp-text-primary);
}

/* Niveau 2 ("Mellem") — fremhævet med en tynd, mørk ramme, ikke en farve
   eller et badge (Port 2, punkt 7: undgå "anbefalet plan"-sælgersprog). */
.price-table .col-mid {
  border-left: 1px solid var(--bp-text-primary);
  border-right: 1px solid var(--bp-text-primary);
  background: var(--bp-section-tint);
}

.price-table thead th.col-mid {
  border-top: 1px solid var(--bp-text-primary);
}

.price-table .price-row td,
.price-table .price-row th {
  border-bottom: none;
}

.price-table .price-row .col-mid {
  border-bottom: 1px solid var(--bp-text-primary);
}

.price-table .price-row th {
  font-weight: 700;
  color: var(--bp-text-primary);
}

.price-value {
  font-weight: 700;
  font-size: 18px;
  /* Ingen white-space:nowrap og ingen fast bredde — cellen skal kunne
     rumme "fra 24.000 kr." uden ombygning, jf. teknik-kontrakten. */
}

.table-note {
  font-size: 14px;
  color: var(--bp-text-secondary);
  margin-top: var(--bp-space-4);
  max-width: 64ch;
}

/* ---------- Kerne og tilvalg (status-kort med farvet topkant) ---------- */

.status-grid {
  align-items: stretch;
}

.status-card {
  border-top-width: 3px;
  border-top-style: solid;
  padding-top: var(--bp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-4);
}

.status-positive {
  border-top-color: var(--bp-accent-positive);
}

.status-warning {
  border-top-color: var(--bp-accent-warning);
}

.status-critical {
  border-top-color: var(--bp-accent-critical);
}

.status-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-text-secondary);
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-3);
}

.status-list li {
  font-size: 16px;
  color: var(--bp-text-primary);
  padding-bottom: var(--bp-space-3);
  border-bottom: 1px solid var(--bp-border-subtle);
}

.status-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.status-note {
  font-size: 14px;
  color: var(--bp-text-secondary);
  margin-top: auto;
}

/* ---------- Betaling: label/værdi-par ---------- */

.pair-list {
  display: flex;
  flex-direction: column;
}

.pair-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--bp-space-5);
  padding-top: var(--bp-space-5);
  padding-bottom: var(--bp-space-5);
  border-top: 1px solid var(--bp-border-subtle);
}

.pair-row:last-child {
  border-bottom: 1px solid var(--bp-border-subtle);
}

.pair-row dt {
  font-size: 16px;
  font-weight: 700;
  color: var(--bp-text-primary);
}

.pair-row dd {
  margin: 0;
  font-size: 16px;
  color: var(--bp-text-secondary);
}

/* ---------- Faktalinje (laveste visuelle vægt) ---------- */

.fact-line {
  background: var(--bp-section-muted);
  padding-top: var(--bp-space-6);
  padding-bottom: var(--bp-space-6);
}

.fact-text {
  font-size: 14px;
  color: var(--bp-text-secondary);
  max-width: 72ch;
}

/* ---------- FAQ (details/summary, ingen JS) ---------- */

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--bp-border-subtle);
  padding-top: var(--bp-space-4);
  padding-bottom: var(--bp-space-4);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--bp-border-subtle);
}

.faq-item summary {
  font-size: 18px;
  font-weight: 700;
  color: var(--bp-text-primary);
  cursor: pointer;
  padding: var(--bp-space-2) 0;
  list-style: revert;
}

.faq-item summary::marker {
  color: var(--bp-text-secondary);
}

.faq-item summary:focus-visible {
  outline: var(--bp-focus-ring-width) solid var(--bp-focus-ring-color);
  outline-offset: var(--bp-focus-ring-offset);
  border-radius: var(--bp-radius-button);
}

.faq-item p {
  font-size: 16px;
  color: var(--bp-text-secondary);
  margin-top: var(--bp-space-3);
  max-width: 64ch;
}

/* .eyebrow-heading overstyrer bevidst .section h2 / .split-text h2's
   font-size (samme specificitet, men denne regel står sidst) — sektioner
   uden en selvstændig store overskrift ('Hvad det gør', 'Sådan foregår
   det', 'Sådan ser det ud', 'Gennemgang', 'Hvor idéen kom fra') bruger
   selve sektionslabellen som h2, i labelstørrelse, ikke i store-overskrift-
   størrelse. */
.eyebrow-heading {
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-text-secondary);
  max-width: none !important;
  margin-bottom: var(--bp-space-5);
}

/* ==================== Tablet (768px) ==================== */

@media (max-width: 768px) {
  .hero h1 {
    font-size: 34px;
  }

  .section h2 {
    font-size: 24px;
  }

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--bp-space-6);
  }

  .screens {
    grid-template-columns: repeat(2, 1fr);
  }

  .split-wrap,
  .split-wrap-reverse {
    grid-template-columns: 1fr;
  }

  .split-wrap-reverse .split-image {
    order: 0;
  }

  .split-wrap-reverse .split-text {
    order: 1;
  }

  .step {
    grid-template-columns: 48px 1fr;
  }
}

/* ==================== Mobil (375px) ==================== */

@media (max-width: 480px) {
  .wrap {
    padding-left: var(--bp-space-4);
    padding-right: var(--bp-space-4);
  }

  .hero {
    padding-top: var(--bp-space-7);
    padding-bottom: var(--bp-space-7);
  }

  .hero h1 {
    font-size: 28px;
    max-width: none;
  }

  .hero-lead {
    font-size: 16px;
  }

  .section {
    padding-top: var(--bp-space-7);
    padding-bottom: var(--bp-space-7);
  }

  .section h2 {
    font-size: 22px;
    max-width: none;
  }

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

  .cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bp-space-3);
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .contact-cta h2 {
    font-size: 28px;
  }

  .footer-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .pair-row {
    grid-template-columns: 1fr;
    gap: var(--bp-space-2);
  }

  /* ---------- Prisside: matrix stakket til tre niveau-blokke ----------
     Spec (PRIS_SPEC_v2, sektion 3): "tabellen stakkes til tre blokke
     under hinanden, én pr. niveau, med rækkenavnet foran hver værdi —
     ingen vandret scroll." Løses med CSS Grid der omplacerer de
     EKSISTERENDE celler (ingen duplikeret markup): rækkenavn-kolonnen
     (th scope="row" + hjørnecellen) skjules visuelt (fortsat i
     tilgængelighedstræet via samme sr-only-teknik som .sr-only), og
     hver niveau-kolonnes celler får en eksplicit grid-row, så de tre
     niveauer ender som tre sammenhængende blokke i stedet for
     rækkevis. Rækkenavnet vises i stedet foran hver værdi via
     content: attr(data-label) — rent visuelt, ikke en erstatning for
     den rigtige th/scope-relation som skærmlæsere stadig bruger. */

  .price-table,
  .price-table thead,
  .price-table tbody,
  .price-table tr {
    display: contents;
  }

  .price-table {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .price-table thead th:first-child,
  .price-table tbody th[scope="row"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .price-table th,
  .price-table td {
    grid-column: 1;
    border-bottom: 1px solid var(--bp-border-subtle);
  }

  .price-table .col-mid {
    border-left: none;
    border-right: none;
    background: transparent;
  }

  .price-table thead th.col-mid {
    border-top: none;
  }

  .price-table .price-row .col-mid {
    border-bottom: 1px solid var(--bp-border-subtle);
  }

  /* Niveau 1 — "Få byggesager" (kolonne 2 i markup) */
  .price-table thead th:nth-child(2) { grid-row: 1; margin-top: 0; }
  .price-table tbody tr:nth-child(1) td:nth-child(2) { grid-row: 2; }
  .price-table tbody tr:nth-child(2) td:nth-child(2) { grid-row: 3; }
  .price-table tbody tr:nth-child(3) td:nth-child(2) { grid-row: 4; }
  .price-table tbody tr:nth-child(4) td:nth-child(2) { grid-row: 5; }
  .price-table tbody tr:nth-child(5) td:nth-child(2) { grid-row: 6; }
  .price-table tbody tr:nth-child(6) td:nth-child(2) { grid-row: 7; }

  /* Niveau 2 — "Mellem" (kolonne 3), egen blok, adskilt med luft foroven */
  .price-table thead th:nth-child(3) { grid-row: 8; padding-top: var(--bp-space-7); }
  .price-table tbody tr:nth-child(1) td:nth-child(3) { grid-row: 9; }
  .price-table tbody tr:nth-child(2) td:nth-child(3) { grid-row: 10; }
  .price-table tbody tr:nth-child(3) td:nth-child(3) { grid-row: 11; }
  .price-table tbody tr:nth-child(4) td:nth-child(3) { grid-row: 12; }
  .price-table tbody tr:nth-child(5) td:nth-child(3) { grid-row: 13; }
  .price-table tbody tr:nth-child(6) td:nth-child(3) { grid-row: 14; }

  /* Niveau 3 — "Mange byggesager" (kolonne 4), egen blok */
  .price-table thead th:nth-child(4) { grid-row: 15; padding-top: var(--bp-space-7); }
  .price-table tbody tr:nth-child(1) td:nth-child(4) { grid-row: 16; }
  .price-table tbody tr:nth-child(2) td:nth-child(4) { grid-row: 17; }
  .price-table tbody tr:nth-child(3) td:nth-child(4) { grid-row: 18; }
  .price-table tbody tr:nth-child(4) td:nth-child(4) { grid-row: 19; }
  .price-table tbody tr:nth-child(5) td:nth-child(4) { grid-row: 20; }
  .price-table tbody tr:nth-child(6) td:nth-child(4) { grid-row: 21; }

  /* Rækkenavnet foran hver værdi, rent visuelt (attr-baseret, ingen
     duplikeret markup) — hver td har allerede data-label fra HTML'en. */
  .price-table td[data-label]::before {
    content: attr(data-label) ": ";
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bp-text-secondary);
    margin-bottom: var(--bp-space-1);
  }

  .price-table .price-row td[data-label]::before {
    display: inline;
    text-transform: none;
    font-size: 16px;
    font-weight: 400;
  }
}