@charset "UTF-8";
/* ═══════════════════════════════════════════════════
   CINDRUS — Fælles design-system til landingpages
   Deep Navy / Electric Blue
   ═══════════════════════════════════════════════════ */

:root {
  --navy: #0B1F3A;
  --navy-2: #0a1a30;
  --azure: #0057FF;
  --azure-glow: #2F80FF;
  --sky: #6AA8FF;
  --amber: #f59e0b;
  --amber-2: #d97706;
  --emerald: #10b981;
  --rose: #f43f5e;
  --paper: #f8fafc;
  --ice: #dbeafe;
  --ice-pale: #eff6ff;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --line: #e2e8f0;
  --white: #ffffff;

  --font-head: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-pill: 50px;
  --radius-card: 18px;
  --radius-card-sm: 14px;

  --shadow-soft: 0 10px 40px -12px rgba(11, 22, 40, 0.18);
  --shadow-lift: 0 20px 60px -15px rgba(37, 99, 235, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1 { font-weight: 500; letter-spacing: -0.02em; }
/* Elementor's native heading widget wraps output in its own classes
   (.elementor-widget-heading .elementor-heading-title), which has higher
   CSS specificity than the plain "h1,h2,h3,h4" selector above. It was not
   just winning on font-family — Elementor's own default heading COLOR and
   font-weight (a blue/azure tone from Elementor's theme style, not our
   design's navy/white) were also beating our rules, which is why headings
   have kept looking "wrong" even after the font-family fix: the typeface
   was fine, but the colour/weight were still Elementor's defaults. This
   scoped, higher-specificity override forces our full heading style
   (colour, size, weight, spacing — not just the typeface) to win everywhere
   Elementor renders a heading widget. */
.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title,
h1, h2, h3, h4 {
  font-family: var(--font-head) !important;
  color: var(--navy) !important;
  line-height: 1.15 !important;
  margin: 0 0 .5em !important;
  font-weight: 600 !important;
}
.elementor-widget-heading h1.elementor-heading-title,
h1 {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}
/* Hero / page-hero / CTA-band always sit on a dark navy background, so their
   headings must stay white regardless of the generic navy rule above. */
.hero .elementor-widget-heading .elementor-heading-title,
.hero-copy .elementor-widget-heading .elementor-heading-title,
.hero h1, .hero-copy h1 {
  color: var(--white) !important;
  font-size: 52px !important;
}
.page-hero .elementor-widget-heading .elementor-heading-title,
.page-hero h1 {
  color: var(--white) !important;
  font-size: 40px !important;
}
.cta-band .elementor-widget-heading .elementor-heading-title,
.cta-band h2 {
  color: var(--white) !important;
}
/* FIX: footeren har mørk navy-baggrund ligesom hero/page-hero/cta-band, men
   blev glemt da vi tvang alle overskrifter til navy-farve — det gjorde
   "Produkt"/"Selskab"/"Sammenlign"/"Juridisk & support"-overskrifterne i
   footeren usynlige (navy tekst på navy baggrund). */
.footer .elementor-widget-heading .elementor-heading-title,
.footer h4 {
  color: var(--white) !important;
}
p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { padding: 0; margin: 0; list-style: none; }

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--navy { background: var(--navy); color: var(--white); }
.section--ice { background: var(--ice-pale); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azure);
  background: var(--ice-pale);
  border: 1px solid var(--ice);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.section--navy .eyebrow {
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.25);
  color: var(--sky);
}

.lead { font-size: 19px; color: var(--ink-soft); max-width: 640px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
/* FIX: ".center" virker fint på blokelementer (h1/h2/p), fordi text-align
   centrerer deres EGET indhold inden i deres egen fulde bredde. ".eyebrow"
   er derimod inline-flex — en "krymp til indhold"-boks, der positioneres af
   sin FORÆLDERS text-align, ikke sin egen. At sætte "center" direkte på
   selve eyebrow-badget centrerede derfor ikke badget som helhed, kun (intetsigende)
   dets egen tekst i sig selv, hvilket lod badget hænge til venstre uanset
   ".center"-klassen. Gør badget block-level med "krymp til indhold"-bredde,
   så margin:auto rent faktisk kan centrere det, ligesom et billede eller en
   knap med fast bredde ville blive centreret. Rammer alle markeder, overalt
   hvor "eyebrow center" bruges sammen (forsider, sektionsoverskrifter osv.). */
.eyebrow.center {
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--azure);
  color: var(--white);
  box-shadow: var(--shadow-lift);
}
.btn-primary:hover { background: #1d4ed8; }
.btn-amber {
  background: var(--amber);
  color: var(--navy);
  box-shadow: 0 16px 40px -14px rgba(245,158,11,.55);
}
.btn-amber:hover { background: var(--amber-2); }
.btn-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--navy);
}
.btn-outline:hover { border-color: var(--azure); color: var(--azure); }
.section--navy .btn-outline { border-color: rgba(255,255,255,.25); color: var(--white); }
/* Hero and CTA bands always render on a navy/dark background regardless of
   ancestor class, so outline buttons inside them must always be light —
   otherwise the text is invisible (navy text on navy background). */
.hero .btn-outline,
.cta-band .btn-outline {
  border-color: rgba(255,255,255,.3);
  color: var(--white);
}
.hero .btn-outline:hover,
.cta-band .btn-outline:hover {
  border-color: var(--white);
  color: var(--white);
}
.btn-ghost { background: transparent; color: var(--ink-soft); padding: 14px 18px; }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 14px; }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248,250,252,.75);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(226,232,240,.7);
  transition: box-shadow .2s ease;
}
.nav.is-scrolled { box-shadow: 0 6px 24px -12px rgba(11,22,40,.15); }
.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo span { color: var(--azure); }

/* Sub-brand lockup (landing-page domæner) */
.logo-block { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.subbrand-logo {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.subbrand-logo .accent { color: var(--azure); }
.subbrand-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
  transition: color .15s ease;
}
.subbrand-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.subbrand-badge:hover { color: var(--azure); }
.footer .subbrand-logo { color: var(--white); }
.footer .subbrand-badge { color: rgba(255,255,255,.5); }
.footer .subbrand-badge:hover { color: var(--sky); }
.market-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  margin-left: 6px;
  position: relative;
  top: -10px;
  box-shadow: 0 0 0 1px rgba(11,31,58,.12), 0 1px 2px rgba(11,31,58,.15);
  vertical-align: top;
}
.footer .market-badge { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.market-badge svg { width: 100%; height: 100%; display: block; }
.calc-trust-line { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }
.calc-trust-line span { display: inline-flex; align-items: center; gap: 4px; }
.calc-trust-line .tick { color: #16a34a; font-weight: 700; }
.calc-attribution { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ice); font-size: 13px; color: var(--ink-faint); line-height: 1.5; }
.calc-attribution strong { color: var(--navy); }
.calc-attribution a { color: var(--azure); font-weight: 600; }
/* .calc-result has a dark navy background — the default grey/navy text above is tuned
   for light backgrounds and is unreadable there, so override to light tones when nested inside it. */
.calc-result .calc-trust-line { color: rgba(255,255,255,.7); }
.calc-result .calc-trust-line .tick { color: #4ade80; }
.calc-result .calc-attribution { border-top-color: rgba(255,255,255,.15); color: rgba(255,255,255,.6); }
.calc-result .calc-attribution strong { color: #ffffff; }
.calc-result .calc-attribution a { color: #7fb2ff; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-links a {
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover, .nav-links a.active { background: var(--ice-pale); color: var(--navy); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  border-radius: 2px;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  padding: 110px 0 130px;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(96,165,250,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.09) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  animation: gridPan 40s linear infinite;
}
@keyframes gridPan { from { background-position: 0 0; } to { background-position: 220px 220px; } }
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
}
.hero-orb--1 { width: 480px; height: 480px; background: var(--azure); top: -180px; left: -120px; }
.hero-orb--2 { width: 420px; height: 420px; background: var(--sky); bottom: -200px; right: -100px; opacity: .25; }
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
}
.hero h1 { color: var(--white); font-size: 52px; }
.hero .lead { color: rgba(255,255,255,.78); font-size: 19px; }
.hero-cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-proof { margin-top: 40px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.55); font-size: 14px; }
.hero-proof strong { color: var(--white); }

.hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(20px);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
}
.hero-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-card-row:last-child { border-bottom: none; }
.hero-card-label { font-size: 13px; color: rgba(255,255,255,.55); }
.hero-card-value { font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.pill-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pill-tag--up { background: rgba(16,185,129,.16); color: #34d399; }
.pill-tag--down { background: rgba(244,63,94,.16); color: #fb7185; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.step-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px;
}
.step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ice-pale);
  color: var(--azure);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  margin-bottom: 18px;
}

/* Cards / features */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--ice); }
.card-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--azure), var(--azure-glow));
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 20px;
  margin-bottom: 18px;
}
.card h3 { font-size: 19px; }
.card p { font-size: 15px; margin-bottom: 0; }

/* Pricing */
.price-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.price-card--pop {
  border-color: var(--azure);
  box-shadow: 0 24px 60px -20px rgba(37,99,235,.35);
  transform: scale(1.03);
}
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--amber); color: var(--navy);
  font-size: 12px; font-weight: 700;
  padding: 5px 16px; border-radius: var(--radius-pill);
}
.price-plan { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--azure); margin-bottom: 6px; }
.price-amount { font-family: var(--font-head); font-size: 40px; color: var(--navy); margin-bottom: 2px; }
.price-amount span { font-size: 15px; font-weight: 400; color: var(--ink-faint); font-family: var(--font-body); }
.price-sub { font-size: 14px; color: var(--ink-faint); margin-bottom: 22px; }
.price-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; flex: 1; }
.price-list li { font-size: 14.5px; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; }
.price-list li:before { content: "✓"; color: var(--emerald); font-weight: 700; flex-shrink: 0; }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 600; background: var(--ice-pale); }
tr:last-child td { border-bottom: none; }

/* Comparison table */
.vs-table th, .vs-table td { white-space: normal; }
.vs-table .vs-check { color: var(--emerald); font-weight: 700; }
.vs-table .vs-partial { color: var(--amber-2); font-weight: 700; }
.vs-table .vs-cross { color: var(--ink-faint); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-q { font-family: var(--font-head); font-size: 17px; color: var(--navy); margin-bottom: 8px; font-weight: 600; }
.faq-a { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* Table of contents — long-form SEO pages (beregnere, guides) */
.toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 24px; margin: 8px 0 36px; }
.toc h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--navy); margin-bottom: 12px; }
.toc ol { padding-left: 20px; margin: 0; columns: 2; column-gap: 28px; }
.toc li { font-size: 14px; margin-bottom: 9px; break-inside: avoid; color: var(--ink-soft); }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--azure); }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* Generic neutral info/note box — synonyms, context notes on long-form pages */
.note-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card-sm);
  padding: 16px 20px;
  margin: 24px 0;
}
.note-box-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  margin-top: 1px;
}
.note-box p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
.note-box strong { color: var(--navy); }

/* Pros/cons mini-list reused outside comparison pages */
.mini-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.mini-pc > div { border: 1px solid var(--line); border-radius: var(--radius-card-sm); padding: 18px 20px; }
.mini-pc h5 { font-size: 13.5px; margin-bottom: 10px; color: var(--navy); }
.mini-pc ul { display: flex; flex-direction: column; gap: 8px; }
.mini-pc li { font-size: 13.5px; color: var(--ink-soft); display: flex; gap: 8px; line-height: 1.5; }
@media (max-width: 640px) { .mini-pc { grid-template-columns: 1fr; } }

/* Calculator */
.calc-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.calc-inputs { padding: 40px; }
.calc-result { padding: 40px; background: var(--navy); color: var(--white); }
.slider-group { margin-bottom: 26px; }
.slider-label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.slider-label output { color: var(--azure); font-family: var(--font-head); }
.slider-value-input {
  color: var(--azure);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  width: 132px;
  border: none;
  border-bottom: 1px dashed transparent;
  background: transparent;
  padding: 0 0 1px;
  transition: border-color .15s;
}
.slider-value-input:hover { border-bottom-color: var(--ice); }
.slider-value-input:focus {
  outline: none;
  border-bottom-color: var(--azure);
}
input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 4px;
  background: var(--ice);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--azure);
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(37,99,235,.5);
  cursor: pointer;
}
.result-big { font-family: var(--font-head); font-size: 44px; margin: 6px 0 4px; }
.result-label { font-size: 13px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; }
.result-row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14.5px; }
.result-row:last-child { border: none; }
.calc-chart-wrap { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.calc-chart-wrap h4 { font-size: 14px; color: var(--navy); margin: 0 0 12px; font-family: var(--font-head); }
.calc-chart-wrap svg { display: block; width: 100%; height: auto; }
.result-row-group { margin-top: 4px; padding-top: 4px; }
.result-row.result-row--sub { font-size: 13px; color: rgba(255,255,255,.65); padding: 8px 0; }

/* Pro-kalkulator (bolankalkyl.se / lanekalkulator.eu / asuntolainalaskuri.eu) —
   nyere markup-mønster (.calc-card/.field/.field-row/.calc-outputs/.out-row)
   fra calc-*-pro.js, adskilt fra det oprindelige .calc-wrap/.slider-group/
   .result-row-mønster ovenfor. Har hidtil manglet helt egen styling, hvilket
   lod tekstfelterne (input[type="text"]) falde tilbage til browserens
   standard-firkantede kant — synlig som en fremmed, ustylet boks ved siden
   af de ellers stylede skydere. Rammer alle tre "Pro"-markeder ens. */
.calc-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.calc-outputs { padding: 40px; background: var(--navy); color: var(--white); }
.field { margin-bottom: 26px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.field label span { color: var(--azure); font-family: var(--font-head); }
.field-row { display: flex; align-items: center; gap: 12px; }
.field-row input[type="range"] { flex: 1; }
.field-row input[type="text"] {
  color: var(--azure);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  width: 116px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ice-pale);
  padding: 8px 10px;
  transition: border-color .15s;
}
.field-row input[type="text"]:hover { border-color: var(--azure); }
.field-row input[type="text"]:focus {
  outline: none;
  border-color: var(--azure);
}
.out-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14.5px; gap: 12px; }
.out-row:last-of-type { border-bottom: none; }
.out-row span { color: rgba(255,255,255,.7); }
.out-row strong { font-family: var(--font-head); text-align: right; }
.out-row--big { font-size: 15px; }
.out-row--big strong { font-size: 28px; }
.calc-chart { margin-top: 20px; }
.calc-chart svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .calc-card { grid-template-columns: 1fr; }
}

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  border-radius: 28px;
  padding: 64px;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: var(--white); }
.cta-band .lead { color: rgba(255,255,255,.75); margin-left: auto; margin-right: auto; }
.cta-band .hero-cta { justify-content: center; }

/* Footer */
.footer { background: var(--navy); color: rgba(255,255,255,.6); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.footer h4 { color: var(--white); font-size: 15px; font-family: var(--font-body); font-weight: 600; margin-bottom: 16px; }
.footer a { display: block; padding: 6px 0; font-size: 14.5px; color: rgba(255,255,255,.55); transition: color .15s; }
.footer a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-logo { font-family: var(--font-head); font-size: 20px; color: var(--white); margin-bottom: 12px; }
.footer-logo span { color: var(--sky); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); transition: background .15s, color .15s; padding: 0; }
.footer-social a:hover { background: var(--azure); color: var(--white); }
.footer-social svg { width: 16px; height: 16px; }

/* Comparison teaser strip */
.comp-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.comp-chip {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: border-color .15s, color .15s;
}
.comp-chip:hover { border-color: var(--azure); color: var(--azure); }

/* Pros/cons */
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }
.pc-card { border-radius: var(--radius-card); padding: 26px; border: 1px solid var(--line); }
.pc-card--pro { background: #ecfdf5; border-color: #a7f3d0; }
.pc-card--con { background: var(--paper); }
.pc-card h4 { font-size: 15px; margin-bottom: 14px; }
.pc-card ul { display: flex; flex-direction: column; gap: 10px; }
.pc-card li { font-size: 14.5px; color: var(--ink-soft); display: flex; gap: 10px; }
.pc-card--pro li:before { content: "+"; color: var(--emerald); font-weight: 700; }
.pc-card--con li:before { content: "–"; color: var(--ink-faint); font-weight: 700; }

/* Badges / trust bar */
.trust-bar { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; justify-content: center; opacity: .8; font-size: 14px; color: var(--ink-faint); }

/* Regulatory disclaimer — "we are a tool, not an advisor" */
.disclaimer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--ice-pale);
  border: 1px solid var(--ice);
  border-left: 4px solid var(--azure);
  border-radius: var(--radius-card-sm);
  padding: 18px 22px;
  margin: 28px 0;
}
.disclaimer-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--azure);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  margin-top: 1px;
}
.disclaimer p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.disclaimer strong { color: var(--navy); }
.hero-disclaimer {
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
}

/* Comparison integrity — accuracy note + correction/update meta on vs. pages */
.compare-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card-sm);
  padding: 16px 20px;
  margin: 24px 0;
}
.compare-note-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  margin-top: 1px;
}
.compare-note p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; }

.compare-meta {
  margin: 16px 0 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
}
.compare-meta-item { padding: 16px 22px; border-bottom: 1px solid var(--line); }
.compare-meta-item:last-child { border-bottom: none; }
.compare-meta-item h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.compare-meta-item p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; margin: 0; }
.compare-meta-item a { color: var(--azure); font-weight: 600; }

/* Support "Ask" flow */
.ask-flow {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 40px;
  max-width: 760px;
  margin: 0 auto;
}
.ask-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 28px;
}
.ask-progress span {
  height: 4px;
  flex: 1;
  border-radius: 4px;
  background: var(--line);
}
.ask-progress span.is-done { background: var(--azure); }
.ask-step { display: none; }
.ask-step.is-active { display: block; }
.ask-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.ask-category-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card-sm);
  padding: 18px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ask-category-btn:hover { border-color: var(--azure); background: var(--ice-pale); }
.ask-category-icon { font-size: 22px; }
.ask-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 18px;
  padding: 0;
}
.ask-back:hover { color: var(--azure); }
.ask-resolved-row {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  align-items: center;
  flex-wrap: wrap;
}
.ask-checklist { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.ask-checklist label { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); }
.ask-checklist input { margin-top: 3px; }

/* Form elements (contact form — last resort only) */
.form-field { margin-bottom: 20px; }
.form-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--paper);
}
.form-textarea { resize: vertical; min-height: 110px; }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--azure); background: var(--white); }
.ask-success { text-align: center; padding: 20px 0; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Breadcrumb */
.breadcrumb { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--azure); }

/* Page hero (non-home) */
.page-hero { background: var(--navy); color: var(--white); padding: 72px 0 60px; text-align: center; }
.page-hero h1 { color: var(--white); font-size: 40px; }
.page-hero .lead { color: rgba(255,255,255,.75); margin: 0 auto; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .steps, .grid-3, .grid-4, .grid-2, .pc-grid { grid-template-columns: 1fr; }
  .calc-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* ═══════════════════════════════════════════════════
   WordPress/Elementor-specifikke overrides
   Elementors egen "boxed"-bredde-beregning for indlejrede
   sektioner matcher ikke pålideligt vores egen 1160px
   .container-bredde, og forsøg på at rette det via
   Elementor's JSON-indstillinger (content_width/layout) har
   givet uforudsigelige resultater. Disse regler går i stedet
   direkte efter Elementors egne, stabile kerne-klasser
   (.elementor-container, .elementor-column) med !important,
   så resultatet er garanteret uanset Elementors interne
   bredde-beregning for den specifikke sektion.
   ═══════════════════════════════════════════════════ */
/* FIX (v34): "Ja, tak!"/"Nej, stadig brug for hjælp"-knapperne i
   support-flowet er ægte <button>-elementer (ikke <a class="btn">, som
   resten af sitets knapper) — og WordPress-temaets egen standard-styling af
   <button> rammer dem derfor på en måde, de andre knapper ikke oplever.
   Samme rodårsag som burger-ikonets tidligere lyserøde baggrund. Låser
   hover/focus/active til vores eget design-system, uanset elementtype. */
button.btn-outline:hover,
button.btn-outline:focus,
button.btn-outline:active {
  background: transparent !important;
  border-color: var(--azure) !important;
  color: var(--azure) !important;
  outline: none !important;
  box-shadow: none !important;
}
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active {
  background: #1d4ed8 !important;
  color: var(--white) !important;
  outline: none !important;
  box-shadow: var(--shadow-lift) !important;
}
button.btn-ghost:hover,
button.btn-ghost:focus,
button.btn-ghost:active {
  background: var(--ice-pale) !important;
  color: var(--navy) !important;
  outline: none !important;
  box-shadow: none !important;
}
button.btn-amber:hover,
button.btn-amber:focus,
button.btn-amber:active {
  background: var(--amber-2) !important;
  color: var(--navy) !important;
  outline: none !important;
}

/* FIX (v22): tilbage til at matche body-indholdets bredde (1160px,
   centreret) — IKKE fuld bredde ud til browserkanten. Nøglefund fra
   DevTools-inspektion: Elementor satte max-width:1160px på BÅDE selve
   nav-inner-sektionen OG containeren inde i den (to lag), mens vores
   tidligere rettelse kun ramte containeren. Uden at rette sektionens eget
   max-width først, blev containerens 1160px "fanget" inde i en sektion der
   allerede var begrænset af Elementors globale Content-Width-indstilling,
   hvilket forklarer hvorfor det så forkert ud selv efter containeren blev
   rettet. Nu rettes begge lag eksplicit til 1160px + centrering, så det
   matcher .container-klassen resten af sitet bruger. */
/* FIX (v24): logo/knap landede stadig nogle px for langt inde i begge sider,
   selvom nav-inner selv er præcis 1160px. Årsagen: nav-inner ligger nestet
   ét lag dybere end hero (sektion → kolonne → nav-inner), og det ekstra
   kolonne-lag har sin egen standard-padding fra Elementor, som gør det
   rum nav-inner centrerer sig selv indeni en anelse smallere end selve
   viewport'et. Hero (der ikke har det ekstra lag) centrerer sig direkte mod
   viewport'et og rammer derfor kanterne præcist. Nulstiller al padding på
   det ekstra lag, så nav-inner får nøjagtig samme fulde bredde at centrere
   sig selv indenfor som hero har. */
.nav.elementor-section > .elementor-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.nav.elementor-section > .elementor-container > .elementor-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.nav.elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.nav-inner.elementor-section {
  max-width: 1160px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
/* FIX (v30 — RESPONSIVITET): alt herunder (grid-layoutet med
   "min-width:1110px") var kun nogensinde tænkt som en DESKTOP-fix. Uden en
   min-bredde-grænse ville det tvinge headeren til at være mindst 1110px
   bred på ALLE skærmstørrelser, inkl. telefoner — det ville skabe
   vandret scroll og ødelægge hele mobilvisningen. Hele denne blok er nu
   pakket ind i en @media-forespørgsel, så den kun rammer skærme bredere
   end det oprindelige design-breakpoint (900px), nøjagtig som resten af
   sidens layout allerede skifter til mobil-visning ved. */
@media (min-width: 901px) {
  .nav-links {
    flex-wrap: nowrap !important;
  }
  /* FIX (v25): den forrige tilgang (v23) låste kolonnerne til faste 30/40/30%
     — men headeren er sat til "sticky", og Elementor's sticky-JS genberegner
     og skriver sine EGNE inline bredde/flex-værdier direkte på elementerne
     ved scroll/resize, hvilket løbende kunne overskrive vores faste
     procent-værdier efter siden var indlæst. I stedet for at kæmpe mod det,
     dropper vi faste procenter helt og bruger ren flexbox space-between —
     nøjagtig den samme teknik det oprindelige design (.nav-inner i de
     statiske HTML-filer) selv brugte. Logo (1. kolonne) og CTA-knapperne
     (3. kolonne) får deres naturlige indholdsbredde og skubbes hver til sin
     kant af space-between, uanset hvad Elementor selv måtte forsøge at
     sætte af bredde på dem. */
  /* FIX (v26): "space-between" centrerer kun menupunkterne i den plads der
     er TILBAGE mellem logo og knapper — og da logo og knap-boksen ikke
     fylder det samme, endte punkterne skævt i forhold til selve sidens
     midte. Grid med to LIGE STORE yderfelter (1fr / auto / 1fr) tvinger
     midterfeltet til at ligge på sidens sande matematiske midtpunkt,
     uanset at logo og knap-boksen har forskellig bredde — uden risiko for
     overlap, som position:absolute gav sidste gang. */
  .nav-inner.elementor-section > .elementor-container {
    display: grid !important;
    /* FIX (v34): "1fr auto 1fr" antog stiltiende at logo-kolonnen og
       CTA-kolonnen altid fylder nogenlunde det samme — det holdt for de
       kortere tekster (da/sv/no), men finsk "Kokeile Cindrusta ilmaiseksi"
       er markant længere end fx "Prøv Cindrus gratis", så CTA-kolonnen blev
       tvunget smallere end sit eget indhold og knapperne ombrød til deres
       egen linje. minmax(max-content, 1fr) sætter kolonnens naturlige
       indholdsbredde som en HÅRD BUND — den kan stadig vokse til 1fr for at
       holde midterfeltet centreret når der er plads nok, men kan aldrig
       blive smallere end det den rent faktisk skal vise. */
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr) !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    min-width: 1110px !important;
  }
  .nav-inner.elementor-section > .elementor-container > .elementor-column {
    width: auto !important;
    max-width: none !important;
  }
  .nav-inner.elementor-section > .elementor-container > .elementor-column:nth-child(1) {
    justify-self: start !important;
  }
  .nav-inner.elementor-section > .elementor-container > .elementor-column:nth-child(2) {
    justify-self: center !important;
    display: flex !important;
    justify-content: center !important;
  }
  .nav-inner.elementor-section > .elementor-container > .elementor-column:nth-child(3) {
    justify-self: end !important;
  }
  .nav-cta {
    justify-content: flex-end !important;
  }
  /* FIX (v34): samme "ekstra wrapper-lag"-problem som v31 løste for mobil —
     Elementor indsætter altid mindst to lag mellem selve kolonnen (.nav-cta)
     og det faktiske html-widget-indhold. At sætte flex/nowrap på kolonnen
     alene gør intet for de to <a>-knapper, som ligger to lag dybere og
     stadig kan ombryde som almindelig inline-flow-tekst, uanset hvor meget
     bredde minmax()-fixet ovenfor giver kolonnen. Tvinger derfor ALLE lag
     ned til indholdet til nowrap-flex, så det er det INDERSTE lag der
     placerer knapperne ved siden af hinanden. */
  .nav-cta,
  .nav-cta .elementor-widget-wrap,
  .nav-cta .elementor-element,
  .nav-cta .elementor-widget-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .nav-cta .btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  /* Log ind / Opret gratis konto findes to steder i markup'et (headeren OG
     i bunden af mobil-dropdown'en), fordi mobil-versionen flytter dem ind i
     menuen — se v32-fix nedenfor. På desktop skal kun header-versionen
     (i .nav-cta) vises; kopien inde i .nav-links skal aldrig ses her. */
  .nav-links .nav-mobile-only {
    display: none !important;
  }
}

/* FIX (v30 — RESPONSIVITET): mobil/tablet-layout for headeren (≤900px,
   samme breakpoint som resten af sitet). Uden dette forsøger Elementors
   egne kolonner stadig at ligge ved siden af hinanden i en for smal
   skærmbredde. Her tvinges nav-inner til en simpel, smal flex-række:
   logo til venstre, CTA-knapper + burger-ikon til højre, og selve
   menupunkterne (nav-links) er skjult som udgangspunkt (styret af den
   oprindelige @media(max-width:900px)-regel længere oppe i filen) og
   foldes ud som en dropdown når burger-ikonet klikkes (main.js). */
@media (max-width: 900px) {
  /* FIX (v31): mørk lodret "flænge" i venstre side af skærmen på tværs af
     både header og hero på mobil — symptom på vandret overflow (siden er
     bredere end viewport'et, så en strimmel af det der normalt er skjult
     uden for skærmen bliver synlig). Uanset den præcise mikro-årsag
     (afrundingsfejl, en enkelt kolonnes padding der lægges oveni width:100%
     et sted i kæden osv.) er dette den korrekte, defensive løsning: lås
     both html og body til aldrig at kunne rulle vandret på mobil. */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .nav-inner.elementor-section > .elementor-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Dropdown-menuen (herunder) positionerer sig selv i forhold til det
       nærmeste element med "position" sat. Uden dette relative anker endte
       den med at måle sig mod et forkert/bredere element længere oppe i
       DOM'et (headerens sticky-lag), hvilket er hvorfor dropdown-boksen
       ikke dækkede hele header-bredden korrekt. */
    position: relative !important;
  }
  .nav-inner.elementor-section > .elementor-container > .elementor-column {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
  /* Selve menupunkt-kolonnen skal ikke optage plads i den vandrette række,
     når den er skjult — men når main.js folder den ud (burger-klik), skal
     den ligge som en fuld-bredde dropdown under headeren, ikke i midten af
     flex-rækken. */
  .nav-inner.elementor-section > .elementor-container > .elementor-column.nav-links {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 99 !important;
    /* FIX (v32): runde hjørner i bunden af dropdown'en, så den matcher
       resten af sitets afrundings-sprog (--radius-card). Toppen er flad,
       fordi panelet er "fastgjort" til headeren lige ovenover. */
    border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
    overflow: hidden !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .12) !important;
    /* main.js sætter selv en border-bottom inline ved åbning — fjernes her,
       så den ikke laver en flad streg hen over de nu runde hjørner. */
    border-bottom: none !important;
  }
  /* FIX (v33): menupunkterne stod ved siden af hinanden (2-3 pr. række) i
     stedet for under hinanden. Samme "ekstra wrapper-lag"-fejl som ramte
     .nav-cta og bredden tidligere: ".nav-links" er selve Elementor-KOLONNEN
     (kun ÉT barn: .elementor-widget-wrap), så main.js' inline
     flex-direction:column på DEN gør intet for de faktiske <a>-links, som
     ligger 2 lag dybere og bare flyder som normal (ombrydende) inline-tekst.
     Kolonnen selv rører vi ikke ved (main.js styrer dens display:flex/none
     for at åbne/lukke menuen — hvis vi tilføjer !important der, kan menuen
     aldrig lukkes igen), men alle lagene UNDER den tvinges til en lodret
     flex-stak, så det er det INDERSTE lag (der rent faktisk indeholder
     alle <a>-linkene + de to knapper) der stakker dem under hinanden. */
  .nav-links .elementor-widget-wrap,
  .nav-links .elementor-element,
  .nav-links .elementor-widget-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 4px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  .nav-links .elementor-widget-container > a:not(.btn) {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: var(--radius-card-sm) !important;
    text-align: left !important;
  }
  /* FIX (v32): "Log ind" og "Opret gratis konto" blev klippet af i
     header-rækken på smalle skærme, fordi der ikke er plads til dem ved
     siden af burger-ikonet. Skjuler dem i selve headeren på mobil — kun
     burger-ikonet vises der — og viser dem i stedet nederst i selve
     dropdown-menuen (se .nav-mobile-only nedenfor, tilføjet til
     .nav-links' markup i theme-header.json). */
  .nav-cta .btn-ghost,
  .nav-cta .btn-primary {
    display: none !important;
  }
  /* De to knapper der nu bor nederst i dropdown-menuen. Fuld bredde,
     centreret tekst, en tynd streg der adskiller dem fra menu-linkene
     ovenover, og lidt luft ned til dropdown'ens runde bund-hjørner. */
  .nav-links .nav-mobile-only {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 4px 0 0 !important;
    padding: 12px 16px !important;
    text-align: center !important;
  }
  .nav-links .nav-mobile-only.btn-ghost {
    margin-top: 12px !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    padding-top: 20px !important;
  }
  .nav-links .nav-mobile-only.btn-primary {
    margin-bottom: 4px !important;
    /* FIX: den generelle ".nav-links a { color: ink-soft }"-regel (fra
       den oprindelige vandrette desktop-menu) er mere specifik end
       ".btn-primary"s egen hvide tekstfarve, så teksten endte mørk på den
       blå knap. Låser hvid tekst fast her. */
    color: var(--white) !important;
  }
  /* FIX (v31): min forrige flex-regel på ".nav-cta" ramte kun den YDERSTE
     Elementor-kolonne — men Elementor indsætter ALTID mindst to
     wrapper-lag mellem kolonnen og det faktiske html-widget-indhold
     (.elementor-widget-wrap → .elementor-element → .elementor-widget-container).
     At gøre kolonnen til flex-container gjorde derfor intet for de tre
     rigtige elementer (Log ind / Opret-knap / burger-ikon), som lå to lag
     dybere og stadig flød i almindelig blok-flow — deraf at burger-ikonet
     (et <button>, blokificeret) sprang ned på sin egen linje. Samme
     "ekstra wrapper-lag"-fejl som ramte header- og footer-bredden tidligere,
     nu på flex i stedet for width. Fix: gør ALLE lag ned til indholdet til
     flex, så det er det INDERSTE lag (der rent faktisk indeholder
     <a>/<a>/<button>) der udfører den vandrette placering. */
  .nav-cta,
  .nav-cta .elementor-widget-wrap,
  .nav-cta .elementor-element,
  .nav-cta .elementor-widget-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  .nav-cta > *,
  .nav-cta .elementor-widget-wrap > *,
  .nav-cta .elementor-element > *,
  .nav-cta .elementor-widget-container > * {
    flex-shrink: 0 !important;
  }
  /* FIX: burger-knappen fik en forkert lyserød/magenta baggrund på mobil —
     sandsynligvis fra temaets egen standard-styling af <button>-elementer,
     som vandt over vores egen (kantløse, gennemsigtige) knap-stil. Låser
     den rigtige, gennemsigtige stil fast. */
  .nav-toggle {
    display: block !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px !important;
    flex-shrink: 0 !important;
  }
  .nav-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--navy) !important;
    margin: 5px 0 !important;
    border-radius: 2px !important;
  }
  /* "Log ind"-linket fylder unødigt på meget smalle skærme ved siden af
     både CTA-knappen og burger-ikonet — skjules under 480px, ligesom
     mange mobile navigationsmønstre gør, uden at miste funktionen (den
     findes stadig i selve mobilmenuen/kontoflowet). */
  @media (max-width: 480px) {
    .nav-cta .btn-ghost {
      display: none !important;
    }
  }
}

/* FIX (v22): samme to-lags bredde-fix som nav-inner ovenfor — footer-grid-row
   er nestet på præcis samme måde (fuld-bredde sektion → kolonne → indre
   boxed sektion), så den er sandsynligvis ramt af samme problem: Elementor
   sætter max-width både på selve sektionen og på containeren i den. */
.footer-grid-row.elementor-section {
  max-width: 1160px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.footer-grid-row.elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
/* FIX (v28): samme "ekstra-lag-padding" bug som ramte nav-inner (se FIX v24)
   ramte også footeren — det ydre "footer"-fuld-bredde-lag havde sin egen
   padding, som gjorde det rum footer-grid-row centrerer sig selv i smallere
   end det skulle, så indholdet endte venstrestillet med en stor tom kant i
   højre side i stedet for at fylde hele 1160px. Nulstiller samme lag som vi
   gjorde for nav. */
.footer.elementor-section > .elementor-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.footer.elementor-section > .elementor-container > .elementor-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.footer.elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* FIX (v17): ".footer-grid-row > .elementor-column" ramte intet som helst —
   Elementor sætter altid et ".elementor-container"-lag ind MELLEM sektionen
   og dens kolonner, så en direkte-barn-selektor (">") sprang aldrig ned til
   kolonnerne. Det er den sandsynlige årsag til at footer-kolonnerne stadig
   har set sammenpressede ud efter forrige runde. Rettet til en almindelig
   efterkommer-selektor, som rammer uanset mellemliggende lag. */
@media (min-width: 901px) {
  .footer-grid-row .elementor-column {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .footer-grid-row .elementor-column:first-child {
    padding-left: 0 !important;
  }
  .footer-grid-row .elementor-column:last-child {
    padding-right: 0 !important;
  }
}
/* FIX (v30 — RESPONSIVITET): footer-grid-row er nestet på samme måde som
   nav-inner, og uden en eksplicit mobil-regel ville vi enten arve
   Elementors EGEN interne (og formentlig anderledes) breakpoint for hvornår
   kolonner stables, eller — værre — beholde de 40px sidepolstringer på en
   180px-bred stablet mobilkolonne, hvilket ville se skævt/smalt ud. I
   stedet tvinger vi vores EGEN, forudsigelige stabling ved samme 900px
   breakpoint som resten af sitet allerede bruger. */
@media (max-width: 900px) {
  .footer-grid-row.elementor-section > .elementor-container {
    flex-wrap: wrap !important;
  }
  .footer-grid-row .elementor-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 32px !important;
  }
  .footer-grid-row .elementor-column:last-child {
    margin-bottom: 0 !important;
  }
}

/* FIX (v29): den firkantede kant om beløbsfelterne ("Restgæld", "Boligpris",
   "Boligens nuværende værdi") på beregner/boliglaanberegner/frivaerdiberegner
   er den samme boks-bug fra tidligt i forløbet — .slider-value-input skal
   være helt kantløs, men uden !important kan et andet, mere specifikt
   input-style (fra temaet eller Elementor) vinde kampen på specificitet
   alene, uanset indlæsnings-rækkefølge. Låser den kantløse stil fast med
   !important, så den ikke kan tabe uanset hvor den konkurrerende regel
   kommer fra. */
input.slider-value-input,
.slider-value-input {
  border: none !important;
  border-bottom: 1px dashed transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}
input.slider-value-input:hover,
.slider-value-input:hover {
  border-bottom-color: var(--ice) !important;
}
input.slider-value-input:focus,
.slider-value-input:focus {
  border-bottom-color: var(--azure) !important;
  box-shadow: none !important;
}

/* FIX (v27): der manglede luft mellem CTA-båndet ("Stop med at gætte...")
   og footeren nedenunder — de sad næsten limet sammen. Tilføjer et
   nedre mellemrum direkte på selve CTA-boksen. */
.cta-band {
  margin-bottom: 56px !important;
}

/* Hero-baggrundens gitter-mønster + to udflydende farve-orber (".hero-grid" /
   ".hero-orb" i de statiske HTML-filer) blev aldrig konverteret til
   Elementor-skabelonen — de kræver tomme, absolut-positionerede div's, men
   Elementor pakker widget-indhold ind i ".elementor-widget-wrap", som selv
   har position:relative. Det ville fange enhver indlejret absolut-
   positioneret div til KUN at fylde den enkelte kolonne/widget i stedet for
   hele hero-sektionen. Løsningen er at bygge baggrunden direkte som
   pseudo-elementer på selve ".hero"-sektionen (den er det faktiske,
   stabile DOM-element bag Elementors indpakning), så den altid dækker hele
   sektionens bredde uanset intern Elementor-nestning. */
.hero {
  position: relative;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(96,165,250,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.09) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  animation: gridPan 40s linear infinite;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(240px 240px at 5% 0%, rgba(0,87,255,.55), transparent 70%),
    radial-gradient(210px 210px at 95% 100%, rgba(106,168,255,.28), transparent 70%);
  filter: blur(70px);
}

/* FIX (v35): footer-linkene (Funktioner, Priser, Om os osv.) er importeret
   som Elementor-KNAP-widgets (elType:"widget"/widgetType:"button"), ikke
   almindelige <a>-tags — de arver derfor Elementor's egen standard
   knap-styling (grøn pille-facon, skygge, centreret tekst) i stedet for
   den diskrete ".footer a"-link-stil, som kun rammer rå <a>-tags. Nulstiller
   Elementor's knap-markup til at se ud som resten af footer-linkene,
   uanset hvilken widget-type et givet footer-link er importeret som. */
.footer .elementor-widget-button {
  margin: 0 !important;
}
.footer .elementor-button-wrapper {
  display: block !important;
}
.footer a.elementor-button,
.footer .elementor-button-link {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  text-align: left !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.55) !important;
  transition: color .15s !important;
}
.footer a.elementor-button:hover,
.footer .elementor-button-link:hover {
  background: transparent !important;
  color: var(--white) !important;
  transform: none !important;
}
.footer .elementor-button-content-wrapper,
.footer .elementor-button-text {
  display: inline !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

/* FIX (v36 → v37, rettet): CTA-båndets indhold sad forskudt til venstre.
   Min første rettelse (v36) ramte forkert — selektoren ".cta-band
   .elementor-widget-wrap" leder efter et wrapper-lag INDE I .cta-band, men i
   den faktiske DOM er wrapper-lagene FORÆLDRE til .cta-band (Elementor
   pakker hele den rå HTML-blok, inkl. .cta-band, ind i sig — ikke omvendt),
   så reglen ramte intet som helst og lavede ingen synlig ændring.
   Selve boksen (den mørke, runde .cta-band) viste sig i skærmbilledet at
   have den korrekte bredde og position — det er kun DENS EGNE børn
   (overskrift/afsnit/knapper) der ikke centrerede sig korrekt via deres
   "margin:0 auto". I stedet for at gætte videre på hvilket af Elementors
   indpakningslag der er årsagen, gør denne rettelse selve .cta-band til en
   flex-container der centrerer sine børn direkte — det virker uanset hvad
   der måtte foregå i lagene udenfor, fordi det ikke er afhængigt af at
   "margin:auto" regner rigtigt ud fra en bestemt forælder-bredde. */
.cta-band {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}