@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-normal-latin.woff2') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-italic-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('/assets/fonts/mulish-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ── TOKENS ── */
:root {
  color-scheme: light dark;
  --cream: #faf8f4;
  --paper: #f4f1eb;
  --ink: #1a1814;
  --ink-soft: #4a4640;
  --ink-muted: #9a9590;
  --accent: #c24408; --on-accent: #ffffff;
  --accent-light: #fff0e8;
  --green: #2d6a4f;
  --green-light: #e8f5ee;
  --border: rgba(26,24,20,0.1);
  --card-bg: #ffffff;
  --surface-dark: #1a1814;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #14120f;
    --paper: #1c1914;
    --ink: #f0ede8;
    --ink-soft: #b5b0aa;
    --ink-muted: #6a6560;
    --accent: #f05a15; --on-accent: #14120f;
    --accent-light: #2a1a0f;
    --green: #3d8f68;
    --green-light: #1a3028;
    --border: rgba(240,237,232,0.1);
    --card-bg: #1f1c18;
    --surface-dark: #141210;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Mulish', sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}

/* Subtle grain texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

nav, .article-wrap, .breadcrumb, .cta-final, footer { position: relative; z-index: 1; }

/* ── NAV ── */
nav {
  position: sticky;
  top: 0; z-index: 200;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: 64px;
}
.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.03em;
}
.logo span { color: var(--accent); }
nav ul { list-style: none; display: flex; gap: 2rem; align-items: center; }
nav ul a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
nav ul a:hover { color: var(--accent); }
nav ul a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-btn {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  padding: 0.45rem 1.1rem;
  border-radius: 4px;
  font-size: 0.85rem !important;
}
.nav-btn:hover { opacity: 0.88; }
@media (max-width: 680px) { nav ul { display: none; } }
nav[aria-label="Brødkrumme"] {
  position: static;
  height: auto;
  border-bottom: none;
  z-index: auto;
  justify-content: flex-start;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 5vw 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb a,
.breadcrumb span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── ARTICLE LAYOUT ── */
.article-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 5vw 6rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: start;
}
.article-wrap > main { min-width: 0; }
@media (max-width: 960px) {
  .article-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .sidebar { order: -1; position: static; }
}

/* ── ARTICLE HEADER ── */
.article-header { margin-bottom: 2.8rem; border-bottom: 1px solid var(--border); padding-bottom: 2rem; }

.article-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.article-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px; height: 2px;
  background: var(--accent);
}

.article-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 1.4rem;
}
.article-title em { font-style: italic; color: var(--accent); }

.article-intro {
  font-size: 1.12rem;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 62ch;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.article-meta {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 600;
  flex-wrap: wrap;
}
.article-meta-dot { opacity: 0.3; }

/* Affiliate-oplysningen. Bevidst holdt i meta-linjens egen vægt frem for en
   fremhævet boks: den skal være til at finde, ikke til at råbe. Den fulde
   forklaring står på /om-os. */
.article-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 0.2s;
}
.article-meta a:hover,
.article-meta a:focus-visible { text-decoration-color: currentColor; }

/* ── HERO BAND ── */
.hero-band {
  background: var(--surface-dark);
  border-radius: 12px;
  padding: 2.2rem 2.5rem;
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(232,81,10,0.15) 0%, transparent 60%);
  pointer-events: none;
}
@media (max-width: 680px) { .hero-band { grid-template-columns: 1fr; } }

.hb-item {
  text-align: left;
  padding: 0.5rem 2rem 0.5rem 0;
  border-right: 1px solid rgba(255,255,255,0.1);
  margin-right: 2rem;
}
.hb-item:last-child { border-right: none; margin-right: 0; }
@media (max-width: 680px) {
  .hb-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1rem 0; margin-right: 0; }
  .hb-item:last-child { border-bottom: none; }
}

.hb-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.5rem;
}
.hb-value {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hb-sub { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-top: 0.4rem; }

/* ── ARTICLE BODY ── */
.article-body { font-size: 1rem; color: var(--ink-soft); }

.article-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  margin: 3rem 0 1rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.article-body h2:first-child { margin-top: 0; }

.article-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 2rem 0 0.7rem;
  letter-spacing: -0.015em;
}

.article-body p { margin-bottom: 1.3rem; line-height: 1.8; }

.article-body ul, .article-body ol {
  margin: 0.8rem 0 1.5rem 1.4rem;
}
.article-body li { margin-bottom: 0.6rem; line-height: 1.75; }

.article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body .btn-accent,
.article-body .btn-accent-sm {
  /* Overrides .article-body a, which is accent-coloured. Uses --on-accent
     rather than a literal so the dark theme can flip it — white on the dark
     accent measures 3.4:1, below AA. */
  color: var(--on-accent);
  text-decoration: none;
}

/* ── PULL QUOTE ── */
.pull-quote {
  display: block;
  border-left: 3px solid var(--accent);
  margin: 2.5rem 0;
  padding: 1.4rem 2rem;
  background: var(--accent-light);
  border-radius: 0 8px 8px 0;
}
.pull-quote p {
  font-family: 'Playfair Display', serif;
  font-size: 1.22rem;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
}

/* ── INFO BOX ── */
.info-box {
  background: var(--green-light);
  border: 1px solid rgba(45,106,79,0.2);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.info-box-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.info-box p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; line-height: 1.7; }

/* ── WARNING BOX ── */
.warning-box {
  background: var(--accent-light);
  border: 1px solid rgba(232,81,10,0.2);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.warning-box-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.warning-box p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; line-height: 1.7; }

/* ── SPECS TABLE ── */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card-bg);
}
.specs-table thead tr {
  background: var(--surface-dark);
}
.specs-table thead th {
  padding: 0.9rem 1.2rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-align: left;
}
.specs-table thead th:last-child { color: var(--accent); }
.specs-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.specs-table tbody tr:last-child { border-bottom: none; }
.specs-table tbody tr:nth-child(even) { background: rgba(244,241,235,0.3); }
@media (prefers-color-scheme: dark) {
  .specs-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }
}
.specs-table tbody td {
  padding: 0.85rem 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.specs-table tbody td:first-child {
  font-weight: 700;
  color: var(--ink);
  width: 40%;
}
.specs-table tbody td .tick { color: var(--green); font-weight: 700; }
.specs-table table { border-collapse: collapse; }
@media (max-width: 680px) {
  .info-box, .warning-box { overflow-x: auto; }
  table.specs-table { min-width: 520px; }
  .specs-table { overflow-x: auto; }
  .specs-table table { min-width: 520px; }
  .specs-table th { white-space: nowrap; }
  .specs-table tbody td:first-child { width: 30%; }
}

/* ── COMPARE TABLE ── */
.compare-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 2rem 0;
  background: var(--card-bg);
}
.compare-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  background: var(--surface-dark);
}
.compare-head-cell {
  padding: 0.9rem 1.2rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.compare-head-cell.accent-col { color: var(--accent); }
.compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
}
.compare-row:last-child { border-bottom: none; }
.compare-row:nth-child(even) { background: rgba(244,241,235,0.3); }
@media (prefers-color-scheme: dark) {
  .compare-row:nth-child(even) { background: rgba(255,255,255,0.03); }
}
html[data-theme="dark"] .compare-row:nth-child(even) { background: rgba(255,255,255,0.03); }
html[data-theme="light"] .compare-row:nth-child(even) { background: rgba(244,241,235,0.3); }
.compare-cell {
  padding: 0.85rem 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.compare-cell.feature-col {
  font-weight: 700;
  color: var(--ink);
}
.compare-cell.accent-col { background: rgba(232,81,10,0.04); }
.compare-wrap .tick { color: var(--green); font-weight: 700; }
.compare-wrap .cross { color: var(--accent); font-weight: 700; }
.compare-wrap .neutral { color: var(--ink-muted); font-weight: 700; }
@media (max-width: 680px) {
  .compare-wrap { overflow-x: auto; }
  .compare-head, .compare-row { min-width: 520px; }
}

/* ── INLINE CTA ── */
.inline-cta {
  background: var(--surface-dark);
  /* The box is dark in both themes, so it has to set its own foreground —
     the same way .sidebar-cta does. Without this the body copy inherited the
     article's --ink-soft, which in light mode is #4a4640 on #1a1814: a
     contrast ratio of 1.89:1, i.e. unreadable. Dark mode hid the bug. */
  color: #fff;
  border-radius: 12px;
  padding: 2rem 2.2rem;
  margin: 2.8rem 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.inline-cta::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(232,81,10,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.inline-cta-text { flex: 1; min-width: 180px; }
.inline-cta-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.inline-cta-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.inline-cta-heading em { font-style: italic; color: var(--accent); }
.inline-cta-body {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  margin-top: 0.5rem;
}
.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.8rem 1.7rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(232,81,10,0.3);
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(232,81,10,0.45); }

/* ── PRODUCT CARDS ──────────────────────────────────────────────────────
   Used where an article recommends specific models side by side. The markup
   was written for /blog/computer-til-seniorer but the rules never followed
   it, so the cards rendered as unstyled stacked text for months. */
.product-grid {
  display: grid;
  /* Three up so the models can be compared in one glance; the article
     column is narrow, so the padding is tighter here than on other cards. */
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 2.2rem 0;
}
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.05rem;
  display: flex;
  flex-direction: column;
}
.product-card.featured { border-color: rgba(232,81,10,0.35); }
.product-badge {
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 3px;
  padding: 0.22rem 0.5rem;
  margin-bottom: 0.9rem;
}
.product-badge.green { color: var(--green); background: var(--green-light); }
.product-system {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.2rem;
}
.product-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.85rem;
}
.product-pros {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.product-pros li { position: relative; padding-left: 1.15rem; margin-bottom: 0.4rem; }
.product-pros li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}
.product-price {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}
.product-price span {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

/* ── NUMBERED TIPS ── */
.tips-list {
  list-style: none;
  counter-reset: tip;
  margin: 1.8rem 0;
  padding: 0;
}
.tips-list li {
  counter-increment: tip;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.1rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
.tips-list li::before {
  content: counter(tip);
  position: absolute;
  left: 0; top: 0;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* One article numbers its own items in markup; hide the generated counter
   there so the number is not printed twice. */
.tips-list li:has(.tips-num)::before { display: none; }
.tips-num {
  position: absolute;
  left: 0; top: 0;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tips-list strong { color: var(--ink); display: block; margin-bottom: 0.15rem; }

/* Stacks well before the phone breakpoint: the article column is roughly
   600px even on a wide screen, so three cards get cramped long before the
   viewport does. */
@media (max-width: 900px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ── PROCESS STEPS ──────────────────────────────────────────────────────
   The documented myway procedure, told as a sequence because the order
   carries real information: the 14-day window starts at delivery, the
   24-hour swap clock starts when they receive the broken machine, and you
   cannot cancel before you have ordered.

   Two things are encoded structurally rather than decoratively. Each step
   says who is holding the ball — you or myway — and the spine itself turns
   accent where the step has a catch that myway's own page does not lead
   with. Scanning the component, the eye lands on exactly the things you
   would otherwise discover after signing up. On an affiliate page that is
   a deliberate inversion: the caveats are the loudest element, because
   that is what this review is for.

   Deliberately not another dark card — the page already carries the hero
   band, the inline CTAs and the sidebar. This sits on the page ground with
   nothing but a hairline, a number and the type doing the work. */
.process-steps {
  list-style: none;
  margin: 2.4rem 0;
  padding: 0;
  counter-reset: process;
}
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 1.1rem;
  padding-bottom: 1.9rem;
  counter-increment: process;
}
.process-step:last-child { padding-bottom: 0; }

/* The spine. Drawn per step so a step with a catch can colour its own
   segment; the last one stops at its marker instead of running into air. */
.process-step::before {
  content: '';
  position: absolute;
  left: 1.19rem;
  top: 2.1rem;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.process-step:last-child::before { display: none; }
.process-step--catch::before { background: var(--accent); opacity: 0.45; }

.process-step__num {
  grid-column: 1;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--cream);
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.process-step__num::before { content: counter(process); }
.process-step--catch .process-step__num {
  border-color: var(--accent);
  color: var(--accent);
}

.process-step__content { grid-column: 2; padding-top: 0.2rem; }

.process-step__actor {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.15rem 0.42rem;
  margin-bottom: 0.5rem;
}
/* Both actor tags stay neutral on purpose. Accent is reserved for the catch,
   and nothing else — an orange "du gør det" tag on a step with no catch was
   reading as a warning and diluting the one signal this component exists to
   send. The actor distinction is carried by the words. */
.process-step__actor--myway,
.process-step__actor--dig { color: var(--ink-muted); border-color: var(--border); }

.process-step__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.process-step__body {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
/* The catch. Quiet by design — an accent rule, not an alarm. */
.process-step__catch {
  margin-top: 0.6rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--accent);
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.process-step__catch strong { color: var(--ink); font-weight: 700; }

/* Reserved slot: a screenshot of the real myway flow can drop in here
   later without touching the markup around it. */
.process-step__media { margin-top: 0.9rem; }
.process-step__media img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

@media (max-width: 700px) {
  .process-step { grid-template-columns: 1.9rem 1fr; column-gap: 0.85rem; }
  .process-step__num { width: 1.9rem; height: 1.9rem; font-size: 0.72rem; }
  .process-step::before { left: 0.89rem; top: 1.7rem; }
  .process-step__title { font-size: 1rem; }
}

/* ── PERSONA CARDS ── */
.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}
@media (max-width: 700px) { .persona-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) and (min-width: 701px) { .persona-grid { grid-template-columns: 1fr 1fr; } }

.persona-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
  background: var(--card-bg);
}
.persona-card.highlight {
  border-color: var(--accent);
  background: var(--accent-light);
}
.persona-card.highlight-green {
  border-color: rgba(45,106,79,0.3);
  background: var(--green-light);
}
.persona-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.persona-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.persona-verdict {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.verdict-leje { color: var(--accent); }
.verdict-eje { color: var(--green); }
.persona-card p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; line-height: 1.65; }

/* ── FAQ ── */
.faq-list { margin: 1.5rem 0; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 1.2rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: 'Mulish', sans-serif;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  gap: 1rem;
}
.faq-q:hover { color: var(--accent); }
.faq-icon {
  width: 22px; height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--accent);
  transition: transform 0.25s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s;
}
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 1.2rem; }
.faq-a p { font-size: 0.93rem; color: var(--ink-soft); margin: 0; line-height: 1.75; }

/* ── SIDEBAR ── */
.sidebar { position: sticky; top: 80px; }
@media (max-width: 960px) { .sidebar { position: static; } }

.toc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
}
.toc-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1rem;
}
.toc-list { list-style: none; }
.toc-list li { margin-bottom: 0.45rem; }
.toc-list a {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.4;
  transition: color 0.2s;
}
.toc-list a::before {
  content: '';
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.6em;
}
.toc-list a:hover { color: var(--accent); }

.sidebar-cta {
  background: var(--surface-dark);
  border-radius: 10px;
  padding: 1.6rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sidebar-cta::before {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(232,81,10,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.sidebar-cta-eyebrow {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.sidebar-cta h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.7rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.sidebar-cta p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.2rem;
  line-height: 1.65;
}
.btn-accent-sm {
  display: block;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
}
.btn-accent-sm:hover { opacity: 0.88; }

/* ── FINAL CTA ── */
.cta-final {
  background: var(--surface-dark);
  color: #fff;
  text-align: center;
  padding: 5rem 5vw;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(232,81,10,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-final .section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.cta-final .section-label::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1px;
  background: rgba(255,255,255,0.25);
}
.cta-final h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 1rem;
}
.cta-final h2 em { font-style: italic; color: var(--accent); }
.cta-final p { color: rgba(255,255,255,0.5); max-width: 46ch; margin: 0 auto 2.4rem; font-size: 1rem; line-height: 1.75; }
.btn-white {
  background: #fff;
  color: #1a1814;
  padding: 0.9rem 2.4rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
.btn-white:hover { opacity: 0.9; }

/* ── FOOTER ── */
.site-footer { background: #0f0d0b; padding: 2.5rem 5vw 1.75rem; position: relative; z-index: 1; }
.footer-card { position: relative; background: var(--card-bg, #fff); border-radius: 20px; max-width: 960px; margin: 0 auto; padding: 2.5rem 2rem 2rem; }
.footer-tape { position: absolute; top: -18px; width: 71px; height: 60px; display: none; }
@media (min-width: 640px) { .footer-tape { display: block; } }
.footer-tape--tl { left: -8px; }
.footer-tape--tr { right: -8px; transform: rotate(90deg); transform-origin: center; }
.footer-tape svg { width: 100%; height: 100%; }
.footer-inner { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 640px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.footer-brand { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-logo-link img { height: 30px; width: auto; display: block; }
.footer-tagline { font-size: 0.85rem; color: var(--ink-muted, #9a9590); max-width: 240px; line-height: 1.55; margin: 0; }
.footer-cols { display: flex; gap: 2.5rem; }
.footer-col-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted, #9a9590); margin: 0 0 0.75rem 0; }
.footer-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col-list a { font-size: 0.875rem; color: var(--ink-soft, #4a4640); text-decoration: none; font-weight: 500; white-space: nowrap; transition: color 0.15s; }
.footer-col-list a:hover, .footer-col-all { color: var(--accent, #c24408) !important; }
.footer-col-all { font-weight: 600 !important; }
.footer-bottom { max-width: 960px; margin: 1.25rem auto 0; display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-bottom-left { display: flex; flex-direction: column; gap: 0.35rem; }
@media (min-width: 640px) { .footer-bottom-left { flex-direction: row; align-items: center; gap: 1.5rem; } }
.footer-copy { font-size: 0.78rem; color: rgba(255,255,255,0.35); white-space: nowrap; margin: 0; }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.footer-bottom-links a { font-size: 0.78rem; color: rgba(255,255,255,0.35); text-decoration: none; transition: color 0.15s; }
.footer-bottom-links a:hover { color: rgba(255,255,255,0.7); }
.footer-social { display: flex; align-items: center; }
.footer-social a { display: flex; align-items: center; color: rgba(255,255,255,0.35); transition: color 0.15s; text-decoration: none; }
.footer-social a:hover { color: rgba(255,255,255,0.8); }

/* Buy Me a Coffee — støttelink nederst til venstre. Farverne er faste frem for
   tema-variable: båndet bag ved er altid #0f0d0b, også i light mode. */
.footer-coffee {
  display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap; text-decoration: none;
  color: rgba(255,255,255,0.55);
  padding: 0.32rem 0.72rem;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  background: rgba(255,255,255,0.03);
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.footer-coffee:hover { color: #f8763a; border-color: rgba(240,90,21,0.5); background: rgba(240,90,21,0.12); }
.footer-coffee:focus-visible { color: #f8763a; outline: 2px solid #f05a15; outline-offset: 2px; }
.footer-coffee:active { transform: translateY(1px); }
.footer-coffee-cup { flex: none; }
.footer-coffee-steam { opacity: 0; }
.footer-coffee:hover .footer-coffee-steam,
.footer-coffee:focus-visible .footer-coffee-steam { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .footer-coffee-cup { transition: transform 0.25s ease; }
  .footer-coffee-steam { transition: opacity 0.25s ease, transform 0.35s ease; }
  .footer-coffee:hover .footer-coffee-cup,
  .footer-coffee:focus-visible .footer-coffee-cup { transform: translateY(-1px); }
  .footer-coffee:hover .footer-coffee-steam,
  .footer-coffee:focus-visible .footer-coffee-steam { transform: translateY(-1px); }
}

/* ── ANIMATIONS ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── PRINT ── */
@media print {
  nav, .sidebar, .cta-final, footer, .inline-cta { display: none; }
  body { background: #fff; color: #000; }
  .article-wrap { grid-template-columns: 1fr; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }

  /* Keep the sequence readable on paper: no step split across a page, and
     the accent carried by weight rather than colour. */
  .process-step { break-inside: avoid; page-break-inside: avoid; }
  .process-step::before { background: #000 !important; opacity: 1 !important; }
  .process-step__num {
    background: #fff !important; color: #000 !important; border-color: #000 !important;
  }
  .process-step__title, .process-step__body, .process-step__catch { color: #000 !important; }
  .process-step__actor { color: #000 !important; border-color: #000 !important; }
  .process-step__catch { border-left-color: #000 !important; }
}

/* ── THEME SWITCHER ── */
html[data-theme="dark"] {
  --cream: #14120f; --paper: #1c1914; --ink: #f0ede8;
  --ink-soft: #b5b0aa; --ink-muted: #6a6560; --accent: #f05a15; --on-accent: #14120f;
  --accent-light: #2a1a0f; --green: #3d8f68; --green-light: #1a3028;
  --border: rgba(240,237,232,0.1); --card-bg: #1f1c18; --surface-dark: #141210;
}
html[data-theme="light"] {
  --cream: #faf8f4; --paper: #f4f1eb; --ink: #1a1814;
  --ink-soft: #4a4640; --ink-muted: #9a9590; --accent: #c24408; --on-accent: #ffffff;
  --accent-light: #fff0e8; --green: #2d6a4f; --green-light: #e8f5ee;
  --border: rgba(26,24,20,0.1); --card-bg: #ffffff; --surface-dark: #1a1814;
}
/* ── SKY TOGGLE ── */
.sky-switch {
  --toggle-size: 12px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  cursor: pointer;
  display: block;
}
.sky-switch, .sky-switch *, .sky-switch *::before, .sky-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}
.sky-switch__checkbox { display: none; }
.sky-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0,0,0,0.25), 0em 0.062em 0.125em rgba(255,255,255,0.94);
  transition: var(--transition);
  position: relative;
}
.sky-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0,0,0,0.25) inset, 0em 0.05em 0.187em rgba(0,0,0,0.25) inset;
  border-radius: var(--container-radius);
}
.sky-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255,255,255,0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255,255,255,0.1), inset 0 0 0 3.375em rgba(255,255,255,0.1), 0 0 0 0.625em rgba(255,255,255,0.1), 0 0 0 1.25em rgba(255,255,255,0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}
.sky-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254,255,239,0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0,0,0,0.25)) drop-shadow(0em 0.062em 0.125em rgba(0,0,0,0.25));
  overflow: hidden;
  transition: var(--transition);
}
.sky-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254,255,239,0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: var(--transition);
  position: relative;
}
.sky-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0,0,0,0.25) inset;
}
.sky-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}
.sky-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}
.sky-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}
.sky-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--transition);
}
.sky-switch__checkbox:checked + .sky-switch__container {
  background-color: var(--container-night-bg);
}
.sky-switch__checkbox:checked + .sky-switch__container .sky-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.sky-switch__checkbox:checked + .sky-switch__container .sky-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}
.sky-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}
.sky-switch__checkbox:checked + .sky-switch__container .sky-switch__moon {
  transform: translate(0);
}
.sky-switch__checkbox:checked + .sky-switch__container .sky-switch__clouds {
  bottom: -4.062em;
}
.sky-switch__checkbox:checked + .sky-switch__container .sky-switch__stars-container {
  top: 50%;
  transform: translateY(-50%);
}

/* ── STICKY MOBILE CTA ─────────────────────────────────────────────────
   Articles run ~1900 words. On mobile the sidebar CTA jumps above the text
   (order: -1), so the reader meets it before they have any intent, and then
   nothing follows them down. This bar fills that gap.
   Injected by site-nav.js on article pages only. ──────────────────────── */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px -12px rgba(26, 24, 20, 0.4);
  transform: translateY(110%);
  transition: transform 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

.sticky-cta.is-visible { transform: translateY(0); }

.sticky-cta__text {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.sticky-cta__text strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.86rem;
}

.sticky-cta__link {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.6rem 0.95rem;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.sticky-cta__link:hover { filter: brightness(1.06); }
.sticky-cta__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.sticky-cta__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.35rem 0.15rem;
}

.sticky-cta__close:hover { color: var(--ink); }
.sticky-cta__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Only on the narrow layouts where the sidebar has collapsed away. */
@media (max-width: 960px) {
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 4.5rem; }

  /* The theme toggle is fixed bottom-right at z-index 999, so it sat on top of
     the sticky bar — covering the "Se priser" button and the close control on
     every article. Lift it clear while the bar is up. Browsers without :has()
     simply keep the previous behaviour. */
  body:has(.sticky-cta.is-visible) .sky-switch {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

.sky-switch { transition: bottom 0.28s ease; }
@media (prefers-reduced-motion: reduce) {
  .sky-switch { transition: none; }
}

@media print {
  .sticky-cta { display: none !important; }
}