/* Boligestimat — design tokens fra Målestok-referencen */
:root {
  --paper: #f4f0e5;
  --paper-line: rgba(24, 36, 32, 0.05);
  --card: #fbf8f0;
  --ink: #182420;
  --ink-soft: #45514a;
  /* Var #7a8378. Det gav 3,45:1 på --paper og 3,70:1 på --card, altså under
     WCAG AA's 4,5:1, og tokenet bærer al sekundærtekst: tabelhoveder, kilde-
     noter, fodnoter, brødkrummer, inaktive trin-tabs og bundteksten. #636b61
     giver 4,85:1 på --paper og 5,20:1 på --card. Lysn den ikke igen. */
  --muted: #636b61;
  --line: #d9d2bf;
  --line-soft: #e6e0cf;
  --green-950: #0e2c21;
  --green-900: #12362a;
  --green-700: #1c5138;
  --green-300: #9cc5af;
  --band: rgba(156, 197, 175, 0.55);
  /* Mørknet fra #d64a20, som lå på 3,79:1 mod papiret og 4,07:1 mod kortet
     og altså faldt under AA. Bruges kun på lyse flader: det mørke kort har
     sin egen --accent-bright, der består. Samme kulør, kun lysheden er ned. */
  --accent: #c24019;
  --accent-bright: #ff6b45;
  --cream-on-dark: #f2efe3;
  /* Var #5a78ff. Hvid tekst på den gav 3,77:1, og betalingsknappen er 15px/600,
     altså ikke stor tekst, så kravet er 4,5:1. Samme kulør og mætning, blot
     mørkere (HSL 229/100/62): #3d60ff giver 4,87:1 med hvid. */
  --mobilepay: #3d60ff;
  --sans: "Neue Haas Grotesk", "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* header.site er sticky og 63px høj (62px indhold + 1px kant). Uden det her
   ruller et ankerspring målet helt op til viewportens top, hvor headeren
   ligger oven på det: feltet får fokus, men brugeren kan ikke se, hvad han
   skriver i. Gælder alle ankre, også /#faktorer og /#pris. */
html { scroll-padding-top: 80px; }

/* Synligt fokus. Browserens 1px-ring er for tynd og for svag, og på den
   aktive trin-tab bliver den blå på mørkegrøn. 2px grøn med afstand giver
   8,08:1 mod --paper. Fjern ikke uden at sætte noget bedre i stedet. */
:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Inde i det mørkegrønne kort ville den grønne ring forsvinde i baggrunden. */
.card-dark :focus-visible { outline-color: var(--cream-on-dark); }

/* Tilgængelig for skærmlæsere, usynlig på skærmen. Bruges til analysesidens
   h1: siden er et trinflow, hvor hvert trin har sin egen h2, så uden den her
   begyndte overskriftshierarkiet på niveau 2. Brug ikke display: none, så
   ryger den også ud af tilgængelighedstræet. */
.visuelt-skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, var(--paper-line) 31px 32px);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1, h2 { letter-spacing: -0.02em; line-height: 1.06; }
h1 { font-size: clamp(38px, 5vw, 58px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
.green { color: var(--green-700); }

/* ---------- header ---------- */
header.site {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 62px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.logo svg { display: block; }
nav.main {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
}
nav.main a { text-decoration: none; color: var(--ink-soft); }
nav.main a:hover { color: var(--ink); }
.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 2px;
}

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
/* Dobbelt klasse (0,2,0) med vilje: sidernes generiske linkfarve — main.guide a
   og main.legal a (0,1,2) — slår ellers denne, så knapteksten bliver grøn på
   grøn og dermed usynlig. Forkort ikke til .btn-primary. */
.btn.btn-primary { background: var(--green-700); color: var(--cream-on-dark); }
.btn-primary:hover { background: var(--green-900); }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-soft); }
.btn-pay { background: var(--mobilepay); color: #fff; width: 100%; padding: 14px; font-size: 15px; }
.btn-block { width: 100%; padding: 14px; }
header.site .btn { padding: 9px 16px; font-size: 13px; }

/* ---------- hero ---------- */
.hero { padding: 76px 0 88px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: start; }
.hero h1 { margin: 18px 0 20px; }
.hero p.lead { font-size: 16.5px; color: var(--ink-soft); max-width: 46ch; }
.url-form { margin-top: 30px; }
.url-form label { display: block; margin-bottom: 8px; }
.url-row { display: flex; gap: 10px; position: relative; }
.url-row input {
  flex: 1;
  font-family: var(--mono);
  font-size: 13px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
}
.url-row input:focus { outline: 2px solid var(--green-700); outline-offset: -1px; }
/* Ankermålet for CTA'en på forsiden og på alle 43 landingssider (/#listing-url).
   Lægges oven i html's scroll-padding-top, så der bliver plads til feltets
   forklarende label ca. 47px længere oppe. Ellers lander labelen bag headeren.
   Målt: 64px er sat efter 390px, hvor labelen ombryder til tre linjer og
   fylder ~59px. Sæt den ikke ned. */
#listing-url { scroll-margin-top: 64px; }
.price-note { margin-top: 12px; font-size: 13px; color: var(--ink-soft); }

/* adresse-autocomplete (dropdown under .url-row) */
.ac-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  /* En opgang kan have snesevis af enheder. Loftet gør listen scrollbar,
     og x-aksen holdes skjult, så de afrundede hjørner stadig klipper.
     Skriv ikke "overflow: hidden" her igen: det nulstiller y-aksen, og
     så ruller siden bag ved i stedet for listen. overscroll-behavior
     stopper desuden rullningen i at smitte af på siden ved bunden. */
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 16px 34px -20px rgba(24, 36, 32, 0.5);
}
.ac-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--line-soft); }
.ac-item.active { background: var(--green-700); color: var(--cream-on-dark); }
.ac-item .pc { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.ac-item.active .pc { color: var(--green-300); }
.ac-note { padding: 10px 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-soft);
  background: transparent;
}

/* ---------- dark demo/verdict card ---------- */
.card-dark {
  background: var(--green-900);
  color: var(--cream-on-dark);
  border-radius: 6px;
  padding: 26px 28px;
  box-shadow: 0 18px 40px -18px rgba(14, 44, 33, 0.55);
}
.card-dark .card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--green-300);
  margin-bottom: 18px;
}
.verdict { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-bright); }
.card-dark .verdict-sub { margin-top: 10px; font-size: 13.5px; color: rgba(242, 239, 227, 0.82); max-width: 42ch; }
.card-dark .card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(156, 197, 175, 0.25);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green-300);
}
.card-dark .card-foot a { color: var(--cream-on-dark); text-decoration: none; font-family: var(--sans); font-size: 13px; font-weight: 600; }
.card-dark .card-foot a:hover { color: #fff; }

/* interval visualisering (delt mellem kort) */
/* Mærkerne placeres i procent uden kollisionshåndtering, så når udbudsprisen
   ligger inden for ca. 2 % af estimatet (netop "fair pris"-tilfældet) falder
   de to talpar oven i hinanden og bliver ulæselige. Udbudsmærkets tal og
   etiket ligger derfor permanent i deres egen række, over henholdsvis under
   estimatets. Højden og topmargenen er øget tilsvarende: sæt dem ikke ned
   igen uden at flytte rækkerne med. */
.interval { position: relative; margin: 44px 0 6px; height: 104px; }
.interval .track { position: absolute; top: 30px; left: 0; right: 0; height: 2px; background: rgba(156, 197, 175, 0.3); }
.interval .band { position: absolute; top: 26px; height: 10px; border-radius: 4px; background: var(--band); }
.interval .mark { position: absolute; top: 20px; height: 22px; width: 2px; background: var(--cream-on-dark); }
.interval .mark.udbud { background: none; border-left: 2px dashed var(--accent-bright); }
.interval .mark .val {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; white-space: nowrap; color: var(--cream-on-dark);
}
.interval .mark .lbl {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; white-space: nowrap; color: var(--green-300);
}
.interval .mark.udbud .val, .interval .mark.udbud .lbl { color: var(--accent-bright); }
/* Egen række til udbudsmærket, jf. kommentaren ved .interval ovenfor. */
.interval .mark.udbud .val { top: -38px; }
.interval .mark.udbud .lbl { top: 44px; }
.interval .end { position: absolute; top: 82px; font-family: var(--mono); font-size: 10px; color: var(--green-300); }
.interval .end.lo { left: 0; } .interval .end.hi { right: 0; }
.interval .mid { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--green-300); }

/* lys variant af interval (justér-kortet) */
.card-light .interval .track { background: var(--line); }
.card-light .interval .band { background: rgba(28, 81, 56, 0.28); }
.card-light .interval .mark { background: var(--ink); }
.card-light .interval .mark.udbud { background: none; border-left-color: var(--accent); }
.card-light .interval .mark .val { color: var(--ink); }
.card-light .interval .mark .lbl, .card-light .interval .end, .card-light .interval .mid { color: var(--muted); }
.card-light .interval .mark.udbud .val, .card-light .interval .mark.udbud .lbl { color: var(--accent); }

/* ---------- sektioner ---------- */
section.block { border-top: 1px solid var(--line); padding: 84px 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split .intro p { font-size: 15px; color: var(--ink-soft); max-width: 48ch; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 44px; }
.section-head p { font-size: 15px; color: var(--ink-soft); }

/* mikroplacering */
.map-fig { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 18px; }
.map-fig svg { display: block; width: 100%; height: auto; }
.map-fig figcaption { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.bars { display: flex; flex-direction: column; gap: 18px; }
.bar-row { display: grid; grid-template-columns: 175px 1fr 92px; gap: 16px; align-items: center; }
.bar-row .name { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.bar-row .track { position: relative; height: 8px; background: var(--line-soft); border-radius: 4px; }
.bar-row .fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--green-700); }
.bar-row .val { font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; }
.callout {
  margin-top: 30px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: var(--card);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.callout strong { color: var(--ink); }

/* faktorgrid */
.factors { border: 1px solid var(--line); background: var(--card); border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); }
.factor { padding: 22px 24px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.factor:nth-child(3n) { border-right: none; }
.factor:nth-child(n+7) { border-bottom: none; }
.factor .w { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.factor .w.neg { color: var(--accent); }
.factor .t { margin-top: 6px; font-size: 14.5px; font-weight: 600; }
.factor .s { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.footnote { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* pris-strip */
.pris-strip { text-align: center; max-width: 560px; margin: 0 auto; }
.pris-strip .big { font-size: clamp(40px, 5vw, 56px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 12px; }
.pris-strip p { color: var(--ink-soft); font-size: 15px; margin-bottom: 26px; }

footer.site { border-top: 1px solid var(--line); padding: 30px 0 44px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
footer.site a { color: var(--ink-soft); text-decoration: none; }
footer.site a:hover { color: var(--ink); }

/* juridiske sider */
main.legal { max-width: 720px; padding-top: 56px; padding-bottom: 80px; }
main.legal h1 { margin: 14px 0 8px; font-size: clamp(30px, 4vw, 42px); }
main.legal h2 { font-size: 19px; margin: 34px 0 10px; }
main.legal p { font-size: 15px; color: var(--ink-soft); margin-bottom: 12px; max-width: 65ch; }
main.legal p strong { color: var(--ink); }
main.legal a { color: var(--green-700); }

/* ---------- analyse-flow ---------- */
/* Bevarer .wrap's vandrette padding — ellers går indholdet til kanten. */
.flow { padding-top: 46px; padding-bottom: 90px; }
.steps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.step-tab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.step-tab.active { background: var(--green-900); border-color: var(--green-900); color: var(--cream-on-dark); }
.step-tab.done { color: var(--ink); border-color: var(--ink-soft); }
.step-tab:disabled { opacity: 0.45; cursor: default; }
.panel { display: none; }
/* Trinene tones ind, så skiftet læses som ét flow og ikke som en ny side.
   Kun det aktive trin animerer; display kan ikke animeres, så det er
   opacity og et lille løft, der bærer bevægelsen. */
.panel.active { display: block; animation: trin-ind 260ms ease both; }
@keyframes trin-ind {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel.active { animation: none; }
  /* Kontaktens knap gled stadig, selv om optællingen og panelovergangen var
     slået fra. Alt der bevæger sig, skal slukkes samlet. */
  .switch::after { transition: none; }
}
.panel h2 { margin: 10px 0 14px; }
.panel .lead { color: var(--ink-soft); font-size: 15.5px; max-width: 52ch; }

/* 01 boligdata */
.datatable { margin: 34px 0 30px; border-top: 1px solid var(--line); max-width: 720px; }
.datatable .row { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 11px 2px; border-bottom: 1px solid var(--line-soft); }
.datatable .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.datatable .v { font-family: var(--mono); font-size: 13.5px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* udbudspris-felt (trin 01) */
.price-field { margin: 0 0 30px; }
.price-field label { display: block; margin-bottom: 8px; }
.price-field .row { display: flex; align-items: center; gap: 10px; max-width: 320px; }
.price-field input {
  flex: 1;
  font-family: var(--mono);
  font-size: 15px;
  text-align: right;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
}
.price-field input:focus { outline: 2px solid var(--green-700); outline-offset: -1px; }
.price-field .unit { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.field-err { margin-top: 8px; font-size: 12.5px; color: var(--accent); max-width: 46ch; }
.callout-error { border-left-color: var(--accent); color: var(--accent); }

/* 02 justér */
.adjust { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; margin-top: 36px; }
.ctl-group { margin-bottom: 28px; }
.ctl-group > .kicker { display: block; margin-bottom: 10px; }
.ctl-note { margin-top: 8px; font-size: 12px; color: var(--muted); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.opt small { font-family: var(--mono); font-size: 10px; font-weight: 400; margin-left: 5px; color: var(--muted); }
.opt.selected { background: var(--green-700); border-color: var(--green-700); color: var(--cream-on-dark); }
.opt.selected small { color: var(--green-300); }
.switch-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.switch-row .t { font-size: 14.5px; font-weight: 600; }
.switch-row .s { font-size: 12.5px; color: var(--muted); }
.switch { position: relative; width: 42px; height: 24px; border-radius: 999px; border: none; background: var(--line); cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.switch[aria-checked="true"] { background: var(--green-700); }
.switch[aria-checked="true"]::after { left: 21px; }

.card-light { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 26px 28px; position: sticky; top: 86px; }
.card-light .kicker { display: block; margin-bottom: 8px; }
.est-big { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; }
.est-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.ledger { margin-top: 18px; border-top: 1px solid var(--line-soft); }
.ledger .row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ledger .row span:last-child { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.ledger .row.total { font-weight: 700; }
.ledger .row.total span:last-child { color: var(--accent); }
.card-light .btn { margin-top: 20px; }
.paynote { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- del estimatet ----------
   Sekundær handling under den primære. Derfor tekst på papir med en tynd
   kant og ikke en fyldt grøn flade: to fyldte knapper over hinanden ville
   stille "Del estimatet" på højde med "Få dit åbningsbud", som er det, der
   skal klikkes. Klassen er bevidst ikke .btn, fordi .card-light .btn giver
   20px topmargen og en større typografi, som ville gøre den lige så tung. */
.del-boks { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.del-boks[hidden], .del-fallback[hidden], .del-hint[hidden], .del-kvit[hidden] { display: none; }
.btn-del {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.btn-del:hover { border-color: var(--ink-soft); color: var(--ink); }
.btn-del svg { display: block; flex: none; }
/* Hjælpetekst og bekræftelse er aldrig fremme samtidig og har samme
   linjehøjde, så skiftet ikke flytter noget under sig. */
.del-hint, .del-kvit { margin-top: 8px; font-size: 12px; line-height: 1.4; text-align: center; }
.del-hint { color: var(--muted); }
.del-kvit { color: var(--green-700); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .del-kvit { animation: del-ind 160ms ease-out; }
}
@keyframes del-ind {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: none; }
}
.del-fallback { display: block; margin-top: 12px; }
.del-fallback .kicker { display: block; margin-bottom: 6px; }
.del-fallback input {
  width: 100%;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}

/* 03 betal */
/* min-height er ikke pynt: .pay-modal ligger absolut i scenen, og scenens højde
   kommer ellers kun fra .pay-blur (310px). Er modalen højere — lang adresse,
   smal skærm — bliver den skåret af overflow: hidden. Fjern den ikke. */
.pay-stage { position: relative; min-height: 360px; margin-top: 36px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); }
.pay-blur { filter: blur(7px); opacity: 0.55; padding: 40px 48px; user-select: none; pointer-events: none; }
.skel { height: 14px; background: var(--line); border-radius: 3px; margin-bottom: 14px; }
.skel.w40 { width: 40%; } .skel.w70 { width: 70%; } .skel.w55 { width: 55%; } .skel.big { height: 46px; width: 62%; background: var(--green-300); }
.pay-modal {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px;
}
.pay-modal .inner { width: 100%; max-width: 360px; }
.pay-modal h2 { font-size: 26px; }
.pay-modal .sub { font-size: 13px; color: var(--ink-soft); margin: 8px 0 24px; }
.pay-modal label { display: block; text-align: left; margin-bottom: 7px; }
.pay-modal input {
  width: 100%; font-family: var(--mono); font-size: 15px; letter-spacing: 0.06em;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; margin-bottom: 12px;
}
.pay-modal .sim { margin-top: 12px; font-size: 11.5px; color: var(--muted); }
/* Skal scopes til .pay-modal (0,2,0): .pay-modal label ovenfor (0,1,1) sætter
   display:block og lægger ellers samtykketeksten under afkrydsningsfeltet i
   stedet for ved siden af. Afkort ikke til .consent. */
.pay-modal .consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  margin: 4px 0 16px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  cursor: pointer;
}
.consent input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--green-700); }
.btn-pay:disabled { opacity: 0.5; cursor: not-allowed; }

/* 04 rapport */
.report-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 8px 0 26px; }
.report-head .sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.pdf-wrap { flex: 0 0 auto; }
.pdf-hint { margin-top: 8px; font-size: 12px; color: var(--ink-soft); max-width: 34ch; }
.verdict-card .interval { height: 108px; margin-top: 50px; }
.verdict-card .foot-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(156, 197, 175, 0.25); font-family: var(--mono); font-size: 10.5px; color: var(--green-300); }
.report-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; margin-top: 44px; align-items: start; }
.report-grid h3, .comps h3 { font-size: 22px; letter-spacing: -0.01em; margin-bottom: 18px; }
.negotiate .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; }
.tile .n { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; }
.tile .l { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--muted); margin-top: 6px; text-transform: uppercase; }
.args { list-style: none; counter-reset: arg; }
.args li { counter-increment: arg; display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-soft); }
.args li::before { content: "0" counter(arg); font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 3px; }
.trend-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px; }
.trend-card .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.trend-card .head .u { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.spark-wrap { position: relative; }
.spark-tip {
  position: absolute; display: none; transform: translate(-50%, -130%);
  font-family: var(--mono); font-size: 10.5px; background: var(--green-900); color: var(--cream-on-dark);
  padding: 3px 7px; border-radius: 3px; white-space: nowrap; pointer-events: none;
}
.trend-card .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-soft); margin-top: 14px; }
.trend-card .tiles .tile { border: none; border-right: 1px solid var(--line-soft); border-radius: 0; padding: 16px 4px 2px; background: none; }
.trend-card .tiles .tile:last-child { border-right: none; padding-left: 20px; }
/* markedsblok (erstatter sammenlignelige salg indtil salgsregistret er på plads) */
.market-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 12px; }

.comps { margin-top: 52px; }
.comps table { width: 100%; border-collapse: collapse; }
.comps th { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.comps td { font-family: var(--mono); font-size: 12.5px; padding: 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.comps th.num, .comps td.num { text-align: right; }
.comps td.addr { font-family: var(--sans); font-size: 13.5px; font-weight: 600; }
.comps .tbl-note { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-align: right; }
.report-end { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }

/* ---------- responsivt ---------- */
@media (max-width: 920px) {
  .hero .wrap, .split, .section-head, .adjust, .report-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 48px 0 60px; }
  section.block { padding: 56px 0; }
  .factors { grid-template-columns: 1fr; }
  .factor { border-right: none !important; border-bottom: 1px solid var(--line-soft) !important; }
  .factor:last-child { border-bottom: none !important; }
  /* Skjuler sektionsankrene i navigationen, men aldrig handlingsknappen.
     Reglen hed før a[href^="/#"], og da CTA'en blev flyttet til /#listing-url
     ramte den knappen med: 43 landingssider stod uden nogen handling på
     mobil. :not(.btn) er det, der holder knappen i live. */
  nav.main a[href*="#"]:not(.btn), nav.main .tag { display: none; }
  .card-light { position: static; }
  .bar-row { grid-template-columns: 1fr; gap: 6px; }
  .bar-row .val { text-align: left; }
  .market-tiles { grid-template-columns: 1fr 1fr; }
}

/* ---------- telefon ---------- */
@media (max-width: 640px) {
  /* clip, ikke hidden: overflow-x: hidden gør elementet til en scroll-
     container, og så holder position: sticky op med at virke. Headeren var
     derfor reelt ikke klæbende på telefon. clip klipper det vandrette
     overløb væk uden at oprette en scroll-container. */
  html, body { overflow-x: clip; }
  .wrap { padding: 0 18px; }

  /* På 390px er der ikke plads til logo, to tekstlinks og knappen på samme
     linje: knappen ombrød til to linjer og stak 18px ud over skærmkanten,
     hvor overflow-x klippede den. Handlingsknappen vejer tungest, så
     tekstlinkene viger for den. :not(.btn) skåner både den grønne CTA og
     analysesidens "Tilbage til forsiden". */
  nav.main a:not(.btn) { display: none; }
  h1 { font-size: clamp(30px, 8.5vw, 40px); }
  h2 { font-size: clamp(23px, 6.6vw, 30px); }

  /* trin-tabs: vandret scroll i stedet for at ombryde til to rækker */
  .steps {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -18px 26px;
    padding: 0 18px;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step-tab { flex: 0 0 auto; }

  /* rapport-hoved: knappen under titlen frem for i en klemt kolonne */
  .report-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .report-head .btn { width: 100%; }
  .report-head h2 { hyphens: auto; }

  .flow { padding-top: 26px; padding-bottom: 64px; }
  .card-dark, .card-light, .trend-card, .tile { padding: 20px 18px; }
  .verdict { font-size: clamp(28px, 8vw, 38px); }

  /* intervalgrafen: mindre skrift så tallene ikke støder sammen */
  .interval { height: 112px; }
  .interval .mark .val { font-size: 10px; }
  .interval .end, .interval .mid { font-size: 9px; }
  .interval .mid { display: none; }

  .datatable .row { grid-template-columns: 1fr; gap: 2px; padding: 10px 2px; }
  .ledger .row { flex-wrap: wrap; gap: 2px 12px; }
  .negotiate .tiles, .market-tiles { grid-template-columns: 1fr; }
  .report-head .sub { line-height: 1.5; }
  .comps { overflow-x: auto; }
  .adjust, .report-grid { gap: 28px; }
  .est-big { font-size: 30px; }
  .price-field .row input { font-size: 16px; } /* forhindrer zoom på iOS */
}

@media print {
  header.site, .steps, .actions, footer.site, .btn { display: none; }
  body { background: #fff; background-image: none; }
  .flow { padding: 0; }
  main.legal { padding-top: 0; }
  .card-dark { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-grid { grid-template-columns: 1fr; gap: 24px; }
  .panel { display: none !important; }
  .panel#panel-4 { display: block !important; }
  a[href]:after { content: ""; }
}

/* forside: nøgletal ved siden af søjlerne */
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.stat-box { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; }
.stat-box .n { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.stat-box .l { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.figcaption-note { margin-top: 16px; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 640px) { .stat-pair { grid-template-columns: 1fr; } }

/* Det låste indhold i estimatkortet. Køberen skal kunne se, hvad han
   får for pengene — estimatet ovenfor svarer kun på, om boligen er for
   dyr, ikke på hvad han skal byde. Tallene sløres med punkttegn i
   markup'en, ikke med et filter, så de aldrig kan læses i DOM'en. */
.laast { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.laast-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.laast-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.laast-tile { border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; background: var(--card); }
.laast-tile .n { font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.laast-tile .l { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
.laast-liste { list-style: none; margin: 0; padding: 0; }
.laast-liste li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 6px; }
.laast-liste li::before { content: "+"; position: absolute; left: 4px; color: var(--green-700); font-weight: 700; }
@media (max-width: 640px) { .laast-tiles { grid-template-columns: 1fr; } }

/* Hjælpeteksten over adressefeltet var sat som .kicker: lille, versal og
   spærret, så den blev læst som pynt frem for som en instruktion. Den
   skal kunne læses, for det er her brugeren finder ud af, at et link fra
   mæglerens side også virker. */
.felt-hjaelp { display: block; margin-bottom: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); max-width: 54ch; }

/* Knappen "gå videre", når udbudsprisen mangler. Den er bevidst ikke
   disabled: et slukket element kan ikke fokuseres, og en tastaturbruger
   ville aldrig få forklaringen. Den er dæmpet, siger selv hvad der
   mangler, og et klik ruller feltet frem. */
.btn.btn-venter { opacity: 0.55; }
.btn.btn-venter:hover { background: var(--green-700); }

/* Delerækken øverst på trin 2. Den ligger bevidst væk fra købsknappen:
   nede ved knappen konkurrerede den med det, der tjener penge, og blev
   læst som en del af købet i stedet for som en selvstændig handling. */
.del-raekke {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin: 18px 0 6px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
}
.del-raekke-tekst { font-size: 13.5px; color: var(--ink-soft); }
.del-knapper { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.del-ikon {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--paper); color: var(--ink-soft);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.del-ikon:hover { border-color: var(--green-700); color: var(--green-700); }
.del-ikon-tekst { padding-right: 12px; }
.del-raekke-kvit { flex-basis: 100%; font-size: 12.5px; color: var(--green-700); }
@media (prefers-reduced-motion: reduce) { .del-ikon { transition: none; } }
@media (max-width: 640px) {
  .del-raekke { flex-direction: column; align-items: flex-start; }
  .del-knapper { margin-left: 0; }
}